/* The Node portal's account pages (login.html for gallery managers, account.html for artists; .claude/plan/node-portal.md
   step 2). Tokens and components as on the artist portal (public/submit.html, wiki/Design.md "Artist portal"): every
   value traces to design/portal-reference/design-tokens.json. These pages exist only on the Node app, so they share
   this file instead of carrying the rules inline like the pages the WordPress plugin also serves. */
:root{
  --color-ink:#faf8f6;              /* color.ink */
  --color-ink-2:#cfc8de;         /* color.ink-2: input text and border */
  --color-text-muted:#b8b0cc;    /* color.text.muted */
  --color-accent:#de85f7;        /* color.accent: interactive signal only (link underlines, focus) */
  --color-error:#ff8f8f;         /* color.error: errors only */
  --color-canvas:#130030;           /* color.canvas */
  --color-surface-2:#1c0b42;     /* color.surface-2 */
  --color-divider:#4a3a75;       /* color.divider */
  --shadow-focus-glow:rgb(71, 130, 198) 0px 0px 8px;  /* shadow.focus-glow */
  --motion:.3s;                  /* motion.button */
  --font-body:"Montserrat",arial,sans-serif;
  --font-display:"Libre Baskerville",georgia,serif;
  --page-spacing:2.4rem;         /* layout.page-padding, phones */
  --gutter:16px;                 /* layout.gutter */
  --block-gap:1.875rem;          /* layout.block-gap */
  --form-max:480px;              /* a single-column form */
}
@media (min-width:421px){:root{--page-spacing:3.2rem}}
@media (min-width:768px){:root{--page-spacing:4.8rem}}
*{box-sizing:border-box}
html{background:var(--color-canvas)}
body{margin:0;background:var(--color-canvas);color:var(--color-ink);font:400 16px/18.4px var(--font-body);min-height:100vh;
  padding:0 var(--page-spacing) 96px;-webkit-font-smoothing:antialiased}
h1,h2{font-weight:400;margin:0;text-wrap:balance}
h1{font-family:var(--font-display);font-size:40px;line-height:40px}          /* type.display.md */
h2{font:200 24px/1.2 var(--font-display)}                                   /* type.heading.display-sm */
b,strong{font-weight:500}
a{color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:3px}
a:hover{color:var(--color-ink-2)}
header.top{display:flex;flex-direction:column;gap:var(--gutter);padding:var(--block-gap) 0 0;max-width:var(--form-max);margin:0 auto var(--block-gap)}
.wordmark{font:400 22px/1.2 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink);text-decoration:none;white-space:nowrap}
@media (max-width:600px){.wordmark{font-size:16px;letter-spacing:.06em}}
.portal-credit{margin:40px 0 0;padding:16px 0;font-size:12px;line-height:18px;color:var(--color-text-muted)}  /* T13-13: the creation credit, one small line */
.portal-credit a{color:inherit;display:inline-block;padding:3px 0}  /* 24px target */
.lead{margin:0;color:var(--color-text-muted);font-size:14px;line-height:22px}  /* type.secondary */
main{max-width:var(--form-max);margin:0 auto}
section[hidden]{display:none}
section{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gutter)}  /* minmax: a wide table scrolls in its frame instead of widening the page */
form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gutter);margin:0}  /* minmax: a wide field never widens the page (WCAG 1.4.10; audit F5) */
label{display:block;margin:0 0 6px}
input[type=email],input[type=password],input[type=text]{width:100%;background:transparent;color:var(--color-ink-2);border:1px solid var(--color-ink-2);
  border-radius:0;padding:16px 15px;font:400 16px/18.4px var(--font-body);min-height:52px}      /* components.input */
input:focus{outline:0;box-shadow:var(--shadow-focus-glow)}
button:focus-visible,a:focus-visible{outline:.2rem solid var(--color-ink);outline-offset:2px}
.help{font:400 12px/13.8px var(--font-body);color:var(--color-text-muted);display:block;margin-top:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--color-ink);color:var(--color-canvas);border:2px solid var(--color-ink);border-radius:0;
  padding:14px 20px;font:400 16px/16px var(--font-body);cursor:pointer;min-height:48px;text-decoration:none;width:100%}   /* components.button.primary */
@media (hover:hover){.btn:hover{background:var(--color-canvas);color:var(--color-ink)}}
.btn:disabled{opacity:.75;cursor:not-allowed}
.btn.outline{background:transparent;color:var(--color-ink)}
@media (hover:hover){.btn.outline:hover{background:var(--color-ink);color:var(--color-canvas)}}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--color-ink);text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:3px;cursor:pointer;justify-self:start}
@media (prefers-reduced-motion:no-preference){.btn,a{transition:background-color var(--motion),color var(--motion),border-color var(--motion)}}
.msg{min-height:18px;margin:0}
.msg.err{color:var(--color-error)}
.msg.ok{color:var(--color-ink)}
.box{border:1px solid var(--color-divider);padding:var(--gutter);display:grid;gap:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The artist's page when signed in (account.html; .claude/plan/node-portal.md step 5): pieces with their status, the
   gallery's notes, an edit form while the gallery has not taken the piece, the conversation, and sales. */
main.wide,header.top.wide{max-width:760px}
input[type=number],input[type=url],input[type=tel],select,textarea{width:100%;background:transparent;color:var(--color-ink-2);border:1px solid var(--color-ink-2);
  border-radius:0;padding:16px 15px;font:400 16px/18.4px var(--font-body);min-height:52px}
textarea{min-height:96px;resize:vertical;line-height:22px}
select:focus,textarea:focus{outline:0;box-shadow:var(--shadow-focus-glow)}
input[type=file]{font:400 14px/22px var(--font-body);max-width:100%}
.tablewrap:focus-visible{outline:.2rem solid var(--color-ink);outline-offset:2px}
::selection{background:var(--color-ink);color:var(--color-canvas)}
.btn.inline{width:auto}
.row{display:flex;gap:var(--gutter);flex-wrap:wrap;align-items:center}
.sent{font:400 12px/13.8px var(--font-body);color:var(--color-text-muted);margin:8px 0 0}
.pieces{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-divider)}
.pieces>li{border-bottom:1px solid var(--color-divider)}
.pieces summary{display:grid;grid-template-columns:64px 1fr auto;gap:var(--gutter);align-items:center;padding:12px 0;cursor:pointer;list-style:none}
.pieces summary::-webkit-details-marker{display:none}
.pieces summary b{display:block;font-size:16px;line-height:22px}
.pieces summary .lead{display:block}
.pieces .tags{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.thumb{width:64px;height:80px;object-fit:cover;border:1px solid var(--color-divider);background:var(--color-surface-2);display:block}
.thumb.ph{display:flex;align-items:center;justify-content:center;font:400 11px/1 var(--font-body);color:var(--color-text-muted);text-align:center}
.detail{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gutter);padding:0 0 var(--block-gap) calc(64px + var(--gutter))}
@media (max-width:600px){.detail{padding-left:0}
  .pieces summary{grid-template-columns:64px minmax(0,1fr);align-items:start} .pieces summary .thumb{grid-row:span 2} .pieces .tags{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center}}
.detail h3{font:500 14px/16px var(--font-body);margin:8px 0 0}
.pill{display:inline-flex;align-items:center;font:500 12px/1 var(--font-body);padding:5px 9px;border-radius:20px;border:1px solid var(--color-divider);color:var(--color-text-muted);white-space:nowrap}
/* for the artist, "changes requested" is the status that asks something of them: the filled one */
.pill.s-received,.pill.s-in_review,.pill.s-approved,.pill.s-listed{color:var(--color-ink);border-color:var(--color-ink)}
.pill.s-changes_requested,.pill.s-sold,.pill.unread{color:var(--color-canvas);background:var(--color-ink);border-color:var(--color-ink)}
.pill.s-declined{color:var(--color-error);border-color:var(--color-error)}
.callout{border:1px solid var(--color-ink);padding:12px var(--gutter);font-size:14px;line-height:22px;white-space:pre-wrap}
.history{list-style:none;margin:0;padding:0;font-size:14px;line-height:22px}
.history li{padding:6px 0;border-bottom:1px solid var(--color-divider)} .history li:last-child{border-bottom:0}
.history .when,.thread .who{color:var(--color-text-muted);font-size:12px;font-variant-numeric:tabular-nums}
.history .note{display:block;color:var(--color-ink-2);white-space:pre-wrap}
.thread{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.thread li{padding:10px 12px;border:1px solid var(--color-divider);max-width:88%;font-size:14px;line-height:22px}
.thread li.artist{justify-self:end;background:var(--color-surface-2)}
.thread .who{display:block} .thread .body{white-space:pre-wrap;overflow-wrap:anywhere}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)} .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:600px){.grid2{grid-template-columns:1fr}.grid4{grid-template-columns:1fr 1fr}}
.tablewrap{overflow-x:auto;border:1px solid var(--color-divider)}
table{width:100%;border-collapse:collapse;font-size:14px;line-height:22px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--color-divider);vertical-align:top}
th{font:500 12px/16px var(--font-body);color:var(--color-text-muted);background:var(--color-surface-2)}
tr:last-child td{border-bottom:0} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} td.date{white-space:nowrap}
#sales{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gutter)}
.empty{color:var(--color-text-muted);font-size:14px;line-height:22px;margin:0}

/* Icons (public/icons.svg from design/icons/; wiki/Design.md "Icons, motion and sound"): one 1px line in currentColor, never the
   accent; 16px inline with text, 20px in controls, 24px in headings. Always next to words. */
.icon{display:inline-block;width:16px;height:16px;flex:0 0 auto;vertical-align:-3px;overflow:visible}
.icon.lead{margin-right:6px} .icon.trail{margin-left:4px} .icon-text{display:inline;width:auto;height:auto;vertical-align:baseline}
/* The Sound switch (public/sound.js): hidden until the sound files are installed; the speaker shows the state, aria-pressed says it */
.sound-switch{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0;background:none;border:0;color:var(--color-ink);font:inherit;cursor:pointer}
.sound-switch[hidden]{display:none} .sound-switch .icon{width:20px;height:20px}
.sound-switch[aria-pressed=true] .when-off,.sound-switch[aria-pressed=false] .when-on{display:none}
@media (hover:hover){.sound-switch:hover span{text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:3px}}