/* Common Era Artist Portal - additions only.

   portal.css (copied byte-for-byte from the Dev Portal) supplies the system:
   the token palette, the light/dark sets, the sidebar, panels, buttons, inputs,
   comment blocks, the card and its tooltip. Everything here is a component
   portal.css has no rule for - the work list, the stage tracker, the art
   description, submission tiles.

   Every colour below is a token. Nothing hardcodes a hue except the faction
   colours, which are canon and appear as chips exactly as they do over there.

   COLOUR HAS A JOB, following the Dev Portal: --attn marks work that is
   unfinished or waiting on somebody, --success marks work that is accepted,
   --danger marks work that is stopped. Everything else stays neutral.

   With one deliberate, commented exception (.sb-user, at the bottom), nothing
   here overrides a portal.css rule. */

/* ---- stage chips: the same shape as portal.css's .stat-chip ---- */
.st-pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;
  border-radius:99px;padding:1px 10px;border:1px solid;}
.st-pill.tone-neutral{color:var(--text-2);background:var(--surface-2);border-color:var(--border-strong);}
.st-pill.tone-attn{color:var(--attn);background:var(--attn-soft);border-color:var(--attn);}
.st-pill.tone-success{color:var(--success);background:var(--surface-2);border-color:var(--border-strong);}
.st-pill.tone-danger{color:var(--danger);background:var(--danger-soft);border-color:var(--danger);}

/* ---- the stage tracker ----
   Five steps, left to right. The trail behind the current step is filled in the
   accent, the current step takes the stage's own tone (--sc), everything ahead
   stays at the border grey. */
.trk{display:flex;align-items:flex-start;gap:0;}
.trk-step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;
  position:relative;padding:0 3px;}
.trk-step::before{content:'';position:absolute;top:5px;left:-50%;width:100%;height:2px;background:var(--border);}
.trk-step:first-child::before{display:none;}
.trk-step.done::before,.trk-step.now::before{background:var(--accent);}
.trk-dot{width:11px;height:11px;border-radius:50%;background:var(--surface);
  border:2px solid var(--border-strong);position:relative;z-index:1;flex-shrink:0;}
.trk-step.done .trk-dot{background:var(--accent);border-color:var(--accent);}
.trk-step.now .trk-dot{background:var(--sc,var(--attn));border-color:var(--sc,var(--attn));}
.trk-lbl{font-size:9px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-3);text-align:center;line-height:1.3;}
.trk-step.done .trk-lbl{color:var(--text-2);}
.trk-step.now .trk-lbl{color:var(--sc,var(--attn));}
.trk-hold{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--danger);
  background:var(--danger-soft);border:1px solid var(--danger);border-radius:99px;padding:1px 10px;}

/* ---- My work: one row per assignment ---- */
.wk-list{display:flex;flex-direction:column;gap:12px;padding-bottom:6px;max-width:1120px;}
.wk-row{display:flex;gap:20px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;
  text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s;}
.wk-row:hover{border-color:var(--border-strong);box-shadow:var(--shadow-card);}
.wk-card{flex-shrink:0;}
.wk-row .card{cursor:pointer;}
.wk-body{flex:1;min-width:0;}
.wk-title{font-size:16px;font-weight:600;letter-spacing:-.005em;color:var(--text);line-height:1.25;}
.wk-meta{font-size:12px;color:var(--text-3);margin-top:3px;}
.wk-line{font-size:13px;color:var(--text-2);line-height:1.55;margin-top:10px;}
.wk-nopr{font-style:italic;color:var(--text-3);}
.wk-mood{font-size:13.5px;font-style:italic;color:var(--text);line-height:1.5;margin-top:8px;
  padding-left:11px;border-left:2px solid var(--border-strong);}
.wk-l{display:block;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:2px;}
.wk-prog{width:290px;flex-shrink:0;display:flex;flex-direction:column;gap:12px;}
.wk-due{font-size:12.5px;color:var(--text-2);}
.wk-due.soon,.wk-due.overdue{color:var(--attn);}

/* ---- the art description ---- */
.pr-tech{display:flex;flex-wrap:wrap;gap:10px 30px;padding-bottom:13px;margin-bottom:3px;
  border-bottom:1px solid var(--border);}
.pr-t{min-width:120px;}
.pr-tv{font-size:13px;color:var(--text);}
.pr-row{display:flex;gap:18px;padding:12px 0;border-top:1px solid var(--border);}
.pr-row:first-child{border-top:none;}
.pr-l{width:104px;flex-shrink:0;font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);padding-top:3px;}
.pr-v{flex:1;min-width:0;font-size:14px;color:var(--text);line-height:1.62;white-space:pre-wrap;}
.pr-auto{color:var(--text-2);}
.pr-guide{font-size:12px;margin-left:8px;}
/* Mood is the line the artist repeats to themselves for the whole painting, so
   it is the one thing on the page set as a quotation. */
.pr-mood{display:block;font-size:16px;font-style:italic;color:var(--text);line-height:1.5;
  padding-left:13px;border-left:2px solid var(--border-strong);}
.bf-empty{font-size:13px;font-style:italic;color:var(--text-3);}

/* ---- shared panels and rows ---- */
.ap-cols{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;padding-bottom:26px;}
.ap-main{flex:1;min-width:340px;display:flex;flex-direction:column;gap:14px;}
.ap-side{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:14px;}
.ap-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;}
.ap-panel > h3{font-size:11px;font-weight:600;color:var(--text-3);margin:0 0 12px;
  text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;
  justify-content:space-between;gap:10px;}
.ap-panel > h3 .h3-side{text-transform:none;letter-spacing:0;font-weight:400;color:var(--text-3);font-size:11px;}
.ap-empty{font-size:12px;font-style:italic;color:var(--text-3);}
.pj-para{font-size:13px;color:var(--text-2);line-height:1.65;margin:0;}

.bf{padding:10px 0;border-top:1px solid var(--border);}
.bf:first-child{border-top:none;padding-top:0;}
.bf-label{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:4px;}
.bf-value{font-size:13px;color:var(--text-2);line-height:1.6;white-space:pre-wrap;}

.ap-area,.ap-input,.ap-select{width:100%;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-sm);color:var(--text);font-family:var(--font-ui);font-size:13px;
  padding:6px 9px;outline:none;transition:border-color .12s,box-shadow .12s;}
.ap-area{resize:vertical;min-height:70px;line-height:1.5;}
.ap-select{cursor:pointer;}
.ap-area:focus,.ap-input:focus,.ap-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.ap-row{display:flex;gap:9px;align-items:center;}
.ap-row .ap-rl{width:34px;flex-shrink:0;font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);}

/* ---- the piece page ---- */
.piece-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:18px;}
.piece-title{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--text);line-height:1.2;}
.piece-sub{font-size:12px;color:var(--text-3);margin-top:4px;}
.piece-card-col{width:190px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;align-items:center;}
.piece-card-col .card{cursor:default;}

/* ---- submissions ---- */
.sub-grid{display:flex;flex-wrap:wrap;gap:12px;}
.sub{width:152px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;}
.sub.answered{border-color:var(--border-strong);}
.sub-img{width:100%;height:112px;object-fit:cover;display:block;background:var(--surface-3);
  cursor:zoom-in;border:none;padding:0;}
.sub-noimg{width:100%;height:112px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);font-size:11px;color:var(--text-3);font-style:italic;}
.sub-body{padding:9px 10px 10px;display:flex;flex-direction:column;gap:5px;}
.sub-meta{font-size:10.5px;color:var(--text-3);}
.sub-meta b{color:var(--text);font-weight:600;}
.sub-cap{font-size:12px;color:var(--text-2);line-height:1.45;white-space:pre-wrap;}
.sub-fb{font-size:11.5px;color:var(--text-2);line-height:1.45;border-top:1px solid var(--border);
  padding-top:6px;white-space:pre-wrap;}
.sub-fb b{color:var(--text);font-weight:600;}
.sub-acts{display:flex;gap:5px;flex-wrap:wrap;}

.drop{border:1px dashed var(--border-strong);border-radius:var(--r);padding:16px;text-align:center;
  cursor:pointer;transition:border-color .12s,background .12s;background:var(--surface-2);}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft);}
.drop-t{font-size:13px;color:var(--text-2);}
.drop-s{font-size:11.5px;color:var(--text-3);margin-top:4px;}
.up-preview{display:flex;gap:10px;align-items:flex-start;margin-top:10px;}
.up-preview img{width:88px;height:66px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border);}

/* ---- buttons: the same pair portal.css defines, without .dt-btn's left margin ---- */
.ap-btn{display:inline-block;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);font-family:inherit;font-size:12.5px;font-weight:500;
  padding:6px 14px;cursor:pointer;text-decoration:none;text-align:center;
  transition:background .1s,border-color .1s,color .1s;}
.ap-btn:hover{background:var(--surface-2);border-color:var(--text-3);}
.ap-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-on);}
.ap-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.ap-btn.quiet{color:var(--text-2);}
.ap-btn.quiet:hover{color:var(--text);}
.ap-btn:disabled{opacity:.5;cursor:default;}
.ap-btn.tiny{padding:3px 10px;font-size:11.5px;}

/* ---- the message composer ----
   portal.css hides .cmt-add for anyone who is not the owner, which is right for
   the Dev Portal (read-only visitors) and wrong here, where artists must be able
   to post. So the composer wears its own class and repeats what .cmt-add and its
   textarea would have given it. */
.ap-cmt-add{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.ap-cmt-add textarea{width:100%;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-sm);color:var(--text);font-family:var(--font-ui);font-size:13px;
  padding:6px 9px;outline:none;resize:vertical;min-height:52px;line-height:1.5;
  transition:border-color .12s,box-shadow .12s;}
.ap-cmt-add textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

/* ---- guides ---- */
.gd-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.gd-tab{border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);
  border-radius:var(--r-sm);padding:5px 12px;font-size:12.5px;font-weight:500;cursor:pointer;
  font-family:inherit;display:inline-flex;align-items:center;gap:7px;
  transition:background .1s,color .1s,border-color .1s;}
.gd-tab:hover{background:var(--surface-2);color:var(--text);}
.gd-tab.on{background:var(--accent);border-color:var(--accent);color:var(--accent-on);}
.gd-tab .fac-dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--border-strong);}
.gd-sec{padding:14px 0;border-top:1px solid var(--border);}
.gd-sec:first-of-type{border-top:none;padding-top:0;}
.gd-sec-h{font-size:15px;font-weight:600;color:var(--text);margin-bottom:6px;}
.gd-body{font-size:13px;color:var(--text-2);line-height:1.65;white-space:pre-wrap;}


/* ---- lightbox (portal.css styles .lightbox; it needs the hidden rule) ---- */
.lightbox[hidden]{display:none;}

/* ---- sidebar footer ----
   The ONE deliberate override of a portal.css rule: .sb-user there is a row
   (name left, logout right) for the Dev Portal's two-element footer. This
   portal's footer stacks more than that - name, role, sign-out, the prototype
   note, and the studio's preview switch - so it has to be a column. */
.sb-user{display:block;font-size:12px;color:var(--text-3);line-height:1.55;}
.sb-user b{color:var(--text);font-weight:600;display:block;font-size:13px;}
.sb-user .signout{border:none;background:none;padding:0;margin-top:3px;color:var(--text-3);
  font-size:12px;font-family:inherit;text-decoration:underline;cursor:pointer;}
.sb-user .signout:hover{color:var(--text);}
.proto-note{font-size:11px;color:var(--text-3);line-height:1.45;margin-top:9px;}

/* the studio's "view as" preview switch - the control is portal.css's
   segmented .act-tabs / .act-tab, the select is its .sb-input */
.sb-viewas{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.sb-viewas-l{display:block;font-size:9.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:6px;}
.sb-viewas .act-tabs{width:100%;margin-bottom:0;}
.sb-viewas .act-tab{flex:1;text-align:center;padding:5px 8px;}
.sb-viewas-sel{margin-top:8px;padding:5px 8px;font-size:12px;}

/* ---- narrow windows: the work row stacks, the piece page goes single column ---- */
@media (max-width:1080px){
  .wk-row{flex-wrap:wrap;}
  .wk-prog{width:100%;}
  .ap-side{width:100%;}
}
@media (max-width:720px){
  .wk-card{display:none;}
  .pr-row{flex-direction:column;gap:4px;}
  .pr-l{width:auto;padding-top:0;}
}

/* ============================ the studio's pages ============================ */

/* the studio's own nav group, below the artist-facing destinations */
.sb-studio[hidden]{display:none;}
.sb-navgroup{font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-3);padding:14px 14px 6px;margin-top:6px;border-top:1px solid var(--border);}


/* ---- Cards: the dev portal's card area, showing art progress ----
   #view-cards mirrors the Dev Portal's #view-list: a fixed head, a scrolling
   grid, and a preview bar along the bottom. */
#view-cards{display:flex;flex-direction:column;padding:0;height:100vh;}
#view-cards[hidden]{display:none;}
/* The filter band is the top of a page: .fbar, the Dev Portal's own, so the two
   tools have one filter bar between them and a change to it lands in both.
   .cards-head is what is left for the screens that are not a wall of tiles -
   the edit form, and the strip that says who is being assigned to. */
.cards-head{flex:0 0 auto;padding:24px 30px 0;}
.cards-head .page-sub{margin-bottom:14px;}
/* an action sharing the filter row: apart from the filters, level with them */
.fb-actions{margin-left:auto;align-self:flex-end;display:flex;gap:6px;}
.fb-actions .ap-btn{height:31px;padding:0 14px;font-size:12px;}
.aw-more{padding:20px 0 6px;}

/* one tile: the card, then how far its art has got */
.cd-prevcard{flex-shrink:0;}

/* the set a card ships in decides when it gets commissioned, so alpha wears
   the attention colour and the later sets stay quiet */
.pr-chip{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border-radius:99px;padding:1px 9px;border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--text-2);}
.pr-chip.pr-alpha{background:var(--attn-soft);border-color:var(--attn);color:var(--attn);}
.pr-chip.pr-unset{border-style:dashed;color:var(--text-3);}
.pr-tagged{font-style:normal;opacity:.6;margin-left:3px;}
/* How important a card is: three stars are the ones saved for a bigger name.
   Plain dark grey, not gold - a rating is not a warning, and the attention
   colour on this wall is already spoken for by work that is waiting. Every
   star in the portal is this one: the tile, the panel, the picker. */
.stars{display:inline-flex;gap:2px;vertical-align:-1px;}
.star{font-style:normal;color:var(--border-strong);line-height:1;}
.star.on{color:var(--text-2);}
.star-pick{display:inline-flex;gap:2px;}
.star-btn{border:none;background:none;padding:0 2px;cursor:pointer;font-size:15px;line-height:1;
  color:var(--border-strong);}
.star-btn.on{color:var(--text-2);}
.star-btn:hover{color:var(--text);transform:scale(1.12);}
/* the art status the dev portal will read back */
.as-chip{display:inline-block;font-size:10.5px;color:var(--text-3);border-radius:99px;padding:1px 9px;
  border:1px dashed var(--border-strong);}
.as-chip.as-complete{color:var(--success);border-style:solid;}
.as-chip.as-in-progress,.as-chip.as-assigned{color:var(--text-2);border-style:solid;}

.assign-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--attn-soft);
  border:1px solid var(--attn);border-radius:var(--r);padding:10px 14px;margin-bottom:16px;font-size:13px;}
.assign-bar .wk-l{display:inline;margin:0;}
.assign-done{margin-left:auto;}


/* ---- an artist's previous work ---- */
.ref-strip{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 2px;}
.ref-cell{position:relative;display:inline-flex;}
.ref-thumb{width:72px;height:72px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--surface-2);padding:0;cursor:zoom-in;display:block;}
.ref-thumb.img-missing,.ref-dead{display:flex;align-items:center;justify-content:center;font-size:9px;
  color:var(--text-3);font-style:italic;cursor:default;border-style:dashed;}
.ref-x{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text-2);font-size:13px;line-height:1;cursor:pointer;padding:0;
  display:none;align-items:center;justify-content:center;}
.ref-cell:hover .ref-x{display:flex;}
.ref-x:hover{color:var(--danger);border-color:var(--danger);}
.ref-box{border-top:1px solid var(--border);padding-top:14px;margin-top:4px;}
.ref-box .ef-label{margin-bottom:8px;}
.ref-add{margin-top:10px;display:flex;flex-direction:column;gap:7px;}
/* still used by the guide's plate adder, which keeps its drop box */
.ref-url{display:flex;gap:8px;}
.ref-url .ap-input{flex:1;}
.ref-drop{padding:12px;}
.ref-btns{display:flex;gap:8px;}
.ref-btns .ap-btn{flex:1;}


/* ============ the illustrated guide: The project and Art direction ============
   These two read as a document, not as a screen of the tool: one column at
   reading width, real headings, and plates given room. A painter is meant to
   scroll it like a book, so nothing here is a dense panel. */
.sg-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.sg-tools{flex-shrink:0;padding-top:4px;}

.sg{max-width:1080px;padding-bottom:20px;}
.sg-sec{max-width:720px;margin-bottom:34px;}
.sg-plates,.sg-sec:has(.plates){max-width:1080px;}
.sg-h2{font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--text);
  margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--border);}
.sg-h3{font-size:14px;font-weight:600;color:var(--text);margin:0 0 6px;
  display:flex;align-items:baseline;gap:9px;}
.sg-count{font-size:11px;font-weight:400;color:var(--text-3);}
.sg-body{font-size:15px;color:var(--text-2);line-height:1.75;white-space:pre-wrap;max-width:680px;}
.sg-lede{font-size:14px;color:var(--text-3);line-height:1.7;margin:-4px 0 16px;max-width:680px;}
.sg-open{font-size:17px;color:var(--text-2);line-height:1.7;}
.sg-blank{font-style:italic;color:var(--text-3);}
.sg-axis{margin-bottom:22px;}
.sg-sector{margin-bottom:30px;padding-top:20px;border-top:1px solid var(--border);}
.sg-sector:first-of-type{border-top:none;padding-top:0;}
.sg-acts{margin-top:10px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
body.is-owner .sg-note{cursor:text;}
.sg-edit{max-width:680px;font-size:14px;min-height:110px;}
/* the printed frame, stated as a constraint rather than a palette */
.sg-frame{display:flex;align-items:center;gap:12px;margin-top:8px;padding:12px 14px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  font-size:12.5px;color:var(--text-3);line-height:1.55;max-width:680px;}
.sw{display:inline-block;width:13px;height:13px;border-radius:3px;flex-shrink:0;border:1px solid var(--border-strong);}
.sw-lg{width:30px;height:30px;border-radius:var(--r-sm);}

/* ---- plates: a reference image with a caption and a credit ---- */
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin:6px 0 4px;}
.plate{margin:0;display:flex;flex-direction:column;gap:9px;}
/* contain, not cover: a painter needs the whole composition, not a crop */
.plate-img{width:100%;height:280px;object-fit:contain;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r);display:block;padding:0;cursor:zoom-in;}
.plate-dead{display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
  font-size:12px;font-style:italic;color:var(--text-3);border-style:dashed;cursor:default;}
.plate-cap{display:flex;flex-direction:column;gap:3px;}
.plate-text{font-size:13.5px;color:var(--text-2);line-height:1.55;}
.plate-credit{font-size:12px;color:var(--text-3);font-style:italic;}
.plate-src{font-size:11px;color:var(--text-3);text-decoration:none;}
.plate-src:hover{color:var(--accent);}
.plate-acts{display:flex;gap:5px;margin-top:4px;}
.plate-add{margin-top:16px;max-width:560px;display:flex;flex-direction:column;gap:8px;}
.plate-drop{padding:14px;}

/* ---- picking a finished card as a reference ---- */
.card-picker{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r);
  padding:16px 18px;margin:10px 0 26px;max-width:1080px;}
.card-picker[hidden]{display:none;}
.cp-pick-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;font-size:13px;}
.cp-pick-head .ap-btn{margin-left:auto;}
.cp-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;
  max-height:420px;overflow-y:auto;}
.cp-pick{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);
  padding:0;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;font-family:inherit;}
.cp-pick:hover{border-color:var(--accent);}
.cp-pick img{width:100%;height:88px;object-fit:cover;display:block;}
.cp-pick span{font-size:10.5px;color:var(--text-2);padding:5px 6px;line-height:1.3;text-align:left;}

/* ---- the questions thread, kept quiet at the foot of the document ---- */
.sg-questions{max-width:720px;margin-top:14px;padding-top:22px;border-top:1px solid var(--border);
  padding-bottom:30px;}
.sg-questions .sg-h2{margin-bottom:14px;}

/* ---- the two walls ----

   An artist tile and a card tile are the same object seen from two ends, so
   they are built to one set of measurements: picture on top, a coloured rule
   under it, the name, then where the thing has got to, with a badge in one
   corner. Neither is a game card, so both take the chrome surface rather than
   the card face - but the geometry, the lift and the selection ring are shared,
   and scanning one wall teaches you how to scan the other. */
.card-grid{--tw:150px;--th:206px;--tart:112px;}
#view-artists{display:flex;flex-direction:column;padding:0;height:100vh;}
#view-artists[hidden]{display:none;}

.at-wrap,.cd-wrap{position:relative;flex-shrink:0;width:var(--tw);transition:transform .14s;cursor:pointer;}
.card-grid .at-wrap:hover,.card-grid .cd-wrap:hover{transform:translateY(-3px);z-index:2;}
.card-grid .at-wrap:hover .at-card,.card-grid .cd-wrap:hover .cd-card{box-shadow:var(--shadow-pop);}
.at-card,.cd-card{position:relative;height:var(--th);display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;
  box-shadow:var(--shadow-card);transition:box-shadow .14s;}
.at-art,.cd-art{height:var(--tart);flex-shrink:0;overflow:hidden;background:var(--surface-2);}
.at-face{width:100%;height:100%;object-fit:cover;display:block;border:none;padding:0;background:none;}
.at-noface{display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;
  color:var(--text-3);letter-spacing:.03em;}
/* the rule carries the status, where a card's carries its faction */
.at-div{height:4px;flex-shrink:0;background:var(--border-strong);}
.at-div.tone-new{background:var(--border-strong);}
.at-div.tone-waiting,.at-div.tone-interested{background:var(--attn);}
.at-div.tone-accepted{background:var(--success);}
.at-div.tone-declined{background:var(--danger);}
.at-txt{flex:1 1 auto;min-height:0;overflow:hidden;padding:7px 9px 6px;display:flex;flex-direction:column;}
.at-name{font-size:12px;font-weight:700;line-height:1.2;color:var(--text);letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* the phase, directly under the name - a number and nothing after it */
.at-phase{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-3);line-height:1.3;margin-top:3px;}
.at-meta{margin-top:auto;padding-right:26px;}
.at-where{font-size:10.5px;color:var(--text-3);line-height:1.3;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.at-status{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  line-height:1.3;margin-top:3px;color:var(--text-3);}
.at-status.tone-waiting,.at-status.tone-interested{color:var(--attn);}
.at-status.tone-accepted{color:var(--success);}
.at-status.tone-declined{color:var(--danger);}
/* how many pieces they are carrying, in the corner a card keeps its stat.
   Nobody with nothing assigned gets an empty ring - no ring says it. */
.at-work{position:absolute;right:6px;bottom:5px;width:20px;height:20px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-2);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:2;}
.tier-chip{width:20px;height:20px;flex-shrink:0;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--border-strong);color:var(--text-2);font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;}
.tier-chip.none{border-style:dashed;color:var(--text-3);}


/* ---- the artist panel along the bottom ----
   It opens on a click, so it has to be readable the moment it appears: no
   scrolling to find the pieces, no hunting for the gallery. The panel takes
   the height its content needs and the wall above - which scrolls anyway -
   gives up the room. The cap is there only so an artist carrying a dozen
   pieces cannot swallow the screen. */
#view-artists .card-preview{max-height:70vh;}
.ap-artist{display:flex;flex-direction:column;gap:12px;}
.ap-artist .bf{padding:7px 0;}
.ap-artist .bf-label{margin-bottom:3px;}
.ap-a-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.ap-a-acts{display:flex;gap:6px;flex-shrink:0;}
/* Three columns that stay three columns: who they are, what they are making,
   and why they were picked. The panel must be readable at a glance when it
   pops up, so nothing here wraps into a fourth row and nothing scrolls - the
   columns give up width instead. */
.ap-a-cols{display:flex;gap:22px;align-items:flex-start;flex-wrap:nowrap;}
.ap-a-facts{width:230px;flex-shrink:0;display:flex;flex-direction:column;gap:9px;}
.ap-a-notes{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;}
/* the gallery: enough thumbnails to judge a hand by, in the room left over */
.ap-a-refs{width:270px;flex-shrink:0;border-radius:var(--r);transition:box-shadow .12s;}
.ap-a-refs.over{box-shadow:0 0 0 2px var(--accent);}
.ap-rl2{width:52px;flex-shrink:0;font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);}
.art-stats{display:flex;gap:18px;font-size:9px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-3);}
.art-stats b{display:block;font-size:17px;font-weight:600;color:var(--text);line-height:1.15;
  letter-spacing:0;text-transform:none;}
.art-stats .needs b{color:var(--attn);}
/* ---- the pieces they are painting ----
   The paintings themselves, bigger than the work samples beside them: these
   are the things being made, and the question the row answers is what is on
   each card now.

   ALWAYS five columns, never a count that depends on the width. Five is as
   many as anyone is expected to carry, so five always sit on one line and take
   whatever width the column has - generous on a wide screen, tighter on a
   narrow one, but never wrapping into a second row and never pushing the panel
   into a scroll. A sixth starts a second row of five. */
.ap-a-work{padding-top:0;border-top:none;margin-top:auto;}
.art-work{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:4px;}
.art-workcard{min-width:0;display:flex;flex-direction:column;gap:5px;
  text-decoration:none;color:inherit;}
.art-workcard:hover .art-wname{color:var(--accent);}
.art-workcard:hover .art-wart{border-color:var(--border-strong);}
.art-wname{font-size:11.5px;font-weight:600;color:var(--text-2);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.art-workcard .st-pill{align-self:flex-start;font-size:9.5px;padding:1px 6px;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* the same shape and the same dimming for an unpainted one as the Cards wall */
.art-wart{position:relative;width:100%;aspect-ratio:1/1;border-radius:var(--r-sm);
  overflow:hidden;background:var(--surface-2);border:1px solid var(--border);
  transition:border-color .12s;}
.art-wart img{width:100%;height:100%;object-fit:cover;display:block;}
.art-wart.cd-unpainted img{opacity:.45;filter:grayscale(.6);}
.art-wart .cd-fac{position:absolute;left:0;right:0;bottom:0;height:3px;}
.edit-artist{max-width:460px;}
.edit-acts{margin-top:14px;}
.edit-remove{margin-left:auto;color:var(--danger);}
.edit-remove:hover{color:var(--danger);border-color:var(--danger);}

/* ---- the card tile ----
   The same frame as an artist's, filled with what a card has instead: the
   painting as it stands, the faction on the rule, and the rating along the
   foot. */
.cd-art img{width:100%;height:100%;object-fit:cover;display:block;}
.cd-art.cd-unpainted img{opacity:.45;filter:grayscale(.6);}
/* the rule carries the faction, where an artist's carries their status */
.cd-fac{height:4px;flex-shrink:0;background:var(--border-strong);}
.cd-txt{flex:1 1 auto;min-height:0;overflow:hidden;padding:7px 9px 9px;display:flex;flex-direction:column;}
.cd-name{font-size:12px;font-weight:700;line-height:1.2;color:var(--text);letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.cd-meta{margin-top:auto;}
.cd-who{font-size:10.5px;color:var(--text-3);line-height:1.3;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.cd-stat{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  line-height:1.3;margin-top:3px;color:var(--text-3);}
.cd-stat.done{color:var(--success);}
/* the rating sits under the name, the line an artist tile gives their phase */
.cd-stars{align-self:flex-start;margin-top:4px;font-size:10px;}
/* the set a card ships in, in the corner an artist's tile keeps their workload */
.cd-set{position:absolute;right:6px;top:6px;z-index:2;font-size:9.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  background:rgba(0,0,0,.55);color:#fff;border-radius:99px;padding:1px 6px;}
.cd-set.alpha{color:var(--attn);}
/* the five segments ARE the five art statuses, as the card's bottom edge */
.cd-prog{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;gap:1px;}
.cd-seg{flex:1;height:3px;background:var(--border);}
.cd-seg.on{background:var(--accent);}
.cd-seg.now{background:var(--attn);}

/* a drop zone waiting on the network */
.drop.is-busy{opacity:.6;pointer-events:none;}
.drop.is-busy .drop-t::after{content:' \2026 fetching';color:var(--attn);}

/* ---- the gallery is the running order ----
   The first thumbnail is the picture on their card, so it is marked and the
   others carry a button that moves them to the front. */
.ref-cell.is-face .ref-thumb{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.ref-top{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  font-size:7.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:3px;padding:3px 7px;
  cursor:pointer;font-family:inherit;transition:background .1s;}
.ref-top:hover{background:var(--accent);color:var(--accent-on);}


/* ---- stepping through a set in the closeup ---- */
.lb-prev,.lb-next{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:76px;
  background:rgba(0,0,0,.4);border:none;color:rgba(255,255,255,.9);font-size:34px;line-height:1;
  cursor:pointer;border-radius:var(--r);transition:background .12s;}
.lb-prev{left:18px;} .lb-next{right:18px;}
.lb-prev:hover,.lb-next:hover{background:rgba(0,0,0,.68);color:#fff;}
.lb-prev[hidden],.lb-next[hidden],.lb-count[hidden]{display:none;}
.lb-count{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);font-size:12px;
  color:rgba(255,255,255,.75);background:rgba(0,0,0,.45);border-radius:99px;padding:4px 12px;}

/* ---- sort control on the artist wall ---- */

/* Outside the US, or nowhere recorded at all. Both read red, the same red the
   wall already uses for a declined artist, because they mean the same kind of
   thing: a reason this one may go nowhere. The line itself carries it - a
   separate badge said no more than the place already does. */
.at-where.abroad,.at-where.unplaced{color:var(--danger);font-weight:600;}
.cp-num.abroad,.cp-num.unplaced{color:var(--danger);}

/* Contact: one line per way of reaching them, the address itself the button.
   Click copies; what kind of address it is sits quietly to the right. */
.ct-list{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;align-items:baseline;}
.ct-copy{justify-self:start;max-width:100%;padding:0;border:0;background:none;
  font:inherit;font-size:12.5px;font-weight:500;color:var(--text-2);text-align:left;
  cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-bottom:1px dashed var(--border-strong);}
.ct-copy:hover{color:var(--accent);border-bottom-color:var(--accent);}
.ct-copy.copied{color:var(--success);border-bottom-color:transparent;}
.ct-copy.copy-failed{color:var(--danger);border-bottom-color:transparent;}
.ct-kind{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-3);white-space:nowrap;}

/* ---- editing a fact where it is written ----
   The pencil sits on the label line, at the end of it, so the eye never tracks
   across empty space to find it. It stays faint until the row is hovered: ten
   of these down a column would otherwise read as decoration. */
.bf-label{display:flex;align-items:center;gap:6px;}
.bf-edit{opacity:0;transition:opacity .1s;}
.bf:hover .bf-edit,.bf.editing .bf-edit,.bf-edit:focus-visible,
.cp-title:hover .bf-edit,.cp-num:hover .bf-edit{opacity:1;}
.bf.editing{background:var(--accent-soft);margin:0 -10px;padding:10px;border-radius:var(--r-sm);}
.bf.editing .bf-label{color:var(--text-2);}
.bf-acts{display:flex;gap:6px;margin-top:8px;}

/* a sub-field inside one editor: city, state and country are one edit */
.ef-sub + .ef-sub{margin-top:6px;}
.ef-sublabel{display:block;font-size:9px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:3px;}
.ap-area.short{min-height:46px;}

/* the name and the place, edited in the head where they are printed */
.ap-a-id{min-width:0;flex:1;}
.head-edit{max-width:320px;background:var(--accent-soft);border-radius:var(--r-sm);
  padding:9px 10px;margin:0 -10px;}
.head-edit .bf-acts{margin-top:8px;}
.cp-title,.cp-num{display:flex;align-items:center;gap:7px;}
.cp-title .bf-edit,.cp-num .bf-edit{flex-shrink:0;}

/* the same panel, still open - it should not re-enter every time a field in it
   is edited or a picture is added */
.cp-wrap.cp-still{animation:none;}

/* ---- signing in online ---- */
#login-form input[hidden]{display:none;}
.login-msg.ok{color:var(--success);}
.login-forgot{border:none;background:none;padding:0;margin-top:10px;font:inherit;font-size:12px;
  color:var(--text-3);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.login-forgot:hover{color:var(--text);}
.login-forgot[hidden]{display:none;}

/* whether the last change reached the database */
.save-state.busy{color:var(--attn);}
.save-state.bad{color:var(--danger);font-weight:600;}