/* The Destined Day - Party Ledger */
:root{
    --void:#08060f;
    --ink:#0C0A15; --ink-deep:#08060F; --ink-panel:#0C0A15;
    --parchment:#f4ecd8; --parchment-dim:#e6d9b4; --parchment-line:#d3c191;
    --gold:#c9a227; --gold-bright:#e8c65a; --gold-deep:#8a6d1c;
    --burgundy:#8f2c3b; --burgundy-bright:#b23c4e;
    --emerald:#3d715a; --emerald-bright:#57967a;
    --slate:#8f89a3; --slate-dark:#4a4560;
  /* Every bounding box in the app uses this one gradient, so no panel ever
     reads a different shade from the setting brief on the Overview. */
  /* Opaque on purpose. These were semi-transparent, which meant a panel over
     the portrait wall (the setting brief) rendered lighter than the identical
     panel over empty page (campaign stats) - same CSS, different backdrop.
     Baked to the colour the brief was already compositing to, so every box
     matches exactly. Artwork is an <img> layer INSIDE these panels, so it is
     unaffected. */
  /* Matched to what the Overview box actually renders as: its scrim overlays
     the panel with near-void, so the visible interior is much darker than the
     raw panel colour was. Cards now use that same near-black. */
  --panel:linear-gradient(180deg, #0C0A15 0%, #08060F 100%);
  --panel-border:1px solid rgba(201,162,39,.18);
  --panel-radius:12px;
  --panel-solid:linear-gradient(180deg, #262231 0%, #1B1824 100%);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--void);color:var(--parchment);font-family:'Inter',system-ui,sans-serif;min-height:100vh;padding:24px 20px 60px;position:relative}
  /* Ambient backdrop: a warm candlelit bloom over a deep void, with a faint
     star layer and a fine grain to kill gradient banding. Fixed and inert so
     it never interferes with scrolling or pointer events. */
  body::before{
    content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:
      radial-gradient(1100px 620px at 50% -10%, rgba(226,189,66,.13), transparent 62%),
      radial-gradient(900px 700px at 88% 8%, rgba(87,150,122,.07), transparent 60%),
      radial-gradient(800px 620px at 6% 22%, rgba(143,44,59,.07), transparent 58%),
      linear-gradient(180deg, #100d1d 0%, #0a0813 55%, #08060f 100%);
  }
  body::after{
    content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
    background-image:
      radial-gradient(1.4px 1.4px at 12% 18%, rgba(244,236,216,.55), transparent),
      radial-gradient(1.2px 1.2px at 32% 42%, rgba(244,236,216,.4), transparent),
      radial-gradient(1.6px 1.6px at 58% 12%, rgba(232,198,90,.5), transparent),
      radial-gradient(1.1px 1.1px at 74% 34%, rgba(244,236,216,.42), transparent),
      radial-gradient(1.5px 1.5px at 88% 62%, rgba(244,236,216,.36), transparent),
      radial-gradient(1.2px 1.2px at 22% 72%, rgba(232,198,90,.34), transparent),
      radial-gradient(1.3px 1.3px at 46% 86%, rgba(244,236,216,.3), transparent),
      radial-gradient(1.1px 1.1px at 66% 68%, rgba(244,236,216,.32), transparent),
      radial-gradient(1.4px 1.4px at 92% 22%, rgba(244,236,216,.34), transparent),
      radial-gradient(1.2px 1.2px at 8% 52%, rgba(244,236,216,.28), transparent);
    background-repeat:no-repeat;
  }
  .font-display{font-family:'Cormorant Garamond',Georgia,serif;letter-spacing:.01em}
  .font-mono{font-family:'JetBrains Mono',monospace}
  ::-webkit-scrollbar{height:8px;width:8px}
  ::-webkit-scrollbar-thumb{background:rgba(211,193,145,.33);border-radius:4px}
  input,textarea,select{background:var(--ink);border:1px solid rgba(211,193,145,.27);border-radius:6px;padding:7px 10px;color:var(--parchment);font-size:13px;font-family:inherit;outline:none}
  textarea{resize:vertical}
  input:focus,textarea:focus,select:focus{border-color:var(--gold)}
  button{font-family:inherit}

  /* Scale with the viewport on widescreen rather than capping at 1320px -
     the timeline in particular was being cut off and forced to scroll. */
  .container{width:min(1800px, 94vw);margin:0 auto}
  @media (max-width:1400px){ .container{width:min(1320px, 94vw)} }
  @media (max-width:760px){ .container{width:auto;margin:0} }
  .topbar{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;margin-bottom:22px}
  .brand{display:flex;align-items:center;gap:10px}
  .brand h1{font-size:26px;font-weight:700;color:var(--parchment);letter-spacing:.02em;margin:0}
  .subtitle{color:var(--slate);font-size:12.5px;margin:2px 0 0}
  #save-status{color:var(--slate-dark);font-size:11px;font-family:'JetBrains Mono',monospace;max-width:260px;text-align:right}

  .tabs{display:flex;gap:6px;background:var(--ink-panel);padding:6px;border-radius:10px;width:fit-content;margin-bottom:16px;flex-wrap:wrap}
  .global-search{position:relative;margin-bottom:0;flex:1 1 320px;max-width:380px;align-self:center}
  .global-search-box{display:flex;align-items:center;gap:8px;background:var(--ink-panel);border:1px solid rgba(211,193,145,.15);border-radius:9px;padding:8px 12px}
  .global-search-box input{flex:1;background:transparent;border:none;color:var(--parchment);font-size:13px;outline:none}
  .global-search-box input::placeholder{color:var(--slate)}
  .global-search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--ink-panel);border:1px solid rgba(211,193,145,.2);border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:20;max-height:360px;overflow-y:auto}
  .global-search-result{display:flex;gap:10px;align-items:center;padding:10px 12px;cursor:pointer;border-bottom:1px solid rgba(211,193,145,.08)}
  .global-search-result:last-child{border-bottom:none}
  .global-search-result:hover{background:rgba(226,189,66,.08)}
  .tab-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;border:1px solid transparent;cursor:pointer;background:transparent;color:var(--parchment-dim);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;transition:color .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
  .tab-btn:hover{color:var(--gold-bright);border-color:rgba(232,198,90,.34);background:radial-gradient(circle at 50% 115%,rgba(232,198,90,.22),transparent 62%),rgba(232,198,90,.06);box-shadow:0 0 16px rgba(232,198,90,.16),inset 0 0 12px rgba(232,198,90,.07);transform:translateY(-1px)}
  .tab-btn.active{background:var(--gold);color:var(--ink-deep)}
  .tab-btn.active:hover{color:var(--ink-deep);border-color:var(--gold-bright);background:linear-gradient(180deg,var(--gold-bright),var(--gold));box-shadow:0 0 20px rgba(232,198,90,.35),inset 0 1px rgba(255,255,255,.25)}

  .tab-body{display:flex;flex-direction:column;gap:24px}
  .section-title{color:var(--parchment);font-size:20px;margin:0 0 4px;font-weight:600}
  .sub-title{color:var(--parchment);font-size:15px;margin:0 0 10px;font-weight:600}
  .muted{color:var(--slate)}
  .small{font-size:13.5px}
  .tiny{font-size:11px}
  .row{display:flex}
  .row-between{display:flex;justify-content:space-between}
  .fwrap{flex-wrap:wrap}
  .stack{display:flex;flex-direction:column;gap:8px}
  .full-width{width:100%}
  .loading{min-height:400px;display:flex;align-items:center;justify-content:center;color:var(--slate)}

  .card{background:var(--ink-panel);border:1px solid rgba(211,193,145,.13);border-radius:10px;padding:16px}
  .icon-btn{background:none;border:none;cursor:pointer;padding:4px;display:inline-flex}
  .btn-primary{display:flex;align-items:center;gap:6px;background:var(--gold);color:var(--ink-deep);border:none;border-radius:8px;padding:9px 14px;font-size:12.5px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.03em}
  .btn-ghost{display:flex;align-items:center;gap:5px;background:transparent;color:var(--slate);border:1px solid rgba(211,193,145,.2);border-radius:6px;padding:6px 10px;font-size:11px;cursor:pointer}
  .btn-save{display:flex;align-items:center;gap:5px;background:var(--emerald);color:var(--parchment);border:none;border-radius:6px;padding:7px 12px;font-size:12px;cursor:pointer}
  .btn-delete{display:flex;align-items:center;gap:5px;background:transparent;color:var(--burgundy-bright);border:1px solid var(--burgundy);border-radius:6px;padding:6px 10px;font-size:12px;cursor:pointer}
  .nav-btn{width:30px;height:30px;border-radius:7px;border:1px solid rgba(211,193,145,.2);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}

  .callout{display:flex;gap:10px;align-items:center;background:var(--ink-panel);border:1px solid rgba(211,193,145,.2);border-radius:10px;padding:10px 16px;width:fit-content}

  .beacon-wrap{overflow-x:auto}
  .beacon-recommend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .beacon-rec-chip{display:flex;flex-direction:column;gap:2px;background:var(--ink-panel);border:1px solid rgba(226,189,66,.3);border-radius:8px;padding:8px 12px;cursor:pointer;text-align:left}
  .beacon-rec-chip:hover{border-color:var(--gold-bright)}
  .beacon-table{border-collapse:separate;border-spacing:6px;min-width:640px}
  .beacon-table th{font-weight:600;font-size:11px}
  .beacon-cell{border-radius:7px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid transparent;outline:none}
  .beacon-cell-sm{width:54px;height:28px}
.beacon-cell.picked{outline:2px solid var(--parchment);outline-offset:1px}
.beacon-cell.picked-continuation{outline-color:var(--gold-bright)}
  .row-label{display:flex;align-items:center;gap:6px;white-space:nowrap;padding-right:6px}

  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{font-size:12.5px;padding:4px 10px;border-radius:999px}
  .chip-emerald{background:rgba(61,113,90,.2);border:1px solid var(--emerald);color:var(--parchment-dim)}

  .two-col{display:flex;gap:22px;flex-wrap:wrap}
  .two-col>div{flex:1 1 280px}

  .overview-layout{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
  .overview-layout-2col{grid-template-columns:280px minmax(0,1fr) 320px;align-items:start}
  .overview-lists{display:flex;flex-direction:column;gap:16px;min-width:0}
  .overview-lists .card{margin:0}
  @media (max-width:1400px){
    .overview-layout-2col{grid-template-columns:280px minmax(0,1fr)}
    .overview-lists{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
    .overview-lists > *{flex:1 1 320px}
  }
  .overview-sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:16px}
  .overview-sidebar-left{max-height:calc(100vh - 32px);overflow-y:auto}
  .overview-stat-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0}
  .overview-stat-val{font-family:'JetBrains Mono',monospace;color:var(--gold-bright);font-size:15px;font-weight:600}
  @media (max-width:900px){ .overview-layout-2col{grid-template-columns:1fr}
    .overview-sidebar-left{position:static;max-height:none}
    .overview-lists{grid-column:auto;flex-direction:column;width:100%;max-width:100%}
    .overview-lists > *{flex:0 0 auto;width:100%;min-width:0}
  }
  @media (max-width:960px){ .overview-layout{grid-template-columns:1fr} .overview-sidebar{position:static} }

  .sessions-split{display:flex;gap:22px;align-items:flex-start}
  .sessions-split-log{flex:1 1 480px;min-width:280px}
  .sessions-split-timeline{padding-left:4px}
  .sessions-split-timeline-col{flex:0 0 260px;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto}
  .overview-mini-timeline{padding-left:0}
  .mini-tl-item{display:flex;gap:10px;align-items:flex-start;padding:6px 4px;cursor:pointer;border-radius:6px;position:relative}
  .mini-tl-item:hover{background:rgba(211,193,145,.06)}
  .mini-tl-rail{position:relative;width:10px;flex:0 0 10px;display:flex;justify-content:center}
  .mini-tl-rail::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:rgba(211,193,145,.18)}
  .mini-tl-item:first-child .mini-tl-rail::before{top:50%}
  .mini-tl-item:last-child .mini-tl-rail::before{bottom:50%}
  .mini-tl-dot{width:9px;height:9px;border-radius:50%;background:var(--ink-deep);border:2px solid var(--gold-bright);margin-top:4px;position:relative;z-index:1;flex:0 0 9px}
  .mini-tl-dot.mini-tl-future{background:var(--emerald-bright);border-color:var(--emerald-bright)}
  .mini-tl-dot.mini-tl-active{border-color:var(--burgundy-bright);box-shadow:0 0 0 3px rgba(178,60,78,.25)}
  .mini-tl-body{flex:1;min-width:0}
  .mini-tl-date{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--gold-bright);font-weight:600}
  .mini-tl-title{font-size:11.5px;color:var(--parchment-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mini-tl-dm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  @media (max-width:900px){ .sessions-split{flex-direction:column}
    .sessions-split-timeline{position:static;max-height:none;flex:1 1 auto;width:100%} }
  .session-row{display:flex;align-items:center;gap:12px;background:var(--ink-panel);border-radius:8px;padding:10px 14px;border:1px solid rgba(143,44,59,.33)}
  .due-row{display:flex;align-items:center;gap:10px;background:var(--ink-panel);border-radius:8px;padding:9px 14px;border:1px solid rgba(211,193,145,.13)}

  .grid-wrap{overflow-x:auto;border:1px solid rgba(211,193,145,.2);border-radius:10px}
  .avail-table{border-collapse:collapse;width:100%;min-width:900px}
  .sticky-col{position:sticky;left:0;background:var(--ink);z-index:2}
  .day-head{color:var(--gold-bright);font-size:12px;padding:8px 6px;border-bottom:1px solid rgba(211,193,145,.2)}
  .player-cell{padding:8px 14px;min-width:190px;vertical-align:top}
  .alt-row{background:rgba(36,33,56,.33)}
  .avail-cell-td{padding:6px;vertical-align:top;min-width:120px}
  .avail-cell{background:transparent;border:1px dashed rgba(211,193,145,.18);border-radius:6px;width:100%;min-height:38px;padding:4px 6px;cursor:pointer;text-align:left}
  .avail-chip{display:inline-block;background:rgba(61,113,90,.25);border:1px solid var(--emerald);color:var(--parchment-dim);font-size:10.5px;padding:2px 6px;border-radius:5px;margin:2px 3px 2px 0}

  .roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
  .roster-fields{width:100%;border-collapse:collapse;margin-top:10px}
  .roster-fields td{padding:4px 0;vertical-align:top}
  .roster-fields td:first-child{width:92px;padding-right:8px;white-space:nowrap}
  .sort-toggle{display:inline-flex;gap:4px;background:var(--ink-panel);border-radius:7px;padding:3px;align-self:flex-start;width:auto;flex:0 0 auto}
  .sort-btn{border:1px solid transparent;border-radius:5px;padding:6px 9px;font-size:11px;cursor:pointer;background:transparent;color:var(--slate);transition:color .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
  .sort-btn:hover{color:var(--gold-bright);border-color:rgba(232,198,90,.3);background:rgba(232,198,90,.075);box-shadow:0 0 13px rgba(232,198,90,.14),inset 0 0 9px rgba(232,198,90,.05);transform:translateY(-1px)}
  .sort-btn.active{background:var(--gold);color:var(--ink-deep)}
  .sort-btn.active:hover{color:var(--ink-deep);border-color:var(--gold-bright);background:linear-gradient(180deg,var(--gold-bright),var(--gold));box-shadow:0 0 16px rgba(232,198,90,.3)}

  .year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .year-tile{background:var(--ink-panel);border:1px solid rgba(211,193,145,.1);border-radius:8px;padding:12px 10px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px}
  .year-tile:hover{border-color:var(--gold)}
  .year-tile-current{border-color:var(--gold-bright);box-shadow:0 0 0 1px var(--gold-bright) inset}
  .year-tile-name{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:15px;color:var(--parchment)}
  .year-tile-count{margin-top:2px}
  @media (max-width:480px){ .year-grid{grid-template-columns:repeat(2,1fr)} }

  .two-panel{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
  .cal-panel{flex:1 1 380px;min-width:320px}
  .cal-day-panel{flex:1 1 340px;min-width:300px}
  .cal-weekday-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
  .cal-weekday{text-align:center;color:var(--slate);font-size:11px}
  .cal-week-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
  .cal-day{aspect-ratio:1;border-radius:8px;border:1px solid rgba(211,193,145,.13);background:transparent;cursor:pointer;font-size:12.5px;position:relative;display:flex;align-items:center;justify-content:center}
  .cal-day.sel{border:1.5px solid var(--gold-bright);background:rgba(201,162,39,.13)}
  .cal-day.has-session:not(.sel){background:rgba(143,44,59,.13)}
  .cal-day.upcoming:not(.sel){background:rgba(61,113,90,.18)}
  .session-dot{position:absolute;bottom:4px;width:5px;height:5px;border-radius:50%;background:var(--burgundy-bright)}
  .session-dot.upcoming{background:var(--emerald-bright)}
  .legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--burgundy-bright);margin-right:5px}

  .label-caps{text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
  .attendee-list{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto;padding-right:4px}
  .attendee-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px}
  .attendee-name{color:var(--parchment-dim);font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .form-card{border:1px solid rgba(226,189,66,.33);margin-bottom:20px}
  .form-attendee-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px;max-height:260px;overflow-y:auto;margin-bottom:14px}
  .form-attendee{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer}
  .form-attendee.checked{background:rgba(61,113,90,.13)}
  .session-card{cursor:pointer}

  .range-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
  .rule-card{border:1px solid rgba(211,193,145,.2);border-radius:8px;padding:10px;margin-bottom:10px;background:rgba(36,33,56,.4)}

  .char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
  .char-card{background:var(--ink-panel);border:1px solid rgba(211,193,145,.13);border-radius:10px;overflow:hidden;cursor:pointer;text-align:left;padding:0;height:100%;display:flex;flex-direction:column}
  .char-portrait{width:100%;height:140px;object-fit:cover;object-position:50% 20%;background:var(--ink);display:block;flex:0 0 140px}
  .char-portrait-placeholder{width:100%;height:140px;display:flex;align-items:center;justify-content:center;background:var(--ink);flex:0 0 140px}
  .char-body{padding:12px;flex:1;display:flex;flex-direction:column}
  .badge-pill{display:inline-block;background:rgba(201,162,39,.18);color:var(--gold-bright);font-size:10.5px;padding:2px 8px;border-radius:999px;margin:2px 4px 0 0}

  .tl-strip{display:flex;gap:16px;flex-wrap:wrap}
  .tl-month{flex:1 1 280px;min-width:260px}
  .tl-month-label{color:var(--parchment);font-size:14px;margin-bottom:8px;text-align:center}
  .tl-weekday-row{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px}
  .tl-weekday{text-align:center;color:var(--slate);font-size:10px}
  .tl-week{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px}
  .tl-day{position:relative;border:1px solid rgba(211,193,145,.1);border-radius:5px;min-height:44px;padding:2px 3px;font-size:9.5px;color:var(--slate-dark);cursor:pointer;background:transparent}
  .tl-day.out{opacity:.35}
  .tl-day.today .tl-daynum{color:var(--gold-bright);font-weight:700}
  .tl-day.has-session{border-color:rgba(143,44,59,.5);background:rgba(143,44,59,.08)}
  .tl-day.upcoming{border-color:rgba(61,113,90,.5);background:rgba(61,113,90,.12)}
  .tl-daynum{color:var(--parchment-dim)}
  .tl-avatars{display:flex;gap:2px;margin-top:2px;flex-wrap:wrap}
  .tl-avatar{width:14px;height:14px;border-radius:50%;object-fit:cover;background:var(--ink);border:1px solid rgba(211,193,145,.4);display:inline-flex;align-items:center;justify-content:center;font-size:8px;color:var(--parchment-dim);font-weight:700}
  .tl-avatar-fallback{background:var(--emerald)}
  .tl-avatar-more{background:var(--slate-dark);color:var(--parchment-dim)}
  .tl-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-6px);background:var(--ink-panel);border:1.5px solid var(--gold-bright);border-radius:8px;padding:10px 12px;min-width:180px;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity 120ms ease;z-index:20}
  .tl-day.has-session:hover .tl-tooltip{opacity:1}
  .tl-tooltip-title{color:var(--gold-bright);font-weight:700;font-size:12px;margin-bottom:2px}
  .tl-tooltip-date{color:var(--slate);font-size:10.5px;margin-bottom:6px}
  .tl-tooltip-dm{color:var(--parchment-dim);font-size:10.5px;margin-bottom:6px}
  .tl-tooltip-list{font-size:11px;color:var(--parchment-dim);display:flex;flex-direction:column;gap:2px}

  .chronicle-wrap{position:relative;padding-left:34px;max-width:720px}
  .chronicle-spine{position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(to bottom, var(--gold-bright), var(--burgundy-bright))}
  .chronicle-item{position:relative;margin-bottom:16px;cursor:pointer}
  .chronicle-dot{position:absolute;left:-30px;top:6px;width:13px;height:13px;border-radius:50%;background:var(--ink-deep);border:2.5px solid var(--gold-bright);z-index:1}
  .chronicle-dot.future{border-color:var(--burgundy-bright)}
  .chronicle-card{background:var(--ink-panel);border:1px solid rgba(211,193,145,.15);border-radius:10px;padding:12px 16px}
  .chronicle-card:hover{border-color:rgba(226,189,66,.4)}

  .chrono-tree-wrap{position:relative;width:100%;box-sizing:border-box;padding:0 20px;overflow-x:auto}
  .chrono-tree-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
  .chrono-tree-card{position:absolute;padding:8px 10px;background:var(--ink-panel);border:1px solid rgba(211,193,145,.18);border-radius:8px;transform:translateY(-50%);cursor:pointer;z-index:2;box-sizing:border-box}
  .chrono-tree-card:hover{border-color:rgba(226,189,66,.5)}
  .chrono-tree-card.in-series{border-color:rgba(178,60,78,.4)}
  .chrono-today-label{position:absolute;top:-8px;left:50%;transform:translate(-50%,0);background:var(--gold);color:var(--ink-deep);font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;z-index:3}
  .chrono-start-marker{position:absolute;left:50%;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:3}
  .chrono-start-dot{width:16px;height:16px;border-radius:50%;background:var(--emerald-bright);border:3px solid var(--ink-deep);box-shadow:0 0 0 2px var(--emerald-bright)}
  .chrono-start-label{background:var(--emerald-bright);color:var(--ink-deep);font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:8px;white-space:nowrap;text-align:center;line-height:1.4}
  .chrono-period-marker{position:absolute;transform:translate(-50%,-50%);font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--slate);background:var(--ink-deep);padding:1px 5px;border-radius:4px;white-space:nowrap;pointer-events:none;z-index:1;border:1px solid rgba(211,193,145,.15);margin-left:34px}
  .chrono-period-marker.chrono-period-year{color:var(--gold-bright);font-weight:700;font-size:10.5px;border-color:rgba(226,189,66,.4)}
  .chrono-arc-boundary{position:absolute;left:0;right:0;z-index:2;display:flex;align-items:center;gap:10px;pointer-events:none}
  .chrono-arc-boundary-line{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--gold-bright) 0 6px,transparent 6px 12px);opacity:0.55}
  .chrono-arc-boundary-label{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:12px;color:var(--gold-bright);background:var(--ink-deep);padding:2px 10px;border-radius:5px;border:1px solid rgba(226,189,66,.4);white-space:nowrap}

  .modal-backdrop{position:fixed;inset:0;background:rgba(16,14,28,.72);z-index:50;backdrop-filter:blur(2px)}
  .modal-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:51;background:var(--ink-panel);border:1px solid rgba(226,189,66,.35);border-radius:12px;padding:18px 20px;width:min(92vw,540px);max-height:82vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.55)}
  /* ============================================================
     Visual layer — celestial / candlelit treatment.
     Appended last so these refinements win over the base rules
     above without needing to rewrite them.
     ============================================================ */

  /* --- Typography scale --- */
  h1.font-display{font-weight:700;letter-spacing:.005em}
  .section-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:30px;letter-spacing:.005em;line-height:1.12;margin:2px 0 4px}
  .sub-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:19px}
  .label-caps{font-family:'Marcellus',Georgia,serif;letter-spacing:.16em;text-transform:uppercase;font-size:10px;color:var(--gold);opacity:.85}
  .subtitle{font-family:'Marcellus',Georgia,serif;letter-spacing:.1em;font-size:11px;color:var(--slate);text-transform:uppercase}

  /* Eyebrow above each page title gets a hairline + diamond, so the
     heading reads as an entry in a ledger rather than a bare label. */
  .kicker{font-family:'Marcellus',Georgia,serif;letter-spacing:.2em;text-transform:uppercase;font-size:9.5px;color:var(--gold);opacity:.9;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden}
  .kicker::after{content:'';flex:0 0 110px;min-width:0;height:1px;background:linear-gradient(90deg,rgba(201,162,39,.55),transparent)}

  /* --- Panels --- */
  .card{
    background:var(--panel);
    border:1px solid rgba(201,162,39,.16);
    border-radius:10px;
    box-shadow:0 1px 0 rgba(244,236,216,.045) inset, 0 10px 28px -12px rgba(0,0,0,.7);
    backdrop-filter:blur(3px);
  }
  .card:hover{border-color:rgba(201,162,39,.28)}
  .grid-wrap,.beacon-wrap{
    background:var(--panel);
    border:1px solid rgba(201,162,39,.14);border-radius:10px;
    box-shadow:0 10px 28px -14px rgba(0,0,0,.7);
  }
  .beacon-rec-chip{
    background:linear-gradient(180deg, rgba(201,162,39,.10), rgba(201,162,39,.03));
    border:1px solid rgba(201,162,39,.22);border-radius:8px;
    transition:border-color .16s ease, background .16s ease;
  }
  .beacon-rec-chip:hover{border-color:rgba(232,198,90,.5);background:linear-gradient(180deg, rgba(201,162,39,.16), rgba(201,162,39,.05))}
  .due-row{border-radius:8px;border:1px solid rgba(201,162,39,.10);background:rgba(28,26,34,.55)}
  .due-row:hover{border-color:rgba(201,162,39,.24)}

  /* --- Top bar & navigation --- */
  .topbar{
    border-bottom:1px solid rgba(201,162,39,.16);
    padding-bottom:16px;margin-bottom:4px;
  }
  .tabs{
    background:linear-gradient(180deg, rgba(32,29,38,.8), rgba(21,19,26,.8));
    border:1px solid rgba(201,162,39,.14);
    box-shadow:0 8px 24px -14px rgba(0,0,0,.8);
    backdrop-filter:blur(6px);
  }
  .tab-btn{
    font-family:'Marcellus',Georgia,serif;letter-spacing:.11em;text-transform:uppercase;
    font-size:11.5px;font-weight:400;position:relative;transition:color .18s ease,background .18s ease,box-shadow .18s ease;
  }
  .tab-btn:hover{color:var(--gold-bright)}
  /* Active tab reads as a lit sconce: warm wash + a gold underline that
     glows, rather than a flat filled pill. */
  .tab-btn.active{
    background:linear-gradient(180deg, rgba(232,198,90,.16), rgba(232,198,90,.05));
    color:var(--gold-bright);
    box-shadow:inset 0 -2px 0 var(--gold-bright), 0 0 18px -4px rgba(232,198,90,.45);
  }

  /* --- Inputs --- */
  input,textarea,select{background:rgba(16,13,29,.75);border-color:rgba(201,162,39,.2);transition:border-color .16s ease,box-shadow .16s ease}
  input:focus,textarea:focus,select:focus{outline:none;border-color:rgba(232,198,90,.65);box-shadow:0 0 0 3px rgba(232,198,90,.12)}
  .global-search-box{background:linear-gradient(180deg, rgba(32,29,38,.85), rgba(21,19,26,.85));border:1px solid rgba(201,162,39,.16)}

  /* --- Buttons --- */
  .btn-primary{
    background:linear-gradient(180deg, var(--gold-bright), var(--gold));
    color:var(--void);border:1px solid rgba(232,198,90,.5);
    box-shadow:0 2px 14px -4px rgba(232,198,90,.5);
    font-weight:600;letter-spacing:.02em;
  }
  .btn-primary:hover{filter:brightness(1.07)}
  .btn-ghost{border:1px solid rgba(201,162,39,.22);background:rgba(32,29,38,.55)}
  .btn-ghost:hover{border-color:rgba(232,198,90,.45);background:rgba(42,38,50,.65)}
  .sort-toggle{background:rgba(16,13,29,.6);border:1px solid rgba(201,162,39,.14);border-radius:8px;padding:2px}
  .sort-btn{font-family:'Marcellus',Georgia,serif;letter-spacing:.06em;font-size:11px;border-radius:6px}
  .sort-btn.active{background:linear-gradient(180deg, var(--gold-bright), var(--gold));color:var(--void);box-shadow:0 1px 10px -3px rgba(232,198,90,.6)}

  /* --- Data surfaces --- */
  .avail-table thead th,.beacon-table thead th{font-family:'Marcellus',Georgia,serif;letter-spacing:.12em;font-size:10px;color:var(--gold);opacity:.9}
  .badge-pill{border:1px solid rgba(201,162,39,.22);background:rgba(201,162,39,.07);font-family:'Inter',sans-serif;letter-spacing:.02em}
  .chip{border-radius:999px}

  /* --- Modals --- */
  .modal-backdrop{background:rgba(8,6,15,.78);backdrop-filter:blur(4px)}
  .modal-panel{
    background:linear-gradient(180deg, rgba(38,34,44,.98) 0%, rgba(24,22,29,.98) 100%);
    border:1px solid rgba(201,162,39,.3);
    box-shadow:0 0 0 1px rgba(8,6,15,.6), 0 30px 80px -20px rgba(0,0,0,.8), 0 0 60px -20px rgba(232,198,90,.18);
  }

  /* --- Calendar surface --- */
  .tl-day{
    background:rgba(28,26,34,.45);
    border-color:rgba(201,162,39,.10);
    transition:border-color .15s ease, background .15s ease;
  }
  .tl-day:hover{border-color:rgba(201,162,39,.32);background:rgba(40,36,48,.65)}
  .tl-day.has-session{
    border-color:rgba(178,60,78,.45);
    background:linear-gradient(180deg, rgba(143,44,59,.20), rgba(143,44,59,.07));
  }
  .tl-day.has-session:hover{border-color:rgba(178,60,78,.75)}
  .tl-day.upcoming{
    border-color:rgba(87,150,122,.45);
    background:linear-gradient(180deg, rgba(61,113,90,.22), rgba(61,113,90,.08));
  }
  /* Today gets a soft candle-glow ring rather than just colored numerals. */
  .tl-day.today{box-shadow:0 0 0 1px rgba(232,198,90,.55), 0 0 16px -4px rgba(232,198,90,.45)}
  .tl-month-label{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-weight:600;color:var(--parchment)}

  /* --- Beacon heat cells --- */
  .beacon-cell{border-radius:5px;transition:transform .12s ease, box-shadow .12s ease}
  .beacon-cell:hover{transform:scale(1.08);box-shadow:0 0 12px -2px rgba(232,198,90,.5);z-index:2}

  /* --- Character crests --- */
  .char-portrait-placeholder{
    position:relative;overflow:hidden;
    border-bottom:1px solid rgba(201,162,39,.14);
  }
  /* Faint arcane ring behind the initials, so the crest reads as a sigil
     rather than a plain coloured block. */
  .char-portrait-placeholder::after{
    content:'';position:absolute;left:50%;top:50%;width:86px;height:86px;
    transform:translate(-50%,-50%);border-radius:50%;
    border:1px solid rgba(232,198,90,.16);
    box-shadow:0 0 0 7px rgba(232,198,90,.05);
  }
  .crest-initials{
    position:relative;z-index:1;
    font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;
    font-size:38px;letter-spacing:.04em;line-height:1;
    color:rgba(244,236,216,.6);
    text-shadow:0 2px 14px rgba(0,0,0,.5);
  }

  /* --- Text selection, so it doesn't fall back to browser blue --- */
  ::selection{background:rgba(232,198,90,.28);color:var(--parchment)}

  /* --- Scrollbars --- */
  ::-webkit-scrollbar-track{background:rgba(8,6,15,.4);border-radius:4px}
  ::-webkit-scrollbar-thumb{background:rgba(201,162,39,.28);border-radius:4px}
  ::-webkit-scrollbar-thumb:hover{background:rgba(232,198,90,.45)}
  *{scrollbar-color:rgba(201,162,39,.35) rgba(8,6,15,.4);scrollbar-width:thin}

  /* --- Inset panels: recessed wells for lists that were floating loose
         inside a card (character session history, etc). --- */
  .inset-panel{
    background:rgba(8,6,15,.4);
    border:1px solid rgba(201,162,39,.11);
    border-radius:8px;padding:4px;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
  }
  .inset-row{
    display:block;padding:6px 9px;border-radius:6px;cursor:pointer;
    border-left:2px solid transparent;
    transition:background .14s ease, border-color .14s ease;
  }
  .inset-row + .inset-row{border-top:1px solid rgba(201,162,39,.07)}
  .inset-row:hover{background:rgba(232,198,90,.07);border-left-color:var(--gold)}

  /* --- Full Log table: was an unstyled grid; give it ledger rules,
         a pinned header, and readable row banding. --- */
  .avail-table{border-collapse:separate;border-spacing:0;width:100%}
  .avail-table thead th{
    position:sticky;top:0;z-index:3;
    background:var(--panel);
    border-bottom:1px solid rgba(201,162,39,.3);
    box-shadow:0 1px 0 rgba(201,162,39,.12);
    padding:11px 14px;
  }
  .avail-table tbody td{
    border-bottom:1px solid rgba(201,162,39,.07);
    padding:9px 14px;vertical-align:top;line-height:1.45;
  }
  .avail-table tbody tr:nth-child(even) td{background:rgba(244,236,216,.018)}
  .avail-table tbody tr{transition:background .12s ease}
  .avail-table tbody tr:hover td{background:rgba(232,198,90,.06)}
  /* Ledger-specific: the Full Log's trailing Hours column is numeric, so it
     aligns right with tabular figures. Scoped to .ledger-table so it never
     touches the shared weekly-availability grid. */
  .ledger-table tbody td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--gold-bright)}
  .ledger-table tbody td:first-child{white-space:nowrap;color:var(--gold);font-variant-numeric:tabular-nums}
  .ledger-table tbody td:nth-child(2){color:var(--parchment);font-weight:500}

  /* --- Remaining flat surfaces brought into the gradient system.
         These were still solid --ink-panel fills, so they read flatter
         than the cards around them. --- */
  .chrono-tree-card,
  .year-tile,
  .global-search-results,
  .tl-tooltip{
    background:var(--panel);
    border-color:rgba(201,162,39,.16);
  }
  .chrono-tree-card{
    box-shadow:0 6px 20px -10px rgba(0,0,0,.75);
    transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  }
  .chrono-tree-card:hover{
    border-color:rgba(232,198,90,.45);
    box-shadow:0 8px 26px -10px rgba(0,0,0,.8), 0 0 22px -8px rgba(232,198,90,.4);
  }
  .year-tile{transition:border-color .16s ease, background .16s ease}
  .year-tile:hover{border-color:rgba(232,198,90,.4);background:linear-gradient(180deg, rgba(46,42,54,.95), rgba(30,27,36,.95))}
  .tl-tooltip{border:1px solid rgba(232,198,90,.55);box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 24px -10px rgba(232,198,90,.35)}
  .global-search-results{box-shadow:0 14px 40px -12px rgba(0,0,0,.75)}
  .global-search-result{transition:background .12s ease}
  .global-search-result:hover{background:rgba(232,198,90,.09)}

  /* --- Typography carried into the remaining data surfaces --- */
  .year-tile-name{font-family:'Cormorant Garamond',Georgia,serif}
  .tl-tooltip-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:14px;color:var(--gold-bright)}
  .chrono-tree-card .font-display{font-family:'Cormorant Garamond',Georgia,serif}
  .roster-fields td.muted{font-family:'Marcellus',Georgia,serif;letter-spacing:.06em;font-size:9.5px;text-transform:uppercase}
  .attendee-name{font-weight:600}
  .day-head,.row-label{font-family:'Marcellus',Georgia,serif;letter-spacing:.1em}

  /* --- Semantic accents get depth rather than flat fills --- */
  .chip-emerald{background:linear-gradient(180deg, rgba(87,150,122,.22), rgba(61,113,90,.12));border-color:rgba(87,150,122,.42)}
  .badge-pill{background:linear-gradient(180deg, rgba(201,162,39,.11), rgba(201,162,39,.04))}

  /* Names of people, characters and sessions read as headings in the
     display serif rather than bold UI sans, which was the least fitting
     place for Inter in the whole app. */
  .entity-name{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-weight:700;font-size:19px;line-height:1.2;
    color:var(--parchment);letter-spacing:.005em;
  }
  .char-card .entity-name{font-size:18px}

  /* Character art is usually full-body, so centring crops to the torso.
     Anchoring high keeps faces in frame on the small card thumbnails. */
  .char-portrait{object-fit:cover;object-position:center 5%;transition:filter .16s ease}
  .char-portrait:hover{filter:brightness(1.08)}

  /* Profile view portrait: larger, same head-first framing, also zoomable. */
  .profile-portrait{
    width:120px;height:120px;object-fit:cover;object-position:center 5%;
    border-radius:10px;background:var(--ink);cursor:zoom-in;
    border:1px solid rgba(201,162,39,.25);
    box-shadow:0 6px 18px -8px rgba(0,0,0,.7);
    transition:filter .16s ease, border-color .16s ease;
  }
  .profile-portrait:hover{filter:brightness(1.08);border-color:rgba(232,198,90,.55)}

  /* Bonds link through to the other character. */
  .bond-link{transition:border-color .15s ease, background .15s ease}
  .bond-link:hover{border-color:rgba(232,198,90,.45);background:rgba(232,198,90,.07)}

  /* --- Portrait lightbox --- */
  .zoom-backdrop{background:rgba(8,6,15,.9)}
  .zoom-panel{
    position:fixed;inset:0;z-index:60;display:flex;
    flex-direction:column;align-items:center;justify-content:center;
    gap:14px;padding:32px;cursor:zoom-out;
  }
  .zoom-img{
    max-width:min(92vw,900px);max-height:82vh;
    object-fit:contain;border-radius:10px;
    border:1px solid rgba(201,162,39,.35);
    box-shadow:0 30px 90px -20px rgba(0,0,0,.9), 0 0 70px -24px rgba(232,198,90,.3);
    animation:anim-zoom .24s cubic-bezier(.22,.68,.36,1) both;
  }
  @keyframes anim-zoom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
  .zoom-caption{
    font-size:20px;color:var(--gold-bright);letter-spacing:.02em;
    text-shadow:0 2px 12px rgba(0,0,0,.8);
  }

  /* --- Inline character avatars --- */
  .avatar{
    width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:center 5%;
    flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid rgba(201,162,39,.3);background:var(--ink);
    font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:10px;
    color:rgba(244,236,216,.75);letter-spacing:.02em;vertical-align:middle;
  }
  .avatar-sm{width:17px;height:17px;font-size:8.5px;margin-right:5px}
  /* Chip-sized portrait: big enough to actually recognise a face. */
  .avatar-lg-chip{width:30px;height:30px;font-size:13px;margin-right:8px;border-radius:6px}
.chip-avatar{display:inline-flex;align-items:center;max-width:100%;overflow:hidden;padding:4px 11px 4px 4px;font-size:12.5px;white-space:nowrap}
.chip-avatar,.ledger-cast-member,.attendee-tile{min-width:0}
.chip-avatar .muted,.ledger-cast-name,.attendee-tile-char{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:clamp(11px,1.5vw,12.5px);
}
  .chips{display:flex;flex-wrap:wrap;gap:7px}
  button.chip-avatar{cursor:pointer;font-family:inherit;transition:border-color .15s ease, background .15s ease}
  button.chip-avatar:hover{border-color:rgba(232,198,90,.55);background:rgba(232,198,90,.09)}

  /* Main characters read gold; side characters a muted slate-blue, so the
     two are distinguishable without the old emerald shouting for attention. */
  .chip-main{
    background:linear-gradient(180deg, rgba(201,162,39,.20), rgba(201,162,39,.07));
    border:1px solid rgba(232,198,90,.45);color:var(--parchment);
  }
  .chip-side{
    background:linear-gradient(180deg, rgba(96,110,140,.20), rgba(70,80,105,.09));
    border:1px solid rgba(120,136,170,.38);color:var(--parchment-dim);
  }
  button.chip-main:hover{border-color:rgba(232,198,90,.75);background:linear-gradient(180deg, rgba(201,162,39,.28), rgba(201,162,39,.11))}
  button.chip-side:hover{border-color:rgba(150,168,205,.6);background:linear-gradient(180deg, rgba(96,110,140,.28), rgba(70,80,105,.14))}

  /* Roster player name: a touch more presence, with a gold rule beneath. */
  .player-name-deco{
    font-size:22px;letter-spacing:.01em;
    color:var(--parchment);position:relative;display:inline-block;
    padding-bottom:5px;
  }
  .player-name-deco::after{
    content:'';position:absolute;left:0;bottom:0;width:120px;max-width:100%;height:1px;
    background:linear-gradient(90deg,rgba(232,198,90,.65),rgba(201,162,39,.12),transparent);
  }
  .avatar-lg{width:74px;height:74px;border-radius:10px;font-size:26px;border-width:1px}
  .due-row-avatar{display:flex;align-items:center;gap:9px}
  .activity-person{flex:1;min-width:0}
  .activity-person-line{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    color:var(--parchment-dim);font-size:12.5px;font-weight:600;
  }
  .activity-age{flex:0 0 auto;white-space:nowrap}
  .chip-avatar{display:inline-flex;align-items:center}

  /* Session modal: who played, as a grid of portraits with names beneath. */
  .modal-wide{width:min(94vw,760px)}
  .attendee-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
    gap:10px;margin-bottom:14px;
  }
  .attendee-tile{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    min-width:0;overflow:hidden;
    padding:10px 6px;border-radius:9px;cursor:pointer;text-align:center;
    background:rgba(28,26,34,.6);border:1px solid rgba(201,162,39,.12);
    transition:border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .attendee-tile:hover{
    border-color:rgba(232,198,90,.45);background:rgba(232,198,90,.07);
    transform:translateY(-1px);
  }
  .attendee-tile-char{
    display:block;width:100%;max-width:100%;min-width:0;
    font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;
    font-size:clamp(11px,1.35vw,14px);color:var(--parchment);line-height:1.15;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .attendee-tile-player{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;color:var(--slate)}
  @media (max-width:640px){
    .attendee-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}
    .avatar-lg{width:60px;height:60px;font-size:21px}
  }

  /* Character overlay: reuses the full character view inside a panel. */
  .char-overlay{max-height:86vh;overflow-y:auto;padding-top:34px}
  .char-overlay .tab-body{padding:0}
  .char-overlay .tab-body > .card{max-width:none;background:transparent;border:none;box-shadow:none;padding:0}
  .char-overlay [data-action="close-character-view"],
  .char-overlay [data-action="close-extra-character-view"]{display:none}
  .char-overlay-close{position:absolute;top:12px;right:14px;z-index:2}

  /* Beacon: grid on the left, recommendations filling the space at right. */
  .beacon-layout{display:flex;gap:18px;align-items:flex-start}
  .beacon-layout .beacon-wrap{flex:1 1 auto;min-width:0}
  .beacon-side{
    flex:0 0 240px;position:sticky;top:12px;
    background:var(--panel);
    border:1px solid rgba(201,162,39,.14);border-radius:10px;padding:14px;
  }
  .beacon-side .beacon-recommend{display:flex;flex-direction:column;gap:8px}
  .beacon-side .beacon-rec-chip{display:flex;flex-direction:column;gap:2px}
  @media (max-width:900px){
    .beacon-layout{flex-direction:column}
    .beacon-side{flex:1 1 auto;width:100%;position:static}
    .beacon-side .beacon-recommend{flex-direction:row;flex-wrap:wrap}
  }

  /* Crest stand-in on a character sheet, sized like the portrait. */
  .profile-crest{
    width:120px;height:120px;border-radius:10px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(201,162,39,.25);position:relative;overflow:hidden;
  }
  .profile-crest .crest-initials{font-size:40px}

  /* Shared session row - same shape wherever a session is listed. */
  .session-row-shared{
    display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
    cursor:pointer;border:1px solid rgba(201,162,39,.10);
    background:rgba(28,26,34,.5);transition:border-color .14s ease, background .14s ease;
  }
  .session-row-shared:hover{border-color:rgba(232,198,90,.4);background:rgba(232,198,90,.06)}
  .session-row-date{color:var(--gold);flex:0 0 88px;white-space:nowrap}
  .session-row-main{flex:1;min-width:0}
  .session-row-title{color:var(--parchment);font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .session-row-avatars{display:flex;gap:3px;flex:0 0 auto}
  .avatar-more{background:rgba(70,66,84,.9);color:var(--parchment-dim)}

  /* Availability: stats rail left, board right. */
  .avail-layout{display:flex;gap:20px;align-items:flex-start;margin-top:14px}
  .avail-side{
    flex:0 0 230px;background:var(--panel);
    border:1px solid rgba(201,162,39,.14);border-radius:10px;padding:14px;
  }
  .avail-main{flex:1;min-width:0}
  @media (max-width:900px){
    .avail-layout{flex-direction:column}
    .avail-side{flex:1 1 auto;width:100%}
  }

  /* Beacon board: one panel containing heading, grid and the people rail. */
  .beacon-board{
    background:var(--panel);
    border:1px solid rgba(201,162,39,.14);border-radius:10px;padding:16px;
  }
  .beacon-head{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(201,162,39,.14);align-items:center}
  .beacon-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px}
  .beacon-person{
    display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
    padding:9px 5px;border-radius:9px;cursor:pointer;
    background:rgba(28,26,34,.6);border:1px solid rgba(201,162,39,.12);
    transition:border-color .15s ease, background .15s ease;
  }
  .beacon-person:hover{border-color:rgba(232,198,90,.45);background:rgba(232,198,90,.07)}
  .beacon-person-char{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:13px;color:var(--parchment);line-height:1.15}
  .beacon-person-player{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--slate)}
  .beacon-side{flex:0 0 260px}

  .dm-stats-link{padding:3px 9px;font-size:10.5px}

  .beacon-title{font-family:'Marcellus',Georgia,serif;font-size:17px;color:var(--gold);letter-spacing:.18em;text-transform:uppercase;font-weight:400;line-height:1.2;margin:0}
  .char-overlay-back{position:absolute;top:12px;left:14px;z-index:2;padding:4px 10px;font-size:11px}
  .char-overlay{padding-top:44px}

  /* Timeline scales down with the viewport but each card keeps its size,
     so a squished window or phone shows the same tree, just smaller. */
  .chrono-tree-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
  .chrono-tree-scroll .chrono-tree-wrap{overflow-x:visible}
  @media (max-width:640px){
    .beacon-title{font-size:20px}
    .avatar-lg-chip{width:26px;height:26px;font-size:11px}
  }

  .avail-stat-list{display:flex;flex-direction:column;gap:11px;margin-bottom:14px}
  .avail-stat-list > div + div{padding-top:11px;border-top:1px solid rgba(201,162,39,.09)}
  @media (max-width:900px){
    .avail-stat-list{flex-direction:row;flex-wrap:wrap;gap:18px}
    .avail-stat-list > div + div{padding-top:0;border-top:none}
  }

  .avail-header{margin-bottom:6px}
  .avail-header .sort-toggle{padding:3px}
  .avail-header .sort-btn{padding:8px 18px;font-size:12.5px;letter-spacing:.08em}

  .stat-divider{height:1px;background:rgba(201,162,39,.14);margin:8px 0}

  /* Every stat value renders the same: one size, one colour, one font. */
  .overview-stat-val-sm{color:var(--parchment-dim);font-size:12.5px;text-align:right;font-weight:500;display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}
  .overview-stat-row{gap:14px}
  .overview-stat-row .small.muted{flex:0 0 auto}
  .stat-sub{color:var(--slate);font-size:11px;font-weight:400}
  /* Full-width badge naming what the stat above refers to. */
  .stat-badge{
    display:block;width:100%;text-align:left;cursor:pointer;
    margin:4px 0 10px;padding:7px 10px;border-radius:7px;
    font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:14px;
    color:var(--parchment);line-height:1.25;
    background:linear-gradient(180deg, rgba(201,162,39,.16), rgba(201,162,39,.05));
    border:1px solid rgba(232,198,90,.34);
    transition:border-color .15s ease, background .15s ease;
  }
  .stat-badge:hover{
    border-color:rgba(232,198,90,.7);
    background:linear-gradient(180deg, rgba(201,162,39,.26), rgba(201,162,39,.1));
  }
  /* The referenced session / storyline sits under its value and links out. */
  .stat-sub-link{
    color:var(--slate);font-size:11px;font-weight:400;cursor:pointer;
    max-width:150px;text-align:right;line-height:1.25;
    transition:color .14s ease;
  }
  .stat-sub-link:hover{color:var(--gold-bright);text-decoration:underline}

  /* Character cards adopt the Roster card's treatment: same warm charcoal
     gradient, gold hairline, serif name with a gold rule beneath, and the
     same small-caps label styling for the metadata. */
  .char-card{
    background:linear-gradient(180deg, #232030 0%, #1A1724 100%);
    border:1px solid rgba(201,162,39,.16);
    box-shadow:0 1px 0 rgba(244,236,216,.045) inset, 0 10px 28px -12px rgba(0,0,0,.7);
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .char-card:hover{
    border-color:rgba(232,198,90,.4);
    box-shadow:0 1px 0 rgba(244,236,216,.06) inset, 0 12px 30px -12px rgba(0,0,0,.75), 0 0 22px -10px rgba(232,198,90,.35);
  }
  .char-body{padding:14px}
  .char-card .entity-name{
    font-size:20px;position:relative;display:inline-block;padding-bottom:5px;margin-bottom:2px;
  }
  /* Fixed-width rule so it reads the same regardless of name length. */
  .char-card .entity-name::after{
    content:'';position:absolute;left:0;bottom:0;width:120px;max-width:100%;height:1px;
    background:linear-gradient(90deg,rgba(232,198,90,.65),rgba(201,162,39,.12),transparent);
  }
  /* "played by X" and the stat lines pick up the roster's label treatment. */
  .char-played-by{
    font-family:'Marcellus',Georgia,serif;letter-spacing:.1em;text-transform:uppercase;
    font-size:9.5px;color:var(--slate);margin-bottom:8px;display:block;
    width:100%;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .char-played-by.role-long{font-size:8.3px;letter-spacing:.07em}
  .char-played-by.role-very-long{font-size:7.4px;letter-spacing:.045em}

  /* Status pills on character cards sit inline rather than filling the row. */
  .char-body .badge-pill{align-self:flex-start;width:auto;display:inline-block}
  .char-body{align-items:flex-start}

  /* --- The setting brief, over a drifting wall of the party's own art --- */
  .brief{
    position:relative;overflow:hidden;border-radius:12px;
    margin:14px 0 22px;min-height:330px;display:flex;align-items:center;
    border:1px solid rgba(201,162,39,.18);
    background:var(--panel);
  }
  .portrait-wall{
    position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
    justify-content:center;gap:16px;opacity:0;pointer-events:none;
    transition:opacity .28s ease;
    /* Held to the right so the text always sits on quiet ground. */
    mask-image:linear-gradient(90deg,transparent 0%,transparent 40%,#000 74%,#000 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 40%,#000 74%,#000 100%);
  }
  .wall-row{
    display:flex;gap:16px;width:max-content;will-change:transform;
    transform:translate3d(0,0,0);backface-visibility:hidden;
    contain:layout paint;
  }
  .wall-a{animation:wall-a var(--wall-duration,140s) linear infinite}
  .wall-b{animation:wall-b var(--wall-duration,180s) linear infinite}
  .portrait-wall .wall-row{animation-play-state:paused}
  .portrait-wall.is-ready{opacity:.55}
  .portrait-wall.is-ready .wall-row{animation-play-state:running}
  /* Half the duplicated strip plus half its 16px gap lands exactly on the
     first tile of the second copy. Without the extra 8px the loop snaps. */
  @keyframes wall-a{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - 8px),0,0)}}
  @keyframes wall-b{from{transform:translate3d(calc(-50% - 8px),0,0)}to{transform:translate3d(0,0,0)}}
  .wall-tile{flex:0 0 auto;width:168px;height:214px;border-radius:10px;overflow:hidden;display:block}
  .wall-tile img{width:100%;height:100%;object-fit:cover;object-position:center 10%;display:block}
  .brief-scrim{
    position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(90deg, var(--void) 0%, rgba(10,8,16,.94) 38%, rgba(10,8,16,.6) 64%, rgba(10,8,16,.34) 100%);
  }
  .brief-in{position:relative;z-index:3;padding:26px 28px;max-width:640px}
  .brief-body{
    font-family:'Cormorant Garamond',Georgia,serif;font-size:17.5px;line-height:1.5;
    color:var(--parchment);margin:0 0 18px;
  }
  .brief-meta{display:flex;flex-direction:column;gap:0;margin-bottom:16px}
  .brief-row{
    display:flex;gap:14px;align-items:baseline;
    padding:6px 0;border-bottom:1px solid rgba(201,162,39,.12);
  }
  .brief-row:last-child{border-bottom:none}
  .brief-k{
    flex:0 0 118px;font-family:'Marcellus',Georgia,serif;letter-spacing:.1em;
    text-transform:uppercase;font-size:9.5px;color:var(--gold);
  }
  .brief-v{font-size:12.5px;color:var(--parchment-dim);line-height:1.4}
  .brief-cap{
    display:inline-flex;align-items:baseline;gap:8px;
    padding:9px 14px;border-radius:8px;
    background:linear-gradient(180deg, rgba(201,162,39,.18), rgba(201,162,39,.06));
    border:1px solid rgba(232,198,90,.45);
  }
  .brief-cap-l{
    font-family:'Marcellus',Georgia,serif;letter-spacing:.14em;text-transform:uppercase;
    font-size:9.5px;line-height:1;color:var(--gold-bright);
  }
  .brief-cap-n{
    font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:20px;
    line-height:1;color:var(--gold-bright);
  }
  @media (max-width:900px){
    /* Keep the party art on phones. It was being explicitly hidden rather
       than clipped; the mask and scrim keep the text readable. */
    .portrait-wall{
      display:flex;
      mask-image:linear-gradient(90deg,transparent 0%,transparent 18%,#000 58%,#000 100%);
      -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 18%,#000 58%,#000 100%);
    }
    .portrait-wall.is-ready{opacity:.34}
    .brief{min-height:0;background:var(--panel)}
    .brief .brief-scrim{
      background:linear-gradient(90deg,var(--void) 0%,rgba(10,8,16,.96) 52%,rgba(10,8,16,.62) 100%);
    }
    .brief-in{padding:20px;max-width:none}
    .brief-body{font-size:16px}
    .brief-k{flex-basis:96px}
  }
  @media (prefers-reduced-motion: reduce){ .wall-a,.wall-b{animation:none} }

  /* --- Character showcase: art on stage, sheet in the rail ------------- */
  .showcase-panel{
    width:min(96vw,1280px);max-height:92vh;padding:0;overflow:visible;
    border:1px solid rgba(232,198,90,.28);border-radius:14px;
    background:var(--ink-deep);--character-flame:#e8c65a;isolation:isolate;
  }
  .showcase{display:flex;height:min(88vh,860px);overflow:hidden;border-radius:inherit}
  /* Sheet on the left, art large on the right. */
  .showcase .sc-stage{order:2}
  .showcase .sc-rail{order:1}
  .sc-stage{
    position:relative;flex:1 1 62%;min-width:0;overflow:hidden;
    background:linear-gradient(160deg, rgba(38,34,48,1), rgba(16,14,22,1));
  }
  /* The roster trail reworked for a portrait frame. The mask stays fixed to
     the artwork while only its colour angle moves, so it cannot slip away. */
  @property --character-trail-angle{
    syntax:'<angle>';initial-value:0deg;inherits:false;
  }
  .sc-stage::before{
    content:'';position:absolute;inset:0;z-index:9;pointer-events:none;padding:4px;opacity:0;
    border-radius:0 13px 13px 0;
    background:conic-gradient(from var(--character-trail-angle),
      transparent 0 20%,
      color-mix(in srgb,var(--character-flame-tail,var(--character-flame,#e8c65a)) 22%,transparent) 26%,
      var(--character-flame-tail,var(--character-flame,#e8c65a)) 34%,
      var(--character-flame-head,var(--character-flame,#e8c65a)) 44%,
      #fff8dc 48%,transparent 50%,
      transparent 50% 70%,
      color-mix(in srgb,var(--character-flame-tail,var(--character-flame,#e8c65a)) 22%,transparent) 76%,
      var(--character-flame-tail,var(--character-flame,#e8c65a)) 84%,
      var(--character-flame-head,var(--character-flame,#e8c65a)) 94%,
      #fff8dc 98%,transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    filter:drop-shadow(0 0 4px color-mix(in srgb,var(--character-flame-head,var(--character-flame,#e8c65a)) 55%,transparent));
    animation:character-art-trail 10.5s linear infinite;
    animation-play-state:paused;
    transition:opacity .38s ease;will-change:opacity;
  }
  .sc-stage:hover::before,.sc-stage:focus-within::before{
    opacity:.94;animation-play-state:running;
  }
  @keyframes character-art-trail{to{--character-trail-angle:360deg}}
  .sc-art{cursor:zoom-in;
    width:100%;height:100%;object-fit:cover;object-position:center 12%;
    cursor:zoom-in;display:block;
  }
  @keyframes sc-art-in{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
  .sc-crest{
    width:100%;height:100%;display:grid;place-items:center;
    font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:120px;
    color:rgba(244,236,216,.16);
  }
  .sc-vig{
    position:absolute;inset:0;pointer-events:none;
    /* Weighted to the top now that the name sits there. */
    background:linear-gradient(180deg, rgba(10,8,16,.92) 0%, rgba(10,8,16,.45) 22%, transparent 46%, rgba(10,8,16,.55) 100%);
  }

  .sc-villain-banner,.char-villain-banner{
    display:flex;align-items:center;justify-content:center;text-align:center;text-transform:uppercase;
    font-family:'Marcellus',Georgia,serif;font-weight:700;letter-spacing:.2em;
    box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .sc-villain-banner{
    position:absolute;left:0;right:0;top:0;z-index:5;height:34px;padding:0 48px;
    font-size:11px;line-height:1.2;box-shadow:0 4px 18px rgba(0,0,0,.35);
  }
  .sc-villain-banner.banner-long{font-size:9.5px;letter-spacing:.13em}
  .sc-villain-banner.banner-very-long{font-size:8.5px;letter-spacing:.08em}
  .sc-villain-banner.villain-defeated{top:0}
  .sc-stage.has-faction-banner .sc-villain-banner.villain-defeated{top:34px}
  .sc-stage.has-faction-banner .sc-nameplate{top:34px}
  .sc-stage.has-defeated-banner .sc-nameplate{top:34px}
  .sc-stage.has-faction-banner.has-defeated-banner .sc-nameplate{top:68px}
  /* Keep the character type readable over the faction strip instead of
     letting the banner cover it. */
  .sc-stage.has-faction-banner .sc-mark,
  .sc-stage.has-defeated-banner .sc-mark{top:4px;z-index:7}
  .faction-banner{
    color:#fff;border-bottom:1px solid rgba(255,255,255,.34);
    background-color:rgba(12,10,18,.5);background-image:var(--faction-gradient);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    text-shadow:0 1px 9px rgba(0,0,0,.9);
  }
  .villain-defeated{
    color:#fff0ed;border-bottom:1px solid rgba(239,92,79,.85);
    background:linear-gradient(90deg,rgba(70,13,15,.98),rgba(145,35,31,.98),rgba(70,13,15,.98));
    text-shadow:0 1px 8px rgba(0,0,0,.8);
  }


  /* Nameplate reads from the top of the portrait. */
  .sc-nameplate{position:absolute;left:0;right:0;top:0;padding:24px 28px;z-index:2}
  .sc-name{
    font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;
    font-size:clamp(30px,4.4vw,52px);line-height:1;margin:0 0 5px;color:var(--parchment);
    max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:normal;
    text-shadow:0 3px 20px rgba(0,0,0,.85);
  }
  .sc-owner{
    margin:0;font-family:'Marcellus',Georgia,serif;letter-spacing:.16em;
    text-transform:uppercase;font-size:10.5px;color:var(--gold-bright);
  }
  .sc-title{
    margin:0 0 5px;font-family:'Cormorant Garamond',Georgia,serif;
    font-size:17px;line-height:1.15;color:var(--parchment-dim);
    text-shadow:0 2px 12px rgba(0,0,0,.9);
  }
  /* Rail */
  .sc-rail{
    flex:0 0 clamp(300px,32%,390px);overflow-y:auto;padding:22px 22px 30px;
    background:var(--panel-solid);
    border-right:1px solid rgba(232,198,90,.2);
  }
  @keyframes sc-rail-in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
  .sc-facts{margin-bottom:18px}
  .sc-fact{display:flex;gap:12px;align-items:baseline;padding:7px 0;border-bottom:1px solid rgba(201,162,39,.12)}
  .sc-fact:last-child{border-bottom:none}
  .sc-k{flex:0 0 92px;font-family:'Marcellus',Georgia,serif;letter-spacing:.12em;text-transform:uppercase;font-size:9.5px;color:var(--gold)}
  .sc-v{font-size:12.5px;color:var(--parchment-dim);line-height:1.4}
  .sc-block{margin-bottom:18px}
  .sc-block .label-caps{display:block;margin-bottom:7px}
  .sc-bonds-link{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;margin:0 0 7px;padding:0;border:0;background:transparent;color:var(--gold-bright);cursor:pointer;text-align:left}
  .sc-bonds-link .label-caps{margin:0}
  .sc-bonds-link>span:last-child{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700}
  .sc-bonds-link:hover>span:last-child,.sc-bonds-link:focus-visible>span:last-child{color:var(--parchment)}
  .sc-connections-cta{width:100%;justify-content:center;margin:0 0 14px}
  .sc-sum{font-size:13px;line-height:1.55;color:var(--parchment-dim);margin:0}
  .sc-bio{font-size:12.5px;line-height:1.6;color:var(--slate);margin:0;white-space:pre-wrap;max-height:260px;overflow-y:auto}
  .sc-bonds{display:flex;flex-wrap:wrap;gap:6px}
  .sc-bond{
    display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;
    border-radius:999px;cursor:pointer;font-size:12px;color:var(--parchment);
    background:rgba(201,162,39,.10);border:1px solid rgba(232,198,90,.32);
    transition:background .15s ease, border-color .15s ease;
  }
  .sc-bond:hover{background:rgba(201,162,39,.2);border-color:var(--gold-bright)}
  .sc-bond-label{min-width:0}
  .bond-reason{color:var(--slate);font-weight:400}
  .sc-sessions{display:flex;flex-direction:column;gap:5px;max-height:260px;overflow-y:auto}
  .showcase-panel .char-overlay-close,.showcase-panel .char-overlay-back{z-index:8}
  .showcase-panel .char-overlay-close{background:rgba(10,8,16,.7);border:1px solid rgba(232,198,90,.3)}

  @media (max-width:860px){
    .showcase{flex-direction:column;height:auto}
    .showcase-panel{max-height:92vh;overflow-y:auto}
    .sc-stage{flex:none;height:52vh;min-height:300px}
    /* Stack art first on a phone, sheet beneath. */
    .showcase .sc-stage{order:1} .showcase .sc-rail{order:2}
    .sc-rail{flex:none;border-right:none;border-top:1px solid rgba(232,198,90,.2);max-height:none}
    /* The type marker shared the top-right of the portrait with long names.
       Move it to the empty lower-left corner on the mobile art stage. */
    .sc-mark{top:auto;right:auto;left:16px;bottom:16px}
    .sc-stage.has-faction-banner .sc-mark,
    .sc-stage.has-defeated-banner .sc-mark{top:auto;right:auto;bottom:16px;left:16px}
    .sc-nameplate{padding:20px 18px 18px;right:0}
    .sc-name{font-size:clamp(29px,10vw,42px);padding-right:0}
    .sc-kind{right:16px;bottom:16px;max-width:58%}
  }
  @media (prefers-reduced-motion: reduce){
    .sc-art,.sc-rail{animation:none}
  }

  /* --- Page band: the brief's treatment, slimmed for every other page --- */
  .page-band{
    position:relative;overflow:hidden;border-radius:12px;
    /* One height across every page - they used to range 118-174px depending
       on whether that page happened to have a subtitle or sub-tabs. */
    margin:14px 0 20px;min-height:174px;display:flex;align-items:center;
    /* Some page headers sit inside a flex row; span it regardless. */
    width:100%;flex:1 0 100%;
    border:1px solid rgba(201,162,39,.18);
    background:var(--panel);
  }
  .page-band .portrait-wall{gap:12px}
  .page-band .portrait-wall.is-ready{opacity:.42}
  /* One banner is enough at this height; the second just added noise. */
  .page-band .wall-b{display:none}
  .page-band .wall-tile{width:112px;height:142px}
  .page-band-in{position:relative;z-index:3;padding:18px 24px;width:100%}
  .page-band .section-title{margin:0}
  .page-band .kicker{margin-bottom:4px}
  @media (max-width:900px){
    /* Keep one height here too. Sub-tabs scroll sideways rather than wrapping
       onto a second row, which is what made these bands uneven on a phone. */
    .page-band{min-height:154px;background:var(--panel)}
    .page-band-in{padding:14px 16px}
    .page-band .portrait-wall{display:flex}
    .page-band .portrait-wall.is-ready{opacity:.32}
    .page-band .brief-scrim{
      background:linear-gradient(90deg,var(--void) 0%,rgba(10,8,16,.94) 48%,rgba(10,8,16,.52) 100%);
    }
  }

  /* --- Panels pick up the brief's translucency so the backdrop reads
         through everywhere, not just on the Overview. --- */
  /* Translucent, but NOT blurred: backdrop-filter on dozens of cards at once
     is what made scrolling stutter. The gradient still reads through, which
     is where the effect actually comes from. Blur is kept only for the two
     fixed, single-instance surfaces where it earns its cost. */
  .card,.grid-wrap,.beacon-board,.beacon-side,.inset-panel{
    background:var(--panel);
  }
  .char-card{
    background:linear-gradient(180deg, #232030 0%, #1A1724 100%);
  }
  .session-row-shared,.due-row,.tl-day,.beacon-person,.attendee-tile,.beacon-rec-chip{
    background:rgba(28,26,34,.55);
  }
  .tabs,.global-search-box{
    background:linear-gradient(180deg, rgba(32,29,38,.7), rgba(21,19,26,.75));
    backdrop-filter:blur(8px);
  }
  .modal-panel{
    background:linear-gradient(180deg, rgba(38,34,44,.94) 0%, rgba(24,22,29,.96) 100%);
  }
  .sc-rail{
    background:var(--panel);
  }
  /* Phones get none of it - even one blurred layer is expensive while scrolling. */
  @media (max-width:900px){
    .tabs,.global-search-box,.modal-backdrop,.card,.char-card{backdrop-filter:none}
  }

  /* Session rows in the showcase rail: the rail is narrow, so stack the
     date above the title instead of squeezing three columns, and never let
     it push the rail into a horizontal scroll. */
  .sc-sessions{overflow-x:hidden}
  .sc-sessions .session-row-shared{flex-wrap:wrap;row-gap:2px}
  .sc-sessions .session-row-date{flex:0 0 100%;margin-bottom:1px}
  .sc-sessions .session-row-main{flex:1 1 100%;min-width:0}
  .sc-sessions .session-row-title{white-space:normal}
  .sc-sessions .session-row-avatars{flex-wrap:wrap;margin-top:3px}
  .sc-rail{overflow-x:hidden}

  /* One panel treatment everywhere, so no page looks off-colour. */
  .page-band,.brief{
    background:var(--panel);
  }
  /* Roster cards let the band's art read through, like the Overview does. */
  .roster-grid .card{background:var(--panel)}

  /* Every box wears the setting brief's frame: same gold hairline, same
     radius, no inner highlight. Cards previously had a slightly dimmer
     border and a lighter top edge, which is what made them read differently
     even once the fills matched. */
  .card,.grid-wrap,.beacon-board,.beacon-side,.inset-panel,.page-band,.brief,
  .char-card,.year-tile,.global-search-results,.tl-tooltip,.chrono-tree-card{
    border:var(--panel-border);
    border-radius:var(--panel-radius);
    box-shadow:none;
  }
  .card:hover,.char-card:hover{border-color:rgba(232,198,90,.42)}

  /* --- Full-art character cards: the portrait fills the card and the
         details sit over it behind a gradient scrim. --- */
  .char-card{position:relative;overflow:hidden;min-height:290px;display:block;padding:0}
  .char-card{--character-flame:#e8c65a;isolation:isolate}
  .char-card.is-side{--character-flame:#d9dfef}
  .char-card.is-npc{--character-flame:#d4984e}
  .char-card.is-former{--character-flame:#8c869e}
  .char-card .char-portrait,
  .char-card .char-portrait-placeholder{
    position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;
  }
  .char-card .char-portrait{object-fit:cover}
  @media (hover:hover) and (pointer:fine){
    .char-card::before{
      content:'';position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;padding:3px;
      border-radius:inherit;
      background:conic-gradient(from var(--character-trail-angle),
        transparent 0 20%,
        color-mix(in srgb,var(--character-flame-tail,var(--character-flame)) 20%,transparent) 26%,
        var(--character-flame-tail,var(--character-flame)) 35%,
        var(--character-flame-head,var(--character-flame)) 45%,
        #fff8dc 48%,transparent 50%,
        transparent 50% 70%,
        color-mix(in srgb,var(--character-flame-tail,var(--character-flame)) 20%,transparent) 76%,
        var(--character-flame-tail,var(--character-flame)) 85%,
        var(--character-flame-head,var(--character-flame)) 95%,
        #fff8dc 98%,transparent 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      mask-composite:exclude;
      filter:drop-shadow(0 0 4px color-mix(in srgb,var(--character-flame-head,var(--character-flame)) 52%,transparent));
      animation:character-art-trail 6.8s linear infinite;
      animation-play-state:paused;
      transition:opacity .38s ease;will-change:opacity;
    }
    .char-card:hover::before,.char-card:focus-visible::before{opacity:.94;animation-play-state:running}
    .char-card:hover{
      box-shadow:0 0 8px color-mix(in srgb,var(--character-flame) 24%,transparent);
    }
  }
  .char-body{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:60px 15px 15px;
    background:linear-gradient(180deg, rgba(23,20,30,0) 0%, rgba(23,20,30,.72) 38%, rgba(23,20,30,.94) 100%);
    border-radius:0 0 var(--panel-radius) var(--panel-radius);
  }
  .char-card .entity-name{font-size:19px;text-shadow:0 2px 10px rgba(0,0,0,.8)}
  .char-card .char-played-by{color:rgba(232,198,90,.85)}
  .char-body .badge-pill{background:rgba(23,20,30,.6)}
  .char-villain-banner{
    position:absolute;left:0;right:0;top:0;z-index:4;height:30px;padding:0 10px;
    font-size:9px;line-height:1.2;box-shadow:0 3px 12px rgba(0,0,0,.38);
  }
  .char-villain-banner.banner-long{font-size:7.8px;letter-spacing:.1em}
  .char-villain-banner.banner-very-long{font-size:6.9px;letter-spacing:.055em}
  .char-villain-banner.villain-defeated{top:0}
  .char-card.has-faction-banner .char-villain-banner.villain-defeated{top:30px}
  @media (max-width:640px){ .char-card{min-height:250px} }

  /* Sub-tabs live inside the page band and read at nav scale. */
  .band-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
  .band-tabs .sort-toggle{
    background:rgba(14,12,20,.55);border:1px solid rgba(201,162,39,.22);
    border-radius:10px;padding:4px;
  }
  .band-tabs .sort-btn{
    display:inline-flex;align-items:center;gap:7px;
    padding:9px 16px;font-size:12.5px;font-weight:600;letter-spacing:.04em;
    border-radius:7px;color:var(--parchment-dim);
  }
  .band-tabs .sort-btn:hover{color:var(--gold-bright);background:rgba(232,198,90,.075)}
  .band-tabs .sort-btn.active{
    background:linear-gradient(180deg,var(--gold-bright),var(--gold));
    color:#1a1626;box-shadow:0 2px 10px -4px rgba(232,198,90,.6);
  }
  .band-tabs .sort-btn.active:hover{color:#1a1626;box-shadow:0 0 17px rgba(232,198,90,.32)}
  .band-tabs .sort-btn svg{flex:0 0 auto}
  .char-filter-stack{
    display:flex;flex-direction:column;align-items:flex-start;gap:8px;
    width:100%;min-width:0;
  }
  .char-filter-row{max-width:100%;overflow-x:auto;flex-wrap:nowrap}
  .characters-page{gap:12px}
  .characters-page > .page-band{margin-bottom:0}
  .character-results{min-width:0}
  @media (max-width:640px){
    .band-tabs{gap:8px;margin-top:12px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
    .band-tabs::-webkit-scrollbar{display:none}
    .band-tabs .sort-toggle{flex-wrap:nowrap;width:max-content;flex:0 0 auto}
    .band-tabs .btn-primary{flex:0 0 auto;white-space:nowrap}
    .band-tabs .sort-btn{padding:8px 12px;font-size:11.5px}
  }

  /* While a portrait is zoomed, the sheet behind it blurs rather than
     re-animating - it was visibly reloading on every open. */
  .char-overlay.is-zoomed{filter:blur(7px) brightness(.7);transition:filter .18s ease}
  .char-overlay{transition:filter .18s ease}

  /* What the character IS, set over the lower-right of the portrait. */
  .sc-kind{
    position:absolute;right:26px;bottom:24px;z-index:2;
    display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;
  }
  .sc-kind span{
    font-family:'Marcellus',Georgia,serif;letter-spacing:.14em;text-transform:uppercase;
    font-size:12px;color:var(--parchment);text-shadow:0 2px 12px rgba(0,0,0,.9);
  }
  .sc-kind span:last-child{color:var(--gold-bright);font-size:11px}
  /* Status marker, upper-right of the portrait. */
  .sc-mark{
    position:absolute;right:26px;top:26px;z-index:3;
    font-family:'Marcellus',Georgia,serif;letter-spacing:.16em;text-transform:uppercase;
    font-size:10px;color:var(--gold-bright);
    padding:5px 12px;border-radius:999px;
    background:rgba(10,8,16,.72);border:1px solid rgba(232,198,90,.4);
  }
  .sc-mark{right:74px}

  /* Sessions-played toggle. */
  .sc-reveal{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;cursor:pointer;padding:7px 0;margin-bottom:4px;
    /* Reset the UA button chrome explicitly - it was rendering light grey. */
    background:transparent;border:none;border-radius:0;
    border-bottom:1px solid rgba(201,162,39,.14);
    color:inherit;font:inherit;text-align:left;appearance:none;
  }
  .sc-reveal:hover .label-caps{color:var(--gold-bright)}
  /* Let the rail scroll rather than clipping the list mid-row. */
  .sc-sessions{max-height:none;overflow:visible;gap:6px}

  /* Card frames tell you what kind of character it is at a glance:
     gold for main cast, silver for side characters, bronze for NPCs. */
  .char-card{border-color:rgba(232,198,90,.42)}
  .char-card.is-side{border-color:rgba(196,201,214,.45)}
  .char-card.is-side:hover{border-color:rgba(226,231,244,.75)}
  .char-card.is-npc{border-color:rgba(176,124,62,.55)}
  .char-card.is-npc:hover{border-color:rgba(212,152,78,.85)}
  .char-card.is-former{border-color:rgba(140,134,158,.35)}

  /* Mobile overflow guards: the weekly grid is genuinely wider than a phone,
     so it must scroll inside its own panel rather than widening the page;
     the sessions side column must be allowed to shrink. */
  .avail-main{min-width:0;max-width:100%}
  .grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .sessions-split-timeline-col{min-width:0}
  @media (max-width:900px){
    .sessions-split-timeline-col{width:100%;max-width:100%}
    .sessions-split-timeline-col .card{max-width:100%}
  }

  /* --- Motion, kept minimal and opt-out --- */
  @keyframes anim-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes anim-fade{from{opacity:0}to{opacity:1}}
  @keyframes anim-modal{from{opacity:0;transform:translate(-50%,-50%) scale(.965)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  @keyframes anim-unfurl{from{opacity:0;transform:translateY(-6px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}

  /* Tab changes must feel immediate. The old whole-page rise plus staggered
     cards could keep a newly selected page translucent for over half a
     second, which read as input lag. Modal and expand animations remain. */
  .anim-tab-enter{animation:none}
  /* Sub-view switches fade the content region in place. No vertical
     movement and nothing above it is touched, so the heading and the
     toggle you just clicked stay put - it reads as the content swapping
     rather than the page reloading. */
  .anim-swap{animation:anim-swap .22s ease both}
  @keyframes anim-swap{from{opacity:0}to{opacity:1}}
  .anim-tab-enter .card,
  .anim-tab-enter .char-card,
  .anim-tab-enter .session-card{animation:none}

  .anim-modal-enter{animation:anim-modal .22s cubic-bezier(.22,.68,.36,1) both}
  .anim-fade-in{animation:anim-fade .22s ease both}
  /* Expanding rows unfurl downward like a scroll being opened. */
  .anim-expand-enter{animation:anim-unfurl .3s cubic-bezier(.22,.68,.36,1) both}

  .card,.char-card,.session-card{transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease}
  .char-card:hover,.session-card:hover{transform:translateY(-1px)}
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
    .char-card:hover,.session-card:hover{transform:none}
  }

  /* --- Accessibility floor --- */
  :focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px;border-radius:4px}

  @media (max-width:640px){
    .section-title{font-size:24px}
    body{padding:16px 12px 48px}
    /* Nav was eating four rows before any content showed; tighten it so
       more of the page is visible above the fold on a phone. */
    .tab-btn{padding:8px 11px;font-size:10.5px;letter-spacing:.08em;gap:6px}
    .tabs{padding:5px;gap:3px}
    .char-portrait-placeholder,.char-portrait{height:110px;flex-basis:110px}
    .crest-initials{font-size:31px}
    .modal-panel{width:94vw;padding:16px 15px;max-height:86vh}
    /* Comfortable tap targets on touch screens. */
    .sort-btn{padding:7px 11px}
    .btn-ghost,.btn-primary{padding:8px 12px}
  }

/* Unwritten fields read as a broken page when they simply vanish. */
.sc-empty{color:var(--slate-dark);font-style:italic}

/* NPC epithet, under the name rather than wedged inside it. */
.sc-nick{
  margin:2px 0 4px;font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;font-size:19px;color:var(--gold-bright);
  text-shadow:0 2px 12px rgba(0,0,0,.85);
}

/* Lightbox: hold the frame with the thumbnail, fade the full art in over it
   so opening a portrait does not flash empty and then jump. */
.zoom-stage{
  display:grid;place-items:center;width:min(92vw,900px);height:82vh;
  line-height:0;border-radius:10px;overflow:hidden;
  background-size:contain;background-repeat:no-repeat;background-position:center;
}
.zoom-stage .zoom-img{animation:none;opacity:0;max-width:100%;max-height:82vh;transition:opacity .22s ease}
.zoom-stage .zoom-img.is-ready{opacity:1}
.zoom-stage:has(.zoom-img.is-ready){background-image:none!important}
@media (prefers-reduced-motion:reduce){
  .zoom-stage .zoom-img{transition:none}
}

/* Card names: a touch smaller so longer ones such as
   "Dame Constancia Crownsilver" stay on one line. */
.char-card .entity-name{
  font-size:clamp(13px,1.55vw,16.5px);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.char-card .entity-name.name-long{font-size:14px}
.char-card .entity-name.name-very-long{font-size:12.5px}
@media (max-width:640px){
  .char-card .entity-name{font-size:14px}
  .char-card .entity-name.name-long{font-size:12.5px}
  .char-card .entity-name.name-very-long{font-size:11.5px}
}

/* ---------- Bond Maker beta ---------- */
.bond-maker-page{max-width:1180px;margin:0 auto;padding-bottom:28px}.bond-maker-page.bm-board-shell{width:100%;max-width:none}
.bm-who{padding:24px;border:1px solid rgba(201,162,39,.23);border-radius:18px;background:radial-gradient(circle at 50% 0,rgba(201,162,39,.08),transparent 38%),rgba(13,10,21,.74)}
.bm-who-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}
.bm-who-head h2{margin:4px 0 5px;font-size:clamp(30px,4vw,48px)}.bm-who-head p{margin:0}
.bm-all-button{flex:0 0 auto;min-height:44px}
.bm-select-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.bm-select-filters .sort-btn span{margin-left:5px;color:var(--slate);font:500 10px 'JetBrains Mono',monospace}
.bm-select-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px}
.bm-select-card{min-width:0;padding:0;overflow:hidden;border:1px solid rgba(140,130,158,.22);border-radius:12px;background:rgba(255,255,255,.025);color:var(--parchment);cursor:pointer;text-align:left;transition:transform .16s,border-color .16s,box-shadow .16s}
.bm-select-card:hover,.bm-select-card:focus-visible{transform:translateY(-2px);border-color:rgba(232,198,90,.7);box-shadow:0 12px 30px rgba(0,0,0,.28),0 0 18px rgba(201,162,39,.08)}
.bm-select-art{display:block;aspect-ratio:4/3;overflow:hidden;background:#17131f}.bm-select-art img{display:block;width:100%;height:100%;object-fit:cover}
.bm-select-fallback{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(circle,#302a3f,#15121e 72%);color:rgba(244,236,216,.72);font:600 34px 'Cormorant Garamond',serif}
.bm-select-copy{display:flex;flex-direction:column;min-width:0;padding:11px 12px}.bm-select-copy strong{overflow:hidden;font-size:20px;line-height:1;text-overflow:ellipsis;white-space:nowrap}.bm-select-copy small{margin-top:5px;color:var(--slate);font-size:11px;text-transform:uppercase;letter-spacing:.07em}
.bm-private-note{margin:20px 0 0;color:var(--slate);font-size:12px;text-align:center}
.bm-player-finish{display:flex;flex-direction:column;align-items:center;gap:10px}.bm-player-finish p{max-width:560px;margin:0 auto 8px;font-size:16px}.bm-download-rexen{min-width:240px;justify-content:center;font-size:15px}
.bm-board-page{display:flex;flex-direction:column;gap:18px}
.bm-board-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px;border:1px solid rgba(201,162,39,.23);border-radius:16px;background:radial-gradient(circle at 12% 0,rgba(201,162,39,.1),transparent 34%),rgba(13,10,21,.74)}
.bm-board-head h2{margin:4px 0 5px;font-size:clamp(30px,4vw,48px)}.bm-board-head p{max-width:720px;margin:0}
.bm-board-progress{align-self:flex-start;padding:7px 11px;border:1px solid rgba(201,162,39,.2);border-radius:999px;background:rgba(201,162,39,.06);color:var(--slate);font-size:12px}.bm-board-progress strong{color:var(--gold-bright);font-size:14px}.bm-board-progress span{margin:0 5px}
.bm-board-no-bond{display:grid;grid-template-columns:minmax(190px,.28fr) minmax(0,1fr);align-items:stretch;gap:12px;padding:12px;border:1px solid rgba(151,143,166,.25);border-radius:14px;background:linear-gradient(90deg,rgba(151,143,166,.08),rgba(13,10,21,.72))}.bm-board-no-bond>div{display:flex;flex-direction:column;justify-content:center;padding:4px 9px}.bm-board-no-bond h3{margin:3px 0 2px;color:var(--parchment);font-size:25px}.bm-board-no-bond p{margin:0;font-size:12px}.bm-board-no-bond .bm-board-drop{width:100%;height:auto;min-width:0;min-height:96px;overflow:visible}.bm-board-no-bond .bm-board-drop>.bm-board-token-list{max-height:none;overflow:visible}
.bm-board-sources{display:grid;grid-template-columns:1fr 1fr;gap:14px}.bm-board-source-column{min-width:0;padding:14px;border:1px solid rgba(140,130,158,.22);border-radius:14px;background:linear-gradient(180deg,rgba(28,24,38,.78),rgba(12,10,19,.7))}
.bm-board-source-column>header{padding:0 3px 10px;border-bottom:1px solid rgba(201,162,39,.16)}.bm-board-source-column>header h3{margin:0;color:var(--parchment);font-size:22px}
.bm-board-pool-group{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:start;gap:10px;min-height:62px;margin-top:11px;padding:10px;overflow:visible;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.018)}
.bm-board-pool-group>header,.bm-board-drop>header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.bm-board-pool-group h4,.bm-board-drop h4{margin:0;color:var(--parchment-dim);font:600 12px/1.2 'Inter',sans-serif;letter-spacing:.04em}
.bm-board-pool-group>header{margin:4px 0 0}.bm-board-pool-group>.bm-board-token-list{flex-wrap:wrap;overflow:visible;padding:0}
.bm-board-pool-group>header span,.bm-board-drop>header span{display:grid;place-items:center;min-width:22px;height:22px;border:1px solid rgba(201,162,39,.25);border-radius:50%;color:var(--gold-bright);font:600 10px 'JetBrains Mono',monospace}
.bm-board-token-list{display:flex;align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:9px 5px;min-height:72px}.bm-board-token{position:relative;display:flex;flex-direction:column;align-items:center;flex:0 0 92px;gap:4px;width:92px;min-width:92px;max-width:92px;min-height:76px;padding:3px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--parchment-dim);font:600 11px/1.15 'Inter',sans-serif;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:none;transition:opacity .15s,transform .15s,border-color .15s,box-shadow .15s,background .15s}
.bm-board-token>span:not(.bm-board-avatar){order:0;display:flex;flex-direction:column;justify-content:center;width:100%;height:31px;min-width:0;padding:3px 5px;overflow:hidden;border:1px solid rgba(140,130,158,.2);border-radius:7px;background:rgba(9,7,15,.9);text-align:center;text-overflow:ellipsis;white-space:nowrap}.bm-board-token small{display:block;width:100%;margin-top:1px;overflow:hidden;color:var(--gold);font-size:8px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.bm-board-token:hover,.bm-board-token:focus-visible,.bm-board-token.is-picked{border-color:rgba(232,198,90,.58);background:rgba(201,162,39,.055);box-shadow:0 0 0 2px rgba(232,198,90,.08),0 5px 14px rgba(0,0,0,.25);transform:translateY(-1px)}.bm-board-token.is-picked{background:rgba(201,162,39,.14)}.bm-board-token.is-dragging{opacity:.35}
.bm-board-token.is-placed{padding:3px}.bm-board-token.is-placed>button{position:absolute;right:13px;bottom:0;z-index:2;display:grid;place-items:center;width:18px;height:18px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(20,16,28,.94);color:var(--slate);cursor:pointer}.bm-board-token.is-placed>button:hover{background:rgba(143,45,61,.7);color:var(--parchment)}
.bm-board-token.is-established{cursor:grab}.bm-board-token.is-established>span:not(.bm-board-avatar){border-color:rgba(201,162,39,.5);background:linear-gradient(90deg,rgba(201,162,39,.13),rgba(9,7,15,.9))}.bm-board-token.is-sorted>span:not(.bm-board-avatar){border-color:rgba(72,181,134,.38)}.bm-board-established-mark{position:absolute;right:13px;bottom:0;z-index:2;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(35,28,12,.96);color:var(--gold-bright);font:700 9px 'Inter',sans-serif;font-style:normal}.bm-board-token.is-catalogued{opacity:.94}
.bm-board-drag-placeholder{display:block;flex:0 0 92px;width:92px;border:1px dashed rgba(232,198,90,.32);border-radius:12px;background:rgba(232,198,90,.035)}.bm-board-token.is-live-dragging{position:fixed;z-index:120;max-width:none;margin:0;opacity:1;cursor:grabbing;pointer-events:none;transform:scale(1.07);transform-origin:center;transition:box-shadow .12s,transform .12s;border-color:var(--gold-bright);border-radius:12px;background:rgba(14,10,22,.96);box-shadow:0 14px 36px rgba(0,0,0,.56),0 0 0 3px rgba(12,10,21,.9),0 0 24px rgba(232,198,90,.26)}.bm-board-token.is-live-dragging .bm-board-avatar{transform:scale(1.05);border-color:var(--gold-bright)}
.bm-board-avatar{order:1;display:block;flex:0 0 42px;width:42px;height:42px;overflow:hidden;border:2px solid rgba(201,162,39,.52);border-radius:50%;background:#17131f;box-shadow:0 3px 9px rgba(0,0,0,.3)}.bm-board-avatar img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.bm-board-fallback{display:grid;place-items:center;width:100%;height:100%;font:600 11px 'Cormorant Garamond',serif;color:var(--parchment-dim)}
.bm-board-empty{margin:7px 0;color:var(--slate-dark);font:500 10px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}.bm-board-categories{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;gap:12px;min-width:0}
.bm-board-category{display:flex;flex-direction:column;align-self:stretch;min-width:0;padding:11px;border:1px solid rgba(201,162,39,.2);border-radius:14px;background:radial-gradient(circle at 50% 0,rgba(201,162,39,.08),transparent 34%),rgba(13,10,21,.72)}.bm-board-category>header{display:flex;align-items:center;justify-content:flex-start;gap:9px;margin:0 0 9px;padding:3px 3px 9px;border-bottom:1px solid rgba(201,162,39,.15)}.bm-board-category>header h3{margin:0;color:var(--parchment);font-size:22px;line-height:1.05}.bm-board-order{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border:1px solid rgba(201,162,39,.34);border-radius:50%;color:var(--gold-bright);font:600 9px 'JetBrains Mono',monospace}
.bm-board-drops{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;overflow:visible}.bm-board-drop{width:100%;height:auto;min-width:0;min-height:116px;padding:10px;overflow:visible;border:1px dashed rgba(140,130,158,.32);border-radius:10px;background:rgba(255,255,255,.018);outline:none;transition:border-color .16s,background .16s,box-shadow .16s}.bm-board-drop>.bm-board-token-list{align-content:flex-start;max-height:none;overflow:visible}.bm-board-drop:focus-visible,.bm-board-drop:hover{border-color:rgba(232,198,90,.55);background:rgba(201,162,39,.045)}.bm-board-drop.is-drag-over{border-style:solid;border-color:var(--gold-bright);background:rgba(201,162,39,.13);box-shadow:inset 0 0 24px rgba(232,198,90,.08),0 0 18px rgba(232,198,90,.12)}
.bm-board-category-target{display:flex;flex-direction:column;justify-content:center;min-height:104px;background:linear-gradient(135deg,rgba(201,162,39,.07),rgba(255,255,255,.012))}.bm-board-category-target p{margin:3px 0 0;color:var(--slate);font-size:11px;line-height:1.35}
.bm-board-subgroup{min-width:0;padding-top:3px}.bm-board-subhead{margin:0 0 6px;padding:0 2px;color:var(--gold);font:600 9px/1.2 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase}.bm-board-subdrops{display:flex;flex-direction:column;gap:7px}
.bm-board-category.is-special>.bm-board-drop{height:auto;min-height:116px}.bm-board-drop.is-none{border-color:rgba(151,143,166,.22);background:rgba(151,143,166,.03)}.bm-board-drop.is-other{border-color:rgba(180,128,214,.28);background:rgba(119,67,151,.04)}.bm-board-tip{margin:0;color:var(--slate);font-size:12px;text-align:center}
.bm-text-export{margin-top:14px;padding:22px;border:1px solid rgba(201,162,39,.25);border-radius:14px;background:rgba(13,10,21,.78);text-align:center}.bm-text-export-head{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.bm-text-export-head h3{margin:4px 0;color:var(--parchment);font-size:28px}.bm-text-export-head p{margin:0}.bm-text-export-head .bm-export-row{justify-content:center}.bm-text-export-head .btn-primary{min-width:230px;justify-content:center}.bm-text-export-details{margin-top:18px;border-top:1px solid rgba(201,162,39,.14)}.bm-text-export-details>summary{padding:13px 2px;color:var(--gold-bright);font-weight:600;cursor:pointer}.bm-text-export-details>summary span{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:7px;border:1px solid rgba(201,162,39,.3);border-radius:50%;font:600 10px 'JetBrains Mono',monospace}.bm-text-export-list{display:flex;flex-direction:column;gap:7px;text-align:left}.bm-text-export-row{display:grid;grid-template-columns:190px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px;border:1px solid rgba(140,130,158,.18);border-radius:9px;background:rgba(255,255,255,.018)}.bm-text-export-row>div{display:flex;flex-direction:column;min-width:0}.bm-text-export-row code{overflow:hidden;color:var(--gold-bright);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.bm-text-export-row small{margin-top:3px;color:var(--slate)}.bm-text-export-row textarea{width:100%;min-height:52px;resize:vertical;padding:8px;border:1px solid rgba(140,130,158,.25);border-radius:7px;background:#100d19;color:var(--parchment-dim);font:12px/1.4 'Inter',sans-serif}
.bm-board-other-backdrop{position:fixed;z-index:90;inset:0;display:grid;place-items:center;padding:18px;background:rgba(6,4,11,.78);backdrop-filter:blur(5px)}.bm-board-other-dialog{width:min(100%,470px);padding:24px;border:1px solid rgba(201,162,39,.42);border-radius:14px;background:linear-gradient(180deg,rgba(37,32,48,.99),rgba(15,12,23,.99));box-shadow:0 26px 80px rgba(0,0,0,.62),0 0 36px rgba(201,162,39,.1)}.bm-board-other-dialog h3{margin:5px 0 16px;color:var(--parchment);font-size:28px}.bm-board-other-dialog input{min-height:46px;font-size:15px}.bm-board-other-dialog .bm-export-row{margin-top:14px}
.bm-board-reciprocal-dialog{width:min(100%,620px)}.bm-board-reciprocal-dialog>p{margin:0 0 10px}.bm-board-reciprocal-dialog .bm-confirm{width:100%;margin-bottom:12px}.bm-board-reciprocal-adjust{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bm-board-reciprocal-adjust select,.bm-board-reciprocal-adjust input{min-height:44px}.bm-board-reciprocal-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:13px}
.bm-board-category-dialog{width:min(100%,720px)}.bm-board-category-dialog>p{margin:0 0 13px}.bm-board-category-sections{display:flex;flex-direction:column;gap:12px}.bm-board-category-sections>section>h4{margin:0 0 6px;color:var(--gold);font:600 10px/1.2 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase}.bm-board-category-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));grid-auto-rows:44px;gap:8px}.bm-board-category-options .bm-relation{width:100%;height:44px;min-height:44px}.bm-board-category-options .bm-relation span{white-space:normal;text-align:left}.bm-category-other{border-color:rgba(180,128,214,.38);background:rgba(119,67,151,.07)}
.bm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;margin-bottom:14px}
.bm-head h2{margin:4px 0 2px}
.bm-head h2 em{display:inline-block;vertical-align:middle;margin-left:8px;padding:4px 8px;border:1px solid rgba(201,162,39,.5);border-radius:999px;color:var(--gold-bright);font:600 10px/1 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase}
.bm-head p{margin:0;max-width:650px}
.bm-export-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.bm-modes{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:12px 0 14px}
.bm-modes>span{margin-right:3px;color:var(--slate);font:600 12px/1 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.08em}
.bm-progress{margin-bottom:18px}
.bm-progress>div{height:4px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.bm-progress>div span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8c6725,var(--gold-bright));transition:width .35s ease}
.bm-progress p{margin:7px 0 0;color:var(--slate);font-size:13px}
.bm-progress strong{color:var(--parchment)}
.bm-stage{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:center;gap:20px;padding:22px;border:1px solid rgba(201,162,39,.23);border-radius:18px 18px 0 0;background:radial-gradient(circle at 50% 38%,rgba(201,162,39,.08),transparent 36%),linear-gradient(135deg,rgba(255,255,255,.025),transparent 50%)}
.bm-person{display:grid;grid-template-columns:minmax(150px,260px) minmax(0,1fr);align-items:center;gap:22px;min-width:0}
.bm-right{grid-template-columns:minmax(0,1fr) minmax(150px,260px);text-align:right}
.bm-right .bm-portrait{grid-column:2}.bm-right .bm-person-copy{grid-column:1;grid-row:1}
.bm-portrait{position:relative;aspect-ratio:4/5;min-height:260px;border-radius:15px;overflow:hidden;border:1px solid rgba(201,162,39,.48);background:#15121e;box-shadow:0 22px 50px rgba(0,0,0,.34)}
.bm-portrait::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -80px 70px rgba(7,5,13,.45);pointer-events:none}
.bm-portrait img{display:block;width:100%;height:100%;object-fit:cover}
.bm-fallback{display:grid;place-items:center;width:100%;height:100%;color:rgba(244,236,216,.7);font:600 clamp(42px,7vw,82px)/1 'Cormorant Garamond',serif;background:radial-gradient(circle,#302a3f,#15121e 72%)}
.bm-kind{position:absolute;z-index:1;top:10px;left:10px;padding:4px 8px;border-radius:999px;border:1px solid rgba(201,162,39,.55);background:rgba(10,8,16,.82);color:var(--gold-bright);font:600 10px/1 'Inter',sans-serif;letter-spacing:.1em}
.bm-side-label{position:absolute;z-index:1;right:10px;bottom:10px;padding:5px 8px;border-radius:6px;background:rgba(10,8,16,.78);color:var(--parchment-dim);font:600 10px/1 'Inter',sans-serif;letter-spacing:.07em;text-transform:uppercase}
.bm-person-copy h3{margin:0;color:var(--parchment);font-size:clamp(30px,3.6vw,54px);line-height:.9;overflow-wrap:anywhere}
.bm-person-copy p{margin:9px 0;color:var(--slate);font-size:14px;line-height:1.35}
.bm-person-copy code{color:rgba(201,162,39,.72);font-size:11px}
.bm-link-mark{display:flex;align-items:center;gap:5px;color:var(--gold-bright)}
.bm-link-mark span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(201,162,39,.58))}.bm-link-mark span:last-child{transform:scaleX(-1)}
.bm-link-mark b{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(201,162,39,.55);border-radius:50%;font:600 20px 'Cormorant Garamond',serif;background:#0c0a15}
.bm-controls{padding:22px;border:1px solid rgba(201,162,39,.23);border-top:0;border-radius:0 0 18px 18px;background:rgba(13,10,21,.78)}
.bm-question{text-align:center;margin:0 auto 18px;max-width:760px}
.bm-question h2{margin:4px 0 5px;font-size:clamp(24px,3vw,38px);font-weight:500}.bm-question h2 strong{color:var(--gold-bright)}
.bm-question>p{margin:0}.bm-reciprocal>p{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:10px}.bm-direction{color:var(--slate);font-size:13px}
.bm-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-width:900px;margin:0 auto}
.bm-relation{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:45px;padding:10px 12px;border:1px solid rgba(140,130,158,.25);border-radius:9px;background:rgba(255,255,255,.025);color:var(--parchment-dim);font:600 14px 'Inter',sans-serif;cursor:pointer;transition:border-color .16s,background .16s,color .16s,transform .16s}
.bm-relation:hover,.bm-relation:focus-visible{border-color:rgba(232,198,90,.72);background:rgba(201,162,39,.1);color:var(--gold-bright);transform:translateY(-1px)}
.bm-relation kbd{min-width:21px;padding:3px 5px;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:var(--slate);font:500 10px 'JetBrains Mono',monospace}
.bm-more{display:grid;grid-template-columns:minmax(220px,1fr) minmax(300px,1.25fr);gap:10px;max-width:900px;margin:12px auto 0}
.bm-more select,.bm-more input,.bm-footer select{min-height:42px;background:#100d19;color:var(--parchment);border:1px solid rgba(140,130,158,.25);border-radius:7px;padding:8px 10px}
.bm-custom{display:flex;gap:7px}.bm-custom .btn-primary{white-space:nowrap}
.bm-use-other{white-space:nowrap;min-height:42px;padding:9px 14px;border:1px solid rgba(140,130,158,.25);border-radius:7px;background:rgba(255,255,255,.025);color:var(--parchment-dim);font:600 14px 'Inter',sans-serif;cursor:pointer;transition:border-color .16s,background .16s,color .16s}
.bm-use-other:hover,.bm-use-other:focus-visible{border-color:rgba(232,198,90,.72);background:rgba(201,162,39,.1);color:var(--gold-bright)}
.bm-skip-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}.bm-skip{display:flex}.bm-skip-character{color:var(--gold-bright)}.bm-recip-actions{display:flex;justify-content:center;gap:8px;margin-top:12px}
.bm-confirm{display:flex;justify-content:space-between;align-items:center;gap:20px;width:min(100%,900px);margin:0 auto 12px;padding:13px 16px;border:1px solid rgba(232,198,90,.68);border-radius:10px;background:linear-gradient(100deg,rgba(201,162,39,.18),rgba(201,162,39,.06));color:var(--parchment);cursor:pointer;text-align:left}
.bm-confirm span:first-child{display:flex;flex-direction:column}.bm-confirm small{color:var(--slate);text-transform:uppercase;letter-spacing:.08em}.bm-confirm strong{font:600 20px 'Cormorant Garamond',serif;color:var(--gold-bright)}
.bm-footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid rgba(201,162,39,.14)}
.bm-footer label{display:flex;align-items:center;gap:8px;margin-right:auto;color:var(--slate);font-size:13px}.bm-footer select{min-width:220px}.bm-reset{color:#b98a91}
.bm-complete{text-align:center;padding:80px 24px;border:1px solid rgba(201,162,39,.25);border-radius:16px;background:radial-gradient(circle,rgba(201,162,39,.1),transparent 52%)}
.bm-complete-mark{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 14px;border:1px solid rgba(232,198,90,.65);border-radius:50%;color:var(--gold-bright);font-size:28px}.bm-complete h2{margin:6px 0;font-size:36px}.bm-complete .bm-export-row{justify-content:center;margin-top:18px}
@media(max-width:900px){
  .bm-stage{grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);gap:10px;padding:14px}.bm-person,.bm-right{display:flex;flex-direction:column;gap:12px;text-align:center}.bm-portrait{width:100%;min-height:220px}.bm-right .bm-person-copy{order:2}.bm-person-copy h3{font-size:32px}.bm-person-copy p{display:none}.bm-quick{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .bm-who{padding:16px 12px}.bm-who-head{flex-direction:column}.bm-all-button{width:100%;justify-content:center}.bm-select-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.bm-select-copy{padding:9px}.bm-select-copy strong{font-size:18px}.bm-head{flex-direction:column}.bm-head .bm-export-row{justify-content:flex-start}.bm-stage{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);padding:10px;gap:6px}.bm-portrait{min-height:0;aspect-ratio:3/4;border-radius:10px}.bm-link-mark b{width:24px;height:24px;font-size:15px}.bm-person-copy h3{font-size:25px}.bm-person-copy code{font-size:8px}.bm-controls{padding:18px 10px}.bm-more{grid-template-columns:1fr}.bm-custom{flex-direction:column}.bm-footer label{width:100%;flex-direction:column;align-items:flex-start}.bm-footer select{width:100%}.bm-reciprocal>p{flex-direction:column;gap:3px}.bm-confirm{align-items:flex-end}.bm-confirm>span:last-child{font-size:12px;text-align:right}
}
@media(max-width:760px){
  .bm-board-head{flex-direction:column;padding:16px 13px}.bm-board-head .bm-export-row{justify-content:flex-start}.bm-board-no-bond{grid-template-columns:1fr}.bm-board-sources{grid-template-columns:1fr}.bm-board-source-column,.bm-board-category{padding:10px}.bm-board-pool-group{grid-template-columns:1fr}.bm-board-categories{grid-template-columns:repeat(2,minmax(0,1fr))}.bm-board-category>header{margin:0 0 8px;padding:2px 2px 8px}.bm-board-category>header h3{font-size:18px}.bm-board-drop{width:100%;min-width:0;min-height:108px;padding:8px}.bm-board-avatar{flex-basis:27px;width:27px;height:27px}.bm-board-reciprocal-adjust{grid-template-columns:1fr}.bm-text-export-head{flex-direction:column}.bm-text-export-head .bm-export-row{justify-content:center}.bm-text-export-row{grid-template-columns:1fr}.bm-text-export-row .btn-ghost{justify-content:center}
}
@media(max-width:560px){.bm-board-categories{grid-template-columns:1fr}}
@media(max-width:430px){.bm-board-category>header h3{font-size:16px}}

/* Separates the name block from the rest of the sheet's facts. */
.sc-fact-rule{height:1px;background:rgba(201,162,39,.18);margin:10px 0}

/* DM marker sits in the card's corner rather than crowding the name. */
.roster-card, .card{position:relative}
.dm-corner{
  position:absolute;top:12px;right:12px;z-index:2;
  font-family:'Marcellus',Georgia,serif;letter-spacing:.14em;font-size:9.5px;
  padding:4px 9px;border-radius:999px;
  background:rgba(226,189,66,.18);color:var(--gold-bright);
  border:1px solid rgba(226,189,66,.4);
}

/* Player roster cards read like compact profiles. Their main character art
   stands in for a profile picture, with a small role-coloured flame orbit. */
:where(.roster-profile-card,.player-profile-modal){--roster-flame:#b87333}
.roster-grid .roster-profile-card{
  min-height:190px;padding:18px;overflow:hidden;
  background:linear-gradient(145deg,rgba(35,31,45,.98),rgba(14,12,21,.98));
  border-color:color-mix(in srgb,var(--roster-flame) 38%,rgba(211,193,145,.12));
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.roster-profile-card:hover{
  border-color:color-mix(in srgb,var(--roster-flame) 72%,rgba(255,255,255,.16));
  box-shadow:0 12px 30px -18px rgba(0,0,0,.9),0 0 12px color-mix(in srgb,var(--roster-flame) 20%,transparent);
}
.roster-flame-bronze{--roster-flame:#c27b3b}
.roster-flame-silver{--roster-flame:#cbd1dc}
.roster-flame-gold{--roster-flame:#f0c84f}
.roster-flame-muted{--roster-flame:#8c869e}
.roster-profile-head{display:flex;align-items:center;gap:15px;min-width:0;padding-right:38px}
.roster-profile-avatar{
  position:relative;display:grid;place-items:center;flex:0 0 78px;width:78px;height:78px;
  border-radius:50%;border:2px solid color-mix(in srgb,var(--roster-flame) 68%,#17131f);
  background:#0b0911;box-shadow:0 0 0 3px rgba(8,6,15,.88),0 0 12px color-mix(in srgb,var(--roster-flame) 22%,transparent);
}
.roster-profile-image{width:68px;height:68px;border-radius:50%;margin:0;border:0;object-fit:cover;object-position:center 8%}
.roster-profile-avatar::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,
    transparent 0 20%,color-mix(in srgb,var(--roster-flame) 18%,transparent) 26%,color-mix(in srgb,var(--roster-flame) 60%,transparent) 38%,var(--roster-flame) 46%,#fff8dc 49%,transparent 50%,
    transparent 50% 70%,color-mix(in srgb,var(--roster-flame) 18%,transparent) 76%,color-mix(in srgb,var(--roster-flame) 60%,transparent) 88%,var(--roster-flame) 96%,#fff8dc 99%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--roster-flame) 58%,transparent));
  animation:roster-flame-orbit var(--roster-trail-speed,4.8s) linear infinite;
  animation-play-state:paused;
  transition:opacity .38s ease;will-change:opacity,transform;
}
@keyframes roster-flame-orbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.roster-profile-card:hover .roster-profile-avatar::after,
.roster-profile-card:focus-within .roster-profile-avatar::after{
  opacity:.94;animation-play-state:running;
}
.roster-profile-identity{display:flex;flex-direction:column;min-width:0;flex:1}
.roster-profile-card .player-name-deco{font-size:23px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster-profile-character{margin-top:4px;color:var(--parchment-dim);font-family:'Cormorant Garamond',Georgia,serif;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster-profile-timezone{margin-top:3px;color:var(--slate);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster-profile-edit{position:absolute;right:12px;top:44px}
.roster-profile-activity{margin:15px 0 10px}
.roster-profile-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(211,193,145,.12);padding-top:10px}
.roster-profile-stats span{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 12px}
.roster-profile-stats span:first-child{padding-left:0;border-right:1px solid rgba(211,193,145,.12)}
.roster-profile-stats span:last-child{padding-right:0}
.roster-profile-stats small{color:var(--slate);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.roster-profile-stats b{color:var(--parchment-dim);font-family:'JetBrains Mono',monospace;font-size:13px}
.roster-profile-inactive-card{min-height:0;padding:14px}
.roster-profile-inactive-card .roster-profile-avatar{filter:saturate(.72)}
.roster-profile-inactive-card .roster-profile-timezone{letter-spacing:.09em;text-transform:uppercase}
.roster-profile-inactive-card .roster-profile-stats{margin-top:11px}
.roster-profile-head-action{cursor:pointer}

/* The opened player uses the same portrait-led identity as the roster card. */
.player-profile-modal{
  width:min(94vw,760px);padding:0;overflow-y:auto;
  border-color:color-mix(in srgb,var(--roster-flame) 50%,rgba(211,193,145,.18));
  background:linear-gradient(160deg,rgba(26,22,34,.99),rgba(10,8,16,.99));
}
.player-profile-hero{
  position:relative;display:flex;align-items:center;gap:22px;padding:28px 54px 26px 28px;
  background:radial-gradient(circle at 18% 30%,color-mix(in srgb,var(--roster-flame) 14%,transparent),transparent 42%),linear-gradient(145deg,rgba(39,35,49,.98),rgba(19,16,27,.98));
  border-bottom:1px solid color-mix(in srgb,var(--roster-flame) 34%,rgba(211,193,145,.12));
}
.player-profile-close{position:absolute;right:16px;top:16px}
.player-profile-avatar{flex:0 0 116px;width:116px;height:116px}
.player-profile-avatar::after{
  inset:-7px;
  animation:roster-flame-orbit 6.4s linear infinite,player-profile-trail-in .45s ease both;
  animation-play-state:running,running;
}
@keyframes player-profile-trail-in{from{opacity:0}to{opacity:.94}}
.player-profile-image{width:104px;height:104px;border-radius:50%;margin:0;border:0;object-fit:cover;object-position:center 8%}
.player-profile-identity{display:flex;flex-direction:column;min-width:0}
.player-profile-name{font-size:34px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-profile-main{margin-top:5px;color:var(--parchment-dim);font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-profile-zone{margin-top:5px;color:var(--slate);font-size:11px}
.player-profile-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.player-profile-role,.player-profile-inactive{padding:4px 8px;border-radius:999px;font-size:9px;letter-spacing:.09em;text-transform:uppercase}
.player-profile-role{color:var(--roster-flame);border:1px solid color-mix(in srgb,var(--roster-flame) 50%,transparent);background:color-mix(in srgb,var(--roster-flame) 9%,transparent)}
.player-profile-inactive{color:var(--slate);border:1px solid rgba(151,143,166,.3)}
.player-profile-content{padding:22px 26px 26px}
.player-profile-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px}
.player-profile-metrics>div{display:flex;min-width:0;min-height:62px;flex-direction:column;justify-content:center;gap:5px;padding:10px 12px;border:1px solid rgba(211,193,145,.12);border-radius:8px;background:rgba(8,6,15,.28)}
.player-profile-metrics small{color:var(--slate);font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.player-profile-metrics b{color:var(--parchment);font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;line-height:1}
.player-profile-section-label{margin:18px 0 8px}
.player-profile-actions{gap:8px;margin-top:18px}
.player-week-label{margin:16px 0 7px}
.player-week-scroll{width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:3px}
.player-week-grid{
  display:grid;grid-template-columns:repeat(7,minmax(82px,1fr));gap:6px;min-width:686px;
}
.player-week-day{
  min-width:0;min-height:76px;display:flex;flex-direction:column;gap:8px;
  padding:9px 7px;border:1px solid rgba(211,193,145,.1);border-radius:8px;
  background:rgba(8,6,15,.26);text-align:center;
}
.player-week-day.is-available{
  border-color:color-mix(in srgb,var(--roster-flame) 38%,rgba(211,193,145,.12));
  background:color-mix(in srgb,var(--roster-flame) 7%,rgba(8,6,15,.3));
}
.player-week-day-name{
  color:var(--gold);font-family:'Marcellus',Georgia,serif;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;
}
.player-week-times{
  display:flex;flex:1;flex-direction:column;justify-content:center;gap:3px;
  color:var(--slate-dark);font-size:10px;line-height:1.28;
}
.player-week-day.is-available .player-week-times{color:var(--parchment-dim)}
.player-week-times span{display:block}
.player-week-zone{margin:8px 0 0}
@media(max-width:420px){
  .roster-grid .roster-profile-card{padding:15px}.roster-profile-head{gap:12px}
  .roster-profile-avatar{flex-basis:68px;width:68px;height:68px}
  .roster-profile-image{width:58px;height:58px}
  .roster-profile-card .player-name-deco{font-size:20px}
  .roster-profile-avatar::after{display:none}
  .player-profile-modal{width:calc(100vw - 14px);max-height:calc(100dvh - 14px)}
  .player-profile-hero{align-items:flex-start;gap:16px;padding:22px 42px 20px 18px}
  .player-profile-avatar{display:grid;flex-basis:84px;width:84px;height:84px}
  .player-profile-avatar::after{display:block;inset:-5px}
  .player-profile-image{width:74px;height:74px}
  .player-profile-name{font-size:27px}
  .player-profile-main{font-size:16px;white-space:normal}
  .player-profile-content{padding:18px}
  .player-profile-metrics{grid-template-columns:1fr}
  .player-week-grid{grid-template-columns:repeat(7,92px);min-width:max-content}
}
/* Timezone reads as one line. */
.tz-line{white-space:nowrap}

/* Shown when a sheet fails but the rest of the site still loaded. */
.dd-datawarn{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:9998;
  background:#3a2412;border:1px solid rgba(226,150,66,.5);color:#ffe6c9;
  border-radius:10px;padding:12px 44px 12px 16px;
  font-size:12.5px;line-height:1.5;
}
.dd-datawarn strong{color:#ffc27a}
.dd-datawarn button{
  position:absolute;top:8px;right:10px;background:none;border:none;
  color:#ffe6c9;font-size:20px;line-height:1;cursor:pointer;
}

/* Calendar and Beacon are equal companion panels on wide screens. */
.beacon-page-layout{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  align-items:stretch;width:100%;
}
.beacon-calendar{width:100%;height:100%;padding:16px;display:flex;flex-direction:column}
.beacon-cal-grid-scroll{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}
.beacon-cal-grid{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}
.beacon-cal-head{align-items:center;margin-bottom:10px}
.beacon-cal-title{font-size:15px;color:var(--parchment);line-height:1.2}
.beacon-cal-weekdays,.beacon-cal-week{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px;
}
.beacon-cal-week{flex:1}
.beacon-cal-weekday{text-align:center;color:var(--slate);font-size:12px;padding:4px 0}
.beacon-cal-day{
  min-width:0;min-height:126px;padding:5px;border-radius:7px;border:1px solid rgba(211,193,145,.10);
  background:rgba(16,13,29,.32);color:var(--slate);position:relative;
  display:flex;align-items:stretch;justify-content:flex-start;flex-direction:column;font:inherit;font-size:13px;
}
.beacon-cal-day.out{opacity:.25}
.beacon-cal-day.today{box-shadow:inset 0 0 0 1px rgba(232,198,90,.45)}
.beacon-cal-day.recommended{
  color:var(--parchment);border-color:rgba(232,198,90,.26);
  background:rgba(201,162,39,.055);cursor:pointer;
}
.beacon-cal-day.recommended:hover{border-color:rgba(232,198,90,.52);background:rgba(201,162,39,.09)}
.beacon-cal-day.selected{
  color:var(--parchment);border-color:var(--gold-bright);
  box-shadow:0 0 15px rgba(232,198,90,.22);
}
.beacon-cal-daytop{display:flex;align-items:center;justify-content:space-between;gap:3px;min-width:0}
.beacon-cal-daynum{position:relative;z-index:1;align-self:flex-start;line-height:1;margin:1px 0 5px 1px}
.beacon-cal-match-count{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;line-height:1;color:var(--parchment-dim);
  padding:2px 4px;border-radius:4px;background:rgba(16,13,29,.58);
}
.beacon-cal-mark{width:5px;height:5px;border-radius:50%;background:var(--gold-bright);display:inline-block}
.beacon-cal-slots{display:flex;flex-direction:column;gap:3px;margin-top:auto;min-width:0}
.beacon-cal-slot{
  width:100%;min-width:0;margin:0;padding:3px 4px;border-radius:5px;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  color:var(--parchment-dim);font:inherit;text-align:left;
}
.beacon-cal-slot.bronze{
  background:rgba(184,115,51,.20);border:1px solid rgba(205,138,76,.58);
}
.beacon-cal-slot.bronze:hover{background:rgba(184,115,51,.31);border-color:#d5965d}
.beacon-cal-slot.silver{
  background:rgba(176,185,198,.18);border:1px solid rgba(205,214,226,.64);
}
.beacon-cal-slot.silver:hover{background:rgba(176,185,198,.29);border-color:#dce3ed}
.beacon-cal-slot.gold{
  background:rgba(201,162,39,.18);border-color:rgba(232,198,90,.62);
  border-style:solid;border-width:1px;
}
.beacon-cal-slot.gold:hover{background:rgba(201,162,39,.28);border-color:var(--gold-bright)}
.beacon-cal-slot.selected{outline:2px solid var(--parchment);outline-offset:1px}
.beacon-cal-slot.continues-next{border-bottom-right-radius:2px;border-top-right-radius:2px}
.beacon-cal-slot.continues-prev{border-bottom-left-radius:2px;border-top-left-radius:2px}
.beacon-cal-slot-time{
  max-width:100%;font-family:'JetBrains Mono',monospace;font-size:8px;
  font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.beacon-cal-slot-main{width:100%;display:flex;align-items:center;justify-content:space-between;gap:3px;min-width:0}
.beacon-cal-carry{
  width:100%;font-family:'JetBrains Mono',monospace;font-size:7px;
  line-height:1;text-transform:uppercase;letter-spacing:.04em;color:inherit;opacity:.9;
}
.continues-next .beacon-cal-carry{text-align:right}
.continues-prev .beacon-cal-carry{text-align:left}
.beacon-cal-slot-people{display:flex;align-items:center;justify-content:flex-end;min-height:14px;max-width:58%;flex:0 1 auto}
.avatar-beacon-cal{width:14px;height:14px;font-size:6.5px;margin-right:-3px;border-width:1px}
.beacon-cal-more{
  height:14px;min-width:14px;padding:0 2px;margin-left:4px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(16,13,29,.72);color:var(--parchment-dim);
  font-family:'JetBrains Mono',monospace;font-size:7.5px;
}
.beacon-cal-overflow{
  text-align:right;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;
  line-height:1.2;color:var(--gold-bright);padding:2px 2px 0;
}
.beacon-cal-legend{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:9px;color:var(--slate);font-size:10.5px}
.beacon-cal-legend-key{display:inline-flex;align-items:center;gap:5px}
.beacon-cal-slot-swatch{width:16px;height:9px;border-radius:3px}
.beacon-cal-slot-swatch.bronze{background:rgba(184,115,51,.32);border:1px solid rgba(205,138,76,.72)}
.beacon-cal-slot-swatch.silver{background:rgba(176,185,198,.28);border:1px solid rgba(205,214,226,.75)}
.beacon-cal-slot-swatch.gold{background:rgba(201,162,39,.25);border:1px solid rgba(232,198,90,.72)}
.beacon-cal-legend-note{opacity:.75;font-style:italic}
.beacon-matches-modal{width:min(92vw,720px)}
.beacon-matches-head{align-items:center;margin-bottom:5px}
.beacon-matches-title{font-size:22px;color:var(--parchment)}
.beacon-matches-note{color:var(--slate);font-size:11px;margin-bottom:13px}
.beacon-match-list{display:flex;flex-direction:column;gap:8px}
.beacon-match-full{
  width:100%;padding:10px;border-radius:8px;cursor:pointer;color:var(--parchment-dim);
  display:grid;grid-template-columns:minmax(145px,.65fr) minmax(0,1.35fr);gap:12px;align-items:center;text-align:left;
}
.beacon-match-full.gold{background:rgba(201,162,39,.16);border:1px solid rgba(232,198,90,.62)}
.beacon-match-full.silver{background:rgba(176,185,198,.14);border:1px solid rgba(205,214,226,.58)}
.beacon-match-full.bronze{background:rgba(184,115,51,.16);border:1px solid rgba(205,138,76,.52)}
.beacon-match-full:hover{filter:brightness(1.18)}
.beacon-match-summary{display:flex;flex-direction:column;gap:4px;min-width:0}
.beacon-match-tier{font-family:'Marcellus',Georgia,serif;font-size:12px;color:var(--parchment)}
.beacon-match-time{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--slate);line-height:1.35}
.beacon-match-party{display:flex;flex-wrap:wrap;gap:6px 9px;min-width:0}
.beacon-match-person{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:150px;overflow:hidden;font-size:9.5px}
.beacon-match-person > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar-beacon-match{width:22px;height:22px;margin:0;font-size:8px;border-width:1px}
@media (max-width:600px){
  .beacon-match-full{grid-template-columns:1fr;gap:8px}
}
.beacon-board{width:100%;max-width:none;padding:12px}
.beacon-board .beacon-table{width:auto;table-layout:auto;border-spacing:4px;min-width:570px}

/* --- Relationship web -------------------------------------------------- */
.relationships-page{gap:16px}
.relationships-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:stretch}
.relationship-picker{padding:16px;min-width:0;display:flex;flex-direction:column;max-height:760px}
.relationship-search{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;border:1px solid rgba(211,193,145,.18);border-radius:9px;background:rgba(8,7,14,.45)}
.relationship-search:focus-within{border-color:rgba(232,198,90,.55);box-shadow:0 0 0 2px rgba(232,198,90,.08)}
.relationship-search input{min-width:0;width:100%;padding:0;border:0;background:transparent;color:var(--parchment);font:inherit;outline:0}
.relationship-picker-list{display:flex;flex-direction:column;gap:4px;margin-top:12px;overflow-y:auto;padding-right:3px}
.relationship-picker-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--parchment-dim);text-align:left;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.relationship-picker-row:hover{background:rgba(255,255,255,.04);color:var(--parchment)}
.relationship-picker-row.active{border-color:rgba(232,198,90,.35);background:rgba(232,198,90,.09);color:var(--gold-bright)}
.relationship-picker-row span:not(.avatar){display:flex;flex-direction:column;min-width:0}
.relationship-picker-row b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.relationship-picker-row small{font-size:11px;color:var(--slate);margin-top:2px}
.relationship-panel{padding:0;min-width:0;overflow:hidden;display:flex;flex-direction:column}
.relationship-panel-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;border-bottom:1px solid rgba(211,193,145,.13)}
.relationship-panel-head h3{margin:2px 0 0;color:var(--gold-bright);font-size:22px}
.relationship-canvas{position:relative;width:100%;aspect-ratio:1000/680;min-height:520px;max-height:680px;background:radial-gradient(circle at 50% 50%,rgba(232,198,90,.075),transparent 35%),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:auto,38px 38px,38px 38px}
.relationship-canvas svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.relationship-line{stroke:rgba(232,198,90,.48);stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(232,198,90,.18))}
.relationship-line.is-relation-friend{stroke:#59b7a6}.relationship-line.is-relation-acquaintance{stroke:#7c8da8}.relationship-line.is-relation-family{stroke:#aa82d2}.relationship-line.is-relation-romance{stroke:#d8759e}.relationship-line.is-relation-ally{stroke:#d7a947}.relationship-line.is-relation-mentor{stroke:#6aa875}.relationship-line.is-relation-colleague{stroke:#5593c7}.relationship-line.is-relation-hostile{stroke:#c85c5c}.relationship-line.is-relation-other{stroke:#9995a5}
.relationship-token{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;width:110px;padding:0;border:0;background:transparent;color:var(--parchment);cursor:pointer;z-index:2}
.relationship-token:not(.is-centre){cursor:grab;touch-action:none}
.relationship-token:not(.is-centre)>*{pointer-events:none;user-select:none;-webkit-user-select:none}
.relationship-token:not(.is-centre) img{-webkit-user-drag:none}
.relationship-token.is-dragging{z-index:6;cursor:grabbing}
.relationship-token.is-dragging .avatar{transform:scale(1.08);border-color:var(--gold-bright);box-shadow:0 0 0 4px rgba(12,10,21,.9),0 0 22px rgba(232,198,90,.28)}
.relationship-token .avatar{display:block;width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid #7f8794;box-shadow:0 0 0 4px rgba(12,10,21,.88),0 8px 22px rgba(0,0,0,.38);transition:transform .18s,border-color .18s,box-shadow .18s}
.relationship-token:hover .avatar,.relationship-token:focus-visible .avatar{transform:scale(1.08);border-color:var(--gold-bright);box-shadow:0 0 0 4px rgba(12,10,21,.9),0 0 22px rgba(232,198,90,.28)}
.relationship-token.is-main .avatar{border-color:var(--gold)}
.relationship-token.is-npc .avatar{border-color:#a86b3f}
.relationship-token.is-former .avatar{border-color:#777184;filter:saturate(.72)}
.relationship-token.is-centre{width:150px;z-index:4}
.relationship-token.is-centre .avatar{width:94px;height:94px;border-width:4px;border-color:var(--gold-bright);box-shadow:0 0 0 6px rgba(12,10,21,.92),0 0 34px rgba(232,198,90,.3)}
.relationship-token-name{display:block;max-width:145px;margin-top:8px;padding:3px 7px;border-radius:6px;background:rgba(12,10,21,.9);font-family:'Marcellus',Georgia,serif;font-size:13px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 9px rgba(0,0,0,.28)}
.relationship-token.is-centre .relationship-token-name{font-size:16px;color:var(--gold-bright)}
.relationship-token-kind{display:none;margin-top:3px;color:var(--slate);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.relationship-token.is-centre .relationship-token-kind{display:block}
.relationship-edge-label{position:absolute;transform:translate(-50%,-50%);z-index:1;max-width:130px;padding:3px 6px;border:1px solid rgba(211,193,145,.16);border-radius:999px;background:rgba(18,15,27,.94);color:var(--parchment-dim);font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.relationship-focus-groups{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;padding:9px 14px;border-bottom:1px solid rgba(211,193,145,.1);background:rgba(7,6,13,.32)}
.relationship-focus-groups span{display:flex;align-items:center;gap:5px;padding:3px 7px;border:1px solid rgba(211,193,145,.12);border-radius:999px;color:var(--parchment-dim);font-size:10px}
.relationship-focus-groups i{width:7px;height:7px;border-radius:50%;background:#9995a5}.relationship-focus-groups b{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--slate)}
.relationship-focus-groups .is-relation-friend i{background:#59b7a6}.relationship-focus-groups .is-relation-acquaintance i{background:#7c8da8}.relationship-focus-groups .is-relation-family i{background:#aa82d2}.relationship-focus-groups .is-relation-romance i{background:#d8759e}.relationship-focus-groups .is-relation-ally i{background:#d7a947}.relationship-focus-groups .is-relation-mentor i{background:#6aa875}.relationship-focus-groups .is-relation-colleague i{background:#5593c7}.relationship-focus-groups .is-relation-hostile i{background:#c85c5c}.relationship-focus-groups .is-relation-other i{background:#9995a5}
.relationship-hint{margin:0;padding:11px 20px 14px;border-top:1px solid rgba(211,193,145,.11);color:var(--slate);font-size:12px;text-align:center}
.relationship-empty{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:520px;padding-bottom:100px;color:var(--slate)}
.relationship-empty .relationship-token{left:50%!important;top:46%!important}
.relationship-empty p{margin:0}
.relationship-overview-panel{padding:0;overflow:hidden}
.relationship-overview-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid rgba(211,193,145,.13)}
.relationship-overview-head h3{margin:2px 0 3px;color:var(--gold-bright);font-size:22px}
.relationship-overview-head p{margin:0}
.relationship-overview-filters{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid rgba(211,193,145,.13);background:rgba(9,7,15,.3)}
.relationship-overview-filters .relationship-search{flex:1 1 280px;max-width:520px}
.relationship-overview-filters select{display:block;min-height:38px;margin-top:5px;padding:7px 32px 7px 10px;border:var(--panel-border);border-radius:8px;background:var(--panel);color:var(--parchment)}
.relationship-overview-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.relationship-unaffiliated-count{display:inline-flex;align-items:center;min-height:30px;padding:4px 10px;border:1px solid rgba(232,198,90,.48);border-radius:7px;background:rgba(12,10,21,.94);color:var(--gold-bright);font:700 11px 'JetBrains Mono',monospace}
.relationship-unaffiliated-toggle{margin-left:auto}
.relationship-zoom{display:none;align-items:center;gap:6px;padding:5px;border:1px solid rgba(211,193,145,.14);border-radius:9px;background:rgba(8,7,14,.45)}
.relationship-zoom .font-mono{min-width:42px;color:var(--parchment-dim);font-size:11px;text-align:center}
.relationship-overview-scroll{width:100%;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(232,198,90,.075),transparent 32%),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:auto,38px 38px,38px 38px}
.relationship-overview-stage{position:relative;width:100%;aspect-ratio:1320/920;margin:0 auto}
.relationship-overview-world{position:absolute;inset:0;width:100%;height:100%}
.relationship-faction-region{position:absolute;z-index:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--faction-region-color) 48%,transparent);border-radius:18px;background:radial-gradient(circle at 50% 18%,color-mix(in srgb,var(--faction-region-color) 16%,transparent),transparent 68%),linear-gradient(145deg,color-mix(in srgb,var(--faction-region-color) 9%,rgba(11,9,18,.72)),rgba(8,7,14,.42));box-shadow:inset 0 0 28px rgba(0,0,0,.2),0 8px 26px rgba(0,0,0,.14);pointer-events:none}
.relationship-faction-region::after{content:"";position:absolute;inset:36px 12px 12px;border-top:1px solid color-mix(in srgb,var(--faction-region-color) 20%,transparent);opacity:.8}
.relationship-faction-region.is-unaffiliated{--faction-region-color:#777184!important;border-style:dashed;opacity:.78}
.relationship-faction-region-label{position:absolute;z-index:2;top:13px;left:50%;width:calc(100% - 96px);transform:translateX(-50%);overflow:hidden;color:color-mix(in srgb,var(--faction-region-color) 58%,var(--parchment));font-family:'Marcellus',Georgia,serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-align:center;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.relationship-faction-region-count{position:absolute;z-index:2;top:11px;right:14px;display:grid;place-items:center;min-width:23px;height:23px;padding:0 6px;border:1px solid color-mix(in srgb,var(--faction-region-color) 38%,transparent);border-radius:999px;background:rgba(8,7,14,.56);color:var(--slate);font-family:'JetBrains Mono',monospace;font-size:9px}
.relationship-faction-region-watermark{position:absolute;z-index:0;top:50%;left:50%;max-width:calc(100% - 24px);transform:translate(-50%,-42%);overflow:hidden;color:color-mix(in srgb,var(--faction-region-color) 78%,transparent);font-family:'Cormorant Garamond',Georgia,serif;font-size:var(--faction-watermark-size,42px);font-weight:700;line-height:1;letter-spacing:.03em;text-align:center;text-transform:uppercase;text-overflow:clip;white-space:nowrap;opacity:.12;text-shadow:0 0 26px color-mix(in srgb,var(--faction-region-color) 42%,transparent)}
.relationship-overview-world svg{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible}
.relationship-overview-edge line{stroke:rgba(211,193,145,.24);stroke-width:1.4;vector-effect:non-scaling-stroke;transition:opacity .16s,stroke .16s,stroke-width .16s;pointer-events:stroke}
.relationship-overview-edge.is-relation-friend line{stroke:#59b7a6}
.relationship-overview-edge.is-relation-acquaintance line{stroke:#7c8da8}
.relationship-overview-edge.is-relation-family line{stroke:#aa82d2}
.relationship-overview-edge.is-relation-romance line{stroke:#d8759e}
.relationship-overview-edge.is-relation-ally line{stroke:#d7a947}
.relationship-overview-edge.is-relation-mentor line{stroke:#6aa875}
.relationship-overview-edge.is-relation-colleague line{stroke:#5593c7}
.relationship-overview-edge.is-relation-hostile line{stroke:#c85c5c}
.relationship-overview-edge.is-relation-other line{stroke:#9995a5}
.relationship-overview-edge:hover line,.relationship-overview-edge.is-active line{stroke:var(--gold-bright);stroke-width:3;filter:drop-shadow(0 0 5px rgba(232,198,90,.35))}
.relationship-overview-edge.is-muted{opacity:.08}
.relationship-overview-token{position:absolute;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;width:82px;padding:0;border:0;background:transparent;color:var(--parchment);cursor:pointer;transition:opacity .16s}
.relationship-overview-token .relationship-overview-avatar{display:block;width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #7f8794;box-shadow:0 0 0 3px rgba(12,10,21,.9),0 5px 15px rgba(0,0,0,.42);transition:transform .16s,border-color .16s,box-shadow .16s}
.relationship-overview-token.is-main .relationship-overview-avatar{border-color:var(--gold)}
.relationship-overview-token.is-npc .relationship-overview-avatar{border-color:#a86b3f}
.relationship-overview-token.is-former .relationship-overview-avatar{border-color:#777184;filter:saturate(.72)}
.relationship-overview-token:hover .relationship-overview-avatar,.relationship-overview-token:focus-visible .relationship-overview-avatar,.relationship-overview-token.is-selected .relationship-overview-avatar{transform:scale(1.14);border-color:var(--gold-bright);box-shadow:0 0 0 3px rgba(12,10,21,.92),0 0 20px rgba(232,198,90,.38)}
.relationship-overview-token.is-neighbour .relationship-overview-avatar{border-color:var(--parchment)}
.relationship-overview-token.is-muted{opacity:.18}
.relationship-overview-name{position:absolute;top:52px;left:50%;transform:translateX(-50%);z-index:4;max-width:132px;padding:3px 7px;border-radius:6px;background:rgba(12,10,21,.98);font-family:'Marcellus',Georgia,serif;font-size:12px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 9px rgba(0,0,0,.34);opacity:0;pointer-events:none;transition:opacity .14s}
.relationship-overview-world.is-faction-layout .relationship-overview-name{width:108px;max-width:108px;font-size:10.5px;opacity:1}
.relationship-overview-status{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-100%);max-width:142px;padding:2px 6px;overflow:hidden;border:1px solid rgba(232,198,90,.38);border-radius:8px;background:rgba(12,10,21,.95);font-family:'JetBrains Mono',monospace;line-height:1.1;text-align:center;box-shadow:0 2px 9px rgba(0,0,0,.42),0 0 10px rgba(232,198,90,.1);pointer-events:none}
.relationship-overview-status b{display:block;max-width:128px;overflow:hidden;color:var(--gold-bright);font-size:8.5px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.relationship-overview-status small{display:block;max-width:128px;margin-top:2px;overflow:hidden;color:var(--slate);font-size:7.5px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.relationship-focus-status{z-index:5}
.relationship-overview-kind{display:none}
.relationship-overview-token:hover .relationship-overview-name,.relationship-overview-token:focus-visible .relationship-overview-name,.relationship-overview-token.is-selected .relationship-overview-name,.relationship-overview-token.is-neighbour .relationship-overview-name,.relationship-overview-token:hover .relationship-overview-kind,.relationship-overview-token:focus-visible .relationship-overview-kind,.relationship-overview-token.is-selected .relationship-overview-kind{opacity:1}
.relationship-overview-empty{min-height:320px;display:grid;place-items:center;color:var(--slate)}
.relationship-hint-touch{display:none}
.relationship-type-filter{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid rgba(211,193,145,.1);background:rgba(7,6,13,.32)}
.relationship-type-filter button{display:flex;align-items:center;gap:5px;min-height:28px;padding:4px 8px;border:1px solid rgba(211,193,145,.13);border-radius:999px;background:rgba(8,7,14,.5);color:var(--slate);font-size:10px;cursor:pointer}
.relationship-type-filter button i{width:7px;height:7px;border-radius:50%;background:var(--slate)}
.relationship-type-filter button span{font-family:'JetBrains Mono',monospace;font-size:9px;opacity:.7}
.relationship-type-filter button:hover,.relationship-type-filter button.active{border-color:rgba(232,198,90,.48);background:rgba(232,198,90,.1);color:var(--parchment)}
.relationship-type-filter .is-relation-friend i{background:#59b7a6}.relationship-type-filter .is-relation-acquaintance i{background:#7c8da8}.relationship-type-filter .is-relation-family i{background:#aa82d2}.relationship-type-filter .is-relation-romance i{background:#d8759e}.relationship-type-filter .is-relation-ally i{background:#d7a947}.relationship-type-filter .is-relation-mentor i{background:#6aa875}.relationship-type-filter .is-relation-colleague i{background:#5593c7}.relationship-type-filter .is-relation-hostile i{background:#c85c5c}.relationship-type-filter .is-relation-other i{background:#9995a5}
.relationship-kind-filter{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:10px 0 8px}
.relationship-kind-filter button{display:flex;align-items:center;justify-content:center;gap:4px;min-height:30px;padding:5px 7px;border:1px solid rgba(211,193,145,.13);border-radius:7px;background:rgba(8,7,14,.38);color:var(--slate);font-size:11px;cursor:pointer}
.relationship-kind-filter button span{font-family:'JetBrains Mono',monospace;font-size:9px;opacity:.72}
.relationship-kind-filter button:hover,.relationship-kind-filter button.active{border-color:rgba(232,198,90,.42);background:rgba(232,198,90,.1);color:var(--gold-bright)}
.relationship-picker-empty{padding:18px 8px;text-align:center}
@media(max-width:850px){
  .relationships-layout{grid-template-columns:1fr}
  .relationship-picker{max-height:none;padding:12px}
  .relationship-picker-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:0 0 3px}
  .relationship-picker-row{flex:0 0 170px}
  .relationship-panel-head{padding:14px;align-items:flex-start}
  .relationship-canvas{min-height:540px;max-height:none;aspect-ratio:auto}
  .relationship-token{width:82px}
  .relationship-token .avatar{width:50px;height:50px}
  .relationship-token.is-centre{width:115px}
  .relationship-token.is-centre .avatar{width:76px;height:76px}
  .relationship-token-name{max-width:88px;font-size:11px;padding:3px 5px}
  .relationship-token.is-centre .relationship-token-name{max-width:115px;font-size:14px}
  .relationship-edge-label{display:none}
  .relationship-focus-groups{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:8px 10px}
  .relationship-focus-groups span{flex:0 0 auto}
  .relationship-overview-head{align-items:flex-start;flex-direction:column;padding:14px}
  .relationship-overview-actions{justify-content:flex-start;width:100%}
  .relationship-overview-actions .muted{display:none}
  .relationship-zoom{display:flex}
  .relationship-overview-scroll{
    height:min(68dvh,620px);min-height:390px;overflow:auto;touch-action:none;
    overscroll-behavior:contain;scrollbar-width:thin;
  }
  .relationship-overview-stage{flex:none;aspect-ratio:auto;margin:0}
  .relationship-overview-world{inset:0 auto auto 0}
  .relationship-overview-token{width:58px}
  .relationship-overview-token .relationship-overview-avatar{width:52px;height:52px}
  .relationship-overview-name{top:58px;max-width:120px;font-size:11px}
  .relationship-hint-desktop{display:none}
  .relationship-hint-touch{display:inline}
  .relationship-type-filter{flex-wrap:nowrap;overflow-x:auto;padding:8px 10px}
  .relationship-type-filter button{flex:0 0 auto}
}
.beacon-board .beacon-cell-sm{width:46px;height:24px}
.beacon-head{margin-bottom:10px;padding-bottom:9px}
.beacon-title{font-size:19px}
.beacon-layout{display:grid;grid-template-columns:auto 220px;gap:12px;width:auto}
.beacon-side{min-width:0;padding:10px;position:static}
.beacon-side .beacon-rec-chip{padding:6px 8px}
@media (max-width:1450px) and (min-width:1251px){
  .beacon-layout{grid-template-columns:1fr}
  .beacon-side{width:100%}
}
@media (max-width:1250px){
  .beacon-page-layout{grid-template-columns:1fr;width:100%}
  .beacon-calendar{width:100%;height:auto;max-width:none}
  .beacon-board{width:100%;max-width:100%}
  .beacon-layout{grid-template-columns:1fr}
  .beacon-side{width:100%}
}

/* --- Latest session, sitting under the calendar --- */
.latest-session{display:block}
.ledger-card{
  display:flex;flex-direction:column;gap:7px;width:100%;
  text-align:left;cursor:pointer;padding:16px 17px;border-radius:12px;
  appearance:none;color:inherit;font:inherit;
  background:rgba(28,26,34,.55);border:1px solid rgba(201,162,39,.18);
  transition:border-color .15s ease, background .15s ease;
}
.ledger-card:hover{border-color:var(--gold-bright);background:rgba(255,255,255,.04)}
.ledger-card-title{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;
  font-size:20px;line-height:1.2;color:var(--parchment);
}
.ledger-card-meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--gold-bright)}
.ledger-card-blurb{
  margin:0;font-size:13px;line-height:1.55;color:var(--slate);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;
}
.ledger-card-cast{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.ledger-cast-member{display:flex;flex-direction:column;align-items:center;gap:4px;width:58px;min-width:0}
.avatar-ledger{width:48px;height:48px;border-radius:9px;font-size:17px;margin:0;border-width:1px}
.ledger-cast-name{
  width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;
  font-size:9.5px;line-height:1.15;color:var(--parchment-dim);
}

/* --- Campaign arcs, the wide row beneath --- */
.arc-card{
  display:flex;flex-direction:column;gap:8px;padding:14px 15px;border-radius:12px;
  background:rgba(28,26,34,.55);border:1px solid rgba(201,162,39,.18);
}
.arc-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;
  appearance:none;background:transparent;border:none;padding:0;cursor:pointer;
  color:inherit;font:inherit;text-align:left;
}
.arc-head:hover .arc-name{color:var(--gold-bright)}
.arc-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;color:var(--parchment);line-height:1.2}
.arc-meta{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gold-bright);white-space:nowrap}
.arc-range{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--slate-dark)}
.arc-last{
  display:flex;flex-direction:column;gap:2px;width:100%;margin-top:auto;
  appearance:none;background:transparent;padding:9px 0 0;cursor:pointer;
  color:inherit;font:inherit;text-align:left;
  border:none;border-top:1px solid rgba(201,162,39,.12);
}
.arc-last-label{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-dark)}
.arc-last-title{font-size:13px;color:var(--parchment-dim);line-height:1.35}
.arc-last:hover .arc-last-title{color:var(--gold-bright)}

/* Two halves filling the space under the calendar, bottoms level with the
   sidebars either side. */
.ledger-split{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;margin-top:22px;align-items:start;
}
.ledger-half{display:flex;flex-direction:column;min-width:0}
.ledger-half .ledger-card{flex:1}
.arc-stack{display:flex;flex-direction:column;gap:12px}
@media (max-width:900px){ .ledger-split{grid-template-columns:1fr} }
@media (max-width:520px){
  .ledger-card-cast{gap:8px}
  .ledger-cast-member{width:52px}
  .avatar-ledger{width:44px;height:44px}
}

/* All four Overview columns finish level, rather than each ending wherever
   its content happens to stop. */
.overview-layout-2col{align-items:stretch}
.overview-layout-2col > div{display:flex;flex-direction:column;min-width:0}
.overview-layout-2col .overview-sidebar,
.overview-layout-2col .overview-lists{align-self:stretch}
.ledger-split{flex:1;align-items:stretch}
.ledger-half{height:100%}
.ledger-half .ledger-card{flex:1}
.arc-stack{flex:1;justify-content:flex-start}

/* Four active storylines fill the space beneath the calendar as a balanced
   2x2 block, keeping the centre column level with the overview sidebars. */
.ongoing-storylines{margin-top:22px}
.ongoing-storylines > .row-between .label-caps{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;
  line-height:1.2;letter-spacing:.04em;text-transform:none;color:var(--parchment);
}
.arc-quadrants{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;gap:12px;flex:none;
}
.arc-quadrants .arc-card{
  min-width:0;min-height:84px;height:100%;padding:14px 15px;gap:8px;
  background:var(--ink-panel);border-color:rgba(211,193,145,.13);
}
.arc-quadrants .arc-name{font-size:19px;line-height:1.15}
.arc-quadrants .arc-meta{font-size:10px}
.arc-quadrants .arc-range{font-size:10px;margin-top:auto}
@media (max-width:900px){
  .arc-quadrants{grid-template-columns:1fr;grid-auto-rows:auto}
}

/* Keep the Overview calendar and its controls together in a neat, quiet
   frame without making it heavier than the surrounding cards. */
.overview-calendar-panel{
  padding:14px 15px 12px;border:1px solid rgba(201,162,39,.2);
  border-radius:11px;background:rgba(28,26,34,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

/* The totals are the compact summary; the activity chart gets the room.
   Stretching the two cards keeps their top and bottom edges aligned. */
.dm-record-charts{
  display:grid;grid-template-columns:minmax(240px,30%) minmax(0,1fr);
  gap:16px;align-items:stretch;margin-bottom:16px;
}
.dm-record-charts > .card{height:100%;margin:0}
.dm-sessions-card{display:flex;flex-direction:column;font-size:12px}
.dm-sessions-card .tiny{font-size:10.5px}
.dm-sessions-title{display:flex;align-items:center;gap:6px}
.dm-overview-summary{margin-top:auto;padding-top:12px}
.dm-overview-summary .stat-divider{margin:0 0 12px}
.dm-overview-summary .overview-stat-row{padding:3px 0}
.dm-activity-card{min-width:0}
.dm-duration-card{min-width:0;margin:0 0 16px}
.dm-duration-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:8px;
}
.dm-duration-subtitle{margin-top:3px}
.dm-duration-summary{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 16px}
.dm-duration-summary span{font:11px 'JetBrains Mono',monospace;color:var(--parchment-dim);white-space:nowrap}
.dm-duration-summary b{font-weight:400;color:var(--slate);margin-right:4px}
.dm-duration-scroll{overflow-x:auto;overflow-y:hidden;padding:0 3px 4px;scrollbar-width:thin}
.dm-duration-grid{stroke:rgba(211,193,145,.09);stroke-width:1}
.dm-duration-axis-label,.dm-duration-date-label{
  fill:var(--slate);font:9px 'JetBrains Mono',monospace;
}
.dm-duration-line{
  fill:none;stroke:var(--gold-bright);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round;
}
.dm-chart-hit{fill:transparent;stroke:none;pointer-events:all;cursor:help}
.dm-duration-dot,.dm-activity-dot{
  pointer-events:none;transform-box:fill-box;transform-origin:center;
  transition:transform .12s ease,stroke-width .12s ease,filter .12s ease;
}
.dm-duration-dot{fill:var(--ink-panel);stroke:var(--gold-bright);stroke-width:2}
.dm-chart-hit:hover + .dm-duration-dot,
.dm-chart-hit:hover + .dm-activity-dot{
  transform:scale(1.28);stroke-width:2.25;
  filter:drop-shadow(0 0 3px var(--gold-bright));
}
.dm-duration-mean-line{stroke:var(--teal-bright);stroke-width:1.5;stroke-dasharray:6 5;opacity:.9}
.dm-duration-mean-label{fill:var(--teal-bright);font:10px 'JetBrains Mono',monospace}
.dm-duration-hint{margin-top:4px}
@media (max-width:800px){
  .dm-record-charts{grid-template-columns:1fr}
  .dm-duration-head{display:block}
  .dm-duration-summary{justify-content:flex-start;margin-top:9px;gap:5px 12px}
  .dm-duration-hint{display:none}
}

/* Quiet inline links from an Overview panel to the page that owns it. */
.link-more{
  appearance:none;background:transparent;border:none;padding:0;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.04em;
  color:var(--slate);transition:color .15s ease;
}
.link-more:hover{color:var(--gold-bright)}

/* Timeline year jumper. */
.tl-jump{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0 4px}
.tl-jump .sort-btn{padding:6px 12px;font-size:11.5px}
.tl-jump .muted{margin-right:4px}

/* Highlighting one arc's route through the timeline. */
.chrono-tree-card{transition:opacity .2s ease, border-color .2s ease}
.chrono-tree-card.is-dimmed{opacity:.2}
.chrono-tree-card.is-lit{border-color:var(--gold-bright);box-shadow:0 0 0 1px rgba(232,198,90,.35)}
.tl-jump + .tl-jump{margin-top:6px}

/* Arc heading: name and dates on the left, the timeline link on the right. */
.arc-title-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;flex-wrap:wrap;
}
.arc-title-row > .link-more{flex:0 0 auto;padding-top:3px}

/* Timeline controls: a rail that stays in view while the tree scrolls. */
.tl-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;align-items:start}
.tl-rail{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px}
.tl-rail .tl-jump{flex-direction:column;align-items:stretch;gap:5px;margin:0}
.tl-rail .tl-jump .sort-btn{width:100%;text-align:left;padding:7px 11px}
.tl-rail .muted{margin:0 0 3px}
.tl-tree{min-width:0}
@media (max-width:900px){
  .tl-layout{grid-template-columns:1fr}
  .tl-rail{
    position:sticky;top:8px;z-index:12;max-height:42vh;overflow-y:auto;
    background:var(--panel-solid);
  }
  .tl-rail .tl-jump{flex-direction:row;flex-wrap:wrap;align-items:center}
  .tl-rail .tl-jump .sort-btn{width:auto}
}

/* Figures filling the page band where a single subtitle left it empty. */
.band-figs{display:flex;flex-wrap:wrap;gap:26px;margin-top:14px}
.band-figs div{display:flex;flex-direction:column}
.band-figs b{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;line-height:1;
  color:var(--gold-bright);
}
.band-figs span{
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate);margin-top:4px;
}
/* Long rule separating the arcs from the storylines. */
.section-rule{
  border:none;border-top:1px solid rgba(201,162,39,.22);
  margin:28px 0 22px;
}
@media (max-width:640px){ .band-figs{gap:18px} .band-figs b{font-size:21px} }

/* Timeline rail gets the same frame as the Overview panels. */
.tl-rail{
  background:var(--panel);
  border:var(--panel-border);
  border-radius:var(--panel-radius);
  padding:14px;
}
@media (max-width:900px){ .tl-rail{padding:12px} }

/* Phone-specific containment. The calendar keeps useful day widths and
   scrolls as one unit instead of crushing seven columns until avatars spill
   into neighbouring dates. These character rules deliberately live after
   the base status-marker rules so mobile positioning wins the cascade. */
@media (max-width:640px){
  .showcase-panel{width:calc(100vw - 14px);max-height:calc(100dvh - 14px);border-radius:10px}
  .showcase{width:100%}
  .sc-stage{height:54dvh;min-height:320px}
  .sc-stage::before{border-radius:10px 10px 0 0}
  .sc-nameplate{left:0;right:48px;top:0;padding:18px 14px}
  .sc-name{
    max-width:100%;padding:0;font-size:clamp(28px,9.5vw,40px);line-height:.94;
    overflow-wrap:anywhere;word-break:normal;
  }
  .sc-nick{font-size:17px;line-height:1.1}
  .sc-title{font-size:15px;line-height:1.12}
  .sc-owner{font-size:9px;letter-spacing:.12em}
  .sc-mark{top:auto;right:auto;left:14px;bottom:14px;max-width:40%;padding:4px 8px;font-size:8px;line-height:1.15;white-space:normal}
  .sc-stage.has-faction-banner .sc-mark,
  .sc-stage.has-defeated-banner .sc-mark{top:auto;right:auto;bottom:14px;left:14px;max-width:40%;white-space:normal}
  .sc-kind{right:14px;bottom:14px;max-width:52%;gap:2px}
  .sc-kind span{max-width:100%;font-size:9px;line-height:1.15;letter-spacing:.1em;overflow-wrap:anywhere}
  .sc-kind span:last-child{font-size:9px}
  .sc-rail{width:100%;padding:18px 16px 26px}

  .beacon-calendar{overflow:hidden;padding:12px 10px}
  .beacon-cal-grid-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding-bottom:5px;scrollbar-width:thin}
  .beacon-cal-grid{flex:0 0 auto;width:760px;min-width:760px}
  .beacon-cal-day{overflow:hidden;min-height:122px}
  .beacon-cal-slot{overflow:hidden}
  .beacon-cal-slot-people{overflow:hidden;min-width:0}
  .beacon-cal-legend{gap:7px 10px}
}

/* Secure player editor -------------------------------------------------- */
.editor-shell{max-width:none;width:100%;margin:0 auto}.editor-login{width:min(100%,520px);margin:40px auto;padding:34px}.editor-login h2,.editor-form-head h2,.editor-heading h2{margin:4px 0 8px;font-size:clamp(30px,4vw,48px);color:var(--parchment)}.editor-login p,.editor-form-head p,.editor-heading p{color:var(--slate);line-height:1.6}.editor-reassurance{padding:12px 14px;border-left:2px solid var(--emerald);background:rgba(61,113,90,.09);color:var(--parchment-dim)!important}.editor-login form{display:grid;gap:16px;margin-top:24px}.editor-login label,.editor-field{display:grid;gap:7px;color:var(--gold-bright);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.editor-login input{min-height:46px;font-size:15px;text-transform:none;letter-spacing:0}.editor-login .btn-primary{justify-content:center;min-height:45px;margin-top:4px}.editor-notice{padding:12px 16px;border:1px solid;border-radius:9px}.editor-notice.is-error{border-color:rgba(205,75,92,.48);background:rgba(105,28,40,.25);color:#ffd7dd}.editor-notice.is-success{border-color:rgba(75,170,120,.45);background:rgba(34,96,68,.2);color:#d8ffea}.editor-accountbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px}.editor-accountbar strong{font-size:18px}.editor-role{display:inline-flex;margin-left:9px;padding:3px 7px;border:1px solid rgba(201,162,39,.35);border-radius:999px;color:var(--gold-bright);font:600 9px 'JetBrains Mono',monospace;text-transform:uppercase}.editor-account-actions{display:flex;gap:8px;flex-wrap:wrap}.editor-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}.editor-heading p{margin:0 0 8px}.editor-character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:13px}.editor-character-card{display:grid;grid-template-columns:88px minmax(0,1fr) 24px;align-items:center;gap:15px;min-width:0;padding:10px;text-align:left;color:var(--parchment);border:1px solid rgba(201,162,39,.24);border-radius:14px;background:linear-gradient(135deg,rgba(43,37,54,.96),rgba(14,11,23,.98));cursor:pointer;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}.editor-character-card:hover{border-color:rgba(232,198,90,.7);transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.3),0 0 24px rgba(201,162,39,.1)}.editor-card-art{display:grid;place-items:center;width:88px;height:88px;overflow:hidden;border:1px solid rgba(232,198,90,.62);border-radius:12px;background:#171321;color:var(--gold-bright)}.editor-card-art img{width:100%;height:100%;object-fit:cover}.editor-card-initial{font:600 26px 'Cormorant Garamond',serif}.editor-card-copy{display:flex;flex-direction:column;min-width:0}.editor-card-copy strong{overflow:hidden;font-size:24px;white-space:nowrap;text-overflow:ellipsis}.editor-card-copy small{overflow:hidden;margin-top:5px;color:var(--slate);white-space:nowrap;text-overflow:ellipsis}.editor-card-arrow{font-size:30px;color:var(--gold)}.editor-empty{padding:28px;text-align:center;color:var(--slate)}.editor-form-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:22px;padding:22px}.editor-form-head h2{font-size:38px}.editor-form-head p{max-width:780px;margin:0}.editor-form{padding:22px}.editor-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.editor-field textarea,.editor-field input{width:100%;box-sizing:border-box;text-transform:none;letter-spacing:normal;font-weight:400;font-size:14px;line-height:1.55}.editor-field:has(textarea){grid-column:1/-1}.editor-field.is-disabled{opacity:.55}.editor-field small{color:var(--slate);font-size:10px;line-height:1.4;text-transform:none;letter-spacing:0}.editor-savebar{position:sticky;bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:24px;padding:13px 15px;border:1px solid rgba(201,162,39,.3);border-radius:10px;background:rgba(13,10,21,.94);box-shadow:0 12px 34px rgba(0,0,0,.4);backdrop-filter:blur(12px)}.editor-savebar span{color:var(--slate);font-size:12px}.editor-savebar .btn-primary{flex:0 0 auto}.editor-audit-list{display:grid;gap:9px}.editor-audit-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) 2fr;gap:15px;align-items:center;padding:14px 16px}.editor-audit-row>div{display:flex;flex-direction:column;min-width:0}.editor-audit-row small{color:var(--slate);margin-top:3px}.editor-audit-fields{color:var(--parchment-dim);font-size:12px}
@media(max-width:700px){.editor-login{margin:8px auto;padding:22px}.editor-accountbar,.editor-heading,.editor-savebar{align-items:stretch;flex-direction:column}.editor-account-actions{display:grid;grid-template-columns:1fr}.editor-character-grid{grid-template-columns:1fr}.editor-character-card{grid-template-columns:70px minmax(0,1fr) 18px}.editor-card-art{width:70px;height:70px}.editor-fields{grid-template-columns:1fr}.editor-field:has(textarea){grid-column:auto}.editor-form-head{grid-template-columns:1fr}.editor-savebar{bottom:6px}.editor-savebar .btn-primary{justify-content:center}.editor-audit-row{grid-template-columns:1fr}}
.editor-edit-portrait{display:grid;place-items:center;width:92px;height:92px;overflow:hidden;border:1px solid rgba(232,198,90,.65);border-radius:18px;background:#171321;color:var(--gold-bright);font:600 28px 'Cormorant Garamond',serif;box-shadow:0 0 28px rgba(201,162,39,.12)}.editor-edit-portrait img{width:100%;height:100%;object-fit:cover}@media(max-width:700px){.editor-edit-portrait{width:78px;height:78px}.editor-form-head{grid-template-columns:auto 1fr}.editor-form-head>.btn-ghost{grid-column:1/-1}}
.editor-form-head.has-portrait{grid-template-columns:auto auto minmax(0,1fr)}
@media(max-width:700px){.editor-form-head.has-portrait{grid-template-columns:auto 1fr}.editor-form-head.has-portrait>.btn-ghost{grid-column:1/-1}.editor-form-head:not(.has-portrait){grid-template-columns:1fr}}
.editor-discord-login{display:flex;justify-content:center;width:100%;min-height:48px;margin-top:24px;box-sizing:border-box;text-decoration:none;background:linear-gradient(135deg,#5865f2,#4752c4);color:#fff}.editor-discord-login:hover{filter:brightness(1.09);box-shadow:0 0 26px rgba(88,101,242,.3)}.editor-discord-mark{display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(255,255,255,.55);border-radius:7px;font-weight:800}.editor-login-help{margin:13px 0 0!important;text-align:center;font-size:11px}

/* Account pages share the ledger's width, panels and gold navigation. */
.topbar-account{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-left:auto}
.editor-top-login{min-height:42px;white-space:nowrap}
.editor-character-link{width:100%;justify-content:center;min-height:44px;margin-bottom:18px}
.editor-shell > .card,.editor-shell > .editor-notice{margin-bottom:18px}
.editor-heading.page-band{padding:24px;align-items:center;gap:24px}
.editor-roster-tabs{display:inline-flex;margin:0 0 20px}
.editor-roster-tabs .sort-btn{min-width:100px;min-height:42px}
.editor-tab-count{margin-left:8px;font-family:'JetBrains Mono',monospace;opacity:.75}
.editor-character-card{background:var(--panel);border:var(--panel-border);border-radius:var(--panel-radius)}
.editor-card-art{border-radius:50%}
.editor-fields{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.editor-field:has(textarea){grid-column:span 2}
.editor-field textarea{min-height:180px;resize:vertical}
.editor-field input{min-height:44px}
.editor-savebar{z-index:5}
.editor-audit-entry{padding:22px;min-width:0}
.editor-audit-heading{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.editor-audit-heading h3{font-size:28px;margin:3px 0 6px}
.editor-audit-heading small{display:block;color:var(--slate);margin-top:5px;overflow-wrap:anywhere}
.editor-audit-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:22px 0}
.editor-audit-meta dt{font-size:11px;color:var(--slate);margin-bottom:6px}
.editor-audit-meta dd{margin:0;font-size:13px;overflow-wrap:anywhere}
.editor-audit-table-wrap{overflow-x:auto}
.editor-audit-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13px}
.editor-audit-table caption{text-align:left;padding-bottom:10px}
.editor-audit-table th,.editor-audit-table td{padding:12px;text-align:left;vertical-align:top;border:1px solid rgba(201,162,39,.18);overflow-wrap:anywhere}
.editor-audit-table thead{color:var(--gold-bright);background:rgba(201,162,39,.06)}
.editor-audit-table th:first-child{width:20%}
.editor-audit-table td{white-space:pre-wrap;line-height:1.6}
.editor-audit-request{margin-top:16px;color:var(--slate);font-size:12px;overflow-wrap:anywhere}
.editor-audit-request summary{cursor:pointer;padding:6px 0}
.editor-shell button:focus-visible,.editor-top-login:focus-visible,.editor-character-link:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px}
@media(max-width:1100px){
  .editor-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editor-audit-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .editor-heading.page-band{padding:20px;align-items:stretch}
  .editor-fields{grid-template-columns:1fr}
  .editor-field:has(textarea){grid-column:auto}
  .editor-audit-entry{padding:14px}
  .editor-audit-table{min-width:560px}
  .editor-top-login{font-size:12px}
}

/* Account pages use renderPageBanner and the same type and tab styles as People. */
.editor-shell > .page-band{margin-bottom:0}
.editor-shell > .card,.editor-shell > .editor-notice{margin-bottom:0}
.editor-top-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.editor-top-actions .editor-top-login{min-width:130px;justify-content:center}
.editor-field{align-content:start;align-self:start;min-width:0}
.editor-field-short input{height:42px;min-height:42px}
.editor-field textarea{min-height:110px}
.editor-field-long textarea[rows="8"]{min-height:190px}
.editor-form .editor-savebar{margin-top:22px}

.editor-inline-availability{margin:12px 0 24px}
.editor-inline-fields{border:0;padding:0;margin:0;min-width:0}
.editor-inline-availability .editor-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.editor-inline-availability .editor-field-long{grid-column:1/-1}
.editor-inline-availability .editor-notice{margin:12px 0}
.editor-inline-save{display:flex;justify-content:flex-end;margin-top:16px}
@media(max-width:600px){.editor-inline-availability .editor-fields{grid-template-columns:1fr}}

/* Editable character bond orbit reuses the Character View tokens and lines. */
.eb-panel{padding:22px;min-width:0}
.eb-panel h3{margin:4px 0;font-size:28px}
.eb-panel .relationship-panel-head{gap:18px;flex-wrap:wrap}
.eb-picker{margin:16px 0;padding:18px;border:var(--panel-border);border-radius:var(--panel-radius);background:var(--panel)}
.eb-picker h4{font-size:23px;margin:0 0 10px}
.eb-picker fieldset{border:0;margin:0;padding:0;min-width:0}
.eb-options{display:flex;flex-wrap:wrap;gap:8px}
.eb-options .bm-relation{width:auto;min-height:40px;padding:8px 14px}
.eb-options .is-selected{border-color:var(--gold-bright);box-shadow:0 0 0 1px var(--gold-bright)}
.eb-options-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:12px}
.eb-options-sections h5{font-size:12px;color:var(--slate);margin:0 0 8px}
.eb-save{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.eb-remove{margin-top:12px}
.eb-map-scroll{overflow:auto;max-height:650px;border:var(--panel-border);border-radius:var(--panel-radius);background:var(--panel);overscroll-behavior:contain}
.eb-map{position:relative;background:radial-gradient(circle at center,rgba(201,162,39,.08),transparent 65%)}
.eb-map>svg{position:absolute;inset:0;pointer-events:none}
.eb-map .eb-token{width:100px}
.eb-map .relationship-token-name{max-width:100px;white-space:normal;overflow-wrap:anywhere}
.eb-map .relationship-token-kind{max-width:105px;white-space:normal;line-height:1.25}
.eb-token .avatar{width:54px;height:54px;object-fit:cover;border-radius:50%;border:2px solid rgba(201,162,39,.22)}
.eb-token.is-connected .avatar{border-color:var(--gold-bright)}
.eb-token.is-selected .avatar{outline:3px solid var(--gold-bright);outline-offset:4px}
.eb-centre .avatar{width:92px;height:92px;object-fit:cover;border-radius:50%;border:2px solid var(--gold-bright)}
.eb-map .avatar-fallback{display:grid;place-items:center;background:#252130}
.eb-panel button:focus-visible,.eb-map-scroll:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px}
@media(max-width:700px){.eb-panel{padding:14px}.eb-map-scroll{max-height:520px}.eb-save{align-items:stretch;flex-direction:column}}

/* My Characters shares the public Characters title card and filter rows. */
.topbar-account{align-self:flex-start}
.editor-roster-tools{display:flex;align-items:center;justify-content:flex-start;gap:16px;flex-wrap:wrap;margin:0 0 16px}
.editor-shell.characters-page .char-filter-stack{width:100%}
@media(max-width:640px){
  .editor-roster-tools{align-items:flex-start;flex-direction:column}
}

/* Complete responsive orbit diagram, with no nested scroll region. */
.eb-orbit-chart{display:block;width:100%;height:auto;overflow:visible}
.eb-orbit-stage .eb-token,.eb-orbit-stage .eb-centre{position:static;transform:none;width:100%;height:100%;justify-content:flex-start}
.eb-orbit-stage .relationship-token-name{max-width:110px;white-space:normal;font-size:13px;line-height:1.15;overflow-wrap:anywhere}
.eb-orbit-stage .relationship-token-kind{max-width:110px;white-space:normal;font-size:10px;line-height:1.2}
.eb-orbit-stage .eb-centre .relationship-token-name{max-width:140px;font-size:17px}
.eb-orbit-track{fill:none;stroke:rgba(201,162,39,.13);stroke-width:1;stroke-dasharray:5 8}
/* Motion is driven by one SVG frame clock so tokens and lines stay attached. */
.eb-orbit-stage .relationship-line{filter:none}

.eb-orbit-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0}
.eb-filter-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.eb-workspace{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:18px;align-items:start}
.eb-bond-map{min-width:0}
.eb-quick{position:sticky;top:18px;z-index:12;padding:16px;max-height:calc(100vh - 36px);overflow:auto;background:linear-gradient(165deg,rgba(32,26,43,.98),rgba(17,14,25,.98))}
.eb-quick-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.eb-quick-head h4{margin:3px 0;font-size:21px}
.eb-quick-group{border-top:1px solid rgba(233,186,88,.2);padding:8px 0}
.eb-quick-group summary{cursor:pointer;color:var(--gold-bright);font-weight:700;padding:5px 0}
.eb-quick-section{margin:8px 0}.eb-quick-section>strong{display:block;margin-bottom:6px;color:var(--parchment);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.eb-quick-section>div{display:flex;flex-wrap:wrap;gap:6px}.eb-quick-section .sort-btn{padding:6px 8px;min-height:32px;font-size:11px}
.eb-quick .editor-field{margin:8px 0}.eb-quick-choice{margin:10px 0 0;color:var(--parchment)}
.eb-quick-open{position:sticky;top:18px;z-index:12}
.eb-character-select{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.eb-character-select select{max-width:100%;min-height:42px}
.eb-dialog-backdrop{z-index:200;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.eb-dialog{max-height:calc(100dvh - 36px);overflow-y:auto}
.eb-dialog fieldset{border:0;margin:0;padding:0;min-width:0}
.eb-dialog .is-selected{border-color:var(--gold-bright);box-shadow:0 0 0 1px var(--gold-bright)}
.eb-dialog .eb-custom-label{margin-top:16px}
.eb-dialog .editor-notice{margin:12px 0}
.editor-top-characters,.editor-top-availability{min-height:42px;padding:10px 18px;box-shadow:0 0 18px rgba(232,198,90,.2)}

.availability-timezone{grid-column:1/-1;max-width:520px}
.availability-timezone select{min-height:44px;width:100%}
.availability-day{grid-column:1/-1;min-width:0;padding:14px;border:var(--panel-border);border-radius:10px}
.availability-day-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.availability-day-head strong{font-family:'Marcellus',Georgia,serif;color:var(--parchment)}
.availability-hour-grid{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;touch-action:none}
.availability-slot{min-width:0;min-height:34px;padding:4px 0;border:1px solid rgba(201,162,39,.18);border-radius:4px;background:var(--ink);color:var(--slate);font:10px 'Inter',sans-serif;cursor:pointer;user-select:none}
.availability-slot.is-free{background:var(--gold);color:var(--ink-deep);border-color:var(--gold-bright)}
.availability-slot.is-partial{background:linear-gradient(135deg,var(--gold) 50%,var(--ink) 50%);color:var(--parchment)}
.availability-slot:focus-visible{outline:2px solid var(--parchment);outline-offset:2px;z-index:1}
.availability-day-value{display:block;margin-top:9px;font:12px 'JetBrains Mono',monospace;color:var(--parchment-dim);overflow-wrap:anywhere}
.editor-inline-availability .availability-hour-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
@media(max-width:850px){.availability-hour-grid{grid-template-columns:repeat(12,minmax(0,1fr))}}

.eb-dialog{overscroll-behavior:contain}

.eb-orbit-stage .eb-token .avatar{flex-shrink:0}
.eb-orbit-stage .eb-centre .avatar{width:80px;height:80px;flex-shrink:0}

/* Reserve room above the portrait without moving its orbit anchor. */
.eb-orbit-stage .eb-token{position:relative;box-sizing:border-box;padding-top:34px}
.eb-bond-label{left:50%;top:30px;width:max-content;max-width:142px;height:auto;letter-spacing:normal;text-transform:none}


.editor-art-panel{margin:0 0 24px;padding:24px}
.editor-art-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.editor-art-grid form{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.editor-art-grid .editor-field{width:100%}
.editor-art-grid input[type=file]{max-width:100%;font:inherit}
.editor-art-preview{max-width:100%;width:auto;height:180px;object-fit:contain;border-radius:12px}
.editor-art-preview.is-portrait{width:120px;height:120px;border-radius:50%;object-fit:cover}
@media(max-width:700px){.editor-art-grid{grid-template-columns:1fr}}

.eb-orbit-stage{position:relative;width:100%;aspect-ratio:1;isolation:isolate}
.eb-orbit-stage>.eb-orbit-chart{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.eb-orbit-node,.eb-orbit-centre{position:absolute;left:0;top:0;transform-origin:0 0;width:112px;height:162px;contain:layout style;will-change:transform}
.eb-orbit-centre{width:140px;height:150px;pointer-events:none}
.eb-orbit-node{z-index:1}
.eb-orbit-node:hover,.eb-orbit-node:focus-within{z-index:2}


/* Keep the entire line layer behind every portrait, including the centre. */
.eb-orbit-stage>.eb-orbit-chart{z-index:0}
.eb-orbit-centre{z-index:1}
.eb-orbit-stage .avatar{background-color:var(--ink-deep,#100d18)}
.editor-roster-availability{margin-bottom:16px}
.session-storyline{margin:4px 0 10px;color:var(--parchment)}

.editor-session-selections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.editor-session-selection{min-width:0;border:1px solid rgba(201,162,39,.22);border-radius:12px;padding:16px}
.editor-session-selection legend{color:var(--gold-bright);padding:0 8px}
.editor-session-selection>input{width:100%;margin-bottom:12px}
.editor-checklist{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto}
.editor-checklist label{display:flex;align-items:center;gap:10px;padding:7px;cursor:pointer}
.editor-checklist label[hidden]{display:none}
.editor-checklist small{display:block}
.editor-session-list{display:grid;gap:12px}
.editor-session-row{text-align:left;display:flex;justify-content:space-between;gap:16px;color:var(--parchment);font:inherit}
.editor-session-row span{color:var(--slate)}
.editor-assignment-layout{display:grid;grid-template-columns:minmax(200px,1fr) 3fr;gap:24px}
.editor-assignment-npcs{display:flex;flex-direction:column;gap:8px;max-height:650px;overflow:auto}
@media(max-width:700px){.editor-session-selections,.editor-assignment-layout{grid-template-columns:1fr}.editor-session-row{flex-direction:column}}


/* Compact name-and-bond plates, shared by public and editable orbit views. */
.relationship-focus-status{border-color:rgba(201,162,39,.72);border-radius:7px;background:#100d16;padding:4px 8px;min-width:76px;max-width:150px;line-height:1.15;font-family:inherit;box-shadow:none}
.relationship-focus-status b{font-size:11px;font-weight:700;color:var(--parchment);max-width:134px}
.relationship-focus-status small{font-size:9px;font-weight:500;color:var(--gold-bright);max-width:134px;margin-top:1px}
.relationship-canvas{isolation:isolate}
.relationship-canvas>svg{z-index:0;pointer-events:none}
.relationship-canvas .relationship-line{filter:none}
.relationship-canvas .relationship-token,.relationship-canvas .relationship-focus-status{will-change:transform}
.relationship-canvas .avatar{background-color:var(--ink-deep,#100d18)}
.relationship-orbit-toggle{position:absolute;right:12px;bottom:12px;z-index:7}
.editor-top-characters,.editor-top-availability{height:42px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;gap:6px}


/* Mobile diagrams use a full-size world, initially fitted to the phone. */
.bond-zoom-viewport{position:relative;width:100%;overflow:hidden;touch-action:none;isolation:isolate;overscroll-behavior:contain;border-radius:10px}
.bond-zoom-viewport>.relationship-canvas,.bond-zoom-viewport>.eb-orbit-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.bond-zoom-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0}
.bond-zoom-controls>span{font-size:11px;color:var(--slate);margin-right:auto}
.bond-zoom-controls button{min-width:36px;min-height:36px}
@media(max-width:850px){
  .relationship-overview-scroll{min-height:240px;height:min(52dvh,400px)}
  .relationship-overview-token .relationship-overview-avatar{width:46px;height:46px}
}


/* Keep related editor actions together, with dividers between task groups. */
.editor-account-actions{align-items:stretch;gap:16px;width:100%;display:flex;flex-wrap:wrap}
.editor-tool-section{padding:14px 16px;border:1px solid rgba(201,162,39,.3);border-radius:10px;background:var(--ink-deep,#100d18);min-width:0}
.editor-tool-section h3{margin:0 0 10px;color:var(--gold-bright);font-size:14px}
.editor-signed-in{width:100%;text-align:right;color:var(--slate);font-size:12px}
.editor-workspace-tabs{margin-bottom:14px}
.editor-roster-search{width:100%;max-width:600px}
.admin-overview-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:18px 0}
.admin-overview-stats .card{padding:18px}
.admin-overview-stats strong{display:block;font-size:26px;color:var(--gold-bright)}
.admin-account-search{max-width:600px;margin:18px 0}
.admin-accounts-table td{vertical-align:top}
.admin-accounts-table [hidden]{display:none}
.editor-tool-buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.editor-session-browser-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:end;width:100%;margin-bottom:18px}
.editor-session-search{flex:1 1 260px}
.editor-session-hide-verified{height:44px;min-height:44px;margin:0;justify-self:end;white-space:nowrap;display:inline-flex;gap:8px;align-items:center;justify-content:center}
.editor-session-hide-verified:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
@media(max-width:700px){.editor-tool-section{width:100%}.editor-tool-buttons .btn-primary{white-space:normal}.editor-session-browser-controls{grid-template-columns:minmax(0,1fr) auto}.editor-session-browser-controls>.editor-session-search{grid-column:1/-1}}
.editor-action-group{display:flex;align-items:center;gap:8px}
.editor-action-group+.editor-action-group{border-left:1px solid rgba(201,162,39,.5);padding-left:12px}
.editor-action-group .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
@media(max-width:700px){
  .editor-account-actions{align-items:stretch}
  .editor-action-group{flex-wrap:wrap}
  .editor-action-group+.editor-action-group{border-left:0;border-top:1px solid rgba(201,162,39,.35);padding-left:0;padding-top:12px}
}

.editor-assignment-npcs [hidden]{display:none!important}
.editor-npc-search{position:sticky;top:0;background:var(--ink-deep,#100d18);padding:8px 0;z-index:1}
.editor-npc-search input{width:100%;min-width:0;box-sizing:border-box}

.editor-return-characters,.editor-top-characters,.editor-top-availability{min-height:46px;height:auto;padding:12px 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700;box-shadow:0 0 18px rgba(232,198,90,.23)}
.editor-session-browser [hidden]{display:none!important}
.editor-session-search{margin:0;max-width:none;min-width:0}
.editor-session-browser-controls>.editor-field{margin:0;min-width:0}
.editor-session-browser-controls input,.editor-session-browser-controls select{height:44px;min-height:44px;box-sizing:border-box}
.editor-session-search input{width:100%;box-sizing:border-box}


/* Character kind is the outer border; relationship colour is the inner portrait border. */
.bond-kind-pc .avatar{outline:3px solid #61b9ef;outline-offset:4px}
.bond-kind-npc .avatar{outline:3px dashed #e9ba58;outline-offset:4px}
.bond-kind-pc,.bond-kind-npc{--bond-colour:#aaa2b8}
.is-relation-friend{--bond-colour:#65c6a0}.is-relation-family{--bond-colour:#c092ee}.is-relation-romance{--bond-colour:#f2779e}.is-relation-mentor{--bond-colour:#6faee9}.is-relation-ally{--bond-colour:#8dd787}.is-relation-colleague{--bond-colour:#77c7d0}.is-relation-acquaintance{--bond-colour:#bdc795}.is-relation-hostile{--bond-colour:#ed6565}.is-relation-other{--bond-colour:#aaa2b8}
.relationship-token[class*="is-relation-"] .avatar{border:3px solid var(--bond-colour)!important}
.eb-orbit-node .is-incoming-only .avatar{box-shadow:0 0 0 10px #be82ec44,0 0 24px #be82ec}
.bond-incoming-notice{border-color:#be82ec;background:#be82ec18;color:#e5cbff}
.bond-track,.eb-orbit-track{fill:none;stroke-width:1.5}
.bond-track.bond-kind-pc,.eb-track-pc{stroke:#61b9ef66;stroke-dasharray:none}
.bond-track.bond-kind-npc,.eb-track-npc{stroke:#e9ba5866;stroke-dasharray:9 7}
.bond-waiting{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;padding:14px}
.bond-waiting section+section{border-left:1px solid #e9ba5844;padding-left:18px}
.bond-waiting h4{font-size:13px;color:var(--parchment)}
.bond-waiting-list{display:flex;flex-wrap:wrap;align-content:start;gap:14px}
.bond-static-token{display:flex;flex-direction:column;align-items:center;gap:8px;width:88px;background:none;border:0;color:var(--parchment);font-size:11px;cursor:pointer;padding:7px}
.bond-static-token .avatar{width:40px!important;height:40px!important;border-radius:50%;object-fit:cover}
@media(max-width:700px){.bond-waiting{gap:8px;padding:8px}.bond-waiting section+section{padding-left:8px}.bond-static-token{width:62px;font-size:10px}.bond-static-token .avatar{width:30px!important;height:30px!important}}
@media(max-width:900px){.eb-workspace{grid-template-columns:1fr}.eb-quick{position:relative;top:auto;max-height:none}.eb-quick-open{position:relative;top:auto}}

.incoming-bonds-alert.has-incoming{animation:incoming-bond-glow 5s ease-in-out infinite}
.incoming-bonds-count{border-radius:999px;background:#241c30;color:#f7df88;padding:2px 7px;font-size:12px}
@keyframes incoming-bond-glow{0%,100%{box-shadow:0 0 5px #bc82ec44}50%{box-shadow:0 0 20px #bc82ecaa}}
.incoming-bonds-list{display:grid;gap:16px}.incoming-bond-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px}.incoming-bond-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:700px){.incoming-bond-card{align-items:stretch;flex-direction:column}.incoming-bond-actions .btn-primary{flex:1}}
@media(prefers-reduced-motion:reduce){.incoming-bonds-alert.has-incoming{animation:none;outline:2px solid #bc82ec}}

/* Compact portraits; each orbit card already contains its character name. */
.relationship-canvas .relationship-avatar,.eb-orbit-stage .eb-token .avatar{width:36px!important;height:36px!important}
.relationship-canvas .relationship-avatar-centre,.eb-orbit-stage .eb-centre .avatar{width:64px!important;height:64px!important}
.eb-orbit-node .is-incoming-only .avatar{animation:incoming-portrait-glow 2.8s ease-in-out infinite}
@keyframes incoming-portrait-glow{0%,100%{box-shadow:0 0 0 6px #be82ec22,0 0 8px #be82ec66}50%{box-shadow:0 0 0 8px #be82ec44,0 0 20px #be82ec}}
@media(prefers-reduced-motion:reduce){.eb-orbit-node .is-incoming-only .avatar{animation:none}}

.bond-track[class*="is-relation-"],.eb-orbit-track[class*="is-relation-"]{stroke:var(--bond-colour);stroke-opacity:.7;stroke-width:1.5}

.relationship-token[class*="is-relation-"] .avatar{outline-color:var(--bond-colour)}
.bond-kind-npc .avatar{outline-style:dotted}

.incoming-bond-card .incoming-bond-recipient{font-size:clamp(26px,3vw,34px);line-height:1.15;margin:8px 0 12px;color:var(--gold-bright);overflow-wrap:anywhere}
.incoming-bond-card .incoming-bond-sender{font-size:16px;margin:0 0 12px}

.is-relation-service{--bond-colour:#d8b45d}

.editor-character-savebar{position:sticky;top:12px;bottom:auto;z-index:20;margin:0 0 16px}
@media(max-width:700px){.editor-character-savebar{top:8px;bottom:auto;flex-direction:row;align-items:center;gap:10px}.editor-character-savebar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* Keep Character View circular at desktop and mobile zoom sizes. */
.relationship-canvas{aspect-ratio:1/1;min-height:0;max-height:none;max-width:1000px;margin-inline:auto}
.bond-zoom-viewport>.relationship-canvas{max-width:none}

/* Reveal one full card at a time rather than covering the orbit with labels. */
.relationship-canvas .relationship-focus-status,.eb-orbit-node .eb-bond-label{opacity:0;pointer-events:none;transition:opacity .12s ease}
.relationship-canvas .relationship-focus-status.is-revealed,.eb-orbit-node:hover .eb-bond-label,.eb-orbit-node:focus-within .eb-bond-label{opacity:1;z-index:30}
.relationship-canvas .relationship-token:not(.is-centre){width:48px}
.relationship-canvas .relationship-token.is-detail-open{z-index:25}
.eb-orbit-node{width:64px;height:64px}
.eb-orbit-stage .eb-token{padding:0;justify-content:center}
.eb-orbit-node .eb-bond-label{top:-6px;transform:translate(-50%,-100%)}
.eb-orbit-node:hover,.eb-orbit-node:focus-within{z-index:30}
.relationship-focus-status b,.relationship-focus-status small{display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;text-align:center}
.relationship-panel .relationship-orbit-legend{padding:14px 20px 10px;margin:0;line-height:1.5}
.relationship-panel .relationship-focus-groups{justify-content:flex-start;flex-wrap:wrap;overflow:visible;padding:0 20px 16px}
.relationship-panel .relationship-focus-groups i{background:var(--bond-colour)}
@media(max-width:700px){.relationship-panel .relationship-orbit-legend{padding-inline:14px}.relationship-panel .relationship-focus-groups{padding-inline:14px}}
@media(prefers-reduced-motion:reduce){.relationship-focus-status,.eb-bond-label{transition:none}}

@media(max-width:850px){.relationship-overview-scroll{overflow:hidden;touch-action:none;overscroll-behavior:contain;contain:layout paint}.relationship-overview-world{will-change:transform;backface-visibility:hidden}.relationship-overview-world .relationship-line{filter:none}}

.session-quick-add{margin-top:14px;border:1px solid rgba(201,162,39,.4);border-radius:10px;overflow:hidden}.session-quick-add>.session-quick-toggle{display:flex;width:100%;min-height:46px;gap:9px;align-items:center;box-sizing:border-box;cursor:pointer;list-style:none;border-radius:8px;font-size:13px}.session-quick-toggle::-webkit-details-marker{display:none}.session-quick-chevron{margin-left:auto;font-size:22px;line-height:1}.session-quick-add[open] .session-quick-chevron{transform:rotate(180deg)}.session-quick-fields{display:grid;gap:14px;padding:16px;background:rgba(13,10,21,.7)}.session-quick-fields p{margin:0}.session-quick-fields input,.session-quick-fields select{width:100%;min-height:44px;box-sizing:border-box}.session-quick-fields>.btn-primary{min-height:44px;width:100%}

/* Session review workspace */
.session-expand-row{padding:0;overflow:visible;min-width:0}.session-expand-toggle{position:relative;width:100%;text-align:left;border:0;background:transparent;color:inherit;cursor:pointer;padding:18px 110px 18px 18px!important}.session-expand-toggle[aria-expanded="true"]{border-bottom:1px solid var(--gold-dim,#665327)}.session-edit-layout{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:18px;padding:12px}.session-edit-layout.has-side{grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr)}.session-edit-layout .editor-form{min-width:0}.session-side{position:sticky;top:90px;max-height:calc(100dvh - 110px);overflow:auto;min-width:0}.session-side-fields{border:0;padding:0;display:grid;gap:12px;min-width:0}.session-side .editor-field{width:100%;min-width:0}.session-side input,.session-side textarea,.session-side select{max-width:100%;box-sizing:border-box}.session-side button[type="submit"]{position:sticky;bottom:0;margin-top:12px}.session-picked{padding:12px;border:1px solid #8b7235;background:#c9a2270d;border-radius:8px;margin-bottom:12px}.session-picked-items{display:grid;gap:6px}.session-choice{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:8px 2px}.session-choice[hidden]{display:none!important}.session-choice label{display:flex;gap:8px;align-items:start;flex:1;min-width:0}.session-choice small{display:block;overflow-wrap:anywhere}.session-choice button{flex-shrink:0;min-height:36px}.session-available-items{max-height:240px;overflow:auto}.session-verified{display:inline-flex;gap:4px;align-items:center;border:1px solid #65b690;border-radius:16px;color:#8ed5ae;padding:3px 8px;font:600 11px Inter,sans-serif;white-space:nowrap}.session-expand-toggle>.session-verified{position:absolute;right:14px;bottom:14px}.session-verified-footer{display:flex;justify-content:flex-end;margin-top:14px}.session-expand-row>.session-edit-layout .editor-session-selections{grid-template-columns:repeat(2,minmax(0,1fr))}.session-edit-layout.has-side .editor-session-selections{grid-template-columns:minmax(0,1fr)}
@media(max-width:900px){.session-edit-layout.has-side{grid-template-columns:minmax(0,1fr)}.session-side{position:fixed;inset:76px 10px 10px;z-index:9500;max-height:none;background:var(--ink-deep,#100d18);box-shadow:0 0 0 100vmax #0008}.session-expand-row>.session-edit-layout .editor-session-selections{grid-template-columns:minmax(0,1fr)}.session-edit-layout{padding:6px}.session-expand-toggle{padding-right:18px!important;padding-bottom:45px!important}.session-choice{flex-wrap:wrap}}

.session-form-fields{border:0;padding:0;margin:0;min-width:0}

.editor-session-row .session-verified{color:#8ed5ae}

/* Anchor portraits, not the combined portrait/name block, to the orbit centre. */
.relationship-canvas .relationship-token:not(.is-centre){width:44px;height:44px;justify-content:center;border-radius:50%}
.relationship-canvas .relationship-avatar,.eb-orbit-stage .eb-token .avatar{width:28px!important;height:28px!important;flex-shrink:0}
.relationship-canvas .relationship-avatar-centre,.eb-orbit-stage .eb-centre .avatar{width:56px!important;height:56px!important;flex-shrink:0}
.relationship-canvas .relationship-token.is-centre{width:56px;height:56px;justify-content:center}
.relationship-canvas .is-centre .relationship-token-name{position:absolute;top:100%;left:50%;transform:translateX(-50%);pointer-events:none}
.relationship-canvas .is-centre .relationship-token-kind{display:none}
.eb-orbit-stage .eb-centre{position:relative;height:56px;justify-content:flex-start}
.eb-orbit-stage .eb-centre .relationship-token-name{position:absolute;top:100%;left:50%;transform:translateX(-50%);pointer-events:none}
.eb-orbit-centre{height:56px}

/* Roster lookup and in-browser portrait composition. */
.roster-filter-controls{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 20px}
.roster-filter-controls label{display:grid;gap:6px;flex:1;min-width:200px}
.roster-filter-controls input,.roster-filter-controls select{width:100%}
.portrait-crop-dialog{max-width:calc(100vw - 32px);width:460px;background:#16121f;color:#eee5d3;border:1px solid #bca263;border-radius:12px;padding:20px}
.portrait-crop-dialog::backdrop{background:rgba(0,0,0,.8)}
.portrait-crop-dialog canvas{display:block;width:100%;max-width:400px;aspect-ratio:1;touch-action:none;cursor:grab;background:#292333;margin:12px auto}
.portrait-crop-dialog input[type=range]{display:block;width:100%}
.portrait-dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.portrait-crop-dialog{max-height:calc(100dvh - 32px);overflow:auto}

/* Compact top navigation; keep Log Out at its existing size. */
.editor-top-actions .btn-primary:not(.editor-top-login){min-height:34px;height:34px;padding:8px 14px;font-size:12px;line-height:1;box-sizing:border-box;gap:6px}
.editor-top-actions .incoming-bonds-count{font-size:11px;padding:1px 6px}

/* Campaign design: shared by all visitors. */
.site-main{min-width:0}
html.site-design{
  --void:#05040a;--ink:#0b0910;--ink-deep:#06050a;--ink-panel:#0d0a11;
  --parchment:#f2e8d1;--parchment-dim:#d9c9aa;--slate:#9e948b;
  --gold:#b98a35;--gold-bright:#e2b85f;--gold-deep:#725126;
  --panel:linear-gradient(145deg,rgba(20,15,22,.985),rgba(8,7,11,.99));
  --panel-border:1px solid rgba(194,139,62,.38);--panel-radius:7px;
}
html.site-design body{
  padding:10px 12px 38px;
  background:#050409;
  font-family:'Inter',system-ui,sans-serif;
}
html.site-design body::before{
  background:
    linear-gradient(rgba(5,4,9,.72),rgba(5,4,9,.88)),
    radial-gradient(1100px 700px at 68% -8%,rgba(108,77,42,.22),transparent 65%),
    radial-gradient(800px 600px at 0 70%,rgba(37,66,62,.13),transparent 68%),
    linear-gradient(180deg,#120e16,#050409 72%);
}
html.site-design body::after{opacity:.28}
html.site-design .container{
  width:min(1900px,calc(100vw - 24px));
  display:grid;grid-template-columns:248px minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);gap:12px 16px;
  padding:8px;border:1px solid rgba(184,127,54,.5);
  box-shadow:inset 0 0 0 1px #07050a,0 0 0 1px rgba(78,52,25,.7),0 20px 70px #0009;
}
html.site-design .container::before{
  content:'◆';position:fixed;z-index:30;color:#a87531;font-size:12px;line-height:1;pointer-events:none;
  text-shadow:0 0 8px rgba(226,184,95,.45)
}
html.site-design .container::before{left:17px;top:16px}
html.site-design .topbar{
  grid-column:1/-1;grid-row:1;margin:0;padding:14px 18px;
  align-items:center;border:1px solid rgba(185,132,60,.27);border-radius:5px;
  background:linear-gradient(90deg,rgba(23,17,24,.98),rgba(10,8,13,.98));
  box-shadow:inset 0 -1px rgba(226,184,95,.07);
}
html.site-design .brand{position:relative;padding-left:13px}
html.site-design .brand::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:2px;background:linear-gradient(transparent,var(--gold-bright),transparent)}
html.site-design .brand h1{font-size:31px;font-variant:small-caps;letter-spacing:.025em;color:#f4ead3;text-shadow:0 2px 14px #000}
html.site-design .brand .subtitle{font-family:'Marcellus',Georgia,serif;font-size:9px;letter-spacing:.22em;color:#bca170}
html.site-design .site-navigation{
  grid-column:1;grid-row:2;position:sticky;top:10px;align-self:start;
  display:flex!important;flex-direction:column;align-items:stretch!important;gap:14px!important;
  max-height:calc(100dvh - 20px);margin:0!important;padding:66px 12px 16px;
  overflow:auto;border:1px solid rgba(185,132,60,.32);border-radius:5px;
  background:
    linear-gradient(180deg,rgba(10,8,12,.45),rgba(7,6,9,.98)),
    radial-gradient(circle at 50% 92%,rgba(149,96,41,.12),transparent 32%),
    #0b0910;
  box-shadow:inset 0 0 28px #0007;
}
html.site-design .site-navigation::before{
  content:'CAMPAIGN LEDGER';position:absolute;left:14px;right:14px;top:20px;
  padding-bottom:15px;border-bottom:1px solid rgba(185,132,60,.24);
  color:#c9a96d;font:11px/1 'Marcellus',Georgia,serif;letter-spacing:.18em;text-align:center;
}
html.site-design .site-navigation .tabs{
  display:flex;flex-direction:column;flex-wrap:nowrap;width:100%;gap:3px;margin:0;padding:0;
  border-radius:0;background:transparent;
}
html.site-design .site-navigation .tab-btn{
  position:relative;width:100%;min-height:46px;justify-content:flex-start;padding:10px 13px;
  border:1px solid transparent;border-radius:3px;color:#d8cbb4;
  font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-weight:600;
  letter-spacing:.01em;text-transform:none;
}
html.site-design .site-navigation .tab-btn svg{width:18px;height:18px;color:#d7c29a}
html.site-design .site-navigation .tab-btn:hover{transform:none;background:linear-gradient(90deg,rgba(176,119,46,.16),transparent);border-color:rgba(190,139,70,.24)}
html.site-design .site-navigation .tab-btn.active{
  color:#f5dfb5;border-color:rgba(215,158,74,.48);
  background:linear-gradient(90deg,rgba(119,77,34,.54),rgba(70,46,27,.16));
  box-shadow:inset 3px 0 #d3a44f,0 0 18px rgba(164,103,37,.08);
}
html.site-design .site-navigation .tab-btn.active::after{content:'›';margin-left:auto;color:var(--gold-bright);font-size:20px}
html.site-design .site-navigation .global-search{order:-1;width:100%;max-width:none;flex:none;margin:0 0 4px}
html.site-design .site-navigation .global-search-box{min-height:43px;border-radius:3px;background:#09070c;border-color:rgba(190,139,70,.28)}
html.site-design .site-navigation .global-search-results{left:0;right:auto;width:min(430px,80vw);border-radius:4px}
html.site-design .site-main{grid-column:2;grid-row:2;min-width:0;padding:4px 4px 16px}
.beta-campaign-banner{display:none}
@media(min-width:1450px){
  html.site-design .site-main{padding-right:154px}
  .beta-campaign-banner{position:fixed;z-index:28;right:17px;top:108px;display:flex;width:126px;min-height:292px;align-items:center;flex-direction:column;padding:29px 13px 37px;overflow:hidden;border:1px solid rgba(215,165,77,.72);clip-path:polygon(0 0,100% 0,100% 83%,50% 100%,0 83%);background:linear-gradient(90deg,#120c17,#2b1734 48%,#120c17);box-shadow:inset 0 0 0 4px #0a070c,inset 0 0 0 5px rgba(215,165,77,.45),0 16px 40px #000b;color:#e5c57e;text-align:center;pointer-events:none}
  .beta-campaign-banner::before,.beta-campaign-banner::after{content:'';position:absolute;inset:8px 8px 35px;border:1px solid rgba(220,174,87,.32);clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);pointer-events:none}
  .beta-campaign-banner::after{inset:12px 12px 39px;border-color:rgba(98,66,112,.7)}
  .beta-banner-rail{position:absolute;left:-7px;right:-7px;top:7px;height:8px;border:1px solid #d5a754;border-radius:999px;background:linear-gradient(#755027,#24160d,#9f7135);box-shadow:0 3px 7px #000}
  .beta-campaign-banner img{position:relative;z-index:2;width:82px;height:82px;margin:2px 0 7px;object-fit:contain;filter:drop-shadow(0 5px 7px #000a)}
  .beta-campaign-banner strong{position:relative;z-index:2;color:#efd08b;font-size:16px;font-variant:small-caps;letter-spacing:.06em;line-height:1.1;text-shadow:0 2px 8px #000}
  .beta-campaign-banner>span:last-child{position:relative;z-index:2;margin-top:12px;color:#c9a56a;font:600 10px/1.8 'Marcellus',Georgia,serif;letter-spacing:.11em;text-transform:uppercase}
}

html.site-design .tab-body{gap:16px}
html.site-design .card,
html.site-design .grid-wrap,
html.site-design .beacon-board,
html.site-design .beacon-side,
html.site-design .inset-panel,
html.site-design .page-band,
html.site-design .brief{
  border-color:rgba(184,131,59,.34);border-radius:6px;background:var(--panel);
  box-shadow:inset 0 1px rgba(244,223,177,.025),0 8px 28px rgba(0,0,0,.22);
}
html.site-design .page-band{min-height:132px;border-top-color:rgba(226,184,95,.56);overflow:hidden}
html.site-design .page-band::after{
  content:'';position:absolute;z-index:3;left:22px;right:22px;bottom:10px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,184,95,.52),transparent);pointer-events:none;
}
html.site-design .section-title,
html.site-design .editor-heading h2,
html.site-design .editor-form-head h2{font-family:'Cormorant Garamond',Georgia,serif;color:#f2e6cb;text-shadow:0 2px 12px #000}
html.site-design .section-title{font-size:clamp(29px,3vw,46px)}
html.site-design .kicker,
html.site-design .label-caps{color:#d7ad60;letter-spacing:.18em}
html.site-design input,
html.site-design textarea,
html.site-design select{border-color:rgba(184,131,59,.33);border-radius:4px;background:#09070d}
html.site-design input:focus,
html.site-design textarea:focus,
html.site-design select:focus{border-color:#d2a250;box-shadow:0 0 0 2px rgba(210,162,80,.12)}
html.site-design .btn-primary{border:1px solid #d2a451;border-radius:4px;background:linear-gradient(180deg,#d3aa58,#9b6d2d);box-shadow:inset 0 1px rgba(255,244,206,.3),0 3px 10px #0006;color:#120d0a}
html.site-design .btn-primary:hover{filter:brightness(1.1)}
html.site-design .btn-ghost,
html.site-design .sort-btn{border-radius:4px;border-color:rgba(184,131,59,.32);background:rgba(17,13,18,.7);color:#d7c9b0}
html.site-design .sort-btn.active{border-color:#d5a74e;background:linear-gradient(180deg,rgba(170,116,45,.75),rgba(91,57,25,.72));color:#fff0cc;box-shadow:inset 0 0 10px rgba(232,190,101,.14)}
html.site-design table{border-color:rgba(184,131,59,.25)}
html.site-design th{font-family:'Marcellus',Georgia,serif;color:#d5ac62;letter-spacing:.08em;text-transform:uppercase}
html.site-design .roster-grid,
html.site-design .editor-character-grid{gap:10px}
html.site-design .roster-profile-card,
html.site-design .editor-character-card,
html.site-design .session-card{border-radius:5px;border-color:rgba(184,131,59,.3);background:linear-gradient(145deg,rgba(22,17,23,.98),rgba(8,7,11,.99))}
html.site-design .roster-profile-avatar,
html.site-design .editor-card-art{box-shadow:0 0 0 1px #d3a54e,0 0 18px rgba(191,125,46,.12)}
html.site-design .editor-savebar{border-radius:5px;background:rgba(8,7,11,.96);border-color:rgba(210,162,80,.48)}
html.site-design .editor-top-actions .btn-primary:not(.editor-top-login){background:rgba(19,15,20,.92);color:#e5d5b7;border-color:rgba(210,162,80,.42);box-shadow:none}
html.site-design .editor-top-actions .btn-primary:not(.editor-top-login):hover{background:rgba(112,73,31,.38)}

/* Static grouped Bond Board: no orbiting nodes or crossing connector lines. */
.eb-beta-panel{padding:0;overflow:visible}
.eb-beta-panel>.relationship-panel-head{padding:20px 22px}
.eb-beta-panel .relationship-panel-head h3{font-size:clamp(31px,3vw,47px);color:var(--parchment)}
.eb-beta-badge{padding:7px 10px;border:1px solid rgba(226,184,95,.45);border-radius:999px;color:var(--gold-bright);font:600 9px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.eb-beta-identity{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:14px 18px;padding:12px 18px;border:1px solid rgba(184,131,59,.42);border-radius:6px;background:linear-gradient(90deg,rgba(30,22,24,.96),rgba(10,8,12,.98))}
.eb-beta-source{display:flex;align-items:center;gap:16px;min-width:0}
.eb-beta-source>.avatar{width:78px!important;height:78px!important;flex:0 0 78px;border:2px solid #d8ad59;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #100c10,0 0 0 4px rgba(216,173,89,.62),0 8px 24px #0008}
.eb-beta-source h4{margin:2px 0;font-size:30px;color:#f2dfb8;font-variant:small-caps;letter-spacing:.035em}
.eb-beta-source p{margin:0;color:#cba35e;font-family:'Cormorant Garamond',Georgia,serif;font-size:16px}
.eb-beta-identity>strong{display:flex;flex-direction:column;align-items:center;min-width:110px;padding-left:22px;border-left:1px solid rgba(184,131,59,.25);color:#e6bd6d;font:600 31px 'Cormorant Garamond',Georgia,serif}
.eb-beta-identity>strong small{color:#cfc0a4;font-size:13px;font-weight:500}
.eb-beta-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 18px;padding:10px;border:1px solid rgba(184,131,59,.29);border-radius:6px;background:rgba(7,6,10,.82)}
.eb-beta-toolbar .relationship-search{flex:1 1 290px;min-width:200px}
.eb-beta-toolbar .relationship-search input{width:100%;min-height:42px;padding-left:36px}
.eb-beta-panel .eb-workspace{padding:0 18px 18px;grid-template-columns:minmax(210px,250px) minmax(0,1fr);gap:12px}
.eb-beta-panel .eb-quick{top:10px;border-radius:5px;border-color:rgba(184,131,59,.38);background:linear-gradient(160deg,rgba(22,16,21,.99),rgba(8,7,11,.99))}
.eb-beta-panel .eb-quick-head{padding-bottom:8px;border-bottom:1px solid rgba(184,131,59,.25)}
.eb-beta-panel .eb-quick-group summary{font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;color:#ead9ba}
.eb-clusters{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;align-items:start}
.eb-cluster{--bond-colour:#918b96;grid-column:span 4;min-width:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--bond-colour) 72%,#47372d);border-radius:6px;background:linear-gradient(155deg,color-mix(in srgb,var(--bond-colour) 14%,#0b0910),#08070b 72%);box-shadow:inset 0 0 28px color-mix(in srgb,var(--bond-colour) 6%,transparent)}
.eb-cluster.is-relation-friend{--bond-colour:#58c690;grid-column:span 6}
.eb-cluster.is-relation-family{--bond-colour:#c47bdb}
.eb-cluster.is-relation-romance{--bond-colour:#dc718f}
.eb-cluster.is-relation-mentor{--bond-colour:#58b8e9}
.eb-cluster.is-relation-service{--bond-colour:#d7aa55}
.eb-cluster.is-relation-hostile{--bond-colour:#dc615d;grid-column:span 6}
.eb-cluster.is-relation-other{--bond-colour:#a6a3aa}
.eb-cluster.is-relation-unconnected{--bond-colour:#776f7e}
.eb-cluster>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;border-bottom:1px solid color-mix(in srgb,var(--bond-colour) 34%,transparent);background:color-mix(in srgb,var(--bond-colour) 7%,transparent)}
.eb-cluster>header h4{margin:0;color:color-mix(in srgb,var(--bond-colour) 78%,#fff1d2);font:600 20px 'Cormorant Garamond',Georgia,serif;font-variant:small-caps;letter-spacing:.04em}
.eb-cluster>header span{color:var(--bond-colour);font:600 18px 'Cormorant Garamond',Georgia,serif}
.eb-cluster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:7px;padding:10px}
.eb-cluster-token{position:relative;display:grid;grid-template-rows:auto auto auto auto;place-items:center;gap:3px;min-width:0;padding:9px 5px 8px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--parchment);cursor:pointer}
.eb-cluster-token:hover,.eb-cluster-token:focus-visible{border-color:var(--gold-bright);background:rgba(201,155,70,.1);box-shadow:inset 0 0 18px rgba(210,162,80,.09)}
.eb-cluster-token.is-connected:hover::after{content:'✓';position:absolute;right:6px;top:5px;display:grid;place-items:center;width:18px;height:18px;border:1px solid #ffdfa0;border-radius:50%;background:#956728;color:#fff4cf;font-size:11px}
.eb-cluster-token>.avatar{width:64px!important;height:64px!important;border:1px solid #d5a84f;border-radius:50%;object-fit:cover;background:#17131b;outline:2px solid #09070c;box-shadow:0 0 0 1px color-mix(in srgb,var(--bond-colour) 68%,#d5a84f)}
.eb-cluster-name{display:block;width:100%;overflow:hidden;color:#f0e4cb;font:600 15px 'Cormorant Garamond',Georgia,serif;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.eb-cluster-kind{padding:1px 5px;border:1px solid color-mix(in srgb,var(--bond-colour) 45%,#514a50);border-radius:999px;color:#bdb3a5;font:600 8px 'JetBrains Mono',monospace;line-height:1.1}
.eb-cluster-relation{display:block;width:100%;overflow:hidden;padding:3px 6px;border:1px solid color-mix(in srgb,var(--bond-colour) 68%,#494149);border-radius:999px;background:color-mix(in srgb,var(--bond-colour) 11%,#0c0910);color:#eee1cc;font:500 11px 'Cormorant Garamond',Georgia,serif;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.eb-cluster-token.is-incoming-only>.avatar{box-shadow:0 0 0 1px var(--bond-colour),0 0 16px #be82ec99}
.eb-beta-panel .eb-bond-map>.muted{margin:10px 3px 0;padding:10px 13px;border:1px solid rgba(184,131,59,.22);border-radius:4px;background:rgba(7,6,10,.65)}

@media(max-width:1250px){
  html.site-design .container{grid-template-columns:214px minmax(0,1fr)}
  .eb-cluster{grid-column:span 6}
}
@media(max-width:900px){
  html.site-design body{padding:7px}
  html.site-design .container{display:block;width:auto;padding:6px}
  html.site-design .topbar{margin-bottom:8px}
  html.site-design .site-navigation{position:relative;top:auto;display:flex!important;max-height:none;margin-bottom:10px!important;padding:52px 8px 8px;overflow:visible}
  html.site-design .site-navigation .tabs{flex-direction:row;flex-wrap:wrap}
  html.site-design .site-navigation .tab-btn{width:auto;min-height:39px;flex:1 1 145px;justify-content:center;font-size:15px}
  html.site-design .site-navigation .tab-btn.active::after{display:none}
  html.site-design .site-navigation .global-search{order:2}
  html.site-design .site-navigation .global-search-results{width:100%}
  html.site-design .site-main{padding:0}
  .eb-beta-panel .eb-workspace{grid-template-columns:1fr}
  .eb-beta-panel .eb-quick{position:relative;top:auto;max-height:none}
}
@media(max-width:680px){
  html.site-design .topbar{padding:12px;align-items:stretch}
  html.site-design .brand h1{font-size:25px}
  html.site-design .topbar-account{align-items:stretch;width:100%}
  html.site-design .editor-top-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  html.site-design .editor-signed-in{grid-column:1/-1;text-align:left}
  .eb-beta-panel>.relationship-panel-head{padding:16px}
  .eb-beta-identity{align-items:flex-start;margin:10px;flex-direction:column}
  .eb-beta-identity>strong{align-items:flex-start;width:100%;padding:10px 0 0;border-top:1px solid rgba(184,131,59,.25);border-left:0}
  .eb-beta-toolbar{margin:10px}
  .eb-beta-panel .eb-workspace{padding:0 10px 10px}
  .eb-cluster{grid-column:1/-1!important}
  .eb-cluster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Beta Bond Board usability pass. The relationship list expands over the
   board instead of forcing the narrow Quick Bonds rail to side-scroll. */
.eb-beta-panel .eb-workspace{overflow:visible}
.eb-beta-panel .eb-quick{z-index:40;max-height:none;overflow:visible;min-width:0;padding:13px}
.eb-quick-head{min-width:0}
.eb-quick-head>div{min-width:0}
.eb-quick-close{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;padding:0;border:1px solid rgba(184,131,59,.35);border-radius:4px;background:#0b080e;color:#d7c9b0;font:22px/1 'Inter',sans-serif;cursor:pointer}
.eb-quick-close:hover,.eb-quick-close:focus-visible{border-color:var(--gold-bright);color:#fff0cc}
.eb-quick-groups{position:relative;border-bottom:1px solid rgba(184,131,59,.22)}
.eb-quick-group{position:relative;padding:0;border-top:1px solid rgba(184,131,59,.2)}
.eb-quick-group>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:41px;padding:8px 4px;list-style:none;cursor:pointer;color:#ead9ba;font:600 16px 'Cormorant Garamond',Georgia,serif}
.eb-quick-group>summary::-webkit-details-marker{display:none}
.eb-quick-group>summary span{color:var(--gold);font-size:20px;transition:transform .18s ease}
.eb-quick-group[open]>summary{color:var(--gold-bright)}
.eb-quick-group[open]>summary span{transform:rotate(90deg)}
.eb-quick-flyout{position:absolute;z-index:80;left:calc(100% + 13px);top:-8px;width:clamp(310px,34vw,490px);max-height:min(520px,calc(100dvh - 80px));padding:16px;overflow-y:auto;overflow-x:hidden;border:1px solid rgba(215,166,82,.58);border-radius:6px;background:linear-gradient(150deg,rgba(24,17,23,.995),rgba(7,6,10,.995));box-shadow:0 18px 50px #000c,inset 0 1px rgba(255,238,196,.06);transform-origin:left center;animation:eb-unfurl .18s ease-out both}
.eb-quick-group:nth-last-child(-n+3)>.eb-quick-flyout{top:auto;bottom:-8px;transform-origin:left bottom}
@keyframes eb-unfurl{from{opacity:0;transform:translateX(-9px) scale(.97)}to{opacity:1;transform:translateX(0) scale(1)}}
.eb-quick-flyout-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:-2px 0 12px;padding-bottom:9px;border-bottom:1px solid rgba(184,131,59,.22)}
.eb-quick-flyout-head strong{color:#f0d8a8;font:600 21px 'Cormorant Garamond',Georgia,serif}
.eb-quick-flyout-head small{color:var(--slate);font-size:10px}
.eb-quick-flyout .eb-quick-section{margin:11px 0}
.eb-quick-flyout .eb-quick-section>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.eb-quick-flyout .eb-quick-section .sort-btn{width:100%;min-width:0;justify-content:center;white-space:normal}
.eb-quick-flyout>.btn-primary{width:100%;justify-content:center;margin-top:10px}
.eb-quick-apply{padding-top:12px}
.eb-quick-apply p{margin:0 0 8px}
.eb-quick-count{color:var(--slate);font-size:12px}
.eb-quick-count strong{color:var(--gold-bright);font:600 20px 'Cormorant Garamond',Georgia,serif}
.eb-quick-apply>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px}
.eb-quick-apply .btn-primary{justify-content:center;min-width:0}
.eb-quick-apply button:disabled{opacity:.42;cursor:not-allowed}
.eb-beta-filters{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}
.eb-beta-filters .sort-toggle{display:flex;align-items:stretch;margin:0}
.eb-beta-filters .sort-btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center}
.eb-same-faction{white-space:nowrap}
.eb-cluster-token[hidden],.eb-cluster[hidden]{display:none!important}
.eb-cluster-token.is-staged{border-color:#f0c96b;background:linear-gradient(160deg,rgba(171,111,39,.27),rgba(35,24,21,.26));box-shadow:inset 0 0 0 1px rgba(255,225,154,.24),0 0 19px rgba(222,169,76,.18)}
.eb-cluster-token.is-staged::after{content:'✓';position:absolute;right:7px;top:6px;display:grid;place-items:center;width:20px;height:20px;border:1px solid #ffe3a1;border-radius:50%;background:linear-gradient(180deg,#d2a750,#865b25);color:#fff6dc;font:700 12px/1 'Inter',sans-serif;box-shadow:0 2px 8px #0008}
.eb-cluster-token.is-connected:not(.is-staged):hover::after{content:none}
.eb-cluster-token.is-staged:hover::after{content:'✓'}

/* The main Connections character view shares the static grouped language of
   the Bond Board, without exposing editing controls on the browsing page. */
.connections-beta-panel{overflow:hidden;padding:4px 0 0}
.connections-beta-panel .eb-beta-toolbar{margin-bottom:12px}
.connections-cluster-wrap{padding:0 18px 16px}
.connections-beta-panel .eb-cluster-token>span:first-child{display:block}
.connections-beta-panel .eb-cluster-token>.eb-cluster-relation{display:block}
.connections-empty{min-height:240px;margin:0;display:grid;place-items:center;align-content:center;gap:12px}
.connections-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 18px;border-top:1px solid rgba(184,131,59,.24);color:var(--slate);font-size:12px}
.connections-footer span:first-child{color:#d5bd91}

/* Private beta library pages. These are useful views over existing campaign
   data; they do not invent new storage formats or expose unfinished editing. */
.beta-lore-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.beta-library-link{display:flex;align-items:center;gap:13px;min-height:98px;padding:15px;text-align:left;color:var(--parchment);cursor:pointer}
.beta-library-link:hover{transform:translateY(-2px);border-color:rgba(220,173,86,.68)}
.beta-library-link>span{display:flex;min-width:0;flex-direction:column}
.beta-library-link small{color:var(--gold);font:600 9px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.beta-library-link strong{font-size:19px;color:#eee0c5}
.beta-library-link em{color:var(--slate);font-size:11px;font-style:normal}
.beta-artefact-index,.beta-atlas,.beta-settings-card{padding:20px}
.beta-artefact-index>header,.beta-atlas>header,.beta-faction-card>header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px;padding-bottom:12px;border-bottom:1px solid rgba(184,131,59,.22)}
.beta-artefact-index h3,.beta-atlas h3,.beta-faction-card h3,.beta-settings-card h3,.beta-settings-note h3{margin:2px 0;color:#eadfc9;font-size:24px}
.beta-artefact-index>header>strong,.beta-atlas>header>strong,.beta-faction-card>header>strong{color:var(--gold-bright);font:600 27px 'Cormorant Garamond',Georgia,serif}
.beta-artefact-list,.beta-atlas-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.beta-artefact-list article,.beta-atlas-grid article{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid rgba(184,131,59,.2);border-radius:4px;background:rgba(7,6,10,.48)}
.beta-artefact-list article>span,.beta-atlas-grid article>span{display:grid;place-items:center;flex:0 0 31px;width:31px;height:31px;border:1px solid rgba(184,131,59,.3);border-radius:50%}
.beta-artefact-list article>div,.beta-atlas-grid article>div{display:flex;min-width:0;flex-direction:column}
.beta-artefact-list strong,.beta-atlas-grid strong{overflow:hidden;color:#e8dcc4;text-overflow:ellipsis;white-space:nowrap}
.beta-artefact-list small,.beta-atlas-grid small{color:var(--slate)}
.beta-library-empty{display:flex;align-items:center;justify-content:center;gap:15px;min-height:120px;padding:24px;text-align:center;color:var(--slate)}
.beta-library-empty h3,.beta-library-empty p{margin:0 0 4px}
.beta-faction-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.beta-faction-card{position:relative;overflow:hidden;padding:18px;border-top-color:color-mix(in srgb,var(--library-accent) 70%,var(--gold))!important}
.beta-faction-card::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--library-accent);opacity:.8}
.beta-member-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px}
.beta-member-list button{display:flex;align-items:center;gap:8px;min-width:0;padding:7px;border:1px solid rgba(184,131,59,.17);border-radius:4px;background:rgba(7,6,10,.42);color:#e6d9c1;text-align:left;cursor:pointer}
.beta-member-list button:hover{border-color:var(--library-accent);background:color-mix(in srgb,var(--library-accent) 12%,#0a080c)}
.beta-member-list button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.beta-map-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.beta-map-card{overflow:hidden}
.beta-map-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.beta-map-card>div{padding:17px}.beta-map-card h3{margin:3px 0;color:#eadfc9}.beta-map-card p{margin:0;color:var(--slate)}
.beta-settings-card{max-width:980px}
.beta-theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.beta-theme-options button{display:grid;grid-template-columns:47px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:13px;border:1px solid rgba(184,131,59,.28);border-radius:5px;background:#0b080e;color:#e8dcc6;text-align:left;cursor:pointer}
.beta-theme-options button.is-selected{border-color:#d7ab58;box-shadow:inset 0 0 0 1px rgba(215,171,88,.18),0 0 18px rgba(194,135,54,.12)}
.beta-theme-options strong{align-self:end}.beta-theme-options small{align-self:start;color:var(--slate)}
.beta-theme-swatch{grid-row:1/3;width:45px;height:45px;border:1px solid #b98c47;border-radius:50%;box-shadow:inset 0 0 0 4px rgba(255,255,255,.08)}
.beta-theme-swatch.is-dark{background:linear-gradient(135deg,#08060a 50%,#aa762e 51%)}
.beta-theme-swatch.is-light{background:linear-gradient(135deg,#f0dfbd 50%,#795328 51%)}
.beta-theme-swatch.is-system{background:linear-gradient(135deg,#f0dfbd 49%,#08060a 51%)}
.beta-settings-note{display:flex;align-items:flex-start;gap:13px;max-width:980px;padding:17px}.beta-settings-note h3{font-size:20px}.beta-settings-note p{margin:0;color:var(--slate)}

/* The beta's optional light theme remains a private browser preference. */
html.site-design.beta-theme-light{--void:#d8c39d;--ink:#f5e8cb;--ink-deep:#2c2118;--ink-panel:#efe0bf;--parchment:#2e241d;--parchment-dim:#5d4b39;--slate:#75634f;--panel:linear-gradient(155deg,#f4e7ca,#dfc9a3);--border:rgba(92,61,29,.35)}
html.site-design.beta-theme-light body{color:#2e241d;background:radial-gradient(circle at 60% 0,#f0dfbe 0,#d8c39d 53%,#b99a6a 100%)}
html.site-design.beta-theme-light body::before{opacity:.2;filter:sepia(1)}
html.site-design.beta-theme-light .topbar,
html.site-design.beta-theme-light .site-navigation{background:linear-gradient(155deg,rgba(250,239,213,.98),rgba(212,190,153,.98));box-shadow:inset 0 0 25px rgba(91,57,26,.12)}
html.site-design.beta-theme-light .beta-campaign-banner{background:linear-gradient(90deg,#3b2546,#684578 48%,#3b2546);color:#f1d79d}
html.site-design.beta-theme-light .brand h1,
html.site-design.beta-theme-light .section-title,
html.site-design.beta-theme-light .editor-heading h2,
html.site-design.beta-theme-light .editor-form-head h2{color:#332419;text-shadow:none}
html.site-design.beta-theme-light .site-navigation .tab-btn{color:#493728}
html.site-design.beta-theme-light .site-navigation .tab-btn.active{color:#2a1d13;background:linear-gradient(90deg,rgba(171,117,46,.32),rgba(255,246,222,.32))}
html.site-design.beta-theme-light input,
html.site-design.beta-theme-light textarea,
html.site-design.beta-theme-light select,
html.site-design.beta-theme-light .global-search-box,
html.site-design.beta-theme-light .btn-ghost,
html.site-design.beta-theme-light .sort-btn{background:rgba(255,248,229,.65);color:#37281d}
html.site-design.beta-theme-light .eb-beta-identity,
html.site-design.beta-theme-light .eb-beta-toolbar,
html.site-design.beta-theme-light .eb-cluster,
html.site-design.beta-theme-light .beta-artefact-list article,
html.site-design.beta-theme-light .beta-atlas-grid article,
html.site-design.beta-theme-light .beta-member-list button,
html.site-design.beta-theme-light .beta-theme-options button{background:rgba(255,247,226,.52);color:#34251a}
html.site-design.beta-theme-light .eb-beta-source h4,
html.site-design.beta-theme-light .eb-cluster-name,
html.site-design.beta-theme-light .eb-cluster-relation,
html.site-design.beta-theme-light .beta-library-link,
html.site-design.beta-theme-light .beta-library-link strong,
html.site-design.beta-theme-light .beta-faction-card h3,
html.site-design.beta-theme-light .beta-artefact-index h3,
html.site-design.beta-theme-light .beta-atlas h3,
html.site-design.beta-theme-light .beta-settings-card h3,
html.site-design.beta-theme-light .beta-settings-note h3,
html.site-design.beta-theme-light .beta-artefact-list strong,
html.site-design.beta-theme-light .beta-atlas-grid strong{color:#35261b;text-shadow:none}
html.site-design.beta-theme-light .eb-cluster-kind,
html.site-design.beta-theme-light .eb-cluster-relation{color:#493728}

@media(max-width:1050px){
  .eb-beta-toolbar{align-items:stretch}
  .eb-beta-toolbar .relationship-search{flex-basis:100%}
  .eb-beta-filters{justify-content:flex-start;width:100%}
}
@media(max-width:1100px){.beta-lore-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.beta-artefact-list,.beta-atlas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .eb-beta-panel .eb-quick{overflow:hidden}
  .eb-quick-flyout,.eb-quick-group:nth-last-child(-n+3)>.eb-quick-flyout{position:relative;left:auto;top:auto;bottom:auto;width:auto;max-height:420px;margin:0 0 10px;box-shadow:inset 0 0 20px #0005;transform-origin:top center}
  @keyframes eb-unfurl{from{opacity:0;transform:translateY(-7px) scaleY(.96)}to{opacity:1;transform:translateY(0) scaleY(1)}}
}
@media(max-width:520px){
  .eb-beta-filters{align-items:stretch;flex-direction:column}
  .eb-beta-filters .sort-toggle{width:100%}
  .eb-beta-filters .sort-toggle .sort-btn{flex:1}
  .eb-same-faction{width:100%;justify-content:center}
  .eb-quick-flyout .eb-quick-section>div{grid-template-columns:1fr}
  .beta-lore-grid,.beta-faction-grid,.beta-map-gallery,.beta-theme-options,.beta-artefact-list,.beta-atlas-grid{grid-template-columns:1fr}
  .connections-footer{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.eb-quick-flyout{animation:none}.eb-quick-group>summary span{transition:none}}

/* Rexen beta layout polish: keep every navigation surface contained. */
html.site-design .site-navigation{overflow-x:hidden}
html.site-design .site-navigation .global-search,
html.site-design .site-navigation .global-search-box,
html.site-design .site-navigation .global-search-results{min-width:0;max-width:100%;box-sizing:border-box}
html.site-design .site-navigation .global-search-results{left:0;right:0;width:100%;overflow-x:hidden}
html.site-design .site-navigation .global-search-box input{flex:1 1 0;width:0;min-width:0;max-width:100%;box-sizing:border-box}
html.site-design .site-navigation .global-search-result{min-width:0;overflow:hidden}
html.site-design .site-navigation .global-search-result>span{min-width:0;overflow-wrap:anywhere}

/* The crest belongs to the page header. It never follows page scrolling. */
html.site-design .topbar-account{position:relative;display:flex;min-height:122px;box-sizing:border-box;flex-direction:row;align-items:flex-start;justify-content:flex-end;gap:14px;padding-right:162px}
html.site-design .topbar-account .editor-top-actions{order:1;align-self:center}
html.site-design .beta-campaign-banner{
  position:absolute;inset:-12px 0 auto auto;order:2;z-index:30;display:flex;width:150px;min-height:222px;box-sizing:border-box;
  align-items:center;flex-direction:column;padding:29px 13px 42px;overflow:hidden;
  border:1px solid rgba(215,165,77,.72);clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);
  background:linear-gradient(90deg,#120c17,#2b1734 48%,#120c17);box-shadow:inset 0 0 0 4px #0a070c,inset 0 0 0 5px rgba(215,165,77,.45),0 10px 25px #0008;
  color:#e5c57e;text-align:center;pointer-events:none
}
html.site-design .beta-campaign-banner::before,
html.site-design .beta-campaign-banner::after{content:'';position:absolute;inset:7px 7px 25px;border:1px solid rgba(220,174,87,.32);clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);pointer-events:none}
html.site-design .beta-campaign-banner::after{inset:11px 11px 29px;border-color:rgba(98,66,112,.7)}
html.site-design .beta-banner-rail{position:absolute;left:-7px;right:-7px;top:6px;height:7px;border:1px solid #d5a754;border-radius:999px;background:linear-gradient(#755027,#24160d,#9f7135);box-shadow:0 3px 7px #000}
html.site-design .beta-campaign-banner img{position:relative;z-index:2;width:94px;height:94px;margin:3px 0 9px;object-fit:contain;filter:drop-shadow(0 5px 8px #000a)}
html.site-design .beta-campaign-banner strong{position:relative;z-index:2;color:#efd08b;font-size:17px;font-variant:small-caps;letter-spacing:.05em;line-height:1.05;text-shadow:0 2px 8px #000}
@media(min-width:1450px){html.site-design .site-main{padding-right:4px}}

/* Connections uses the same full portrait treatment as the Bond Maker and
   packs unequal groups into two balanced columns without blank grid cells. */
.connections-beta-panel .connections-cluster-wrap{padding:0 18px}
.connections-cluster-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.connections-beta-panel .eb-cluster{width:100%;margin:0;grid-column:auto}
.connections-cluster-columns>.eb-cluster:last-child:nth-child(odd),.connections-cluster-columns>.eb-cluster.is-relation-friend{grid-column:1/-1}
.connections-cluster-columns>.eb-cluster:nth-last-child(2):nth-child(odd):has(+.is-relation-friend){grid-column:1/-1}
.connections-beta-panel .eb-cluster-grid{display:flex;flex-wrap:wrap;gap:10px}
.connections-beta-panel .eb-cluster-token{flex:0 0 118px;min-width:0;max-width:100%}
.connections-beta-panel .eb-cluster-token>.avatar{width:64px!important;height:64px!important}
.eb-beta-source-art{display:block;flex:0 0 auto;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.eb-beta-source-art>.avatar{width:78px!important;height:78px!important;border:2px solid #d8ad59;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #100c10,0 0 0 4px rgba(216,173,89,.62),0 8px 24px #0008}
.eb-beta-source-art:hover .avatar,.eb-beta-source-art:focus-visible .avatar{box-shadow:0 0 0 3px #100c10,0 0 0 5px #f0c66f,0 8px 28px #0008}
.eb-beta-source small{display:block;margin-top:4px;color:var(--slate);font-size:11px}
.eb-character-select{display:grid;flex:0 1 260px;gap:3px;min-width:190px;color:var(--slate);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.eb-character-select select{width:100%;min-height:42px;color:var(--parchment);font-size:13px;letter-spacing:0;text-transform:none}
.eb-beta-filters .sort-toggle .sort-btn{min-width:86px;gap:7px;white-space:nowrap}
.eb-beta-filters .sort-toggle .sort-btn b{display:inline-grid;place-items:center;min-width:23px;height:20px;padding:0 5px;border-radius:999px;background:rgba(0,0,0,.25);font-size:10px}
.connections-character-picker{margin:14px 18px;padding:12px;border:1px solid rgba(184,131,59,.3);border-radius:6px;background:rgba(7,6,10,.68)}
.connections-picker-head{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(210px,1fr) minmax(390px,auto);align-items:end;gap:12px;margin-bottom:11px}
.connections-picker-head p{margin:3px 0 0}.connections-picker-head .relationship-search{margin:0}.connections-picker-head .sort-toggle{display:flex;flex-wrap:wrap;margin:0;white-space:normal}
.connections-picker-head .sort-btn{min-height:42px}.connections-picker-head .sort-btn b{margin-left:4px;font-size:10px}
.connections-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));grid-auto-rows:112px;gap:7px;max-height:231px;overflow-y:auto;overflow-x:hidden;padding:2px 3px 3px 2px}
.connections-picker-token{display:grid;place-items:center;gap:3px;min-width:0;padding:8px 5px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--parchment);cursor:pointer}
.connections-picker-token:hover,.connections-picker-token:focus-visible{border-color:rgba(215,171,88,.62);background:rgba(201,155,70,.09)}
.connections-picker-token.is-active{border-color:#d7ab58;background:rgba(164,103,37,.2);box-shadow:inset 0 0 15px rgba(215,171,88,.1)}
.connections-picker-token>.avatar{width:64px!important;height:64px!important;border:1px solid #d5a84f;border-radius:50%;object-fit:cover}
.connections-picker-token strong{width:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font:600 13px 'Cormorant Garamond',Georgia,serif}
.connections-picker-token small{padding:1px 5px;border:1px solid rgba(184,131,59,.3);border-radius:999px;color:var(--slate);font-size:8px}

.beta-lore-collections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.beta-lore-shelf{min-width:0}
.beta-place-list{display:grid;gap:8px;padding:0 16px 16px}
.beta-place-card{overflow:hidden;border:1px solid rgba(184,131,59,.25);border-radius:5px;background:rgba(7,6,10,.42)}
.beta-place-card>summary{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;padding:13px 15px;color:var(--parchment);cursor:pointer;list-style:none}
.beta-place-card>summary::-webkit-details-marker{display:none}
.beta-place-card>summary::after{content:'›';grid-column:3;color:var(--gold-bright);font-size:22px;transform:rotate(90deg);transition:transform .18s ease}
.beta-place-card[open]>summary::after{transform:rotate(-90deg)}
.beta-place-card>summary span:nth-child(2){display:grid;min-width:0;gap:2px}
.beta-place-card>summary strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.beta-place-card>summary small{color:var(--slate)}
.beta-place-details{padding:0 15px 15px;border-top:1px solid rgba(184,131,59,.18)}
.beta-place-details>p,.beta-place-notes{line-height:1.6}
.beta-place-notes{margin:10px 0 14px;padding:12px;border-left:2px solid var(--gold);background:rgba(0,0,0,.14)}
.beta-place-form{display:grid;gap:11px;margin-top:14px;padding:14px;border:1px solid rgba(184,131,59,.26);border-radius:4px;background:rgba(0,0,0,.18)}
.beta-place-form label{display:grid;gap:5px;color:var(--parchment-dim);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.beta-place-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.beta-place-people{margin:14px 0;padding:12px 0;border-top:1px solid rgba(184,131,59,.18);border-bottom:1px solid rgba(184,131,59,.18)}
.beta-place-people>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:7px;margin-top:8px}
.beta-place-people button{display:flex;align-items:center;gap:8px;min-width:0;padding:6px;border:1px solid rgba(184,131,59,.18);border-radius:4px;background:rgba(7,6,10,.35);color:var(--parchment);cursor:pointer}
.beta-place-people button:hover{border-color:var(--gold)}.beta-place-people button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.beta-map-placeholder{display:grid;grid-template-columns:minmax(360px,1.5fr) minmax(250px,.7fr);align-items:stretch;gap:20px;padding:18px}
.beta-map-placeholder-canvas{position:relative;display:grid;place-items:center;min-height:310px;overflow:hidden;border:1px solid rgba(184,131,59,.35);border-radius:5px;background:linear-gradient(rgba(184,131,59,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(184,131,59,.1) 1px,transparent 1px),radial-gradient(circle at 37% 46%,rgba(112,78,41,.38),transparent 4%),radial-gradient(circle at 66% 63%,rgba(112,78,41,.3),transparent 4%),#0b090d;background-size:38px 38px,38px 38px,auto,auto,auto}
.beta-map-placeholder-canvas::after{content:'Map artwork';position:absolute;right:12px;bottom:10px;color:var(--slate);font:600 9px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.beta-map-placeholder-canvas>span{opacity:.65}.beta-map-placeholder-canvas i{position:absolute;width:13px;height:13px;border:2px solid var(--gold);border-radius:50% 50% 50% 0;background:#301d16;transform:rotate(-45deg);box-shadow:0 3px 8px #000}
.beta-map-placeholder-canvas i:nth-of-type(1){left:26%;top:31%}.beta-map-placeholder-canvas i:nth-of-type(2){left:58%;top:48%}.beta-map-placeholder-canvas i:nth-of-type(3){left:73%;top:25%}
.beta-map-placeholder>div:last-child{align-self:center}.beta-map-placeholder h3{margin:5px 0;color:var(--parchment);font-size:28px}.beta-map-placeholder p{color:var(--slate);line-height:1.6}

/* The beta sidebar narrows the content column, so the Beacon Board must use
   fluid day columns rather than retaining the old 570px table minimum. */
html.site-design .beacon-layout{grid-template-columns:minmax(0,1fr) minmax(190px,220px);width:100%}
html.site-design .beacon-wrap{min-width:0;overflow-x:hidden}
html.site-design .beacon-board .beacon-table{width:100%;min-width:0;table-layout:fixed;border-spacing:4px}
html.site-design .beacon-board .beacon-table th:first-child,
html.site-design .beacon-board .beacon-table td:first-child{width:86px}
html.site-design .beacon-board .beacon-table td:not(:first-child){min-width:0}
html.site-design .beacon-board .beacon-cell-sm{width:100%;max-width:54px;min-width:0;margin-inline:auto;box-sizing:border-box}

/* Parchment mode: remove the dark centre wash and explicitly restyle the
   shared surfaces that otherwise inherit candlelit colours. */
html.site-design.beta-theme-light body{color:#302219;background:linear-gradient(145deg,#f7edd8 0%,#e5d0aa 58%,#d2b789 100%)}
html.site-design.beta-theme-light body::before{background:linear-gradient(145deg,rgba(255,252,242,.78),rgba(202,170,117,.12));opacity:1;filter:none}
html.site-design.beta-theme-light body::after{opacity:.045;filter:sepia(1)}
html.site-design.beta-theme-light .topbar,
html.site-design.beta-theme-light .site-navigation,
html.site-design.beta-theme-light .card,
html.site-design.beta-theme-light .grid-wrap,
html.site-design.beta-theme-light .beacon-board,
html.site-design.beta-theme-light .beacon-side,
html.site-design.beta-theme-light .inset-panel,
html.site-design.beta-theme-light .page-band,
html.site-design.beta-theme-light .brief,
html.site-design.beta-theme-light .session-card,
html.site-design.beta-theme-light .roster-profile-card,
html.site-design.beta-theme-light .editor-character-card,
html.site-design.beta-theme-light .editor-savebar,
html.site-design.beta-theme-light .calendar-grid,
html.site-design.beta-theme-light .calendar-day,
html.site-design.beta-theme-light .beta-place-card{background:linear-gradient(155deg,rgba(255,249,232,.97),rgba(226,204,166,.96));color:#302219;border-color:rgba(100,67,31,.32);box-shadow:inset 0 1px rgba(255,255,255,.62),0 8px 24px rgba(91,57,26,.12)}
html.site-design.beta-theme-light .editor-top-actions .btn-primary,
html.site-design.beta-theme-light .editor-top-actions .btn-primary:not(.editor-top-login),
html.site-design.beta-theme-light .editor-top-login,
html.site-design.beta-theme-light .btn-primary{border-color:#8d602b;background:linear-gradient(180deg,#f0d79e,#c99b4b);box-shadow:inset 0 1px rgba(255,255,255,.65),0 3px 9px rgba(83,50,21,.2);color:#281a10}
html.site-design.beta-theme-light .btn-primary:hover,
html.site-design.beta-theme-light .editor-top-actions .btn-primary:not(.editor-top-login):hover{background:linear-gradient(180deg,#f7e6ba,#d3a556);color:#20140c}
html.site-design.beta-theme-light .muted,
html.site-design.beta-theme-light .small,
html.site-design.beta-theme-light .tiny,
html.site-design.beta-theme-light .subtitle,
html.site-design.beta-theme-light .calendar-day-number,
html.site-design.beta-theme-light .calendar-weekday,
html.site-design.beta-theme-light .month-label,
html.site-design.beta-theme-light .beta-place-card>summary small{color:#5c4633!important}
html.site-design.beta-theme-light .calendar-day.is-outside{opacity:.62}
html.site-design.beta-theme-light .calendar-day button,
html.site-design.beta-theme-light .calendar-nav button,
html.site-design.beta-theme-light .global-search-result,
html.site-design.beta-theme-light .link-more{color:#38271b}
html.site-design.beta-theme-light .page-band::before{opacity:.08}
html.site-design.beta-theme-light .eb-cluster-token,
html.site-design.beta-theme-light .beta-place-form label{color:#332419}
html.site-design.beta-theme-light .eb-beta-source-art{background:transparent;color:#332419}
html.site-design.beta-theme-light .eb-beta-filters .sort-toggle .sort-btn b{background:rgba(91,57,26,.13)}
html.site-design.beta-theme-light .connections-character-picker,
html.site-design.beta-theme-light .connections-picker-token,
html.site-design.beta-theme-light .beta-place-people button{background:rgba(255,249,232,.55);color:#332419}
html.site-design.beta-theme-light .beta-map-placeholder-canvas{background:linear-gradient(rgba(100,67,31,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(100,67,31,.12) 1px,transparent 1px),#dfc79f;background-size:38px 38px}
html.site-design.beta-theme-light .beta-place-form,
html.site-design.beta-theme-light .beta-place-notes{background:rgba(255,250,235,.56)}

@media(max-width:900px){
  html.site-design .topbar-account{width:100%;min-height:0;padding-right:0;flex-direction:column-reverse;align-items:stretch}
  html.site-design .beta-campaign-banner{position:relative;inset:auto;align-self:flex-end;width:122px;min-height:165px}
  .connections-cluster-columns{grid-template-columns:1fr}
  .connections-picker-head{grid-template-columns:1fr 1fr}.connections-picker-head>div:first-child{grid-column:1/-1}
  html.site-design .beacon-layout{grid-template-columns:1fr}
  .beta-map-placeholder{grid-template-columns:1fr}
}
@media(max-width:680px){
  html.site-design .topbar-account{flex-direction:column}
  html.site-design .beta-campaign-banner{align-self:center}
  .beta-lore-collections,.beta-place-form-row{grid-template-columns:1fr}
}


/* Beta reference layout: sidebar masthead, compact account controls and a banner rail. */
.beta-sidebar-brand{order:-2;text-align:center;padding:8px 0 20px;border-bottom:1px solid rgba(185,132,60,.3)}
.beta-sidebar-brand strong{display:block;color:var(--parchment);font:500 30px/1.05 'Cormorant Garamond',Georgia,serif;font-variant:small-caps;letter-spacing:-.025em;text-shadow:0 2px 12px #0008}
.beta-sidebar-brand span{display:block;margin-top:7px;color:var(--gold-bright);font:11px/1.4 'Marcellus',Georgia,serif;letter-spacing:.17em;text-transform:uppercase}
html.site-design .site-navigation::before{content:none}
html.site-design .site-navigation{padding-top:12px}
html.site-design .topbar>div:first-child{display:none}
html.site-design .topbar{padding:5px 8px;border:0;background:transparent;box-shadow:none;justify-content:flex-end;min-height:0}
html.site-design .topbar-account{min-height:0;padding:0;gap:6px;flex-direction:row;align-items:center;width:100%}
html.site-design .topbar-account .editor-top-actions{margin:0;gap:6px;flex-wrap:wrap}
html.site-design .editor-top-actions .btn-primary{padding:6px 10px;min-height:32px}
html.site-design .section-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500}
html.site-design .beta-campaign-banner{position:relative;inset:auto;align-self:start;justify-self:center;width:146px;min-height:286px;padding:30px 12px 52px;z-index:1}
html.site-design .beta-campaign-banner img{width:104px;height:104px;margin-bottom:20px}
html.site-design .beta-campaign-banner strong{font:500 22px/1.2 'Cormorant Garamond',Georgia,serif;font-variant:small-caps}
@media(min-width:1101px){
  html.site-design .container{grid-template-columns:230px minmax(0,1fr) 146px;column-gap:12px}
  html.site-design .site-navigation{grid-column:1;grid-row:1/3}
  html.site-design .topbar{grid-column:2;grid-row:1}
  html.site-design .site-main{grid-column:2;grid-row:2;padding-right:4px}
  html.site-design .beta-campaign-banner{grid-column:3;grid-row:1/3}
}
@media(max-width:1100px){
  html.site-design .beta-campaign-banner{display:none}
  html.site-design .site-navigation{grid-row:1/3}
  html.site-design .topbar{grid-column:2}
}
@media(max-width:900px){
  html.site-design .topbar-account{flex-direction:row}
  html.site-design .site-navigation{padding:12px 8px 8px}
  .beta-sidebar-brand{width:100%;padding-bottom:12px}
}
.beta-faction-card.is-unaffiliated{grid-column:1/-1}
.connections-change-character{margin:0 18px 12px}
.connections-change-character>button{font:600 15px/1.4 'Cormorant Garamond',Georgia,serif}
.connections-change-character [hidden]{display:none!important}
.connections-change-character .connections-character-picker{margin-top:10px}
.connections-bond-groups{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;padding:10px;min-width:0}
.connections-bond-group{flex:1 1 260px;min-width:0;max-width:100%;border:1px solid color-mix(in srgb,var(--bond-colour) 42%,transparent);border-radius:5px;background:rgba(0,0,0,.08)}
.connections-bond-group>h5{display:flex;justify-content:space-between;gap:12px;margin:0;padding:8px 10px;border-bottom:1px solid color-mix(in srgb,var(--bond-colour) 25%,transparent);color:var(--parchment);font:600 17px/1.2 'Cormorant Garamond',Georgia,serif}
.connections-bond-group>h5 span{font-size:13px;opacity:.7}
.connections-beta-panel .connections-bond-group .eb-cluster-grid{padding:8px;gap:8px}
html.site-design.beta-theme-light .connections-bond-group>h5{color:#493728}
.beta-faction-card .beta-member-list{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.beta-faction-card .beta-member-list button{padding:10px;gap:12px;min-height:90px;font:600 18px/1.2 'Cormorant Garamond',Georgia,serif}
.beta-faction-card .beta-member-list .avatar-sm{width:72px;height:72px;min-width:72px;flex:0 0 72px;object-fit:cover;border-radius:50%}
.beta-faction-card .beta-member-list button>span:last-child{white-space:normal;overflow-wrap:anywhere}
.beta-faction-card header .btn-ghost{margin-top:7px}
.connection-bond-person{flex:0 0 118px;min-width:0;max-width:100%;display:flex;flex-direction:column;align-items:stretch}
.connections-beta-panel .connection-bond-person .eb-cluster-token{flex:none;width:100%}
.connection-edit-bond{padding:4px 2px;font-size:10px;justify-content:center;white-space:normal}
html.site-design .editor-top-actions .btn-primary{min-height:34px;height:34px;min-width:0;padding:8px 14px;font-size:12px;line-height:1;box-sizing:border-box;gap:6px;background:rgba(19,15,20,.92);color:#e5d5b7;border-color:rgba(210,162,80,.42);box-shadow:none}
html.site-design .editor-top-actions .btn-primary:hover{background:rgba(112,73,31,.38)}
html.site-design.beta-theme-light .editor-top-actions .btn-primary{background:linear-gradient(180deg,#f7e6ba,#d3a556);color:#20140c}
@media(max-width:520px){.beta-faction-card .beta-member-list{grid-template-columns:1fr}}


/* One campaign masthead, inside the left navigation. */
html.site-design .site-navigation>.beta-campaign-banner{order:-2;display:flex;position:relative;inset:auto;grid-area:auto;align-self:center;width:min(100%,200px);min-height:280px;aspect-ratio:5/7;padding:26px 15px 48px;margin:0 auto 8px;flex:none;border:0;box-shadow:none}
html.site-design .beta-campaign-banner::before,html.site-design .beta-campaign-banner::after{content:none}
html.site-design .beta-campaign-banner .beta-banner-trim{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#d6ad67;stroke-width:1.6;pointer-events:none}
.beta-banner-trim path+path{stroke:#987444;stroke-width:.8}
html.site-design .beta-campaign-banner small{margin-top:10px;color:#e5c57e;font:10px/1.4 'Marcellus',Georgia,serif;text-transform:uppercase;letter-spacing:.15em}
@media(min-width:1101px){html.site-design .container{grid-template-columns:230px minmax(0,1fr)}}
@media(max-width:900px){html.site-design .site-navigation>.beta-campaign-banner{width:150px;min-height:210px;padding:16px 12px 35px}html.site-design .beta-campaign-banner img{width:64px;height:64px;margin:0 0 8px}html.site-design .beta-campaign-banner strong{font-size:20px}}
/* Small bond groups fill aligned rows; the largest gets the final full row. */
.connections-bond-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:start;gap:10px}
.connections-bond-group{width:100%;min-width:0;box-sizing:border-box}
.connections-bond-group:last-child{grid-column:1/-1}
.connections-beta-panel .connections-bond-group .eb-cluster-grid{display:grid;grid-template-columns:repeat(auto-fill,118px);justify-content:start;align-items:start}
.connection-bond-person{width:118px;max-width:100%}
/* Shared gold controls and faction-coloured section headers. */
html.site-design .beta-library-action,html.site-design .beta-faction-connections .btn-primary{background:rgba(19,15,20,.92);color:#e5d5b7;border:1px solid rgba(210,162,80,.42);box-shadow:none;border-radius:4px;font:600 14px/1.2 'Cormorant Garamond',Georgia,serif}
html.site-design .beta-library-action:hover,html.site-design .beta-faction-connections .btn-primary:hover{background:rgba(112,73,31,.38)}
.beta-faction-card>header{padding:14px;border-bottom:1px solid var(--library-accent);background:linear-gradient(110deg,color-mix(in srgb,var(--library-accent) 30%,transparent),color-mix(in srgb,var(--library-accent) 7%,transparent));box-shadow:inset 3px 0 var(--library-accent)}
html.site-design .beta-faction-connections{border:1px solid rgba(185,132,60,.35);border-radius:5px;background:linear-gradient(145deg,#17121b,#09070c)}
html.site-design .beta-faction-connections .relationship-overview-head{border-bottom:1px solid rgba(185,132,60,.3);background:linear-gradient(110deg,rgba(115,77,34,.18),transparent)}
html.site-design .beta-faction-connections .relationship-overview-scroll{background:transparent}
html.site-design .beta-faction-connections .relationship-faction-region{border-radius:5px;border-color:color-mix(in srgb,var(--faction-region-color) 65%,#9a7740);background:linear-gradient(160deg,color-mix(in srgb,var(--faction-region-color) 14%,#141018),#09070c);box-shadow:inset 0 0 20px #0005}
html.site-design .beta-faction-connections .relationship-faction-region-label{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-variant:small-caps;letter-spacing:.025em;text-transform:none}
html.site-design .beta-faction-connections .relationship-faction-region-watermark{opacity:.06}
html.site-design .beta-faction-connections .relationship-type-filter button{border-radius:4px;font-family:'Cormorant Garamond',Georgia,serif;font-size:14px}
html.site-design.beta-theme-light .beta-faction-connections{background:linear-gradient(145deg,#f3e7cf,#dbc6a4)}
html.site-design.beta-theme-light .beta-faction-connections .relationship-faction-region{background:linear-gradient(160deg,color-mix(in srgb,var(--faction-region-color) 15%,#f3e7cf),#dbc6a4)}
html.site-design.beta-theme-light .beta-library-action,html.site-design.beta-theme-light .beta-faction-connections .btn-primary{background:linear-gradient(180deg,#f7e6ba,#d3a556);color:#20140c}

/* Shared beta actions across public pages, session forms and editor dialogs. */
html.site-design :is(.site-main,.topbar,.modal-panel) .btn-primary:not(.btn-danger){background:rgba(19,15,20,.92);color:#e5d5b7;border:1px solid rgba(210,162,80,.42);border-radius:4px;box-shadow:none;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;letter-spacing:.015em;filter:none}
html.site-design :is(.site-main,.topbar,.modal-panel) .btn-primary:not(.btn-danger):hover:not(:disabled){background:rgba(112,73,31,.38);border-color:#d2a451;filter:none}
html.site-design :is(.site-main,.topbar,.modal-panel) .btn-ghost:not(.btn-danger){font-family:'Cormorant Garamond',Georgia,serif;border-radius:4px}
html.site-design :is(.btn-primary,.btn-ghost):focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
html.site-design .btn-primary:disabled{opacity:.5;cursor:not-allowed}
html.site-design.beta-theme-light :is(.site-main,.topbar,.modal-panel) .btn-primary:not(.btn-danger){background:linear-gradient(180deg,#f0e1c1,#d9c19a);color:#493728;border-color:#a27c43;box-shadow:none}
html.site-design.beta-theme-light :is(.site-main,.topbar,.modal-panel) .btn-primary:not(.btn-danger):hover:not(:disabled){background:linear-gradient(180deg,#f7e6ba,#d3a556);border-color:#8d602b}
html.site-design :is(.btn-save,.btn-delete){font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;border-radius:4px}
html.site-design :is(.btn-save,.btn-delete):focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}

/* Keep the campaign banner and every navigation tab visible in the sidebar. */
@media(min-width:901px){
  html.site-design .site-navigation{
    display:grid!important;
    grid-template-rows:auto minmax(150px,1fr) auto auto;
    align-content:start;
    max-height:calc(100dvh - 20px);
    overflow:hidden;
  }
  html.site-design .site-navigation>.beta-campaign-banner{
    grid-row:1;
    width:min(100%,180px);
    min-height:184px;
    aspect-ratio:auto;
    padding:18px 12px 36px;
    margin-bottom:0;
  }
  html.site-design .site-navigation>.beta-campaign-banner img{
    width:68px;
    height:68px;
    margin:0 0 6px;
  }
  html.site-design .site-navigation>.beta-campaign-banner strong{font-size:19px}
  html.site-design .site-navigation>.beta-campaign-banner small{margin-top:5px;font-size:8px}
  html.site-design .site-navigation>.tabs{
    grid-row:2;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(210,162,80,.55) rgba(8,7,12,.5);
  }
  html.site-design .site-navigation>.global-search{
    grid-row:4;
    order:initial;
    margin:0;
  }
}
@media(max-width:900px){
  html.site-design .site-navigation>.beta-campaign-banner{display:flex}
  html.site-design .site-navigation>.tabs{display:flex!important;visibility:visible;overflow:visible}
}

/* Signed-in tools live with navigation, separated from the page tabs. */
.beta-sidebar-account{
  grid-row:3;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:12px 0 0;
  border-top:1px solid rgba(210,162,80,.34);
}
.beta-sidebar-account::before{
  content:'ACCOUNT';
  color:#bca170;
  font:9px/1 'Marcellus',Georgia,serif;
  letter-spacing:.16em;
}
.beta-sidebar-account .editor-signed-in{
  width:auto;
  margin-bottom:2px;
  overflow:hidden;
  color:var(--slate);
  font-size:10px;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.beta-sidebar-account .btn-primary{
  display:flex;
  width:100%;
  min-width:0;
  min-height:34px;
  height:auto;
  justify-content:flex-start;
  gap:7px;
  padding:7px 9px;
  white-space:normal;
  text-align:left;
}
.beta-sidebar-account .incoming-bonds-alert{position:relative}
.beta-sidebar-account .incoming-bonds-count{
  display:grid;
  place-items:center;
  min-width:19px;
  height:19px;
  margin-left:auto;
  padding:0 4px;
  border-radius:999px;
  background:#36203f;
  color:#efd8ff;
  font:700 10px/1 'Inter',sans-serif;
}
.beta-sidebar-account .incoming-bonds-alert.has-incoming{
  border-color:#bc82ec;
  color:#f1dcff;
  animation:sidebar-incoming-flash 2.4s ease-in-out infinite;
}
@keyframes sidebar-incoming-flash{
  0%,100%{background:rgba(31,19,36,.88);box-shadow:0 0 5px #bc82ec55}
  50%{background:rgba(100,54,119,.62);box-shadow:0 0 20px #bc82eccc,inset 3px 0 #d9a8ff}
}
@media(max-width:900px){
  .beta-sidebar-account{order:1;grid-row:auto;flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));width:100%}
  .beta-sidebar-account::before,.beta-sidebar-account .editor-signed-in{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  .beta-sidebar-account .incoming-bonds-alert.has-incoming{animation:none;box-shadow:0 0 0 2px #bc82ec}
}

/* Compact sidebar: search first, no nested scrollbar, and consistent actions. */
@media(min-width:901px){
  html.site-design .site-navigation{
    display:flex!important;
    flex-direction:column;
    max-height:none;
    padding:8px;
    gap:5px!important;
    overflow:visible;
  }
  html.site-design .site-navigation>.global-search{order:-4;margin:0 0 4px}
  html.site-design .site-navigation>.beta-campaign-banner{
    order:-3;
    width:min(100%,152px);
    min-height:136px;
    padding:12px 10px 28px;
    margin:0 auto 2px;
  }
  html.site-design .site-navigation>.beta-campaign-banner img{width:48px;height:48px;margin:0 0 3px}
  html.site-design .site-navigation>.beta-campaign-banner strong{font-size:17px}
  html.site-design .site-navigation>.beta-campaign-banner small{margin-top:3px;font-size:7px}
  html.site-design .site-navigation>.tabs{
    order:-2;
    flex:none;
    min-height:0;
    gap:1px;
    overflow:visible;
  }
  html.site-design .site-navigation .tab-btn{min-height:31px;padding:5px 9px;font-size:14px}
  html.site-design .site-navigation .tab-btn svg{width:15px;height:15px}
  html.site-design .site-navigation>.beta-sidebar-account{order:-1;grid-row:auto;gap:3px;padding-top:7px}
  .beta-sidebar-account .btn-primary{min-height:29px;padding:5px 8px;font-size:12px}
  .beta-sidebar-account .editor-signed-in{margin:0;font-size:9px}
}

/* Small bond-type groups remain compact. Only a genuinely large final group expands. */
.connections-bond-groups{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),380px));
  justify-content:start;
}
.connections-bond-group:last-child{grid-column:auto}
.connections-bond-group.is-expanded{grid-column:1/-1;max-width:none}

/* Timeline always fits its content column and never creates a nested horizontal scrollbar. */
.tl-layout,.tl-tree,.chrono-tree-scroll,.chrono-tree-wrap{min-width:0;max-width:100%;box-sizing:border-box}
.chrono-tree-scroll,.chrono-tree-wrap{overflow-x:hidden}

/* Readable sidebar with the campaign banner first and search immediately below it. */
@media(min-width:901px){
  html.site-design .site-navigation{gap:7px!important;padding:9px}
  html.site-design .site-navigation>.beta-campaign-banner{
    order:-4;
    isolation:isolate;
    width:min(100%,178px);
    min-height:174px;
    justify-content:center;
    padding:22px 12px 32px;
    overflow:hidden;
    background:linear-gradient(180deg,rgba(25,13,31,.62),rgba(9,7,12,.96));
  }
  html.site-design .site-navigation>.beta-campaign-banner::before{
    content:'';
    position:absolute;
    z-index:1;
    inset:0;
    background:radial-gradient(circle at 50% 42%,transparent 0 24%,rgba(13,8,16,.22) 54%,rgba(7,5,10,.9) 100%);
    pointer-events:none;
  }
  html.site-design .site-navigation>.beta-campaign-banner img{
    position:absolute;
    z-index:0;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    object-fit:contain;
    opacity:.34;
    filter:saturate(.9) drop-shadow(0 0 14px rgba(125,75,154,.55));
  }
  html.site-design .site-navigation>.beta-campaign-banner strong{
    position:relative;
    z-index:2;
    margin-top:34px;
    font-size:23px;
    line-height:1;
    text-align:center;
  }
  html.site-design .site-navigation>.beta-campaign-banner small{position:relative;z-index:2;margin-top:7px;font-size:8px}
  html.site-design .site-navigation>.beta-campaign-banner .beta-banner-trim{z-index:3}
  html.site-design .site-navigation>.global-search{order:-3;margin:0 0 3px}
  html.site-design .site-navigation>.tabs{order:-2;gap:2px}
  html.site-design .site-navigation .tab-btn{min-height:35px;padding:7px 10px;font-size:15.5px}
  html.site-design .site-navigation .tab-btn svg{width:16px;height:16px}
  html.site-design .site-navigation>.beta-sidebar-account{order:-1;gap:3px;padding-top:9px}
  .beta-sidebar-account .btn-primary,
  html.site-design :is(.site-main,.topbar,.modal-panel) .beta-sidebar-account .btn-primary{
    min-height:34px;
    justify-content:flex-start;
    padding:7px 10px;
    border:1px solid transparent;
    border-radius:3px;
    background:transparent;
    box-shadow:none;
    color:#d8cbb4;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:.01em;
    text-transform:none;
  }
  .beta-sidebar-account .btn-primary:hover,
  html.site-design :is(.site-main,.topbar,.modal-panel) .beta-sidebar-account .btn-primary:hover:not(:disabled){
    border-color:rgba(190,139,70,.24);
    background:linear-gradient(90deg,rgba(176,119,46,.16),transparent);
    color:#f5dfb5;
  }
  .beta-sidebar-account .btn-primary svg{width:16px;height:16px;color:#d7c29a}
  .beta-sidebar-account .editor-signed-in{font-size:10px}
  .beta-sidebar-account .incoming-bonds-alert.has-incoming{border-color:#bc82ec;color:#f1dcff}
}

/* Content-sized relationship categories and bond types. */
.connections-beta-panel .connections-cluster-wrap{padding:0 8px 12px}
.connections-cluster-columns{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}
.connections-beta-panel .connections-cluster-columns>.eb-cluster{
  flex:0 1 auto;
  width:max-content;
  max-width:100%;
}
.connections-beta-panel .connections-cluster-columns>.eb-cluster.is-relation-friend{flex:1 1 100%;width:100%}
.connections-bond-groups{display:flex;flex-wrap:wrap;width:max-content;max-width:100%;align-items:flex-start;justify-content:flex-start}
.connections-bond-group{flex:0 1 auto;width:min(100%,calc(var(--bond-columns,1)*126px + 16px));max-width:100%}
.connections-bond-group.is-expanded{flex:1 1 100%;width:100%;max-width:none}

/* Keep the crest below the rails, split the masthead cleanly, and flow bond tiles across each row. */
@media(min-width:901px){
  html.site-design .site-navigation>.beta-campaign-banner img{
    inset:18px 16px 22px;
    width:calc(100% - 32px);
    height:calc(100% - 40px);
  }
  html.site-design .site-navigation>.beta-campaign-banner strong{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:31px;
    line-height:.95;
  }
  html.site-design .beta-banner-the{font-size:15px;letter-spacing:.13em}
  html.site-design .beta-banner-name{font-size:21px;letter-spacing:.035em;white-space:nowrap}

  html.site-design .beta-sidebar-account .btn-primary{
    border:1px solid rgba(139,100,151,.46);
    background:linear-gradient(100deg,rgba(48,29,54,.92),rgba(18,14,23,.98));
    box-shadow:inset 3px 0 rgba(167,121,184,.34);
    color:#d9cde0;
    filter:none;
  }
  html.site-design .beta-sidebar-account .btn-primary:hover:not(:disabled){
    border-color:rgba(190,139,204,.7);
    background:linear-gradient(100deg,rgba(67,39,75,.96),rgba(25,18,30,.98));
    box-shadow:inset 3px 0 rgba(204,151,222,.72),0 0 12px rgba(126,72,145,.18);
    color:#f0e4f5;
    filter:none;
  }
  html.site-design .beta-sidebar-account .incoming-bonds-alert.has-incoming{
    border-color:rgba(188,130,236,.72);
    background:linear-gradient(100deg,rgba(63,34,73,.96),rgba(22,15,28,.98));
  }
}

.connections-beta-panel .connections-cluster-columns>.eb-cluster:is(.is-relation-hostile,.is-relation-other,.is-relation-family,.is-relation-romance){
  flex:1 1 520px;
  width:auto;
}
.connections-bond-groups{width:100%;box-sizing:border-box}
.connections-bond-group{
  width:min(100%,max(190px,calc(var(--bond-columns,1)*126px + 16px)));
  box-sizing:border-box;
}
.connections-bond-group>h5{min-width:0;white-space:nowrap}
.connections-bond-group>h5 span{flex:0 0 auto;margin-left:auto}
.connections-beta-panel .connections-bond-group .eb-cluster-grid{
  grid-template-columns:repeat(var(--bond-columns,1),118px);
}

/* A bond type remains one box; only its cards wrap when the box reaches an edge. */
.connections-beta-panel .connections-cluster-columns>.eb-cluster,
.connections-beta-panel .connections-cluster-columns>.eb-cluster:is(.is-relation-hostile,.is-relation-other,.is-relation-family,.is-relation-romance){
  flex:0 1 auto;
  width:max-content;
  max-width:100%;
}
.connections-beta-panel .connections-cluster-columns>.eb-cluster.is-relation-friend{
  flex:1 1 100%;
  width:100%;
}
.connections-bond-groups{
  width:max-content;
  max-width:100%;
}
.connections-bond-group{
  flex:0 1 auto;
  width:min(100%,max(190px,calc(var(--bond-columns,1)*126px + 16px)));
}
.connections-beta-panel .connections-bond-group .eb-cluster-grid{
  grid-template-columns:repeat(auto-fit,118px);
  max-width:100%;
}

/* Dense option: give Social a real row width, then fill it before wrapping. */
.connections-beta-panel .connections-cluster-columns>.eb-cluster.is-relation-friend{
  flex:0 1 1546px;
  width:min(100%,1546px);
  max-width:100%;
}
.connections-beta-panel .connections-cluster-columns>.eb-cluster.is-relation-friend .connections-bond-groups{
  display:flex;
  width:100%;
  max-width:none;
  flex-wrap:wrap;
  align-items:flex-start;
  align-content:flex-start;
  justify-content:flex-start;
  box-sizing:border-box;
}

/* Edge-aware rows: split a type only when it reaches the row boundary. */
.connections-beta-panel .connections-bond-groups{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:max-content;
  max-width:100%;
}
.connections-bond-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:10px;
  width:max-content;
  max-width:100%;
}
.connections-bond-row .connections-bond-group{
  flex:0 0 auto;
  width:max(190px,calc(var(--bond-columns,1)*126px + 10px));
  max-width:100%;
}
.connections-bond-group.is-continuation>h5::after{
  content:'continued';
  margin-left:7px;
  color:color-mix(in srgb,var(--bond-colour) 72%,var(--parchment));
  font:500 9px/1 'Inter',sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Best-fit the coloured relationship categories as rows, then keep Social last. */
.connections-beta-panel .connections-cluster-columns{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:12px;
  width:100%;
}
.connections-category-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  gap:12px;
  width:max-content;
  max-width:100%;
}
.connections-category-row>.eb-cluster,
.connections-beta-panel .connections-category-row>.eb-cluster{
  flex:0 0 auto;
  width:var(--cluster-width);
  max-width:100%;
}
.connections-category-row.is-social{width:max-content;max-width:100%}
.connections-category-row.is-social>.eb-cluster,
.connections-beta-panel .connections-category-row.is-social>.eb-cluster{width:var(--cluster-width)}

/* The beta account tools live in the sidebar, so do not reserve an empty masthead row. */
html.site-design .topbar{display:none!important}
html.site-design .container{grid-template-rows:minmax(0,1fr)}
html.site-design .site-navigation,
html.site-design .site-main{grid-row:1}

/* Connections selection, compact bond groups, and matching campaign cards. */
.connections-initial-chooser{padding:22px;border-radius:5px;background:linear-gradient(145deg,rgba(22,17,23,.98),rgba(8,7,11,.99))}
.connections-picker-intro{padding:4px 4px 18px;border-bottom:1px solid rgba(184,131,59,.25)}
.connections-picker-intro h3{margin:3px 0 4px;color:var(--parchment);font-size:clamp(28px,3vw,42px)}
.connections-initial-chooser .connections-picker-head{padding:16px 0 12px}
.connection-type-filter{display:flex;align-items:center;gap:7px;color:var(--slate);font-size:11px;white-space:nowrap}
.connection-type-filter select{min-height:42px;padding:8px 30px 8px 10px;border:1px solid rgba(184,131,59,.36);border-radius:4px;background:#0b080e;color:#e5d5b7;font-family:'Cormorant Garamond',Georgia,serif;font-size:14px}
.connections-bond-row .connections-bond-group{
  width:max(var(--bond-title-width,150px),calc(var(--bond-columns,1)*126px + 10px));
}

/* Quick Bonds remains a left-hand tool rail; its choices unfold over the board. */
.eb-editor-panel .eb-workspace{grid-template-columns:minmax(230px,270px) minmax(0,1fr)}
.eb-editor-panel .eb-bond-map{grid-column:2;grid-row:1;min-width:0}
.eb-editor-panel .eb-quick{grid-column:1;grid-row:1}
.eb-editor-panel .eb-quick-flyout{right:auto;left:calc(100% + 13px);transform-origin:left center}
.eb-editor-panel .eb-quick-group:nth-last-child(-n+3)>.eb-quick-flyout{transform-origin:left bottom}
.eb-editor-bond-groups{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;width:max-content;max-width:100%;padding:10px}
.eb-editor-bond-groups .connections-bond-group{flex:0 1 auto;width:min(100%,max(150px,calc(var(--bond-columns,1)*126px + 16px)));border:1px solid color-mix(in srgb,var(--bond-colour) 50%,#3f363d);border-radius:4px;background:rgba(5,5,9,.42)}
.eb-editor-bond-groups .connections-bond-group>h5{display:flex;align-items:center;gap:8px;justify-content:space-between;margin:0;padding:8px 10px;border-bottom:1px solid color-mix(in srgb,var(--bond-colour) 32%,transparent);color:#eee1c8;font:600 16px 'Cormorant Garamond',Georgia,serif;white-space:nowrap}
.eb-editor-bond-groups .connections-bond-group>h5 span{color:var(--bond-colour);font-size:11px}
.eb-editor-bond-groups .eb-cluster-grid{grid-template-columns:repeat(auto-fill,118px);padding:7px}

/* Editor categories shrink to their actual groups; large groups use the
   available row and wrap their portraits instead of leaving tall voids. */
.eb-editor-panel .eb-clusters{display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:10px}
.eb-editor-panel .eb-cluster,
.eb-editor-panel .eb-cluster.is-relation-friend,
.eb-editor-panel .eb-cluster.is-relation-hostile{grid-column:auto;flex:0 1 auto;width:min(100%,calc(var(--cluster-columns,1)*126px + 30px));max-width:100%;min-width:0}
.eb-editor-panel .eb-editor-bond-groups{width:100%;max-width:100%;box-sizing:border-box}
.eb-editor-panel .eb-cluster.is-relation-unconnected{flex:1 1 100%;width:100%}
.eb-editor-panel .eb-cluster.is-relation-unconnected .connections-bond-group{width:100%}

/* Full connection names wrap to a second line instead of being cut off. */
.connections-beta-panel .eb-cluster-name{height:auto;min-height:32px;overflow:visible;line-height:1.05;text-overflow:clip;white-space:normal}
.connections-beta-panel .eb-cluster-token{grid-template-rows:auto minmax(32px,auto) auto auto}

/* The relationship faction map uses the same colour-banner language as Factions. */
html.site-design .beta-faction-connections .relationship-faction-region{overflow:hidden;border-width:1px;background:linear-gradient(160deg,color-mix(in srgb,var(--faction-region-color) 12%,#141018),#08070b 72%)}
html.site-design .beta-faction-connections .relationship-faction-region::before{content:"";position:absolute;inset:0 0 auto;height:47px;border-bottom:1px solid color-mix(in srgb,var(--faction-region-color) 72%,#9a7740);background:linear-gradient(110deg,color-mix(in srgb,var(--faction-region-color) 32%,transparent),color-mix(in srgb,var(--faction-region-color) 6%,transparent));box-shadow:inset 4px 0 var(--faction-region-color)}
html.site-design .beta-faction-connections .relationship-faction-region::after{inset:47px 12px 12px;border-top:0}
html.site-design .beta-faction-connections .relationship-faction-region-label{top:12px;left:18px;width:calc(100% - 82px);transform:none;text-align:left;color:color-mix(in srgb,var(--faction-region-color) 55%,#fff0d0);font-size:20px}
html.site-design .beta-faction-connections .relationship-faction-region-count{top:11px;color:#f1dfbd}
html.site-design .beta-faction-connections .relationship-overview-token{filter:drop-shadow(0 7px 10px #0008)}
html.site-design .beta-faction-connections .relationship-overview-token{width:110px}
html.site-design .beta-faction-connections .relationship-overview-token .relationship-overview-avatar{width:68px;height:68px}
html.site-design .beta-faction-connections .relationship-overview-name{padding:3px 8px;border:1px solid color-mix(in srgb,var(--faction-region-color,#9a7740) 30%,rgba(184,131,59,.32));border-radius:3px;background:rgba(7,5,10,.9);color:#eadcc3;font-family:'Cormorant Garamond',Georgia,serif;font-size:13px}
html.site-design .beta-faction-connections .relationship-overview-name{top:74px;width:118px;max-width:118px}

/* Session participants read like the site's other character nameplates. */
.session-card .chips{gap:8px}
.session-nameplate{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:8px;min-width:150px;max-width:230px;padding:5px 10px 5px 5px;border:1px solid rgba(184,131,59,.34);border-radius:4px;background:linear-gradient(110deg,rgba(97,65,31,.19),rgba(9,7,11,.78));box-shadow:inset 3px 0 rgba(210,162,80,.34)}
.session-nameplate.is-side{border-color:rgba(127,117,155,.42);background:linear-gradient(110deg,rgba(55,47,73,.25),rgba(9,7,11,.8));box-shadow:inset 3px 0 rgba(139,127,171,.38)}
.session-nameplate .avatar-lg-chip{width:30px;height:30px;margin:0;border-radius:50%;border-color:#c99a45}
.session-nameplate-copy{display:flex;min-width:0;flex-direction:column;text-align:left}
.session-nameplate-copy strong{overflow:hidden;color:#f0e2c7;font:600 14px/1.15 'Cormorant Garamond',Georgia,serif;text-overflow:ellipsis;white-space:nowrap}
.session-nameplate-copy small{overflow:hidden;color:#a99d8b;font:500 9px/1.25 'Inter',sans-serif;letter-spacing:.04em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
.session-nameplate:is(button){appearance:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.session-nameplate.is-npc{border-color:rgba(112,164,158,.48);background:linear-gradient(110deg,rgba(35,77,73,.28),rgba(9,7,11,.8));box-shadow:inset 3px 0 rgba(105,180,170,.42)}
.session-nameplate.is-npc:hover{border-color:rgba(135,205,195,.78);background:linear-gradient(110deg,rgba(43,98,91,.38),rgba(13,9,15,.84))}
.session-card{position:relative}
.session-card.has-verification{padding-right:118px}
.session-card>.session-card-verified{position:absolute;top:14px;right:14px}
.session-detail-actions{display:flex;align-items:center;gap:9px;margin-left:14px}
.session-detail-heading>span:first-child{min-width:0;overflow-wrap:anywhere}

@media(max-width:900px){
  .eb-editor-panel .eb-workspace{grid-template-columns:1fr}
  .eb-editor-panel .eb-bond-map,.eb-editor-panel .eb-quick{grid-column:1;grid-row:auto}
  .eb-editor-panel .eb-quick{order:-1}
  .eb-editor-panel .eb-quick-flyout,.eb-editor-panel .eb-quick-group:nth-last-child(-n+3)>.eb-quick-flyout{right:auto;left:auto;transform-origin:top center}
}
@media(max-width:520px){.session-card.has-verification{padding-right:16px;padding-top:52px}.session-card>.session-card-verified{top:12px}.session-detail-heading{gap:8px}.session-detail-actions{margin-left:4px}}
/* Cormyr atlas: coordinates are relative to the uncropped source image. */
.cormyr-atlas{grid-column:1/-1;min-width:0;color:var(--parchment,#eee1c8)}
.atlas-title{text-align:center;padding:20px 12px 26px;background:radial-gradient(ellipse at center,rgba(126,88,147,.16),transparent 70%)}
.atlas-title h3{font:600 clamp(42px,5vw,76px)/1.1 'Cormorant Garamond',Georgia,serif;color:#ecd697;letter-spacing:.07em;margin:5px 0;text-shadow:0 2px 22px #b4823233}
.atlas-title p{color:#c0ad8e;margin:8px 0;font:17px Georgia,serif}
.atlas-title-rule{display:flex;align-items:center;justify-content:center;gap:15px;color:#b88d40;margin:18px auto 0;max-width:420px}
.atlas-title-rule:before,.atlas-title-rule:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#b88d40)}
.atlas-title-rule:after{transform:rotate(180deg)}
.atlas-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}
.atlas-key{border:1px solid #8b683a;padding:20px;background:linear-gradient(145deg,#251c2b,#100d15);border-radius:5px;box-shadow:inset 0 0 0 4px #08060b,0 8px 22px #0005}
.atlas-key h4{font:600 27px Georgia,serif;color:#ead6a7;margin:8px 0 18px}
.atlas-key ul{list-style:none;margin:0;padding:0 0 15px;border-bottom:1px solid #705930}
.atlas-key li{display:flex;align-items:center;gap:12px;margin:12px 0;font-size:14px}
.atlas-key-symbol{display:inline-grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border:1px solid #e2bc69;border-radius:50%;background:#30203d;color:#f6df9d;font-size:15px}
.atlas-key-symbol.is-capital{color:#fff0ad;background:#68491d}.atlas-key-symbol.is-town{background:#352b26;font-size:10px}
.atlas-key-symbol.has-npcs{box-shadow:0 0 0 3px #78d7b7;color:#78d7b7}
.atlas-key p{font-size:14px;line-height:1.55;color:#c9bdab;margin:16px 0}.atlas-key .atlas-key-count{color:#ead6a7}
.atlas-key .btn-ghost{display:block;text-align:center;white-space:normal;text-decoration:none;margin:16px 0}
.atlas-key small{display:block;line-height:1.5;color:#afa498}
.atlas-map-scroll{min-width:0;overflow:auto;padding:12px 12px 18px;outline-offset:-3px}
.atlas-frame{position:relative;min-width:740px;padding:10px;border:2px solid #c5a153;border-radius:4px;background:linear-gradient(135deg,#2b1b36,#89673b 48%,#201626);box-shadow:0 12px 32px #0009,inset 0 0 0 3px #100b13,0 0 0 4px #9f7a3938}
.atlas-frame:before,.atlas-frame:after{content:'◆';position:absolute;z-index:2;pointer-events:none;color:#f1d78e;font-size:22px;line-height:22px;text-shadow:0 0 5px #140d19;top:-12px;left:-12px}
.atlas-frame:after{top:auto;left:auto;bottom:-12px;right:-12px}
.atlas-map-canvas{position:relative;border:1px solid #dbc385;isolation:isolate}
.atlas-map-image{display:block;width:100%;height:auto;aspect-ratio:1662/1126;object-fit:contain}
.atlas-pin{position:absolute;transform:translate(-50%,-50%);z-index:2}
.atlas-pin:hover,.atlas-pin:focus-within{z-index:20}
.atlas-pin-trigger{display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid #f4d585;border-radius:50%;background:linear-gradient(145deg,#513263,#1f142c);color:#ffe6a7;box-shadow:0 2px 5px #000a,0 0 0 2px #231a2b99;cursor:pointer;font-size:15px;line-height:1;transition:box-shadow .15s,background .15s}
.atlas-pin.is-capital .atlas-pin-trigger{width:32px;height:32px;background:linear-gradient(145deg,#97692d,#412415);font-size:23px}
.atlas-pin.is-town .atlas-pin-trigger{width:22px;height:22px;background:#342721;font-size:9px}
.atlas-pin.has-npcs .atlas-pin-trigger{box-shadow:0 2px 6px #000a,0 0 0 3px #67cca7}
.atlas-pin-trigger:focus-visible{outline:3px solid #fff;outline-offset:4px}
.atlas-city-popup{display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:290px;box-sizing:border-box;border:1px solid #c6a15e;border-radius:6px;background:linear-gradient(145deg,#261e2b,#0f0c15);color:#eee1c8;box-shadow:0 12px 28px #000b;text-align:left}
.atlas-city-popup:before{content:'';position:absolute;bottom:100%;height:12px;left:0;right:0}
.atlas-pin.align-left .atlas-city-popup{left:-10px;transform:none}.atlas-pin.align-right .atlas-city-popup{left:auto;right:-10px;transform:none}
.atlas-pin.popup-above .atlas-city-popup{top:auto;bottom:calc(100% + 10px)}
.atlas-pin.popup-above .atlas-city-popup:before{bottom:auto;top:100%}
.atlas-pin:hover .atlas-city-popup,.atlas-pin:focus-within .atlas-city-popup{display:block}
.atlas-city-popup header{padding:14px 16px 12px;border-bottom:1px solid #74603b}
.atlas-city-popup h4{font:600 25px Georgia,serif;color:#f3d896;margin:5px 0}.atlas-city-popup small{color:#c3b6a7}
.atlas-npc-list{display:grid;gap:4px;padding:8px;max-height:180px;overflow-y:auto}
.atlas-npc-list button{display:flex;align-items:center;gap:10px;padding:8px;text-align:left;color:#eee1c8;border:1px solid transparent;border-radius:4px;background:transparent;font:600 16px/1.25 'Cormorant Garamond',Georgia,serif;cursor:pointer;width:100%}
.atlas-npc-list button:hover,.atlas-npc-list button:focus-visible{background:#a98b4022;border-color:#a98b40}
.atlas-npc-list .avatar{flex:0 0 40px;width:40px;height:40px;border-radius:50%;object-fit:cover}.atlas-npc-list span{white-space:normal;overflow-wrap:anywhere}
.atlas-no-npcs{padding:14px 16px;margin:0;font-size:14px;line-height:1.5;color:#c3b6a7}
@media(max-width:1100px){.atlas-layout{grid-template-columns:1fr}.atlas-key ul{display:flex;gap:12px 24px;flex-wrap:wrap}.atlas-key li{margin:4px 0}.atlas-key{padding:16px}.atlas-key h4{margin:6px 0 12px}.atlas-key p{margin:10px 0}.atlas-title{padding-top:8px}}
@media(prefers-reduced-motion:reduce){.atlas-pin-trigger{transition:none}}

.atlas-pin.is-dismissed .atlas-city-popup{display:none}


/* Map editing and contextual shortcuts. */
.atlas-place-actions,.connections-character-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.atlas-place-actions{justify-content:flex-end}
.atlas-place-actions>strong{color:var(--gold-bright);font:600 27px 'Cormorant Garamond',Georgia,serif}
#editor-connections{scroll-margin-top:24px}
.atlas-edit-tools{padding-bottom:16px;border-bottom:1px solid #705930;margin-bottom:16px}
.atlas-edit-tools button{max-width:100%;white-space:normal}
.atlas-marker-form{display:grid;gap:10px;margin-top:14px}
.atlas-marker-form label{display:grid;gap:5px;font-size:13px}
.atlas-marker-form input,.atlas-marker-form select{width:100%;min-width:0;box-sizing:border-box}
.atlas-marker-coordinates{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.atlas-map-canvas.is-editing{cursor:crosshair;outline:3px dashed #78d7b7;outline-offset:2px}
.atlas-map-canvas.is-editing .atlas-city-popup{display:none}
.atlas-map-canvas.is-editing .atlas-pin-trigger{cursor:move}

.atlas-draft-pin{position:absolute;left:0;top:0;transform:translate(-50%,-50%);z-index:30;display:grid;place-items:center;width:32px;height:32px;border:2px dashed #fff;background:#194b40;color:#fff;border-radius:50%;pointer-events:none;box-shadow:0 0 0 4px #78d7b788}

.editor-character-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px;padding:8px;border:1px solid var(--border);border-radius:6px;background:var(--card-bg)}
.editor-character-tabs .sort-btn{padding:10px 20px;font-size:16px}
.bond-character-reminder{position:fixed;z-index:10020;width:290px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto;box-sizing:border-box;padding:16px;border:1px solid #bd9853;border-radius:8px;background:linear-gradient(145deg,#2b2134,#110e19);color:#eee1cd;box-shadow:0 12px 32px #0009;text-align:left}
.bond-reminder-heading{display:flex;gap:12px;align-items:center}
.bond-reminder-heading .avatar{width:64px;height:80px;flex:0 0 64px;border-radius:5px;object-fit:cover}
.bond-reminder-heading h4{margin:4px 0;font:600 23px/1.1 'Cormorant Garamond',Georgia,serif;color:#f0d9a7;overflow-wrap:anywhere}
.bond-reminder-heading small{color:#cfbfac}
.bond-character-reminder p{font-size:13px;line-height:1.45;margin:10px 0 0;overflow-wrap:anywhere}
.bond-reminder-summary{padding-top:10px;border-top:1px solid #765b3a}


/* Explicit half-hour boundaries and consistent roster character nameplates. */
.availability-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;font-variant-numeric:tabular-nums;line-height:1.2}
.availability-slot-start,.availability-slot-end{display:block;font-size:10px;white-space:nowrap}
.availability-slot-end{opacity:.85}
.player-profile-character-list{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.player-profile-character-list .session-nameplate{flex:0 1 230px;min-width:0;max-width:100%;width:230px;box-sizing:border-box}
.session-nameplate:focus-visible,[data-character-preview]:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
@media(max-width:600px){.availability-hour-grid,.editor-inline-availability .availability-hour-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* Framed character filters and matching editor section headings. */
.roster-filter-controls{position:relative;padding:22px 24px;border:1px solid rgba(184,131,59,.45);border-radius:7px;background:linear-gradient(125deg,rgba(73,47,82,.2),rgba(13,10,20,.88));box-shadow:inset 0 0 0 4px rgba(184,131,59,.06),0 8px 22px rgba(0,0,0,.18)}
.roster-filter-controls:before,.roster-filter-controls:after{content:'◆';position:absolute;top:-8px;color:var(--gold);font-size:12px;line-height:14px;pointer-events:none}
.roster-filter-controls:before{left:14px}.roster-filter-controls:after{right:14px}
.roster-filter-controls label{min-width:min(200px,100%);color:var(--parchment);font-weight:600}
.roster-filter-controls input,.roster-filter-controls select{box-sizing:border-box;min-width:0}
.editor-section-title{padding:24px 26px;margin:0 0 18px;background:linear-gradient(120deg,rgba(75,43,84,.16),transparent);border-bottom:1px solid rgba(184,131,59,.25)}
.editor-section-title h3{margin:10px 0 14px;color:var(--parchment);font:600 clamp(31px,3vw,47px)/1.15 'Cormorant Garamond',Georgia,serif}
.editor-section-title p{margin:0;max-width:900px;line-height:1.6}
.editor-section-title .kicker{display:flex;align-items:center;gap:12px;color:var(--gold)}
.editor-section-title .kicker:after{content:'';display:block;width:100px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.editor-character-savebar .editor-savebar-name{color:var(--parchment);font:600 clamp(23px,2.4vw,34px)/1.15 'Cormorant Garamond',Georgia,serif;min-width:0;white-space:normal;overflow-wrap:anywhere}
@media(max-width:600px){.roster-filter-controls{padding:18px 16px}.editor-section-title{padding:20px 16px}.editor-character-savebar .editor-savebar-name{white-space:normal}}

/* Fit desktop navigation to the available browser height, including zoom. */
@media(min-width:901px){
  html.site-design .site-navigation{
    max-height:calc(100vh - 20px);
    max-height:calc(100dvh - 20px);
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(210,162,80,.65) rgba(8,7,12,.5);
    scroll-padding-block:10px;
  }
  html.site-design .site-navigation> *{flex-shrink:0}
}
@media(min-width:901px) and (max-height:850px){
  html.site-design .site-navigation{padding:8px;gap:4px!important}
  html.site-design .site-navigation>.beta-campaign-banner{
    width:min(100%,148px);min-height:116px;padding:10px 10px 23px;
  }
  html.site-design .site-navigation>.beta-campaign-banner strong{margin-top:12px}
  html.site-design .site-navigation .beta-banner-the{font-size:12px}
  html.site-design .site-navigation .beta-banner-name{font-size:18px}
  html.site-design .site-navigation>.beta-campaign-banner small{margin-top:4px;font-size:7px}
  html.site-design .site-navigation>.global-search{margin-bottom:2px}
  html.site-design .site-navigation .global-search-box{min-height:36px}
  html.site-design .site-navigation>.tabs{gap:1px}
  html.site-design .site-navigation .tab-btn{min-height:30px;padding:4px 9px;font-size:14px}
  html.site-design .site-navigation>.beta-sidebar-account{padding-top:6px;gap:3px}
  html.site-design .site-navigation .beta-sidebar-account .btn-primary{min-height:30px;padding:4px 9px;font-size:14px}
}
@media(min-width:901px) and (max-height:680px){
  html.site-design .site-navigation{gap:3px!important}
  html.site-design .site-navigation>.beta-campaign-banner{min-height:72px;padding:7px 10px 17px}
  html.site-design .site-navigation>.beta-campaign-banner strong{margin-top:0}
  html.site-design .site-navigation>.beta-campaign-banner small{display:none}
  html.site-design .site-navigation .beta-banner-the{font-size:10px}
  html.site-design .site-navigation .beta-banner-name{font-size:16px}
  html.site-design .site-navigation .tab-btn{min-height:28px;padding-block:3px}
}

[data-editor-roster-card][hidden],[data-editor-roster-results][hidden],[data-editor-roster-empty][hidden]{display:none!important}

/* Let the filter's gold corner ornaments clear the card above. */
.roster-filter-controls{margin-top:12px;overflow:visible;isolation:isolate}
.roster-filter-controls:before,.roster-filter-controls:after{z-index:2}
html.site-design .site-navigation .beta-banner-the{font-size:19px}
@media(min-width:901px) and (max-height:850px){html.site-design .site-navigation .beta-banner-the{font-size:16px}}
@media(min-width:901px) and (max-height:680px){html.site-design .site-navigation .beta-banner-the{font-size:13px}}

:is(.session-nameplate,.editor-character-card,.connections-picker-token,.beta-member-list>button,.beta-place-people button,.eb-cluster-token){position:relative;isolation:isolate;--character-flame:#e8c65a}
:is(.session-nameplate,.editor-character-card,.connections-picker-token,.beta-member-list>button,.beta-place-people button,.eb-cluster-token).is-side{--character-flame:#d9dfef}
:is(.session-nameplate,.editor-character-card,.connections-picker-token,.beta-member-list>button,.beta-place-people button,.eb-cluster-token).is-npc{--character-flame:#d4984e}
@media(hover:hover) and (pointer:fine){
    :is(.session-nameplate,.editor-character-card,.connections-picker-token,.beta-member-list>button,.beta-place-people button,.eb-cluster-token)::before{
      content:'';position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;padding:3px;
      border-radius:inherit;
      background:conic-gradient(from var(--character-trail-angle),
        transparent 0 20%,
        color-mix(in srgb,var(--character-flame-tail,var(--character-flame)) 20%,transparent) 26%,
        var(--character-flame-tail,var(--character-flame)) 35%,
        var(--character-flame-head,var(--character-flame)) 45%,
        #fff8dc 48%,transparent 50%,
        transparent 50% 70%,
        color-mix(in srgb,var(--character-flame-tail,var(--character-flame)) 20%,transparent) 76%,
        var(--character-flame-tail,var(--character-flame)) 85%,
        var(--character-flame-head,var(--character-flame)) 95%,
        #fff8dc 98%,transparent 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      mask-composite:exclude;
      filter:drop-shadow(0 0 4px color-mix(in srgb,var(--character-flame-head,var(--character-flame)) 52%,transparent));
      animation:character-art-trail 6.8s linear infinite;
      animation-play-state:paused;
      transition:opacity .38s ease;will-change:opacity;
    }
    :is(.session-nameplate,.editor-character-card,.connections-picker-token,.beta-member-list>button,.beta-place-people button,.eb-cluster-token):hover::before,:is(.session-nameplate,.editor-character-card,.connections-picker-token,.beta-member-list>button,.beta-place-people button,.eb-cluster-token):focus-visible::before{opacity:.94;animation-play-state:running}
    :is(.session-nameplate,.editor-character-card,.connections-picker-token,.beta-member-list>button,.beta-place-people button,.eb-cluster-token):hover{
      box-shadow:0 0 8px color-mix(in srgb,var(--character-flame) 24%,transparent);
    }
}
@media(prefers-reduced-motion:reduce){:is(.session-nameplate,.editor-character-card,.connections-picker-token,.beta-member-list>button,.beta-place-people button,.eb-cluster-token)::before{animation:none!important;transition:none}}

/* Long character names and custom bond labels must stay inside their tiles. */
.connections-bond-group>h5,
.eb-editor-bond-groups .connections-bond-group>h5{
  white-space:normal;overflow-wrap:anywhere;word-break:normal;
  align-items:flex-start;line-height:1.2;max-width:100%;box-sizing:border-box;
}
.connections-bond-group>h5 span{flex-shrink:0;white-space:nowrap}
.eb-cluster-name,
.connections-beta-panel .eb-cluster-name,
.eb-cluster-relation{
  min-width:0;max-width:100%;height:auto;box-sizing:border-box;
  white-space:normal;overflow-wrap:anywhere;word-break:normal;
  text-overflow:clip;line-height:1.2;
}
.eb-cluster-token{max-width:100%;box-sizing:border-box}


/* Phones use a flowing timeline so long titles never collide with the next session. */
.chrono-mobile-arc{display:none}
@media(max-width:900px){
  .chrono-tree-scroll .chrono-tree-wrap{display:flex;flex-direction:column;gap:16px;height:auto!important;padding:0 0 0 22px;overflow:visible}
  .chrono-tree-wrap::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:2px;background:var(--gold)}
  .chrono-tree-wrap>.chrono-tree-card{position:relative;inset:auto!important;width:100%!important;max-width:100%;transform:none;text-align:left!important;padding:12px;min-width:0;overflow-wrap:anywhere}
  .chrono-tree-card::before{content:'';position:absolute;left:-21px;top:19px;width:8px;height:8px;border:2px solid var(--gold-bright);border-radius:50%;background:var(--ink-deep)}
  .chrono-tree-card>.row{justify-content:flex-start!important}
  .chrono-tree-card .chrono-mobile-arc{display:block;margin:4px 0;color:var(--gold-bright)}
  .chrono-tree-wrap>.chrono-tree-svg,.chrono-tree-wrap>.chrono-period-marker,.chrono-tree-wrap>.chrono-arc-boundary{display:none}
  .chrono-tree-wrap>.chrono-today-label,.chrono-tree-wrap>.chrono-start-marker{position:relative;inset:auto!important;transform:none;align-self:flex-start;max-width:100%}
  .chrono-tree-wrap>.chrono-today-label{order:-2147483647}
  .chrono-tree-wrap>.chrono-start-marker{order:1;margin-top:8px;text-align:left}
  .chrono-start-marker .chrono-start-dot{display:none}
  .tl-rail .tl-jump .sort-btn{max-width:100%;white-space:normal;overflow-wrap:anywhere}

  /* Match the desktop crest-backed masthead and account controls. */
  html.site-design .site-navigation>.beta-campaign-banner{isolation:isolate;width:178px;min-height:174px;aspect-ratio:auto;justify-content:center;padding:22px 12px 32px;overflow:hidden;background:linear-gradient(180deg,rgba(25,13,31,.62),rgba(9,7,12,.96))}
  html.site-design .site-navigation>.beta-campaign-banner::before{content:'';position:absolute;z-index:1;inset:0;background:radial-gradient(circle at 50% 42%,transparent 0 24%,rgba(13,8,16,.22) 54%,rgba(7,5,10,.9) 100%);pointer-events:none}
  html.site-design .site-navigation>.beta-campaign-banner img{position:absolute;z-index:0;inset:18px 16px 22px;width:calc(100% - 32px);height:calc(100% - 40px);margin:0;object-fit:contain;opacity:.34;filter:saturate(.9) drop-shadow(0 0 14px rgba(125,75,154,.55))}
  html.site-design .site-navigation>.beta-campaign-banner strong{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;margin-top:31px;line-height:.95;text-align:center}
  html.site-design .site-navigation .beta-banner-the{font-size:19px;letter-spacing:.13em}
  html.site-design .site-navigation .beta-banner-name{font-size:21px;letter-spacing:.035em;white-space:nowrap}
  html.site-design .site-navigation>.beta-campaign-banner small{position:relative;z-index:2;margin-top:7px;font-size:8px}
  html.site-design .site-navigation>.beta-campaign-banner .beta-banner-trim{z-index:3}
  html.site-design .beta-sidebar-account .btn-primary{min-height:44px;justify-content:flex-start;padding:7px 10px;border:1px solid rgba(139,100,151,.46);border-radius:3px;background:linear-gradient(100deg,rgba(48,29,54,.92),rgba(18,14,23,.98));box-shadow:inset 3px 0 rgba(167,121,184,.34);color:#d9cde0;font-family:'Cormorant Garamond',Georgia,serif;font-size:14px;font-weight:600;letter-spacing:.01em;text-transform:none;filter:none}
  html.site-design .beta-sidebar-account .btn-primary:hover:not(:disabled){border-color:rgba(190,139,204,.7);background:linear-gradient(100deg,rgba(67,39,75,.96),rgba(25,18,30,.98));color:#f0e4f5}
  html.site-design .beta-sidebar-account .btn-primary svg{width:16px;height:16px;color:#d7c29a}
}

/* Rexen's separate lore workspace; all selectors are scoped to the beta page. */
.lore-beta{--border:rgba(185,132,60,.35);min-width:0}
.lore-beta-note{display:flex;align-items:center;gap:18px;padding:12px 16px;margin:12px 0;background:#281e32;border:1px solid #695075;border-radius:5px;font-size:12px;color:#dacbe4}
.lore-beta-note>span{flex:none;color:#e0bd79;letter-spacing:.06em}
.lore-beta-note p{margin:0;line-height:1.5}
.lore-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:18px 0;border:1px solid var(--border);border-radius:5px;overflow:hidden}
.lore-tabs button{background:#100d16;color:var(--parchment-dim);border:0;border-right:1px solid var(--border);padding:17px 10px;font-family:inherit;font-size:14px;cursor:pointer;min-height:48px}
.lore-tabs button[aria-pressed=true]{background:linear-gradient(110deg,#33223f,#1b1424);box-shadow:inset 0 -2px var(--gold);color:var(--parchment)}
.lore-tabs button:disabled{cursor:default;opacity:.6}
.lore-filters{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(120px,1fr));gap:14px;align-items:end;padding:16px;border:1px solid var(--border);border-radius:5px;margin-bottom:20px;background:var(--ink-panel)}
.lore-filters label,.lore-form label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--parchment-dim);min-width:0}
.lore-filters input,.lore-filters select,.lore-form input,.lore-form select,.lore-form textarea{box-sizing:border-box;width:100%;min-width:0;max-width:100%;padding:10px 12px;min-height:42px;border:1px solid var(--border);border-radius:4px;background:#09070d;color:var(--parchment);font:13px/1.5 Inter,sans-serif}
.lore-filters>div{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.lore-columns{display:grid;grid-template-columns:minmax(240px,.9fr) minmax(0,1.6fr);gap:18px;align-items:start}
.lore-list,.lore-detail,.lore-form{border:1px solid var(--border);border-radius:5px;background:linear-gradient(130deg,#17111c,#09070d);min-width:0}
.lore-list{padding:12px}
.lore-list header{display:flex;justify-content:space-between;gap:8px;padding:4px 3px 13px;color:var(--slate);font-size:12px}
.lore-entry{width:100%;display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:10px;text-align:left;border:1px solid var(--border);border-radius:5px;background:transparent;color:var(--parchment);cursor:pointer;box-sizing:border-box;min-width:0}
.lore-entry[hidden]{display:none}
.lore-entry:hover,.lore-entry.is-selected{border-color:var(--gold);background:linear-gradient(110deg,#25182d,#100d15)}
.lore-entry>span{display:flex;flex-direction:column;min-width:0;gap:5px}
.lore-entry strong{font:600 21px/1.1 'Cormorant Garamond',Georgia,serif;overflow-wrap:anywhere}
.lore-entry small{font-size:10px;color:#d4b880}
.lore-entry>span>span{font:11px/1.5 Inter,sans-serif;color:var(--slate);overflow-wrap:anywhere}
.lore-thumb{width:70px;height:82px;flex:0 0 70px;object-fit:cover;border:1px solid #6d563c;border-radius:4px}
.lore-art-placeholder{display:grid;place-items:center;background:radial-gradient(ellipse at center,#36273f,#110c17)}
.lore-detail{padding:24px;overflow-wrap:anywhere}
.lore-detail-top{display:grid;grid-template-columns:minmax(100px,180px) minmax(0,1fr);gap:22px;align-items:start}
.lore-artwork{width:100%;aspect-ratio:4/5;object-fit:cover;max-height:260px;border:1px solid #6d563c;border-radius:4px}
.lore-detail h3,.lore-form h3{font:600 clamp(28px,3vw,38px)/1.15 'Cormorant Garamond',Georgia,serif;margin:12px 0}
.lore-detail p{font-size:13px;line-height:1.7;color:var(--parchment-dim)}
.lore-detail h4{font:600 25px 'Cormorant Garamond',Georgia,serif;margin:20px 0 12px}
.lore-prose{white-space:pre-wrap}
.lore-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0;padding:22px 0;border-block:1px solid var(--border)}
.lore-facts dt{color:var(--slate);font-size:11px;margin-bottom:6px}
.lore-facts dd{margin:0;font-size:13px;line-height:1.6;white-space:pre-wrap}
.lore-related{display:flex;flex-wrap:wrap;gap:12px}
.lore-related>div{padding:10px;border:1px solid var(--border);border-radius:4px;max-width:100%;box-sizing:border-box}
.lore-related small{display:block;color:var(--slate);font-size:10px;margin:0 0 7px}
.lore-form{padding:24px}
.lore-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0}
.lore-form .lore-wide{grid-column:1/-1}
.lore-form textarea{resize:vertical}
.lore-form small{font-size:11px;color:var(--slate)}
.lore-form summary{cursor:pointer;padding:15px 0;border-top:1px solid var(--border);color:var(--gold-bright)}
.lore-save{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}
.lore-save strong{display:block;font:600 26px 'Cormorant Garamond',Georgia,serif;overflow-wrap:anywhere}
.lore-save small{display:block;margin-top:4px}
.lore-notice{padding:12px 16px;background:#251b2e;border:1px solid #8e7150;border-radius:5px;line-height:1.6;overflow-wrap:anywhere}
.lore-beta .btn-ghost{min-height:38px;white-space:normal;overflow-wrap:anywhere}
@media(max-width:1100px){.lore-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.lore-filters>div{grid-column:1/-1}.lore-detail-top{grid-template-columns:110px minmax(0,1fr)}}
@media(max-width:700px){.lore-columns{grid-template-columns:1fr}.lore-beta-note{align-items:flex-start;flex-direction:column;gap:6px}.lore-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.lore-tabs button{border-bottom:1px solid var(--border)}.lore-filters{grid-template-columns:1fr}.lore-detail,.lore-form{padding:16px}.lore-form-grid{grid-template-columns:1fr}.lore-save{align-items:flex-start;flex-direction:column}.lore-save button{width:100%;min-height:44px}.lore-form .row-between{flex-wrap:wrap}.lore-detail-top{gap:14px}.lore-facts{gap:12px}.lore-list{max-height:420px;overflow-y:auto}}

/* Use every colour from the master faction banner, keeping labels legible. */
.beta-faction-card>header{background:linear-gradient(rgba(10,8,16,.32),rgba(10,8,16,.32)),var(--library-gradient);box-shadow:none;border-radius:4px}
.beta-faction-card>header h3,.beta-faction-card>header .kicker,.beta-faction-card>header>strong{color:#fff8e8;text-shadow:0 1px 3px #000,0 0 7px #000}
.beta-faction-card>header>div{min-width:0}
.beta-faction-card>header h3{overflow-wrap:anywhere}

.faction-directory-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:20px;padding:16px 20px}
.faction-sort-label{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--parchment);font-size:13px}
.faction-sort-label select{min-width:190px;max-width:100%;min-height:40px}
.faction-unaffiliated-toggle{display:flex;align-items:center;gap:10px;min-height:40px;color:var(--parchment);font-size:13px;cursor:pointer}

/* Shared checkbox treatment for public pages, dialogs and the editor. */
html input[type="checkbox"],html.site-design input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;box-sizing:border-box;display:inline-block;
  width:20px;height:20px;min-width:20px;max-width:20px;min-height:20px;max-height:20px;
  flex:0 0 20px;padding:0;margin:0 8px 0 0;vertical-align:middle;
  border:1px solid #a27b3e;border-radius:4px;
  background-color:#17111f;background-image:none;background-position:center;background-repeat:no-repeat;background-size:16px 16px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease;
}
html input[type="checkbox"]:checked,html.site-design input[type="checkbox"]:checked{
  border-color:#e8c65a;background-color:#c9a227;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10l4 4 8-9' fill='none' stroke='%23171020' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 8px rgba(201,162,39,.16);
}
html input[type="checkbox"]:indeterminate,html.site-design input[type="checkbox"]:indeterminate{
  border-color:#e8c65a;background-color:#c9a227;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' stroke='%23171020' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
html input[type="checkbox"]:hover:not(:disabled){border-color:#f0d38a;box-shadow:0 0 0 2px rgba(201,162,39,.16)}
html input[type="checkbox"]:focus-visible{outline:2px solid #f0d38a;outline-offset:3px}
html input[type="checkbox"]:disabled{opacity:.45;cursor:not-allowed}
label:has(>input[type="checkbox"]){cursor:pointer}
label:has(>input[type="checkbox"]:disabled){cursor:not-allowed}
.faction-unaffiliated-toggle{padding:8px 13px;border:1px solid rgba(201,162,39,.35);border-radius:6px;background:linear-gradient(135deg,#261c30,#130e1b);box-sizing:border-box}
.faction-unaffiliated-toggle:has(:checked){border-color:#b48a43;background:linear-gradient(135deg,#3a2a20,#201523)}
html .faction-unaffiliated-toggle input[type="checkbox"]{margin-right:0}
@media(prefers-reduced-motion:reduce){html input[type="checkbox"]{transition:none}}
@media(forced-colors:active){
  html input[type="checkbox"],html.site-design input[type="checkbox"],html input[type="checkbox"]:checked,html.site-design input[type="checkbox"]:checked,html input[type="checkbox"]:indeterminate,html.site-design input[type="checkbox"]:indeterminate{
    -webkit-appearance:auto;appearance:auto;background-image:none;box-shadow:none;forced-color-adjust:auto;
  }
  html input[type="checkbox"]:focus-visible{outline-color:Highlight}
}

/* Centre the masthead text within the crest on desktop and mobile. */
html.site-design .site-navigation>.beta-campaign-banner strong{margin-top:0}

.npc-import-panel>p{max-width:85ch;line-height:1.6;color:var(--parchment-dim)}
.npc-import-panel>button{margin:8px 12px 8px 0}
.npc-import-panel details{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:5px}
.npc-import-panel summary{cursor:pointer;color:var(--gold-bright)}
.npc-import-review{max-height:65vh;overflow:auto}
.npc-import-review pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:13px;line-height:1.6;padding:12px;background:var(--ink);border-radius:4px}
.npc-import-review article+article{border-top:1px solid var(--border);margin-top:16px}