/* Rebellion Art House — portal + landing
   Brand: warm paper, near-black ink, one oxblood accent.
   Calm and still by default; motion only signals state. */

/* The [hidden] attribute must always win over any display rule below
   (otherwise elements like the sample banner never actually hide). */
[hidden] { display: none !important; }

:root {
  --ink:       #16130f;
  --ink-soft:  #4b443a;
  --ink-faint: #8b8477;
  --paper:     #f4f1e9;
  --panel:     #ffffff;
  --panel-2:   #fbf9f3;
  --line:      #e4ded1;
  /* Palette (Aaron, 2 Oct 2026: "limit to two colours and an accent … shades and chromatics of the same colour").
     60% paper · 30% ink · 10% oxblood; olive is the accent and means only ready / done / allowed. */
  --accent:    #9d2919;   /* oxblood — the one lit thing / primary action, "needed" */
  --accent-ink:#ffffff;
  --ox-700:    #7a1f13;
  --ox-500:    #b0563f;   /* terracotta shade of oxblood — "in progress" */
  --ox-200:    #ecc9c1;
  --ox-100:    #f6e7e3;
  --ox-50:     #fbf3f1;
  --olive:     #4f6b3a;   /* accent — ready / done / allowed */
  --olive-200: #cfdac4;
  --olive-100: #e9efe3;
  --ink-2:     #3b3530;
  --stone:     #b9b2a6;
  --doing:     #b0563f;
  --done:      #4f6b3a;
  --letgo:     #8b8477;   /* grey */
  --radius:    14px;
  --shadow:    0 1px 2px rgba(22,19,15,.05), 0 8px 24px rgba(22,19,15,.06);
  --display:   "Oswald", "Arial Narrow", sans-serif;
  --body:      "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------------- Landing ---------------- */
.landing {
  min-height: 100vh;
  background: #0d0b09;
  color: #f4f1e9;
  display: grid;
  place-items: center;
  padding: 40px 24px;
}
.landing-inner { max-width: 560px; text-align: center; }
.landing img.mark { width: 190px; height: auto; margin: 0 auto 30px; display: block; }
.landing .eyebrow {
  font-family: var(--display);
  letter-spacing: .38em;
  text-transform: uppercase;
  font-size: 12px;
  color: #b9b1a1;
  margin: 0 0 18px;
}
.landing h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 5vw, 40px);
  line-height: 1.15;
  letter-spacing: .02em;
  margin: 0 0 14px;
}
.landing p.lede {
  font-size: 17px;
  line-height: 1.6;
  color: #cfc8ba;
  margin: 0 auto 34px;
  max-width: 440px;
}
.enter {
  display: inline-block;
  font-family: var(--display);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  color: var(--ox-500);
  background: var(--ox-100);
  padding: 16px 34px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.enter:hover { background: #fff; transform: translateY(-1px); }
.landing .foot {
  margin-top: 46px;
  font-size: 12.5px;
  letter-spacing: .06em;
  color: #8a8273;
  line-height: 1.9;
}
.landing .foot a { color: #b9b1a1; text-decoration: none; }

/* ---------------- Portal shell ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  background: var(--ox-500);
  color: var(--ox-100);
}
.topbar .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar .brand img { width: 30px; height: 30px; }
.topbar .brand .txt { font-size: 13px; letter-spacing: .2em; }
.topbar .brand .sep { color: #6c6558; margin: 0 2px; }
.topbar .brand .where { color: #b9b1a1; }
.who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #cfc8ba; }
.who .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .02em;
}
.who .signout { color: #8a8273; text-decoration: none; font-size: 12px; letter-spacing: .04em; }
.who .signout:hover { color: #cfc8ba; }

.dev-note {
  background: var(--ox-500); color: var(--ox-200);
  font-size: 12px; text-align: center; padding: 7px 14px; letter-spacing: .03em;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 30px 22px 80px;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  gap: 26px;
  align-items: start;
}
@media (max-width: 860px) {
  .wrap { grid-template-columns: 1fr; gap: 20px; padding: 22px 16px 64px; }
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 22px 24px;
}
.eyebrow {
  font-family: var(--display);
  letter-spacing: .26em;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.card h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 25px;
  letter-spacing: .01em;
  margin: 0 0 6px;
}
.card .sub { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 16px; }

/* Capture */
textarea#dump {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 16px;
}
textarea#dump:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.actions { margin-top: 14px; }

.btn {
  font-family: var(--display);
  letter-spacing: .12em; text-transform: uppercase;
  font-size: 13px; font-weight: 600;
  padding: 12px 20px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer; transition: background .15s ease, color .15s ease, transform .1s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.btn.small { font-size: 11.5px; padding: 8px 14px; }
.btn.ghost { border-color: var(--line); color: var(--ink-soft); }
.btn.ghost:hover { background: var(--panel-2); color: var(--ink); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:disabled:hover { background: transparent; color: var(--ink); }

.savestate {
  font-size: 12.5px; color: var(--ink-faint);
  min-height: 18px; margin-top: 12px; letter-spacing: .02em;
  display: flex; align-items: center; gap: 7px;
}
.savestate .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--done); }
.savestate.saving .dot { background: var(--doing); animation: pulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .savestate.saving .dot { animation: none; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Structured results */
.result { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.result .eyebrow { margin-bottom: 10px; }
.result ul.bullets { margin: 0 0 18px; padding: 0 0 0 2px; list-style: none; }
.result ul.bullets li {
  position: relative; padding: 6px 0 6px 20px; font-size: 16px; line-height: 1.5; color: var(--ink);
  border-bottom: 1px dashed var(--line);
}
.result ul.bullets li::before {
  content: ""; position: absolute; left: 2px; top: 13px;
  width: 6px; height: 6px; background: var(--ink); border-radius: 50%;
}
.picklist { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.pick {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2);
}
.pick input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); }
.pick label { font-size: 15.5px; line-height: 1.45; cursor: pointer; }

/* The list */
.quickadd { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.quickadd input.title {
  flex: 1 1 200px; min-width: 0;
  font-family: var(--body); font-size: 16px; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
}
.quickadd input.title:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
select, input[type="date"] {
  font-family: var(--body); font-size: 14px; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px;
}

.progress { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; letter-spacing: .02em; }

.group { margin-bottom: 20px; }
.group h3 {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; font-size: 12px; color: var(--ink-faint);
  margin: 0 0 9px; display: flex; align-items: center; gap: 8px;
}
.group h3 .count { color: var(--ink-faint); font-weight: 400; }

.task {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 6px; border-bottom: 1px solid var(--line);
}
.task:last-child { border-bottom: none; }
.task .check {
  flex: 0 0 auto; margin-top: 1px;
  width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--ink-faint);
  background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.task .check:hover { border-color: var(--ink); }
.task.done .check { background: var(--done); border-color: var(--done); }
.task.done .check::after { content: "✓"; color: #fff; font-size: 14px; line-height: 1; }
.task.doing .check { border-color: var(--doing); }
.task .body { flex: 1 1 auto; min-width: 0; }
.task .ttl { font-size: 16px; line-height: 1.4; color: var(--ink); word-wrap: break-word; }
.task.done .ttl { color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.task.letgo { opacity: .55; }
.task.letgo .ttl { text-decoration: line-through; color: var(--ink-faint); }
.task .meta { display: flex; align-items: center; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.chip {
  font-size: 11.5px; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 5px;
}
.chip .ini { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-family: var(--display); font-size: 9.5px; }
.due { font-size: 12px; color: var(--ink-faint); }
.due.past { color: var(--doing); }   /* soft amber, never red */
.rowacts { display: flex; gap: 4px; align-items: center; }
.linkbtn {
  background: none; border: none; cursor: pointer; font-family: var(--body);
  font-size: 12px; color: var(--ink-faint); padding: 4px 6px; border-radius: 6px; letter-spacing: .02em;
}
.linkbtn:hover { color: var(--ink); background: var(--panel-2); }
.statusbtn {
  font-family: var(--body); font-size: 12px; color: var(--ink-soft);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; cursor: pointer;
}
.statusbtn:hover { border-color: var(--ink-faint); }

.empty { color: var(--ink-faint); font-size: 14px; padding: 8px 0 4px; font-style: italic; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: 999px;
  font-size: 13px; letter-spacing: .03em; box-shadow: var(--shadow); z-index: 50;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.toast.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ============ App shell (sidebar + main) ============ */
.app { display: grid; grid-template-columns: 252px minmax(0,1fr); min-height: 100vh; }
.side {
  background: var(--ox-500); color: #cfc8ba;
  display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 0; align-self: start; height: 100vh;
  padding: 22px 16px; border-right: 1px solid var(--ox-500);
}
.side-brand { padding: 2px 8px 10px; }
.side-brand img { width: 64px; height: auto; display: block; }
.nav { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; overflow-y: auto; }
.nav-label {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .22em;
  font-size: 10.5px; color: #6c6558; margin: 18px 8px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  color: #cfc8ba; font-family: var(--body); font-size: 14.5px;
  padding: 10px 12px; border-radius: 9px; transition: background .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--ox-500); color: var(--ox-100); }
.nav-item.active { background: var(--ox-500); color: #fff; }
.nav-item.proj { font-size: 14px; }
.nav-item.add { color: #8a8273; font-size: 13.5px; margin-top: 4px; }
.nav-ico { width: 18px; text-align: center; opacity: .8; font-size: 15px; }
.swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.swatch.big { width: 34px; height: 34px; border-radius: 8px; }
.side-foot { border-top: 1px solid var(--ox-500); padding-top: 14px; margin-top: 8px; }
.side-foot .who { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.side-foot .who-name { font-size: 14px; color: var(--ox-100); }
.side-foot .signout { font-size: 12px; color: #8a8273; text-decoration: none; letter-spacing: .04em; }
.side-foot .signout:hover { color: #cfc8ba; }

.main { padding: 34px 38px 96px; max-width: 1080px; }

.page-head { margin-bottom: 24px; }
.page-head .eyebrow { display: flex; align-items: center; gap: 8px; }
.page-head h1 {
  font-family: var(--display); font-weight: 600; font-size: 34px;
  letter-spacing: .01em; margin: 4px 0 6px;
}
.page-sub { font-size: 15px; color: var(--ink-soft); max-width: 640px; line-height: 1.55; margin: 0; }

.cols { display: grid; grid-template-columns: minmax(0,42%) minmax(0,58%); gap: 24px; align-items: start; }

/* Team: project progress cards */
.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 14px; margin-bottom: 24px; }
.prog-card {
  display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); transition: transform .12s ease, border-color .12s ease;
}
.prog-card:hover { transform: translateY(-1px); border-color: var(--ink-faint); }
.pc-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.pc-name { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .01em; }
.pc-meta { font-size: 12.5px; color: var(--ink-faint); }
.bar { display: block; height: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 99px; }
.bar.wide { width: 260px; max-width: 60vw; }
.proj-progress { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

/* Team: person sections */
.card.person { padding: 16px 18px; margin-bottom: 14px; }
.person-h { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 13px; color: var(--ink); margin: 0 0 8px; display: flex; gap: 8px; align-items: baseline; }
.person-h.muted { color: var(--ink-faint); }
.person-h .count { color: var(--ink-faint); font-weight: 400; font-size: 12px; }

/* Project board */
.board { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; align-items: start; }
.col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 14px 16px; }
.col-h { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--ink-faint); margin: 0 0 10px; }
.col-h .count { margin-left: 4px; }
.letgo-card { margin-top: 16px; }

.dest { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.dest label { font-size: 12.5px; color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; font-family: var(--display); }
.src-note { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 12px; font-style: italic; }

.chip.proj-chip .swatch { margin-right: 1px; }

/* Responsive */
@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .side {
    position: static; height: auto; flex-direction: row; align-items: center; gap: 4px;
    overflow-x: auto; padding: 10px 12px; border-right: none; border-bottom: 1px solid var(--ox-500);
  }
  .side-brand { padding: 0 10px 0 2px; }
  .side-brand img { width: 56px; }
  .nav { flex-direction: row; align-items: center; gap: 2px; overflow-x: auto; }
  .nav-label { display: none; }
  .nav-item { white-space: nowrap; padding: 8px 12px; }
  .nav-item .nav-ico { display: none; }
  .side-foot { display: none; }
  .main { padding: 22px 16px 80px; }
  .page-head h1 { font-size: 27px; }
}

/* ============ share / modal / project actions ============ */
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-head h2 { margin-top: 2px; }

.sharebar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 12px; margin: 4px 0 14px;
}
.sharebar .to { color: var(--ink-faint); font-size: 13px; }
.hint { font-size: 12.5px; color: var(--ink-faint); margin: -8px 0 12px; font-style: italic; }
.selbox { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--accent); flex: 0 0 auto; }

.proj-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.proj-actions .adot { color: var(--ink-faint); }
.proj-actions .linkbtn { font-size: 13px; }

.prog-card.static { cursor: default; }
.prog-card.static:hover { transform: none; border-color: var(--line); }

/* Modal */
.modal-bg {
  position: fixed; inset: 0; background: rgba(13,11,9,.55);
  display: grid; place-items: center; z-index: 60; padding: 20px;
}
.modal {
  background: var(--panel); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  width: 100%; max-width: 430px; padding: 26px 26px 22px;
}
.modal h3 { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 0 0 16px; letter-spacing: .01em; }
.modal .ml { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); font-family: var(--display); margin: 12px 0 6px; }
.minput { font-family: var(--body); font-size: 14px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; min-height: 38px; box-sizing: border-box; }
.minput:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.modal .minput { width: 100%; font-family: var(--body); font-size: 15px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.modal .minput:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.modal-hint { font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; margin: 12px 0 0; }
.mrow { margin-top: 18px; }

/* ============ registers (Overseer) ============ */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table.reg { width: 100%; border-collapse: collapse; font-size: 14px; }
table.reg th {
  text-align: left; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em;
  font-size: 10.5px; color: var(--ink-faint); padding: 11px 13px; background: var(--panel-2);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.reg td { padding: 11px 13px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink); }
table.reg tr:last-child td { border-bottom: none; }
table.reg tr:hover td { background: var(--panel-2); }
table.reg a { color: var(--accent); text-decoration: none; }
table.reg a:hover { text-decoration: underline; }
.muted { color: var(--ink-faint); }
.tdact { white-space: nowrap; text-align: right; }
.reg-total { text-align: right; font-family: var(--display); font-size: 15px; margin: 12px 4px 0; letter-spacing: .02em; }
.tdlogo { width: 40px; }
.favi {
  display: inline-grid; place-items: center; position: relative;
  width: 28px; height: 28px; border-radius: 7px; overflow: hidden;
  background: var(--ink); color: #fff; font-family: var(--display); font-size: 13px; font-weight: 600;
}
.favi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }

/* ============ org chart ============ */
.orgtree { overflow-x: auto; padding: 8px 4px 4px; }
.orgtree ul { position: relative; padding-top: 22px; display: flex; gap: 18px; margin: 0; list-style: none; justify-content: flex-start; }
.orgtree > ul { padding-top: 4px; }
.orgtree li { position: relative; padding: 22px 10px 0; text-align: center; }
/* connector lines */
.orgtree li::before, .orgtree li::after {
  content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 22px;
  border-top: 1.5px solid var(--line);
}
.orgtree li::after { right: auto; left: 50%; border-left: 1.5px solid var(--line); }
.orgtree li:only-child::before, .orgtree li:only-child::after { display: none; }
.orgtree li:first-child::before, .orgtree li:last-child::after { border: 0; }
.orgtree li:last-child::before { border-right: 1.5px solid var(--line); border-radius: 0 6px 0 0; }
.orgtree li:first-child::after { border-radius: 6px 0 0 0; }
.orgtree ul ul::before {
  content: ""; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1.5px solid var(--line);
}
.orgcard {
  display: inline-block; min-width: 150px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 11px 14px; text-align: left; box-shadow: var(--shadow);
}
.org-name { font-family: var(--display); font-weight: 600; font-size: 15px; }
.org-role { font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }
.org-email { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; word-break: break-all; }
.org-acts { margin-top: 7px; display: flex; gap: 4px; }

/* ============ capture pick rows ============ */
.pick-main { flex: 1; min-width: 0; }
.pick-ttl { display: block; font-size: 15.5px; line-height: 1.4; cursor: pointer; }
.pick-ctrls { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.pick-ctrls select, .pick-ctrls input { font-size: 12.5px; padding: 6px 8px; }
.pick-ctrls .pk-when { max-width: 190px; }
.chip.prio-high { background: var(--ox-100); border-color: var(--ox-200); color: var(--accent); }
.chip.prio-low { color: var(--ink-faint); }

/* ============ reg tools ============ */
.reg-tools { display: flex; align-items: center; gap: 8px; }
.reg-tools .linkbtn { font-size: 12px; }

/* status pills (pipeline) */
.spill { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-soft); }
.spill.s-new { background: var(--ox-100); color: var(--sig-ink); border-color: var(--ox-200); }
.spill.s-exploring { background: var(--ox-100); color: var(--ox-500); border-color: var(--ox-200); }
.spill.s-parked { background: var(--panel-2); color: var(--ink-faint); }
.spill.s-promoted { background: var(--olive-100); color: var(--olive); border-color: var(--olive-200); }
.spill.s-dropped { background: var(--ox-100); color: #8b8477; text-decoration: line-through; }

/* ============ notepad ============ */
.play-wrap { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 16px; margin-top: 14px; align-items: start; }
.note-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.note-item { text-align: left; background: none; border: 1px solid transparent; border-radius: 9px; padding: 9px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.note-item:hover { background: var(--panel-2); }
.note-item.active { background: var(--panel-2); border-color: var(--line); }
.ni-title { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ni-date { font-size: 11px; color: var(--ink-faint); }
.note-editor { min-height: 340px; display: flex; flex-direction: column; }
.note-title { font-family: var(--display); font-size: 20px; font-weight: 600; border: none; border-bottom: 1px solid var(--line); padding: 6px 2px; background: transparent; color: var(--ink); }
.note-title:focus { outline: none; border-bottom-color: var(--accent); }
.note-body { flex: 1; min-height: 300px; margin-top: 10px; border: none; resize: vertical; font-family: var(--body); font-size: 18px; line-height: 1.6; color: var(--ink); background: transparent; }
.note-body:focus { outline: none; }
.note-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.note-empty { color: var(--ink-faint); text-align: center; padding: 40px 0; }
@media (max-width: 760px) { .play-wrap { grid-template-columns: 1fr; } .note-list { flex-direction: row; overflow-x: auto; } .note-item { min-width: 140px; } }

/* ============ updates ============ */
.up-box { width: 100%; min-height: 90px; resize: vertical; font-family: var(--body); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; margin-bottom: 12px; }
.up-box:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.up-actions { gap: 10px; }
.update { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 12px; }
.up-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.up-who { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; }
.up-meta { font-size: 12px; color: var(--ink-faint); margin-left: auto; }
.up-vis { padding: 2px 8px; border-radius: 999px; font-size: 11px; }
.up-vis.team { background: var(--olive-100); color: var(--olive); }
.up-vis.private { background: var(--panel-2); color: var(--ink-faint); border: 1px solid var(--line); }
.up-body-text { font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.org-role.ph { color: var(--ink-faint); font-style: italic; cursor: pointer; }

/* ============ print / PDF ============ */
@media print {
  .side, .dev-note, .toast, .topbar { display: none !important; }
  .app { display: block; }
  .main { padding: 0; max-width: none; }
  .btn, .linkbtn, .reg-tools, .card-head button, .proj-actions, #reg-add, .quickadd, .sharebar { display: none !important; }
  .card, .prog-card, .update { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  body { background: #fff; }
  a { color: #000; text-decoration: none; }
}

/* ============ onboarding tour + foot links ============ */
.foot-links { display: flex; align-items: center; gap: 14px; }
.linkish { background: none; border: none; cursor: pointer; font-family: var(--body); padding: 0; }
.modal { max-height: 88vh; overflow-y: auto; }
.tour-intro { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; }
.tour-list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 9px; }
.tour-list li { font-size: 14px; line-height: 1.5; color: var(--ink); padding-left: 14px; position: relative; }
.tour-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tour-list b { font-family: var(--display); font-weight: 600; letter-spacing: .02em; }
.ptip-upd { margin: -2px 0 12px; font-size: 13.5px; color: var(--ink-soft); }
.ptip-new { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 7px; border-radius: 99px; background: var(--ink); color: var(--paper); vertical-align: 1px; }
.tour-tip { font-size: 13px; color: var(--ink-soft); background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin: 0; }

/* ============ Colin speedway '54' plate ============ */
.avatar.plate { background: #fff; color: #111; border-radius: 5px; font-style: italic; font-weight: 700; letter-spacing: -.03em; box-shadow: inset 0 0 0 2px #111; }
.chip .ini { font-style: normal; }

/* ============ find cheaper ============ */
.linkbtn.cheaper { color: var(--accent); }
.alt { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--panel-2); }
.alt-main { display: flex; align-items: center; gap: 8px; }
.alt-name { font-weight: 600; font-size: 15px; }
.alt-approx { font-size: 12px; color: var(--ink-faint); }
.alt-link { margin-left: auto; text-decoration: none; color: var(--accent); font-size: 15px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--line); }
.alt-link:hover { background: #fff; }
.alt-note { font-size: 13px; color: var(--ink-soft); margin-top: 4px; line-height: 1.45; }

/* shipment statuses */
.spill.s-preparing { background: var(--ox-100); color: var(--sig-ink); }
.spill.s-in-transit { background: var(--ox-100); color: var(--ox-500); border-color: var(--ox-200); }
.spill.s-out-for-delivery { background: var(--ox-100); color: var(--ox-500); border-color: var(--ox-200); }
.spill.s-delivered { background: var(--olive-100); color: var(--olive); border-color: var(--olive-200); }
.spill.s-delayed { background: var(--ox-100); color: var(--accent); border-color: var(--ox-200); }

/* ============ artists ============ */
.artist { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 20px; align-items: start; }
@media (max-width: 640px) { .artist { grid-template-columns: 1fr; } }
.artist-side { display: flex; flex-direction: column; gap: 8px; }
.artist-avatar { width: 120px; height: 120px; border-radius: 12px; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 40px; }
.artist-avatar.plate { background: #fff; color: #111; font-style: italic; box-shadow: inset 0 0 0 4px #111; }
.artist h2 { margin: 0 0 4px; }
.artist .role { color: var(--ink-faint); font-size: 13px; margin: 0 0 12px; }
.artist .bio { font-size: 16px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; }
.artist .lock { font-size: 12px; color: var(--ink-faint); margin-top: 12px; font-style: italic; }

/* House of McPolin logo avatar (Aaron) */
.artist-avatar.logo { background: #14110f; padding: 12px; }
.artist-avatar.logo img { width: 100%; height: 100%; object-fit: contain; }
.avatar.logo { background: #14110f; padding: 3px; overflow: hidden; }
.avatar.logo img { width: 100%; height: 100%; object-fit: contain; }

/* ============================================================
   Refero polish pass — Chronicle discipline on the locked brand:
   hairline borders, ONE soft shadow, more air, calmer tables,
   smooth view-change only. (30 Sep 2026)
   ============================================================ */
:root { --shadow: 0 2px 24px rgba(20,17,15,.06); }

/* more negative space + reading rhythm */
.main { padding: 46px 50px 104px; }
@media (max-width: 900px) { .main { padding: 30px 22px 80px; } }
@media (max-width: 760px) { .main { padding: 22px 16px 76px; } }
.page-head { margin-bottom: 32px; }
.page-head h1 { text-wrap: balance; letter-spacing: -.01em; }
.page-sub { max-width: 60ch; }
.card h2, .modal h3, .pc-name, .artist h2 { text-wrap: balance; }
.card { padding: 26px 28px 28px; }
.cols { gap: 30px; }

/* one elevation only — everything else leans on the hairline --line */
.update, .col, .card.person, .letgo-card { box-shadow: none; }
.col { background: var(--panel-2); }
.prog-card { box-shadow: var(--shadow); }

/* eyebrows a touch more editorial */
.eyebrow { letter-spacing: .28em; }

/* registers: roomier rows, wrap long values so actions never get cut off */
.tablewrap { border-radius: 12px; }
table.reg th { padding: 12px 16px; }
table.reg td { padding: 14px 16px; overflow-wrap: anywhere; }
table.reg tr:hover td { background: var(--ox-100); }
.tdact { white-space: nowrap; overflow-wrap: normal; }
.reg-total { margin-top: 16px; }

/* smooth navigation — fades the panel on view change only, honours reduced motion */
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.main.nav-anim { animation: viewIn .18s ease both; }
@media (prefers-reduced-motion: reduce) { .main.nav-anim { animation: none; } }

/* ============ sample / placeholder data ============ */
.sample-banner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  background: var(--ox-100); color: var(--sig-ink); border-bottom: 1px solid var(--panel-2); padding: 9px 16px; font-size: 13px; }
.sb-btn { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 600;
  background: var(--sig-ink); color: #fff; border: none; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.sb-btn:hover { background: var(--sig-ink); }
.sample-tag { display: inline-block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  padding: 2px 7px; border-radius: 999px; background: var(--ox-100); color: var(--sig-ink); border: 1px dashed var(--line); vertical-align: middle; }
tr.is-sample td { background: var(--panel-2); }
tr.is-sample td:first-child { box-shadow: inset 3px 0 0 var(--line); }
.task.is-sample { border-left: 3px dashed var(--line); padding-left: 9px; }

/* ============ Colin email-in highlight ============ */
.email-hint { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; margin-bottom: 26px; }
.eh-title { font-family: var(--display); font-weight: 600; font-size: 15px; margin: 0 0 4px; letter-spacing: .01em; }
.eh-text { font-size: 13.5px; color: var(--ink-soft); margin: 0; line-height: 1.5; max-width: 60ch; }
.eh-acts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
@media (max-width: 640px) { .email-hint { flex-direction: column; align-items: flex-start; } }

/* ============ F1 mode toggle (Colin) ============ */
.f1-toggle { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: 1px solid #2a2a33;
  color: #b9b1a1; font-family: var(--body); font-size: 12.5px; padding: 8px 10px; border-radius: 8px; cursor: pointer; margin-bottom: 10px; }
.f1-toggle:hover { border-color: #3a3a45; color: #f4f1e9; }
.f1-chk { width: 26px; height: 14px; border-radius: 999px; background: #3a3a45; position: relative; transition: background .15s; flex: 0 0 auto; }
.f1-chk::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: left .15s; }
.f1-toggle.on .f1-chk { background: #e10600; }
.f1-toggle.on .f1-chk::after { left: 14px; }
@media (prefers-reduced-motion: reduce) { .f1-chk, .f1-chk::after { transition: none; } }

/* ============ F1 racing theme (body.f1) — F1 red + carbon, italic speed ============ */
body.f1 { --accent: #e10600; }
body.f1 .side { background: #0b0b0f; border-right-color: #1c1c22; }
body.f1 .nav-item.active { background: #e10600; color: #fff; }
body.f1 .nav-item:hover { background: #17171d; }
body.f1 .eyebrow { color: #e10600; }
body.f1 .page-head { border-bottom: 2px solid #e10600; padding-bottom: 14px; }
body.f1 .page-head h1, body.f1 .card h2 { font-style: italic; letter-spacing: -.01em; }
body.f1 .btn.primary { background: #e10600; border-color: #e10600; }
body.f1 .btn.primary:hover { background: #b60500; border-color: #b60500; }
body.f1 .who .avatar, body.f1 .side-foot .who .avatar { background: #e10600; }
body.f1 .avatar.plate { box-shadow: inset 0 0 0 2px #e10600; color: #111; }
body.f1 .bar > span { background: #e10600 !important; }
body.f1 .wordmark .where { color: #e10600; }

/* ============ collaboration upgrades ============ */
/* undo toast */
.toast { display: inline-flex; align-items: center; gap: 12px; }
/* The toast itself stays click-through; only its action button is clickable
   (a descendant can re-enable pointer events even when the parent disables them). */
.toast-btn { background: none; border: none; color: var(--ox-200); font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 600; cursor: pointer; padding: 4px 8px; pointer-events: auto; }
.toast-btn:hover { color: #fff; }

/* needs-you / urgency panel */
.card.needs { border-left: 3px solid var(--accent); }
.card.needs h2 { color: var(--accent); }

/* flag star */
.flagbtn { font-size: 14px; color: var(--ink-faint); }
.flagbtn:hover { color: var(--doing); }
.flagbtn.on { color: var(--ox-500); }

/* social suggested channels */
.suggest-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.suggest-label { font-size: 12.5px; color: var(--ink-faint); letter-spacing: .04em; }

/* activity feed */
.act-row { display: flex; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.act-row:last-child { border-bottom: none; }
.act-row .ini { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 10px; flex: 0 0 auto; margin-top: 1px; }
.act-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.act-text { font-size: 14.5px; line-height: 1.45; }
.act-meta { font-size: 11.5px; color: var(--ink-faint); }

/* nav badge (unseen activity) */
.nav-item { position: relative; }
.nav-badge { margin-left: auto; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 999px; display: inline-grid; place-items: center; padding: 0 5px; }
body.f1 .nav-badge { background: #e10600; }

/* public / shared-to-team cue */
.public-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .04em; color: var(--olive); background: var(--olive-100); border: 1px solid var(--olive-200); border-radius: 999px; padding: 5px 12px; margin: 0 0 18px; }
body.f1 .public-badge { background: #1c1c22; color: #c9c9d2; border-color: #3a3a45; }

/* ============ Hub tabs (My HUD / Ideas & updates / Notepad) ============ */
.hub-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.hub-tab { background: none; border: none; cursor: pointer; font-family: var(--display); font-weight: 500; font-size: 14.5px; letter-spacing: .02em; color: var(--ink-faint); padding: 10px 16px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.hub-tab:hover { color: var(--ink); }
.hub-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
body.f1 .hub-tab.on { border-bottom-color: #e10600; }

/* ============ Finances — Xero-style tiles + tab switcher ============ */
.fin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.fin-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.ft-label { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); font-family: var(--display); }
.ft-val { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: .01em; line-height: 1.1; }
.ft-val small { font-size: 13px; color: var(--ink-faint); font-weight: 400; }
.ft-sub { font-size: 12px; color: var(--ink-faint); }
.fin-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.fin-tab { background: none; border: 1px solid var(--line); cursor: pointer; font-family: var(--display); font-size: 13px; letter-spacing: .04em; color: var(--ink-soft); padding: 8px 14px; border-radius: 999px; }
.fin-tab:hover { background: var(--panel-2); color: var(--ink); }
.fin-tab.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fin-tab .ft-count { font-size: 11px; color: var(--ink-faint); margin-left: 5px; }
.fin-tab.on .ft-count { color: rgba(255,255,255,.65); }
body.f1 .fin-tab.on { background: #e10600; border-color: #e10600; }

/* ============ easier editing affordances ============ */
.task .ttl[data-act="edittask"] { cursor: pointer; }
.task .ttl[data-act="edittask"]:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
table.reg tr.rowedit { cursor: pointer; }

/* ============ v2: inline cell editing, person chips, group search ============ */
.cell-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
  padding: 5px 7px; border: 1px solid var(--accent); border-radius: 6px; background: var(--paper);
  color: var(--ink); outline: none; }
.cell-input:focus { box-shadow: 0 0 0 3px rgba(122,32,32,.12); }
td.cell { cursor: text; }
td.cell:hover { background: var(--panel-2); }
.chip.person-chip { border: 1px solid var(--line); background: var(--panel); border-left-width: 3px; }
.chip.person-chip[data-act="reassign"] { cursor: pointer; }
.chip.person-chip[data-act="reassign"]:hover { background: var(--panel-2); }
.grp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.grp-search { flex: 1 1 auto; max-width: 340px; font: inherit; font-size: 13px; padding: 9px 13px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); outline: none; }
.grp-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(122,32,32,.10); }
.grp-search::placeholder { color: var(--ink-faint); }

/* ============ v2: task list controls (search / filter / sort / paging) ============ */
.tl-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.tl-search { flex: 1 1 200px; min-width: 150px; font: inherit; font-size: 13px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); outline: none; }
.tl-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(122,32,32,.10); }
.tl-filter, .tl-sort { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); color: var(--ink); cursor: pointer; }
.tl-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.tl-count { font-size: 12px; color: var(--ink-faint); font-family: var(--display); letter-spacing: .04em; }
.linkbtn[disabled] { opacity: .35; cursor: default; pointer-events: none; }

/* base avatar bubble (used outside chips too, e.g. team headings) */
.ini { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); color: #fff; font-family: var(--display); font-size: 10px; font-style: normal; vertical-align: middle; }
.person-h .ini { margin-right: 2px; }

/* keep personal plans simple — hide the assignee picker when kept private */
.result.to-personal .pk-assignee { display: none; }

/* ============ v2: My Archive (links to your own folders) ============ */
.arch-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 10px; }
.arch-add select { font: inherit; font-size: 13px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
.arch-add .title { flex: 1 1 180px; min-width: 140px; }
.public-badge.private { color: var(--ink-faint); }
.arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.arch-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; background: var(--panel); }
.arch-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; color: #fff; }
.arch-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.arch-name { font-family: var(--display); font-size: 14px; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-name:hover { text-decoration: underline; }
.arch-meta { font-size: 11.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ v2: Team — people panels + member profile ============ */
.section-eyebrow { margin: 26px 0 12px; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.member-card { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 20px 14px 16px;
  cursor: pointer; font: inherit; transition: box-shadow .15s, transform .15s; }
.member-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.member-card.muted { opacity: .8; }
.mc-name { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); }
.mc-role { font-size: 12px; color: var(--ink-soft); }
.mc-count { font-size: 11px; color: var(--ink-faint); font-family: var(--display); letter-spacing: .03em; margin-top: 2px; }
.m-avatar { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  font-family: var(--display); font-weight: 600; font-size: 22px; }
.m-avatar.plate { background: #fff; color: #111; font-style: italic; box-shadow: inset 0 0 0 3px #111; }
.m-avatar.logo { background: #14110f; padding: 9px; }
.m-avatar.logo img { width: 100%; height: 100%; object-fit: contain; }
.m-avatar.xl { width: 84px; height: 84px; border-radius: 16px; font-size: 32px; }
.m-avatar.xl.logo { padding: 13px; }
body.f1 .m-avatar.plate { box-shadow: inset 0 0 0 3px #e10600; }
.member-head { display: flex; align-items: center; gap: 18px; padding-left: 16px; margin-top: 6px; }
.member-head h1 { margin: 0 0 2px; }
.member-head .role { margin: 0 0 4px; color: var(--ink-soft); }
.linkbtn.back { display: inline-block; margin-bottom: 14px; }

/* ============ v2: collapsible + draggable sidebar projects ============ */
.nav-label.collapser { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: none;
  cursor: pointer; font: inherit; text-align: left; padding: 0; color: inherit; }
.nav-label.collapser .chev { font-size: 10px; width: 10px; display: inline-block; transition: transform .12s; opacity: .7; }
.nav-label.collapser:hover { opacity: .85; }
.nav-item.proj { position: relative; }
.nav-item.proj .drag-grip { opacity: 0; cursor: grab; font-size: 11px; letter-spacing: -2px; color: var(--side-ink-faint, rgba(255,255,255,.4)); margin-right: 1px; }
.nav-item.proj:hover .drag-grip { opacity: .6; }
.nav-item.proj.dragging { opacity: .4; }
.nav-item.proj .proj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ v2: Kanban drag ============ */
.task.draggable { cursor: grab; }
.task.draggable:active { cursor: grabbing; }
.task.dragging { opacity: .45; }
.board .col { border-radius: var(--radius); transition: background .12s, box-shadow .12s; }
.board .col.drop-hot { background: var(--panel-2); box-shadow: inset 0 0 0 2px var(--accent); }
.board .col.drop-hot .plist { min-height: 40px; }

/* ============ v2: Attachments (links + uploads) ============ */
.attach-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 14px; }
.attach-add .title { flex: 1 1 220px; min-width: 160px; }
.upload-btn { cursor: pointer; }
.attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.attach-card { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 13px; background: var(--panel); }
.attach-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; color: #fff; }
.attach-ico.file { background: var(--accent); }
.attach-ico.link { background: var(--ink-soft); }
.attach-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.attach-name { font-family: var(--display); font-size: 13.5px; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-name:hover { text-decoration: underline; }
.attach-meta { font-size: 11px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowacts [data-act="attach"] { text-decoration: none; }

/* ============ v2: planner "suggest more" ============ */
.suggest-row-wrap { align-items: center; gap: 12px; margin: 4px 0 6px; }
.sugg-status { font-size: 12px; color: var(--ink-faint); }
.pick.suggested { background: var(--panel-2); border-radius: 8px; }
.sugg-tag { font-family: var(--display); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }

/* ============ v2.1: Home dashboard (Asana/Notion/Slack-style) ============ */
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 2px 0 20px; flex-wrap: wrap; }
.home-head h1 { margin: 0; font-size: clamp(26px, 3.4vw, 38px); }
.home-date { margin: 0 0 4px; font-family: var(--display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; cursor: pointer; font: inherit; text-align: left; transition: box-shadow .14s, transform .14s; }
.stat:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.stat-n { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: .01em; }
.stat-l { font-size: 12px; color: var(--ink-faint); font-family: var(--display); letter-spacing: .06em; text-transform: uppercase; }
.stat.warn .stat-n { color: var(--accent); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.home-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.home-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 16px; }
.side-h { font-size: 18px; }
.proj-mini-grid { display: flex; flex-direction: column; gap: 10px; }
.proj-mini { display: flex; flex-direction: column; gap: 7px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 13px; cursor: pointer; font: inherit; text-align: left; transition: box-shadow .14s; }
.proj-mini:hover { box-shadow: var(--shadow); }
.pm-top { display: flex; align-items: center; gap: 8px; }
.pm-name { font-family: var(--display); font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-bar { height: 5px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.pm-bar > span { display: block; height: 100%; }
.pm-meta { font-size: 11px; color: var(--ink-faint); }
.capture-card[hidden] { display: none; }
@media (max-width: 860px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-side { position: static; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .home-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .home-head .btn { align-self: stretch; text-align: center; }
}

/* ============ v2.1: dashboard rollout — shared tiles ============ */
.stat.stat-static { cursor: default; }
.stat.stat-static:hover { box-shadow: none; transform: none; }
.stat-row.tiles-auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat-static .stat-n { font-size: 26px; }
#grp-tiles:empty { display: none; }
#grp-tiles { margin-bottom: 20px; }
@media (max-width: 860px) { .stat-row.tiles-auto { grid-template-columns: repeat(2, 1fr); } }

/* ============ v2.2: Updates on Home (target selector + project tag) ============ */
.up-actions { align-items: center; flex-wrap: wrap; }
.up-target { font: inherit; font-size: 13px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); flex: 1 1 auto; min-width: 180px; cursor: pointer; }
.up-vis.proj { display: inline-flex; align-items: center; gap: 5px; background: var(--panel-2); color: var(--ink-soft); border: 1px solid var(--line); }
.up-vis.proj .swatch { width: 9px; height: 9px; border-radius: 2px; }
#updates-card .up-box { min-height: 72px; }

/* ============ v3: working task controls (date / priority) + drag handle ============ */
.ctl-chip { cursor: pointer; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
  font-family: var(--display); font-size: 11.5px; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; line-height: 1.5; }
.ctl-chip:hover { background: var(--panel-2); color: var(--ink); border-color: var(--ink-faint); }
.due-chip.set { color: var(--ink); border-color: var(--ink-faint); }
.due-chip.past { color: var(--accent); border-color: var(--accent); background: var(--ox-100); }
.prio-chip.prio-high { color: var(--accent); border-color: var(--ox-200); background: var(--ox-100); }
.prio-chip.prio-normal { color: var(--ink); border-color: var(--ink-faint); }
.prio-chip.prio-low { color: var(--ink-faint); }
.prio-chip.prio-none { border-style: dashed; color: var(--ink-faint); }
.due-edit { display: inline-flex; align-items: center; gap: 6px; }
.due-edit .cell-input { width: auto; }
.row-grip { flex: 0 0 auto; align-self: center; cursor: grab; color: var(--ink-faint); opacity: 0; font-size: 13px; margin-right: -4px; user-select: none; }
.task:hover .row-grip { opacity: .55; }
.task.dragging .row-grip { cursor: grabbing; }

/* ============ v3: compact density ============ */
body.compact .main { padding: 22px 26px 80px; }
body.compact .card { padding: 15px 17px 16px; box-shadow: none; }
body.compact .task { padding: 6px 4px; gap: 9px; }
body.compact .task .check { width: 18px; height: 18px; }
body.compact .task .ttl { font-size: 14px; line-height: 1.3; }
body.compact .meta { gap: 5px; margin-top: 3px; }
body.compact .home-head { margin-bottom: 14px; }
body.compact .home-head h1 { font-size: clamp(21px, 2.4vw, 27px); }
body.compact .page-head { margin-bottom: 10px; }
body.compact .page-head h1 { font-size: 26px; }
body.compact .page-sub, body.compact .sub { font-size: 13px; }
body.compact .stat { padding: 10px 13px; }
body.compact .stat-n { font-size: 21px; }
body.compact .stat-row { gap: 10px; margin-bottom: 14px; }
body.compact .home-grid, body.compact .home-main, body.compact .home-side { gap: 12px; }
body.compact h2 { font-size: 19px; }
body.compact .board { gap: 10px; }

/* ============ v3: mini-popover (date / priority on tasks) ============ */
.mini-pop { position: absolute; z-index: 1000; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 30px rgba(20,17,15,.16); padding: 12px 13px; min-width: 190px; }
.mini-pop .mp-l { display: block; font-family: var(--display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 2px 0 4px; }
.mini-pop .cell-input { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.mini-pop .mp-row { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.mp-opts { display: flex; flex-direction: column; gap: 4px; }
.mp-opt { text-align: left; font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); cursor: pointer; }
.mp-opt:hover { background: var(--panel-2); }
.mp-opt.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* ============ v3: project planner ============ */
.quickadd-slim { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
#pp-result:empty { display: none; }
#pp-dump { min-height: 80px; }

/* ============ v3: project view switcher ============ */
.view-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 14px; }
.view-tab { background: none; border: 1px solid var(--line); cursor: pointer; font-family: var(--display);
  font-size: 13px; letter-spacing: .03em; color: var(--ink-soft); padding: 7px 14px; border-radius: 999px; }
.view-tab:hover { background: var(--panel-2); color: var(--ink); }
.view-tab.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
body.f1 .view-tab.on { background: #e10600; border-color: #e10600; }

/* Grid view */
.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tcard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.tcard.done .tcard-title { text-decoration: line-through; color: var(--ink-faint); }
.tcard-top { display: flex; align-items: center; justify-content: space-between; }
.tcard-status { font-family: var(--display); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.tcard-title { font-family: var(--display); font-size: 15px; line-height: 1.3; cursor: pointer; }
.tcard-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; }
.person-chip.ghosty { border-style: dashed; color: var(--ink-faint); }

/* Timeline view */
.tl-card { padding: 0; overflow: hidden; }
.tl-scroll { overflow-x: auto; }
.tl-inner { position: relative; }
.tl-head-row { display: flex; position: sticky; top: 0; z-index: 2; background: var(--panel); border-bottom: 1px solid var(--line); }
.tl-corner { width: var(--labelw); flex: 0 0 var(--labelw); border-right: 1px solid var(--line); }
.tl-head { position: relative; height: 30px; }
.tl-day { position: absolute; top: 0; height: 2000px; box-sizing: border-box; }
.tl-day.we { background: rgba(20,17,15,.025); }
.tl-day .tl-tick { position: absolute; top: 8px; left: 3px; font-size: 10px; color: var(--ink-faint); font-family: var(--display); white-space: nowrap; }
.tl-row { display: flex; align-items: center; min-height: 40px; border-bottom: 1px solid var(--line); }
.tl-label { width: var(--labelw); flex: 0 0 var(--labelw); padding: 8px 12px; font-size: 13px; font-family: var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid var(--line); background: var(--panel); position: sticky; left: 0; z-index: 1; }
.tl-track { position: relative; height: 40px; }
.tl-bar { position: absolute; top: 8px; height: 24px; border-radius: 6px; color: #fff; font-size: 11px; font-family: var(--display);
  line-height: 24px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.tl-bar:hover { filter: brightness(1.06); }
.tl-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); z-index: 1; pointer-events: none; }
.tl-unscheduled { padding: 16px 18px; border-top: 1px solid var(--line); }

/* ============ v3: collapsible left panel ============ */
.side-toggle { align-self: flex-end; background: var(--accent); border: 1px solid var(--accent); color: #fff;
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1; padding: 0;
  margin-bottom: 2px; transition: filter .12s, transform .12s; flex: 0 0 auto; box-shadow: 0 1px 4px rgba(122,32,32,.4); }
.side-toggle:hover { filter: brightness(1.12); transform: scale(1.05); }
@media (min-width: 761px) {
  .app { transition: grid-template-columns .16s ease; }
  body.side-collapsed .app { grid-template-columns: 70px minmax(0,1fr); }
  body.side-collapsed .side { padding: 22px 10px; align-items: center; }
  body.side-collapsed .side-toggle { align-self: center; }
  body.side-collapsed .side-brand { padding: 6px 0 14px; }
  body.side-collapsed .side-brand img { width: 42px; }
  body.side-collapsed .nav { width: 100%; }
  body.side-collapsed .nav-item { justify-content: center; gap: 0; padding: 11px 0; }
  body.side-collapsed .nav-item > span:not(.nav-ico):not(.swatch) { display: none; }
  body.side-collapsed .nav-ico { width: auto; }
  body.side-collapsed .nav-label { display: none; }
  body.side-collapsed #nav-projects .nav-item .swatch { width: 15px; height: 15px; }
  body.side-collapsed .side-foot { width: 100%; }
  body.side-collapsed .side-foot .who { justify-content: center; margin-bottom: 0; }
  body.side-collapsed .side-foot .who-name,
  body.side-collapsed .side-foot .foot-links { display: none; }
}

@media (min-width: 761px) {
  body.side-collapsed #f1-label { display: none; }
  body.side-collapsed #f1-toggle { justify-content: center; width: 100%; }
  body.side-collapsed #density-toggle { display: none; }
}

@media (max-width: 760px) { .side-toggle { display: none; } body.side-collapsed .app { grid-template-columns: 1fr; } }

/* ============ v3: minimal Home header (greeting + What's-on-me removed) ============ */
.home-head-min { justify-content: flex-end; margin-bottom: 16px; }
@media (max-width: 860px) { .home-head-min .btn { align-self: stretch; } }

/* ============ v3: Home — actions + collapsible sections + quick assign ============ */
.home-actions { justify-content: flex-start; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.coll-head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; padding: 0; text-align: left; font: inherit; color: inherit; }
.coll-left { min-width: 0; }
.coll-left h2 { margin: 0; }
.coll-left .eyebrow { margin-bottom: 2px; }
.coll-body { margin-top: 14px; }
.coll.is-collapsed .coll-body { display: none; }
/* obvious, coloured collapse/expand chevron */
.coll-chev { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: var(--accent); font-size: 13px; line-height: 1; transition: transform .15s, filter .12s;
  box-shadow: 0 1px 4px rgba(122,32,32,.3); }
.coll-head:hover .coll-chev { filter: brightness(1.12); }
.coll.is-collapsed .coll-chev { transform: rotate(-90deg); }
/* quick assign form */
.qas-title { margin-bottom: 12px; }
.qas-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; max-width: 480px; margin-bottom: 14px; }
.qas-l { font-family: var(--display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.qas-grid select, .qas-grid input { font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); width: 100%; box-sizing: border-box; }
.qas-grid.to-personal #qas-who { opacity: .45; pointer-events: none; }

/* ============ v4: interactive timeline (drag / resize / snap / zoom) ============ */
.tlx { padding: 0; overflow: hidden; }
.tlx-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tlx-zoom { display: flex; align-items: center; gap: 8px; }
.tlx-zbtn { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.tlx-zbtn:hover { filter: brightness(1.12); }
.tlx-slider { width: 140px; accent-color: var(--accent); cursor: pointer; }
.tlx-zname { font-family: var(--display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); min-width: 62px; }
.tlx-hint { font-size: 12px; color: var(--ink-faint); margin-left: auto; }
.tlx-scroll { overflow-x: auto; overflow-y: hidden; position: relative; }
.tlx-inner { position: relative; }
.tlx-head { display: flex; position: sticky; top: 0; z-index: 4; background: var(--panel); border-bottom: 1px solid var(--line); }
.tlx-corner { width: var(--labelw); flex: 0 0 var(--labelw); position: sticky; left: 0; z-index: 5; background: var(--panel); border-right: 1px solid var(--line); }
.tlx-scale { position: relative; height: 46px; }
.tlx-months { position: relative; height: 22px; }
.tlx-month { position: absolute; top: 5px; padding-left: 6px; font-family: var(--display); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; border-left: 1px solid var(--line); }
.tlx-days { position: relative; height: 24px; }
.tlx-dlabel { position: absolute; top: 3px; text-align: center; font-size: 10.5px; color: var(--ink-faint); font-family: var(--display); white-space: nowrap; }
.tlx-dlabel.wk { text-align: left; padding-left: 3px; }
.tlx-dlabel.we { color: #b9b2a6; }
.tlx-body { position: relative; }
.tlx-grid { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.tlx-we { position: absolute; top: 0; bottom: 0; background: rgba(20,17,15,.035); }
.tlx-wline { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(20,17,15,.06); }
.tlx-mline { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(20,17,15,.16); }
.tlx-todaycol { position: absolute; top: 0; bottom: 0; background: rgba(157,41,25,.06); }
.tlx-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); z-index: 2; pointer-events: none; }
.tlx-row { display: flex; align-items: stretch; min-height: 38px; border-bottom: 1px solid rgba(20,17,15,.05); position: relative; }
.tlx-label { width: var(--labelw); flex: 0 0 var(--labelw); display: flex; align-items: center; gap: 7px; padding: 6px 10px; font-size: 13px; position: sticky; left: 0; z-index: 3; background: var(--panel); border-right: 1px solid var(--line); overflow: hidden; }
.tlx-ltxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlx-label .ini { flex: 0 0 auto; }
.tlx-grow { background: var(--panel-2); min-height: 34px; }
.tlx-grow .tlx-label { background: var(--panel-2); }
.tlx-glabel { font-family: var(--display); font-weight: 600; letter-spacing: .02em; }
.tlx-gcount { margin-left: auto; font-size: 11px; color: var(--ink-faint); font-weight: 400; }
.tlx-gspan { position: absolute; top: 14px; height: 6px; border-radius: 3px; opacity: .55; }
.tlx-track { position: relative; height: 38px; }
.tlx-bar { position: absolute; top: 6px; height: 26px; border-radius: 7px; color: #fff; font-size: 12px; font-family: var(--display); letter-spacing: .02em;
  display: flex; align-items: center; cursor: grab; touch-action: none; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: left .08s ease-out, width .08s ease-out, box-shadow .12s; z-index: 1; }
.tlx-bar:hover { box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.tlx-bar.dragging { cursor: grabbing; z-index: 6; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.tlx-bar.done { opacity: .6; text-decoration: line-through; }
.tlx-bar.overdue { outline: 2px solid rgba(157,41,25,.35); outline-offset: 1px; }
.tlx-btxt { flex: 1; padding: 0 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.tlx-h { width: 9px; align-self: stretch; cursor: ew-resize; flex: 0 0 auto; border-radius: 7px; }
.tlx-h:hover, .tlx-bar.dragging .tlx-h { background: rgba(255,255,255,.28); }
.tlx-badge { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper);
  font-size: 11px; padding: 4px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.tlx-badge:empty { display: none; }
.tlx-empty { padding: 22px 16px; color: var(--ink-faint); font-style: italic; position: sticky; left: 0; }
.tlx-tray { padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.tlx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tlx-chip { padding: 6px 11px; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 13px; cursor: grab; touch-action: none; user-select: none; }
.tlx-chip:hover { box-shadow: var(--shadow); }
.tlx-ghost { position: fixed; z-index: 2000; pointer-events: none; box-shadow: 0 8px 22px rgba(0,0,0,.22); background: var(--panel); }
.tlx-guide { position: absolute; top: 0; bottom: 0; background: rgba(157,41,25,.16); border-left: 2px solid var(--accent); z-index: 2; pointer-events: none; display: none; }
@media (max-width: 760px) { .tlx-hint { display: none; } .tlx-slider { width: 100px; } }

/* ============ v4: AI project assistant ============ */
.assist-card .eyebrow { color: var(--accent); }
.assist-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 14px; }
.assist-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; font-size: 14px; line-height: 1.4; }
.assist-item:hover { background: var(--panel-2); }
.assist-item input { margin-top: 3px; accent-color: var(--accent); }
.assist-item.is-del { border-color: var(--ox-200); }

/* ============ v4: ⌘K search ============ */
.modal.modal-search { width: min(640px, 94vw); padding: 0; overflow: hidden; }
.sp-input { width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid var(--line); padding: 18px 20px; font: inherit; font-size: 17px; outline: none; background: var(--panel); color: var(--ink); }
.sp-res { max-height: 60vh; overflow-y: auto; padding: 6px; }
.sp-res .empty { padding: 14px; }
.sp-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; padding: 10px 12px; border-radius: 9px; cursor: pointer; font: inherit; color: var(--ink); }
.sp-item:hover, .sp-item.on { background: var(--panel-2); }
.sp-item.on { box-shadow: inset 3px 0 0 var(--accent); }
.sp-ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--panel-2); color: var(--accent); flex: 0 0 auto; }
.sp-main { display: flex; flex-direction: column; min-width: 0; }
.sp-title { font-family: var(--display); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-sub { font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-foot { margin: 0; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-faint); }
.nav-search .kbd { margin-left: auto; font-family: var(--display); font-size: 10.5px; color: #8a8273; border: 1px solid #2c261f; border-radius: 5px; padding: 1px 6px; }
@media (min-width: 761px) { body.side-collapsed .nav-search .kbd { display: none; } }
@keyframes flashrow { 0% { background: rgba(157,41,25,.22); } 100% { background: transparent; } }
.flash, tr.flash td { animation: flashrow 2.4s ease-out; }

/* ============ v4: account "used for" chips ============ */
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 14px; }
.cat-l { font-family: var(--display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-right: 4px; }
.cat-chip { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink-soft); }
.cat-chip:hover { background: var(--panel-2); }
.cat-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.tlx-month { overflow: visible; border-left: 1px solid var(--line); height: 22px; padding-left: 0; }
.tlx-month > span { position: sticky; left: calc(var(--labelw) + 6px); padding-left: 6px; display: inline-block; }
.tlx-out { display: none; position: absolute; left: calc(100% + 7px); top: 50%; transform: translateY(-50%); color: var(--ink); font-size: 12px; white-space: nowrap; pointer-events: none; }
.tlx-bar.narrow .tlx-btxt { visibility: hidden; }
.tlx-bar.narrow .tlx-out { display: block; }

/* pick rows: keep the date/time field readable (it was collapsing in narrow cards) */
.pick-ctrls .pk-when { min-width: 178px; max-width: 210px; flex: 0 0 auto; }
.pick-ctrls select, .pick-ctrls input { border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); font-family: inherit; }

/* Register tables: never split ordinary words mid-way; long emails/URLs still wrap,
   and the table scrolls sideways instead of crushing columns. */
table.reg td { overflow-wrap: break-word; word-break: normal; }
table.reg td.cell { min-width: 96px; }
table.reg td.tdact, table.reg td.tdlogo { min-width: 0; }
/* search palette is wider than a normal form dialog */
.modal.modal-search { max-width: 640px; width: min(640px, 94vw); }

/* Never let wide content (timeline, tables) push the page wider than the screen. */
.main { min-width: 0; }
.tlx, #pf-tl, #proj-view { max-width: 100%; min-width: 0; }
@media (max-width: 760px) { .app { grid-template-columns: minmax(0, 1fr); } }
/* keep the empty-timeline message pinned in view when the timeline is scrolled */
.tlx-empty { display: block; width: max-content; max-width: calc(100vw - 80px); position: sticky; left: 0; }

/* ============ v5 (monday-style): status pills ============ */
.st-pill { border: none; border-radius: 6px; padding: 4px 11px; font-family: var(--display); font-size: 11.5px; letter-spacing: .04em; color: #fff; cursor: pointer; line-height: 1.5; }
.st-pill:hover { filter: brightness(1.08); }
.st-todo { background: #a8a197; }
.st-doing { background: var(--ox-500); }
.st-stuck { background: var(--accent); }
.st-done { background: var(--olive); }
.mp-opt.st-opt { color: #fff; border: none; font-family: var(--display); letter-spacing: .04em; }
.mp-opt.st-opt.on { outline: 2px solid var(--ink); outline-offset: 1px; color: #fff; }
.task.stuck { box-shadow: inset 3px 0 0 var(--accent); }
.mini-chip { font-size: 11px; padding: 2px 8px; color: var(--ink-soft); }
.mini-chip.all { color: var(--olive); border-color: var(--olive-200); }
.board.board4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .board.board4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .board.board4 { grid-template-columns: 1fr; } }
.col[data-col="stuck"] .col-h { color: var(--accent); }

/* battery bar */
.battery { display: inline-flex; width: 240px; max-width: 100%; height: 8px; border-radius: 4px; overflow: hidden; background: var(--panel-2); vertical-align: middle; }
.battery > span { height: 100%; }
.bt-done { background: var(--olive); } .bt-doing { background: var(--ox-500); } .bt-stuck { background: var(--accent); } .bt-todo { background: #cfc8bc; }

/* ============ task panel (item view) ============ */
.tp-wrap { position: fixed; inset: 0; z-index: 900; }
.tp-scrim { position: absolute; inset: 0; background: rgba(20,17,15,.28); opacity: 0; transition: opacity .18s; }
.tp { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--paper); box-shadow: -12px 0 40px rgba(0,0,0,.18);
  overflow-y: auto; padding: 18px 24px 40px; transform: translateX(24px); opacity: 0; transition: transform .2s ease, opacity .2s ease; box-sizing: border-box; }
.tp-wrap.open .tp-scrim { opacity: 1; }
.tp-wrap.open .tp { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tp, .tp-scrim { transition: none; } }
.tp-head { display: flex; align-items: center; gap: 10px; position: sticky; top: -18px; background: var(--paper); padding: 6px 0 10px; z-index: 2; }
.tp-status { display: flex; gap: 5px; flex-wrap: wrap; }
.tp-status .st-pill { opacity: .45; }
.tp-status .st-pill.on { opacity: 1; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px currentColor; }
.tp-saved { margin-left: auto; font-size: 12px; color: var(--olive); font-family: var(--display); }
.tp-x { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); font-size: 18px; cursor: pointer; line-height: 1; }
.tp-title { width: 100%; box-sizing: border-box; border: 1px solid transparent; border-radius: 8px; background: transparent; resize: none; overflow: hidden;
  font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.25; color: var(--ink); padding: 6px 8px; margin: 4px -8px 10px; }
.tp-title:hover { border-color: var(--line); }
.tp-title:focus { outline: none; border-color: var(--accent); background: var(--panel); }
.tp-grid { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px 12px; align-items: center; margin-bottom: 8px; }
.tp-grid > label { font-family: var(--display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.tp-grid select, .tp-grid input { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); width: 100%; box-sizing: border-box; }
.tp-due { display: flex; gap: 8px; } .tp-due input[type=time] { max-width: 120px; }
.tp-sec { font-family: var(--display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 20px 0 8px; border-top: 1px solid var(--line); padding-top: 16px; }
.tp-count { color: var(--accent); margin-left: 6px; letter-spacing: .04em; }
.tp-notes { width: 100%; box-sizing: border-box; min-height: 90px; resize: vertical; font: inherit; font-size: 14.5px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.tp-bar { height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; margin-bottom: 8px; } .tp-bar > span { display: block; height: 100%; background: var(--olive); }
.tp-cl { display: flex; flex-direction: column; }
.tp-ci { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid rgba(20,17,15,.06); cursor: pointer; font-size: 14.5px; }
.tp-ci input { accent-color: var(--olive); width: 17px; height: 17px; }
.tp-ci .tp-ct { flex: 1; }
.tp-ci.done .tp-ct { text-decoration: line-through; color: var(--ink-faint); }
.tp-add { display: flex; gap: 8px; margin-top: 8px; }
.tp-add input { flex: 1; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.tp-compose textarea { width: 100%; box-sizing: border-box; min-height: 70px; resize: vertical; font: inherit; font-size: 14.5px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-bottom: 8px; }
.tp-ups { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.tp-up { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.tp-uph { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tp-when { color: var(--ink-faint); font-size: 12px; margin-left: auto; }
.tp-ub { margin-top: 6px; font-size: 14.5px; line-height: 1.5; }
.mention { color: var(--accent); }
#tp-files .card { box-shadow: none; border: none; padding: 0; background: transparent; }
#tp-files .card-head, #tp-files .sub { display: none; }
.tp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-faint); }
.task .ttl[data-act="opentask"] { cursor: pointer; }
.task .ttl[data-act="opentask"]:hover { color: var(--accent); }

/* ============ inbox ============ */
.nav-badge { margin-left: auto; background: var(--accent); color: #fff; font-family: var(--display); font-size: 10.5px; border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; }
@media (min-width: 761px) { body.side-collapsed .nav-item { position: relative; } body.side-collapsed .nav-badge { display: block; position: absolute; top: 4px; right: 10px; padding: 0 5px; font-size: 9.5px; } body.side-collapsed .nav-badge[hidden] { display: none; } }
.inbox-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--line); padding: 12px 6px; cursor: pointer; font: inherit; color: var(--ink); }
.inbox-item:hover { background: var(--panel-2); }
.inbox-item.unread .inbox-text { font-weight: 600; }
.inbox-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--ink-soft); flex: 0 0 auto; font-size: 13px; }
.inbox-ico.k-stuck { background: var(--ox-100); color: var(--accent); } .inbox-ico.k-mention { background: var(--ox-100); color: var(--accent); font-weight: 700; }
.inbox-ico.k-overdue, .inbox-ico.k-due { background: var(--ox-100); color: var(--ox-500); } .inbox-ico.k-done { background: var(--olive-100); color: var(--olive); }
.inbox-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.inbox-text { font-size: 14px; line-height: 1.4; }
.inbox-sub { font-size: 12px; color: var(--ink-faint); }
.inbox-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

/* ============ automations ============ */
.auto-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.auto-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 14px; line-height: 1.5; cursor: pointer; }
.auto-row input[type=checkbox] { accent-color: var(--accent); margin-top: 4px; }
.auto-row select { font: inherit; font-size: 13px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }

/* ============ calendar ============ */
.cal { padding: 0; overflow: hidden; }
.cal-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cal-title { margin: 0; min-width: 170px; text-align: center; font-family: var(--display); font-size: 18px; }
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.cal-head > div { padding: 8px 10px; font-family: var(--display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cell { min-height: 108px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.out { background: rgba(20,17,15,.025); } .cal-cell.out .cal-dn { color: #b9b2a6; }
.cal-cell.we:not(.out) { background: rgba(20,17,15,.015); }
.cal-cell.today .cal-dn { background: var(--accent); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; }
.cal-cell.drop-hot { background: rgba(157,41,25,.1); box-shadow: inset 0 0 0 2px var(--accent); }
.cal-dn { font-family: var(--display); font-size: 12px; color: var(--ink-soft); }
.cal-chip { display: flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 6px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid; border-radius: 6px; cursor: grab; touch-action: none; user-select: none; min-width: 0; }
.cal-chip:hover { box-shadow: var(--shadow); }
.cal-chip.done .cal-ct { text-decoration: line-through; color: var(--ink-faint); }
.cal-chip.stuck { background: var(--ox-100); }
.cal-chip.dragging { opacity: .35; }
.cal-ct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-time { font-family: var(--display); font-size: 10.5px; color: var(--ink-faint); flex: 0 0 auto; }
.cal-chip .swatch { width: 8px; height: 8px; flex: 0 0 auto; }
.cal-cell .cal-chip:nth-of-type(n+4) { display: none; }
.cal-cell.expanded .cal-chip { display: flex; }
.cal-more { background: none; border: none; color: var(--accent); font-size: 11.5px; text-align: left; padding: 0 2px; cursor: pointer; font-family: var(--display); }
.cal-ghost { max-width: 220px; }
@media (max-width: 760px) { .cal-cell { min-height: 74px; padding: 3px; } .cal-chip { font-size: 10.5px; padding: 2px 4px; } .cal-time, .cal-chip .swatch { display: none; } .cal-head > div { padding: 6px 3px; font-size: 9.5px; } }

/* ============ workload ============ */
.wl { padding: 0; overflow: hidden; }
.wl-cap { font-size: 13px; color: var(--ink-soft); }
.wl-capin { width: 52px; font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; margin: 0 4px; }
.wl-wrap { border: none; border-radius: 0; }
.wl-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.wl-table th, .wl-table td { border-bottom: 1px solid var(--line); padding: 8px; text-align: center; white-space: nowrap; }
.wl-table thead th { font-family: var(--display); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; }
.wl-who { text-align: left !important; display: flex; align-items: center; gap: 8px; min-width: 190px; position: sticky; left: 0; background: var(--panel); }
.wl-tot { margin-left: auto; font-size: 11px; color: var(--ink-faint); font-weight: 400; }
.wl-stuck { color: var(--accent); }
.wl-n { border: none; border-radius: 7px; min-width: 34px; padding: 5px 8px; font: inherit; font-family: var(--display); cursor: pointer; background: var(--panel-2); color: var(--ink); }
.wl-green .wl-n { background: var(--olive-100); color: var(--olive); }
.wl-amber .wl-n { background: var(--ox-100); color: var(--ox-500); }
.wl-red .wl-n { background: var(--accent); color: #fff; }
.wl-over .wl-n { background: var(--ox-100); color: var(--accent); }
.wl-n small { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; }
.wl-0 { color: #cfc8bc; }
.wl-sub { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.tp-due input { min-width: 0; flex: 1 1 auto; }
.tp-due input[type=time] { flex: 0 0 112px; }
@media (max-width: 420px) { .tp { padding: 14px 16px 36px; } .tp-grid { grid-template-columns: 64px minmax(0, 1fr); } .tp-due input[type=time] { flex-basis: 132px; } }

/* ============ v6: Colin pass — ＋ Add, undo/redo, phone bars, sheets ============ */
/* Toasts sit above panels and dialogs so Undo is always reachable. */
.toast { z-index: 1500; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); }
.toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast.show { pointer-events: auto; }
.toast-btn { flex: 0 0 auto; }

/* Sidebar tools: ＋ Add a to-do, then Undo / Redo */
.side-tools { display: flex; flex-direction: column; gap: 8px; padding: 0 2px 14px; }
.side-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 11px 14px; cursor: pointer;
  font-family: var(--display); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.side-add:hover { filter: brightness(1.1); }
.side-add .sa-plus { font-size: 17px; line-height: 1; }
.hist-pair { display: flex; gap: 6px; }
.hist-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: #cfc8ba; border: 1px solid #2c261f; border-radius: 999px; padding: 7px 10px;
  cursor: pointer; font-family: var(--body); font-size: 12.5px; }
.hist-btn:hover:not(:disabled) { background: var(--ox-500); color: #fff; }
.hist-btn:disabled { opacity: .38; cursor: default; }
.hist-btn .hb-ic { font-size: 16px; line-height: 1; }
.m-inbox { display: none; }
body.side-collapsed .side-add .sa-txt, body.side-collapsed .hist-btn .hb-txt { display: none; }
body.side-collapsed .hist-pair { flex-direction: column; }

/* Phone bottom bar (hidden on desktop) */
.mbar { display: none; }
.mbar-dot { position: absolute; top: 6px; right: calc(50% - 16px); width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--ox-500); }
.mbar-dot[hidden] { display: none; }

/* Task row flash after add / change */
@keyframes taskflash { 0% { background: rgba(157,41,25,.16); } 100% { background: transparent; } }
.task.flash { animation: taskflash 1.8s ease-out; border-radius: 10px; }

/* ＋ Add sheet */
.qa2-head, .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.qa2-head h3, .sheet-head h3 { margin: 0; }
.qa2-input { width: 100%; font-family: var(--body); font-size: 18px; color: var(--ink); background: var(--panel-2);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 15px; }
.qa2-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(157,41,25,.12); }
.qa2-eg { font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; margin: 8px 2px 0; }
.qa2-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 8px; margin: 10px 0 2px; }
.qa2-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--ox-100); color: var(--accent);
  border: 1px solid var(--ox-200); border-radius: 999px; padding: 5px 4px 5px 11px; font-size: 13px; font-weight: 500; }
.qa2-chip button { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; width: 24px; height: 24px; border-radius: 50%; }
.qa2-chip button:hover { background: rgba(157,41,25,.12); }
.qa2-as { font-size: 12.5px; color: var(--ink-soft); }
.qa2-grid { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 10px; align-items: center; margin: 12px 0 4px; }
.qa2-grid label { font-family: var(--display); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.qa2-grid select { width: 100%; min-width: 0; font-family: var(--body); font-size: 15px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.qa2.to-personal .qa2-wholab, .qa2.to-personal #qa2-who { display: none; }
.qa2 .mrow .btn.primary { flex: 1 1 auto; }
.qa2-added { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.qa2-added li { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.qa2-added li.undone { opacity: .5; }
.qa2-added li.undone b { text-decoration: line-through; }
.qa2-tick { color: var(--done); font-weight: 700; }
.qa2-lt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.qa2-lt b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa2-lt small { font-size: 12px; color: var(--ink-faint); }

/* Sheets (Projects / Menu) */
.sheet-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.sheet-row { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--panel); border: none; border-bottom: 1px solid var(--line);
  padding: 14px 14px; font-family: var(--body); font-size: 16px; color: var(--ink); text-align: left; cursor: pointer; min-height: 52px; }
.sheet-row:last-child { border-bottom: none; }
.sheet-row:hover, .sheet-row:active { background: var(--panel-2); }
.sr-ico { width: 24px; text-align: center; color: var(--ink-faint); font-size: 17px; flex: 0 0 24px; display: grid; place-items: center; }
.sr-ico .swatch { width: 12px; height: 12px; border-radius: 4px; display: block; }
.sr-lbl { flex: 1 1 auto; min-width: 0; }
.sr-count { font-size: 13px; color: var(--ink-faint); }
.sr-badge { background: var(--accent); color: #fff; border-radius: 999px; font-size: 12px; padding: 2px 8px; }
.sr-go { color: var(--ink-faint); font-size: 20px; }
.sheet-minor .sheet-row { font-size: 14.5px; min-height: 46px; }
.sheet-label { font-family: var(--display); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: var(--ink-faint); margin: 4px 2px 8px; }
.sheet-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Search: done tag, phone-friendly */
.sp-done { font-family: var(--body); font-size: 11px; color: var(--done); border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 2px; }
@media (hover: none) { .sp-foot, .nav-search .kbd { display: none; } }

/* Guide */
.tour-steps { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 12px; }
.tour-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.ts-n { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 14px; }
.ts-key { white-space: nowrap; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; font-family: var(--body); font-weight: 600; }

/* Delete sits apart from the other row buttons */
.rowacts .linkbtn.del { margin-left: 6px; }

@media (max-width: 760px) {
  /* Top bar: logo left, Undo / Redo / Inbox right */
  .side { position: sticky; top: 0; z-index: 40; flex-direction: row; align-items: center; justify-content: space-between;
    overflow: visible; padding: 8px 12px; gap: 8px; height: 56px; }
  .side .nav, .side .side-foot, .side .side-toggle { display: none !important; }
  .side-brand { padding: 0; }
  .side-brand img { width: auto; height: 40px; max-width: 110px; object-fit: contain; }
  .side-tools { flex-direction: row; align-items: center; padding: 0; gap: 6px; }
  .side-add { display: none; }
  .hist-pair { gap: 6px; }
  .hist-btn { flex: 0 0 auto; padding: 0 12px; height: 38px; font-size: 13px; }
  .hist-btn .hb-txt { display: none; }
  .hist-btn .hb-ic { font-size: 19px; }
  .m-inbox { display: inline-grid; place-items: center; position: relative; width: 40px; height: 38px; border-radius: 999px;
    background: transparent; border: 1px solid #2c261f; color: #cfc8ba; font-size: 17px; cursor: pointer; }
  .m-inbox .nav-badge { position: absolute; top: -5px; right: -5px; padding: 1px 6px; font-size: 10.5px; }
  .m-inbox .nav-badge[hidden] { display: none; }

  /* Bottom bar */
  .mbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: var(--ox-500); border-top: 1px solid var(--ox-500); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .mbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: none; border: none; color: #a39b8c; font-family: var(--body); font-size: 11px; letter-spacing: .02em; padding: 6px 0; min-height: 52px; cursor: pointer; }
  .mbar button .mi { font-size: 20px; line-height: 1; }
  .mbar button.on { color: #fff; }
  .mbar button.on .mi { color: var(--accent); }
  .mbar .mbar-add { color: #fff; }
  .mbar .mbar-plus { display: grid; place-items: center; width: 46px; height: 46px; margin-top: -20px; border-radius: 50%;
    background: var(--accent); font-size: 26px; line-height: 1; box-shadow: 0 6px 16px rgba(0,0,0,.35); border: 3px solid var(--ox-500); }
  .main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* Sheets slide up from the bottom */
  .modal-bg.sheet { place-items: end stretch; padding: 0; }
  .modal-bg.sheet .modal { max-width: none; border-radius: 18px 18px 0 0; max-height: 92vh; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); animation: sheetup .22s ease-out; }
  .modal-bg.sheet-top { place-items: start stretch; padding: 10px; }
  .modal-bg.sheet-top .modal { max-width: none; }
  /* Bigger, easier taps on task rows */
  .rowacts { gap: 2px; flex-wrap: wrap; }
  .rowacts .linkbtn { font-size: 13.5px; padding: 9px 10px; min-height: 40px; }
  .rowacts .linkbtn.del { margin-left: auto; font-size: 18px; }
  .task .check { width: 26px; height: 26px; }
  .ctl-chip, .st-pill { min-height: 32px; }
}
@keyframes sheetup { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal-bg.sheet .modal { animation: none; } .task.flash { animation: none; } }
@media (max-width: 760px) {
  .modal-bg.sheet.sheet-top { place-items: start stretch; padding: 0; }
  .modal-bg.sheet.sheet-top .modal { border-radius: 0 0 18px 18px; padding-top: calc(16px + env(safe-area-inset-top)); animation: sheetdown .22s ease-out; max-height: 88vh; }
}
@keyframes sheetdown { from { transform: translateY(-24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal-bg.sheet.sheet-top .modal { animation: none; } }
.tp-undo { margin-left: auto; background: transparent; border: 1px solid var(--line); color: var(--ink-soft); border-radius: 999px; padding: 6px 12px; font-family: var(--body); font-size: 13px; cursor: pointer; }
.tp-undo:hover:not(:disabled) { border-color: var(--ink-faint); color: var(--ink); }
.tp-undo:disabled { opacity: .35; cursor: default; }
.tp-head .tp-saved + .tp-undo { margin-left: 6px; }
/* Phone: on a project, the tasks come first; the assistant and files follow. */
@media (max-width: 760px) {
  #main[data-page="project"] { display: flex; flex-direction: column; }
  #main[data-page="project"] > * { order: 5; }
  #main[data-page="project"] > .page-head { order: 0; }
  #main[data-page="project"] > .view-tabs { order: 1; }
  #main[data-page="project"] > #proj-view { order: 2; }
  #main[data-page="project"] > .assist-card { order: 3; margin-top: 18px; }
  #main[data-page="project"] > .pa-bar { order: 0; }
  #main[data-page="project"] > .nb-card { order: 2; margin-top: 18px; }
  #main[data-page="project"] > .stat-row { display: none; }
}
.sheet-foot a.btn { text-decoration: none; }
.sp-top { display: flex; align-items: center; gap: 8px; }
.sp-top .sp-input { flex: 1 1 auto; min-width: 0; }
.sp-x { flex: 0 0 auto; }
.tp-undo { white-space: nowrap; }
@media (max-width: 420px) {
  .tp-undo { padding: 6px 10px; font-size: 16px; }
  .tp-undo .tu-t { display: none; }
  .tp-status { gap: 4px; }
  .tp-status .st-pill { padding: 5px 8px; font-size: 11.5px; }
}
@media (max-width: 760px) { .tp-ci .linkbtn.del { min-width: 40px; min-height: 36px; font-size: 18px; } .tp-ci { min-height: 44px; } }
#team-tree { margin-top: 18px; }
/* Phone: the tree becomes a simple indented list — no sideways scrolling. */
@media (max-width: 760px) {
  .orgtree { overflow: visible; padding: 0; }
  .orgtree ul { display: block; padding: 0 0 0 14px; border-left: 1.5px solid var(--line); margin-left: 6px; }
  .orgtree > ul { padding: 0; border-left: none; margin-left: 0; }
  .orgtree ul::before, .orgtree ul ul::before, .orgtree li::before, .orgtree li::after { display: none !important; }
  .orgtree li { padding: 8px 0 0; text-align: left; }
  .orgcard { width: 100%; max-width: none; text-align: left; }
}
@media (max-width: 760px) { .app { align-content: start; } }

/* Summary line (replaces the big stat boxes) */
.sumline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: -6px 0 22px; font-size: 14px; color: var(--ink-faint); }
.sumline b { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); margin-right: 2px; }
.sum-dot { color: var(--line); }
#main[data-page="project"] > .sumline { display: none; } /* the progress bar already says it */

/* Social media */
.soc { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.soc-headrow, .soc-row { display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(0, 1.6fr) 150px minmax(120px, 1fr) 170px; gap: 12px; align-items: center; padding: 10px 14px; }
.soc-headrow { background: var(--panel-2); font-family: var(--display); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--line); }
.soc-row { border-bottom: 1px solid var(--line); min-height: 60px; }
.soc-row:last-child { border-bottom: none; }
.soc-row.is-empty { background: var(--ox-100); }
.soc-row.is-empty .soc-name { color: var(--ink-faint); }
.soc-net { display: flex; align-items: center; gap: 10px; min-width: 0; }
.soc-name { font-weight: 600; font-size: 14.5px; }
.soc-logo { position: relative; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; overflow: hidden; }
.soc-logo.sm { flex-basis: 22px; width: 22px; height: 22px; border-radius: 6px; }
.soc-logo img { width: 58%; height: 58%; filter: brightness(0) invert(1); position: absolute; }
.soc-logo b { font-family: var(--display); font-size: 15px; }
.soc-logo.sm b { font-size: 11px; }
.soc-logo img + b { visibility: hidden; }
.soc-logo-gap { width: 34px; flex: 0 0 34px; }
.soc-acc { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.soc-acc a { color: var(--ink); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-acc a:hover { color: var(--accent); text-decoration: underline; }
.soc-acc small { font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-none { font-size: 13px; color: var(--ink-faint); }
.soc-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; border: none; cursor: pointer; font-family: var(--body); white-space: nowrap; }
.soc-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.soc-pill.s-ok { background: var(--olive-100); color: var(--olive); }
.soc-pill.s-warn { background: var(--ox-100); color: var(--ox-500); }
.soc-pill.s-off, .soc-pill.s-none { background: var(--ox-100); color: #8b8477; }
.soc-pill.s-none { cursor: default; }
.soc-team-av { display: inline-flex; }
.soc-team-av .ini { width: 26px; height: 26px; font-size: 11px; border: 2px solid var(--panel); margin-left: -6px; }
.soc-team-av .ini:first-child { margin-left: 0; }
.soc-acts { display: flex; gap: 6px; justify-content: flex-end; }
.soc-access { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--panel-2); }
.soc-access h3 { font-family: var(--display); font-size: 18px; margin: 0; }
.soc-access .sub { margin: 4px 0 12px; font-size: 13px; }
.soc-person { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.soc-pname { display: flex; align-items: center; gap: 10px; }
.soc-pname > span { display: flex; flex-direction: column; }
.soc-pname small { font-size: 12px; color: var(--ink-faint); }
.m-avatar.sm { width: 34px; height: 34px; border-radius: 9px; font-size: 13px; }
.m-avatar.sm img { width: 100%; height: 100%; object-fit: cover; }
.soc-ptoggles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.soc-tog { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--panel); cursor: pointer; font-family: var(--body); font-size: 13px; color: var(--ink-soft); opacity: .7; }
.soc-tog i { font-style: normal; font-weight: 700; width: 16px; text-align: center; color: var(--ink-faint); }
.soc-tog.on { opacity: 1; border-color: var(--olive); color: var(--ink); background: var(--olive-100); }
.soc-tog.on i { color: var(--olive); }
.soc-tog span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-title { font-family: var(--display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 6px; }
@media (max-width: 900px) {
  .soc-headrow { display: none; }
  .soc-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "net st" "acc acc" "who acts"; gap: 6px 10px; padding: 12px; }
  .soc-row.is-empty { grid-template-areas: "net acts"; }
  .soc-row.is-empty .soc-acc, .soc-row.is-empty .soc-st, .soc-row.is-empty .soc-who { display: none; }
  .soc-net { grid-area: net; } .soc-acc { grid-area: acc; padding-left: 44px; } .soc-st { grid-area: st; justify-self: end; }
  .soc-who { grid-area: who; padding-left: 44px; } .soc-acts { grid-area: acts; }
  .soc-row .soc-logo-gap { display: none; }
  .soc-person { grid-template-columns: 1fr; }
}

/* Task panel: Trello-style comments & activity */
.tp-acthead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tp-acthead .tp-sec { margin-bottom: 8px; }
.tp-compose2 { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.tp-compose2 > .ini, .tp-item > .ini { width: 30px; height: 30px; flex: 0 0 30px; font-size: 12px; }
.tp-cbox { flex: 1 1 auto; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.tp-cbox:focus-within { border-color: var(--accent); }
.tp-cbox .tp-upin { width: 100%; border: none; outline: none; resize: none; font: inherit; font-size: 14px; background: transparent; min-height: 22px; padding: 2px 0; color: var(--ink); }
.tp-cacts { display: none; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.tp-cbox.open .tp-cacts { display: flex; }
.tp-chint { font-size: 12px; color: var(--ink-faint); }
.tp-feed { display: flex; flex-direction: column; gap: 12px; }
.tp-item { display: flex; gap: 10px; align-items: flex-start; }
.tp-ib { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.tp-ih { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tp-when { font-size: 12px; color: var(--ink-faint); }
.tp-bubble { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.tp-bubble a { color: var(--accent); }
.tp-editin { width: 100%; font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.tp-ilinks { display: flex; gap: 2px; }
.tp-ilinks .linkbtn { font-size: 12px; padding: 2px 6px; text-decoration: underline; text-underline-offset: 2px; }
.tp-ev .tp-ib { flex-direction: row; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; color: var(--ink-soft); }
.tp-ev > .ini { width: 24px; height: 24px; flex-basis: 24px; font-size: 10px; margin: 0 3px; }
.tp-feed.no-details .tp-ev { display: none; }

/* ============ Trello-style board ============ */
.view-tabs { flex-wrap: wrap; }
.view-tab.vt-full { margin-left: auto; }
.tb-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 12px; }
.tb-search { flex: 0 1 240px; min-width: 160px; font: inherit; font-size: 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.tb-people { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-p { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; padding: 4px 11px 4px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; color: var(--ink-soft); }
.tb-p:first-child { padding-left: 11px; }
.tb-p .ini { width: 20px; height: 20px; font-size: 9.5px; }
.tb-p.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tboard { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 2px 2px 14px; margin: 0; grid-template-columns: none !important; scroll-snap-type: x proximity; }
.tcol { flex: 0 0 290px; width: 290px; background: var(--ox-100); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; max-height: calc(100vh - 150px); scroll-snap-align: start; border: none; box-shadow: none; }
.tcol.drop-hot { background: var(--ox-200); outline: 2px dashed rgba(157,41,25,.35); outline-offset: -2px; }
.tcol-h { display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px; font-size: 14px; }
.tcol-h .count { margin-left: auto; font-size: 12px; color: var(--ink-faint); background: rgba(0,0,0,.06); border-radius: 999px; padding: 1px 8px; }
.tcol-dot { width: 9px; height: 9px; border-radius: 50%; }
.tcol-dot.st-todo { background: #a8a197; } .tcol-dot.st-doing { background: var(--ox-500); } .tcol-dot.st-stuck { background: var(--accent); } .tcol-dot.st-done { background: var(--olive); }
.tcol-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 8px; padding: 0 2px 2px; }
.tcard { position: relative; display: block; background: var(--panel); border-radius: 10px; padding: 9px 11px 9px; box-shadow: 0 1px 0 rgba(22,19,15,.12), 0 1px 3px rgba(22,19,15,.06); cursor: pointer; border: none; text-align: left; }
.tcard:hover { box-shadow: 0 0 0 2px rgba(157,41,25,.35), 0 2px 6px rgba(22,19,15,.08); }
.tcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tcard.dragging { opacity: .5; transform: rotate(2deg); }
.tcard.stuck { box-shadow: inset 3px 0 0 var(--accent), 0 1px 0 rgba(22,19,15,.12); }
.tcard.done .tc-title { color: var(--ink-faint); }
.tc-label { display: block; width: 40px; height: 7px; border-radius: 999px; margin: 0 0 7px; }
.tc-title { font-size: 14.5px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; padding-right: 22px; }
.tc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.tc-badges { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.tc-b { font-size: 12px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 3px; border-radius: 4px; padding: 1px 4px; }
.tc-b.tc-due.over { background: var(--ox-100); color: var(--accent); }
.tc-b.ok { background: var(--olive-100); color: var(--olive); }
.tc-star { color: var(--ox-500); }
.tc-av { width: 26px; height: 26px; font-size: 10.5px; flex: 0 0 26px; margin-left: auto; }
.tc-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--panel); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; display: grid; place-items: center; padding: 0; }
.tcard:hover .tc-check, .tcard.done .tc-check, .tc-check:focus-visible { opacity: 1; }
.tcard.done .tc-check { background: var(--olive); border-color: var(--olive); }
.tc-check:hover { border-color: var(--olive); }
@media (hover: none) { .tc-check { opacity: 1; } }
.tcol-add { padding: 6px 2px 2px; }
.tcol-addbtn { width: 100%; text-align: left; font: inherit; font-size: 14px; color: var(--ink-soft); background: transparent; border: none; border-radius: 8px; padding: 8px 8px; cursor: pointer; }
.tcol-addbtn:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.tcol-in { width: 100%; font: inherit; font-size: 14px; border: none; border-radius: 10px; padding: 9px 11px; box-shadow: 0 1px 0 rgba(22,19,15,.12); resize: none; }
.tcol-in:focus { outline: 2px solid var(--accent); }
.tcol-acts { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tcol-x { border: none; background: none; font-size: 22px; cursor: pointer; color: var(--ink-soft); width: 34px; height: 34px; border-radius: 8px; }
.tcol-x:hover { background: rgba(0,0,0,.06); }

/* Full screen: hide everything but the project title, view switcher and the board */
body.board-full .side, body.board-full .mbar, body.board-full .dev-note { display: none !important; }
body.board-full .app { grid-template-columns: minmax(0, 1fr) !important; }
body.board-full #main[data-page="project"] { padding: 14px 20px 20px; max-width: none; min-height: 100vh; background: linear-gradient(160deg, var(--proj-hue, var(--sig-ink)), color-mix(in srgb, var(--proj-hue, var(--sig-ink)) 55%, #000)); }
body.board-full #main[data-page="project"] > :not(.page-head):not(.view-tabs):not(#proj-view) { display: none !important; }
body.board-full #main[data-page="project"] .page-head { margin: 0 0 10px; display: flex; align-items: center; gap: 14px; }
body.board-full #main[data-page="project"] .page-head > :not(h1) { display: none; }
body.board-full #main[data-page="project"] .page-head h1 { color: #fff; font-size: 24px; margin: 0; }
body.board-full .view-tabs { margin-bottom: 10px; }
body.board-full .view-tab { background: rgba(255,255,255,.16); color: #fff; border-color: transparent; }
body.board-full .view-tab.on { background: #fff; color: #16130f; } /* fixed dark text: in dark modes --ink is light */
body.board-full .tb-bar .tb-search { background: rgba(255,255,255,.92); }
body.board-full .tb-p { background: rgba(255,255,255,.16); color: #fff; border-color: transparent; }
body.board-full .tb-p.on { background: #fff; color: var(--ink); }
body.board-full .tcol { max-height: calc(100vh - 170px); }
body.board-full .letgo-card { display: none; }

/* Phone: columns swipe sideways like the Trello app */
@media (max-width: 760px) {
  .tboard { margin: 0 -16px; padding: 2px 16px 14px; scroll-snap-type: x mandatory; scroll-padding: 16px; }
  .tcol { flex-basis: 84vw; width: 84vw; max-height: none; }
  .tcol-list { overflow: visible; }
  .view-tab.vt-full { display: none; }
  .tb-search { flex: 1 1 100%; }
}
/* Project pages: the board gets the full width; text blocks stay at reading width. */
#main[data-page="project"] { max-width: none; }
#main[data-page="project"] > .page-head, #main[data-page="project"] > .assist-card, #main[data-page="project"] > section.card { max-width: 1080px; }
.tcol { flex: 1 0 260px; width: auto; min-width: 260px; max-width: 360px; }
@media (max-width: 760px) { .tcol { flex: 0 0 84vw; width: 84vw; min-width: 0; max-width: none; } }

/* ============ monday-style list ============ */
.mlist { display: flex; flex-direction: column; gap: 22px; }
.m-gh { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; padding: 0 0 8px; font: inherit; color: var(--g); }
.m-gh b { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: .01em; }
.m-gcount { font-size: 13px; color: var(--ink-faint); }
.m-chev { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--g); color: #fff; font-size: 11px; transition: transform .15s; }
.m-group.collapsed .m-chev { transform: rotate(-90deg); }
.m-group.collapsed .m-table { display: none; }
.m-table { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); overflow-x: auto; }
.m-row { display: grid; grid-template-columns: minmax(240px, 1fr) 84px 170px 140px 120px; align-items: stretch; border-bottom: 1px solid var(--line); min-width: 760px; }
.m-row:last-child { border-bottom: none; }
.m-row.task { box-shadow: inset 5px 0 0 var(--g); }
.m-row.task:hover { background: var(--ox-100); }
.m-head { background: var(--panel-2); font-size: 12.5px; color: var(--ink-faint); box-shadow: inset 5px 0 0 var(--g); }
.m-head .m-c { justify-content: center; padding: 8px; }
.m-head .m-title { justify-content: flex-start; padding-left: 20px; }
.m-c { display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--line); min-height: 44px; min-width: 0; }
.m-c.m-title { justify-content: flex-start; gap: 8px; border-left: none; padding: 6px 10px 6px 18px; }
.m-check { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--panel); color: #fff; font-size: 11px; cursor: pointer; padding: 0; display: grid; place-items: center; }
.m-check:hover { border-color: var(--olive); }
.task.done .m-check { background: var(--olive); border-color: var(--olive); }
.m-tt { cursor: pointer; font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-tt:hover { color: var(--accent); }
.task.done .m-tt { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.m-cnt { flex: 0 0 auto; font-size: 12px; color: var(--ink-faint); cursor: default; }
.m-cnt[data-act] { cursor: pointer; }
.m-av { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 50%; }
.m-av .ini { width: 30px; height: 30px; font-size: 11.5px; }
.m-noone { background: #fff !important; color: var(--ink-faint); border: 1.5px dashed var(--line); }
.m-tbtn { background: none; border: none; padding: 0 8px; cursor: pointer; width: 100%; }
.m-pill { position: relative; display: block; height: 24px; border-radius: 999px; background: #2b2724; overflow: hidden; color: #fff; font-size: 12.5px; line-height: 24px; text-align: center; }
.m-pill .m-fill { position: absolute; inset: 0 auto 0 0; background: var(--g, var(--olive)); opacity: .9; }
.m-pill .m-pl { position: relative; font-weight: 600; }
.m-pill.late { background: var(--accent); }
.m-pill.empty { background: var(--ox-100); color: var(--ink-faint); }
.m-cell { width: 100%; height: 100%; min-height: 44px; border: none; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.m-cell:hover { filter: brightness(1.06); }
.m-cell.m-blank { background: transparent; color: var(--ink-faint); font-weight: 400; }
.m-cell.m-blank:hover { background: var(--panel-2); }
.m-add { box-shadow: inset 5px 0 0 color-mix(in srgb, var(--g) 35%, transparent); }
.m-add .m-c { min-height: 40px; }
.m-addin { width: 100%; border: none; background: transparent; font: inherit; font-size: 14px; color: var(--ink); padding: 6px 0; }
.m-addin:focus { outline: none; }
.m-addin::placeholder { color: var(--ink-faint); }
.m-row .inline-assignee { max-width: 80px; font-size: 12px; }
@media (max-width: 760px) {
  .m-row { grid-template-columns: minmax(200px, 1fr) 56px 150px 110px 96px; min-width: 612px; }
  .m-c.m-title { position: sticky; left: 0; background: var(--panel); z-index: 1; box-shadow: inset 5px 0 0 var(--g), 1px 0 0 var(--line); }
}
.m-cell.m-dark { color: #2b2724; }

/* ============ Portfolio: list / board / insights ============ */
.pf-tile { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-family: var(--display); font-size: 16px; }
.pf-name { display: flex; align-items: center; gap: 11px; min-width: 0; text-align: left; }
.pf-name > span { display: flex; flex-direction: column; min-width: 0; }
.pf-name b { font-weight: 600; font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-name small { font-size: 12px; color: var(--ink-faint); }
.pf-muted { color: var(--ink-faint); font-size: 13px; }
.pf-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.pf-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pf-st.st-idle { background: var(--ox-100); color: #7d766a; }
.pf-st.st-progress { background: var(--ox-100); color: var(--ox-500); }
.pf-st.st-done { background: var(--panel-2); color: var(--sig-ink); }
.pf-st.st-stuck { background: var(--ox-100); color: var(--accent); }
.pf-st.st-late { background: var(--ox-100); color: var(--accent); }
.pf-health { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--h); font-weight: 600; white-space: nowrap; }
.pf-health i { width: 8px; height: 8px; border-radius: 50%; background: var(--h); }
.pf-prio { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.pf-prio.p-high { color: var(--sig-ink); font-weight: 600; }
.pf-person { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; white-space: nowrap; }
.pf-person .ini { width: 24px; height: 24px; font-size: 10px; }
.pf-bar { display: block; height: 6px; border-radius: 999px; background: var(--ox-100); overflow: hidden; width: 100%; }
.pf-bar > span { display: block; height: 100%; border-radius: 999px; }
.pf-prog { display: flex; align-items: center; gap: 8px; }
.pf-prog small { font-size: 12px; color: var(--ink-faint); min-width: 32px; }
.pf-dates { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
.pf-table { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow-x: auto; }
.pf-row { display: grid; grid-template-columns: minmax(220px, 1.6fr) 120px 110px 100px minmax(120px, 1fr) 140px 130px; gap: 14px; align-items: center; width: 100%; min-width: 980px; padding: 12px 16px; border: none; border-bottom: 1px solid var(--line); background: none; font: inherit; text-align: left; cursor: pointer; }
.pf-row:last-child { border-bottom: none; }
.pf-row:not(.pf-head):hover { background: var(--panel-2); }
.pf-head { cursor: default; background: var(--panel-2); font-family: var(--display); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); padding: 10px 16px; }
.pf-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.pf-col { background: var(--ox-100); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.pf-colh { display: flex; align-items: center; gap: 8px; padding: 2px 4px; font-size: 14px; }
.pf-colh i { width: 9px; height: 9px; border-radius: 50%; }
.pf-colh .count { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.pf-card { display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: none; border-top: 4px solid var(--c); border-radius: 10px; padding: 12px; text-align: left; font: inherit; cursor: pointer; box-shadow: 0 1px 0 rgba(22,19,15,.12); }
.pf-card:hover { box-shadow: 0 0 0 2px rgba(157,41,25,.3); }
.pf-meta { display: flex; gap: 12px; flex-wrap: wrap; }
.pf-foot { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-faint); }
.pf-foot .ini { width: 24px; height: 24px; font-size: 10px; }
.pf-foot .pf-dates { margin-left: auto; }
.pf-empty { font-size: 13px; color: var(--ink-faint); padding: 4px 6px; margin: 0; }
.pf-ins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pf-card2 { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.pf-card2 h3 { font-family: var(--display); font-size: 17px; font-weight: 600; margin: 0 0 14px; }
.pf-wide { grid-column: 1 / -1; }
.pf-don { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pf-donut { width: 150px; height: 150px; flex: 0 0 150px; }
.pf-donut .d-n { font-family: var(--display); font-size: 30px; font-weight: 600; fill: var(--ink); }
.pf-donut .d-l { font-size: 11px; fill: var(--ink-faint); }
.pf-legend { display: flex; flex-direction: column; gap: 8px; flex: 1 1 140px; font-size: 14px; }
.pf-legend div { display: flex; align-items: center; gap: 8px; }
.pf-legend i { width: 10px; height: 10px; border-radius: 3px; }
.pf-legend b { margin-left: auto; font-family: var(--display); }
.pf-bi { margin-bottom: 12px; }
.pf-bl { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 5px; }
.pf-bl b { font-family: var(--display); }
.pf-bt { height: 8px; border-radius: 999px; background: var(--ox-100); overflow: hidden; }
.pf-bt span { display: block; height: 100%; border-radius: 999px; }
.pf-attn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--line); padding: 10px 2px; font: inherit; cursor: pointer; }
.pf-attn:hover { background: var(--panel-2); }
.pf-attn b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-attn small { grid-column: 2; font-size: 12px; color: var(--ink-faint); }
.pf-attn .pf-st { grid-row: span 2; }
@media (max-width: 900px) { .pf-board, .pf-ins { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .pf-table { border: none; background: none; overflow: visible; display: flex; flex-direction: column; gap: 10px; }
  .pf-head { display: none; }
  .pf-row { min-width: 0; grid-template-columns: 1fr auto; gap: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
  .pf-row > :nth-child(1) { grid-column: 1 / -1; }
  .pf-row > :nth-child(4), .pf-row > :nth-child(6) { display: none; }
  .pf-row > :nth-child(5) { grid-column: 1 / -1; }
}
#main[data-page="portfolio"] { max-width: none; } #main[data-page="portfolio"] > .page-head { max-width: 1080px; }
@media (max-width: 760px) {
  .m-table { overflow: visible; }
  .m-head { display: none !important; }
  .m-row { min-width: 0; grid-template-columns: 40px minmax(0, 1fr) 96px 80px; grid-template-areas: "t t t t" "w tm st pr"; gap: 0; padding: 4px 0 8px; }
  .m-row.m-add { grid-template-areas: "t t t t"; padding: 0; }
  .m-c { border-left: none; min-height: 34px; }
  .m-c.m-title { grid-area: t; position: static; box-shadow: none; background: none; padding: 8px 12px 2px 18px; }
  .m-c.m-who { grid-area: w; justify-content: flex-end; }
  .m-c.m-time { grid-area: tm; }
  .m-c.m-status { grid-area: st; padding-right: 4px; }
  .m-c.m-prio { grid-area: pr; padding-right: 10px; }
  .m-cell { min-height: 30px; border-radius: 8px; font-size: 12.5px; }
  .m-av .ini { width: 26px; height: 26px; }
  .m-tt { white-space: normal; }
}

/* ===== Round-2 fixes (judge, 1 Oct) ===== */
/* Home: one clear Add, plan-from-notes as a quiet link */
.home-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.home-plan { font-size: 13.5px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .home-actions .btn.primary { flex: 1 1 100%; } .home-plan { margin: 0 auto; } }
/* Undo / Redo: obvious when there is something to undo */
.hist-btn:not(:disabled) { background: #2a241e; color: #fff; border-color: #6a5f53; }
.hist-btn:not(:disabled):hover { background: #3a3129; }
.hist-btn:disabled { opacity: .28; }
@media (max-width: 760px) {
  body.can-undo .hist-btn[data-hist="undo"] .hb-txt { display: inline; font-size: 13px; }
  .hist-btn:not(:disabled) { border-color: #8a7d6e; }
}
/* Priority chips use the same palette as the board and list */
.prio-chip.prio-high, .chip.prio-high { color: var(--sig-ink); border-color: var(--line); background: var(--panel-2); }
.prio-chip.prio-normal { color: var(--sig-ink); border-color: var(--line); background: var(--panel-2); }
.prio-chip.prio-low { color: var(--sig-mid); border-color: var(--line); }
/* Task panel status: a big, solid four-part control */
.tp-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; flex: 1 1 auto; min-width: 0; }
.tp-status .st-pill { opacity: 1; min-height: 40px; border-radius: 8px; font-size: 13px; background: var(--ox-100); color: #6b645a; border: none; padding: 0 6px; box-shadow: none; }
.tp-status .st-pill.on { color: #fff; box-shadow: none; }
.tp-status .st-pill.st-todo.on { background: #8b8477; }
.tp-status .st-pill.st-doing.on { background: var(--ox-500); color: #2b2724; }
.tp-status .st-pill.st-stuck.on { background: var(--accent); }
.tp-status .st-pill.st-done.on { background: var(--olive); }
.tp-head { flex-wrap: nowrap; }
@media (max-width: 420px) { .tp-status .st-pill { font-size: 12px; min-height: 44px; padding: 0 2px; } }
/* Project page: tools behind "⋯ More" on phones; one scrolling row of views */
.proj-more { display: none; }
@media (max-width: 760px) {
  .proj-more { display: inline-block; font-size: 13.5px; margin-top: 4px; padding-left: 0; }
  .page-head:not(.acts-open) .proj-actions { display: none; }
  .view-tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .view-tabs::-webkit-scrollbar { display: none; }
  .view-tab { flex: 0 0 auto; }
  .rowacts .linkbtn.del { font-size: 13.5px; }
}
/* Who's who: no empty "Title" placeholders */
.orgcard .org-role:empty { display: none; }
.arch-proj { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; max-width: 760px; }
.arch-prow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.arch-prow:last-child { border-bottom: none; }
.arch-prow .pf-name { flex: 1 1 auto; }

/* ============ F1 mode v2 (Colin) — carbon, F1 red, racing type, speed slashes ============ */
body.f1 { --accent: #e10600; --f1-dark: #15151e; --f1-red: #e10600; --display: "Titillium Web", "Oswald", sans-serif; background: #f2f2f4; }
body.f1 .side, body.f1 .mbar { background: var(--f1-dark); border-color: #262630; }
body.f1 .side-brand { position: relative; }
body.f1 .page-head h1, body.f1 .card h2, body.f1 .coll-head h2, body.f1 .modal h3 { font-family: "Titillium Web", sans-serif; font-weight: 900; font-style: italic; letter-spacing: -.01em; }
body.f1 .eyebrow, body.f1 .nav-label { font-family: "Titillium Web", sans-serif; font-weight: 700; letter-spacing: .14em; }
body.f1 .eyebrow::before { content: ""; display: inline-block; width: 14px; height: 4px; margin-right: 8px; vertical-align: 2px; background: var(--f1-red); transform: skewX(-24deg); }
body.f1 .page-head { border-bottom: 1px solid #d5d5dc; }
body.f1 .card { border-color: #e2e2e8; }
body.f1 .btn { font-family: "Titillium Web", sans-serif; font-weight: 700; font-style: italic; }
body.f1 .btn.primary, body.f1 .side-add { background: var(--f1-red); border-color: var(--f1-red); }
body.f1 .nav-item.active { background: var(--f1-red); color: #fff; }
body.f1 .mbar .mbar-plus { background: var(--f1-red); border-color: var(--f1-dark); }
body.f1 .mbar button.on .mi { color: #e10600; }

/* Race-number 54 (F1 style): white italic heavy numerals on a slanted red plate */
body.f1 .avatar.plate, body.f1 .m-avatar.plate, body.f1 .ini.plate {
  background: var(--f1-red) !important; color: #fff !important; box-shadow: none !important; border-radius: 4px;
  font-family: "Titillium Web", sans-serif; font-weight: 900; font-style: italic; letter-spacing: -.04em;
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
}

/* Speed-slash mark: three parallel slanted stripes */
.f1-slash { display: inline-flex; gap: 3px; transform: skewX(-28deg); vertical-align: middle; }
.f1-slash i { display: block; width: 10px; height: 16px; background: var(--f1-red, #e10600); }
.f1-slash i:nth-child(2) { width: 16px; } .f1-slash i:nth-child(3) { width: 22px; }
.f1-slash.sm i { height: 9px; width: 6px; } .f1-slash.sm i:nth-child(2) { width: 9px; } .f1-slash.sm i:nth-child(3) { width: 13px; }

/* Welcome banner */
.f1-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; overflow: hidden;
  background: var(--f1-dark, #15151e) repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 6px); color: #fff;
  border-radius: 16px; padding: 26px 30px; margin-bottom: 20px; border-bottom: 4px solid var(--f1-red, #e10600); }
.f1-hero::after { content: ""; position: absolute; right: -40px; top: 0; bottom: 0; width: 46%; background: linear-gradient(100deg, transparent 0 18%, rgba(225,6,0,.16) 18% 30%, transparent 30% 36%, rgba(225,6,0,.1) 36% 44%, transparent 44%); pointer-events: none; }
.f1-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-family: "Titillium Web", sans-serif; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; color: #c9c9d2; }
.f1-word { margin: 0; font-family: "Titillium Web", sans-serif; font-weight: 900; font-style: italic; font-size: clamp(40px, 7vw, 72px); line-height: .95; letter-spacing: -.035em; }
.f1-word span { position: relative; display: inline-block; color: var(--f1-red, #e10600); padding-right: .08em;
  /* the speed cut: a hairline of the banner colour sliced through the letters */
  background: linear-gradient(transparent 52%, var(--f1-dark, #15151e) 52% 57%, transparent 57%) , linear-gradient(var(--f1-red, #e10600), var(--f1-red, #e10600));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.f1-sub { margin: 10px 0 0; font-family: "Titillium Web", sans-serif; font-size: 15px; color: #c9c9d2; }
.f1-sub b { color: #fff; font-weight: 900; font-style: italic; font-size: 18px; }
.f1-number { position: relative; z-index: 1; flex: 0 0 auto; font-family: "Titillium Web", sans-serif; font-weight: 900; font-style: italic; font-size: clamp(56px, 10vw, 104px); line-height: 1; color: #fff; letter-spacing: -.05em;
  background: var(--f1-red, #e10600); padding: 6px 26px 4px 22px; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
@media (max-width: 760px) { .f1-hero { padding: 20px 18px; } .f1-number { padding: 4px 18px 2px 16px; } }
.tp-acthead { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; align-items: baseline; }
.tp-acthead .tp-sec { border-top: none; margin: 0 0 8px; padding-top: 0; flex: 1 1 auto; }
.tp-acthead .linkbtn { flex: 0 0 auto; white-space: nowrap; }
#tp-files input.title { width: 100%; min-width: 0; font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
#tp-files input.title:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
/* Phone: page headers are just the title — no kicker, blurb or summary taking half the screen (Aaron, 1 Oct). */
@media (max-width: 760px) {
  .page-head > .eyebrow, .page-head > .page-sub, .sumline, .public-badge { display: none !important; }
  .page-head { margin-bottom: 12px; padding-bottom: 0; }
  .page-head h1 { font-size: 24px; margin: 0; line-height: 1.15; }
  .main { padding-top: 14px; }
  #main[data-page="project"] .page-head > .eyebrow { display: none !important; }
}
@media (max-width: 760px) {
  .cat-chips { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .cat-chips::-webkit-scrollbar { display: none; }
  .cat-chips .cat-chip, .cat-chips .cat-l { flex: 0 0 auto; }
}
/* ===== Round-3 fixes ===== */
.flagbtn { white-space: nowrap; font-size: 12.5px; }
.tp-status .st-pill.st-todo:not(.on) { background: #ecebe8; color: #4b443a; }
.tp-status .st-pill.st-doing:not(.on) { background: var(--ox-100); color: var(--ox-500); }
.tp-status .st-pill.st-stuck:not(.on) { background: var(--ox-100); color: var(--accent); }
.tp-status .st-pill.st-done:not(.on) { background: var(--olive-100); color: var(--olive); }
.tp { padding-bottom: 96px !important; } /* room so the undo message never covers the last lines */
@media (max-width: 760px) { body.can-redo .hist-btn[data-hist="redo"] .hb-txt { display: inline; font-size: 13px; } }
.nav-item.proj .proj-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.st-pill.st-todo, .ctl-chip.st-todo { color: #2b2724; }
.orgflat { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.orgflat .orgcard { width: auto; max-width: none; text-align: left; }
.org-hint { font-size: 12.5px; color: var(--ink-faint); margin: 12px 0 0; }
.st-pill.st-todo { background: var(--ox-100); color: #2b2724; }
@media (max-width: 760px) { .toast { border-radius: 14px; } .toast span { white-space: normal; overflow: visible; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.35; } }
@media (max-width: 760px) {
  .toast { left: 12px; right: 12px; transform: none; max-width: none; width: auto; display: flex; justify-content: space-between; padding: 12px 14px 12px 18px; }
  .toast span { flex: 1 1 auto; min-width: 0; }
}

/* ============ Huntress mode (Nicole) — tarot, Nordic runes, psychedelic light ============ */
body.huntress { --accent: #a43be0; --hunt-ink: #12081f; background: #f5f1fa; }
body.huntress .side, body.huntress .mbar { background: #0f0820; border-color: #24173d; }
body.huntress .side { background:
  radial-gradient(120% 40% at 0% 100%, rgba(164,59,224,.35), transparent 60%),
  radial-gradient(90% 30% at 100% 0%, rgba(164,59,224,.18), transparent 60%), #0f0820; }
body.huntress .page-head h1, body.huntress .card h2, body.huntress .coll-head h2, body.huntress .modal h3 { font-family: "Cinzel", serif; font-weight: 700; letter-spacing: .02em; }
body.huntress .eyebrow, body.huntress .nav-label { font-family: "Cinzel", serif; font-weight: 700; letter-spacing: .18em; color: #8a3cc4; }
body.huntress .eyebrow::before { content: "ᛟ "; color: #d05cff; letter-spacing: 0; }
body.huntress .btn { font-family: "Cinzel", serif; font-weight: 700; }
body.huntress .btn.primary, body.huntress .side-add { background: linear-gradient(100deg, #7b3cff, #c43bd6 55%, #d05cff); border-color: transparent; }
body.huntress .nav-item.active { background: linear-gradient(100deg, #5b2bd0, #a43be0); color: #fff; }
body.huntress .mbar .mbar-plus { background: linear-gradient(140deg, #7b3cff, #d05cff); border-color: #0f0820; }
body.huntress .mbar button.on .mi { color: #e58bff; }
body.huntress .card { border-color: #e6dcf3; }
body.huntress .hunt-toggle.on .f1-chk, .hunt-toggle.on .f1-chk { background: #a43be0; }
/* Nicole's avatar becomes a rune sigil */
body.huntress .hunt-av { background: conic-gradient(from 210deg, #e58bff, #7b3cff, #d05cff, #e58bff, #c6ff3d, #e58bff) !important; color: transparent !important; position: relative; }
body.huntress .hunt-av::after { content: "ᚺ"; position: absolute; inset: 2px; border-radius: inherit; background: #14082c; color: #e58bff; display: grid; place-items: center; font-size: 1.1em; font-weight: 700; }

/* Welcome: tarot card + runes on psychedelic light */
.hunt-hero { position: relative; display: flex; align-items: center; gap: 26px; overflow: hidden; color: #fff; border-radius: 18px; padding: 24px 28px; margin-bottom: 20px;
  background:
    radial-gradient(60% 90% at 12% 50%, rgba(123,60,255,.55), transparent 70%),
    radial-gradient(40% 70% at 85% 10%, rgba(41,224,255,.28), transparent 70%),
    radial-gradient(45% 80% at 95% 100%, rgba(255,79,168,.35), transparent 70%),
    repeating-conic-gradient(from 0deg at 12% 50%, rgba(255,255,255,.035) 0 6deg, transparent 6deg 12deg),
    #0b0618;
  box-shadow: inset 0 0 0 1px rgba(255,211,110,.25); }
.hunt-card { position: relative; flex: 0 0 auto; width: 128px; aspect-ratio: 2 / 3.3; border-radius: 10px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: linear-gradient(160deg, #1c0d3d, #0d0620); box-shadow: 0 0 0 2px #e58bff, 0 0 0 5px #0b0618, 0 0 0 6px rgba(255,211,110,.6), 0 10px 40px rgba(164,59,224,.55); }
.hunt-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255,211,110,.55); border-radius: 6px; pointer-events: none; }
.hc-num, .hc-name { font-family: "Cinzel", serif; color: #ffd36e; text-align: center; position: relative; }
.hc-num { font-size: 13px; font-weight: 700; letter-spacing: .2em; }
.hc-name { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hunt-mandala { width: 104px; height: 104px; animation: huntspin 60s linear infinite; filter: drop-shadow(0 0 8px rgba(255,79,168,.6)); }
@keyframes huntspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hunt-mandala { animation: none; } }
.hunt-txt { position: relative; min-width: 0; }
.hunt-kicker { margin: 0 0 4px; font-family: "Cinzel", serif; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 12px; color: #d9c8f5; }
.hunt-rune { color: #e58bff; }
.hunt-word { margin: 0; font-family: "Cinzel", serif; font-weight: 900; font-size: clamp(38px, 6.5vw, 66px); line-height: 1; letter-spacing: .03em;
  background: linear-gradient(95deg, #e58bff, #b04bff 35%, #d05cff 65%, #e58bff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(176,75,255,.45)); }
.hunt-runes { margin: 8px 0 0; font-size: 20px; letter-spacing: .4em; color: #e58bff; text-shadow: 0 0 10px rgba(255,211,110,.6); }
.hunt-sub { margin: 10px 0 0; font-size: 14.5px; color: #d9c8f5; }
.hunt-sub b { color: #fff; font-family: "Cinzel", serif; font-size: 17px; }
@media (max-width: 760px) { .hunt-hero { padding: 18px; gap: 16px; } .hunt-card { width: 92px; } .hunt-mandala { width: 74px; height: 74px; } .hunt-runes { font-size: 15px; letter-spacing: .3em; } }

.rowacts .linkbtn.del { color: var(--accent); }
.rowacts .linkbtn.del:hover { background: var(--ox-100); color: var(--accent); }
/* The people = the org tree */
.pcard { display: flex; flex-direction: column; gap: 8px; text-align: left; min-width: 200px; }
.pcard.is-member { cursor: pointer; }
.pcard.is-member:hover { box-shadow: 0 0 0 2px rgba(157,41,25,.3); }
.pc-top { display: flex; align-items: center; gap: 10px; }
.pc-who { display: flex; flex-direction: column; min-width: 0; }
.pc-who .org-name { font-weight: 600; }
.pc-who .org-role { font-size: 12.5px; color: var(--ink-soft); }
.pc-open { font-size: 12.5px; color: var(--ink-faint); }
.orgtree li .pcard { display: inline-flex; }
.unassigned-line { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: none; font: inherit; font-size: 14px; color: var(--ink-soft); cursor: pointer; text-align: left; }
.unassigned-line:hover { background: var(--panel-2); }
.unassigned-line .sr-go { margin-left: auto; color: var(--ink-faint); font-size: 18px; }

/* ===== Space & typography pass (Aaron, 1 Oct): say it once, hints inside the boxes ===== */
.mfields { display: flex; flex-direction: column; gap: 8px; }
.mfields .ml { margin: 4px 0 -4px; }
.mt8 { margin-top: 8px; }
.h1-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 10px; vertical-align: 4px; }
.card-head-end { justify-content: flex-end; }
.qa2-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.qa2.to-personal .qa2-grid { grid-template-columns: minmax(0, 1fr); }
/* Task panel: icon column instead of word labels */
.tp-grid { grid-template-columns: 26px minmax(0, 1fr) !important; gap: 8px 10px; }
.tp-ic { font-size: 15px; color: var(--ink-faint); text-align: center; cursor: default; }
/* Empty chips are just the icon */
.ctl-chip.empty { padding-left: 9px; padding-right: 9px; color: var(--ink-faint); border-style: dashed; }
.star-chip { font-weight: 600; }
.star-chip.on { background: #fff; }
/* Tree: no connector above the top row */
.orgtree > ul > li::before, .orgtree > ul > li::after { display: none !important; }
.orgtree > ul::before { display: none !important; }

@media (max-width: 760px) {
  /* Shorter task rows: title, then one line of chips, then actions on the same line */
  .task { padding-top: 10px; padding-bottom: 10px; }
  .task .meta { display: flex; flex-wrap: wrap; gap: 5px 6px; align-items: center; margin-top: 6px; }
  .task .meta .chip, .task .meta .ctl-chip, .task .meta .st-pill { font-size: 12px; padding: 3px 8px; min-height: 26px; }
  .task .meta .proj-chip { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .task .rowacts { flex: 1 1 100%; flex-wrap: nowrap; margin-top: 2px; }
  .rowacts .linkbtn { min-height: 34px; padding: 6px 9px; }
  /* Personal welcome banners shrink to a slim strip on phones */
  .f1-hero { padding: 10px 14px; border-radius: 12px; margin-bottom: 12px; border-bottom-width: 3px; }
  .f1-hero .f1-kicker, .f1-hero .f1-sub { display: none; }
  .f1-word { font-size: 30px; }
  .f1-number { font-size: 34px; padding: 2px 14px 1px 12px; }
  .hunt-hero { padding: 10px 14px; gap: 12px; border-radius: 12px; margin-bottom: 12px; }
  .hunt-card { width: 40px; padding: 3px; border-radius: 6px; }
  .hunt-card .hc-num, .hunt-card .hc-name { display: none; }
  .hunt-card::before { inset: 3px; }
  .hunt-mandala { width: 34px; height: 34px; }
  .hunt-kicker, .hunt-sub { display: none; }
  .hunt-word { font-size: 28px; }
  .hunt-runes { font-size: 13px; margin-top: 2px; }
}
.ph-wrap { position: relative; display: block; min-width: 0; flex: 1 1 auto; }
.ph-wrap input { width: 100%; }
.ph-wrap .ph-txt { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; font-size: 14px; }
.ph-wrap.has-val .ph-txt, .ph-wrap:focus-within .ph-txt { display: none; }
.ph-wrap:not(.has-val):not(:focus-within) input::-webkit-datetime-edit { color: transparent; }
.ph-wrap:not(.has-val):not(:focus-within) input { color: transparent; }
.tp-due .ph-wrap:last-child { flex: 0 0 132px; }
.tp-grid .ph-wrap, .ph-wrap .ph-txt { font-family: var(--body) !important; text-transform: none !important; letter-spacing: normal !important; font-size: 14px; color: var(--ink-faint); }  .tp-grid .ph-wrap input { color: var(--ink); }

/* ============ My Art — catalogue rows (after Programa's schedule list) ============ */
#main[data-page="art"] { max-width: 1240px; }
.art-sample-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--ox-100); border: 1px solid var(--ox-200); color: var(--ox-500); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px; }
.art-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.art-bar .tb-search { flex: 0 1 260px; }
.art-new { margin-left: auto; background: #24251e !important; border-color: #24251e !important; color: #fff; }
.art-n { color: var(--ink-faint); font-size: 11.5px; margin-left: 2px; }
.tb-p.on .art-n { color: rgba(255,255,255,.7); }
.art-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: 1px; }
.art-group { margin-bottom: 22px; }
.art-gh { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; }
.art-gh h3 { margin: 0; font-family: var(--body); font-weight: 600; font-size: 16px; color: #24251e; }
.art-count { font-size: 12px; color: #999692; font-weight: 500; margin-left: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.art-group.collapsed .art-rows, .art-group.collapsed .art-addin { display: none; }
.art-rows { display: flex; flex-direction: column; gap: 8px; }
.art-row { display: grid; grid-template-columns: 56px minmax(180px, 1.6fr) 70px minmax(120px, 1.3fr) minmax(90px, .9fr) 80px 90px 236px; gap: 14px; align-items: center;
  background: #fff; border: 1px solid var(--ox-100); border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(36,37,30,.04); }
.art-row:hover { border-color: var(--ox-200); }
.art-row.is-sample { background: var(--ox-100); }
.art-thumb { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--ox-100); display: grid; place-items: center; flex: 0 0 56px; }
.art-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-thumb b { font-family: var(--display); font-size: 20px; color: #999692; }
.art-thumb:not(.noimg) b { visibility: hidden; }
.art-thumb.big { width: 96px; height: 96px; flex-basis: 96px; border-radius: 10px; }
.art-id { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.art-title { background: none; border: none; padding: 0; text-align: left; font: inherit; font-weight: 600; font-size: 14.5px; color: #24251e; cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-sub { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: #999692; letter-spacing: .04em; display: flex; gap: 8px; align-items: center; }
.art-c { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; background: none; border: none; padding: 4px 6px; margin: -4px -6px; border-radius: 6px; cursor: text; text-align: left; font: inherit; }
.art-c:hover { background: var(--ox-100); }
.art-v { font-size: 13.5px; color: #24251e; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-v.none { color: #c9c5bc; }
.art-l { font-size: 11px; color: #999692; }
.art-in { width: 100%; min-width: 0; font: inherit; font-size: 13.5px; padding: 6px 8px; border: 1.5px solid var(--accent); border-radius: 6px; background: #fff; }
.art-acts { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.art-st { display: inline-flex; align-items: center; gap: 6px; background: var(--ox-100); border: 1px solid var(--ox-100); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; color: #24251e; cursor: pointer; white-space: nowrap; }
.art-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--s); }
.art-st:hover { border-color: #d6d1c6; }
.art-det { border-radius: 8px; }
.art-addin { background: none; border: none; color: #847065; font: inherit; font-size: 13px; padding: 8px 4px 0; cursor: pointer; }
.art-addin:hover { color: var(--ink); text-decoration: underline; }
.art-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.art-fbtn { background: #fff; border: 1px solid var(--ox-200); border-radius: 10px; font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; color: #24251e; padding: 9px 14px; cursor: pointer; }
.art-fbtn:hover { border-color: #c9c3b6; }
/* Details drawer */
.art-panel-k { font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; color: var(--ink-faint); margin-right: auto; }
.art-hero { display: flex; gap: 14px; align-items: flex-start; margin: 6px 0 14px; }
.art-hero-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.art-hero-t .art-pin { font-family: var(--display); font-size: 20px; font-weight: 600; }
.art-pin, .art-xin { width: 100%; min-width: 0; font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.art-pin:focus, .art-xin:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.art-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
textarea.art-pin { resize: vertical; }
.art-extra { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.art-xrow { display: grid; grid-template-columns: minmax(90px, 35%) minmax(0, 1fr); gap: 8px; align-items: center; }
.art-xrow span { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Import */
.art-imp { max-width: 640px; }
.modal-bg:has(.art-imp) .modal { max-width: 680px; }
.art-imp-f { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 10px; }
.art-map { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin-bottom: 12px; }
.art-mrow { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; }
.art-mh { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-marrow { color: var(--ink-faint); }
.art-mrow select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.art-mex { color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 980px) and (min-width: 761px) { .art-row { grid-template-columns: 56px minmax(160px, 1.6fr) minmax(110px, 1.2fr) 80px 80px auto; } .art-row > .art-c:nth-of-type(1), .art-row > .art-c:nth-of-type(3) { display: none; } }
@media (max-width: 760px) {
  .art-bar .tb-search { flex: 1 1 100%; }
  .art-bar .tb-people { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .art-new { position: fixed; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 44; display: none; }
  .art-row { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "th id st" "f f f" "act act act"; gap: 8px 10px; }
  .art-row > .art-thumb { grid-area: th; } .art-id { grid-area: id; }
  .art-row > .art-c { display: none; }
  .art-acts { grid-area: st; flex-direction: column; align-items: flex-end; gap: 6px; }
  .art-row::after { content: none; }
  .art-mrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .art-marrow, .art-mex { display: none; }
  .art-pgrid { grid-template-columns: minmax(0, 1fr); }
}
.art-det, .art-new { font-family: var(--body) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; }
/* Field name inside the box (stays visible once filled) */
.fl { position: relative; display: block; min-width: 0; }
.fl .fl-n { position: absolute; left: 12px; top: 6px; font-size: 10.5px; letter-spacing: .04em; color: var(--ink-faint); pointer-events: none; font-family: var(--body); }
/* Every labelled box leaves room for its label (6 Oct 2026: the label sat on top of the text in pop-ups that missed their own rule) */
.fl > .minput { padding-top: 22px; padding-bottom: 7px; }
.fl .art-pin { padding-top: 21px; padding-bottom: 7px; }
.art-hero-t .fl .art-pin { padding-top: 22px; }
.art-mob { display: none; }
@media (max-width: 760px) {
  .art-mob { display: inline; color: var(--ink-soft); font-family: var(--body); letter-spacing: 0; }
  .art-mob:empty { display: none; }
  .art-bar .tb-p { min-height: 0; padding: 5px 11px; white-space: nowrap; flex: 0 0 auto; }
}
/* Sidebar collapsed → the page grows into the space it frees */
@media (min-width: 761px) {
  body.side-collapsed .main { max-width: 1260px; }
  body.side-collapsed #main[data-page="art"] { max-width: 1420px; }
}
.art-hero-t .fl { width: 100%; }
/* Project pages: tasks first at every width; the assistant and files follow. */
#main[data-page="project"] { display: flex; flex-direction: column; }
#main[data-page="project"] > * { order: 5; }
#main[data-page="project"] > .page-head { order: 0; }
#main[data-page="project"] > .view-tabs { order: 1; }
#main[data-page="project"] > #proj-view { order: 2; }
#main[data-page="project"] > .assist-card { order: 3; margin-top: 18px; }
#main[data-page="project"] > .pa-bar { order: 0; } /* the big ＋ Add stays at the top, under the title (Aaron, 5 Oct) */
#main[data-page="project"] > .nb-card { order: 2; margin-top: 18px; }
.art-thumbtools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 12px; }
.art-files { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.fl-link .art-pin { padding-right: 40px; }
.fl-open { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); text-decoration: none; color: var(--accent); font-size: 16px; padding: 4px; }

/* ============ ACID mode (Aaron) — Lola ACID dark (HD Fury) × Rebellion RAH·R pink ============ */
body.acid {
  --ink: #F4F3F0; --ink-2: #e4e2e8; --ink-soft: #D4D2DA; --ink-faint: #9A97A3; --paper: #0D0B11; --panel: #1B1920; --panel-2: #24222A;
  --line: #3A3842; --accent: #E23C8E; --accent-ink: #fff; --shadow: none;
  --display: "Inter Tight", "Oswald", sans-serif; --body: "Inter Tight", "Montserrat", system-ui, sans-serif;
  background: #0D0B11; color: #F4F3F0; color-scheme: dark;
}
body.acid .main { background: transparent; }
body.acid .dev-note { background: #24222A; color: #9A97A3; }
body.acid .side, body.acid .mbar { background: #0D0B11; border-color: #24222A; }
body.acid .nav-item.active { background: #24222A; color: #fff; box-shadow: inset 4px 0 0 #E23C8E; }
body.acid .nav-item:hover { background: #1B1920; color: #fff; }
body.acid .page-head h1, body.acid .card h2, body.acid .coll-head h2, body.acid .modal h3, body.acid .art-gh h3, body.acid .m-gh b {
  font-family: "Inter Tight", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
body.acid .eyebrow, body.acid .nav-label, body.acid .tp-sec, body.acid .sheet-label { font-family: "JetBrains Mono", monospace; letter-spacing: .14em; color: #9A97A3; }
/* Surfaces */
body.acid .card, body.acid .modal, body.acid .tp, body.acid .tcard, body.acid .art-row, body.acid .m-table, body.acid .pf-table, body.acid .pf-card2,
body.acid .pf-card, body.acid .sheet-list, body.acid .sheet-row, body.acid .soc, body.acid .soc-access, body.acid .orgcard, body.acid .qa2-added li,
body.acid .tp-bubble, body.acid .tp-cbox, body.acid .email-hint, body.acid .arch-proj, body.acid .prog-card, body.acid .stat, body.acid .fin-tile, body.acid .member-card {
  background: #1B1920 !important; border-color: #3A3842 !important; color: #F4F3F0; box-shadow: none !important; }
body.acid .tcol, body.acid .pf-col { background: #141218 !important; }
body.acid .m-head, body.acid .soc-headrow, body.acid .pf-head, body.acid .art-row.is-sample, body.acid .soc-row.is-empty { background: #24222A !important; }
body.acid .m-row.task:hover, body.acid .sheet-row:hover, body.acid .pf-row:not(.pf-head):hover, body.acid .art-c:hover { background: #24222A !important; }
body.acid input, body.acid select, body.acid textarea, body.acid .minput, body.acid .art-pin, body.acid .art-xin, body.acid .tb-search, body.acid .qa2-input {
  background: #24222A !important; color: #F4F3F0 !important; border-color: #3A3842 !important; }
body.acid input::placeholder, body.acid textarea::placeholder { color: #6E6B78; }
body.acid .chip, body.acid .ctl-chip, body.acid .tb-p, body.acid .cat-chip, body.acid .view-tab, body.acid .art-st, body.acid .art-fbtn, body.acid .soc-tog {
  background: #24222A; border-color: #3A3842; color: #D4D2DA; }
body.acid .tb-p.on, body.acid .view-tab.on, body.acid .cat-chip.on { background: #F4F3F0; color: #0D0B11; border-color: #F4F3F0; }
body.acid .btn { background: #24222A; color: #F4F3F0; border-color: #3A3842; text-transform: uppercase; font-family: "Inter Tight", sans-serif; font-weight: 800; letter-spacing: .06em; }
body.acid .btn.primary, body.acid .side-add, body.acid .art-new, body.acid .mbar .mbar-plus { background: #E23C8E !important; border-color: #E23C8E !important; color: #fff !important; }
body.acid .btn.primary:hover, body.acid .side-add:hover { background: #ff5db1 !important; }
body.acid .btn.ghost { background: transparent; }
body.acid .linkbtn { color: #9A97A3; } body.acid .linkbtn:hover { color: #fff; background: #24222A; }
body.acid .rowacts .linkbtn.del { color: #FF9FCB; }
body.acid .task { border-color: #24222A; }
body.acid .check, body.acid .m-check, body.acid .tc-check { background: transparent; border-color: #6E6B78; }
body.acid .st-pill.st-todo, body.acid .st-pill.st-todo:not(.on) { background: #3A3842; color: #F4F3F0; }
body.acid .tp-status .st-pill:not(.on) { background: #24222A !important; }
body.acid .art-v, body.acid .art-title, body.acid .art-gh h3, body.acid .pf-name b, body.acid .soc-name, body.acid .soc-acc a, body.acid .tc-title, body.acid .m-tt { color: #F4F3F0; }
body.acid .art-l, body.acid .art-sub, body.acid .pf-name small, body.acid .art-count { color: #9A97A3; }
body.acid .art-thumb, body.acid .pf-bar, body.acid .pf-bt, body.acid .tp-bar, body.acid .bar { background: #24222A; }
body.acid .toast { background: #F4F3F0; color: #0D0B11; }
body.acid .toast-btn { color: #E23C8E; }
body.acid .modal-bg { background: rgba(5,4,8,.72); }
body.acid .mini-pop { background: #1B1920; border-color: #3A3842; color: #F4F3F0; }
body.acid .mp-opt { background: #24222A; color: #F4F3F0; border-color: #3A3842; }
body.acid .art-sample-note { background: #24222A; border-color: #5C1239; color: #FF9FCB; }
body.acid .qa2-chip { background: #2a1520; border-color: #5C1239; color: #FF9FCB; }
body.acid .m-pill { background: #3A3842; }
body.acid .m-cell.m-blank:hover { background: #24222A; }
body.acid .tc-b.tc-due.over { background: #3a1520; color: #FF9FCB; }
/* Selection & motion: snap/skew like the ACID menus (respecting reduced motion) */
body.acid .nav-item, body.acid .view-tab, body.acid .tb-p, body.acid .sheet-row { transition: transform var(--acid-snap, 90ms) ease-out, background-color 90ms, box-shadow 90ms; }
body.acid .nav-item:hover, body.acid .view-tab:hover { transform: skewX(-8deg); box-shadow: inset 3px 0 0 #E23C8E; }
@media (prefers-reduced-motion: reduce) { body.acid .nav-item:hover, body.acid .view-tab:hover { transform: none; } }
.acid-toggle.on .f1-chk { background: #E23C8E; }
/* Welcome slab: black, stripe-ink particle field, RAH·R step mark */
.acid-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; border-radius: 4px;
  background: #0D0B11; color: #F4F3F0; padding: 26px 28px; margin-bottom: 20px; border: 1px solid #3A3842;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.acid-field { position: absolute; inset: 0; pointer-events: none; }
.acid-field i { position: absolute; top: var(--y); left: -160px; width: var(--l); height: 3px; background: var(--c); opacity: .55;
  animation: acidstreak var(--d) linear var(--o) infinite; }
@keyframes acidstreak { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 320px)); } }
@media (prefers-reduced-motion: reduce) { .acid-field i { animation: none; left: calc(var(--y) * 6); } }
.acid-l { position: relative; min-width: 0; }
.acid-code { margin: 0 0 8px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .12em; color: #9A97A3; display: flex; gap: 10px; align-items: center; }
.acid-tag { background: #E23C8E; color: #fff; padding: 2px 7px; font-weight: 700; letter-spacing: .1em; }
.acid-word { margin: 0; font-family: "Inter Tight", sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 6vw, 64px); line-height: .95; letter-spacing: -.02em; }
.acid-sub { margin: 10px 0 0; font-family: "Inter Tight", sans-serif; color: #D4D2DA; font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.acid-sub b { font-family: "Oxanium", sans-serif; font-weight: 800; font-size: 22px; color: #FF9FCB; }
.acid-sub span { color: #6E6B78; }
.acid-step { position: relative; flex: 0 0 auto; }
.acid-step.big { width: 150px; height: 92px; }
@media (max-width: 760px) {
  .acid-hero { padding: 12px 14px; margin-bottom: 12px; }
  .acid-code, .acid-sub { display: none; }
  .acid-word { font-size: 26px; }
  .acid-step.big { width: 64px; height: 40px; }
}
.art-master { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--panel-2); }
.art-master-h { margin: 2px 2px 8px; font-family: var(--display); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); display: flex; justify-content: space-between; gap: 8px; }
.art-src { font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--olive); }
.art-mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
body.acid .tc-b.ok { background: #10291c; color: #35E0A1; } body.acid .tc-b.tc-due.over { background: #3a1520; } body.acid .art-src { color: #35E0A1; } body.acid .art-master { background: #141218; }
@media (min-width: 761px) { .home-actions .btn.primary { display: none; } } /* the sidebar already has ＋ Add a to-do */
@media (max-width: 760px) { .task .meta .proj-chip { display: inline-block; vertical-align: middle; } }
.cal-gcal { margin-left: auto; font-size: 13px; }
.cal-link { display: flex; gap: 8px; align-items: center; }
.cal-link .minput { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.cal-steps { margin: 12px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.7; }
@media (max-width: 760px) { .cal-gcal { margin-left: 0; } }
.for-you { border-left: 3px solid var(--accent); }
.for-you h2 { display: flex; align-items: center; gap: 8px; }
.fy-n { font-family: var(--body); font-size: 12px; background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 8px; }
.fy-list { display: flex; flex-direction: column; }
.fy-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; background: none; border: none; border-top: 1px solid var(--line); padding: 10px 2px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.fy-item:hover { background: var(--panel-2); }
.fy-t { min-width: 0; overflow-wrap: anywhere; }
.fy-w { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.side .nav-item .nav-badge { margin-left: auto; }
/* My Art between phone and wide desktop: compact rows, no sideways spill */
@media (max-width: 1180px) and (min-width: 761px) {
  .art-row { grid-template-columns: 56px minmax(0, 1fr) auto !important; }
  .art-row > .art-c { display: none !important; }
  .art-mob { display: inline; color: var(--ink-soft); font-family: var(--body); letter-spacing: 0; }
  .art-mob:empty { display: none; }
  .art-acts { flex-wrap: nowrap; }
}
/* Sidebar sections fold */
.nav-sec-h { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; cursor: pointer; text-align: left; }
.nav-sec-h .chev { width: 12px; display: inline-block; }
.nav-sec.shut .nav-sec-b { display: none; }
.nav-sec-h:hover { color: #cfc8ba; }
body.side-collapsed .nav-sec-h span:not(.chev) { display: none; }

/* ============ Merchandise ============ */
#main[data-page="merch"] { max-width: 1240px; }
.art-row.mer-row { grid-template-columns: 56px minmax(180px, 1.6fr) 170px minmax(80px, .8fr) minmax(80px, .8fr) 110px 230px; }
.mer-prog { display: flex; align-items: center; gap: 8px; }
.mer-prog small { font-size: 12px; color: var(--ink-faint); min-width: 32px; }
.mer-addrow { padding: 8px 2px 0; }
.mer-addin { width: 100%; font: inherit; font-size: 14px; background: transparent; border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; color: var(--ink); }
.mer-addin:focus { outline: none; border-style: solid; border-color: var(--accent); background: var(--panel); }
.mcard .mc-bar { margin-top: 8px; height: 4px; }
.mb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mb-card { display: flex; flex-direction: column; gap: 8px; background: none; border: none; padding: 0; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.mb-collage { display: grid; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--ox-100); gap: 2px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mb-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-collage.n1 img { grid-column: 1 / -1; grid-row: 1 / -1; }
.mb-collage.n2 img { grid-row: 1 / -1; }
.mb-collage.n3 img:first-child { grid-row: 1 / -1; }
.mb-collage.n0 { display: grid; place-items: center; grid-template-columns: 1fr; }
.mb-empty { font-size: 34px; color: #c9c3b8; }
.mb-card:hover .mb-collage { outline: 2px solid var(--accent); outline-offset: 2px; }
.mb-meta { display: flex; flex-direction: column; }
.mb-meta b { font-weight: 600; font-size: 14.5px; }
.mb-meta small { font-size: 12px; color: var(--ink-faint); }
.mb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.mb-name { flex: 1 1 220px; font-family: var(--display); font-size: 22px; font-weight: 600; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 4px 8px; color: var(--ink); min-width: 0; }
.mb-name:hover, .mb-name:focus { border-color: var(--line); background: var(--panel); outline: none; }
.mb-sel { font: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); max-width: 240px; }
.mb-add { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.mb-add .btn { flex: 0 0 auto; cursor: pointer; }
.mb-in { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); }
.mb-pins { columns: 4 200px; column-gap: 12px; }
.mb-pin { position: relative; break-inside: avoid; margin: 0 0 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mb-pin img { width: 100%; display: block; }
.mb-pin p { margin: 0; padding: 8px 10px; font-size: 13px; color: var(--ink-soft); }
.mb-pin.k-note { background: var(--ox-100); border-color: var(--ox-200); }
.mb-note { font-size: 14px !important; color: var(--ink) !important; padding: 12px !important; white-space: pre-wrap; }
.mb-link { display: flex; flex-direction: column; gap: 2px; padding: 12px; text-decoration: none; color: var(--ink); }
.mb-link b { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.mb-link small { font-size: 12px; color: var(--accent); }
.mb-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(13,11,9,.6); color: #fff; font-size: 15px; cursor: pointer; opacity: 0; transition: opacity .12s; }
.mb-pin:hover .mb-x, .mb-x:focus-visible { opacity: 1; }
@media (hover: none) { .mb-x { opacity: 1; } }
.art-tp .mb-pins { columns: 2 140px; }
.mer-boardlinks { display: flex; flex-wrap: wrap; gap: 6px; }
.mer-title { font-family: var(--display); font-size: 20px !important; font-weight: 600; }
.mer-range { padding-top: 26px !important; padding-bottom: 10px !important; }
@media (max-width: 1180px) and (min-width: 761px) { .art-row.mer-row { grid-template-columns: 56px minmax(0, 1fr) 110px auto !important; } .mer-row > .art-c { display: none !important; } }
@media (max-width: 760px) {
  .art-row.mer-row { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "th id st" "pg pg pg"; }
  .mer-row > .art-thumb { grid-area: th; } .mer-row .art-id { grid-area: id; } .mer-row .art-acts { grid-area: st; } .mer-row .mer-prog { grid-area: pg; }
  .mer-row > .art-c { display: none; }
  .mb-pins { columns: 2 140px; }
  .mb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.acid .mb-collage { background: #24222A; } body.acid .mb-pin.k-note { background: #2a1520; border-color: #5a1f3e; } body.acid .mer-addin { border-color: #3A3842; }
.mer-row .art-c .art-v { overflow: visible; }
.mer-row .art-c .m-pill { display: inline-block; width: 150px; height: 22px; line-height: 22px; font-style: normal; }
.mer-row .art-c .m-pill.empty { width: auto; padding: 0 12px; font-size: 12.5px; }
.sup-adult-f { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.sup-list { display: flex; flex-direction: column; gap: 8px; }
.sup-row { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(0, 2fr) auto; gap: 14px; align-items: center; background: var(--panel); border: 1px solid var(--ox-100); border-radius: 12px; padding: 12px 14px; }
.sup-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sup-main b a { color: var(--ink); text-decoration: none; } .sup-main b a:hover { color: var(--accent); }
.sup-main small { font-size: 12px; color: var(--ink-faint); }
.sup-main p { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
.sup-facts { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12.5px; color: var(--ink-soft); }
.sup-adult { font-weight: 600; font-size: 12px; border-radius: 999px; padding: 3px 9px; }
.sup-src { font-size: 12px; color: var(--ink-faint); }
.sup-f { display: inline-flex; gap: 5px; align-items: baseline; }
.sup-f i { font-style: normal; color: var(--ink-faint); }
.sup-acts { display: flex; gap: 8px; align-items: center; }
@media (max-width: 900px) { .sup-row { grid-template-columns: 1fr; } .sup-acts { justify-content: flex-start; } }
body.acid .sup-row { background: #1B1920; border-color: #3A3842; }

/* ---- Finances v2 (Monarch-style, 1 Oct 2026) ---- */
:root { --fx-pos: #1f8f55; --fx-neg: #d23f31; --fx-pos-bg: color-mix(in srgb, var(--fx-pos) 13%, transparent); --fx-neg-bg: color-mix(in srgb, var(--fx-neg) 12%, transparent); }
body.acid { --fx-pos: #35e0a1; --fx-neg: #ff5db1; }
.fx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.fx-kpi { padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; border-left: 1px solid var(--line); }
.fx-kpi:first-child { border-left: 0; }
.fx-k { font-size: 12px; color: var(--ink-faint); }
.fx-v { font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.fx-v small { font-size: 13px; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
.fx-v.neg { color: var(--fx-neg); } .fx-v.pos { color: var(--fx-pos); }
.fx-s { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.fx-head { flex-wrap: wrap; gap: 8px; }
.btn.ai { background: #1d1a16; color: #fff; border-color: #1d1a16; }
.btn.ai:hover { background: #3a342c; }
.btn.ai:disabled { opacity: .7; cursor: progress; }
.fx-empty { padding: 8px 2px 4px; }
.fx-empty p { margin: 0 0 10px; color: var(--ink-soft); }
.fx-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-ov { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fx-panel { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.fx-panel h4 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.fx-panel h4 small { font-weight: 400; color: var(--ink-faint); }
.fx-cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 150px; }
.fx-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.fx-colbar { flex: 1; width: 100%; max-width: 34px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 2px 2px; overflow: hidden; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.fx-colbar .run { background: var(--fx-neg); opacity: .55; display: block; }
.fx-colbar .one { background: var(--fx-neg); display: block; }
.fx-coll { font-size: 11px; color: var(--ink-faint); }
.fx-legend { font-size: 12px; color: var(--ink-soft); margin: 10px 0 0; display: flex; align-items: center; gap: 6px; }
.fx-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--fx-neg); display: inline-block; margin-left: 6px; }
.fx-legend i.run { opacity: .55; margin-left: 0; }
.fx-bar { margin-bottom: 10px; }
.fx-bl { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.fx-bl b { font-variant-numeric: tabular-nums; }
.fx-bt { height: 8px; background: color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 99px; overflow: hidden; }
.fx-bt span { display: block; height: 100%; background: var(--fx-neg); border-radius: 99px; }
.fx-up { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.fx-up:last-child { border-bottom: 0; }
.fx-up:hover { background: var(--panel-2); }
.fx-un { flex: 1; min-width: 0; font-weight: 550; font-size: 14px; display: flex; flex-direction: column; }
.fx-un small { font-weight: 400; color: var(--ink-faint); font-size: 12px; }
.fx-up b { font-variant-numeric: tabular-nums; font-size: 14px; }
b.pos, .pos { color: var(--fx-pos); }
.fx-logo { position: relative; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; background: var(--lc); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; overflow: hidden; }
.fx-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 5px; opacity: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 8px; }
.fx-logo img.ok { opacity: 1; }
.fx-ai { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 5px 11px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--ink); }
.fx-ai:hover { background: #1d1a16; color: #fff; border-color: #1d1a16; }
.fx-list { display: flex; flex-direction: column; }
.fx-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.9fr) 196px; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.fx-th { font-size: 12px; color: var(--ink-faint); padding-top: 0; }
.fx-tot { border-bottom: 0; font-weight: 600; }
.fx-name { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; min-width: 0; }
.fx-name > span { display: flex; flex-direction: column; min-width: 0; }
.fx-name b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-name small, .fx-price small { font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-price { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.fx-pm { font-variant-numeric: tabular-nums; font-weight: 600; }
.fx-ren { font-size: 13px; color: var(--ink-soft); }
.fx-ren.soon { color: var(--ox-500); font-weight: 600; }
.fx-act { display: flex; align-items: center; gap: 6px; justify-content: flex-start; }
.fx-mark { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.fx-mark.red { background: var(--fx-neg-bg); color: var(--fx-neg); }
.fx-mark.green { background: var(--fx-pos-bg); color: var(--fx-pos); }
.fx-mark.none { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-faint); font-weight: 500; }
.fx-note { margin-top: 10px; }
.fx-modal .fx-mh { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.fx-modal .fx-mh h3 { margin: 0; }
.fx-modal .fx-mh p { margin: 2px 0 0; }
.fx-tip { background: var(--fx-pos-bg); color: var(--ink); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 10px; line-height: 1.45; }
.fx-alt { border-left: 4px solid var(--line); }
.fx-alt.green { border-left-color: var(--fx-pos); }
.fx-alt.red { border-left-color: var(--fx-neg); }
.fx-alt .alt-main { flex-wrap: wrap; }
.fx-go { width: auto !important; padding: 0 8px; font-size: 12px !important; white-space: nowrap; }
.fx-ok { color: var(--fx-pos); font-size: 12px; white-space: nowrap; }
.fx-thinking { animation: fxpulse 1.4s ease-in-out infinite; }
@keyframes fxpulse { 50% { opacity: .45; } }
@media (max-width: 1100px) {
  .fx-kpis { grid-template-columns: 1fr 1fr; }
  .fx-kpi:nth-child(3) { border-left: 0; }
  .fx-kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fx-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "n p a" "r m m"; row-gap: 4px; }
  .fx-row .fx-name { grid-area: n; } .fx-row .fx-price { grid-area: p; text-align: right; align-items: flex-end; }
  .fx-row .fx-pm { display: none; } .fx-row .fx-ren { grid-area: r; padding-left: 42px; } .fx-row .fx-chk { grid-area: m; text-align: right; }
  .fx-row .fx-act { grid-area: a; }
  .fx-th { display: none; }
  .fx-row.fx-tot { grid-template-areas: "n p"; grid-template-columns: 1fr auto; } .fx-row.fx-tot > span:nth-child(2), .fx-row.fx-tot > span:nth-child(n+5) { display: none; }
  .fx-row.fx-tot .fx-pm { display: block; grid-area: p; text-align: right; } .fx-row.fx-tot > span:nth-child(4) { grid-column: 1 / -1; font-weight: 400; font-size: 12px; color: var(--ink-faint); text-align: right; }
}
@media (max-width: 760px) {
  .fx-kpis { grid-template-columns: 1fr 1fr; }
  .fx-kpi:nth-child(3) { border-left: 0; }
  .fx-kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fx-kpi { padding: 10px 12px; }
  .fx-v { font-size: 20px; }
  .fx-ov { grid-template-columns: 1fr; }
  .fx-cols { height: 110px; gap: 6px; }
  .fx-head .reg-tools { width: 100%; }
  .fx-row:not(.fx-tot) { display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 6px; }
  .fx-row:not(.fx-tot) .fx-name { flex: 1 1 0; min-width: 0; }
  .fx-row:not(.fx-tot) .fx-price { flex: 0 0 auto; }
  .fx-row:not(.fx-tot) .fx-ren { flex: 1 1 100%; padding-left: 42px; }
  .fx-row:not(.fx-tot) .fx-chk { flex: 1 1 auto; padding-left: 42px; text-align: left; }
  .fx-row:not(.fx-tot) .fx-act { flex: 0 0 auto; margin-left: auto; }
}
@media print { .fx-act, #fx-checkall { display: none !important; } }
.fx-card .fx-head { margin-bottom: 10px; }
.fx-ai { display: inline-flex; gap: 4px; align-items: center; }
.fx-narrow { display: none; }
.fx-head .reg-tools .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .fx-wide { display: none; } .fx-narrow { display: inline; }
  .fx-head .reg-tools { flex-wrap: nowrap; gap: 6px; justify-content: space-between; }
  .fx-head .reg-tools .linkbtn { padding: 4px 2px; }
}
@media (max-width: 1100px) { .fx-row.fx-th { display: none !important; } }
.fx-src { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
.fx-src a.fx-ok { text-decoration: none; }
.fx-src a.fx-ok:hover { text-decoration: underline; }
.fx-mark.ok { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-soft); }
.fx-ic { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--ink-faint); font-size: 14px; text-decoration: none; cursor: pointer; }
.fx-ic:hover { border-color: var(--line); color: var(--ink); }
.fx-ic.del:hover { color: var(--fx-neg); }
.fx-colv { font-size: 11px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-height: 14px; }
.fx-cols { height: 170px; }
.is-exp .fx-logo { opacity: .85; }
.fx-row .fx-act { display: grid; grid-template-columns: 1fr 34px 34px; gap: 4px; justify-items: start; }
.fx-ren .linkbtn { padding: 0; text-align: left; }
@media (max-width: 760px) { .fx-row:not(.fx-tot) .fx-act { grid-template-columns: auto 34px 34px; } }
.fx-tip { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.fx-alt .alt-main { flex-wrap: nowrap; min-width: 0; }
.fx-alt .alt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fx-alt .fx-mark { flex: 0 0 auto; }
.fx-alt .fx-go { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 760px) {
  .fx-alt .alt-main { flex-wrap: wrap; }
  .fx-alt .fx-go { order: 3; margin-left: 0; }
  .fx-row:not(.fx-tot) .fx-act { flex: 1 1 100%; margin-left: 0; padding-left: 42px; justify-items: start; grid-template-columns: auto 34px 34px 1fr; }
}
@media (max-width: 760px) {
  .fx-row.is-exp .fx-chk { flex: 1 1 0; min-width: 0; }
  .fx-row.is-exp .fx-act { flex: 0 0 auto; padding-left: 0; margin-left: auto; grid-template-columns: 34px; }
  .fx-row.is-exp .fx-act > span { display: none; }
}

/* ---- My Art sharing & privacy (1 Oct 2026) ---- */
.art-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.art-cat { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 6px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--ink); }
.art-cat small { font-weight: 400; color: var(--ink-faint); margin-left: 4px; }
.art-cat.on { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.art-cat.on small { color: inherit; opacity: .75; }
.art-share-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; }
.art-share-line.other { color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 10px; padding: 8px 12px; }
.art-share-state { padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-soft); font-weight: 600; }
.art-share-state.shared { background: color-mix(in srgb, var(--sig-ink) 14%, transparent); color: var(--sig-ink); }
.art-share-line .btn { margin-left: auto; }
.art-lockmark { white-space: nowrap; }
.art-priv { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink-soft); margin-right: 6px; white-space: nowrap; }
.art-privbtn { display: block; width: 100%; text-align: left; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line); background: none; font: inherit; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.art-privbtn.on { border-style: solid; border-color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font-weight: 600; }
.art-locked { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.share-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
.share-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share-name { font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; padding: 2px; background: var(--panel-2); }
.seg-b { border: 0; background: none; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink-soft); min-height: 34px; }
.seg-b.on { background: var(--ink); color: var(--panel); font-weight: 600; }
.share-lock { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; padding: 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.share-lock input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; }
@media (max-width: 760px) {
  .art-share-line .btn { margin-left: 0; width: 100%; }
  .share-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .seg { width: 100%; } .seg-b { flex: 1; }
}

/* ---- Hand-over links (web versions only) ---- */
.ho-made { background: color-mix(in srgb, var(--olive) 12%, transparent); border-radius: 10px; padding: 12px; margin: 10px 0 6px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ho-made .row { display: flex; gap: 8px; flex-wrap: wrap; }
.ho-made a.btn { text-decoration: none; }
.ho-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ho-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.ho-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.ho-main b { font-size: 14px; }
.ho-main span { color: var(--ink-soft); }
.ho-st.open { color: var(--olive); font-weight: 600; }
.ho-st.closed { color: var(--ink-faint); }
.ho-acts { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.ho-form { display: flex; flex-direction: column; gap: 10px; }
.ho-pick { max-height: 200px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.ho-pick small { color: var(--ink-faint); }
.ho-chk { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.ho-chk input { width: 18px; height: 18px; }
.ho-ready { font-size: 13px; color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.art-webcopy { font-size: 13px; color: var(--ink-soft); margin: -2px 0 10px; }
@media (max-width: 760px) { .ho-row { flex-direction: column; align-items: flex-start; } .ho-scope { width: 100%; } }


/* ---- Contacts & research (1 Oct 2026) ---- */
.ct-bar { gap: 8px; }
.ct-stsel { width: auto; min-width: 140px; }
.ct-cats { margin: 4px 0 14px; flex-wrap: wrap; }
.ct-row { grid-template-columns: 44px minmax(180px, 2fr) auto minmax(150px, 1.4fr) minmax(90px, .8fr) auto; }
.ct-prow { grid-template-columns: 44px minmax(160px, 1.6fr) minmax(160px, 1.3fr) minmax(120px, 1fr) auto; }
.ct-ini { background: color-mix(in srgb, var(--c, #8b8477) 18%, var(--panel)) !important; color: var(--c, var(--ink)); }
.ct-fit { display: inline-flex; gap: 0; }
.ct-star { border: 0; background: none; font-size: 18px; line-height: 1; padding: 6px 2px; cursor: pointer; color: color-mix(in srgb, var(--ink) 18%, transparent); }
.ct-star.on { color: var(--ox-500); }
.ct-own { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.ct-own small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-own .none, .ct-email .none { color: var(--ink-faint); }
.ct-late { color: var(--ox-500) !important; font-weight: 600; }
.ct-email { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-email a { color: var(--ink); }
.ct-lists { display: flex; flex-wrap: wrap; gap: 4px; }
.ct-ltag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--sig-ink) 12%, transparent); color: var(--sig-ink); white-space: nowrap; }
.ct-listnote { font-size: 13px; color: var(--ink-soft); margin: -6px 0 12px; }
.ct-hint { margin-bottom: 14px; }
.ct-lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ct-lcard { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--panel); display: flex; flex-direction: column; gap: 10px; }
.ct-lh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ct-lh b { font-size: 16px; }
.ct-ld { margin: 0; font-size: 13px; color: var(--ink-soft); }
.ct-lnums { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink-soft); }
.ct-lnums b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ct-lun b { color: var(--accent); }
.ct-lacts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ct-lnew { border-style: dashed; justify-content: center; }
.ct-lnew small { color: var(--ink-faint); }
.ct-links { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.ct-links a { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.ct-plist { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ct-pchip { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.ct-pchip small { color: var(--ink-faint); }
.ct-pchip.on { background: color-mix(in srgb, var(--sig-ink) 14%, transparent); border-color: transparent; color: var(--sig-ink); font-weight: 600; }
.ct-addp { margin-bottom: 6px; }
.ct-unsub { margin: 4px 0 8px; }
.ct-logadd { display: grid; grid-template-columns: 110px 140px 1fr auto; gap: 6px; margin-bottom: 10px; }
.ct-log { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ct-logi { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.ct-logi p { margin: 0 0 2px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.ct-logi small { color: var(--ink-faint); font-size: 12px; }
.ct-logk { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-soft); }
@media (max-width: 1180px) {
  .ct-row { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "i n a" "i f a" "i x x"; row-gap: 4px; }
  .ct-row > .art-thumb { grid-area: i; } .ct-row > .art-id { grid-area: n; } .ct-row > .ct-fit { grid-area: f; } .ct-row > .art-acts { grid-area: a; }
  .ct-row > [data-pnext] { grid-area: x; } .ct-row > .ct-own { display: none; }
  .ct-prow { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "i n a" "i e a" "i l l"; row-gap: 4px; }
  .ct-prow > .art-thumb { grid-area: i; } .ct-prow > .art-id { grid-area: n; } .ct-prow > .ct-email { grid-area: e; } .ct-prow > .ct-lists { grid-area: l; } .ct-prow > .art-acts { grid-area: a; }
}
@media (max-width: 760px) {
  .ct-logadd { grid-template-columns: 1fr 1fr; } .ct-logadd #ct-lt { grid-column: 1 / -1; } .ct-logadd .btn { grid-column: 1 / -1; }
  .ct-stsel { min-width: 0; flex: 1; }
  .ct-row .art-acts, .ct-prow .art-acts { flex-direction: column; align-items: flex-end; gap: 4px; }
}
.ct-empties { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 16px; font-size: 13px; color: var(--ink-soft); }
.ct-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.ct-filters .minput { width: auto; padding: 6px 10px; font-size: 13px; min-height: 34px; }
.ct-count { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.ct-prio { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 4px; margin-right: 6px; color: #fff; background: var(--p); vertical-align: 1px; }
.ct-for { font-size: 11px; font-weight: 600; color: var(--sig-ink); margin-right: 6px; }
.ct-lc { color: var(--olive); font-weight: 600; }
.ct-nc { color: var(--ink-faint); }
.ct-avoid { opacity: .72; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.ct-caution { display: block; font-size: 12px; color: var(--accent); margin-top: 2px; line-height: 1.35; }
.ct-cautionbox { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin: 0 0 10px; line-height: 1.45; }
.ct-lcline { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }
.ct-dupebtn { border-color: var(--ox-500); }
.ct-dupebtn b { color: var(--ox-500); }
.ct-dupes { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow: auto; }
.ct-dpair { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ct-dwhy { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ox-500); }
.ct-dcards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.ct-dcard { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.ct-dcard small { color: var(--ink-faint); }
.ct-dcard .btn { align-self: flex-start; margin-top: 6px; }
.ct-hist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ct-hv { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.ct-hv > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-hv small { color: var(--ink-faint); }
.ct-hv span { color: var(--ink-soft); overflow-wrap: anywhere; }
@media (max-width: 760px) { .ct-dcards { grid-template-columns: 1fr; } .ct-filters .minput { flex: 1 1 45%; } .ct-count { margin-left: 0; } }
@media (min-width: 1181px) { .ct-row { grid-template-columns: 44px minmax(240px, 2.4fr) auto minmax(160px, 1.3fr) minmax(80px, .7fr) auto; } }
.ct-row .art-sub, .ct-prow .art-sub { font-family: inherit; font-size: 12px; letter-spacing: 0; line-height: 1.45; white-space: normal; }
.ct-row .art-l.ct-lc { color: var(--olive); }
@media (max-width: 760px) {
  .ct-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ct-cats .tb-p { flex: 0 0 auto; }
  .ct-row, .ct-prow { min-width: 0; }
  .ct-row .art-id, .ct-prow .art-id { min-width: 0; }
}
.ct-row .art-sub, .ct-prow .art-sub { display: block; }
@media (max-width: 760px) {
  .ct-row { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "i n" "i x" "i f"; column-gap: 10px; }
  .ct-row > .art-thumb { width: 40px; height: 40px; }
  .ct-row > .art-acts { grid-area: f; justify-self: end; flex-direction: row !important; align-items: center !important; }
  .ct-row > .ct-fit { grid-area: f; justify-self: start; align-self: center; }
  .ct-row > [data-pnext] { grid-area: x; display: flex; flex-direction: column-reverse; align-items: flex-start; }
  .ct-row .art-title { white-space: normal; }
  .ct-prow { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "i n" "i e" "i l" "i a"; column-gap: 10px; }
  .ct-prow > .art-acts { grid-area: a; justify-self: start; flex-direction: row !important; }
}
@media (max-width: 760px) { .ct-row [data-pnext] .art-v.none { display: none; } }
.ss-dots { display: inline-flex; gap: 4px; margin-left: auto; padding-left: 8px; }
.ss-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .25; }
.ss-dots i.on { opacity: 1; }
/* Undo / Redo live in the pop-up after each change (Aaron, 1 Oct) — not in the sidebar or phone top bar. */
.side-tools .hist-pair { display: none !important; }
.qa2-tip { margin: 8px 0 0; font-size: 12px; color: var(--ink-faint); }
.home-actions .home-plan { text-decoration: none; }
.bd-sub { font-size: 14px; font-weight: 400; color: var(--ink-faint); letter-spacing: 0; text-transform: none; font-family: inherit; }
.fx-demo-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 14px; margin-bottom: 14px; border-radius: 12px; background: color-mix(in srgb, var(--ox-500) 16%, var(--panel)); border: 1px dashed var(--ox-500); font-size: 14px; }
.fx-demo-acts { display: flex; gap: 10px; align-items: center; }
.fx-demo .fx-kpis, .fx-demo .fx-card { position: relative; }
.fx-demo .fx-kpis::after { content: "EXAMPLE"; position: absolute; top: 6px; right: 10px; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--ox-500); }

/* ---- Huntress: today's tarot card ---- */
.tarot { margin: 0 0 16px; border-radius: 16px; background: linear-gradient(135deg, #1c0d2e, #12081f 60%, #2a0f3a); color: #f3eaff; border: 1px solid #4b2a6b; overflow: hidden; }
.tarot-face { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tarot-back { width: 46px; height: 70px; flex: 0 0 auto; border-radius: 6px; border: 2px solid #c9a6ff; background: repeating-linear-gradient(45deg, #2b1245 0 6px, #3a1a5c 6px 12px); display: grid; place-items: center; color: #ffd27a; font-size: 20px; }
.tarot-t { display: flex; flex-direction: column; gap: 2px; }
.tarot-t b { font-family: Cinzel, serif; font-size: 18px; letter-spacing: .06em; }
.tarot-t small { color: #cdb8ea; font-size: 13px; }
.tarot.glow { animation: tarotGlow 2.4s ease-in-out infinite; }
.tarot.glow .tarot-back { animation: tarotBack 2.4s ease-in-out infinite; }
@keyframes tarotGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 166, 255, .0), 0 0 18px 2px rgba(164, 59, 224, .35); } 50% { box-shadow: 0 0 0 3px rgba(201, 166, 255, .35), 0 0 34px 8px rgba(164, 59, 224, .6); } }
@keyframes tarotBack { 50% { border-color: var(--ox-200); } }
@media (prefers-reduced-motion: reduce) { .tarot.glow, .tarot.glow .tarot-back { animation: none; box-shadow: 0 0 0 3px rgba(201, 166, 255, .45); } }
.tarot-body { padding: 0 16px 16px; }
.tarot-ask { margin: 0 0 10px; color: #e3d4fb; font-size: 14px; }
.tarot-form { display: flex; gap: 8px; flex-wrap: wrap; }
.tarot-form .minput { width: auto; background: #fff; color: #12081f; }
.tarot-wait { color: #cdb8ea !important; }
.tarot-read { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: start; }
.tarot-card { margin: 0; border-radius: 8px; overflow: hidden; border: 2px solid #c9a6ff; background: #fff; }
.tarot-card img { display: block; width: 100%; height: auto; }
.tarot-card.rev img { transform: rotate(180deg); }
.tarot-k { margin: 0 0 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #cdb8ea; }
.tarot-txt h3 { margin: 0 0 8px; font-family: Cinzel, serif; font-size: 24px; color: #fff; }
.tarot-txt h3 small { font-size: 13px; color: #ffd27a; font-family: inherit; letter-spacing: .08em; text-transform: uppercase; }
.tarot-reading { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: #f3eaff; }
.tarot-more { font-size: 13px; color: #e3d4fb; margin-bottom: 8px; }
.tarot-more summary { cursor: pointer; color: #c9a6ff; }
.tarot-more p { line-height: 1.55; }
.tarot-src { color: #a993c9; font-size: 11px; }
.tarot .linkbtn { color: #c9a6ff; }
@media (max-width: 600px) { .tarot-read { grid-template-columns: 96px 1fr; gap: 12px; } .tarot-txt h3 { font-size: 20px; } }

/* ---- Nav groups, colour-coded (Aaron, 1 Oct): Me → Team → Sandbox (was Selling & team) → BizNiz (was Running the business; Aaron's names, 4 Oct) → Projects ---- */
.sec-me { --sec: #e3b04b; } .sec-tools { --sec: #5b9bd5; } .sec-biz { --sec: #4fae7b; } .sec-proj { --sec: #e0584a; }
.nav-sec[class*="sec-"] { border-left: 3px solid var(--sec); margin: 4px 0 8px; padding-left: 6px; border-radius: 2px; }
.nav-sec[class*="sec-"] > .nav-sec-h { color: var(--sec); }
.nav-sec[class*="sec-"] .nav-item .nav-ico { color: var(--sec); }
.nav-sec[class*="sec-"] .nav-item.active, .nav-sec[class*="sec-"] .nav-item.on { box-shadow: inset 3px 0 0 var(--sec); }
body.side-collapsed .nav-sec[class*="sec-"] { padding-left: 0; }
.nav-sec[class*="sec-"] { margin: 2px 0 6px; }
.nav-sec[class*="sec-"] > .nav-sec-h { padding-top: 4px; padding-bottom: 2px; font-size: 11px; letter-spacing: .16em; }
.nav-sec[class*="sec-"] .nav-item { padding-top: 6px; padding-bottom: 6px; }
/* Compact top of the sidebar: collapse button sits beside the logo, slimmer Add button */
@media (min-width: 761px) {
  .side { position: sticky; }
  body:not(.side-collapsed) .side-toggle { position: absolute; top: 14px; right: 12px; z-index: 2; }
  body:not(.side-collapsed) .side-brand { padding-top: 6px; }
  .side-add { padding: 8px 12px; font-size: 13px; }
  .side-tools { padding-bottom: 6px; }
}
/* Brain dump: always open on Home, explains itself */
.bd-card { border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--panel)), var(--panel) 60%); }
.bd-card h2 { margin-bottom: 4px; }
.bd-lead { margin: 0 0 10px; font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.bd-card textarea#dump { min-height: 120px; font-size: 15px; line-height: 1.55; }
.bd-card textarea#dump::placeholder { color: var(--ink-faint); line-height: 1.55; }
@media (min-width: 761px) { .bd-card textarea#dump { min-height: 190px; } }

/* ---- My Art views (1 Oct): Detailed / List / Names / Grid, group-by, filters ---- */
.art-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 8px; }
.art-tl { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.art-tl .minput, .art-filters .minput { width: auto; padding: 6px 10px; font-size: 13px; min-height: 34px; }
.art-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.artl { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.artl-row { display: grid; grid-template-columns: minmax(160px, 2fr) minmax(90px, 1.1fr) 60px minmax(110px, 1.3fr) minmax(80px, .9fr) 80px 90px 110px; gap: 10px; align-items: center; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: 13px; color: var(--ink); text-align: left; cursor: pointer; }
.artl-row:last-child { border-bottom: 0; }
.artl-row:hover { background: var(--panel-2); }
.artl-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artl-h { cursor: default; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); background: var(--panel-2); }
.artl-h:hover { background: var(--panel-2); }
.artl-p { text-align: right; font-variant-numeric: tabular-nums; }
.artl-st { display: inline-flex; align-items: center; gap: 6px; }
.artl-st i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.artn { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.artn-row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font: inherit; color: var(--ink); text-align: left; cursor: pointer; min-width: 0; }
.artn-row:hover { border-color: var(--ink-faint); }
.artn-row .art-thumb { width: 44px; height: 44px; flex: 0 0 44px; }
.artn-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.artn-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.artn-t small { color: var(--ink-faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.artg-card { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel-2); cursor: pointer; aspect-ratio: 1; }
.artg-card .art-thumb { width: 100% !important; height: 100% !important; border-radius: 0; display: block; }
.artg-card .art-thumb img { width: 100%; height: 100%; object-fit: cover; }
.artg-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); opacity: 0; transition: opacity .15s; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artg-card:hover .artg-cap, .artg-card:focus-visible .artg-cap { opacity: 1; }
.artg-dot { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
@media (hover: none) { .artg-cap { opacity: 1; } }
@media (max-width: 760px) {
  .artl-row { grid-template-columns: minmax(0, 1fr) auto; } .artl-row > span:not(.artl-st):not(.artl-p) { display: none; } .artl-row .artl-p { display: none; }
  .artg { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .art-tools .seg { width: 100%; } .art-tools .seg-b { flex: 1; padding: 6px 4px; }
}
.tarot-form2 { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 8px; margin-bottom: 8px; }
.tarot-form2 .fl { background: #fff; border-radius: 10px; }
.tarot-form2 .fl-n { color: #6b4a8c; }
.tarot-form2 .minput { background: #fff; color: #12081f; border: 0; }
.tarot-keep { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #e3d4fb; margin: 6px 0 10px; }
.tarot-keep input { width: 18px; height: 18px; }
.tarot-chart { margin: -4px 0 8px; font-size: 13px; color: #ffd27a; letter-spacing: .02em; }
.tarot-chart small { color: #cdb8ea; }
@media (max-width: 700px) { .tarot-form2 { grid-template-columns: 1fr 1fr; } .tarot-form2 .tb-place { grid-column: 1 / -1; } }

/* ---- My Archive documents ---- */
.arch-add2 { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; }
.arch-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.arch-docs { display: flex; flex-direction: column; gap: 10px; }
.arch-doc { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 12px 14px; }
.arch-dh { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.arch-dh b { font-size: 16px; }
.arch-dh small { color: var(--ink-faint); font-size: 12px; }
.arch-da { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.arch-da a.btn { text-decoration: none; }
.arch-da .del { margin-left: auto; }
.arch-newv { display: flex; gap: 8px; margin-top: 10px; }
.arch-vs { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px dashed var(--line); }
.arch-vs li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.arch-vs li span { flex: 1; color: var(--ink-soft); min-width: 160px; }
@media (max-width: 700px) { .arch-add2 { grid-template-columns: 1fr; } }

/* ---- Legal checklist ---- */
.legal-prog { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 14px; }
.legal-prog .pf-bar { flex: 1; max-width: 320px; }
.legal-cat h3 { margin: 0 0 8px; font-size: 15px; }
.legal-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.legal-row:last-child { border-bottom: 0; }
.legal-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.legal-n small { color: var(--ink-faint); font-size: 12px; line-height: 1.4; }
.legal-link { display: flex; gap: 8px; align-items: center; min-width: 0; }
.legal-link .minput { width: 100%; }
.legal-link a.btn { text-decoration: none; }
.legal-add { margin-top: 10px; }
@media (max-width: 760px) { .legal-row { grid-template-columns: 1fr auto; } .legal-row .legal-link { grid-column: 1 / -1; order: 3; } }

/* ===== Design QC fixes (1 Oct, judge round 1) ===== */
/* Sidebar: list scrolls without a visible scrollbar (Windows showed one on Colin's PC); fade hints at more; footer never clipped */
.nav { scrollbar-width: none; -ms-overflow-style: none; }
.nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (min-width: 761px) {
  .nav { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); padding-bottom: 22px; }
  .side-foot { flex-shrink: 0; padding-bottom: 10px; }
}
/* Rows (My Art, Merchandise): columns shrink instead of pushing Status / Details past the card edge */
@media (min-width: 1181px) { .art-row:not(.ct-row):not(.mer-row) { grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 70px) minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 80px) minmax(0, 90px) auto; } }
.art-row .art-c, .art-row .art-id { min-width: 0; }
.art-row .art-v { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-row .art-acts { flex-wrap: nowrap; justify-content: flex-end; }
/* ACID hero never clipped on phone */
@media (max-width: 760px) { .acid-hero { max-width: 100%; box-sizing: border-box; } .acid-hero .acid-step, .acid-hero svg { max-width: 34%; flex-shrink: 1; } }
/* Huntress: tabs and calendar use the Huntress serif, not the condensed display face */
body.huntress .view-tab, body.huntress .fin-tab, body.huntress .cal-title, body.huntress .cal-head, body.huntress .cal-dow, body.huntress .pf-cal-h, body.huntress .tcol-h b { font-family: "Cinzel", serif; letter-spacing: .04em; }
/* ACID Finances: brighter bars, darker tracks */
body.acid .fx-colbar, body.acid .fx-bt { background: rgba(255, 255, 255, .07); }
body.acid .fx-colbar .run { background: #ff9fcb; opacity: .55; }
body.acid .fx-colbar .one, body.acid .fx-bt span { background: #ff5db1; opacity: 1; }
/* Phone menu: same colour groups as the sidebar */
.sheet-label.ms-me, .sheet-label.ms-tools, .sheet-label.ms-biz, .sheet-label.ms-proj { color: var(--accent); }
.sheet-list.ms-me { border-left: 3px solid #e3b04b; } .sheet-list.ms-tools { border-left: 3px solid #5b9bd5; } .sheet-list.ms-biz { border-left: 3px solid #4fae7b; } .sheet-list.ms-proj { border-left: 3px solid #e0584a; }
/* Contacts filters: one tap to show on phone */
.ct-ftoggle { display: none; }
@media (max-width: 760px) {
  .ct-ftoggle { display: inline-flex; margin: 0 0 8px; }
  .ct-filters { display: none; }
  .ct-filters.open { display: flex; }
  .view-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
  .view-tabs::-webkit-scrollbar { display: none; }
  .ct-cats { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
}
/* My Art filter selects never stretch */
.art-filters .minput, .art-tl .minput { max-width: 220px; }
@media (min-width: 1181px) { .art-row.mer-row { grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 170px) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 110px) auto; } }
.ct-own { overflow: hidden; }
.arch-docs { margin-top: 14px; }
body.acid .wl-cell b, body.acid .wl-num, body.acid .wl-n { background: #2A2731 !important; color: #F4F3F0 !important; border-color: #3A3842 !important; }
@media (max-width: 760px) { .acid-hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); } }
.art-ftoggle { display: none; }
@media (max-width: 760px) {
  .art-ftoggle { display: inline-flex; margin: 0 0 8px; }
  .art-tools, .art-filters { display: none; }
  .art-tools.open, .art-filters.open { display: flex; }
  .art-views .seg-b { white-space: nowrap; }
}
/* ===== Design QC round 2 fixes ===== */
/* Sidebar: compact so all four groups (incl. Projects and Legal) fit on a laptop screen */
@media (min-width: 761px) {
  .nav { gap: 1px; }
  .nav-sec[class*="sec-"] { margin: 0 0 4px; }
  .nav-sec[class*="sec-"] > .nav-sec-h { margin: 6px 0 2px; padding-top: 2px; padding-bottom: 2px; }
  .nav-sec[class*="sec-"] .nav-item, .nav > .nav-search { padding-top: 4px; padding-bottom: 4px; min-height: 0; font-size: 14px; }
  .side-brand img { width: 52px; }
  .side-brand { padding-bottom: 6px; }
}
/* Contacts rows fill the width */
@media (min-width: 1181px) { .ct-row { grid-template-columns: 44px minmax(0, 2.4fr) auto minmax(0, 1.4fr) minmax(0, .6fr) auto; } }
/* Merchandise rows: identical column tracks so Cost / Sell price / progress line up */
@media (min-width: 1181px) { .art-row.mer-row { grid-template-columns: 56px minmax(0, 1.6fr) 170px 130px 110px 120px 200px; } .mer-row > * { min-width: 0; overflow: hidden; } .mer-row .art-acts { overflow: visible; } }
/* Huntress calendar: serif everywhere; chips use the cell width */
body.huntress .cal-dn, body.huntress .cal-head div { font-family: "Cinzel", serif; }
.cal-cell .cal-chip { max-width: 100%; }
/* ACID hero: draw the chamfer edge so the border has no gap */
.acid-hero::after { content: ""; position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; pointer-events: none;
  background: linear-gradient(135deg, transparent calc(50% - 1px), #3A3842 calc(50% - 1px), #3A3842 calc(50% + 0px), transparent calc(50% + 1px)); }
@media (max-width: 760px) { .acid-hero::after { width: 9px; height: 9px; } .acid-hero { margin-right: 0; } }
/* Phone bottom bar: active colour follows the style */
@media (max-width: 760px) { .mbar button.on .mi { color: var(--accent); } body.acid .mbar button.on .mi { color: #E23C8E; } }
/* Side panels: darker backdrop so the form stands out */
.tp-scrim { background: rgba(14, 11, 9, .45); }
.ct-links { margin-top: 2px; }
/* Aligned columns: the action column is a fixed width so status labels of different lengths can't shift the others */
@media (min-width: 1181px) {
  .art-row.mer-row { grid-template-columns: 56px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, .9fr) 210px; }
  .art-row:not(.ct-row):not(.mer-row) { grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 70px) minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 80px) minmax(0, 90px) 210px; }
  .ct-row { grid-template-columns: 44px minmax(0, 2.4fr) auto minmax(0, 1.4fr) minmax(0, .6fr) 210px; }
  .art-row .art-acts { justify-content: flex-end; }
}
@media (min-width: 1181px) { .art-row.mer-row { grid-template-columns: 56px minmax(0, 2fr) minmax(150px, 1.2fr) minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, .9fr) 210px; } .mer-row > .art-c:first-of-type { overflow: visible; } }
/* ===== Design QC round 3 fixes ===== */
@media (min-width: 761px) {
  .nav > .nav-search { margin: 6px 0 4px; }
  .nav-sec[class*="sec-"] > .nav-sec-h { margin-top: 10px; }
  .nav-item.proj span:not(.nav-ico):not(.swatch) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .nav-item.proj { min-width: 0; }
  .ct-row { grid-template-columns: 44px minmax(0, 2.2fr) auto minmax(0, 2fr) minmax(0, .5fr) 210px; }
}
/* Merchandise cost: wrap, never cut a price */
.mer-row .art-c .art-v { white-space: normal; overflow: visible; line-height: 1.3; }
/* Calendar chips: title can use two lines */
.cal-cell .cal-chip, .cal-chip { white-space: normal; }
.cal-chip .cc-t, .cal-chip span:last-child { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cal-chip { flex-wrap: wrap; align-items: flex-start; }
.cal-chip .cal-ct { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; min-width: 0; flex: 1 1 60%; }
.imp-opts { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.imp-opt { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; background: var(--panel-2); }
.imp-opt:hover { border-color: var(--ink-faint); }
.imp-opt small { color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
.imp-gs { cursor: default; }
.imp-gsrow { display: flex; gap: 8px; margin-top: 6px; }
.imp-gsrow .minput { flex: 1; min-width: 0; }
.imp-sheets { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

/* ---- Contacts, tidied (1 Oct 2026): one toolbar, slim rows, Avoid kept aside ---- */
.ct-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.ct-top .tb-search { flex: 1 1 220px; min-width: 0; margin: 0; }
.ct-show { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--panel); }
.ct-show button { border: 0; background: none; font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer; color: var(--ink-soft); white-space: nowrap; }
.ct-show button small { opacity: .6; font-size: 11px; margin-left: 2px; }
.ct-show button.on { background: var(--ink); color: var(--bg, #fff); }
.ct-top .ct-ftoggle { display: inline-flex !important; margin: 0; }
.ct-filters { display: none !important; }
.ct-filters.open { display: flex !important; }
.art-group.collapsed .ctr-list { display: none; }
.ctr-list { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.ctr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 66px minmax(0, 230px) 128px; align-items: center; gap: 12px; padding: 8px 14px 8px 16px; border-top: 1px solid var(--line); }
.ctr:first-child { border-top: 0; }
.ctr::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--p); opacity: .85; }
.ctr:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.ctr-main { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctr-main:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.ctr-name { font-weight: 600; font-size: 14.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctr-meta { font-size: 12px; color: var(--ink-soft); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctr-meta .ct-prio { background: var(--p); }
.ctr .ct-caution { font-size: 12px; white-space: normal; }
.ctr .ct-star { font-size: 15px; padding: 4px 1px; }
.ctr .ct-star:not(.on) { opacity: 0; }
.ctr:hover .ct-star:not(.on), .ctr .ct-star:focus-visible { opacity: 1; }
.ctr-next { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; min-width: 0; }
.ctr-next > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctr-nv { color: var(--ink); }
.ctr-nadd { color: var(--ink-faint); opacity: 0; }
.ctr:hover .ctr-nadd, .ctr-next:focus-visible .ctr-nadd { opacity: 1; }
.ctr-lc { color: var(--olive); font-weight: 600; font-size: 11.5px; }
.ctr-who { color: var(--ink-faint); font-size: 11.5px; }
.ctr .art-st { justify-self: end; }
.ct-avoid .ctr-name { color: var(--ink-soft); }
@media (max-width: 760px) {
  .ct-top .tb-search { flex-basis: 100%; }
  .ct-show { flex: 1 1 auto; }
  .ct-show button { flex: 1; padding: 6px 8px; font-size: 12.5px; }
  .ctr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "m s" "n f"; row-gap: 2px; padding: 10px 12px 10px 14px; }
  .ctr-main { grid-area: m; } .ctr .art-st { grid-area: s; } .ctr-next { grid-area: n; } .ctr .ct-fit { grid-area: f; justify-self: end; }
  .ctr-name, .ctr-meta { white-space: normal; }
  .ctr-nadd { display: none; }
  .ctr .art-st { font-size: 12px; padding: 4px 9px; }
}

/* ---- Save bar on edit panels (1 Oct 2026) ---- */
.tp-savebar { position: sticky; bottom: -96px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px -24px -96px; padding: 10px 24px calc(12px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.tp-savebar .sb-msg { min-width: 0; line-height: 1.35; }
.tp-savebar.ok .sb-msg { color: var(--olive); font-weight: 600; }
.tp-savebar.dirty .sb-msg { color: var(--ox-500); font-weight: 600; }
.tp-savebar.err .sb-msg { color: var(--accent); font-weight: 600; }
.tp-savebar .sb-btn { flex: 0 0 auto; min-width: 84px; }
.tp-savebar .sb-btn:disabled { opacity: .6; cursor: progress; }
.task[data-id] { cursor: pointer; }
.row-grip { padding: 6px 4px; }
/* contacts details panel: readable research */
.ct-read { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; background: color-mix(in srgb, var(--ink) 2.5%, transparent); display: flex; flex-direction: column; gap: 9px; }
.ct-ri b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin-bottom: 2px; }
.ct-ri p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.ct-ri.small p { font-size: 12px; color: var(--ink-soft); }
.ct-more { margin: 6px 0 4px; border-top: 1px solid var(--line); padding-top: 10px; }
.ct-more > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 4px 0 10px; }
button.imp-opt { font: inherit; text-align: left; color: inherit; width: 100%; }
@media (max-width: 760px) {
  .ctr .ct-star:not(.on) { display: none; }
  .ctr .ct-fit:not(:has(.ct-star.on)) { display: none; }
  .ctr-next:not(:has(.ctr-nv, .ctr-lc, .ctr-who)) { display: none; }
  .ctr { grid-template-areas: "m s" "n n"; }
  .ctr .ct-fit { grid-area: auto; grid-column: 1 / -1; justify-self: start; }
}
.ct-for { white-space: nowrap; }
/* judge round 1 fixes */
.tp-savebar.dirty { background: color-mix(in srgb, var(--ox-500) 14%, var(--paper)); border-top-color: color-mix(in srgb, var(--ox-500) 45%, var(--line)); }
.tp-savebar.dirty .sb-msg { color: var(--ox-500); font-size: 14px; }
.tp-savebar.dirty .sb-msg::before { content: "●"; margin-right: 7px; color: var(--ox-500); }
.tp-savebar.err { background: color-mix(in srgb, var(--accent) 10%, var(--paper)); }
.tp-savebar.idle .sb-msg, .tp-savebar.ok .sb-msg { color: var(--olive); }
.tp-savebar .sb-btn:disabled { opacity: .35; cursor: default; filter: grayscale(1); }
.tp-savebar.busy .sb-btn:disabled { cursor: progress; }
button.imp-opt { transition: border-color .15s, background .15s; }
button.imp-opt:hover, button.imp-opt:focus-visible { border-color: var(--ink); background: var(--panel); }
button.imp-opt b { display: flex; justify-content: space-between; align-items: center; }
.imp-go { font-weight: 400; opacity: .55; }
button.imp-opt:hover .imp-go { opacity: 1; }
@media (max-width: 760px) { .ctr-where { display: block; } }
@media (min-width: 761px) { .ctr .ct-star:not(.on) { opacity: .22; } .ctr:hover .ct-star:not(.on) { opacity: .6; } }
.tp-savebar.dirty .sb-msg { font-size: 15px; font-weight: 700; }
.ct-collbar { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-soft); margin: 0 2px 8px; }
.ct-gtoggle { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; }
.ct-chev { font-size: 11px; color: var(--ink-faint); width: 10px; }
.art-group.collapsed .mer-addrow, .art-group.collapsed [data-pmore] { display: none; }
/* collapse, judge round 3 */
.art-gh.ct-gtoggle { cursor: pointer; border-radius: 8px; padding: 6px 8px; margin: 0 -8px 6px; justify-content: flex-start; gap: 14px; flex-wrap: wrap; }
.art-gh.ct-gtoggle:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.art-gh.ct-gtoggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.ct-gtoggle h3 { display: inline-flex; align-items: center; gap: 8px; }
.ct-chev { font-size: 14px; color: var(--ink); width: 14px; display: inline-block; text-align: center; }
.ct-gsum { font-size: 12.5px; color: var(--ink-soft); }
.ct-chev { width: 8px !important; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); margin: -4px 4px 0 2px; font-size: 0 !important; flex: 0 0 auto; }
.art-group.collapsed .ct-chev { transform: rotate(-45deg); margin-top: 0; }
/* Distribution: printers' written nudity policy (1 Oct 2026) */
.spill.s-allowed-in-writing { background: var(--olive-100); color: var(--olive); border-color: var(--olive-200); }
.spill.s-case-by-case { background: var(--ox-100); color: var(--ox-500); border-color: var(--ox-200); }
.spill.s-restricted { background: var(--ox-100); color: var(--ox-500); border-color: var(--ox-200); }
.spill.s-not-allowed { background: var(--ox-100); color: var(--accent); border-color: var(--ox-200); }
.spill[class*="s-not-stated"] { background: var(--panel-2); color: var(--ink-soft); }
.spill { white-space: nowrap; display: inline-block; }
.rd-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13.5px; margin: 6px 0 12px; }
.rd-f { display: contents; }
.rd-f b { color: var(--ink-faint); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.rd-notes { font-size: 13.5px; line-height: 1.55; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; max-height: 42vh; overflow: auto; overflow-wrap: anywhere; }
.rd-acts { justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; }
.rd-msg { margin-right: auto; font-size: 13px; color: var(--ink-soft); }
.rd-msg.dirty { color: var(--ox-500); font-weight: 700; } .rd-msg.ok { color: var(--olive); font-weight: 600; } .rd-msg.err { color: var(--accent); font-weight: 600; }
@media (max-width: 760px) { .rd-facts { grid-template-columns: 1fr; } .rd-f b { padding-top: 6px; } }
table.reg td.cell a { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.rd-modal .modal { max-width: 680px; width: min(680px, calc(100vw - 32px)); }
.rd-notes[hidden], #rd-edit[hidden] { display: none; }
@media (max-width: 760px) { [data-gsec="carriers"] [data-col="why"], [data-gsec="dropshippers"] [data-col="why"], [data-gsec="dist_services"] [data-col="why"] { display: none; } }
/* Distribution lists as cards on phones (Where / Nudity / Fit visible without sideways scrolling) */
@media (max-width: 760px) {
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .tablewrap { overflow: visible; }
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg,
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg tbody { display: block; width: 100%; min-width: 0; }
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg thead { display: none; }
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg td { display: block; padding: 0 !important; border: 0 !important; min-width: 0 !important; width: auto !important; grid-column: 1 / -1; font-size: 13.5px; }
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg td[data-col="name"] { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 15px; }
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg td[data-col="fit"] { grid-column: 2; grid-row: 1; }
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg td[data-col="region"],
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg td[data-col="kind"] { color: var(--ink-soft); }
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg td.tdact { text-align: left; display: flex; gap: 14px; }
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg td.cell a { max-width: 100%; }
}
/* Distribution judge round 1 */
table.reg tr.reg-main td { background: color-mix(in srgb, var(--ox-500) 9%, var(--panel)); }
table.reg tr.reg-main td:first-child { box-shadow: inset 3px 0 0 var(--ox-500); font-weight: 600; }
.main-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: var(--ox-500); border-radius: 4px; padding: 2px 6px; margin: 0 0 4px; }
td.cell .main-badge { display: block; width: max-content; }
table.reg .tdact .del { margin-left: 10px; padding: 4px 8px; }
.rn-s { margin: 0 0 9px; } .rn-s b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 1px; }
.rn-s p { margin: 0; } .rn-s ul { margin: 2px 0 0; padding-left: 18px; } .rn-s li { margin: 2px 0; } .rn-p { margin: 0 0 8px; color: var(--ink-soft); font-size: 12.5px; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 280px; line-height: 1.4; }
@media (max-width: 760px) {
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg tr.reg-main { background: color-mix(in srgb, var(--ox-500) 10%, var(--panel)); box-shadow: inset 3px 0 0 var(--ox-500); padding-left: 10px; border-radius: 8px; }
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg tr.reg-main td { background: transparent !important; box-shadow: none !important; }
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg td.tdact [data-rdet] { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; color: var(--ink); font-size: 13px; }
  :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg td.tdact .del { margin-left: auto; }
}
.sup-only { font-size: 13px; color: var(--ink-soft); margin: 4px 2px 10px; }
.spill.s-adult-art-ok { background: var(--olive-100); color: var(--olive); border-color: var(--olive-200); }
.spill.s-confirm-in-writing { background: var(--ox-100); color: var(--ox-500); border-color: var(--ox-200); }
.rn-src { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; }
@media (max-width: 760px) { :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg td.tdact .del { min-width: 44px; min-height: 44px; font-size: 20px; color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; } }
.sup-facts .sup-f { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sup-facts { min-width: 0; }
.grp-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; max-width: 640px; text-transform: none; letter-spacing: 0; }
table.reg tr.reg-ok td { background: color-mix(in srgb, var(--olive) 8%, var(--panel)); }
table.reg tr.reg-ok td:first-child { box-shadow: inset 3px 0 0 var(--olive); }
.sup-row.sup-ok { background: color-mix(in srgb, var(--olive) 7%, var(--panel)); box-shadow: inset 3px 0 0 var(--olive); }
@media (max-width: 760px) { :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg tr.reg-ok { background: color-mix(in srgb, var(--olive) 8%, var(--panel)); box-shadow: inset 3px 0 0 var(--olive); padding-left: 10px; border-radius: 8px; } :is([data-gsec="carriers"], [data-gsec="dropshippers"], [data-gsec="dist_services"], [data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) table.reg tr.reg-ok td { background: transparent !important; box-shadow: none !important; } }
.sup-facts .sup-f i { display: inline-block; width: 16px; margin-right: 4px; font-style: normal; text-align: center; }
.spill.s-ok-by-email { background: var(--olive-100); color: var(--olive); border-color: var(--olive-200); border-style: dashed; }
.sup-row.sup-ok { background: color-mix(in srgb, var(--olive) 13%, var(--panel)); box-shadow: inset 4px 0 0 var(--olive); border-color: color-mix(in srgb, var(--olive) 35%, var(--line)); }
@media (max-width: 760px) { [data-gsec] .card-head:has(.grp-sub) { flex-wrap: wrap; } [data-gsec] .card-head:has(.grp-sub) > div:first-child { flex: 1 1 100%; order: 2; } }
.sup-adult { border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.sup-adult.sup-email { color: var(--olive); background: var(--olive-100); border: 1px dashed var(--olive); }

/* ---- Marketing (1 Oct 2026) ---- */
.mkt-lead { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px 16px; margin: 4px 0 12px; }
.mkt-lead .eyebrow { margin: 0 0 4px; }
.mkt-lead-t { margin: 0; font-size: 14px; line-height: 1.5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 640px; }
.mkt-lead select { width: auto; min-width: 200px; }
.mkt-progress { display: flex; align-items: center; gap: 10px; margin: 0 2px 14px; font-size: 12.5px; color: var(--ink-soft); }
.mkt-progress .pf-bar { flex: 0 0 160px; } .mkt-progress .pf-bar span { background: var(--olive); }
.mkt-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mkt-sec { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mkt-sec.dirty { border-color: var(--ox-500); box-shadow: inset 3px 0 0 var(--ox-500); }
.mkt-sh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mkt-sh h3 { margin: 0; font-family: var(--body); font-size: 15.5px; font-weight: 600; }
.mkt-when { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.mkt-hint { margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.mkt-ta { width: 100%; resize: vertical; font-size: 14px; line-height: 1.5; min-height: 84px; }
.mkt-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mkt-sugg { border: 1px dashed var(--line); background: color-mix(in srgb, var(--sig-ink) 5%, var(--panel)); border-radius: 10px; padding: 10px 12px; }
.mkt-sugg pre { white-space: pre-wrap; font-family: inherit; font-size: 13.5px; line-height: 1.5; margin: 6px 0 10px; }
.mkt-sl { margin: 0; font-size: 12px; color: var(--sig-ink); font-weight: 600; }
.mkt-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px -4px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 13.5px; color: var(--olive); font-weight: 600; }
.mkt-savebar.dirty { background: color-mix(in srgb, var(--ox-500) 14%, var(--paper)); border-color: color-mix(in srgb, var(--ox-500) 45%, var(--line)); color: var(--ox-500); font-size: 15px; font-weight: 700; }
.mkt-savebar.err { background: color-mix(in srgb, var(--accent) 10%, var(--paper)); color: var(--accent); }
.mkt-savebar .btn:disabled { opacity: .35; filter: grayscale(1); cursor: default; }
.mkt-hist { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.mkt-hv p { margin: 2px 0; font-size: 13px; white-space: pre-wrap; } .mkt-hv small { color: var(--ink-faint); }
.mkt-cal-note { font-size: 13px; color: var(--ink-soft); margin: 0 2px 12px; }
.mkt-cal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mkt-cal-m { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mkt-cal-m h3 { margin: 0 0 2px; font-family: var(--body); font-size: 15px; font-weight: 600; }
.mkt-cal-past { margin-bottom: 12px; border-color: color-mix(in srgb, var(--ox-500) 45%, var(--line)); background: color-mix(in srgb, var(--ox-500) 7%, var(--panel)); }
.mkt-cal-und { margin-top: 12px; }
.mkt-cal-i { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 9px; background: var(--panel-2); box-shadow: inset 3px 0 0 var(--s); }
.mkt-cal-i:hover { background: color-mix(in srgb, var(--ink) 6%, var(--panel-2)); }
.mkt-cal-i:focus-visible { outline: 2px solid var(--ink); }
.mkt-cal-i b { font-size: 13.5px; font-weight: 600; } .mkt-cal-i small { font-size: 12px; color: var(--ink-soft); }
@media (max-width: 1100px) { .mkt-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .mkt-plan, .mkt-cal { grid-template-columns: 1fr; } .mkt-lead select { width: 100%; } .mkt-savebar { bottom: 74px; } }

/* ===== Sidebar design pass (1 Oct 2026) — Linear-style restraint: tone not colour, one icon family, mono section labels,
   group colours retuned to equal lightness/chroma and used only as marks. ===== */
.sec-me { --sec: oklch(0.82 0.11 82); } .sec-tools { --sec: oklch(0.78 0.09 245); } .sec-biz { --sec: oklch(0.79 0.10 158); } .sec-proj { --sec: oklch(0.74 0.13 28); }
.side { background: #0c0b0a; border-right-color: #1c1915; }
.nav { gap: 1px; }
.nav-sec[class*="sec-"] { border-left: 0; padding-left: 0; margin: 12px 0 0; border-radius: 0; }
.nav-sec-h.nav-label { display: flex; align-items: center; gap: 9px; margin: 0; padding: 7px 10px; border-radius: 7px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: #8b8376; }
.nav-sec[class*="sec-"] > .nav-sec-h { color: #8b8376; }
.nav-sec-h.nav-label::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--sec); flex: 0 0 auto; }
.nav-sec-h .chev { order: 3; margin-left: auto; font-size: 9px; opacity: .55; }
.nav-sec-h.nav-label:hover { background: #15130f; color: var(--ox-200); }
.nav-sec.shut > .nav-sec-h { color: #6f685d; }
.nav-sec-b { padding-top: 2px; }
.side .nav-item { font-family: "Inter Tight", var(--body); font-size: 14px; font-weight: 500; letter-spacing: -.005em; color: #a9a294;
  padding: 7px 10px; border-radius: 8px; gap: 10px; }
.side .nav-item:hover { background: var(--ox-500); color: var(--ox-100); }
.side .nav-item.active { background: #1e1a16; color: var(--ox-100); box-shadow: inset 2px 0 0 var(--sec, #cfc8ba); }
.nav-ico.svg { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; opacity: .6; font-size: 0; }
.nav-sec[class*="sec-"] .nav-item .nav-ico { color: inherit; }
.side .nav-item:hover .nav-ico.svg { opacity: .9; }
.side .nav-item.active .nav-ico.svg { opacity: 1; color: var(--sec, #fff); }
.side .nav-item.add { color: #81796c; font-size: 13.5px; }
.side .nav-search { background: #141210; border: 1px solid #221e19; margin: 4px 0 6px; color: #8b8376; }
.side .nav-search:hover { border-color: #2e2922; }
.side .nav-search .kbd { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 10px; color: #6f685d; border: 1px solid #2a251f; border-radius: 4px; padding: 1px 5px; background: none; }
.side-foot { border-top-color: #1c1915; }
body.side-collapsed .nav-sec-h.nav-label::before { margin: 0 auto; }

/* ===== ACID, full send (1 Oct 2026): the approved ACID 1.0 front end (numbered index boxes, ▸ slab selection with a cut
   trailing edge, menu bars for sections, mono rail, concentric line field), in Rebellion's pink with a triad per group. ===== */
body.acid .sec-me { --sec: #35E0A1; --sec-l: #9FF2D2; --sec-d: #0C2F27; }
body.acid .sec-tools { --sec: #FF5DB1; --sec-l: #FF9FCB; --sec-d: #4A0F2E; }
body.acid .sec-biz { --sec: #38D6FF; --sec-l: #A8EBFF; --sec-d: #0B3140; }
body.acid .sec-proj { --sec: #F5B82E; --sec-l: #FFDD8F; --sec-d: #3D2A05; }
body.acid .side { padding-left: 30px; background: #0D0B11 repeating-radial-gradient(circle at -30% 108%, transparent 0 20px, rgba(155, 93, 229, .17) 20px 21px); border-right: 1px solid #24222A; }
body.acid .side::before { content: "RAH-R · ACID 1.0 · LLS 201 · REBELLION ART HOUSE · RUN"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl; font: 500 9.5px "JetBrains Mono", monospace; letter-spacing: .22em; color: #6E6B78; white-space: nowrap; pointer-events: none; }
body.acid .side-brand::after { content: "RAH-R"; display: inline-block; margin-top: 8px; background: #FF5DB1; color: #0D0B11; font: 700 10px "JetBrains Mono", monospace; letter-spacing: .14em; padding: 2px 7px; }
body.acid .side-add { border-radius: 0 !important; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); font-family: "Inter Tight", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
body.acid .nav { counter-reset: navsec; }
body.acid .nav-sec { counter-increment: navsec; margin-top: 14px; }
body.acid .nav-sec-h.nav-label { background: #24222A; color: #F4F3F0 !important; font: 800 12px "Inter Tight", sans-serif; letter-spacing: .08em; border-radius: 0;
  padding: 7px 28px 7px 6px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%); box-shadow: inset 0 -3px 0 var(--sec); }
body.acid .nav-sec-h.nav-label::before { content: counter(navsec, decimal-leading-zero); width: auto; height: auto; border-radius: 0; background: var(--sec); color: #0D0B11; font: 700 10px "JetBrains Mono", monospace; padding: 1px 4px; letter-spacing: 0; }
body.acid .nav-sec-h .chev { opacity: .8; font-size: 10px; }
body.acid .nav-sec.shut > .nav-sec-h { background: #16141B; color: #9A97A3 !important; box-shadow: inset 0 -2px 0 var(--sec-d); }
body.acid .nav-sec-h.nav-label:hover { background: #2E2B36; }
body.acid .nav-sec-b { counter-reset: navit; padding: 6px 0 2px; }
body.acid .side .nav-item { counter-increment: navit; font: 800 13px "Inter Tight", sans-serif; text-transform: uppercase; letter-spacing: .03em; color: #D4D2DA; border-radius: 0; padding: 7px 10px 7px 4px; gap: 9px; box-shadow: none; }
body.acid .side .nav-item .nav-ico, body.acid .side .nav-item .drag-grip { display: none; }
body.acid .nav-sec-b > .nav-item::before, body.acid #nav-projects > .nav-item::before { content: counter(navit, decimal-leading-zero); min-width: 24px; text-align: center; font: 500 10px "JetBrains Mono", monospace;
  letter-spacing: 0; border: 1px solid #6E6B78; color: #9A97A3; padding: 1px 2px; flex: 0 0 auto; }
body.acid .side .nav-item:hover { background: #24222A; color: #fff; transform: skewX(-8deg); box-shadow: inset 3px 0 0 var(--sec); }
body.acid .side .nav-item:hover::before { border-color: var(--sec); color: var(--sec); }
body.acid .side .nav-item.active { background: var(--sec-l); color: #0D0B11; transform: none; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -3px 0 var(--sec), inset 0 -6px 0 var(--sec-d); padding-right: 22px; }
body.acid .nav-sec-b > .nav-item.active::before, body.acid #nav-projects > .nav-item.active::before { content: "▸" counter(navit, decimal-leading-zero); background: #0D0B11; color: var(--sec-l); border-color: #0D0B11; }
/* Sub-items that unfold under their parent don't take a number, so the numbers never shift as you move around */
body.acid .side .nav-item.nav-under { counter-increment: none; }
body.acid .nav-sec-b > .nav-item.nav-under::before { content: "└"; border-color: transparent; color: var(--sec); }
body.acid .nav-sec-b > .nav-item.nav-under.active::before { content: "▸"; background: #0D0B11; color: var(--sec-l); border-color: #0D0B11; }
body.acid .side .nav-item.active .swatch { outline: 1px solid #0D0B11; }
body.acid .side .nav-item.add { color: #9A97A3; font-weight: 700; }
body.acid .side .nav-search { counter-increment: none; background: transparent; border: 1.5px solid #D4D2DA; border-radius: 0; color: #F4F3F0; font: 700 12px "JetBrains Mono", monospace; letter-spacing: .14em;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); padding: 8px 10px; transform: none !important; }
body.acid .side .nav-search .nav-ico { display: inline-flex; color: #FF5DB1; }
body.acid .side .nav-search .kbd { border: 1.5px solid #6E6B78; color: #D4D2DA; border-radius: 0; }
body.acid .side .nav-search::before { content: none; }
body.acid .side-foot { border-top: 2px solid #24222A; }
body.acid .side-foot::before { content: "ACID 1.0 · SELECT ▸ START"; display: block; font: 500 9.5px "JetBrains Mono", monospace; letter-spacing: .18em; color: #6E6B78; margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { body.acid .side .nav-item:hover { transform: none; } }
body.acid.side-collapsed .side::before, body.acid.side-collapsed .side-foot::before { display: none; }

/* ACID pages: WipEout front-end breadcrumb, triad bar under the title, numbered slanted tabs, a faint concentric field */
.acid-crumb { display: none; }
body.acid .acid-crumb { display: block; margin: 0 0 8px; font: 500 11.5px "JetBrains Mono", monospace; letter-spacing: .12em; color: #9A97A3; }
body.acid .page-head h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: .95; }
body.acid .page-head h1::after { content: ""; display: block; width: 168px; height: 9px; margin-top: 10px; background: linear-gradient(#FF9FCB 0 33%, #FF5DB1 33% 66%, #4A0F2E 66% 100%); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 100%, 0 100%); }
body.acid .view-tabs { counter-reset: vt; gap: 4px; }
body.acid .view-tab { counter-increment: vt; border-radius: 0 !important; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%); padding-right: 24px;
  font-family: "Inter Tight", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
body.acid .view-tab::before { content: counter(vt, decimal-leading-zero); font: 500 10px "JetBrains Mono", monospace; margin-right: 8px; opacity: .75; }
body.acid .view-tab.on { background: #FF9FCB !important; color: #0D0B11 !important; border-color: #FF9FCB !important; box-shadow: inset 0 -3px 0 #FF5DB1, inset 0 -6px 0 #4A0F2E; }
body.acid .view-tab.on::before { content: "▸" counter(vt, decimal-leading-zero); opacity: 1; }
body.acid .main { background: repeating-radial-gradient(circle at 118% 38%, transparent 0 28px, rgba(155, 93, 229, .09) 28px 29px) fixed; }
.nav-sec-h.nav-label { letter-spacing: .1em; font-size: 10px; white-space: nowrap; }
.nav-sec-h.nav-label > span:not(.chev) { overflow: hidden; text-overflow: ellipsis; }
.nav-sec-h.nav-label { font-family: "Inter Tight", var(--body); font-weight: 600; font-size: 10.5px; letter-spacing: .12em; }
.ct-show button.on { color: var(--paper, #fff); }
body.acid .ct-show button.on { background: #FF9FCB; color: #0D0B11; }
body.huntress .nav-sec-h.nav-label { letter-spacing: .07em; font-size: 10px; color: #b79be8; }
body.huntress .nav-sec.shut > .nav-sec-h { color: #8f78bd; }
body.f1 .nav-sec-h.nav-label { letter-spacing: .1em; }
/* Huntress birth form + other readings (1 Oct 2026) */
.tarot-form2 .fl .minput { width: 100%; box-sizing: border-box; padding: 24px 12px 8px; min-height: 54px; }
.tarot-form2 .fl .fl-n { top: 7px; left: 12px; font-size: 11px; }
.tb-found { margin: 2px 2px 10px; font-size: 13.5px; min-height: 18px; color: var(--line); }
.tb-found.ok { color: var(--olive-200); } .tb-found.err { color: var(--ox-200); }
.oracle-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.oracle-tab { border: 1px solid rgba(205, 184, 240, .35); background: rgba(255, 255, 255, .04); color: #e9defc; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.oracle-tab:hover { background: rgba(255, 255, 255, .1); }
.oracle-tab.on { background: linear-gradient(100deg, #7b3cff, #c43bd6 55%, #ff4fa8); border-color: transparent; color: #fff; }
.oracle-sym { margin: 0; width: 150px; aspect-ratio: 2 / 3; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #3b1d6e, #12081f 70%); border: 1px solid rgba(205, 184, 240, .4); box-shadow: 0 0 30px rgba(164, 59, 224, .35); }
.oracle-glyph { color: #f3e8ff; text-shadow: 0 0 18px rgba(196, 59, 214, .8); line-height: 1; }
.oracle-glyph.rune { font-size: 84px; } .oracle-glyph.num { font-family: "Cinzel", serif; font-size: 88px; font-weight: 700; }
.oracle-glyph.cz { font-family: "Cinzel", serif; font-size: 22px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 0 8px; }
@media (max-width: 700px) { .oracle-sym { width: 110px; } .oracle-glyph.rune, .oracle-glyph.num { font-size: 62px; } }
.oracle-glyph.cz { display: flex; flex-direction: column; align-items: center; gap: 10px; } .oracle-glyph.cz b { font-family: "Noto Serif SC", "Songti SC", serif; font-size: 78px; font-weight: 700; letter-spacing: 0; }
.tarot-form2 .fl .fl-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; right: 10px; }
/* Sidebar judge round 1 */
.nav-sec-h.nav-label { letter-spacing: .08em; font-size: 11px; font-weight: 600; }
.nav-sec-h .chev { font-size: 12px; opacity: .7; }
#nav .nav-item.active { background: color-mix(in oklch, white 7%, transparent); }
#nav .nav-item:focus:not(:focus-visible) { outline: none; }
#nav { padding-bottom: 36px; -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
body:not(.acid):not(.f1):not(.huntress) .side-add { background: color-mix(in oklch, #c8372d 22%, #0c0b0a); border: 1px solid color-mix(in oklch, #c8372d 60%, transparent); color: #ffd9cf; box-shadow: none; }
body:not(.acid):not(.f1):not(.huntress) .side-add:hover { background: color-mix(in oklch, #c8372d 34%, #0c0b0a); color: #fff; }
/* ACID: one pink family (Rebellion), stronger line field, the approved screens' nested ring mark cropped bottom-left */
body.acid .sec-me, body.acid .sec-tools, body.acid .sec-biz, body.acid .sec-proj { --sec: #FF5DB1; --sec-l: #FF9FCB; --sec-d: #5A1F3E; }
body.acid .side { overflow: hidden; background: #0D0B11 repeating-radial-gradient(circle at -30% 108%, transparent 0 20px, rgba(255, 93, 177, .3) 20px 21px); }
body.acid .side::after { content: ""; position: absolute; left: -150px; bottom: -150px; width: 230px; height: 230px; border-radius: 64px; border: 20px solid #FF9FCB;
  box-shadow: 0 0 0 20px #FF5DB1, 0 0 0 40px #5A1F3E, 0 0 0 42px #F4F3F0; opacity: .9; pointer-events: none; z-index: 0; }
body.acid .side > * { position: relative; z-index: 1; }
body.acid .side-foot { background: linear-gradient(to top, #0D0B11 70%, transparent); }
body.acid .main { background: repeating-radial-gradient(circle at 118% 38%, transparent 0 28px, rgba(255, 93, 177, .16) 28px 29px) fixed; }
/* Marketing / Huntress judge round 1 */
.mkt-row .art-title { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.mkt-nothumb { background: transparent !important; border: 0 !important; }
.mkt-noprog { visibility: hidden; }
.mkt-row .art-v.none { color: var(--ink-faint); font-weight: 500; }
.mkt-cal-add { all: unset; cursor: pointer; font-size: 12.5px; color: var(--ink-soft); padding: 4px 2px; margin-top: auto; }
.mkt-cal-add:hover { color: var(--ink); text-decoration: underline; }
.mkt-lead-ctl { display: flex; gap: 8px; flex-wrap: wrap; }
.mkt-lead-ctl .minput { width: auto; min-width: 180px; }
.mkp-pitch { color: var(--ink-faint) !important; }
.tarot .linkbtn, .tarot-src { color: #d9c8f5; }
@media (max-width: 600px) {
  .tarot-read.oracle-read, .tarot-read { grid-template-columns: 1fr; }
  .oracle-sym { width: 120px; margin: 0 auto 4px; }
  .tarot-card { max-width: 140px; margin: 0 auto; }
  .oracle-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -4px; margin-right: -4px; padding: 0 4px; }
  .oracle-tabs::-webkit-scrollbar { display: none; }
  .oracle-tab { flex: 0 0 auto; }
}
body.acid #nav .nav-item.active { background: var(--sec-l); color: #0D0B11; }
body.f1 #nav .nav-item.active { background: var(--f1-red, #e10600); color: #fff; }
body.huntress #nav .nav-item.active { background: linear-gradient(100deg, #5b2bd0, #a43be0); color: #fff; }
body.acid .nav-sec-h.nav-label { font-size: 11.5px; letter-spacing: .04em; padding-right: 24px; }
body.acid .nav-sec-h.nav-label { font-size: 11px; letter-spacing: .01em; gap: 6px; padding-left: 4px; padding-right: 20px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%); }
body.acid .side { padding-right: 12px; }
.tk-g { display: inline-block; margin-right: .45em; }
.mkt-row .art-sub { font-family: var(--body); letter-spacing: 0; }
/* Sidebar judge round 2 */
.nav-sec-h.nav-label, .nav-sec[class*="sec-"] > .nav-sec-h { color: #a8a093; }
.nav-sec.shut > .nav-sec-h { color: #938b7e; }
body.acid .side::after { left: -70px; bottom: 104px; width: 200px; height: 200px; border-radius: 56px; border-width: 18px; box-shadow: 0 0 0 18px #FF5DB1, 0 0 0 36px #5A1F3E, 0 0 0 38px #F4F3F0; opacity: .55; }
body.acid .view-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.acid .view-tabs::-webkit-scrollbar { display: none; }
body.acid .view-tab { flex: 0 0 auto; padding-left: 10px; }
body.huntress #nav .nav-item.active { box-shadow: inset 3px 0 0 #e58bff; }
/* Selected item: solid tone + a short drawn rail (an inset shadow on a rounded box bled into a faint outline) */
body:not(.acid) #nav .nav-item.active { box-shadow: none; }
body:not(.acid):not(.f1):not(.huntress) #nav .nav-item.active { background: #201c18; }
body:not(.acid) #nav .nav-item.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2.5px; border-radius: 2px; background: var(--sec, #cfc8ba); }
body.huntress #nav .nav-item.active::before { background: #e58bff; }
body.f1 #nav .nav-item.active::before { background: #fff; }
body.acid .side::after { left: auto; right: -118px; bottom: auto; top: -112px; width: 210px; height: 210px; opacity: .85; }
body.acid .side-toggle { z-index: 2; }
.mkt-lead-t { display: block; }
.mkt-lead-t .ini, .mkt-lead-t .avatar { vertical-align: middle; margin-right: 4px; }
.mkt-ctl { display: flex; flex-direction: column; gap: 3px; }
.mkt-ctl > span { font-size: 11px; color: var(--ink-faint); letter-spacing: .04em; }
.side .nav-search { min-height: 34px; padding: 7px 10px; }
body.huntress #nav .nav-item.active::before { width: 3px; left: 0; top: 6px; bottom: 6px; background: #e58bff; box-shadow: 0 0 8px rgba(229, 139, 255, .7); }
body.huntress #nav .nav-item.active { padding-left: 13px; }
/* Merch / Marketing pipeline: all stages fit the page on desktop (no sideways scrollbar) */
@media (min-width: 761px) {
  #merch-body .tboard { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; overflow: visible; gap: 10px; }
  #merch-body .tboard .tcol { min-width: 0; width: auto; }
  #merch-body .tboard .tc-title { overflow-wrap: anywhere; }
}
@media (min-width: 761px) and (max-width: 1279px) { #merch-body .tboard { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
#merch-body .tboard .tc-title { overflow-wrap: break-word; word-break: normal; }
@media (max-width: 760px) { #merch-body .tboard { flex-direction: column; overflow: visible; gap: 8px; } #merch-body .tboard .tcol { flex: 0 0 auto; width: 100%; max-height: none; } }

/* ---- Shot lists, Pinterest boards, PDF export (1 Oct 2026) ---- */
.mkt-docacts { display: flex; gap: 8px; justify-content: flex-end; margin: -4px 0 10px; }
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 4px; }
.sl-card { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px 16px; }
.sl-card:hover { border-color: var(--ink-faint); } .sl-card:focus-visible { outline: 2px solid var(--ink); }
.sl-card b { font-size: 15px; } .sl-card small { color: var(--ink-soft); font-size: 12.5px; }
.sl-prog { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .sl-prog .pf-bar span { background: var(--olive); }
.sl-camp { color: var(--ink-faint) !important; }
.sl-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sl-acts { display: flex; gap: 8px; align-items: center; }
.sl-meta { display: grid; grid-template-columns: 2fr 1fr 1.4fr 1.4fr; gap: 8px; margin-bottom: 10px; }
.sl-meta .fl .minput { width: 100%; padding: 22px 12px 7px; }
.sl-meta .sl-notes { grid-column: 1 / -1; }
.sl-count { font-size: 12.5px; color: var(--ink-soft); margin: 4px 2px 6px; }
.sl-table { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.sl-row { display: grid; grid-template-columns: 30px 26px 2.2fr 1.1fr 1fr 1fr 1.3fr 1.2fr 74px; gap: 6px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--line); }
.sl-row:first-child { border-top: 0; }
.sl-th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); background: var(--panel-2); }
.sl-row.done .sl-in { color: var(--ink-faint); text-decoration: line-through; }
.sl-n { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink-soft); }
.sl-c { display: block; min-width: 0; } .sl-cl { display: none; }
.sl-in { width: 100%; border: 1px solid transparent; background: transparent; font: inherit; font-size: 13.5px; padding: 6px 7px; border-radius: 7px; color: var(--ink); }
.sl-in:hover { border-color: var(--line); } .sl-in:focus { border-color: var(--ink-faint); background: var(--paper); outline: none; }
.sl-done input { width: 17px; height: 17px; accent-color: var(--olive); }
.sl-x { display: flex; gap: 2px; justify-content: flex-end; } .sl-x .linkbtn { padding: 4px 6px; } .sl-x .linkbtn:disabled { opacity: .25; }
@media (max-width: 1280px) {
  .sl-meta { grid-template-columns: 1fr 1fr; }
  .sl-th { display: none; }
  .sl-row { grid-template-columns: 30px 1fr auto; grid-auto-rows: auto; padding: 10px 12px; }
  .sl-row .sl-n { display: none; }
  .sl-row .sl-c { grid-column: 2 / 3; } .sl-row .sl-c[data-col="title"] .sl-in { font-weight: 600; font-size: 14.5px; }
  .sl-row .sl-cl { display: block; font-size: 10.5px; color: var(--ink-faint); padding: 0 7px; }
  .sl-row .sl-c[data-col="title"] .sl-cl { display: none; }
  .sl-row .sl-x { grid-column: 3; grid-row: 1; }
}
.mb-pinterest { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 10px 12px; }
.mbp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 13.5px; }
.mbp-h a { font-size: 12.5px; color: var(--ink-soft); }
.mbp-grid { columns: 5 140px; column-gap: 8px; }
.mbp-grid a { display: block; margin-bottom: 8px; break-inside: avoid; } .mbp-grid img { width: 100%; display: block; border-radius: 8px; }
.mb-pin.k-pinterest { grid-column: 1 / -1; padding: 0; background: none; border: 0; }
/* printable page for PDFs (rendered off-screen, then turned into a PDF) */
.pdoc-wrap { position: fixed; left: -10000px; top: 0; }
.pdoc { width: 186mm; background: #fff; color: #141414; font-family: "Inter Tight", Montserrat, sans-serif; font-size: 11pt; line-height: 1.5; padding: 0; }
.pdoc .pd-head { display: flex; gap: 14px; align-items: center; border-bottom: 2px solid #141414; padding-bottom: 10px; margin-bottom: 14px; }
.pdoc .pd-head img { width: 44px; height: auto; }
.pdoc .pd-k { margin: 0; font-size: 8.5pt; letter-spacing: .14em; text-transform: uppercase; color: #777; }
.pdoc h1 { margin: 2px 0 0; font-family: Oswald, "Inter Tight", sans-serif; font-size: 22pt; line-height: 1.1; }
.pdoc .pd-sub { margin: 4px 0 0; color: #555; font-size: 10pt; }
.pdoc h2 { font-size: 12pt; margin: 14px 0 4px; } .pdoc p { margin: 0 0 6px; }
.pdoc .pd-sec { page-break-inside: avoid; }
.pdoc .pd-empty, .pdoc .pd-small { color: #888; font-size: 9pt; } .pdoc .pd-note { background: var(--ox-100); padding: 8px 10px; border-radius: 4px; }
.pdoc .pd-table { width: 100%; border-collapse: collapse; font-size: 9pt; margin-top: 8px; }
.pdoc .pd-table th { text-align: left; border-bottom: 1.5px solid #141414; padding: 4px; font-size: 8pt; text-transform: uppercase; letter-spacing: .05em; }
.pdoc .pd-table td { border-bottom: 1px solid #ddd; padding: 5px 4px; vertical-align: top; }
.pdoc .pd-table img { width: 60px; }
.pdoc .pd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.pdoc .pd-img { width: 100%; height: 150px; object-fit: cover; border-radius: 3px; display: block; }
.pdoc .pd-foot { margin-top: 18px; color: #999; font-size: 8pt; border-top: 1px solid #ddd; padding-top: 6px; }
.mb-pin.k-pinterest { column-span: all; margin-bottom: 12px; }
textarea.sl-in { resize: none; overflow: hidden; line-height: 1.35; min-height: 30px; display: block; }
.sl-in::placeholder { color: transparent; }
.sl-in:focus::placeholder { color: var(--ink-faint); }
.sl-in:placeholder-shown:not(:focus) { background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px) left calc(100% - 7px) / calc(100% - 14px) 1px no-repeat; }
.sl-row.done .sl-in:placeholder-shown { background: none; }
.sl-x .linkbtn { color: var(--ink-soft); font-size: 14px; }
.sl-row { align-items: start; } .sl-row > .sl-done, .sl-row > .sl-n, .sl-row > .sl-x { padding-top: 6px; }
.sl-row.done .sl-in:placeholder-shown { text-decoration: none; }
.sl-more { display: none; }
@media (max-width: 1280px) {
  .sl-more { display: inline-block; grid-column: 2; justify-self: start; font-size: 12.5px; color: var(--ink-soft); padding: 2px 7px; }
  .sl-row:not(.open) .sl-c:not([data-col="title"]):has(.sl-in:placeholder-shown) { display: none; }
  .mb-head { flex-wrap: wrap; } .mb-head .mb-name { flex: 1 1 100%; order: -1; font-size: 20px; }
}
@media (max-width: 760px) {
  :is(#reg-body-mkt_team, #reg-body-mkt_links) .tablewrap { overflow: visible; }
  :is(#reg-body-mkt_team, #reg-body-mkt_links) table.reg, :is(#reg-body-mkt_team, #reg-body-mkt_links) table.reg tbody { display: block; width: 100%; min-width: 0; }
  :is(#reg-body-mkt_team, #reg-body-mkt_links) table.reg thead { display: none; }
  :is(#reg-body-mkt_team, #reg-body-mkt_links) table.reg tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 12px 6px; border-bottom: 1px solid var(--line); }
  :is(#reg-body-mkt_team, #reg-body-mkt_links) table.reg td { display: block; padding: 0 !important; border: 0 !important; min-width: 0 !important; width: auto !important; grid-column: 1; font-size: 14px; }
  :is(#reg-body-mkt_team, #reg-body-mkt_links) table.reg td[data-col="name"] { font-weight: 600; font-size: 15px; }
  :is(#reg-body-mkt_team, #reg-body-mkt_links) table.reg td[data-col="role"], :is(#reg-body-mkt_team, #reg-body-mkt_links) table.reg td[data-col="category"] { color: var(--ink-soft); }
  :is(#reg-body-mkt_team, #reg-body-mkt_links) table.reg td.tdact { grid-column: 2; grid-row: 1; }
  :is(#reg-body-mkt_team, #reg-body-mkt_links) table.reg td.cell a { max-width: 100%; }
}
/* Marketing round-2 judge fixes */
#main .view-tabs:has(.view-tab:nth-child(7)) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 92%, transparent); mask-image: linear-gradient(to right, #000 92%, transparent); padding-right: 24px; }
#main .view-tabs:has(.view-tab:nth-child(7))::-webkit-scrollbar { display: none; }
#main .view-tabs:has(.view-tab:nth-child(7)) .view-tab { flex: 0 0 auto; }
.sl-in:placeholder-shown:not(:focus) { background: none; }
.sl-in:hover { border-color: var(--line); }
.mbp-h { padding-right: 40px; }
.pdoc .pd-shots { font-size: 10.5pt; } .pdoc .pd-shots td { padding: 7px 5px; }
.pdoc .pd-lines div { border-bottom: 1px solid #ccc; height: 24px; }
@media (max-width: 1280px) { .sl-x .linkbtn { min-width: 40px; min-height: 40px; font-size: 17px; } }
@media (max-width: 600px) { .sl-meta { grid-template-columns: 1fr; } }
textarea.sl-in { field-sizing: content; }
.sl-x .linkbtn { min-width: 32px; min-height: 32px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
/* Press kit (1 Oct 2026) */
.pk-drop { border: 2px dashed var(--line); border-radius: 14px; padding: 16px 18px; background: var(--panel); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pk-drop.hot { border-color: var(--accent, var(--accent)); background: color-mix(in srgb, var(--accent, var(--accent)) 6%, var(--panel)); }
.pk-drop b { font-size: 15px; } .pk-drop > div:first-child { font-size: 13.5px; color: var(--ink-soft); }
.pk-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pk-ctl .minput { width: auto; }
.pk-prog { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--ink-soft); min-height: 0; } .pk-prog:empty { display: none; }
.pk-link { display: grid; grid-template-columns: 2fr 1.3fr 1fr auto auto; gap: 8px; margin-bottom: 16px; }
.pk-sec { margin-bottom: 16px; } .pk-sec h3 { font-family: var(--body); font-size: 15px; font-weight: 600; margin: 0 2px 8px; }
.pk-list { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.pk-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.pk-row:first-child { border-top: 0; }
.pk-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--panel-2); display: grid; place-items: center; font-size: 15px; color: var(--ink-soft); }
.pk-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-title { all: unset; cursor: pointer; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-title:hover { text-decoration: underline; } .pk-title:focus-visible { outline: 2px solid var(--ink); }
.pk-main small { color: var(--ink-soft); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-acts { display: flex; gap: 8px; align-items: center; }
.pk-kind { font: inherit; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; background: var(--paper); color: var(--ink); }
.pk-del { min-width: 32px; min-height: 32px; font-size: 16px; }
@media (max-width: 760px) {
  .pk-link { grid-template-columns: 1fr 1fr; } .pk-link #pk-url { grid-column: 1 / -1; }
  .pk-row { grid-template-columns: 32px minmax(0, 1fr); } .pk-acts { grid-column: 1 / -1; flex-wrap: wrap; }
  .pk-del { margin-left: auto; min-width: 40px; min-height: 40px; }
}
.mkp-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.mkp-mail { white-space: nowrap; }
.mkp-nomail { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
#merch-body .ctr { grid-template-columns: minmax(0, 1fr) 66px minmax(0, 150px) 172px 128px; } /* fixed mail column so the stars line up row to row */
@media (min-width: 761px) { #merch-body .ctr .mkp-mail, #merch-body .ctr .mkp-nomail { justify-self: end; } }
@media (max-width: 760px) { #merch-body .ctr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "m s" "n f" "g g"; } #merch-body .ctr .mkp-mail, #merch-body .ctr .mkp-nomail { grid-area: g; justify-self: start; } }
/* Kept copies badge (1 Oct 2026): green-bordered file mark + version · date */
.dc-badge { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--olive); background: color-mix(in srgb, var(--olive) 8%, var(--panel)); color: var(--ink); border-radius: 8px; padding: 3px 9px 3px 4px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.dc-badge:hover { background: color-mix(in srgb, var(--olive) 16%, var(--panel)); }
.dc-file { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 3px; border-radius: 4px; background: var(--olive); color: #fff; font: 700 9.5px "JetBrains Mono", monospace; letter-spacing: .02em; position: relative; }
.dc-file.sm { height: 18px; min-width: 24px; }
.dc-meta { color: var(--olive); font-weight: 600; }
.dc-badge.dc-none { border-style: dashed; border-color: var(--line); background: transparent; color: var(--ink-soft); padding: 4px 9px; }
.dc-badge.dc-fail { border-color: var(--ox-500); background: color-mix(in srgb, var(--ox-500) 9%, var(--panel)); color: var(--ox-500); padding: 4px 9px; }
.dc-vs { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow: auto; margin-bottom: 10px; min-width: 260px; }
.dc-v { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; }
.dc-v b { font-size: 13px; display: block; } .dc-v small { font-size: 11.5px; color: var(--ink-soft); }
.dc-note { font-size: 11px !important; margin-top: 6px !important; }
.legal-link, .arch-da { flex-wrap: wrap; }
body.acid .dc-badge { border-color: #35E0A1; background: transparent; color: #F4F3F0; } body.acid .dc-meta { color: #35E0A1; } body.acid .dc-file { background: #35E0A1; color: #0D0B11; }
/* Judge pass (2 Oct 2026) */
.ct-af { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 4px; margin-right: 6px; color: var(--olive); border: 1px solid var(--olive); vertical-align: 1px; }
body.acid .ct-af { color: #35E0A1; border-color: #35E0A1; }
.dc-note { font-size: 11.5px !important; color: var(--ink-soft); margin: 8px 0 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
.dc-cur { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--olive); margin-left: 4px; }
body.acid .dc-cur { color: #35E0A1; }
.dc-br { display: none; }
@media (max-width: 760px) {
  .legal-link .dc-br { display: block; flex-basis: 100%; height: 0; }
  .legal-link { row-gap: 8px; }
  #merch-body { padding-bottom: 96px; }
  .pk-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
.dc-v .linkbtn { color: var(--ink); opacity: 1; }
body.acid .dc-v .linkbtn { color: #F4F3F0; }
#merch-body .ctr-where { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } /* press list: pills on one line, short meta in full below */
@media (max-width: 760px) { #merch-body .ctr-where { white-space: normal; } }
@media (max-width: 760px) { #merch-body .mkp-page { padding-left: 0; margin-left: 0; } }
/* ---- View only (Joe, 2 Oct 2026): creation and edit controls are hidden; the server refuses changes anyway ---- */
.vo-banner { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 7px 16px; background: var(--olive); color: var(--olive-100); font-size: 13px; text-align: center; }
.vo-banner b { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; background: var(--olive); color: #fff; padding: 2px 8px; border-radius: 4px; }
body.viewer #side-add, body.viewer #home-assign, body.viewer .mbar-add, body.viewer .hist-pair, body.viewer #new-project, body.viewer #capture-card,
body.viewer .sample-banner, body.viewer .tp-savebar, body.viewer .legal-add, body.viewer #legal-new, body.viewer #team-tree .grp-bacts, body.viewer #org-body .org-acts,
body.vo-data [data-kind="finance"], body.vo-data [data-kind="accounts"], body.vo-data [data-kind="business"], body.vo-data [data-view="sales"], body.vo-data [data-go="sales"], body.vo-data [data-view="boi"], body.vo-data [data-go="boi"] { display: none !important; } /* no money for view-only (observers see it — 14 Oct 2026) */
body.vo-obs [data-kind="business"] { display: none !important; } /* observers: business and tax details stay private */
body.viewer .vo-locked { background: transparent; border-color: transparent; box-shadow: none; cursor: default; }
body.viewer select:disabled { opacity: 1; cursor: default; }
/* ---- Reading in Thai ---- */
.lang-bg { position: fixed; inset: 0; z-index: 9999; background: rgba(13, 11, 17, .72); display: grid; place-items: center; padding: 16px; }
.lang-card { background: var(--panel, #fff); color: var(--ink, #1a1714); border-radius: 16px; padding: 28px 26px 22px; width: min(400px, 100%); text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.lang-logo { width: 56px; height: 56px; object-fit: contain; margin: 0 auto 10px; display: block; }
.lang-card h2 { margin: 0 0 14px; font-size: 22px; line-height: 1.3; }
.lang-card h2 span, .lang-card p span { display: block; font-family: "Noto Sans Thai", "Thonburi", "Leelawadee UI", sans-serif; font-weight: 500; color: var(--ink-soft, #6b645b); font-size: .82em; margin-top: 3px; letter-spacing: 0; text-transform: none; }
.lang-card p { margin: 0 0 14px; }
.lang-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 16px; }
.lang-opts .btn { min-height: 46px; font-size: 16px; justify-content: center; }
.lang-opts .btn[data-l="th"] { font-family: "Noto Sans Thai", "Thonburi", "Leelawadee UI", sans-serif; letter-spacing: 0; text-transform: none; }
.lang-note { font-size: 12.5px; color: var(--ink-soft, #6b645b); margin: 0 0 8px !important; }
#lang-switch, [data-act-lang] { font-family: "Noto Sans Thai", "Thonburi", "Leelawadee UI", inherit; letter-spacing: 0 !important; text-transform: none !important; }
html[lang="th"] body { font-family: "Montserrat", "Noto Sans Thai", "Thonburi", "Leelawadee UI", sans-serif; }
html[lang="th"] body *:not(kbd):not(code) { letter-spacing: 0 !important; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] .btn, html[lang="th"] button { line-height: 1.4; }
body.tr-busy::after { content: "กำลังแปล…"; position: fixed; right: 14px; bottom: 14px; z-index: 9998; background: #1a1714; color: #fff; font: 500 12px "Noto Sans Thai", sans-serif; padding: 6px 10px; border-radius: 8px; opacity: .85; pointer-events: none; }
@media (max-width: 760px) { body.tr-busy::after { bottom: 84px; } }
/* ---- Website connections (2 Oct 2026) ---- */
.web-site { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; margin-bottom: 14px; }
.web-site b { display: block; font-size: 17px; } .web-site small { color: var(--ink-soft); font-size: 13px; }
.web-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.web-c { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: 1fr auto; gap: 10px 14px; padding: 16px 18px; margin: 0; }
.web-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--panel-2); display: grid; place-items: center; font-size: 18px; color: var(--ink-soft); }
.web-b h3 { margin: 2px 0 4px; font-size: 15.5px; } .web-b p { margin: 0 0 6px; font-size: 13.5px; } .web-b small { color: var(--ink-soft); font-size: 12.5px; display: block; }
.web-f { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; }
.web-st { font-size: 12.5px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; } .web-st i { width: 8px; height: 8px; border-radius: 50%; background: #a8a197; }
.web-steps { padding-left: 20px; margin: 12px 0; } .web-steps li { margin-bottom: 8px; line-height: 1.5; }
.web-note { font-size: 13px; color: var(--ink-soft); }
@media (max-width: 760px) { .web-site { flex-direction: column; align-items: flex-start; } }
.sec-web { --sec: oklch(0.76 0.10 300); }
body.acid .sec-web { --sec: #FF5DB1; --sec-l: #FF9FCB; --sec-d: #5A1F3E; }
.sheet-label.ms-web { color: var(--accent); } .sheet-list.ms-web { border-left: 3px solid var(--ox-200); }
/* ---- Tighter (2 Oct 2026): one step past compact ---- */
body.tight .main { padding: 14px 18px 72px; }
body.tight .card { padding: 10px 13px 11px; border-radius: 10px; }
body.tight .task { padding: 3px 2px; gap: 7px; }
body.tight .task .ttl { font-size: 13.5px; line-height: 1.25; }
body.tight .meta { margin-top: 1px; }
body.tight .page-head { margin-bottom: 6px; }
body.tight .page-head h1, body.tight .home-head h1 { font-size: 22px; }
body.tight .page-sub, body.tight .sub { font-size: 12.5px; }
body.tight .home-head { margin-bottom: 8px; }
body.tight h2 { font-size: 16.5px; }
body.tight .home-grid, body.tight .home-main, body.tight .home-side, body.tight .board, body.tight .stat-row { gap: 8px; }
body.tight .stat { padding: 7px 10px; } body.tight .stat-n { font-size: 18px; }
body.tight .ctr { padding-top: 5px; padding-bottom: 5px; }
body.tight .nav-item { padding-top: 4px; padding-bottom: 4px; }
body.tight .coll-head { min-height: 0; }
body.folded #capture-card:not(.fold-open) > :not(h2) { display: none !important; }
body.folded #capture-card:not(.fold-open) { padding-top: 10px; padding-bottom: 10px; }
body.folded #capture-card > h2 { cursor: pointer; margin: 0; }
body.folded #capture-card > h2::after { content: " ▸"; font-size: .7em; color: var(--ink-soft); }
body.folded #capture-card.fold-open > h2::after { content: " ▾"; }
.web-mh { margin: 0 0 10px; }
@media (max-width: 760px) { .vo-banner { padding: 4px 12px; } .vo-banner span { display: none; } }
/* Judge pass (2 Oct): viewer home, connections, layout control, one fold marker */
body.viewer .coll[data-coll="mytasks"] #tasks { display: none; } /* view-only: no to-dos, but what needs them still shows */
body.viewer .coll[data-coll="mytasks"]:not(:has(#for-you:not([hidden]))) { display: none; }
.web-who { font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
#density-toggle { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #2a2622; border-radius: 6px; padding: 3px 8px; }
#density-toggle b { font-weight: 600; color: var(--ox-100); }
#density-toggle .dz-ic { opacity: .7; }
body.tight #dump { min-height: 0; height: 58px; }
body.tight .bd-lead { display: none; }
body.folded #capture-card > h2 { display: flex; align-items: center; justify-content: space-between; }
body.folded #capture-card > h2::after { content: "▾"; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--accent); font-size: 13px; transform: rotate(-90deg); transition: transform .15s; }
body.folded #capture-card.fold-open > h2::after { content: "▾"; transform: none; }
.side-foot .foot-links { flex-wrap: wrap; row-gap: 6px; } .side-foot .foot-links > * { white-space: nowrap; }
/* ---- This week so far (2 Oct 2026) ---- */
.dg { border-bottom: 1px solid var(--line); padding: 2px 0 14px; margin-bottom: 8px; }
.dg:empty { display: none; }
.dg-head { display: flex; align-items: center; justify-content: space-between; }
.dg-head .eyebrow, .dg-nx { margin: 0; }
.dg-re { font-size: 12px; }
.dg-sum { font-size: 15px; line-height: 1.55; margin: 6px 0 12px; max-width: 70ch; text-wrap: pretty; }
.dg-nx { margin-bottom: 6px !important; }
.dg-picks { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; counter-reset: dg; }
.dg-picks li { counter-increment: dg; }
.dg-pick { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.dg-pick::before { content: counter(dg); grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 12px/22px Montserrat, sans-serif; text-align: center; margin-top: 1px; }
.dg-pick:hover { border-color: var(--ink-soft); } .dg-pick:focus-visible { outline: 2px solid var(--ink); }
.dg-pick b { font-weight: 600; font-size: 14px; } .dg-pick small { color: var(--ink-soft); font-size: 12.5px; }
.dg-note, .dg-load { font-size: 11.5px; color: var(--ink-faint, #9a9389); margin: 0; }
body.tight .dg-sum { font-size: 14px; margin: 4px 0 8px; }
/* ---- Phone navigation (Aaron, 2 Oct 2026): ＋ / Search / Home top right; symbols-only section bar at the bottom ---- */
.m-top { display: none; }
@media (max-width: 760px) {
  .side .hist-pair, .m-inbox { display: none !important; }
  .m-top { display: inline-grid; place-items: center; position: relative; width: 40px; height: 40px; border-radius: 999px; background: transparent; border: 1px solid #2c261f; color: #cfc8ba; cursor: pointer; padding: 0; }
  .m-top.m-add { background: var(--accent); border-color: var(--accent); color: #fff; }
  .m-top.on { color: #fff; border-color: #6b5f50; }
  .m-top .nav-badge { position: absolute; top: -5px; right: -5px; padding: 1px 6px; font-size: 10.5px; }
  .m-top .nav-badge[hidden] { display: none; }
  body.viewer .m-top.m-add { display: none; }
  .mbar button { min-height: 54px; }
  .mbar button svg { width: 24px; height: 24px; }
  .mbar button.on { color: #fff; }
  .mbar button.on::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 18px; height: 3px; margin-left: -9px; border-radius: 2px; background: var(--accent); }
  .mbar-dot { top: 8px; }
}
/* Team & Make and Sell & Run each hold two groups, so their own labels stay; everything else's label hides */
.sheet.only-me .sheet-label, .sheet.only-tools .sheet-label:not(.ms-tools), .sheet.only-biz .sheet-label:not(.ms-biz) { display: none; }
.sheet.only-me .sheet-list:not(.ms-me), .sheet.only-tools .sheet-list:not(.ms-tools), .sheet.only-biz .sheet-list:not(.ms-biz):not(.ms-web) { display: none; }
.sheet.only-me .sheet-foot, .sheet.only-tools .sheet-foot, .sheet.only-biz .sheet-foot { display: none; }
.sheet.only-biz .sheet-list.ms-web { margin-top: 10px; }
.sr-val { margin-left: auto; margin-right: 6px; color: var(--ink-soft); font-size: 13px; }
.sheet-who { font-size: 13px; color: var(--ink-soft); margin-right: auto; }
.sheet-list.ms-set { border-left: 3px solid #8b8477; }
@media (max-width: 760px) { .ct-prow > .art-thumb { width: 40px; height: 40px; flex-basis: 40px; align-self: start; } } /* mobile QC 2 Oct: the 56px thumb spilled over the text in a 40px column */
@media (max-width: 760px) { .tlx-ltxt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; font-size: 12.5px; } } /* mobile QC 2 Oct: names were cut to one short line */
/* ---- Tax panel (2 Oct 2026) ---- */
.tax-panel { margin-top: 16px; }
.tax-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.tax-head h2 { margin: 2px 0 4px; }
.tax-sub { font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 0; max-width: 72ch; }
.tax-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.tax-ent { all: unset; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; min-width: 150px; }
.tax-ent b { font-size: 14px; } .tax-ent small { color: var(--ink-soft); font-size: 12px; }
.tax-ent.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tax-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.tax-facts small { display: block; font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.tax-acts { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tax-badge { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.tax-badge.ok { background: var(--olive-100); color: var(--olive); } .tax-badge.auto { background: var(--ox-100); color: var(--ox-500); } .tax-badge.stale, .tax-badge.busy { background: #eceae6; color: var(--ink-soft); }
.tax-vt { margin: 4px 0 12px; }
.tax-sum { font-size: 14.5px; line-height: 1.55; max-width: 75ch; }
.tax-ent-body h4 { margin: 16px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.tax-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tax-t td { padding: 7px 8px 7px 0; border-top: 1px solid var(--line); vertical-align: top; }
.tax-t .tx-rate { font-weight: 700; white-space: nowrap; width: 1%; padding-right: 14px; }
.tax-t .tx-when { color: var(--ink-soft); }
.tx-src { font-size: 12px; white-space: nowrap; }
.tax-notes { padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.tax-due { list-style: none; padding: 0; margin: 0; }
.tax-due li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.tax-due li b { font-size: 14px; } .tax-due li small { display: block; color: var(--ink-soft); font-size: 12.5px; }
.tax-due .tx-form { display: inline; font-weight: 600; }
.tx-next { font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.tax-due li.late .tx-next { color: var(--accent); }
.tax-srcs { padding-left: 18px; font-size: 13px; line-height: 1.7; word-break: break-word; }
.tax-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; }
.tax-calc-in { display: grid; gap: 10px; }
.tax-calc-in label, .tax-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; }
.tax-calc-in small { font-weight: 400; color: var(--ink-soft); }
.tax-calc-out { background: var(--panel-2, var(--ox-100)); border-radius: 12px; padding: 12px 14px; align-self: start; }
.tc-l { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.tc-l small { display: block; color: var(--ink-soft); font-size: 12px; font-weight: 400; }
.tc-l b { white-space: nowrap; text-align: right; }
.tc-l.strong { border-bottom: 0; font-size: 15px; } .tc-l.strong span { font-weight: 700; }
.tax-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 12px 0; }
.tax-form label[hidden] { display: none; }
.tf-del { margin-left: auto; color: var(--accent); }
/* Example data — deliberately loud so nobody mistakes it for real (Aaron: "in an obvious colour that its mock") */
.mock, input.mock, select.mock { background: repeating-linear-gradient(135deg, #fff3c4 0 8px, #ffe9a3 8px 16px) !important; outline: 1.5px dashed #d99a00; outline-offset: 1px; border-radius: 4px; color: #5a3d00 !important; }
span.mock { padding: 0 5px; }
.mock-chip { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #5a3d00; padding: 1px 7px; border-radius: 4px; background: repeating-linear-gradient(135deg, #fff3c4 0 6px, #ffe9a3 6px 12px); outline: 1.5px dashed #d99a00; }
.mock-bar { margin: 12px 0 4px; padding: 9px 12px; border-radius: 10px; background: #fff8de; border: 1.5px dashed #d99a00; font-size: 13px; color: #5a3d00; }
.mock-bar b { margin-right: 6px; }
.mock-note { font-size: 12px; color: #8a5600; margin: 8px 0 0; }
[data-gsec="business_details"] tr.is-sample td { background: repeating-linear-gradient(135deg, #fff3c4 0 8px, #ffe9a3 8px 16px) !important; color: #5a3d00; }
[data-gsec="business_details"] tr.is-sample td:first-child { box-shadow: inset 4px 0 0 #d99a00; }
body.acid .mock, body.acid .mock-chip, body.acid [data-gsec="business_details"] tr.is-sample td { color: #3a2800 !important; }
@media (max-width: 760px) {
  .tax-head { flex-direction: column; } .tax-calc, .tax-form { grid-template-columns: 1fr; }
  .tax-due li { grid-template-columns: 1fr auto; } .tax-due li .linkbtn { grid-column: 1 / -1; justify-self: start; padding-left: 0; }
  .tax-ent { min-width: 0; flex: 1 1 140px; }
}
[data-gsec="assets"] tr.is-sample td { background: repeating-linear-gradient(135deg, #fff3c4 0 8px, #ffe9a3 8px 16px) !important; color: #5a3d00; }
[data-gsec="assets"] tr.is-sample td:first-child { box-shadow: inset 4px 0 0 #d99a00; }
[data-gsec="assets"] tr.is-sample .sample-tag, [data-gsec="business_details"] tr.is-sample .sample-tag { font-weight: 800; letter-spacing: .08em; color: #5a3d00; background: var(--ox-100); border: 1.5px dashed #d99a00; }
/* ---- Bottom bar art (2 Oct 2026): ink line icons; the colour dabs light up on the page you're in ---- */
@media (max-width: 760px) {
  .mbar button .mi-art { width: 27px; height: 27px; transition: transform .18s ease; }
  .mbar button .mi-art .ac, .mbar button .mi-art .ac2, .mbar button .mi-art .ac3 { fill: transparent; transition: fill .2s; }
  .mbar button.on .mi-art { transform: translateY(-1px) rotate(-3deg); }
  .mbar button.on .mi-art .ac { fill: var(--accent); stroke: var(--accent); }
  .mbar button.on .mi-art .ac2 { fill: var(--ox-500); stroke: var(--ox-500); }
  .mbar button.on .mi-art .ac3 { fill: var(--sig-ink); stroke: var(--sig-ink); }
  .mbar button.on .mi-art .acs { stroke: var(--accent); stroke-width: 2.2; }
  .mbar button[data-m="tools"] .mi-art .ac { fill: color-mix(in srgb, var(--accent) 35%, transparent); stroke: var(--accent); } /* the sold dot always shows a little red */
  .mbar button.on::after { display: none; }
  .mbar button:active .mi-art { transform: scale(.92); }
  body.acid .mbar button.on .mi-art .ac, body.acid .mbar button.on .mi-art .acs { fill: #FF5DB1; stroke: #FF5DB1; }
  body.acid .mbar button.on .mi-art .acs { fill: none; }
  body.acid .mbar button.on .mi-art .ac2 { fill: #35E0A1; stroke: #35E0A1; } body.acid .mbar button.on .mi-art .ac3 { fill: #ff9fcb; stroke: #ff9fcb; }
}
@media (prefers-reduced-motion: reduce) { .mbar button .mi-art { transition: none; } .mbar button.on .mi-art { transform: none; } }
/* Receipts in Everything we own */
.rc-box { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.rc-head { display: flex; justify-content: space-between; align-items: center; }
.rc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.rc-row b { font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-row small { font-size: 11.5px; color: var(--ink-soft); }
.rc-hint { margin: -2px 0 6px !important; }
@media (max-width: 760px) { .rc-row { grid-template-columns: auto minmax(0, 1fr); } .rc-row > :nth-child(n+3) { grid-column: auto; } }
@media (max-width: 760px) {
  .mbar { background: #0b0908; }
  .mbar button { color: #8f877a; }
  .mbar button .mi-art { width: 29px; height: 29px; }
  .mbar button.on { color: var(--ox-100); }
  /* a painted swash under the page you're on */
  .mbar button.on::before { content: ""; position: absolute; left: 50%; bottom: 5px; width: 46px; height: 12px; margin-left: -23px;
    background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 12'%3E%3Cpath d='M2 7.5c6-3.6 13-4.6 21-3.4 6 .9 11 .6 16-1.6 2.6-1.1 4.6-.4 5 1.2.4 1.8-2.2 3.2-6 4.1-6.2 1.5-12.6.9-19 .3-5.4-.5-10.7.2-15 1.6-2 .6-3.6-.4-2-1.8z' fill='%23e5674f'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 12'%3E%3Cpath d='M2 7.5c6-3.6 13-4.6 21-3.4 6 .9 11 .6 16-1.6 2.6-1.1 4.6-.4 5 1.2.4 1.8-2.2 3.2-6 4.1-6.2 1.5-12.6.9-19 .3-5.4-.5-10.7.2-15 1.6-2 .6-3.6-.4-2-1.8z' fill='%23e5674f'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .95; }
  .mbar button .mi-art .ac.sold { fill: var(--accent) !important; stroke: var(--accent) !important; }
  body.acid .mbar button.on::before { background: #ff5db1; }
}
.tax-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tax-t { display: block; }
.tx-item { padding: 9px 0; border-top: 1px solid var(--line); }
.tx-top { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.tx-top b { font-size: 14px; font-weight: 600; }
.tx-item .tx-rate { font-weight: 700; font-size: 14px; text-align: right; white-space: normal; max-width: 45%; }
.tx-item .tx-when { margin: 3px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; max-width: 80ch; }
.tx-unv { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ox-500); border: 1px solid #d99a00; border-radius: 4px; padding: 0 4px; }
.tx-top b { flex: 1 1 60%; min-width: 0; }
.tx-item .tx-rate { flex: 0 1 auto; min-width: 140px; max-width: 40%; }
@media (max-width: 760px) { .tx-top { flex-direction: column; gap: 2px; } .tx-item .tx-rate { text-align: left; max-width: none; min-width: 0; width: auto; } }
.web-sec { margin: 18px 0 8px; }
[data-gsec="assets"] td:first-child { min-width: 210px; } [data-gsec="assets"] td { vertical-align: middle; }
/* Mobile QC (2 Oct): Business lists stack into cards on phone instead of scrolling sideways */
@media (max-width: 760px) {
  :is(#reg-body-assets, #reg-body-business_details, #reg-body-banking, #reg-body-payments, #reg-body-providers) .tablewrap { overflow: visible; }
  :is(#reg-body-assets, #reg-body-business_details, #reg-body-banking, #reg-body-payments, #reg-body-providers) table.reg,
  :is(#reg-body-assets, #reg-body-business_details, #reg-body-banking, #reg-body-payments, #reg-body-providers) table.reg tbody { display: block; width: 100%; min-width: 0; }
  :is(#reg-body-assets, #reg-body-business_details, #reg-body-banking, #reg-body-payments, #reg-body-providers) table.reg thead { display: none; }
  :is(#reg-body-assets, #reg-body-business_details, #reg-body-banking, #reg-body-payments, #reg-body-providers) table.reg tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 10px; border-bottom: 1px solid var(--line); }
  :is(#reg-body-assets, #reg-body-business_details, #reg-body-banking, #reg-body-payments, #reg-body-providers) table.reg td { display: block; padding: 0 !important; border: 0 !important; min-width: 0 !important; width: auto !important; font-size: 13px; background: transparent !important; box-shadow: none !important; }
  :is(#reg-body-assets, #reg-body-business_details, #reg-body-banking, #reg-body-payments, #reg-body-providers) table.reg td:first-child { flex: 1 1 100%; font-weight: 600; font-size: 15px; }
  :is(#reg-body-assets, #reg-body-business_details, #reg-body-banking, #reg-body-payments, #reg-body-providers) table.reg td.tdact { margin-left: auto; }
  #reg-body-assets table.reg td:is([data-col="qty"], [data-col="location"], [data-col="cost"], [data-col="deduct_pct"], [data-col="paid_card"], [data-col="renews_on"])::before { color: var(--ink-soft); font-weight: 400; margin-right: 4px; }
  #reg-body-assets td[data-col="qty"]::before { content: "×"; margin-right: 1px !important; }
  #reg-body-assets td[data-col="location"]::before { content: "at"; }
  #reg-body-assets td[data-col="deduct_pct"]::before { content: "deductible"; }
  #reg-body-assets td[data-col="deduct_pct"]::after { content: "%"; }
  #reg-body-assets td[data-col="paid_card"]::before { content: "paid with"; }
  #reg-body-assets td[data-col="renews_on"]::before { content: "renews"; }
  :is(#reg-body-assets, #reg-body-business_details, #reg-body-banking, #reg-body-payments, #reg-body-providers) table.reg td:empty, #reg-body-assets td:is([data-col="renews_on"], [data-col="paid_card"]):has(> :only-child:is(.muted, .none)) { display: none; }
  #reg-body-assets tr.is-sample, #reg-body-business_details tr.is-sample { background: repeating-linear-gradient(135deg, #fff3c4 0 8px, #ffe9a3 8px 16px); box-shadow: inset 4px 0 0 #d99a00; }
  .card-head:has(.reg-tools) { flex-wrap: wrap; gap: 8px; }
  .tc-l { flex-wrap: wrap; } .tc-l > span { flex: 1 1 60%; } .tc-l b { max-width: 100%; white-space: normal; }
}
.tf-owners { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.tf-oh b { display: block; } .tf-oh small { font-size: 12px; color: var(--ink-soft); }
.tf-orow { display: grid; grid-template-columns: 1.2fr 1.2fr 70px 1.2fr auto; gap: 6px; margin: 8px 0 0; align-items: center; padding: 2px; border-radius: 8px; }
.tf-osum { font-size: 12.5px; color: var(--ink-soft); margin: 6px 0 0; } .tf-osum.bad { color: var(--accent); font-weight: 600; }
.tc-t { display: inline !important; font-size: 11.5px; color: var(--ink-soft); margin-left: 4px; }
@media (max-width: 760px) { .tf-orow { grid-template-columns: 1fr 70px auto; } .tf-orow [data-of="title"], .tf-orow [data-of="residence"] { grid-column: 1 / -1; } .tf-orow [data-of="name"] { grid-column: 1; } }
.modal-bg.tax-wide .modal { width: min(780px, 94vw); max-width: 780px; }
@media (min-width: 761px) { #reg-body-assets table.reg { table-layout: auto !important; } #reg-body-assets table.reg td[data-col="name"], #reg-body-assets table.reg th:first-child { width: 26% !important; min-width: 220px !important; } #reg-body-assets table.reg td[data-col="paid_card"] { white-space: nowrap; } }
@media (min-width: 761px) { #reg-body-assets table.reg td[data-col="name"]::before { content: ""; display: block; width: 210px; height: 0; } }
@media (min-width: 761px) { #reg-body-assets table.reg td, #reg-body-assets table.reg th { padding-left: 9px !important; padding-right: 9px !important; } #reg-body-assets table.reg td[data-col="name"]::before { width: 190px; } #reg-body-assets table.reg td[data-col="paid_card"] { white-space: normal; } }
@media (min-width: 761px) { #reg-body-assets table.reg td[data-col="name"]::before { width: 170px; } }
@media (min-width: 761px) { #reg-body-assets table.reg td[data-col="name"]::before { width: 140px; } }
@media (min-width: 761px) { #reg-body-assets table.reg td[data-col="name"], #reg-body-assets table.reg th:first-child { width: auto !important; min-width: 0 !important; } }
/* Judge round 2 (2 Oct): tax alert callout, bullets, owners line, labelled purchase form */
.tax-alert { margin: 4px 0 12px; padding: 11px 14px; border-radius: 10px; background: var(--ox-100); border: 1.5px solid var(--ox-500); color: #5a3d00; font-size: 13.5px; line-height: 1.5; }
.tax-alert b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
ul.tax-sum { padding-left: 18px; margin: 4px 0 6px; } ul.tax-sum li { margin: 3px 0; font-size: 14px; line-height: 1.5; }
.tax-facts .tf-wide { grid-column: 1 / -1; }
.tax-owners { display: flex; flex-wrap: wrap; gap: 4px 14px; } .tax-owners > span { white-space: nowrap; }
.mfields.labelled { display: grid; grid-template-columns: 1fr; gap: 3px; }
.mfields.labelled .mf-l { font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-top: 6px; }
.mfields.labelled .mf-group { margin: 12px 0 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); border-top: 1px solid var(--line); padding-top: 10px; }
.mfields.labelled .mf-group:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.rc-n { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.sheet-row .sr-ico svg { display: block; }
.tx-rate-long { margin: 2px 0 0; font-weight: 700; font-size: 13.5px; }
.sheet-ai { font-size: 12px; color: var(--ink-soft); margin: 10px 2px 0; }
.rc-more { display: inline; } .rc-more summary { display: inline; cursor: pointer; color: var(--accent); font-weight: 600; } .rc-more[open] { display: block; margin-top: 4px; }
.rc-n { font-size: 13px; font-weight: 600; color: var(--ink); margin-left: 4px; }
/* Sales summary + 1099 tracker */
.reg-summary { margin: 4px 0 14px; }
.rs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.rs-grid > div { background: var(--panel-2, var(--ox-100)); border-radius: 10px; padding: 10px 12px; }
.rs-grid small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.rs-grid b { display: block; font-size: 18px; margin: 2px 0; } .rs-grid span { font-size: 12px; color: var(--ink-soft); }
.rs-grid .rs-warn { background: var(--ox-100); } .rs-grid .rs-warn span { color: var(--accent); font-weight: 600; }
.rs-1099 { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 6px 0; }
.rs-1099 th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.rs-1099 td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .rs-1099 td small { display: block; color: var(--ink-soft); font-size: 12px; }
.rs-1099 tr.need td { background: var(--ox-100); } .rs-miss { color: var(--accent); font-weight: 600; }
@media (max-width: 760px) { .rs-1099 thead { display: none; } .rs-1099, .rs-1099 tbody, .rs-1099 tr, .rs-1099 td { display: block; width: 100%; } .rs-1099 tr { border-bottom: 1px solid var(--line); padding: 6px 0; } .rs-1099 td { border: 0; padding: 2px 4px; } }
#reg-body-sales tr.is-sample td, #reg-body-contractors tr.is-sample td, #reg-body-contractor_payments tr.is-sample td { background: repeating-linear-gradient(135deg, #fff3c4 0 8px, #ffe9a3 8px 16px) !important; color: #5a3d00; }
/* Phone: Sales / Contractors / Payments stack into cards too */
@media (max-width: 760px) {
  :is(#reg-body-sales, #reg-body-contractors, #reg-body-contractor_payments) .tablewrap { overflow: visible; }
  :is(#reg-body-sales, #reg-body-contractors, #reg-body-contractor_payments) table.reg, :is(#reg-body-sales, #reg-body-contractors, #reg-body-contractor_payments) table.reg tbody { display: block; width: 100%; min-width: 0; }
  :is(#reg-body-sales, #reg-body-contractors, #reg-body-contractor_payments) table.reg thead { display: none; }
  :is(#reg-body-sales, #reg-body-contractors, #reg-body-contractor_payments) table.reg tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 10px; border-bottom: 1px solid var(--line); }
  :is(#reg-body-sales, #reg-body-contractors, #reg-body-contractor_payments) table.reg td { display: block; padding: 0 !important; border: 0 !important; min-width: 0 !important; width: auto !important; font-size: 13px; }
  :is(#reg-body-sales, #reg-body-contractor_payments) table.reg td[data-col="item"], :is(#reg-body-sales, #reg-body-contractor_payments) table.reg td[data-col="contractor"], #reg-body-contractors table.reg td[data-col="name"] { flex: 1 1 100%; font-weight: 600; font-size: 15px; order: -1; }
  :is(#reg-body-sales, #reg-body-contractors, #reg-body-contractor_payments) table.reg td.tdact { margin-left: auto; }
  :is(#reg-body-sales, #reg-body-contractors, #reg-body-contractor_payments) tr.is-sample { background: repeating-linear-gradient(135deg, #fff3c4 0 8px, #ffe9a3 8px 16px); box-shadow: inset 4px 0 0 #d99a00; }
  :is(#reg-body-sales, #reg-body-contractors, #reg-body-contractor_payments) tr.is-sample td { background: transparent !important; }
  .rs-grid { grid-template-columns: 1fr 1fr; }
}
.rs-ex { margin-top: 2px !important; }
.web-steps code { font-size: 11.5px; background: var(--panel-2, var(--ox-100)); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; margin-right: 3px; white-space: nowrap; }
/* Phone: small labels before values on Sales / Payments / Contractors cards */
@media (max-width: 760px) {
  #reg-body-sales td[data-col="amount"]::before { content: "Amount "; } #reg-body-sales td[data-col="tax"]::before { content: "Tax "; } #reg-body-sales td[data-col="ship_region"]::before { content: "To "; }
  #reg-body-contractor_payments td[data-col="amount"]::before { content: "Amount "; } #reg-body-contractor_payments td[data-col="method"]::before { content: "by "; } #reg-body-contractor_payments td[data-col="for_what"]::before { content: "for "; }
  #reg-body-contractors td[data-col="w9"]::before { content: "W-9 "; }
  :is(#reg-body-sales, #reg-body-contractor_payments, #reg-body-contractors) td::before { color: var(--ink-soft); font-size: 11.5px; }
}
@media (max-width: 760px) { :is(#reg-body-sales, #reg-body-contractors, #reg-body-contractor_payments) tr.is-sample td { box-shadow: none !important; } }
/* Phone: pop-ups stay above the bottom bar, with their buttons always visible (judge, 2 Oct) */
@media (max-width: 760px) {
  .modal-bg:not(.sheet) .modal { max-height: calc(100dvh - 120px - env(safe-area-inset-bottom)); overflow-y: auto; }
  .modal-bg:not(.sheet) .modal .modal-actions, .modal-bg:not(.sheet) .modal .row.mrow { position: sticky; bottom: -1px; background: var(--panel, #fff); padding: 10px 0 2px; margin-bottom: 0; z-index: 2; box-shadow: 0 -8px 12px -10px rgba(0,0,0,.25); }
}
.mbp-n { font-size: 12px; color: var(--ink-soft); margin-left: auto; margin-right: 10px; }
.mbp-grid a { position: relative; }
.mbp-tag { position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(13,11,9,.78); color: #fff; padding: 2px 6px; border-radius: 4px; }
.mbp-n { font-size: 12px; font-weight: 600; color: var(--olive); background: var(--olive-100); padding: 2px 9px; border-radius: 999px; margin: 0 10px 0 8px; }
body.acid .mbp-n { background: transparent; color: #35E0A1; border: 1px solid #35E0A1; }
.mbp-note { width: 100%; margin: 6px 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--panel-2, var(--ox-100)); font-size: 13px; color: var(--ink-soft); }
.mbp-h { flex-wrap: wrap; }
/* Payment providers (2 Oct 2026): fees and reasons get room on desktop; Fit stays narrow. "For" (US / Thailand) is in Details. */
@media (min-width: 761px) {
  [data-gsec="pay_options"] table.reg td[data-col="fees"] { min-width: 180px; }
  [data-gsec="pay_options"] table.reg td[data-col="why"] { min-width: 130px; }
  [data-gsec="pay_options"] table.reg :is(td, th)[data-col="fit"] { min-width: 0 !important; width: 60px; white-space: nowrap; }
}
@media (min-width: 761px) { [data-gsec="dropshippers"] table.reg td[data-col="url"] { max-width: 190px; overflow: hidden; text-overflow: ellipsis; } }
/* Payment providers: policy pills in the supplier colours (green yes, amber ask, red no); section guide; phone fee label. */
:is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill.s-allowed, :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill.s-approved-for-us-in-writing { color: var(--olive); background: var(--olive-100); border-color: var(--olive-200); }
:is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill[class*="s-ambiguous"] { color: var(--ox-500); background: var(--ox-100); border-color: var(--ox-200); }
:is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill.s-not-allowed { color: var(--accent); background: var(--ox-100); border-color: var(--ox-200); }
.reg-guide { margin: 10px 0 2px; max-width: 760px; }
.reg-guide summary { cursor: pointer; font-weight: 600; font-size: 14px; min-height: 32px; display: flex; align-items: center; }
.reg-guide ul { margin: 6px 0 4px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; }
@media (max-width: 760px) { [data-gsec="pay_options"] table.reg td[data-col="fees"]::before { content: "Fees: "; color: var(--ink-soft); } }
.reg-guide summary::before { content: "▸"; display: inline-block; width: 16px; color: var(--ink-soft); }
.reg-guide[open] summary::before { content: "▾"; }
[data-gsec="pay_options"] td[data-col="fees"] .clamp2 { -webkit-line-clamp: 3; }
@media (max-width: 760px) { [data-gsec="pay_options"] td[data-col="fees"] .clamp2 { display: inline; max-width: none; } }
.reg-guide summary { list-style: none; } .reg-guide summary::-webkit-details-marker { display: none; }
/* Dark styles: same meaning, toned for a dark panel. */
body.acid :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill.s-allowed, body.acid :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill.s-approved-for-us-in-writing { color: #7fd99a; background: rgba(63, 154, 92, .18); border-color: rgba(63, 154, 92, .55); }
body.acid :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill[class*="s-ambiguous"] { color: #f0c062; background: rgba(224, 154, 27, .15); border-color: rgba(224, 154, 27, .5); }
body.acid :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill.s-not-allowed { color: #ff8a75; background: rgba(176, 58, 38, .22); border-color: rgba(255, 138, 117, .45); }
.reg-guide summary::before { content: "›"; font-size: 20px; line-height: 1; width: 18px; transition: transform .15s; }
.reg-guide[open] summary::before { content: "›"; transform: rotate(90deg); }
.reg-guide summary::before { content: "+"; transform: none; font-size: 18px; font-weight: 500; width: 20px; display: inline-block; text-align: left; }
.reg-guide[open] summary::before { content: "−"; transform: none; }
/* ---- Business page tabs (Aaron, 2 Oct 2026): coloured, one section group at a time ---- */
.gtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; }
.gtab { --tc: var(--ink); display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--tc) 45%, transparent); background: color-mix(in srgb, var(--tc) 9%, var(--panel)); color: color-mix(in srgb, var(--tc) 80%, var(--ink));
  font: 600 14px/1.1 var(--body, inherit); transition: background .15s, color .15s, box-shadow .15s; }
.gtab:hover { background: color-mix(in srgb, var(--tc) 18%, var(--panel)); }
.gtab.on { background: var(--tc); border-color: var(--tc); color: #fff; box-shadow: 0 3px 10px color-mix(in srgb, var(--tc) 35%, transparent); }
.gtab-n { font-size: 12px; font-weight: 700; min-width: 20px; padding: 2px 7px; border-radius: 999px; text-align: center; background: color-mix(in srgb, var(--tc) 16%, transparent); }
.gtab-n:empty { display: none; }
.gtab.on .gtab-n { background: rgba(255, 255, 255, .25); }
.gtab:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; }
[data-gtab].gtab-off { display: none; }
.gtab-searching [data-gtab].gtab-off { display: block; }
section.card[data-gtab] { border-top: 3px solid var(--tc); }
/* Rows on the Business page open as an edit card */
tr.row-open td.cell { cursor: pointer; }
tr.row-open:hover td { background: color-mix(in srgb, var(--tc, var(--ink)) 6%, var(--panel)); }
/* Tax panel: business switcher and its tabs in the section colour */
.tax-panel .tax-ent.on { border-color: var(--tc); box-shadow: inset 0 0 0 1px var(--tc); background: color-mix(in srgb, var(--tc) 8%, var(--panel)); }
.tax-panel .tax-ent.on b { color: var(--tc); }
.tax-panel .tax-vt .view-tab { border-color: color-mix(in srgb, var(--tc) 40%, transparent); color: color-mix(in srgb, var(--tc) 80%, var(--ink)); background: color-mix(in srgb, var(--tc) 7%, var(--panel)); }
.tax-panel .tax-vt .view-tab.on { background: var(--tc); border-color: var(--tc); color: #fff; }
.tax-editbtn { margin-right: 4px; }
@media (max-width: 760px) {
  .gtabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .gtabs::-webkit-scrollbar { display: none; }
  .gtab { flex: 0 0 auto; }
}
.tax-form .tf-group { grid-column: 1 / -1; margin: 6px 0 -2px; font: 600 12px/1 var(--body, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.tax-form .tf-group:first-of-type { margin-top: 2px; }
.tax-form label.tf-wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .tax-form .tf-group { grid-column: 1; } }
/* Business card: actions bar, then tabs; Details tab groups legal / set-up / owners. */
.tax-ent-body > .tax-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 12px; }
.tax-vt .vt-n { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--tc, var(--ink)) 14%, transparent); margin-left: 2px; }
.tax-vt .view-tab.on .vt-n { background: rgba(255, 255, 255, .25); }
.tx-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.tx-block { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--panel); }
.tx-block h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--tc, var(--ink)) 75%, var(--ink)); }
.tx-dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.tx-dl div.tf-wide { grid-column: 1 / -1; }
.tx-dl dt { font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.tx-dl dd { margin: 0; font-size: 14.5px; overflow-wrap: anywhere; }
.tx-owners { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tx-owners li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; }
.tx-owners li span:not(.tx-share) { grid-column: 1; color: var(--ink-soft); font-size: 13px; }
.tx-owners .tx-share { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; }
.tx-owners.mock { background: repeating-linear-gradient(135deg, #fdf0c4 0 10px, #fbe7a6 10px 20px); border: 1.5px dashed #c99a2e; border-radius: 8px; padding: 8px 10px; }
@media (max-width: 760px) {
  .tax-vt { flex-wrap: nowrap; overflow-x: auto; margin-left: -4px; padding-bottom: 4px; scrollbar-width: none; }
  .tax-vt::-webkit-scrollbar { display: none; }
  .tax-vt .view-tab { flex: 0 0 auto; }
  .tx-dl { grid-template-columns: 1fr; }
}
.gtabs { gap: 6px; }
.gtab { padding: 8px 12px; font-size: 13.5px; }
.tx-blocks { grid-template-columns: 1fr 1fr; }
.tx-blocks > .tx-block:last-child { grid-column: 1 / -1; }
.tx-blocks > .tx-block:last-child .tx-owners { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 760px) { .tx-blocks { grid-template-columns: 1fr; } }
@media (min-width: 761px) { #main .tax-panel .tax-vt { flex-wrap: wrap !important; overflow: visible !important; row-gap: 6px; -webkit-mask-image: none !important; mask-image: none !important; } }
/* Judge round 1 fixes (2 Oct): one clear switcher, a quieter header, wrapping tabs on phone. */
.tax-head h2 { margin: 0; }
.tax-seg { display: inline-flex; gap: 0; padding: 3px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); margin: 4px 0 12px; max-width: 100%; }
.tax-seg .tax-ent { border: 0; border-radius: 9px; padding: 7px 14px; min-width: 0; box-shadow: none; background: transparent; }
.tax-seg .tax-ent.on, .tax-panel .tax-seg .tax-ent.on { background: var(--panel); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); border: 0; }
.tax-seg .tax-ent:focus-visible { outline: 2px solid var(--tc, var(--ink)); outline-offset: 1px; }
.tax-ent-body > .tax-acts { gap: 8px; }
.tax-acts .tax-res { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.tax-srcbox { margin-top: 16px; } .tax-srcbox summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.tx-blocks > .tx-block:last-child .tx-owners { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 28px; }
.tx-owners li { padding-right: 8px; }
.gtab-searching .gtab.on { background: color-mix(in srgb, var(--tc) 9%, var(--panel)); color: color-mix(in srgb, var(--tc) 80%, var(--ink)); box-shadow: none; }
tr.row-open:focus-visible { outline: 2px solid var(--tc, var(--ink)); outline-offset: -2px; }
@media (max-width: 760px) {
  .gtabs { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
  .gtab { flex: 1 1 auto; justify-content: center; padding: 8px 10px; font-size: 13px; }
  #main .tax-panel .tax-vt { flex-wrap: wrap !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; margin-left: 0; row-gap: 6px; }
  .tax-tools .linkbtn { display: none; }
  .tax-seg { display: flex; } .tax-seg .tax-ent { flex: 1 1 0; }
  .tax-acts .tax-res { margin-left: 0; width: 100%; }
}
@media (max-width: 760px) {
  .gtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .gtab { min-width: 0; padding: 8px; }
  .gtab-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tax-seg .tax-ent small { display: none; }
  .tax-seg .tax-ent b { font-size: 14px; }
}
.gtab-s { display: none; }
@media (max-width: 760px) {
  .gtab:has(.gtab-s) .gtab-l { display: none; } .gtab-s { display: inline; white-space: nowrap; }
  .tax-acts .tax-res { flex-wrap: wrap; justify-content: space-between; }
}
.tx-blocks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tx-block { min-width: 0; } .tx-dl dd span.mock { white-space: normal; }
@media (max-width: 760px) {
  .tx-blocks { grid-template-columns: minmax(0, 1fr); }
  #main .tax-panel .tax-vt { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (max-width: 760px) {
  .tax-ent-body > .tax-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .tax-ent-body > .tax-acts .btn { justify-content: center; width: 100%; padding-left: 8px; padding-right: 8px; }
  .tax-acts .tax-res { grid-column: 1 / -1; justify-content: space-between; flex-wrap: nowrap; }
}
@media (max-width: 760px) {
  .tx-blocks > .tx-block:last-child .tx-owners { grid-template-columns: minmax(0, 1fr); }
  .tax-res .rs-l { display: none; } .tax-res .linkbtn { font-size: 18px; min-width: 44px; min-height: 44px; }
  .tax-res .tax-badge { white-space: nowrap; }
}
/* View-only: no add or upload controls on group pages (writes are refused anyway). */
body.viewer [data-gadd], body.viewer label:has(> [data-gcsvin]), body.viewer #tax-add, body.viewer label:has(> #tax-csvin) { display: none !important; }
/* Selected business is the strongest segment in every style: filled with the section colour, white label. */
.tax-seg .tax-ent.on, .tax-panel .tax-seg .tax-ent.on { background: var(--tc, var(--ink)); }
.tax-seg .tax-ent.on b, .tax-panel .tax-seg .tax-ent.on b, .tax-seg .tax-ent.on small { color: #fff; }
@media (max-width: 760px) { .tax-ent-body > .tax-acts [data-tpack] { font-size: 12px; letter-spacing: .04em; white-space: nowrap; } }
@media (max-width: 760px) { .tax-ent-body > .tax-acts .btn { white-space: nowrap; font-size: 12px; } }
/* Legal tabs (2 Oct): heading in the tab colour */
.legal-cat[data-gtab] h3 { color: color-mix(in srgb, var(--tc) 80%, var(--ink)); }
.legal-add #legal-new { width: 100%; max-width: 520px; }
/* Selling & Team tabs: allow two-line labels on phone rather than cutting them off */
.ctabs { margin-top: 2px; }
@media (max-width: 760px) { .ctabs .gtab-l { white-space: normal; text-align: center; line-height: 1.2; } .ctabs .gtab { min-height: 44px; } }

/* ==== 60-30-10 palette, every style (Aaron, 2 Oct 2026) ====
   Standard: paper 60 · ink 30 · oxblood 10 · olive = ready.  ACID: black 60 · bone 30 · hot pink 10 · mint = ready.
   F1: grey 60 · F1 black 30 · F1 red 10 · racing green = ready.  Huntress: lavender 60 · plum 30 · violet 10 · sage-lime = ready.
   Status colours everywhere come from these tokens: no = the accent, in progress = a lighter shade of it, ready = the second accent. */
:root { --sig-no: #9d2919; --sig-doing: #b0563f; --sig-ok: #4f6b3a; --sig-ink: #3b3530; --sig-mid: #6b6459; --sig-faint: #8b8477; --sig-stone: #b9b2a6; }
body.acid { --sig-no: #ff5db1; --sig-doing: #ff9fcb; --sig-ok: #35e0a1; --sig-ink: #d4d2da; --sig-mid: #9a97a3; --sig-faint: #6e6b78; --sig-stone: #4a4752;
  --olive: #35e0a1; --olive-100: #10291c; --olive-200: #1d4a33; --ox-100: #2a1520; --ox-200: #5a1f3e; --ox-500: #ff9fcb; --done: #35e0a1; --doing: #ff9fcb; }
body.f1 { --sig-no: #e10600; --sig-doing: #f0544a; --sig-ok: #00875a; --sig-ink: #15151e; --sig-mid: #4a4a57; --sig-faint: #8a8a96; --sig-stone: #c4c4cc;
  --olive: #00875a; --olive-100: #e1f2ea; --olive-200: #b3dcc8; --ox-100: #fde6e5; --ox-200: #f7b9b6; --ox-500: #f0544a; --done: #00875a; --doing: #f0544a; }
body.huntress { --sig-no: #a43be0; --sig-doing: #c47de8; --sig-ok: #5e7f22; --sig-ink: #2a1d3a; --sig-mid: #5d4f6e; --sig-faint: #8d82a0; --sig-stone: #c9bfd8;
  --olive: #5e7f22; --olive-100: #eef5dc; --olive-200: #d3e3a8; --ox-100: #f1e3fa; --ox-200: #dfbff2; --ox-500: #c47de8; --done: #5e7f22; --doing: #c47de8; }
/* Tabs: neutral until chosen; the chosen tab is the accent (the 10%). No per-tab hues. */
.gtab, [data-gtab], section.card[data-gtab], .tax-panel { --tc: var(--accent) !important; }
.gtab { border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); box-shadow: none; }
.gtab:hover { background: color-mix(in srgb, var(--accent) 6%, var(--panel)); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.gtab-n { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-soft); }
.gtab.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent); }
.gtab.on .gtab-n { background: rgba(255, 255, 255, .22); color: var(--accent-ink); }
.gtab-searching .gtab.on { background: var(--panel); color: var(--ink); border-color: var(--accent); box-shadow: none; }
section.card[data-gtab] { border-top: 1px solid var(--line); }
.tax-panel .tax-vt .view-tab { border-color: var(--line); color: var(--ink-soft); background: var(--panel); }
.tax-panel .tax-vt .view-tab.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tax-panel .tax-vt .vt-n { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.tx-block h4, .legal-cat[data-gtab] h3 { color: var(--ink-soft); }
/* Inner choices (business switcher, card tabs) use ink; the accent is kept for the page tab and primary actions. */
.tax-seg .tax-ent.on, .tax-panel .tax-seg .tax-ent.on { background: var(--ink); }
.tax-seg .tax-ent.on b, .tax-panel .tax-seg .tax-ent.on b, .tax-seg .tax-ent.on small { color: var(--paper); }
/* Sidebar section markers: one accent family instead of four hues (ACID already uses its pink). */
.sec-me, .sec-tools, .sec-biz, .sec-proj, .sec-web { --sec: #d98a7a; }
body.f1 .sec-me, body.f1 .sec-tools, body.f1 .sec-biz, body.f1 .sec-proj, body.f1 .sec-web { --sec: #ff4a40; }
body.huntress .sec-me, body.huntress .sec-tools, body.huntress .sec-biz, body.huntress .sec-proj, body.huntress .sec-web { --sec: #c47de8; }
body.acid :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill[class*="s-ambiguous"] { color: #ff9fcb; background: rgba(226, 60, 142, .12); border-color: rgba(255, 159, 203, .45); }
body.acid :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill.s-not-allowed { color: #ff5db1; background: rgba(226, 60, 142, .22); border-color: rgba(255, 93, 177, .55); }

/* ==== Palette pass 2 (judge round 1) ==== */
/* Phone menu: one accent family instead of five hues */
.sheet-label.ms-me, .sheet-label.ms-tools, .sheet-label.ms-biz, .sheet-label.ms-proj, .sheet-label.ms-web { color: var(--accent); }
.sheet-list.ms-me, .sheet-list.ms-tools, .sheet-list.ms-biz, .sheet-list.ms-proj, .sheet-list.ms-web { border-left-color: var(--ox-200); }
/* Each style's own neutrals, so F1 and Huntress aren't on Standard's cream */
body.f1 { --paper: #f2f2f4; --panel: #ffffff; --panel-2: #f6f6f8; --line: #dcdce2; --ink: #15151e; --ink-2: #2a2a33; --ink-soft: #4a4a57; --ink-faint: #8a8a96; --stone: #c4c4cc;
  --ox-50: #fef4f3; --ox-700: #9e0400; --sig-doing: #c4271f; --ox-500: #c4271f; --doing: #c4271f; --sig-ok: #12804f; --olive: #12804f; --done: #12804f; }
body.huntress { --paper: #f5f1fa; --panel: #ffffff; --panel-2: #f8f4fc; --line: #e2d8ee; --ink: #12081f; --ink-2: #2a1d3a; --ink-soft: #5d4f6e; --ink-faint: #8d82a0; --stone: #c9bfd8;
  --ox-50: #faf4fd; --ox-700: #7a24ab; --sig-doing: #8f45c4; --ox-500: #8f45c4; --doing: #8f45c4; --sig-ok: #3f7a45; --olive: #3f7a45; --olive-100: #e6f1e7; --olive-200: #bcd9bf; --done: #3f7a45; }
body.acid { --ox-50: #1e1219; --ox-700: #ff9fcb; }
/* Readable text on status cells in every style */
body.acid .m-cell { color: #0d0b11; } body.acid .m-cell.m-dark { color: var(--ink); }
/* "In progress" differs from "needed" by pattern too, not only by shade */
.m-cell.s-doing, .m-cell.p-normal { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 5px, transparent 5px 11px); }
body.acid .m-cell.s-doing, body.acid .m-cell.p-normal { background-image: repeating-linear-gradient(135deg, rgba(13,11,17,.18) 0 5px, transparent 5px 11px); }
.m-cell.s-done::before { content: "✓ "; }
/* Ready rows: a bar plus a faint tint, so it stays green without going muddy */
tr.reg-ok td { background: color-mix(in srgb, var(--olive) 4%, var(--panel)) !important; }
/* ACID allowed chip in its own mint */
body.acid :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill.s-allowed, body.acid :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill.s-approved-for-us-in-writing { color: #35e0a1; background: rgba(53, 224, 161, .14); border-color: rgba(53, 224, 161, .5); }
/* One lit thing: secondary actions in ink, not the accent */
.tax-editbtn.primary { background: var(--panel); color: var(--ink); border: 1px solid var(--ink); }
.tax-editbtn.primary:hover { background: var(--ink); color: var(--paper); }
.side-toggle { background: transparent; border-color: color-mix(in srgb, var(--paper) 25%, transparent); color: var(--paper); }
body.f1 .nav-item.active, body.huntress .nav-item.active { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.bd-card { border: 1px solid var(--line); background: var(--panel); }
:root { --fx-pos: var(--sig-ok); --fx-neg: var(--sig-no); }
body.f1 #nav .nav-item.active, body.huntress #nav .nav-item.active { background: rgba(255, 255, 255, .09); color: #fff; }
body.f1 #nav .nav-item.active::before { background: var(--accent); }
.m-cell.s-doing, .m-cell.p-normal { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.32) 0 4px, transparent 4px 10px); }
body.acid .m-cell.s-doing, body.acid .m-cell.p-normal { background-image: repeating-linear-gradient(135deg, rgba(13,11,17,.22) 0 4px, transparent 4px 10px); }
.m-cell.s-doing, .m-cell.p-normal { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.3) 0 4px, transparent 4px 10px) !important; }
body.acid .m-cell.s-doing, body.acid .m-cell.p-normal { background-image: repeating-linear-gradient(135deg, rgba(13,11,17,.22) 0 4px, transparent 4px 10px) !important; }
body.acid .tax-editbtn.primary, body.f1 .tax-editbtn.primary, body.huntress .tax-editbtn.primary { background: transparent; color: var(--ink); border: 1px solid var(--ink-soft); box-shadow: none; }
@media (max-width: 760px) { .tax-ent-body > .tax-acts .btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; } body.acid .tax-ent-body > .tax-acts .btn { font-size: 11px; letter-spacing: .02em; } }
.tax-editbtn { background: transparent; color: var(--ink); border: 1px solid var(--ink-soft); }
.tax-editbtn:hover { background: var(--ink); color: var(--paper); }
.pk-s { display: none; }
@media (max-width: 760px) { .pk-l { display: none; } .pk-s { display: inline; } }
/* ==== Palette pass 3 (judge round 2) ==== */
/* In progress = light tint with dark text in F1 and Huntress, so it differs from "needed" by tone as well as hatch */
body.f1 { --sig-ok: #0b6b43; --olive: #0b6b43; --done: #0b6b43; }
body.f1 .m-cell.s-doing, body.f1 .m-cell.p-normal, body.huntress .m-cell.s-doing, body.huntress .m-cell.p-normal { background-color: var(--ox-200) !important; }
body.f1 .m-cell.s-doing, body.f1 .m-cell.p-normal, body.huntress .m-cell.s-doing, body.huntress .m-cell.p-normal { color: var(--ink); }
body.f1 .m-cell.s-doing, body.f1 .m-cell.p-normal, body.huntress .m-cell.s-doing, body.huntress .m-cell.p-normal { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.08) 0 4px, transparent 4px 10px) !important; }
/* Urgent = an accent outline with a star; solid accent is kept for "Stuck" */
.m-cell.p-high { background: var(--panel) !important; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.m-cell.p-high::before { content: "★ "; }
body.acid .m-cell.p-high { background: transparent !important; color: #ff5db1; }
/* Strays */
.tx-unv { border-color: var(--ox-200) !important; }
.tax-alert { color: var(--ink) !important; }
.sec-me, .sec-tools, .sec-biz, .sec-proj, .sec-web { --sec: color-mix(in srgb, var(--accent) 55%, #fff); }
/* People: four tones of each style's ink, initials always readable (white ≥ 4.5:1; ACID: dark on light) */
:root { --person-1: #16130f; --person-2: #3b3530; --person-3: #5e574d; --person-4: #756d61; --person-ink: #ffffff; }
body.f1 { --person-1: #15151e; --person-2: #3a3a45; --person-3: #565663; --person-4: #6c6c79; }
body.huntress { --person-1: #12081f; --person-2: #2a1d3a; --person-3: #4a3d5c; --person-4: #64577a; }
body.acid { --person-1: #f4f3f0; --person-2: #d4d2da; --person-3: #b4b1bc; --person-4: #9a97a3; --person-ink: #0d0b11; }
.ini, .tlx-bar { color: var(--person-ink); }
.tlx-bar.done { color: var(--ink); }
body.acid .tlx-bar.overdue { color: #0d0b11; }
.m-avatar:not(.plate):not(.logo):not(.hunt-av) { color: var(--person-ink); }
.tlx-bar.overdue { outline-color: color-mix(in srgb, var(--accent) 35%, transparent); }
/* Finished work: urgency no longer lights up */
.m-row.done .m-cell.p-high, .m-row.is-done .m-cell.p-high { color: var(--ink-faint); box-shadow: inset 0 0 0 1px var(--line); }
body:not(.huntress) .m-avatar.hunt-av { color: var(--person-ink); }

/* Book printers / Packaging (2 Oct 2026): prices get room; long text clamps like Payments */
@media (min-width: 761px) {
  [data-gsec="book_printers"] table.reg td:is([data-col="softcover"], [data-col="hardcover"]) { min-width: 175px; } [data-gsec="book_printers"] table.reg td:is([data-col="softcover"], [data-col="hardcover"]) .clamp2 { max-width: 260px; }
  [data-gsec="packaging"] table.reg td:is([data-col="price"], [data-col="why"]) { min-width: 140px; } [data-gsec="packaging"] table.reg :is(td, th):is([data-col="name"], [data-col="kind"], [data-col="moq"]) { min-width: 0 !important; width: 110px; }
  :is([data-gsec="book_printers"], [data-gsec="packaging"]) table.reg :is(td, th)[data-col="fit"] { min-width: 0 !important; width: 60px; white-space: nowrap; }
}
@media (max-width: 760px) { :is([data-gsec="book_printers"]) table.reg td:is([data-col="softcover"], [data-col="hardcover"])::before { color: var(--ink-soft); }
  [data-gsec="book_printers"] table.reg td[data-col="softcover"]::before { content: "Softcover: "; } [data-gsec="book_printers"] table.reg td[data-col="hardcover"]::before { content: "Hardcover: "; }
  [data-gsec="packaging"] table.reg td[data-col="moq"]::before { content: "Minimum: "; color: var(--ink-soft); } [data-gsec="packaging"] table.reg td[data-col="price"]::before { content: "Price: "; color: var(--ink-soft); } }
:is([data-gsec="book_printers"], [data-gsec="packaging"]) td:is([data-col="softcover"], [data-col="hardcover"], [data-col="price"]) .clamp2 { -webkit-line-clamp: 3; }
@media (max-width: 760px) { :is([data-gsec="book_printers"], [data-gsec="packaging"]) td:is([data-col="softcover"], [data-col="hardcover"], [data-col="price"]) .clamp2 { display: inline; max-width: none; } }
@media (min-width: 761px) { [data-gsec="book_printers"] table.reg :is(td, th)[data-col="tier"] { min-width: 0 !important; width: 90px; } [data-gsec="book_printers"] table.reg :is(td, th)[data-col="name"] { min-width: 0 !important; width: 120px; } }
@media (min-width: 761px) { [data-gsec="packaging"] table.reg td[data-col="price"] { min-width: 260px; } [data-gsec="packaging"] table.reg td[data-col="price"] .clamp2 { max-width: 340px; } }
:is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill[class*="s-allowed-"] { color: var(--olive); background: var(--olive-100); border-color: var(--olive-200); }
body.acid :is([data-gsec="book_printers"]) .spill[class*="s-allowed-"] { color: #35e0a1; background: rgba(53, 224, 161, .14); border-color: rgba(53, 224, 161, .5); }
@media (max-width: 760px) { [data-gsec="book_printers"] table.reg td[data-col="tier"]::before { content: "Run size: "; color: var(--ink-soft); } }
@media (min-width: 761px) { [data-gsec="packaging"] table.reg td[data-col="price"] { min-width: 200px; } [data-gsec="packaging"] table.reg td[data-col="why"] { min-width: 150px; } }
@media (min-width: 761px) {
  [data-gsec="book_printers"] .spill { white-space: normal; display: inline-block; max-width: 110px; line-height: 1.25; text-align: center; }
  [data-gsec="book_printers"] table.reg td:is([data-col="softcover"], [data-col="hardcover"]) { min-width: 165px !important; }
  [data-gsec="packaging"] table.reg td[data-col="price"] { min-width: 170px !important; } [data-gsec="packaging"] table.reg td[data-col="why"] { min-width: 130px !important; }
}
@media (min-width: 761px) { [data-gsec="packaging"] table.reg td[data-col="price"] .clamp2 { max-width: 220px; } }
@media (min-width: 761px) { [data-gsec="packaging"] table.reg :is(td, th):is([data-col="kind"], [data-col="moq"]) { width: 96px; } [data-gsec="packaging"] table.reg td[data-col="why"] { min-width: 120px !important; } }
@media (min-width: 761px) { [data-gsec="packaging"] table.reg td[data-col="price"] .clamp2 { max-width: 196px; } }
@media (min-width: 761px) { [data-gsec="packaging"] table.reg td[data-col="why"] { min-width: 185px !important; } [data-gsec="packaging"] table.reg td[data-col="why"] .clamp2 { -webkit-line-clamp: 3; max-width: 200px; } [data-gsec="packaging"] table.reg td[data-col="price"] .clamp2 { max-width: 150px; } [data-gsec="packaging"] table.reg td[data-col="price"] { min-width: 150px !important; } }
@media (min-width: 761px) { [data-gsec="packaging"] table.reg td[data-col="why"] { min-width: 175px !important; } [data-gsec="packaging"] table.reg td[data-col="why"] .clamp2 { max-width: 190px; } }
/* ==== Marketing › Tools (2 Oct 2026) ==== */
.tl-costs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 18px; }
.tl-costs > div { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 12px 14px; display: grid; gap: 2px; }
.tl-costs small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.tl-costs b { font: 700 22px/1.1 var(--display); color: var(--ink); } .tl-costs b i { font: 400 12px var(--body); color: var(--ink-soft); font-style: normal; margin-left: 2px; }
.tl-costs span { font-size: 12.5px; color: var(--ink-soft); }
.tl-costs > div:nth-child(3) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tl-costs .tl-opt { background: var(--panel-2); border-style: dashed; }
.tl-group { margin: 6px 0 18px; } .tl-group h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tl-card { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.tl-card.is-on { border-color: var(--olive-200); box-shadow: inset 3px 0 0 var(--olive); }
.tl-top { display: flex; gap: 12px; align-items: flex-start; }
.tl-logo { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.tl-logo img { width: 26px; height: 26px; object-fit: contain; } .tl-logo b { font: 700 17px var(--display); color: var(--ink); }
.tl-h { min-width: 0; display: grid; gap: 2px; } .tl-h b { font-size: 15.5px; } .tl-h small { font-size: 13px; color: var(--ink-soft); line-height: 1.35; }
.tl-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-st { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); background: var(--panel-2); }
.tl-st.tl-connected { color: var(--olive); background: var(--olive-100); border-color: var(--olive-200); }
.tl-st.tl-available { color: var(--ink); border-color: var(--ink-soft); background: var(--panel); }
.tl-card .spill.s-allowed { color: var(--olive); background: var(--olive-100); border-color: var(--olive-200); }
.tl-card .spill[class*="s-ask"] { color: var(--ox-500); background: var(--ox-100); border-color: var(--ox-200); }
.tl-card .spill.s-not-allowed { color: var(--accent); background: var(--ox-100); border-color: var(--ox-200); }
.tl-dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 13px; }
.tl-dl dt { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); } .tl-dl dd { margin: 0; overflow-wrap: anywhere; }
.tl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
.howto { padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.45; } .howto code { font-size: 12.5px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; overflow-wrap: anywhere; }
body.acid .tl-logo { background: #f4f3f0; }
@media (max-width: 760px) { .tl-costs { grid-template-columns: 1fr 1fr; } .tl-grid { grid-template-columns: minmax(0, 1fr); } }
.tl-st.tl-this-is-claude { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.mkt-ta { resize: vertical; overflow-y: hidden; line-height: 1.5; }
.tl-why { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); } .tl-why b { display: block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px; }
.tl-role { margin: 0; font-size: 13px; line-height: 1.4; padding: 7px 10px; border-radius: 8px; background: var(--panel-2); border-left: 3px solid var(--accent); }
.tl-role span { display: block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); }
.tl-dl .tl-wide { grid-column: 1 / -1; }
.tl-card { overflow: visible; }
.tl-logo { position: relative; } .tl-logo img { position: absolute; inset: 0; margin: auto; background: #fff; }
.tl-logo b { color: var(--ink-faint); }
@media (max-width: 760px) { #merch-body:has(.mkt-ta) { padding-bottom: 96px; } }
.app-costs .is-alert { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.app-costs > div:nth-child(3):not(.is-alert) { border-color: var(--line); box-shadow: none; }
[data-gsec="marketing_tools"] .tablewrap { display: none; }

/* ---- Money links (4 Oct 2026): Finances counts rows that live elsewhere ---- */
.fx-biz { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.fx-biz label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.fx-biz select { width: auto; max-width: 100%; min-width: 0; }
.fx-row.is-linked .fx-name b { font-weight: 500; }
.fx-row.is-linked .fx-act .linkbtn { font-size: 13px; white-space: nowrap; }
.fx-linked { margin-top: 22px; }
.fx-linked h4 { margin: 0 0 6px; font-size: 14px; }
.fx-linked h4 small { font-weight: 400; color: var(--ink-faint); margin-left: 6px; }
@media (max-width: 1100px) {
  .fx-row.is-linked .fx-act { display: none; }
  .fx-row.is-linked { grid-template-areas: "n p" "r m"; grid-template-columns: minmax(0, 1fr) auto; }
}
.fx-alltot { text-align: right; margin: 12px 0 0; font-size: 14px; }
.fx-alltot b { font-family: var(--display, inherit); font-size: 17px; }
.fx-alltot small { display: block; color: var(--ink-faint); font-size: 12px; }
.fx-row.is-linked .fx-name b, .fx-row.is-linked .fx-name small { white-space: normal; overflow: visible; }
/* One clear total on Expenses: the table's own sum mixes monthly and one-off amounts, so the one-off total below replaces it. */
#fin-body:has(.fx-linked) .reg-total { display: none; }
/* First-visit how-to link in the page header */
.page-head .ptip-link { margin-top: 6px; font-size: 13px; }
/* How-to pop-ups grew (what's-new steps), so Got it stays in view; a soft fade, not the shadow bar */
.modal-bg:not(.sheet) .modal .row.mrow.ptip-row { position: sticky; bottom: -23px; z-index: 2; background: var(--panel, #fff); box-shadow: none; padding: 12px 0 22px; margin: 8px 0 -22px; } /* covers the modal's 22px bottom padding */
.modal-bg:not(.sheet) .modal .row.mrow.ptip-row::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; background: linear-gradient(to bottom, transparent, var(--panel, #fff)); pointer-events: none; }

/* ---- Backup alert on Home (Aaron only, 4 Oct 2026) ---- */
.backup-alert { border: 1px solid var(--sig-no); border-left-width: 5px; background: var(--panel); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; }
.backup-alert h3 { margin: 0 0 6px; color: var(--sig-no); font-size: 17px; }
.backup-alert p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.backup-alert .ba-why { color: var(--ink-soft); }
.ba-cmd { display: flex; gap: 8px; align-items: flex-start; }
.ba-cmd code { flex: 1 1 auto; min-width: 0; font-size: 12px; background: var(--panel-2, rgba(0,0,0,.04)); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; }

/* ---- Home on wide screens (Aaron, 4 Oct 2026: "brain dump on the same horizontal plane as my tasks … maximising space
   whilst still keeping harmony and using negative space well"). Refs: Linear / Superlist (main list + calmer side panel),
   Asana home (cards side by side under a full-width greeting).
   Narrow screens: one column in the original order (Brain dump, For you, My tasks, What's new).
   Wide screens: My tasks + What's new on the left (the work), Brain dump + For you on the right (capture + what's new for you). */
.home-cols { display: flex; flex-direction: column; gap: 22px; }
.home-col { display: contents; }
.hc { min-width: 0; }
.hc > .card { margin: 0; }
.hc-dump { order: 1; } .hc-you { order: 2; } .hc-tasks { order: 3; } .hc-hint { order: 4; } .hc-new { order: 5; }
.hc-you:has(> .for-you[hidden]) { display: none; }
@media (min-width: 1360px) {
  #main[data-page="hub"] { max-width: 1600px; }
  .home-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); gap: 28px; align-items: start; }
  .home-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
  .hc { order: 0; }
}

/* ---- Contact panel: "Get in touch" bar (4 Oct 2026; judged r2) — calm neutral box, ONE accent: the main action.
   Main action on its own row; the other ways to reach them evenly spaced underneath, so nothing wraps awkwardly. */
.ct-reach { margin: 4px 0 16px; padding: 12px 14px 14px; border-radius: 12px; background: var(--panel-2, color-mix(in srgb, var(--ink) 4%, var(--panel))); border: 1px solid var(--line); }
.ct-reach-k { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ct-reach .ct-links { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ct-reach .ct-links a.ct-act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 10px; font-size: 14px; font-weight: 700; white-space: nowrap;
  border-radius: 99px; border: 1.5px solid var(--ink); background: var(--panel); color: var(--ink); text-decoration: none; transition: background .15s, color .15s, transform .15s; }
.ct-reach .ct-links a.ct-act:hover { background: var(--ink); color: var(--panel); transform: translateY(-1px); }
.ct-reach .ct-links a.ct-find { border-style: dashed; } /* a search, not a saved profile yet */
.ct-reach .ct-links a.ct-primary { grid-column: 1 / -1; min-height: 46px; font-size: 15px; background: var(--accent); border-color: var(--accent); color: #fff; }
.ct-reach .ct-links a.ct-primary:hover { background: color-mix(in srgb, var(--accent) 85%, #000); color: #fff; }
body.acid .ct-reach .ct-links a.ct-primary, body.acid .ct-reach .ct-links a.ct-primary:hover { color: #0b0a0e; } /* ACID pink: dark text keeps 4.5:1 */
.ct-reach .ct-links a.ct-act:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.ct-ico { flex: 0 0 auto; }
@media (max-width: 760px) { .ct-reach .ct-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ct-reach .ct-links a.ct-act { min-height: 44px; } .ct-reach .ct-links a.ct-act:not(.ct-primary) { font-size: 13px; gap: 5px; padding: 0 6px; } }
@media (max-width: 400px) { .ct-reach .ct-links a.ct-act:not(.ct-primary) { padding: 0 6px; gap: 4px; font-size: 13px; } .ct-reach .ct-links a.ct-act:not(.ct-primary) .ct-ico { width: 14px; height: 14px; } }
/* Maker categories the team adds (4 Oct 2026) */
.sup-cat { display: inline-flex; align-items: center; position: relative; }
.sup-cat .tb-p.has-x { padding-right: 28px; }
.sup-cat-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-faint); font-size: 13px; line-height: 1; padding: 0; cursor: pointer; }
.sup-cat-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 16%, transparent); }
.sup-cat-add { border-style: dashed !important; }
.sup-catform { display: flex; gap: 6px; align-items: center; min-width: 240px; }
.sup-catform .minput { flex: 1 1 auto; min-width: 0; }

/* ---- Maker info panel (4 Oct 2026) — same slide-in and "Get in touch" bar as Contacts ---- */
button.sup-main { display: flex; flex-direction: column; gap: 2px; width: 100%; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; min-width: 0; }
button.sup-main:hover b { text-decoration: underline; text-underline-offset: 3px; }
button.sup-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sup-p-name { margin: 2px 0 4px; font-size: 24px; line-height: 1.2; }
.sup-p-sub { margin: 0 0 14px; font-size: 14px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sup-p-hint { margin: -6px 0 14px; font-size: 13px; color: var(--ink-soft); }
.sup-p-list { margin: 0; display: grid; gap: 0; }
.sup-p-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.sup-p-row dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding-top: 2px; }
.sup-p-row dd { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.sup-p-ev { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.sup-p-src { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.sup-p-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .sup-p-row { grid-template-columns: 1fr; gap: 2px; } }
.sup-p-hint .linkbtn { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; padding: 0; }
@media (max-width: 760px) { .tb-people.sup-chips { flex-wrap: wrap; overflow: visible; } } /* "＋ Category" never hides off-screen */
/* Accounts: a section with nothing for the chosen chip shows only its title, one line and ＋ Add */
[data-gsec].acc-empty > [id^="reg-body-"] { display: none !important; }
.acc-catnote { margin: 4px 0 2px; }

/* ---- ✨ Fill from website (4 Oct 2026) ---- */
.af-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.af-msg { font-size: 13px; color: var(--ink-soft); flex: 1 1 220px; min-width: 0; }
.minput.af-filled { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }

/* ---- Business structure tree (4 Oct 2026) — three calm bands, curved labelled lines, one accent for the selected box ---- */
.st-head h2 { margin: 0; }
.st-hint { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--panel-2, color-mix(in srgb, var(--ink) 4%, var(--panel))); border: 1px solid var(--line); font-size: 14px; }
.st-canvas { position: relative; margin-top: 16px; padding: 4px 0 8px; }
.st-lines { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 0; }
.st-band { position: relative; z-index: 1; padding: 6px 0 46px; }
.st-band:last-child { padding-bottom: 6px; }
.st-bk { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.st-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.st-node { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 170px; max-width: 260px; padding: 10px 14px; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font: inherit; color: var(--ink); box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.st-node b { font-size: 15px; } .st-node small { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.st-node:hover { border-color: var(--ink); transform: translateY(-1px); }
.st-node.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow); }
.st-node:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }
.st-biz { min-width: 230px; padding: 14px 16px; border-width: 1.5px; border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.st-biz b { font-size: 17px; }
.st-outside { background: transparent; box-shadow: none; border-style: dashed; }
.st-roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.st-roles i { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.st-node .mock-chip { margin-top: 2px; }
.st-ln { fill: none; stroke-width: 1.6; opacity: .75; transition: opacity .15s, stroke-width .15s; }
.st-ln.hot { stroke-width: 2.4; opacity: 1; } .st-ln.dim, .st-lbl.dim { opacity: .18; }
.st-l-own { stroke: var(--ink); } .st-l-ip { stroke: var(--accent); stroke-dasharray: 6 4; } .st-l-flow { stroke: var(--ink-soft); } .st-l-money { stroke: var(--sig-ok); }
.st-arrow { fill: var(--ink-soft); }
.st-lbl rect { fill: var(--panel); stroke: var(--line); } .st-lbl text { font-size: 11px; fill: var(--ink-soft); font-family: inherit; }
.st-legend { margin: 12px 0 0; font-size: 12px; color: var(--ink-faint); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.st-legend i { display: inline-block; width: 22px; height: 0; border-top: 2px solid; vertical-align: middle; }
.st-legend .st-l-own { border-color: var(--ink); } .st-legend .st-l-ip { border-color: var(--accent); border-top-style: dashed; } .st-legend .st-l-flow { border-color: var(--ink-soft); } .st-legend .st-l-money { border-color: var(--sig-ok); }
.st-p-sec { margin: 0 0 14px; } .st-p-sec h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.st-p-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.st-p-row > span { flex: 1 1 auto; min-width: 0; color: var(--ink-soft); }
.st-p-go { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.st-p-del { width: 24px; height: 24px; font-size: 14px; }
.st-p-kv { display: grid; grid-template-columns: 130px 1fr; gap: 2px 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.st-p-kv span { color: var(--ink-faint); font-size: 13px; } .st-p-kv small { grid-column: 2; color: var(--ink-faint); font-size: 12px; }
.st-p-alert { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); padding: 8px 10px; border-left: 3px solid var(--line); }
.st-p-acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .st-row { flex-direction: column; align-items: stretch; } .st-node { max-width: none; min-width: 0; }
  .st-band { padding-bottom: 22px; } .st-lines { display: none; } /* on a phone the boxes stack; tap one to see its connections */
}
.st-out { display: none; }
@media (max-width: 760px) { .st-out { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-soft); line-height: 1.45; } .st-out:empty { display: none; } }
.st-canvas { padding-bottom: 46px; } /* room for a business ↔ business arc below the last row */
.st-roles i.st-todo { background: transparent; border: 1px dashed var(--line); color: var(--ink-faint); font-weight: 600; }
.st-roles i.st-chk { background: transparent; border: 1px solid var(--sig-no); color: var(--sig-no); }
.st-p-checks p { margin: 0 0 6px; padding: 8px 10px; font-size: 13px; line-height: 1.45; border-left: 3px solid var(--sig-no); background: var(--panel-2, color-mix(in srgb, var(--ink) 4%, var(--panel))); }
@media (max-width: 760px) { .st-legend { display: none; } }
.st-src { display: block; font-size: 12px; color: var(--ink-faint); }
.st-lbl text { font-size: 12px; fill: var(--ink); } /* judged r2: a touch larger and darker to read */

/* ---- One shared supplier list (4 Oct 2026) ---- */
.sup-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; margin: 0 4px 0 0; border-radius: 99px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-soft); vertical-align: middle; }
.sup-sec { margin: 22px 0 8px; font-size: 15px; } .sup-sec small { font-weight: 400; color: var(--ink-faint); margin-left: 6px; font-size: 12px; }
.sup-rec { margin: 0 0 14px; padding: 10px 12px 4px; border: 1px solid var(--line); border-radius: 12px; }
.sup-rec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.sup-rec-h b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.sup-rec .sup-p-row:first-child { border-top: 0; }
.sup-p-notes .rn-s { margin: 0 0 6px; } .sup-p-notes p { margin: 0; font-size: 13px; }
.sup-disagree { margin: -6px 0 12px; padding: 8px 10px; font-size: 13px; line-height: 1.45; border-left: 3px solid var(--sig-doing); background: var(--panel-2, color-mix(in srgb, var(--ink) 4%, var(--panel))); }
@media (max-width: 760px) { .sup-rec-h { flex-direction: column; align-items: flex-start; gap: 2px; } }

/* ---- Accounts › Websites (4 Oct 2026): one calm card per site; the shop site carries its live-number connectors ---- */
.web-site-card { margin: 0 0 14px; padding: 16px 18px; }
.wsc-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.wsc-h h3 { margin: 0 0 2px; font-size: 18px; }
.wsc-url { font-size: 13px; color: var(--ink-soft); }
.wsc-acts { display: flex; align-items: center; gap: 8px; }
.wsc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; margin: 12px 0 0; }
.wsc-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.wsc-facts dd { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.wsc-sub { margin: 16px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.wsc-logins { margin: 0; padding-left: 18px; font-size: 14px; }
.wsc-notes { margin: 12px 0 0; font-size: 13px; color: var(--ink-soft); }
.wsc-ghost { border-style: dashed; background: transparent; box-shadow: none; }
.web-site-card .web-grid { margin-top: 4px; }
@media (max-width: 760px) { .wsc-facts { grid-template-columns: 1fr; } }

/* ---- Merch ideas: maker + their own mood board (5 Oct 2026) ---- */
.mer-maker { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.mer-maker .fl { flex: 1 1 220px; margin: 0; }
.mer-maker-hint, .mer-mb-hint { margin: 2px 0 8px; font-size: 13px; color: var(--ink-soft); }
.tc-b.tc-maker { font-weight: 700; }
.tc-b.tc-nomaker { background: transparent; border: 1px dashed var(--sig-doing); color: var(--sig-doing); }
.sup-ideas { margin: 4px 0 8px; padding-left: 18px; font-size: 14px; }

/* ---- My Art: master / web file links stand out (5 Oct 2026) — red = no link, green = shared link, amber = not a web link ---- */
.fl-link[class*="fl-st-"] { padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); }
.fl-link[class*="fl-st-"] .fl-n { font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.fl-st-none { border-color: #c0392b !important; background: color-mix(in srgb, #c0392b 7%, var(--panel)); }
.fl-st-none .fl-n, .fl-st-none .fl-state { color: #c0392b; }
.fl-st-ok { border-color: #2e8b57 !important; background: color-mix(in srgb, #2e8b57 8%, var(--panel)); }
.fl-st-ok .fl-n, .fl-st-ok .fl-state { color: #23744a; }
.fl-st-odd { border-color: #c98a00 !important; background: color-mix(in srgb, #c98a00 9%, var(--panel)); }
.fl-st-odd .fl-n, .fl-st-odd .fl-state { color: #9a6a00; }
.fl-state { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; }
body.acid .fl-st-none .fl-n, body.acid .fl-st-none .fl-state { color: #ff6b5e; } body.acid .fl-st-ok .fl-n, body.acid .fl-st-ok .fl-state { color: #35e0a1; } body.acid .fl-st-odd .fl-n, body.acid .fl-st-odd .fl-state { color: #ffc24a; }

/* ---- My Archive: the latest kept copy, plainly (5 Oct 2026) ---- */
.arch-copy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); }
.arch-copy.ok { border-color: color-mix(in srgb, var(--sig-ok) 55%, var(--line)); background: color-mix(in srgb, var(--sig-ok) 6%, var(--panel)); }
.arch-copy.none { border-style: dashed; }
.arch-copy-t { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.arch-copy-t b { font-size: 14px; } .arch-copy-t small { font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.arch-copy-a { display: flex; gap: 6px; flex-wrap: wrap; }
.fl-state-note { display: block; margin-top: 2px; font-weight: 500; font-size: 12px; opacity: .85; }
.arch-copy-note { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--ink-soft); }
.fl-st-opt { border-style: dashed !important; }
.fl-st-opt .fl-state { color: var(--ink-faint); font-weight: 500; }
/* My Art links grouped (4 Oct 2026, Aaron: "singular files and folders are in an odd order"): Files, then Folders */
.art-fgroup { margin: 14px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.art-fgroup:first-child { margin-top: 4px; }
.art-fgroup small { font-weight: 500; letter-spacing: 0; text-transform: none; margin-left: 6px; }
.art-files .fl-link + .fl-link { margin-top: 8px; }
.art-fgroup small { font-size: 12px; color: var(--ink-soft); }

/* Which name? — linked file vs. My Art (4 Oct 2026). A question, so it gets the one accent as a left rule; both answers equal weight. */
.art-namepick { margin: -4px 0 14px; padding: 12px 14px 14px; border-radius: 12px; background: var(--panel-2, color-mix(in srgb, var(--ink) 4%, var(--panel))); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--accent); }
.anp-q { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
.anp-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.anp-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 9px 12px; text-align: left; border-radius: 10px; border: 1.5px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; min-width: 0; }
.anp-opt:hover { border-color: var(--accent); }
.anp-opt:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.anp-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.anp-opt b { font-size: 15px; overflow-wrap: anywhere; }
.anp-opt small { font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
@media (max-width: 520px) { .anp-opts { grid-template-columns: 1fr; } }
/* Phone: the panel's side padding is 16px, so the save bar's bleed must match or the panel scrolls sideways (found 4 Oct). */
@media (max-width: 420px) { .tp-savebar { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } }

/* ---- Wide screens, more pages (4 Oct 2026; Aaron: "see where else this can happen … maximising space whilst still keeping
   harmony and using negative space well"). Same 1360px gate and 1600px cap as Home. Only pages whose content reflows get
   wider — lists, card grids, tables. Reading pages and forms keep their measure. Phones and laptops are untouched.
   Contacts (only from 1800px — below that a half-width row squeezes the name to nothing): each list runs in two columns, read down then across like a phone book (the list keeps its order).
   Marketing Plan (from 1700px, so each stays ~430px wide or more): the plan's sections three across instead of two, at the same card width as before.
   Apps & tools, Everything we own, tables: the auto-fill grids and tables simply get the room (fewer wrapped cells). */
@media (min-width: 1360px) {
  #main[data-page="marketing"], #main[data-page="group"] { max-width: 1600px; }
  /* forms and notes inside group pages keep a readable measure */
  #main[data-page="group"] .reg-guide { max-width: 760px; }
}
@media (min-width: 1700px) { #main[data-page="marketing"] .mkt-plan { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1800px) {
  #main[data-page="contacts"] { max-width: 1600px; } /* one wide column would just stretch the gap mid-row, so only widen for two */
  #main[data-page="contacts"] .ctr-list { columns: 2; column-gap: 0; column-rule: 1px solid var(--line); }
  #main[data-page="contacts"] .ctr { break-inside: avoid; grid-template-columns: minmax(0, 1fr) 66px minmax(0, 180px) 128px; }
  #main[data-page="contacts"] .ctr-meta { white-space: normal; } /* wrap rather than cut the city / people count */
}

/* McPolin Namer upload (4 Oct 2026): a plain summary, then the title changes shown old → new. */
.namer-sum { margin: 10px 0 12px; padding-left: 18px; display: grid; gap: 4px; font-size: 14.5px; }
.namer-ren { margin: 0 0 10px; padding: 8px 12px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2, color-mix(in srgb, var(--ink) 4%, var(--panel))); }
.namer-ren .art-fgroup { margin-top: 2px; }
.namer-rrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 14px; padding: 2px 0; }
.namer-rrow s { color: var(--ink-soft); }
/* File facts sit straight under the TIFF link they came from (Aaron, 4 Oct 2026: "the dpi, sizes, ratio etc shows below
   the link its pulling data from") — tucked in with a joining rule so they read as that link's details. */
.art-master-under { margin: -2px 0 12px 12px; border-left: 3px solid var(--line); border-top-left-radius: 0; }

/* ---- Select several artworks + My Art archive (4 Oct 2026; tick boxes always shown, like email — Aaron, 4 Oct).
   A real checkbox sits in a left gutter on every piece; ticked = the one accent. A calm bar appears once anything is ticked. ---- */
span.art-ck { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--ink-faint); background: var(--panel); display: inline-grid; place-items: center; align-self: center; }
.is-sel > span.art-ck { background: var(--accent); border-color: var(--accent); }
.is-sel > span.art-ck::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
input.art-ck, .art-gck, .art-ckall input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; }
.art-cks .art-row, .art-cks .artl-row:not(.artl-h) { position: relative; padding-left: 46px; }
.art-cks .artl-h { padding-left: 46px; }
.art-cks .art-row > input.art-ck, .art-cks .artl-row > input.art-ck { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 2; }
.art-selwrap { position: relative; min-width: 0; }
.art-selwrap > input.art-ck { position: absolute; z-index: 2; }
.artl .art-selwrap > input.art-ck { left: 16px; top: 50%; transform: translateY(-50%); }
.artn .art-selwrap > input.art-ck { left: 12px; top: 50%; transform: translateY(-50%); } .artn .art-selwrap > .artn-row { padding-left: 38px; width: 100%; }
.artg .art-selwrap > input.art-ck { top: 8px; left: 8px; width: 20px; height: 20px; } .artg .art-selwrap > .artg-card { width: 100%; }
.artg .art-selwrap.is-sel > .artg-card { outline: 3px solid var(--accent); outline-offset: 2px; }
.art-selwrap.is-sel > .artl-row, .art-selwrap.is-sel > .artn-row { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.art-row.is-sel, .artn-row.is-sel, .artl-row.is-sel, .aa-row.is-sel { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.art-cks .art-gh { gap: 10px; } .art-gck { margin-left: 16px; }
.art-ckall { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; padding: 0 4px; }
.artl-row[role="button"], .artn-row[role="button"], .artg-card[role="button"] { cursor: pointer; }
.artl-row[role="button"]:focus-visible, .artn-row[role="button"]:focus-visible, .artg-card[role="button"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.art-row:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.art-gsel { margin-left: auto; margin-right: 12px; font-weight: 600; }
.art-selbar { position: sticky; bottom: 12px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 16px 0 8px; padding: 10px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0, 0, 0, .14); }
.asb-n { font-size: 14.5px; } .asb-sp { flex: 1; }
.btn.asb-del { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.btn.asb-del:not(:disabled):hover { background: var(--accent); color: #fff; }
.art-selbar .btn:disabled { opacity: .45; cursor: default; }
.art-delnames { margin: 4px 0 14px; padding-left: 18px; font-size: 14px; display: grid; gap: 3px; } .art-delnames small { color: var(--ink-soft); margin-left: 6px; } .art-delnames .more { list-style: none; color: var(--ink-soft); }
.aa-row { width: 100%; text-align: left; }
.aa-row .art-ck { margin-right: 4px; }
@media (max-width: 760px) {
  .art-selbar { bottom: calc(76px + env(safe-area-inset-bottom)); gap: 8px 10px; }
  .art-selbar .asb-sp { display: none; } .art-selbar .btn { flex: 1 1 40%; }
}
.app-src { margin: 0 0 12px; max-width: 760px; }
.app-card .tl-acts { flex-wrap: wrap; }
/* My Art archive sits under My Art as its sub-page, so it isn't mistaken for My Archive (documents). */
body:not(.side-collapsed) .nav-item.nav-sub { padding-left: 34px; font-size: .94em; opacity: .9; }
.nav-item.nav-sub .nav-ico { transform: scale(.88); }
.art-gsel { white-space: nowrap; }
.asb-n small { color: var(--ink-soft); }
/* Confirm cost (4 Oct 2026) */
.app-costrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 6px 0 4px; }
.app-costrow .fl { flex: 1 1 160px; margin: 0; }
.app-costeq { min-height: 1.3em; margin: 4px 0 10px; font-size: 13.5px; color: var(--ink-soft); }
.app-conf { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-soft); }
.app-costdup { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; font-size: 13px; background: var(--panel-2, color-mix(in srgb, var(--ink) 4%, var(--panel))); border: 1px solid var(--line); }

/* ---- Live price + Online switch (4 Oct 2026). On = the look's one accent; off = quiet. Never green (green is only for an
   erotic-art yes). The price label under the value says whether it's the confirmed website price. ---- */
.art-online { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px 0 6px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; background: var(--panel); }
.art-online i { position: relative; width: 26px; height: 15px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: background .15s; }
.art-online i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.art-online.on { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.art-online.on i { background: var(--accent); } .art-online.on i::after { transform: translateX(11px); }
button.art-online:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
span.art-online { cursor: default; }
.art-c.price-live .art-l { color: var(--ink); font-weight: 700; }
.art-c.price-unconfirmed .art-l, .art-c.price-changed .art-l { color: var(--accent); }
.art-sell { margin: 4px 0 14px; padding: 4px 12px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2, color-mix(in srgb, var(--ink) 4%, var(--panel))); }
.art-sellrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0; font-size: 14px; }
.art-sellrow + .art-sellrow { border-top: 1px solid var(--line); }
.art-sell-t small { color: var(--ink-soft); margin-left: 4px; }
.art-sell-t s { color: var(--ink-soft); }
.art-c[class*="price-"] .art-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-row > .art-acts { margin-left: 8px; } /* breathing room between the price and the status pill */
.art-sell .art-fgroup { line-height: 1.5; }
.art-cks .art-gh h3 { margin-right: auto; }

/* Archive file name under the title (4 Oct 2026) */
.art-aname { margin: 4px 2px 8px; font-size: 12px; color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.art-aname > span { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; }
.art-aname code { font-size: 12px; color: var(--ink); background: var(--panel-2, color-mix(in srgb, var(--ink) 5%, var(--panel))); padding: 1px 6px; border-radius: 5px; overflow-wrap: anywhere; }

/* Enquiry PDF — the Rebellion quote's look: centred logo, black on white, Montserrat, picture left / details right. */
.pdoc-eq { font-family: Montserrat, "Inter Tight", sans-serif; font-size: 10pt; }
.pdoc-eq .eq-head { text-align: center; margin: 0 0 8mm; } .pdoc-eq .eq-head img { width: 26mm; height: auto; }
.pdoc-eq .eq-meta { display: grid; grid-template-columns: 1fr 1.3fr .8fr; gap: 6mm; margin-bottom: 7mm; }
.pdoc-eq .eq-meta p { margin: 0; line-height: 1.45; }
.pdoc-eq .eq-k { font-size: 7.5pt; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #777; margin-bottom: 1.5mm !important; }
.pdoc-eq .eq-intro { margin: 0 0 7mm; }
.pdoc-eq .eq-h { font-size: 11pt; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1.5px solid #141414; padding-bottom: 2mm; margin: 0 0 6mm; }
.pdoc-eq .eq-piece { display: grid; grid-template-columns: 88mm 1fr; gap: 8mm; margin-bottom: 9mm; break-inside: avoid; page-break-inside: avoid; }
.pdoc-eq .eq-img { background: #0d0d0d; display: grid; place-items: center; min-height: 60mm; } .pdoc-eq .eq-img img { width: 100%; height: auto; display: block; }
.pdoc-eq .eq-noimg { color: #fff; font-size: 30pt; font-family: Oswald, sans-serif; }
.pdoc-eq .eq-txt h3 { margin: 0 0 1mm; font-size: 15pt; } .pdoc-eq .eq-by { margin: 0 0 4mm; color: #666; font-size: 9pt; }
.pdoc-eq dl { margin: 0; display: grid; gap: 1.5mm; } .pdoc-eq dl div { display: grid; grid-template-columns: 22mm 1fr; }
.pdoc-eq dt { font-size: 7.5pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #777; padding-top: .6mm; } .pdoc-eq dd { margin: 0; }
.pdoc-eq .eq-price { margin: 5mm 0 0; font-size: 13pt; font-weight: 700; } .pdoc-eq .eq-price span { font-size: 7.5pt; letter-spacing: .12em; text-transform: uppercase; color: #777; margin-right: 2mm; }
.pdoc-eq .eq-foot { margin-top: 8mm; padding-top: 3mm; border-top: 1px solid #ddd; text-align: center; font-size: 7.5pt; color: #888; }

/* Supplier fill review (4 Oct 2026) */
.sup-fill.is-new { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: inset 3px 0 0 var(--accent); }
.sup-fill .sup-rec-h small { color: var(--ink-soft); font-size: 12px; }
.sup-fill-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.sup-fill-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2, color-mix(in srgb, var(--ink) 4%, var(--panel))); box-shadow: inset 3px 0 0 var(--accent); font-size: 14px; }
/* keep toasts clear of the selection bar */
body:has(.art-selbar) .toast { bottom: 96px; }
@media (max-width: 760px) {
  body:has(.art-selbar) .toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .art-selbar { flex-wrap: wrap; padding: 8px 10px; gap: 6px 8px; } /* two compact rows: every action visible */
  .art-selbar .btn { flex: 1 1 auto; min-height: 34px; padding: 0 10px; font-size: 11px; }
  .art-selbar .asb-n { white-space: nowrap; }
}
.pdoc-eq .eq-title { margin: 0 0 5mm; font-family: Oswald, "Inter Tight", sans-serif; font-size: 20pt; letter-spacing: .04em; text-transform: uppercase; }
.art-selbar .linkbtn { white-space: nowrap; }
.sup-fill-k { margin: 10px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.sup-fill-ai dd { color: var(--ink-soft); }

/* My Art archive rows (5 Oct 2026): tick · picture · title · Restore / Delete permanently on every piece */
.aa-list { display: grid; gap: 8px; }
.aa-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 0; }
.aa-row .artn-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .aa-row .artn-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-row .artn-t small { color: var(--ink-soft); font-size: 12px; }
.aa-acts { display: flex; gap: 8px; flex: 0 0 auto; }
.aa-ckall { margin: 0 0 10px; }
@media (max-width: 600px) { .aa-row { flex-wrap: wrap; } .aa-acts { width: 100%; } .aa-acts .btn { flex: 1 1 0; } }
.aa-group .art-gh h3 { margin-right: auto; } .aa-group .art-gh { gap: 10px; } .aa-group .art-gck { margin-left: 12px; }

/* What a link points to (5 Oct 2026): kind · pixels · dpi · ratio · file size, then the file name and print size. */
.fl-info { margin: -2px 0 10px 12px; padding: 6px 10px; border-left: 3px solid var(--line); font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.fl-info-t { color: var(--ink); font-weight: 600; } .fl-info-t.muted { color: var(--ink-soft); font-weight: 500; }
.fl-info-n, .fl-info-p { color: var(--ink-soft); overflow-wrap: anywhere; }
.fl-info-ok { color: var(--ink-soft); }
.fl-info .linkbtn { align-self: flex-start; margin-top: 2px; }

/* ---- Team board (5 Oct 2026). Reddit-shaped (channels · topic cards · threads) but calm: one accent (the active
   channel + Post), faces show who's talking, latest activity first. ---- */
.bd-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: start; }
.bd-chans { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 2px; }
.bd-ch { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 14px; color: var(--ink-soft); }
.bd-ch span { font-size: 12px; color: var(--ink-faint); }
.bd-ch:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.bd-ch.on { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.bd-ch:focus-visible, .bd-topic:focus-visible, .bd-open:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.bd-addch { align-self: flex-start; margin: 6px 0 0 10px; }
.bd-people { margin-top: 18px; padding: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.bd-people p { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.bd-person { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.bd-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bd-open { all: unset; box-sizing: border-box; cursor: text; width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink-faint); font-size: 14.5px; }
.bd-open:hover { border-color: var(--ink-faint); }
.bd-ro { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.bd-list { display: flex; flex-direction: column; gap: 10px; }
.bd-topic { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.bd-topic:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.bd-topic.is-pin { box-shadow: inset 3px 0 0 var(--accent); }
.bd-av .ini { width: 32px; height: 32px; font-size: 13px; }
.bd-tmain { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bd-tmeta { font-size: 12.5px; color: var(--ink-soft); } .bd-tmeta b { color: var(--ink); }
.bd-pin { color: var(--accent); font-weight: 700; }
.bd-ttitle { font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.bd-tbody { font-size: 14px; color: var(--ink-soft); line-height: 1.45; overflow-wrap: anywhere; }
.bd-tfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); }
.bd-chip { white-space: nowrap; }
.bd-faces { display: inline-flex; } .bd-faces .ini { width: 22px; height: 22px; font-size: 10px; margin-left: -6px; box-shadow: 0 0 0 2px var(--panel); } .bd-faces .ini:first-child { margin-left: 0; }
.bd-when { color: var(--ink-faint); }
.bd-thumb { width: 92px; height: 92px; border-radius: 10px; overflow: hidden; background: var(--panel-2, #eee); align-self: center; } .bd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.bd-frow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .bd-frow > .minput { flex: 1 1 200px; } .bd-frow > select.minput { flex: 0 0 auto; }
.bd-form textarea { resize: vertical; min-height: 70px; }
.bd-imgprev { display: flex; align-items: center; gap: 10px; } .bd-imgprev img { max-height: 110px; border-radius: 8px; }
.bd-fmsg { font-size: 13px; color: var(--ink-soft); }
.bd-thread { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.bd-thead { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink-soft); } .bd-thead .bd-faces { margin-left: auto; }
.bd-post { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.bd-post.bd-first { border-color: color-mix(in srgb, var(--ink) 18%, var(--line)); }
.bd-post header { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); } .bd-post header b { color: var(--ink); }
.bd-pacts { margin-left: auto; display: flex; gap: 10px; }
.bd-ptitle { margin: 2px 0 0; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.bd-pbody { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; } .bd-pbody a { color: var(--accent); }
.bd-linkcard { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); font-size: 13px; } .bd-linkcard span { color: var(--ink-soft); overflow-wrap: anywhere; }
.bd-pimg img { max-width: 100%; max-height: 520px; border-radius: 10px; display: block; }
.bd-count { margin: 4px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.bd-replies { display: flex; flex-direction: column; gap: 10px; padding-left: 18px; border-left: 2px solid var(--line); }
.bd-editf { margin-top: 6px; }
/* Home: the latest from the board */
.hb-list { display: flex; flex-direction: column; } .hb-item { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 9px 2px; border-top: 1px solid var(--line); } .hb-item:first-child { border-top: 0; }
.hb-item .ini { width: 26px; height: 26px; font-size: 11px; } .hb-t { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hb-s { font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-item > span:last-child { min-width: 0; } .hb-t, .hb-s { display: block; } /* a long chat line used to push the whole phone page 40px wider than the screen */
.hb-item:hover .hb-t { color: var(--accent); } .hb-item:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); }
@media (max-width: 860px) {
  .bd-wrap { grid-template-columns: 1fr; gap: 12px; }
  .bd-chans { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .bd-ch { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
  .bd-ch.on { box-shadow: none; border-color: var(--accent); }
  .bd-people, .bd-addch { display: none; }
  .bd-topic { grid-template-columns: 30px minmax(0, 1fr) 64px; } .bd-thumb { width: 64px; height: 64px; align-self: start; } /* a small thumbnail, not a full-width picture */
  .bd-replies { padding-left: 10px; }
}
/* Home › your calendar (5 Oct 2026) */
.hcal-empty { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }
.hcal-day { padding: 6px 0; border-top: 1px solid var(--line); } .hcal-day:first-of-type { border-top: 0; }
.hcal-dn { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.hcal-ev { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 8px; padding: 3px 0; font-size: 14px; }
.hcal-t { color: var(--ink-soft); font-variant-numeric: tabular-nums; } .hcal-x { display: flex; flex-direction: column; min-width: 0; } .hcal-x b { font-weight: 600; overflow-wrap: anywhere; } .hcal-x small { color: var(--ink-soft); font-size: 12px; }
.hcal-src { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-faint); }
.hcal-note { margin: 4px 0; font-size: 12.5px; color: var(--ink-soft); } .hcal-msg { min-height: 1.2em; margin: 4px 0; font-size: 13px; color: var(--accent); }
.hc-cal { order: 4; } .hc-board { order: 6; } @media (min-width: 1360px) { .hc-cal, .hc-board { order: 0; } }

/* Editions (5 Oct 2026): one quiet line — left of each size — that opens the size table. Last one = accent; sold out = struck. */
.art-edline { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; flex-wrap: nowrap; white-space: nowrap; align-items: baseline; gap: 2px 9px; margin-top: 4px; padding: 3px 8px; border-radius: 8px; font-size: 12.5px; color: var(--ink-soft); }
.art-edline:hover, .art-edline.on { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
.art-edline:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }
.ed-k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.ed-t b { font-weight: 700; color: var(--ink-faint); margin-right: 2px; font-size: 11px; } .ed-t { font-variant-numeric: tabular-nums; color: var(--ink); }
.ed-t.last { color: var(--accent); font-weight: 700; } .ed-t.out { text-decoration: line-through; color: var(--ink-faint); }
.ed-car { transition: transform .15s; } .art-edline.on .ed-car { transform: rotate(180deg); }
.art-edpanel { margin: -6px 0 10px 70px; padding: 10px 14px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; background: var(--panel); overflow-x: auto; }
.art-tp .art-edpanel { margin: 0 0 12px; border-top: 1px solid var(--line); border-radius: 12px; }
.ed-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ed-table th { text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; padding: 4px 10px 6px 0; }
.ed-table td { padding: 6px 10px 6px 0; border-top: 1px solid var(--line); white-space: nowrap; } .ed-sku { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--ink-soft); }
.ed-table tr.last td { color: var(--accent); } .ed-table tr.out td { color: var(--ink-faint); text-decoration: line-through; }
.ed-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); }
@media (max-width: 760px) { .art-edpanel { margin: -6px 0 10px; } }

/* ---- Private Sales (4 Oct 2026). List: tabs + a nine-stage funnel + rows. A sale: stages down the left, the stage in focus
   on the right with its paperwork, then details and the log. Colours come from the --sig tokens so every look carries it. */
.ps-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ps-bar .gtabs { margin: 0; }
.ps-funnel { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; margin: 0 0 14px; }
.ps-fstage { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 9px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; min-width: 0; position: relative; }
.ps-fstage:hover { border-color: var(--sig-mid); }
.ps-fstage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-fstage.on { border-color: var(--sig-no); box-shadow: inset 0 -3px 0 var(--sig-no); }
.ps-fn { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ps-fl { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.ps-fc { font-family: var(--display); font-size: 22px; line-height: 1.1; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ps-fstage.has .ps-fc { color: var(--sig-no); }
.ps-fv { font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ps-filtnote { font-size: 13px; color: var(--ink-soft); margin: -4px 0 10px; }
.ps-list { padding: 6px 0; }
.ps-row { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 2fr) 110px; gap: 16px; align-items: center; width: 100%; padding: 14px 22px; border-top: 1px solid var(--line); }
.ps-row:first-child { border-top: 0; }
.ps-row:hover { background: var(--panel-2); }
.ps-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ps-rmain, .ps-rstage, .ps-rprice { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ps-rt { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-rs, .ps-next { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-rprice { font-weight: 600; font-variant-numeric: tabular-nums; }
.ps-rprice small, .ps-hprice small { font-weight: 400; font-size: 12px; color: var(--ink-faint); }
.ps-rprice i { font-weight: 400; color: var(--ink-faint); }
.ps-pill { white-space: nowrap; align-self: flex-start; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--ox-50); color: var(--sig-no); border: 1px solid var(--ox-200); }
.ps-rprog { display: flex; align-items: center; gap: 8px; } .ps-rprog small { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ps-rprog .pf-bar > span, .ps-stprog .pf-bar > span { background: var(--sig-ok); }
.ps-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ps-top #ps-back { margin-right: auto; }
.ps-faces { display: inline-flex; } .ps-faces .ini { width: 24px; height: 24px; font-size: 10.5px; margin-left: -6px; box-shadow: 0 0 0 2px var(--paper); } .ps-faces .ini:first-child { margin-left: 0; }
.ps-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ps-head h2 { margin: 0; font-family: var(--display); font-size: 30px; line-height: 1.1; letter-spacing: .01em; }
.ps-head p { margin: 6px 0 0; color: var(--ink-soft); font-size: 14px; }
.ps-hprice { text-align: right; display: flex; flex-direction: column; } .ps-hprice b { font-family: var(--display); font-size: 26px; font-variant-numeric: tabular-nums; }
.ps-oc { display: inline-block; vertical-align: middle; font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); color: var(--ink-soft); border: 1px solid var(--line); }
.ps-oc.sold { background: var(--olive-100); color: var(--sig-ok); border-color: var(--olive-200); }
.ps-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.ps-stepper { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 2px; }
.ps-sstep { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink-soft); font-size: 14px; }
.ps-sstep:hover { background: var(--panel); }
.ps-sstep:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ps-sstep.on { background: var(--panel); box-shadow: var(--shadow); color: var(--ink); font-weight: 600; }
.ps-sn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; border: 1.5px solid var(--stone); color: var(--ink-faint); background: var(--paper); font-variant-numeric: tabular-nums; }
.ps-sstep.is-past .ps-sn { border-color: var(--sig-ok); color: var(--sig-ok); }
.ps-sstep.is-past.ok .ps-sn { background: var(--sig-ok); color: #fff; }
.ps-sstep.is-now .ps-sn { border-color: var(--sig-no); background: var(--sig-no); color: #fff; }
.ps-sc { font-size: 12px; color: var(--ink-faint); font-weight: 400; font-variant-numeric: tabular-nums; }
.ps-stage { padding: 22px 24px; }
.ps-sthead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ps-kick { margin: 0 0 4px; font-size: 12px; color: var(--ink-faint); letter-spacing: .02em; }
.ps-sthead h3 { margin: 0; font-family: var(--display); font-size: 24px; }
.ps-stprog { display: flex; flex-direction: column; gap: 6px; min-width: 200px; font-size: 13px; color: var(--ink-soft); }
.ps-steps { display: flex; flex-direction: column; }
.ps-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ps-ck { width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; border: 1.5px solid var(--stone); background: var(--panel); cursor: pointer; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: #fff; padding: 0; }
.ps-ck:hover:not(:disabled) { border-color: var(--sig-ok); }
.ps-ck:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-ck:disabled { cursor: default; opacity: .7; }
.ps-step.done .ps-ck { background: var(--sig-ok); border-color: var(--sig-ok); }
.ps-stitle { font-size: 14.5px; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ps-step.done .ps-stitle { color: var(--ink-soft); }
.ps-req, .ps-own { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--ox-50); color: var(--sig-no); border: 1px solid var(--ox-200); }
.ps-own { background: var(--panel-2); color: var(--ink-soft); border-color: var(--line); }
.ps-step.done .ps-req { background: var(--olive-100); color: var(--sig-ok); border-color: var(--olive-200); }
.ps-sby { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.ps-tmpl { all: unset; cursor: pointer; display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--stone); text-underline-offset: 3px; }
.ps-tmpl:hover { color: var(--ink); } .ps-tmpl.ok { color: var(--sig-ok); }
.ps-tmpl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-att { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; align-items: baseline; }
.ps-file { font-size: 13px; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-file:hover { border-color: var(--sig-mid); }
.ps-note { flex-basis: 100%; margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); white-space: pre-wrap; }
.ps-sacts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.ps-sacts .linkbtn, .ps-up { font-size: 12.5px; }
.ps-up { cursor: pointer; }
.ps-addstep { margin-top: 12px; font-size: 13px; }
.ps-move { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.ps-mhint { font-size: 13px; color: var(--ink-soft); margin: 14px 0 0; } .ps-move .ps-mhint { margin: 0; }
.ps-lower { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.ps-details h3, .ps-log h3 { margin: 0 0 12px; font-family: var(--display); font-size: 20px; }
.ps-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 10px; }
.ps-details .minput, .ps-f2 .minput, #ps-nf .minput, .ps-stfields .minput, .ps-stnote .minput { width: 100%; }
.ps-f2 { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
#ps-nf .fl { margin-top: 10px; }
.ps-details .fl .minput, #ps-nf .fl .minput, .ps-stfields .fl .minput, .ps-stnote .minput { padding: 22px 12px 7px; min-height: 50px; }
.ps-details .fl .fl-n, #ps-nf .fl .fl-n, .ps-stfields .fl .fl-n, .ps-stnote .fl-n { right: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-details > .fl { margin-top: 0; }
.ps-fmsg { font-size: 13px; color: var(--sig-no); min-height: 1em; margin: 8px 0 0; }
.ps-endacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ps-logf { display: flex; gap: 8px; margin-bottom: 12px; } .ps-logf .minput { flex: 1; min-width: 0; }
.ps-loglist { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; }
.ps-loglist li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ps-loglist li:first-child { border-top: 0; }
.ps-lt { color: var(--ink-2); } .ps-lw { color: var(--ink-faint); white-space: nowrap; font-size: 12px; }
.ps-plist { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.ps-pp { display: flex; align-items: center; gap: 10px; padding: 7px 4px; font-size: 14px; cursor: pointer; }
@media (max-width: 1100px) { .ps-funnel { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ps-lower { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .ps-bar .ps-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; width: 100%; }
  .ps-bar .ps-tabs .gtab { flex: 0 0 auto; }
  .ps-bar #ps-new { width: 100%; }
  .ps-funnel { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .ps-fstage { flex: 0 0 116px; }
  .ps-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 16px; }
  .ps-rstage { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; }
  .ps-rprog { display: none; }
  .ps-rprice { text-align: right; }
  .ps-grid { grid-template-columns: 1fr; }
  .ps-stepper { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 6px; scrollbar-width: none; }
  .ps-sstep { flex: 0 0 auto; grid-template-columns: 26px auto; } .ps-sstep .ps-sc { display: none; }
  .ps-sstep:not(.on) .ps-sl { display: none; }
  .ps-stage { padding: 18px 16px; }
  .ps-head h2 { font-size: 24px; } .ps-hprice { text-align: left; }
  .ps-dgrid { grid-template-columns: 1fr; }
  .ps-stprog { min-width: 0; width: 100%; }
}
/* Private Sales, round 2: shaping the pipeline, files in folders, grouped details, portal dialogs. */
.ps-shape { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 10px 0; margin-top: 6px; border-top: 1px solid var(--line); font-size: 13px; }
.ps-hid { margin: 0; font-size: 12px; color: var(--ink-faint); line-height: 1.6; } .ps-hid .linkbtn { font-size: 12px; }
.ps-savedef { color: var(--ink-faint); font-size: 12px; }
.ps-stacts { display: flex; gap: 12px; margin-top: 6px; } .ps-stacts .linkbtn { font-size: 12.5px; }
.ps-ed { font-family: var(--body); font-size: 14px; font-weight: 600; vertical-align: middle; padding: 2px 8px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-soft); }
.ps-dgroup { margin: 14px 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.ps-details > .ps-dgroup:first-of-type { margin-top: 0; }
.ps-details > .fl { margin-bottom: 10px; }
.ps-cfl { margin: 8px 0 8px 18px; padding: 0; color: var(--ink-soft); } .ps-cfl li { margin: 2px 0; }
.ps-cfm { font-size: 13.5px; color: var(--ink-soft); }
.ps-askin { width: 100%; margin-top: 12px; }
.ps-rcol { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ps-fhead { display: flex; justify-content: space-between; align-items: baseline; } .ps-fhead h3 { margin: 0 0 10px; }
.ps-folder { border-top: 1px solid var(--line); }
.ps-folder summary { cursor: pointer; display: flex; justify-content: space-between; padding: 9px 2px; font-size: 14px; list-style: none; }
.ps-folder summary::-webkit-details-marker { display: none; }
.ps-folder summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-fn2 { color: var(--ink-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ps-flist { display: flex; flex-direction: column; gap: 6px; padding: 0 0 12px 22px; }
.ps-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ps-fmeta { font-size: 11.5px; color: var(--ink-faint); }
.ps-fmove { font-size: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--ink-soft); padding: 2px 4px; max-width: 160px; }
.ps-fempty { margin: 0; font-size: 12.5px; color: var(--ink-faint); font-style: italic; }
.ps-fchip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.ps-fx { all: unset; cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: var(--ink-faint); font-size: 16px; }
.ps-fx:hover { background: var(--panel-2); color: var(--sig-no); } .ps-fx:focus-visible { outline: 2px solid var(--accent); }
@media (max-width: 760px) {
  .ps-stepper { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .ps-shape { flex-direction: row; flex-wrap: wrap; border-top: 0; padding: 4px 0 0; flex: 0 0 auto; }
}
/* New in the portal (Home): what changed, newest first; shrinks to one line once read. */
.pn-card .card-head { align-items: flex-start; }
.pn-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--sig-no); }
.pn-list { display: flex; flex-direction: column; }
.pn-list.pn-scroll { max-height: 440px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; margin-right: -6px; }
.pn-older { margin-top: 10px; font-size: 13px; }
.pn-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding: 10px 0 10px 12px; border-top: 1px solid var(--line); border-left: 3px solid transparent; }
.pn-item:first-child { border-top: 0; }
.pn-item.fresh { border-left-color: var(--sig-no); }
.pn-item:hover .pn-t { text-decoration: underline; text-underline-offset: 3px; }
.pn-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pn-t { font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; }
.pn-w { font-weight: 400; font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.pn-d { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.pn-card.pn-quiet { padding: 12px 18px; }
.pn-all { font-size: 13px; text-align: left; }
/* Commissions: a partner's link. */
.pt-link { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pt-lrow { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin: 8px 0; } .pt-lrow .minput { width: 100%; }
.pt-lout { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.pt-lout code { flex: 1 1 220px; font-size: 12.5px; word-break: break-all; color: var(--ink); }
@media (max-width: 760px) { .pt-lrow { grid-template-columns: 1fr; } }
.ps-flist .ps-frow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 4px 0; }
.ps-flist .ps-frow .ps-fchip { grid-column: 1; min-width: 0; } .ps-flist .ps-frow .ps-fmove { grid-column: 2; grid-row: 1; }
.ps-flist .ps-frow .ps-fmeta { grid-column: 1 / -1; padding-left: 2px; }
.ps-fchip .ps-file { min-width: 0; }
/* Private Sales: suggested for this sale (AI). */
.ps-aihead { display: flex; justify-content: space-between; align-items: baseline; } .ps-aihead h3, .ps-ai > h3 { margin: 0 0 4px; }
.ps-aiw { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-faint); }
.ps-ail { list-style: none; margin: 0; padding: 0; }
.ps-ail li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.ps-ail li:first-child { border-top: 0; }
.ps-ain { all: unset; cursor: pointer; font-weight: 600; font-size: 13.5px; } .ps-ain:hover { text-decoration: underline; text-underline-offset: 3px; } .ps-ain:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ps-ais { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; } .ps-ais.ok { color: var(--sig-ok); }
.ps-aiy { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.ps-aiwatch { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); } .ps-aiwatch li { margin: 3px 0; }
.ps-fchip { overflow: hidden; } .ps-fchip .ps-file { flex: 0 1 auto; min-width: 0; } .ps-fchip .ps-fx { flex: 0 0 auto; }
/* My Art: open a piece in place, ratio badge, series descriptions (4 Oct 2026). */
.art-row { cursor: pointer; }
.art-row.open { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }
.art-tline { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.art-ratio { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: .02em; line-height: 1; padding: 4px 8px 3px; border-radius: 6px; background: var(--ink); color: var(--paper); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.art-more { all: unset; box-sizing: border-box; cursor: pointer; flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); color: var(--ink-soft); font-size: 14px; background: var(--panel); }
.art-more:hover { border-color: var(--sig-mid); color: var(--ink); } .art-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.art-drop { margin: -6px 0 12px 70px; padding: 16px 18px 14px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; background: var(--panel); cursor: default; }
.ad-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.ad-grid .ad-wide { grid-column: span 2; } .ad-grid .fl:has(textarea) { grid-column: 1 / -1; }
.ad-grid .minput { width: 100%; padding: 22px 12px 7px; min-height: 50px; }
.ad-grid .fl .fl-n { right: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-ratio .minput { font-family: var(--display); font-size: 17px; font-weight: 700; }
.ad-price { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.art-drop .art-edpanel { margin: 12px 0 0; border: 1px solid var(--line); border-radius: 12px; }
.ad-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; } .ad-hint { font-size: 12px; color: var(--ink-faint); }
.art-sdesc { margin: -2px 0 12px; max-width: 860px; }
.asd-t { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); } .asd-none { font-style: italic; color: var(--ink-faint); }
.asd-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; }
.asd-acts .linkbtn { font-size: 12.5px; } .asd-src { color: var(--ink-faint); font-size: 12px; text-decoration: none; } a.asd-src:hover { text-decoration: underline; }
.asd-new { color: var(--sig-no); }
.asd-in { width: 100%; }
@media (max-width: 980px) { .ad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .art-drop { margin: -6px 0 12px; padding: 14px; } .ad-grid { grid-template-columns: 1fr 1fr; } .ad-grid .ad-wide { grid-column: 1 / -1; } }
/* Register archive. */
.grp-bacts { display: inline-flex; align-items: center; gap: 14px; }
.fin-archline { margin: -6px 0 10px; font-size: 13px; } .fin-archline .linkbtn { font-size: 13px; }
.rga-list { display: flex; flex-direction: column; margin-top: 12px; max-height: 60vh; overflow: auto; }
.rga-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.rga-row:first-child { border-top: 0; }
.rga-n { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rga-n small { font-size: 12px; color: var(--ink-faint); }
.rga-sure { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--ox-50); border: 1px solid var(--ox-200); font-size: 13px; color: var(--ink); }
/* My Art › Small grid: about three times as many pieces on screen as Grid. */
.artg.artg-s { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.artg-s .artg-card { border-radius: 6px; } .artg-s .artg-cap { font-size: 10.5px; padding: 12px 5px 4px; }
.artg-s .artg-dot { top: 5px; right: 5px; width: 7px; height: 7px; box-shadow: 0 0 0 1.5px #fff; }
@media (max-width: 760px) { .artg.artg-s { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 4px; } }
@media (hover: none) { .artg-s .artg-cap { opacity: 0; } } /* tiny tiles: names show when the piece opens */
.ad-grid .ad-wide3 { grid-column: span 3; }
.asd-t.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.asd-more { font-size: 12.5px; margin-top: 2px; }
.asd-site { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--line); font-size: 13px; color: var(--ink-soft); background: var(--panel-2); border-radius: 0 8px 8px 0; }
@media (max-width: 980px) { .ad-grid .ad-wide3 { grid-column: 1 / -1; } }
.reg-archline { margin: 10px 0 0; font-size: 12.5px; } .reg-archline .linkbtn { font-size: 12.5px; color: var(--ink-faint); }
.asd-t.clamp1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 760px) { .artg.artg-s { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 3px; } }
/* Tabs in your own order: drag, Alt+arrows, or ⇄ Arrange. */
.gtab[draggable="true"] { cursor: grab; } .gtab.dragging { opacity: .45; } .gtab.drop-at { box-shadow: inset 3px 0 0 var(--accent); }
.tab-arr-bar { display: flex; justify-content: flex-end; gap: 14px; margin: -6px 0 8px; font-size: 12px; } .tab-arr-bar .linkbtn { font-size: 12px; color: var(--ink-faint); }
.tab-arr { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--panel-2); }
.tab-arr-i { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; }
.tab-arr-b { all: unset; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--ink-soft); font-size: 11px; }
.tab-arr-b:hover:not(:disabled) { background: var(--panel-2); color: var(--ink); } .tab-arr-b:disabled { opacity: .25; cursor: default; } .tab-arr-b:focus-visible { outline: 2px solid var(--accent); }
/* ---- Discussions: channels you can rename/archive, and the bubble + side panel on every page (5 Oct 2026). ---- */
.bd-chrow { display: flex; align-items: center; } .bd-chrow .bd-ch { flex: 1; min-width: 0; }
.bd-chmore { all: unset; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--ink-faint); opacity: .5; }
.bd-chrow:hover .bd-chmore, .bd-chmore:focus-visible { opacity: 1; } .bd-chmore:hover { background: var(--panel); color: var(--ink); } .bd-chmore:focus-visible { outline: 2px solid var(--accent); }
.bd-gone { margin-top: 10px; font-size: 13px; } .bd-gone summary { cursor: pointer; color: var(--ink-faint); padding: 6px 10px; list-style: none; } .bd-gone summary::-webkit-details-marker { display: none; } .bd-gone summary span { font-size: 12px; margin-left: 4px; }
.bd-gone .bd-ch { opacity: .75; }
.dq-bubble { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--ink); color: var(--paper); box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.dq-bubble:hover { transform: translateY(-1px); } .dq-bubble:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.dq-n { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--paper); }
.dq-panel { position: fixed; right: 22px; bottom: 86px; z-index: 61; width: 380px; max-height: min(640px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.22); overflow: hidden; }
.dq-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.dq-head h2 { margin: 0; flex: 1; font-family: var(--display); font-size: 19px; } .dq-head .linkbtn { font-size: 12.5px; } .dq-head [data-dqback] { flex: 1; text-align: left; }
.dq-new { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.dq-row { display: flex; gap: 8px; align-items: center; } .dq-row select { flex: 0 0 120px; } .dq-row input, .dq-new textarea, .dq-reply textarea { flex: 1; width: 100%; }
.dq-msg { font-size: 12.5px; color: var(--ink-faint); }
.dq-list { overflow: auto; padding: 4px 0; }
.dq-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px 16px; border-left: 3px solid transparent; }
.dq-item:hover { background: var(--panel-2); } .dq-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dq-item.new { border-left-color: var(--accent); } .dq-item.new .dq-tt { font-weight: 700; }
.dq-it { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .dq-tt { font-size: 14px; font-weight: 600; } .dq-ts { font-size: 12px; color: var(--ink-faint); }
.dq-thread { overflow: auto; padding: 8px 16px; flex: 1; }
.dq-ch { margin: 6px 0; font-size: 12px; color: var(--ink-faint); }
.dq-post { padding: 10px 0; border-top: 1px solid var(--line); } .dq-post.first { border-top: 0; }
.dq-post header { display: flex; align-items: center; gap: 8px; font-size: 13px; } .dq-post header span { color: var(--ink-faint); font-size: 12px; }
.dq-post h3 { margin: 8px 0 4px; font-size: 16px; } .dq-body { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin-top: 6px; overflow-wrap: anywhere; }
.dq-img { display: block; max-width: 100%; border-radius: 10px; margin-top: 8px; }
.dq-reply { padding: 10px 16px 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 760px) {
  .dq-bubble { right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
  .dq-panel { inset: 0; width: auto; max-height: none; border-radius: 0; border: 0; z-index: 90; }
}
@media print { .dq-bubble, .dq-panel { display: none !important; } }
@media (max-width: 760px) { body:has(#dq-bubble:not([hidden])) #main { padding-bottom: 150px; } } /* room so the bubble never sits over the last thing on a page */
/* ---- Legal templates (5 Oct 2026): a sheet with the filled-in document on "paper", blanks and fill-ins marked. ---- */
.lt-open { all: unset; cursor: pointer; display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--stone); text-underline-offset: 3px; }
.lt-open:hover { color: var(--ink); } .lt-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lt-ok { color: var(--sig-ok); font-weight: 600; }
.modal-bg.lt-sheet .modal { width: min(920px, 96vw); max-width: none; }
.lt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; } .lt-sp { flex: 1; }
.lt-tog { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.lt-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; }
.lt-draft { color: var(--sig-no); font-weight: 600; }
.lt-miss { font-size: 13px; color: var(--ink-soft); margin: 10px 0 0; } .lt-miss .linkbtn { font-size: 13px; }
.lt-vline { font-size: 12px; color: var(--ink-faint); margin: 10px 0 6px; } .lt-vline .linkbtn { font-size: 12px; }
.lt-paper { background: #fff; color: #1d1a16; border: 1px solid var(--line); border-radius: 10px; padding: 40px 48px; max-height: 62vh; overflow: auto; box-shadow: inset 0 1px 0 rgba(0,0,0,.02); }
.lt-doc { font-family: Georgia, "Times New Roman", serif; font-size: 14.5px; line-height: 1.6; color: #1d1a16; }
.lt-doc h1 { font-size: 24px; margin: 0 0 14px; line-height: 1.25; font-family: inherit; } .lt-doc h2 { font-size: 17px; margin: 22px 0 8px; font-family: inherit; } .lt-doc h3 { font-size: 15px; margin: 16px 0 6px; font-family: inherit; }
.lt-doc p { margin: 0 0 10px; } .lt-doc ul, .lt-doc ol { margin: 0 0 10px; padding-left: 22px; } .lt-doc li { margin: 3px 0; } .lt-doc hr { border: 0; border-top: 1px solid #bbb; margin: 22px 0; }
.lt-blank { background: #fde2e1; color: #8a1c12; padding: 0 3px; border-radius: 3px; font-family: var(--body); font-size: .88em; }
.lt-fill { background: #fff4ce; color: #5a4300; padding: 0 3px; border-radius: 3px; font-family: var(--body); font-size: .88em; }
.lt-field { background: #ececea; border-radius: 3px; padding: 0 2px; } /* neutral grey: green only ever means an erotic-art yes */
.lt-law { font-family: var(--body); font-size: 12.5px; background: #fff4ce; border-left: 3px solid #d9a400; padding: 6px 10px; border-radius: 0 6px 6px 0; color: #4a3a00; }
.lt-vers { margin-top: 12px; font-size: 13px; } .lt-vers summary { cursor: pointer; color: var(--ink-soft); }
.lt-ver { all: unset; cursor: pointer; display: block; padding: 6px 4px; border-top: 1px solid var(--line); font-size: 13px; } .lt-ver:hover { background: var(--panel-2); } .lt-ver:focus-visible { outline: 2px solid var(--accent); }
.lt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .lt-chip { all: unset; cursor: pointer; font-size: 12px; padding: 4px 9px; border-radius: 999px; background: #e9efe3; color: #2d4220; } .lt-chip:focus-visible { outline: 2px solid var(--accent); }
.lt-ta { width: 100%; min-height: 52vh; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.55; }
.lt-erow { flex-wrap: wrap; } .lt-erow .minput { flex: 1 1 260px; }
.pdoc .lt-print .lt-blank, .pdoc .lt-print .lt-fill { background: #fff4ce; }
@media (max-width: 760px) { .lt-paper { padding: 20px 16px; max-height: none; } .lt-doc { font-size: 14px; } }

/* ==== Light & dark for every style (Aaron, 5 Oct 2026: "allow all other styles to have a dark mode and light mode too") ====
   body.mode-dark  = dark version of Standard, F1 or Huntress.  body.acid.mode-light = light version of ACID.
   Each keeps its own identity: Standard warm ink + oxblood, F1 carbon + F1 red, Huntress night plum + violet, ACID bone + hot pink.
   Accent backgrounds keep white text at ≥ 4.5:1; accent *text* on dark uses a lighter tint (--sig-no) so it stays readable. */
body.mode-dark {
  --paper: #14110e; --panel: #1e1a16; --panel-2: #262119; --line: #3a3229; --stone: #5c534a;
  --ink: #f2ede4; --ink-2: #e3dccf; --ink-soft: #c7beb1; --ink-faint: #978e81;
  --accent: #b83a2b; --accent-ink: #ffffff;
  --ox-50: #241614; --ox-100: #2e1a16; --ox-200: #5a2c23; --ox-500: #e08a76; --ox-700: #f0a594;
  --olive: #8fbd6a; --olive-100: #1b2715; --olive-200: #2f4724; --done: #8fbd6a; --doing: #e08a76;
  --sig-no: #ff8a72; --sig-doing: #e8a08f; --sig-ok: #8fbd6a; --sig-ink: #e3dccf; --sig-mid: #b3aa9d; --sig-faint: #8a8174; --sig-stone: #4e463d;
  --person-1: #e9e2d6; --person-2: #cfc6b8; --person-3: #b2a898; --person-4: #968c7d; --person-ink: #14110e;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --fx-pos: #8fbd6a; --fx-neg: #ff8a72;
  background: var(--paper); color: var(--ink); color-scheme: dark;
}
body.mode-dark.f1 {
  --paper: #0e0e13; --panel: #18181f; --panel-2: #202029; --line: #30303b; --stone: #4c4c58;
  --ink: #f2f2f5; --ink-2: #dedee6; --ink-soft: #b9b9c6; --ink-faint: #9494a8;
  --accent: #e10600;
  --ox-50: #22100f; --ox-100: #2c1312; --ox-200: #5c1d1a; --ox-500: #ff6a62; --ox-700: #ff8c86;
  --olive: #33c98c; --olive-100: #10261d; --olive-200: #1b4734; --done: #33c98c; --doing: #ff6a62;
  --sig-no: #ff5a50; --sig-doing: #ff8c86; --sig-ok: #33c98c; --sig-ink: #dedee6; --sig-mid: #a9a9b6; --sig-faint: #7c7c8c; --sig-stone: #44444f;
  --person-1: #f2f2f5; --person-2: #cfcfd8; --person-3: #ababb7; --person-4: #8a8a98; --person-ink: #0e0e13;
  --fx-pos: #33c98c; --fx-neg: #ff5a50;
  background: var(--paper);
}
body.mode-dark.huntress {
  --paper: #110a19; --panel: #1b1226; --panel-2: #24192f; --line: #3a2b4c; --stone: #574a6a;
  --ink: #f4eefa; --ink-2: #e2d8ee; --ink-soft: #c6b8d8; --ink-faint: #998bae; --hunt-ink: #f4eefa;
  --accent: #9b35d6; --accent-ink: #ffffff;
  --ox-50: #1f1229; --ox-100: #281634; --ox-200: #4b2763; --ox-500: #cf94f2; --ox-700: #ddb0f7;
  --olive: #a6cf6a; --olive-100: #1b2414; --olive-200: #344a22; --done: #a6cf6a; --doing: #cf94f2;
  --sig-no: #d39af5; --sig-doing: #ddb0f7; --sig-ok: #a6cf6a; --sig-ink: #e2d8ee; --sig-mid: #b3a6c6; --sig-faint: #8b7d9f; --sig-stone: #4d4060;
  --person-1: #f1e9fa; --person-2: #d6c8e8; --person-3: #b7a6cd; --person-4: #9a87b3; --person-ink: #110a19;
  --fx-pos: #a6cf6a; --fx-neg: #d39af5;
  background: var(--paper);
}
body.acid.mode-light {
  --paper: #f5f3f0; --panel: #ffffff; --panel-2: #f2eff3; --line: #dedae3; --stone: #b8b4bf;
  --ink: #0d0b11; --ink-2: #24222a; --ink-soft: #3d3a45; --ink-faint: #6e6b78;
  --accent: #c8266f; --accent-ink: #ffffff;
  --ox-50: #fdf1f6; --ox-100: #fbe3ee; --ox-200: #f3b9d3; --ox-500: #b23a74; --ox-700: #9a1f57;
  --olive: #0f8a5f; --olive-100: #e1f4ec; --olive-200: #b2e0cd; --done: #0f8a5f; --doing: #b23a74;
  --sig-no: #c8266f; --sig-doing: #b23a74; --sig-ok: #0f8a5f; --sig-ink: #24222a; --sig-mid: #55525d; --sig-faint: #6e6b78; --sig-stone: #c9c5cf;
  --person-1: #0d0b11; --person-2: #2c2a33; --person-3: #46434e; --person-4: #5e5b67; --person-ink: #ffffff;
  --shadow: 0 1px 2px rgba(13,11,17,.06), 0 8px 24px rgba(13,11,17,.07);
  --fx-pos: #0f8a5f; --fx-neg: #c8266f;
  background: var(--paper); color: var(--ink); color-scheme: light;
}
/* The light/dark switch sits under the style switch in the sidebar. */
.mode-switch { margin-top: 6px; } .mode-switch .ms-ic { width: 18px; text-align: center; } .mode-switch .ms-l { flex: 1; text-align: left; }
/* Dark-mode fixes the ACID rules don't cover (from the audit, 5 Oct 2026). Same selectors serve ACID's light version where they apply. */
body.mode-dark td.cell, body.mode-dark tr.row-open td { color: var(--ink); }
body.mode-dark td.cell a, body.mode-dark .reg a, body.mode-dark .main-badge { color: var(--ox-500); }
body.mode-dark .spill.s-not-allowed { color: var(--sig-no); }
body.mode-dark .sample-tag { color: var(--ink); background: var(--panel-2); }
body.mode-dark .gtab-n, body.mode-dark .soc-pill.s-none, body.mode-dark .soc-pill.s-off, body.mode-dark .art-addin, body.mode-dark .pf-st.st-idle { color: var(--ink-soft); }
body.mode-dark .pf-health { color: var(--ink-soft); }
body.mode-dark .pf-st.st-late, body.mode-dark .pf-st.st-stuck, body.mode-dark .wl-stuck { color: var(--sig-no); }
/* Selected (inverse) chips and tabs: light chip, dark text */
body.mode-dark :is(.tb-p, .cat-chip, .fin-tab, .seg-b, .tax-ent, .view-tab).on, body.mode-dark .art-ratio { color: var(--paper); }
body.mode-dark .tb-p.on .art-n { color: color-mix(in srgb, var(--paper) 75%, transparent); }
body.mode-dark .tax-seg .tax-ent.on b, body.mode-dark .tax-seg .tax-ent.on small { color: var(--paper); }
/* Status fills are lighter in the dark, so their text goes dark */
body.mode-dark .st-pill, body.mode-dark .m-cell:not(.m-blank):not(.m-dark), body.mode-dark .ct-prio { color: var(--paper); }
body.mode-dark .battery .bt-todo, body.mode-dark .pf-bt > span, body.mode-dark .tlx-bar.narrow { background: var(--stone); }
body.mode-dark .tlx-out { color: var(--ink-soft); }
/* Example data stays obvious: amber on dark */
body.mode-dark .mock, body.mode-dark .mock-chip, body.mode-dark .tx-owners.mock li b, body.mode-dark .tx-owners.mock .tx-share { color: #ffd97a; background: rgba(217, 164, 0, .18); }
body.mode-dark .mock-bar { background: rgba(217, 164, 0, .12); color: var(--ink); border-color: rgba(217, 164, 0, .35); }
/* The sidebar is dark in every look; its own light text stays light */
body.mode-dark .side-foot .who-name, body.mode-dark .foot-links .signout b, body.mode-dark #nav-projects .proj-name { color: var(--ink-soft); }
body.mode-dark .nav-item.add, body.mode-dark .nav-item.add span { color: var(--ink-faint); }
body.mode-dark .m-cell.m-dark, body.mode-dark .m-cell.p-high { color: var(--ink); }
body.mode-dark .foot-links .signout b, body.mode-dark .side-foot .signout b { color: var(--ink-soft) !important; }
body.mode-dark tr td.cell, body.mode-dark tr.row-open td.cell { color: var(--ink) !important; }
body.mode-dark .sample-tag, body.mode-dark .mock, body.mode-dark dd .mock { color: #ffd97a !important; }
body.mode-dark .gtab:not(.on) .gtab-n { color: var(--ink); }
body.mode-dark .tlx-out { color: var(--ink) !important; }
body.mode-dark .main-badge { color: var(--paper) !important; background: var(--ox-500) !important; }
body.mode-dark .ct-prio { color: #14110e !important; }
/* Status cells: text colour chosen from each style's measured fill (light fill → dark text, dark fill → light text). */
body.mode-dark .m-cell.m-dark, body.mode-dark .m-cell.p-high { color: var(--ink) !important; }
body.mode-dark:not(.f1):not(.huntress) .m-cell:is(.s-doing, .p-normal) { color: var(--paper) !important; }
body.mode-dark.f1 .m-cell:not(.m-blank), body.mode-dark.huntress .m-cell:not(.m-blank) { color: var(--ink) !important; }
body.acid.mode-light .m-cell:is(.s-doing, .p-normal) { color: #fff !important; } body.acid.mode-light .m-cell.p-high { color: var(--sig-no) !important; } /* ACID's urgent cell is an outline, not a fill */ body.acid.mode-light .m-cell.m-dark { color: var(--ink) !important; }
/* Priority tags: soft tinted chips when the page isn't the default light */
body.mode-dark .ct-prio, body.acid.mode-light .ct-prio { background: color-mix(in srgb, var(--p) 24%, transparent) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p) 55%, transparent); }
body.mode-dark .gtab:not(.on) .gtab-n, body.acid.mode-light .gtab:not(.on) .gtab-n { color: var(--ink) !important; }
/* ACID light: the sidebar stays ACID-dark (as Standard's sidebar is dark in light mode) — its own tokens, scoped */
body.acid.mode-light :is(.side, .mbar, .mtop) { --paper: #0D0B11; --panel: #1B1920; --panel-2: #24222A; --line: #3A3842; --stone: #4a4752; --ink: #F4F3F0; --ink-2: #e4e2e8; --ink-soft: #D4D2DA; --ink-faint: #9A97A3; --accent: #E23C8E; --sig-no: #ff5db1; color: #F4F3F0; }
/* ACID light: pills and marks that ACID colours by hand */
body.acid.mode-light .spill.s-not-allowed { color: #a3134a !important; background: #fde3ee !important; border-color: #f3b9d3 !important; }
body.acid.mode-light .spill[class*="s-ambiguous"] { color: #7a4f00 !important; background: #fff1cc !important; border-color: #f0d68a !important; }
body.acid.mode-light :is(.spill.s-allowed, .spill.s-adult-art-ok, .sup-adult, .soc-pill.s-ok, .fx-mark.green) { color: #0b6b48 !important; background: #e1f4ec !important; border-color: #b2e0cd !important; }
body.acid.mode-light :is(.tlx-dlabel.we, .tcol-h .count, .art-addin, .soc-pill.s-none, .cal-cell.out .cal-dn, .pf-health) { color: var(--ink-soft) !important; }
body.acid.mode-light :is(.pf-st.st-late, .pf-st.st-stuck) { color: var(--sig-no) !important; }
body.acid.mode-light .ct-af { color: #0b6b48 !important; }
body.acid.mode-light .view-tab:not(.on) { color: var(--ink) !important; } body.acid.mode-light .view-tab.on { color: #fff !important; }
body.acid.mode-light .m-pill .m-pl { color: var(--ink) !important; }
body.acid.mode-light .wl-n { background: var(--panel-2) !important; color: var(--ink) !important; }
/* People's colours (Aaron, 5 Oct 2026): one hue per person, the same in every style and mode, white initials ≥ 4.5:1.
   Aaron blue · Colin ochre · Niki magenta · Rebellion slate. No green — green only ever means an erotic-art yes. */
body, body.f1, body.huntress, body.acid, body.mode-dark, body.mode-dark.f1, body.mode-dark.huntress, body.acid.mode-light {
  --person-1: #2b5fc4; --person-2: #8f6100; --person-3: #9c2f94; --person-4: #4e5866; --person-ink: #ffffff; } /* Colin ochre, not rust: reads as a person, not as Urgent */
/* ==== Projects: the big ＋ Add and the notebook (Aaron, 5 Oct 2026: "the lot" — files, notes & decisions, milestones, budget) ==== */
.pa-bar { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; margin: 4px 0 18px; }
.pa-wrap { position: relative; }
.pa-btn { font-size: 17px; padding: 12px 26px; min-height: 48px; letter-spacing: .01em; }
.pa-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: min(340px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: grid; gap: 2px; }
.pa-menu[hidden] { display: none; }
.pa-item { display: flex; align-items: flex-start; gap: 12px; text-align: left; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; }
.pa-item:hover, .pa-item:focus-visible { background: var(--panel-2); outline: none; }
.pa-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.pa-ico { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: var(--panel-2); color: var(--ink); font-size: 15px; }
.pa-txt { display: grid; gap: 1px; } .pa-txt b { font-weight: 600; } .pa-txt small { color: var(--ink-faint); font-size: 12.5px; line-height: 1.35; }
.pa-people { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.pa-person { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.pa-person .ini { width: 24px; height: 24px; font-size: 10.5px; }
.nb-card .nb-tabs { margin-bottom: 14px; }
.nb-tabs .gtab-l { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; }
.nb-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.nb-hint { font-size: 12.5px; color: var(--ink-faint); }
.nb-empty { padding: 18px 0 6px; }
.nb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nb-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.nb-row.is-next { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.nb-row.is-done .nb-title { text-decoration: line-through; color: var(--ink-faint); }
.nb-open { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; text-align: left; background: none; border: 0; padding: 4px 0; font: inherit; color: var(--ink); cursor: pointer; }
.nb-open:hover .nb-title, .nb-open:focus-visible .nb-title { text-decoration: underline; }
.nb-date { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 84px; }
.nb-title { font-weight: 500; overflow-wrap: anywhere; }
.nb-meta { font-size: 12.5px; color: var(--ink-faint); }
.nb-ini { width: 24px; height: 24px; font-size: 10.5px; flex: 0 0 auto; }
.nb-check { flex: 0 0 auto; }
.nb-notes { gap: 8px; }
.nb-note { display: grid; gap: 6px; text-align: left; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.nb-note:hover, .nb-note:focus-visible { border-color: var(--ink-faint); }
.nb-note.is-dec { box-shadow: inset 3px 0 0 var(--ink); }
.nb-nh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .nb-nh .nb-ini { margin-left: auto; }
.nb-nb { white-space: pre-wrap; color: var(--ink-soft); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nb-tag { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--ink); color: var(--paper); }
.nb-tag-note { background: var(--panel-2); color: var(--ink-soft); }
.nb-tot { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 14px; margin-bottom: 10px; border-radius: 10px; background: var(--panel-2); }
.nb-tot b { font-size: 18px; font-variant-numeric: tabular-nums; margin-right: 14px; }
.nb-tl { font-size: 12.5px; color: var(--ink-faint); }
.nb-table { display: grid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.nb-tr { display: grid; grid-template-columns: minmax(0, 1fr) 96px 130px 96px; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--panel); }
.nb-tr:first-child { border-top: 0; }
.nb-th { background: var(--panel-2); font-size: 12px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.nb-num { text-align: right; font-variant-numeric: tabular-nums; }
.nb-ct { padding: 2px 0; }
.nb-st { font: inherit; font-size: 12.5px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-soft); cursor: pointer; }
.nb-st.paid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.nb-st:disabled { cursor: default; }
.nb-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.nb-by { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 0; }
.nb-remove { margin-left: auto; color: var(--ink-faint); }
.att-folder { max-width: 180px; }
.att-fh { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 14px 0 6px; }
.att-mvbox { flex-basis: 100%; display: flex; gap: 6px; margin-top: 8px; } .att-mvbox .minput { margin: 0; flex: 1; }
.attach-card:has(.att-mvbox) { flex-wrap: wrap; } /* wrap only while the folder picker is open */
.tlx-mark { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--ink); z-index: 2; pointer-events: none; }
.tlx-mark.done { opacity: .45; }
.tlx-flag { position: absolute; top: 2px; left: 2px; white-space: nowrap; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 4px; background: var(--ink); color: var(--paper); pointer-events: auto; }
@media (max-width: 700px) {
  .pa-bar { gap: 12px; } .pa-wrap, .pa-btn { width: 100%; } .pa-menu { width: 100%; }
  .nb-tr { grid-template-columns: minmax(0, 1fr) auto; } .nb-th { display: none; }
  .nb-tr > :nth-child(2) { grid-column: 1; grid-row: 2; } .nb-tr > :nth-child(3) { grid-column: 2; grid-row: 1; } .nb-tr > :nth-child(4) { grid-column: 2; grid-row: 2; justify-self: end; }
  .nb-2col { grid-template-columns: 1fr; } .att-folder { max-width: none; flex: 1 1 100%; }
  .nb-date { min-width: 0; }
}
/* Audit fixes, 5 Oct round 3 (measured): active-tab counts, ACID-light greens and quiet chips. */
body.mode-dark .gtab.on .gtab-n, body.acid.mode-light .gtab.on .gtab-n { background: rgba(0, 0, 0, .22); color: #fff; }
body.acid.mode-light { --olive: #0b6b48; --sig-ok: #0b6b48; --done: #0b6b48; --fx-pos: #0b6b48; --sig-no: #b51f5f; }
body.acid.mode-light :is(.pf-st.st-idle, .soc-pill.s-off, .soc-pill.s-none) { color: var(--ink-soft) !important; }
/* The generated rule copies ACID's dark-on-lime active item; in the dark modes the active item sits on a dark panel. */
body.mode-dark :is(.side, #nav) .nav-item.active { color: var(--ink) !important; }
body.mode-dark :is(.side, #nav) .nav-item.active .swatch { outline-color: var(--ink); }
/* ACID's own look had your name and the Layout word in near-black on its black sidebar (since before 5 Oct) — readable now. */
body.acid:not(.mode-light) .side-foot .who-name, body.acid:not(.mode-light) .foot-links .signout b { color: var(--ink-soft) !important; }
/* ==== Several pictures per artwork (Aaron, 5 Oct 2026, Colin's sculptures): carousel thumbs, picture manager, PDF extra views ==== */
.art-car { position: relative; }
.art-car img { width: 100%; height: 100%; object-fit: cover; }
.car-b { position: absolute; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(13, 11, 17, .62); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; z-index: 2; user-select: none; border: 0; padding: 0; font-family: inherit; }
.car-p { left: 4px; } .car-n { right: 4px; }
.art-car:hover .car-b, .art-car:focus-within .car-b, .car-b:focus-visible { opacity: 1; }
.car-b:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@media (hover: none) { .art-thumb.big .car-b { opacity: .9; } }
.art-thumb:not(.big) .car-b { width: 18px; height: 18px; font-size: 13px; }
.car-c { position: absolute; right: 4px; bottom: 4px; font-size: 10.5px; font-weight: 600; padding: 1px 5px; border-radius: 4px; background: rgba(13, 11, 17, .62); color: #fff; z-index: 2; pointer-events: none; }
.art-thumb:not(.big) .car-c { font-size: 9px; padding: 0 3px; right: 2px; bottom: 2px; }
.art-pics { margin-top: 12px; }
.ap-hint { font-weight: 400; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.ap-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ap-pic { position: relative; margin: 0; width: 112px; height: 112px; border-radius: 8px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); }
.ap-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-pic:first-child { outline: 2px solid var(--accent); outline-offset: 1px; }
.ap-ext { position: absolute; left: 4px; top: 4px; font-size: 10px; padding: 1px 5px; border-radius: 4px; background: rgba(13, 11, 17, .7); color: #fff; }
.ap-acts { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 4px; background: linear-gradient(transparent, rgba(13, 11, 17, .7)); }
.ap-b { width: 26px; height: 26px; border-radius: 6px; border: 0; background: rgba(255, 255, 255, .92); color: #0d0b11; font-size: 14px; cursor: pointer; }
.ap-b:disabled { opacity: .35; cursor: default; } .ap-b:focus-visible { outline: 2px solid var(--accent); }
.ap-add { width: 112px; height: 112px; border-radius: 8px; border: 1.5px dashed var(--stone); display: grid; place-content: center; text-align: center; gap: 2px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }
.ap-add span { font-size: 22px; color: var(--ink); } .ap-add:hover, .ap-add:focus-within { border-color: var(--ink); color: var(--ink); }
.pdoc-eq .eq-desc { font-size: 10pt; line-height: 1.5; margin: 0 0 4mm; }
.pdoc-eq .eq-img { align-self: start; min-height: 0; }
.pdoc-eq .eq-facts { grid-column: 1 / -1; margin: 0; padding-top: 3mm; border-top: 0.3mm solid #ddd; display: grid; grid-template-columns: 1fr 1fr; gap: 2mm 8mm; }
.pdoc-eq .eq-facts div { grid-template-columns: 30mm 1fr; } .pdoc-eq .eq-facts .eq-wide { grid-column: 1 / -1; } /* long values (materials) get the full width; short ones pair up above */ .pdoc-eq .eq-facts div:has(dd:not(:empty)) { break-inside: avoid; }
.pdoc-eq .eq-3d .eq-more { margin-top: 2mm; }
body.pa-open #dq-bubble, body.pa-open .dq-bubble { display: none !important; } /* the ＋ Add menu is never covered by the chat bubble */ /* a long description no longer stretches the picture box into black bars */
.pdoc-eq .eq-more { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; }
.pdoc-eq .eq-more img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #0d0d0d; }
@media (max-width: 700px) { .ap-pic, .ap-add { width: 92px; height: 92px; } .art-group:last-of-type .artg { padding-bottom: 76px; } } /* the chat bubble never covers the last row */
/* Grid card with several pictures: the arrows sit beside the card button (no buttons inside buttons), over the picture. */
.artg-cw { position: relative; min-width: 0; } .artg-cw > .artg-card { width: 100%; }
.artg-cw > .car-b { border: 0; padding: 0; font: inherit; font-size: 17px; } /* the card is square, so 50% is the picture's middle */
.artg-cw > .car-c { top: 6px; bottom: auto; right: 6px; }
@media (hover: none) { .artg-cw > .car-b, .art-thumb:not(.big) .car-b { display: none; } } /* touch: swipe the picture; the arrows would sit on the artwork */
.artg-cw:hover > .car-b, .artg-cw:focus-within > .car-b { opacity: 1; }
/* ⚑ To check (Aaron, 5 Oct 2026: mark name discrepancies and missing prices on Colin's pieces). Amber — never green. */
.art-flag { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 99px; background: #fff1cc; color: #6b4a00; border: 1px solid #e8c46a; white-space: nowrap; }
.artg-flag { font-style: normal; color: #8a5f00; margin-right: 4px; }
.ad-flag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; margin-bottom: 12px; border-radius: 10px; background: #fff7e0; border: 1px solid #e8c46a; color: #4a3300; font-size: 13.5px; line-height: 1.45; }
.ad-flag span { flex: 1 1 300px; } .ad-flag b { color: #6b4a00; }
body.mode-dark .art-flag, body.acid:not(.mode-light) .art-flag { background: rgba(255, 217, 122, .14); color: #ffd97a; border-color: rgba(255, 217, 122, .45); }
body.mode-dark .artg-flag, body.acid:not(.mode-light) .artg-flag { color: #ffd97a; }
body.mode-dark .ad-flag, body.acid:not(.mode-light) .ad-flag { background: rgba(255, 217, 122, .1); border-color: rgba(255, 217, 122, .4); color: var(--ink); }
body.mode-dark .ad-flag b, body.acid:not(.mode-light) .ad-flag b { color: #ffd97a; }
/* ==== Private Sales: type where you are (Aaron, 5 Oct 2026) — inline step notes and links, stage details, stage notes ==== */
.ps-sedit { margin: 6px 0 2px; } .ps-sedit[hidden] { display: none; }
.ps-snote { width: 100%; min-height: 44px; resize: vertical; font-size: 14px; line-height: 1.45; }
.ps-stfields { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.ps-stnote { display: block; margin-top: 14px; } .ps-stnote textarea { width: 100%; min-height: 56px; resize: vertical; }
.ps-tmpl.ok { cursor: pointer; }
.ps-same { font-weight: 400; text-transform: none; letter-spacing: 0; }
@media (max-width: 700px) { .ps-stage { padding-bottom: 84px; } } /* the chat bubble never covers the stage's last line */
.lt-fromsale { font-size: 13px; color: var(--ink-soft); background: var(--panel-2); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
/* ==== Sales hub (Aaron, 5 Oct 2026 — layout approved) ==== */
.sh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 16px; }
.sh-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.sh-tiles { align-items: start; } .sh-row.sh-h > span { white-space: nowrap; }
.sh-tile b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .sh-tile span { font-size: 12.5px; color: var(--ink-faint); }
.sh-tile .sh-cur { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-faint); }
.sh-links { font-size: 13px; color: var(--ink-faint); margin: 0 0 6px; } .sh-links .linkbtn.on { color: var(--ink); text-decoration: underline; }
.sh-x { border: 0; background: none; color: var(--ink-faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 4px; opacity: .45; }
.sh-row:hover .sh-x, .sh-x:focus-visible { opacity: 1; } .sh-x:hover { color: var(--ink); background: var(--panel-2); }
@media (hover: none) { .sh-x { opacity: .8; } }
.sh-list { padding-bottom: 64px; } /* the chat button never covers the last row */
.sh-tabs { margin-bottom: 14px; }
.sh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.sh-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.sh-search { flex: 1 1 200px; min-width: 0; } .sh-range { width: auto; }
.sh-secacts { font-size: 13px; color: var(--ink-faint); margin: 4px 0 8px; }
.sh-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 110px 96px 104px 22px; gap: 10px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--line); font-size: 14px; cursor: pointer; border-radius: 6px; }
.sh-row:hover, .sh-row:focus-visible { background: var(--panel-2); outline: none; }
.sh-row.sh-h { cursor: default; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); border-top: 0; } .sh-row.sh-h:hover { background: none; }
.sh-w { min-width: 0; overflow-wrap: anywhere; } .sh-w small { color: var(--ink-faint); margin-left: 4px; }
.sh-d, .sh-ch { color: var(--ink-soft); font-size: 13px; }
.sh-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.sh-sec { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 99px; background: var(--panel-2); color: var(--ink-soft); white-space: nowrap; }
.sh-sec.sh-none { background: transparent; border: 1px dashed var(--stone); color: var(--ink-faint); }

.sh-month { display: flex; justify-content: space-between; margin: 16px 4px 2px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.sh-hint { font-size: 12.5px; color: var(--ink-faint); margin: 14px 0 0; }
.sh-side h3 { margin: 0 0 10px; } .sh-side h3 + .sh-bysec { margin-top: 0; } .sh-side .sh-conn + h3 { margin-top: 18px; }
.sh-conn { display: grid; gap: 10px; } .sh-ci { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; }
.sh-ci b { display: block; margin-bottom: 2px; } .sh-ci small { color: var(--ink-soft); display: block; }
.sh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; border: 1.5px solid var(--stone); vertical-align: 1px; } .sh-dot.on { background: var(--ink); border-color: var(--ink); }
.sh-bysec { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .sh-bysec li { display: flex; justify-content: space-between; font-size: 14px; } .sh-bysec b { font-variant-numeric: tabular-nums; }
.sh-tile b { font-size: clamp(18px, 1.9vw, 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1280px) { .sh-grid { grid-template-columns: 1fr; } .sh-conn { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } /* below the list, the connection cards spread across */ /* the list gets the full width; connections sit below */
@media (max-width: 900px) { .sh-tiles { grid-template-columns: 1fr 1fr; } }
/* Compact rows whenever the list itself is narrow (phone, tablet, or a laptop with the sidebar open): what sold + amount on top;
   date, sold-through and section underneath. A container query, so it follows the list's width, not the screen's. */
.sh-list { container-type: inline-size; min-width: 0; }
@container (max-width: 560px) {
  .sh-row { grid-template-columns: minmax(0, 1fr) auto 24px; row-gap: 3px; }
  .sh-row.sh-h { display: none; }
  .sh-row > .sh-w { grid-column: 1; grid-row: 1; } .sh-row > .sh-amt { grid-column: 2; grid-row: 1; } .sh-row > :last-child { grid-column: 3; grid-row: 1; }
  .sh-row > .sh-d { grid-column: 1; grid-row: 2; font-size: 12.5px; } .sh-row > .sh-ch { grid-column: 2 / 4; grid-row: 2; text-align: right; font-size: 12.5px; }
  .sh-row > :nth-child(3) { grid-column: 1 / 4; grid-row: 3; }
}
@supports not (container-type: inline-size) { @media (max-width: 640px) { /* older browsers: the same compact rows on phones */
  .sh-row { grid-template-columns: minmax(0, 1fr) auto 24px; row-gap: 3px; } .sh-row.sh-h { display: none; }
  .sh-row > .sh-w { grid-column: 1; grid-row: 1; } .sh-row > .sh-amt { grid-column: 2; grid-row: 1; } .sh-row > :last-child { grid-column: 3; grid-row: 1; }
  .sh-row > .sh-d { grid-column: 1; grid-row: 2; } .sh-row > .sh-ch { grid-column: 2 / 4; grid-row: 2; text-align: right; } .sh-row > :nth-child(3) { grid-column: 1 / 4; grid-row: 3; } } }
@media (max-width: 700px) {
  .sh-tabs { display: flex !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; } /* one row of chips that scrolls sideways */
  .sh-tabs::-webkit-scrollbar { display: none; } .sh-tabs .gtab { flex: 0 0 auto; width: auto; }
  .sh-tile { padding: 10px 12px; } .sh-tiles { gap: 8px; }
  .sh-list { padding-bottom: 84px; }
}
/* ==== My Art valuation at list price (Aaron, 5 Oct 2026) — owner only ==== */
.art-val { margin: 0 0 16px; padding: 0; }
.art-val > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 18px; }
.art-val > summary::-webkit-details-marker { display: none; }
.art-val > summary { position: relative; padding-right: 42px; } .art-val > summary::after { content: "▾"; position: absolute; right: 18px; top: 14px; color: var(--ink-faint); } .art-val[open] > summary::after { content: "▴"; }
.av-k { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.av-sum { font-size: 15px; } .av-sum b { font-variant-numeric: tabular-nums; } .av-hint { font-size: 12.5px; color: var(--ink-faint); }
.av-body { padding: 0 18px 16px; }
.av-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.av-t { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.av-t > span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; }
.av-t p { margin: 2px 0; font-size: 13.5px; color: var(--ink-soft); } .av-t p b { color: var(--ink); font-variant-numeric: tabular-nums; } .av-t .av-s { font-size: 12.5px; color: var(--ink-faint); }
.av-tw { overflow-x: auto; } .av-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .av-table th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); padding: 6px 4px; border-bottom: 1px solid var(--line); }
.av-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); } .av-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-note { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 0; line-height: 1.5; }
.av-line { font-size: 13px; color: var(--ink-soft); margin: 2px 0 8px; } .av-line b { color: var(--ink); font-variant-numeric: tabular-nums; } .av-line span { color: var(--ink-faint); font-size: 12px; }
.av-piece { margin: 10px 0 6px; }
@media (max-width: 700px) { .av-table tr > :nth-child(2) { display: none; } .av-tiles { grid-template-columns: 1fr; } .av-body { padding: 0 14px 14px; } .art-val > summary { padding: 12px 14px; } }
/* Website connection sheet (v60) */
.wc-dl { display: grid; gap: 10px; margin: 12px 0; } .wc-dl div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; } .wc-dl dt { font-size: 12.5px; color: var(--ink-faint); } .wc-dl dd { margin: 0; overflow-wrap: anywhere; }
.wc-dl code { font-size: 12.5px; background: var(--panel-2); padding: 2px 6px; border-radius: 4px; } .wc-key { display: inline-block; margin-bottom: 6px; word-break: break-all; }
.wc-h { margin: 16px 0 6px; font-size: 14px; } .wc-res { font-size: 13.5px; color: var(--ink-soft); min-height: 1.2em; }
.wc-ev { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13px; } .wc-ev small { color: var(--ink-faint); }
.wc-s { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--panel-2); color: var(--ink-soft); } .wc-s.wc-refused { color: var(--sig-no); }
@media (max-width: 700px) { .wc-dl div { grid-template-columns: 1fr; gap: 2px; } }
/* ==== Materials & stones (v61) — jewellery-grade detail for sculpture, chess sets, jewellery ==== */
.art-spec { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.sp-sum { margin: 2px 0 8px; font-size: 13.5px; color: var(--ink-soft); } .sp-sum span { white-space: nowrap; }
.sp-hint { font-weight: 400; text-transform: none; letter-spacing: 0; } .sp-more { flex-basis: 100%; } .sp-more > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-faint); } .sp-in { background: none; padding: 6px 0 0; }
.sp-top { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 6px 0; }
.sp-l { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); } .sp-dims { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-faint); }
.sp-h { margin: 12px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.sp-list { display: grid; gap: 6px; }
.sp-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-end; padding: 8px; border-radius: 8px; background: var(--panel-2); }
.sp-f { display: flex; flex-direction: column; gap: 2px; } .sp-f > span { font-size: 11px; color: var(--ink-faint); } .sp-f.sp-wide { flex: 1 1 260px; } .sp-f.sp-wide .minput { width: 100%; }
.sp-gap { width: 16px; } .sp-top { align-items: flex-end; }
.art-spec .minput { width: auto; min-width: 0; padding: 6px 8px; font-size: 13px; } .art-spec select.minput { max-width: 160px; }
.art-spec .sp-n .minput { width: 84px; } .art-spec .sp-m .minput { width: 130px; } .art-spec .sp-w .minput { width: 190px; }
.sp-x { border: 0; background: none; color: var(--ink-faint); font-size: 16px; cursor: pointer; margin-left: auto; } .sp-x:hover { color: var(--ink); }
@media (max-width: 700px) { .art-spec .sp-m, .art-spec .sp-w { flex: 1 1 100%; } .art-spec .sp-m .minput, .art-spec .sp-w .minput { width: 100%; } .art-spec .sp-f:has(select) { flex: 1 1 45%; } .art-spec .sp-f select.minput { max-width: none; width: 100%; } }
/* MODE-GEN START — generated by scripts/gen-mode-css.py from ACID's colour rules; don't edit by hand */
body.mode-dark, body.acid.mode-light { background: var(--paper); color: var(--ink); }
body.mode-dark .main, body.acid.mode-light .main { background: transparent; }
body.mode-dark .dev-note, body.acid.mode-light .dev-note { background: var(--panel-2); color: var(--ink-faint); }
body.mode-dark .side, body.mode-dark .mbar, body.acid.mode-light .side, body.acid.mode-light .mbar { background: var(--paper); border-color: var(--panel-2); }
body.mode-dark .nav-item.active, body.acid.mode-light .nav-item.active { background: var(--panel-2); color: var(--ink); box-shadow: inset 4px 0 0 var(--accent); }
body.mode-dark .nav-item:hover, body.acid.mode-light .nav-item:hover { background: var(--panel); color: var(--ink); }
body.mode-dark .eyebrow, body.mode-dark .nav-label, body.mode-dark .tp-sec, body.mode-dark .sheet-label, body.acid.mode-light .eyebrow, body.acid.mode-light .nav-label, body.acid.mode-light .tp-sec, body.acid.mode-light .sheet-label { color: var(--ink-faint); }
body.mode-dark .card, body.mode-dark .modal, body.mode-dark .tp, body.mode-dark .tcard, body.mode-dark .art-row, body.mode-dark .m-table, body.mode-dark .pf-table, body.mode-dark .pf-card2, body.mode-dark .pf-card, body.mode-dark .sheet-list, body.mode-dark .sheet-row, body.mode-dark .soc, body.mode-dark .soc-access, body.mode-dark .orgcard, body.mode-dark .qa2-added li, body.mode-dark .tp-bubble, body.mode-dark .tp-cbox, body.mode-dark .email-hint, body.mode-dark .arch-proj, body.mode-dark .prog-card, body.mode-dark .stat, body.mode-dark .fin-tile, body.mode-dark .member-card, body.acid.mode-light .card, body.acid.mode-light .modal, body.acid.mode-light .tp, body.acid.mode-light .tcard, body.acid.mode-light .art-row, body.acid.mode-light .m-table, body.acid.mode-light .pf-table, body.acid.mode-light .pf-card2, body.acid.mode-light .pf-card, body.acid.mode-light .sheet-list, body.acid.mode-light .sheet-row, body.acid.mode-light .soc, body.acid.mode-light .soc-access, body.acid.mode-light .orgcard, body.acid.mode-light .qa2-added li, body.acid.mode-light .tp-bubble, body.acid.mode-light .tp-cbox, body.acid.mode-light .email-hint, body.acid.mode-light .arch-proj, body.acid.mode-light .prog-card, body.acid.mode-light .stat, body.acid.mode-light .fin-tile, body.acid.mode-light .member-card { background: var(--panel) !important; border-color: var(--line) !important; color: var(--ink); box-shadow: none !important; }
body.mode-dark .tcol, body.mode-dark .pf-col, body.acid.mode-light .tcol, body.acid.mode-light .pf-col { background: color-mix(in srgb, var(--panel) 60%, var(--paper)) !important; }
body.mode-dark .m-head, body.mode-dark .soc-headrow, body.mode-dark .pf-head, body.mode-dark .art-row.is-sample, body.mode-dark .soc-row.is-empty, body.acid.mode-light .m-head, body.acid.mode-light .soc-headrow, body.acid.mode-light .pf-head, body.acid.mode-light .art-row.is-sample, body.acid.mode-light .soc-row.is-empty { background: var(--panel-2) !important; }
body.mode-dark .m-row.task:hover, body.mode-dark .sheet-row:hover, body.mode-dark .pf-row:not(.pf-head):hover, body.mode-dark .art-c:hover, body.acid.mode-light .m-row.task:hover, body.acid.mode-light .sheet-row:hover, body.acid.mode-light .pf-row:not(.pf-head):hover, body.acid.mode-light .art-c:hover { background: var(--panel-2) !important; }
body.mode-dark input, body.mode-dark select, body.mode-dark textarea, body.mode-dark .minput, body.mode-dark .art-pin, body.mode-dark .art-xin, body.mode-dark .tb-search, body.mode-dark .qa2-input, body.acid.mode-light input, body.acid.mode-light select, body.acid.mode-light textarea, body.acid.mode-light .minput, body.acid.mode-light .art-pin, body.acid.mode-light .art-xin, body.acid.mode-light .tb-search, body.acid.mode-light .qa2-input { background: var(--panel-2) !important; color: var(--ink) !important; border-color: var(--line) !important; }
body.mode-dark input::placeholder, body.mode-dark textarea::placeholder, body.acid.mode-light input::placeholder, body.acid.mode-light textarea::placeholder { color: var(--ink-faint); }
body.mode-dark .chip, body.mode-dark .ctl-chip, body.mode-dark .tb-p, body.mode-dark .cat-chip, body.mode-dark .view-tab, body.mode-dark .art-st, body.mode-dark .art-fbtn, body.mode-dark .soc-tog, body.acid.mode-light .chip, body.acid.mode-light .ctl-chip, body.acid.mode-light .tb-p, body.acid.mode-light .cat-chip, body.acid.mode-light .view-tab, body.acid.mode-light .art-st, body.acid.mode-light .art-fbtn, body.acid.mode-light .soc-tog { background: var(--panel-2); border-color: var(--line); color: var(--ink-soft); }
body.mode-dark .tb-p.on, body.mode-dark .view-tab.on, body.mode-dark .cat-chip.on, body.acid.mode-light .tb-p.on, body.acid.mode-light .view-tab.on, body.acid.mode-light .cat-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body.mode-dark .btn, body.acid.mode-light .btn { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
body.mode-dark .btn.primary, body.mode-dark .side-add, body.mode-dark .art-new, body.mode-dark .mbar .mbar-plus, body.acid.mode-light .btn.primary, body.acid.mode-light .side-add, body.acid.mode-light .art-new, body.acid.mode-light .mbar .mbar-plus { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-ink) !important; }
body.mode-dark .btn.primary:hover, body.mode-dark .side-add:hover, body.acid.mode-light .btn.primary:hover, body.acid.mode-light .side-add:hover { background: var(--sig-no) !important; }
body.mode-dark .btn.ghost, body.acid.mode-light .btn.ghost { background: transparent; }
body.mode-dark .linkbtn, body.acid.mode-light .linkbtn { color: var(--ink-faint); }
body.mode-dark .linkbtn:hover, body.acid.mode-light .linkbtn:hover { color: var(--ink); background: var(--panel-2); }
body.mode-dark .rowacts .linkbtn.del, body.acid.mode-light .rowacts .linkbtn.del { color: var(--sig-doing); }
body.mode-dark .task, body.acid.mode-light .task { border-color: var(--panel-2); }
body.mode-dark .check, body.mode-dark .m-check, body.mode-dark .tc-check, body.acid.mode-light .check, body.acid.mode-light .m-check, body.acid.mode-light .tc-check { background: transparent; border-color: var(--ink-faint); }
body.mode-dark .st-pill.st-todo, body.mode-dark .st-pill.st-todo:not(.on), body.acid.mode-light .st-pill.st-todo, body.acid.mode-light .st-pill.st-todo:not(.on) { background: var(--line); color: var(--ink); }
body.mode-dark .tp-status .st-pill:not(.on), body.acid.mode-light .tp-status .st-pill:not(.on) { background: var(--panel-2) !important; }
body.mode-dark .art-v, body.mode-dark .art-title, body.mode-dark .art-gh h3, body.mode-dark .pf-name b, body.mode-dark .soc-name, body.mode-dark .soc-acc a, body.mode-dark .tc-title, body.mode-dark .m-tt, body.acid.mode-light .art-v, body.acid.mode-light .art-title, body.acid.mode-light .art-gh h3, body.acid.mode-light .pf-name b, body.acid.mode-light .soc-name, body.acid.mode-light .soc-acc a, body.acid.mode-light .tc-title, body.acid.mode-light .m-tt { color: var(--ink); }
body.mode-dark .art-l, body.mode-dark .art-sub, body.mode-dark .pf-name small, body.mode-dark .art-count, body.acid.mode-light .art-l, body.acid.mode-light .art-sub, body.acid.mode-light .pf-name small, body.acid.mode-light .art-count { color: var(--ink-faint); }
body.mode-dark .art-thumb, body.mode-dark .pf-bar, body.mode-dark .pf-bt, body.mode-dark .tp-bar, body.mode-dark .bar, body.acid.mode-light .art-thumb, body.acid.mode-light .pf-bar, body.acid.mode-light .pf-bt, body.acid.mode-light .tp-bar, body.acid.mode-light .bar { background: var(--panel-2); }
body.mode-dark .toast, body.acid.mode-light .toast { background: var(--ink); color: var(--paper); }
body.mode-dark .toast-btn, body.acid.mode-light .toast-btn { color: var(--accent); }
body.mode-dark .mini-pop, body.acid.mode-light .mini-pop { background: var(--panel); border-color: var(--line); color: var(--ink); }
body.mode-dark .mp-opt, body.acid.mode-light .mp-opt { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
body.mode-dark .art-sample-note, body.acid.mode-light .art-sample-note { background: var(--panel-2); color: var(--sig-doing); }
body.mode-dark .qa2-chip, body.acid.mode-light .qa2-chip { background: var(--ox-100); color: var(--sig-doing); }
body.mode-dark .m-pill, body.acid.mode-light .m-pill { background: var(--line); }
body.mode-dark .m-cell.m-blank:hover, body.acid.mode-light .m-cell.m-blank:hover { background: var(--panel-2); }
body.mode-dark .tc-b.tc-due.over, body.acid.mode-light .tc-b.tc-due.over { color: var(--sig-doing); }
body.mode-dark .nav-item:hover, body.mode-dark .view-tab:hover, body.acid.mode-light .nav-item:hover, body.acid.mode-light .view-tab:hover { box-shadow: inset 3px 0 0 var(--accent); }
body.mode-dark .tc-b.ok, body.acid.mode-light .tc-b.ok { background: var(--olive-100); color: var(--sig-ok); }
body.mode-dark .art-src, body.acid.mode-light .art-src { color: var(--sig-ok); }
body.mode-dark .art-master, body.acid.mode-light .art-master { background: color-mix(in srgb, var(--panel) 60%, var(--paper)); }
body.mode-dark .mb-collage, body.acid.mode-light .mb-collage { background: var(--panel-2); }
body.mode-dark .mb-pin.k-note, body.acid.mode-light .mb-pin.k-note { background: var(--ox-100); border-color: var(--ox-200); }
body.mode-dark .mer-addin, body.acid.mode-light .mer-addin { border-color: var(--line); }
body.mode-dark .sup-row, body.acid.mode-light .sup-row { background: var(--panel); border-color: var(--line); }
body.mode-dark .fx-colbar, body.mode-dark .fx-bt, body.acid.mode-light .fx-colbar, body.acid.mode-light .fx-bt { background: rgba(255, 255, 255, .07); }
body.mode-dark .fx-colbar .run, body.acid.mode-light .fx-colbar .run { background: var(--sig-doing); }
body.mode-dark .fx-colbar .one, body.mode-dark .fx-bt span, body.acid.mode-light .fx-colbar .one, body.acid.mode-light .fx-bt span { background: var(--sig-no); }
body.mode-dark .wl-cell b, body.mode-dark .wl-num, body.mode-dark .wl-n, body.acid.mode-light .wl-cell b, body.acid.mode-light .wl-num, body.acid.mode-light .wl-n { color: var(--ink) !important; border-color: var(--line) !important; }
@media (max-width: 760px) { body.mode-dark .mbar button.on .mi, body.acid.mode-light .mbar button.on .mi { color: var(--accent); } }
body.mode-dark .side, body.acid.mode-light .side { border-right: 1px solid var(--panel-2); }
body.mode-dark .nav-sec-h.nav-label, body.acid.mode-light .nav-sec-h.nav-label { background: var(--panel-2); color: var(--ink) !important; box-shadow: inset 0 -3px 0 var(--sec); }
body.mode-dark .nav-sec.shut > .nav-sec-h, body.acid.mode-light .nav-sec.shut > .nav-sec-h { color: var(--ink-faint) !important; }
body.mode-dark .side .nav-item, body.acid.mode-light .side .nav-item { color: var(--ink-soft); box-shadow: none; }
body.mode-dark .side .nav-item:hover, body.acid.mode-light .side .nav-item:hover { background: var(--panel-2); color: var(--ink); box-shadow: inset 3px 0 0 var(--sec); }
body.mode-dark .side .nav-item.active, body.acid.mode-light .side .nav-item.active { color: var(--paper); }
body.mode-dark .side .nav-item.active .swatch, body.acid.mode-light .side .nav-item.active .swatch { outline: 1px solid var(--paper); }
body.mode-dark .side .nav-item.add, body.acid.mode-light .side .nav-item.add { color: var(--ink-faint); }
body.mode-dark .side .nav-search, body.acid.mode-light .side .nav-search { background: transparent; border: 1.5px solid var(--ink-soft); color: var(--ink); }
body.mode-dark .side .nav-search .nav-ico, body.acid.mode-light .side .nav-search .nav-ico { color: var(--sig-no); }
body.mode-dark .side .nav-search .kbd, body.acid.mode-light .side .nav-search .kbd { border: 1.5px solid var(--ink-faint); color: var(--ink-soft); }
body.mode-dark .side-foot, body.acid.mode-light .side-foot { border-top: 2px solid var(--panel-2); }
body.mode-dark .acid-crumb, body.acid.mode-light .acid-crumb { color: var(--ink-faint); }
body.mode-dark .view-tab.on, body.acid.mode-light .view-tab.on { background: var(--sig-doing) !important; color: var(--paper) !important; border-color: var(--sig-doing) !important; box-shadow: inset 0 -3px 0 var(--sig-no), inset 0 -6px 0 var(--ox-200); }
body.mode-dark .ct-show button.on, body.acid.mode-light .ct-show button.on { background: var(--sig-doing); color: var(--paper); }
body.mode-dark #nav .nav-item.active, body.acid.mode-light #nav .nav-item.active { color: var(--paper); }
body.mode-dark .dc-badge, body.acid.mode-light .dc-badge { border-color: var(--sig-ok); background: transparent; color: var(--ink); }
body.mode-dark .dc-meta, body.acid.mode-light .dc-meta { color: var(--sig-ok); }
body.mode-dark .dc-file, body.acid.mode-light .dc-file { background: var(--sig-ok); color: var(--paper); }
body.mode-dark .ct-af, body.acid.mode-light .ct-af { color: var(--sig-ok); border-color: var(--sig-ok); }
body.mode-dark .dc-cur, body.acid.mode-light .dc-cur { color: var(--sig-ok); }
body.mode-dark .dc-v .linkbtn, body.acid.mode-light .dc-v .linkbtn { color: var(--ink); }
@media (max-width: 760px) { body.mode-dark .mbar button.on .mi-art .ac, body.mode-dark .mbar button.on .mi-art .acs, body.acid.mode-light .mbar button.on .mi-art .ac, body.acid.mode-light .mbar button.on .mi-art .acs { fill: var(--sig-no); stroke: var(--sig-no); } }
@media (max-width: 760px) { body.mode-dark .mbar button.on .mi-art .acs, body.acid.mode-light .mbar button.on .mi-art .acs { fill: none; } }
@media (max-width: 760px) { body.mode-dark .mbar button.on .mi-art .ac2, body.acid.mode-light .mbar button.on .mi-art .ac2 { fill: var(--sig-ok); stroke: var(--sig-ok); } }
@media (max-width: 760px) { body.mode-dark .mbar button.on .mi-art .ac3, body.acid.mode-light .mbar button.on .mi-art .ac3 { fill: var(--sig-doing); stroke: var(--sig-doing); } }
body.mode-dark .mbp-n, body.acid.mode-light .mbp-n { background: transparent; color: var(--sig-ok); border: 1px solid var(--sig-ok); }
body.mode-dark :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill[class*="s-ambiguous"], body.acid.mode-light :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill[class*="s-ambiguous"] { color: var(--sig-doing); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--sig-doing) 45%, transparent); }
body.mode-dark :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill.s-not-allowed, body.acid.mode-light :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill.s-not-allowed { color: var(--sig-no); background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--sig-no) 55%, transparent); }
body.mode-dark .m-cell, body.acid.mode-light .m-cell { color: var(--paper); }
body.mode-dark .m-cell.m-dark, body.acid.mode-light .m-cell.m-dark { color: var(--ink); }
body.mode-dark :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill.s-allowed, body.mode-dark :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill.s-approved-for-us-in-writing, body.acid.mode-light :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill.s-allowed, body.acid.mode-light :is([data-gsec="pay_options"], [data-gsec="book_printers"], [data-gsec="packaging"]) .spill.s-approved-for-us-in-writing { color: var(--sig-ok); background: color-mix(in srgb, var(--sig-ok) 14%, transparent); border-color: color-mix(in srgb, var(--sig-ok) 50%, transparent); }
body.mode-dark .tax-editbtn.primary, body.acid.mode-light .tax-editbtn.primary { background: transparent; color: var(--ink); border: 1px solid var(--ink-soft); box-shadow: none; }
body.mode-dark .m-cell.p-high, body.acid.mode-light .m-cell.p-high { background: transparent !important; color: var(--sig-no); }
body.mode-dark .tlx-bar.overdue, body.acid.mode-light .tlx-bar.overdue { color: var(--paper); }
body.mode-dark :is([data-gsec="book_printers"]) .spill[class*="s-allowed-"], body.acid.mode-light :is([data-gsec="book_printers"]) .spill[class*="s-allowed-"] { color: var(--sig-ok); background: color-mix(in srgb, var(--sig-ok) 14%, transparent); border-color: color-mix(in srgb, var(--sig-ok) 50%, transparent); }
body.mode-dark .tl-logo, body.acid.mode-light .tl-logo { background: var(--ink); }
body.mode-dark .fl-st-ok .fl-n, body.mode-dark .fl-st-ok .fl-state, body.acid.mode-light .fl-st-ok .fl-n, body.acid.mode-light .fl-st-ok .fl-state { color: var(--sig-ok); }
/* MODE-GEN END */

/* ---- BOI application (v62, 5 Oct 2026) ---- */
.boi-bar-top { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.boi-tabs { margin: 0; flex: 1 1 auto; min-width: 0; }
.boi-cat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); } .boi-cat .minput { width: auto; }
.boi-bar { height: 6px; border-radius: 99px; background: var(--panel-2); margin-top: 10px; overflow: hidden; } .boi-bar i { display: block; height: 100%; background: var(--ink); border-radius: inherit; }
.boi-grid { grid-template-columns: minmax(0, 1fr) 320px; }
.boi-grid h3 { margin: 0 0 10px; } .boi-grid h3:not(:first-child) { margin-top: 20px; }
.boi-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.boi-cmp > div { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.boi-cmp .eyebrow { margin: 0 0 6px; } .boi-cmp ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); } .boi-cmp li + li { margin-top: 4px; }
.boi-src { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 0; line-height: 1.5; }
.boi-sys { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .boi-sys li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.boi-sys li:first-child { border-top: 0; } .boi-sys em { color: var(--ink-faint); font-style: normal; font-size: 13px; }
.boi-due { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 8px; } .boi-due li { display: grid; gap: 1px; font-size: 13.5px; } .boi-due .linkbtn { text-align: left; } .boi-due small { color: var(--ink-faint); }
.boi-list { container-type: inline-size; }
.boi-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 150px 22px; gap: 12px; align-items: start; padding: 10px 4px; border-top: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.boi-row.boi-row2 { grid-template-columns: minmax(0, 1fr) 150px 22px; }
.boi-row:hover, .boi-row:focus-visible { background: var(--panel-2); outline: none; } .boi-row:hover .sh-x, .boi-row .sh-x:focus-visible { opacity: 1; }
.boi-w { min-width: 0; overflow-wrap: anywhere; display: grid; gap: 2px; } .boi-w small { color: var(--ink-faint); font-size: 12.5px; line-height: 1.4; } .boi-w a { color: inherit; }
.boi-w .boi-auto { color: var(--ink-soft); }
.boi-amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; display: grid; } .boi-amt small { font-weight: 400; color: var(--ink-faint); font-size: 12px; }
.boi-pill { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--stone); color: var(--ink-soft); white-space: nowrap; }
.boi-pill.doing { border-color: var(--ink-soft); color: var(--ink); } .boi-pill.done { background: var(--ink); border-color: var(--ink); color: var(--paper); } .boi-pill.ask { border-style: dashed; }
.boi-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-faint); } .boi-late { color: var(--sig-no); font-weight: 600; }
.boi-mine { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.boi-total { display: flex; justify-content: space-between; margin: 14px 4px 0; padding-top: 10px; border-top: 2px solid var(--ink); font-size: 14px; } .boi-total b { font-variant-numeric: tabular-nums; }
.boi-todo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .boi-todo small { color: var(--ink-faint); font-size: 12.5px; }
@container (max-width: 560px) {
  .boi-row { grid-template-columns: minmax(0, 1fr) auto 22px; } .boi-row .boi-amt { grid-column: 2; grid-row: 1; }
  .boi-row > span:nth-child(3) { grid-column: 1 / 3; grid-row: 2; } .boi-row .sh-x { grid-column: 3; grid-row: 1; }
  .boi-row.boi-row2 { grid-template-columns: minmax(0, 1fr) 22px; } .boi-row.boi-row2 > span:nth-child(2) { grid-column: 1; grid-row: 2; } .boi-row.boi-row2 .sh-x { grid-column: 2; grid-row: 1; }
  .boi-meta { display: inline; margin: 0 0 0 8px; }
}
@media (max-width: 900px) { .boi-grid { grid-template-columns: 1fr; } .boi-cmp { grid-template-columns: 1fr; } .boi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.boi-short { display: none; }
@media (max-width: 600px) { .boi-tabs .boi-long { display: none; } .boi-tabs .boi-short { display: inline; } }
.boi-out { color: var(--sig-no); } .boi-linked { font-size: 13.5px; font-weight: 600; }
.pn-list.pn-scroll { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); padding-bottom: 28px; }

/* ---- News cards: F1 and ACID modes (v63, 5 Oct 2026) — same idea as the Huntress tarot card ---- */
.nc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 0 0 18px; align-items: start; }
.nc { border-radius: 14px; overflow: hidden; min-width: 0; }
.nc-face { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nc-face:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.nc-back { width: 46px; height: 64px; flex: 0 0 auto; border-radius: 6px; }
.nc-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nc-t small { font-size: 13px; opacity: .8; } .nc-t em { font-style: normal; font-size: 12px; margin-top: 3px; opacity: .9; }
.nc-body { padding: 0 16px 14px; }
.nc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }
.nc-tab { font: inherit; font-size: 12.5px; padding: 4px 11px; border-radius: 99px; cursor: pointer; background: transparent; color: inherit; border: 1px solid currentColor; opacity: .7; }
.nc-tab.on { opacity: 1; font-weight: 700; }
.nc-list { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow-y: auto; overscroll-behavior: contain; }
.nc-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; color: inherit; text-decoration: none; border-top: 1px solid rgba(255,255,255,.1); }
.nc-list li:first-child .nc-item { border-top: 0; }
.nc-item img { width: 64px; height: 44px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; background: rgba(255,255,255,.06); }
.nc-item span { display: grid; gap: 2px; min-width: 0; } .nc-item b { font-size: 14px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.nc-item small { font-size: 12px; opacity: .7; } .nc-item:hover b, .nc-item:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.nc-badge { font-style: normal; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; padding: 0 5px; border: 1px solid currentColor; border-radius: 3px; }
.nc-foot { margin: 10px 0 0; font-size: 12px; opacity: .75; line-height: 1.5; } .nc-foot .linkbtn { color: inherit; font-size: 12px; }
.nc-wait { margin: 4px 0 8px; font-size: 13.5px; opacity: .8; }
/* F1: carbon, red stripe, chequered card back */
.nc-f1 { background: var(--f1-dark, #15151e) repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 6px); color: #fff; border-bottom: 4px solid var(--f1-red, #e10600); }
.nc-f1 .nc-t b { font-family: "Titillium Web", sans-serif; font-weight: 900; font-style: italic; font-size: 20px; letter-spacing: -.01em; text-transform: uppercase; }
.nc-f1 .nc-back { background: repeating-conic-gradient(#fff 0 25%, #15151e 0 50%) 0 0 / 12px 12px; border: 2px solid #fff; transform: skewX(-8deg); }
.nc-f1 .nc-tab.on { background: var(--f1-red, #e10600); border-color: var(--f1-red, #e10600); }
.nc-f1.glow { animation: ncGlowF1 2.4s ease-in-out infinite; }
@keyframes ncGlowF1 { 0%, 100% { box-shadow: 0 0 0 0 rgba(225,6,0,0); } 50% { box-shadow: 0 0 22px 2px rgba(225,6,0,.55); } }
/* ACID: near-black, hot pink, clipped corner */
.nc-acid { background: #0D0B11; color: #F4F3F0; border: 1px solid #3A3842; border-radius: 4px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.nc-acid .nc-t b { font-family: "Inter Tight", sans-serif; font-weight: 900; text-transform: uppercase; font-size: 20px; letter-spacing: -.01em; }
.nc-acid .nc-t small, .nc-acid .nc-foot { font-family: "JetBrains Mono", monospace; letter-spacing: .02em; }
.nc-acid .nc-back { border-radius: 2px; border: 2px solid #E23C8E; background: repeating-linear-gradient(135deg, #E23C8E 0 6px, #0D0B11 6px 12px, #FF9FCB 12px 15px, #0D0B11 15px 21px); }
.nc-acid .nc-tab.on { background: #E23C8E; border-color: #E23C8E; color: #fff; }
.nc-acid.glow .nc-back { animation: ncGlowAcid 1.6s steps(2, jump-none) infinite; }
@keyframes ncGlowAcid { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 8px #E23C8E) brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .nc-f1.glow, .nc-acid.glow .nc-back { animation: none; } }
@media (max-width: 600px) { .nc-row { grid-template-columns: 1fr; } .nc-list { max-height: 380px; } }
.nc-list { padding-right: 8px; }
.boi-proj-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .boi-proj-h .boi-src { margin: 0; } .boi-proj-acts { display: flex; gap: 12px; align-items: center; }
.boi-target { font-size: 13.5px; margin: 0 0 10px; color: var(--ink-soft); } .boi-ref { opacity: .75; }
.boi-sugg { font-style: normal; font-size: 11px; padding: 0 6px; border: 1px dashed var(--stone); border-radius: 99px; color: var(--ink-soft); white-space: nowrap; }
.boi-todo-box { display: grid; gap: 6px; margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--line); background: var(--panel-2); border-radius: 0 8px 8px 0; cursor: default; }
.boi-todo-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); } .boi-todo-h i { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-faint); margin-left: 6px; }
.boi-steps { margin: 0; padding-left: 18px; display: grid; gap: 4px; } .boi-steps li { font-size: 13.5px; line-height: 1.45; color: var(--ink); } .boi-steps li span { margin-right: 6px; } .boi-step-add { font-size: 12px; white-space: nowrap; }
.boi-links { display: flex; flex-direction: column; gap: 3px; } .boi-links a { font-size: 12.5px; color: var(--ink-soft); } .boi-links a:hover { color: var(--ink); }
.boi-w > .boi-sugg { justify-self: start; margin: 1px 0 2px; }

/* ---- Huntress: birth chart, Moon, today's sky (v65, 5 Oct 2026) — inside the tarot card's purple ---- */
.astro-fig { margin: 0; } .astro-wheel { width: 100%; height: auto; display: block; }
.aw-ring { fill: none; stroke: rgba(205, 184, 240, .45); stroke-width: 1; } .aw-in { fill: rgba(255, 255, 255, .03); stroke: rgba(205, 184, 240, .3); }
.aw-tick { stroke: rgba(205, 184, 240, .45); } .aw-house { stroke: rgba(205, 184, 240, .14); }
.aw-sign { fill: #ffd27a; font-size: 14px; text-anchor: middle; dominant-baseline: central; }
.aw-pl { fill: #f3e8ff; font-size: 17px; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: #1c0d2e; stroke-width: 4px; }
.aw-lead { stroke: rgba(243, 232, 255, .3); } .aw-ang { fill: #ff9fd8; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.aw-asp { stroke-width: 1; opacity: .75; } .aw-asp.soft { stroke: #b48cff; } .aw-asp.hard { stroke: #ff5e8a; }
.astro-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 7px; }
.astro-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; font-size: 13.5px; color: #f3eaff; line-height: 1.35; }
.astro-list.compact li { font-size: 13px; } .al-g { font-size: 17px; color: #ffd27a; text-align: center; }
.astro-list small { color: #cdb8ea; } .al-m { display: block; color: #cdb8ea; font-size: 12.5px; } .al-r { font-style: normal; color: #ff9fd8; }
.astro-h { margin: 12px 0 6px; font-family: Cinzel, serif; font-size: 14px; letter-spacing: .06em; color: #e9defc; }
.astro-asp { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 5px; font-size: 13px; color: #f3eaff; }
.astro-asp li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; } .astro-asp small { color: #cdb8ea; }
.astro-sky { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.astro-moon { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.moon-big { margin: 0; display: grid; place-items: center; } .moon-svg .mn-dark { fill: #1a1030; stroke: rgba(205, 184, 240, .35); } .moon-svg .mn-lit { fill: #f6efdc; }
.moon-big .moon-svg { filter: drop-shadow(0 0 18px rgba(246, 239, 220, .35)); }
.moon-phase { margin: 0 0 4px; font-family: Cinzel, serif; font-size: 22px; letter-spacing: .04em; color: #f3eaff; }
.moon-rs, .moon-next { margin: 0 0 6px; font-size: 13.5px; color: #e3d4fb; } .moon-rs small { color: #cdb8ea; }
.moon-here { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; } .moon-here .minput { flex: 1 1 180px; width: auto; background: #fff; color: #12081f; }
.moon-strip { display: flex; gap: 4px; overflow-x: auto; padding: 12px 0 4px; margin-top: 10px; border-top: 1px solid rgba(205, 184, 240, .2); }
.ms-d { display: grid; justify-items: center; gap: 2px; flex: 0 0 auto; } .ms-d small { font-size: 10px; color: #cdb8ea; } .ms-d.today small { color: #ffd27a; font-weight: 700; }
.tarot-moonlink { color: #ffd27a; font-size: 13px; }
@media (max-width: 640px) { .astro-sky { grid-template-columns: 1fr; } .astro-fig { max-width: 320px; margin: 0 auto; } .astro-moon { grid-template-columns: 1fr; justify-items: center; text-align: center; } .moon-here { justify-content: center; } }
.moon-here .btn { background: linear-gradient(100deg, #7b3cff, #c43bd6 55%, #ff4fa8); color: #fff; border-color: transparent; } .moon-here .linkbtn { color: #ffd27a; }
.astro-asp li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; } .as-g { color: #ffd27a; white-space: nowrap; }
.moon-strip { flex-wrap: wrap; overflow: visible; row-gap: 8px; }
.moon-here .minput { background: rgba(123, 60, 255, .14); color: #f3eaff; border: 1px solid rgba(205, 184, 240, .4); } .moon-here .minput::placeholder { color: #b9a6dc; }
/* Huntress Match (v66) */
.match-share { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #f3eaff; font-weight: 600; } .match-share input { width: 18px; height: 18px; accent-color: #c43bd6; }
.match-people { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; } .mp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.match-sum { font-size: 14px; color: #e3d4fb; margin: 0 0 8px; } .match-sum b { color: #fff; font-family: Cinzel, serif; letter-spacing: .03em; }
.match-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; }
.match-els { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .match-els > div > small { color: #cdb8ea; font-size: 12px; }
.mel { display: grid; gap: 1px; margin: 4px 0; } .mel i { display: block; height: 6px; border-radius: 3px; min-width: 2px; } .mel small { font-size: 11px; color: #cdb8ea; }
.mel-fire { background: #ff6b6b; } .mel-earth { background: #c49a6c; } .mel-air { background: #9fc5ff; } .mel-water { background: #7b8cff; }
@media (max-width: 640px) { .match-grid { grid-template-columns: 1fr; } }
/* BOI › Read a document (v67) */
.brd-wait { font-size: 14px; color: var(--ink-soft); margin: 12px 0; }
.brd-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; }
.brd-list label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.brd-list label:has(input:not(:checked)) { opacity: .55; }
.brd-list input { width: 18px; height: 18px; margin-top: 2px; } .brd-list span { display: grid; gap: 3px; min-width: 0; }
.brd-type { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); } .brd-list b { font-size: 14px; } .brd-what { font-size: 13.5px; color: var(--ink); }
.brd-list q { font-size: 12.5px; color: var(--ink-soft); font-style: italic; border-left: 2px solid var(--line); padding-left: 8px; quotes: "“" "”"; overflow-wrap: anywhere; }
.boi-up a { font-size: 13px; }
.boi-up-row { padding: 9px 4px; border-top: 1px solid var(--line); font-size: 14px; } .boi-up-row small { display: block; color: var(--ink-faint); font-size: 12.5px; margin-top: 2px; } .boi-up-row a { font-size: 12.5px; margin-left: 6px; }
.boi-w .boi-note { color: var(--ink); font-size: 13px; border-left: 2px solid var(--line); padding-left: 8px; margin-top: 3px; }
/* Discussions search (5 Oct 2026) */
/* Search sits first and is lit (Aaron, 8 Oct 2026): accent edge, icon, a size up from the other fields. */
.bd-search { position: relative; display: block; margin: 0 0 14px; color: var(--accent); }
.bd-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.bd-search .minput { width: 100%; padding: 12px 14px 12px 42px; font-size: 15px; border: 1.5px solid var(--accent); background: var(--panel); color: var(--ink); border-radius: 12px; }
.bd-search .minput::placeholder { color: var(--ink-faint); }
.bd-search .minput:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
body.mode-dark .bd-search { color: var(--ox-500, var(--accent)); } body.mode-dark .bd-search .minput { border-color: var(--ox-500, var(--accent)) !important; background: var(--panel) !important; } /* beats the dark-mode input rule, which is !important */
body.acid .bd-search, body.news .bd-search { color: var(--accent); } body.acid .bd-search .minput, body.news .bd-search .minput { border-color: var(--accent) !important; }
.bd-qn { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 6px; } .bd-hit mark { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.brd-done { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-soft); margin: 6px 0 0 30px; cursor: pointer; } .brd-done input { width: 15px; height: 15px; }
.brd-warn { font-size: 13.5px; color: var(--sig-no); border: 1px solid currentColor; border-radius: 8px; padding: 8px 10px; margin: 10px 0 0; }
@media (max-width: 600px) { .brd-list { max-height: 38vh; } }
.bd-topic.bd-hit { display: block; grid-template-columns: none; } .bd-hit .bd-tmain { display: grid; gap: 3px; min-width: 0; } .bd-hit .bd-tbody { overflow-wrap: anywhere; }
@media (max-width: 860px) { .bd-chans { align-items: flex-start; } .bd-chans > .bd-ch { flex: 0 0 auto; } } /* the All topics chip stretched to the channel list's height on phones */
@media (max-width: 860px) { .bd-chans { scrollbar-width: none; padding-bottom: 0; } .bd-chans::-webkit-scrollbar { display: none; } }
.nc-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .nc-pics { font: inherit; font-size: 12px; background: none; border: 0; color: inherit; opacity: .75; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; padding: 4px 0; } .nc-pics:hover { opacity: 1; }
.nc-pics { min-height: 44px; padding: 10px 2px; margin-top: -10px; }
/* Huntress: tap a placement or aspect to read it (5 Oct 2026) */
.al-tap li { display: block; } .al-tap .al-d > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px; align-items: start; border-radius: 8px; padding: 4px 4px; }
.astro-asp.al-tap .al-d > summary { grid-template-columns: 62px minmax(0, 1fr) auto; }
.al-tap .al-d > summary::-webkit-details-marker { display: none; } .al-tap .al-d > summary:hover, .al-tap .al-d[open] > summary { background: rgba(255, 255, 255, .06); }
.al-tap .al-d > summary:focus-visible { outline: 2px solid #c9a6ff; outline-offset: 1px; }
.al-more { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #ffd27a; border: 1px solid rgba(255, 210, 122, .45); border-radius: 99px; padding: 1px 8px; align-self: center; }
.al-d[open] .al-more { opacity: .5; }
.al-read { margin: 4px 0 10px 32px; padding: 10px 12px; border-left: 2px solid #c9a6ff; background: rgba(123, 60, 255, .1); border-radius: 0 8px 8px 0; }
.astro-asp .al-read { margin-left: 8px; }
.al-read p { margin: 0 0 7px; font-size: 13.5px; line-height: 1.55; color: #f3eaff; } .al-read p:last-child { margin-bottom: 0; } .al-read b { color: #ffd27a; } .al-rnote { color: #cdb8ea !important; font-size: 12.5px !important; }
.al-guide { margin: 0 0 10px; font-size: 13.5px; color: #e3d4fb; } .al-guide > summary { cursor: pointer; color: #ffd27a; font-weight: 600; } .al-guide p { margin: 6px 0; line-height: 1.5; } .al-guide b { color: #fff; }
.aw-pl[data-pl] { cursor: pointer; } .aw-pl[data-pl]:hover { fill: #ffd27a; }
/* The chart wheel and its readings sit side by side only when there's room; otherwise they stack (5 Oct 2026) */
.astro-chart { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.astro-chart > .astro-fig { flex: 1 1 300px; max-width: 420px; margin: 0 auto; }
.astro-chart > .astro-side { flex: 1 1 360px; min-width: 0; }
@media (min-width: 900px) { .astro-chart > .astro-fig { position: sticky; top: 12px; } }
.aw-pl[data-pl]:focus-visible { outline: none; fill: #ffd27a; stroke: #ffd27a; stroke-width: 1px; } .al-c { display: none; } .al-d[open] .al-o { display: none; } .al-d[open] .al-c { display: inline; }
/* Huntress partner reading (v68) */
.pt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pt-who { font-family: Cinzel, serif; font-size: 15px; letter-spacing: .05em; color: #ffd27a; margin: 0 0 8px; }
.pt-card { width: 130px; margin: 0 0 8px; } .pt-cname { margin: 0 0 6px; font-weight: 700; color: #f3eaff; } .pt-read { font-size: 14px; }
.pt-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 12px; border-top: 1px solid rgba(205, 184, 240, .2); padding-top: 8px; }
.pt-more .astro-asp.al-tap .al-d > summary { grid-template-columns: 62px minmax(0, 1fr); }
@media (max-width: 640px) { .pt-grid, .pt-more { grid-template-columns: 1fr; } .pt-card { width: 110px; } }
/* Huntress rune spreads (5 Oct 2026) */
.rune-spreads { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 12px; } .rune-spreads .oracle-tab { font-size: 12.5px; padding: 5px 12px; }
.rune-row { display: grid; gap: 10px; margin: 6px 0 12px; } .rune-row.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rune-row.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rune-tile { margin: 0; display: grid; justify-items: center; gap: 4px; text-align: center; padding: 10px 6px 12px; border-radius: 12px; border: 1px solid rgba(205, 184, 240, .3);
  background: radial-gradient(circle at 50% 30%, rgba(196, 59, 214, .25), rgba(18, 8, 31, .6)); }
.rune-tile figcaption { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #ffd27a; } .rune-tile .oracle-glyph.rune { font-size: 54px; }
.rune-tile b { color: #f3eaff; font-size: 14px; } .rune-tile small { color: #cdb8ea; font-size: 12px; line-height: 1.35; }
@media (max-width: 640px) { .rune-row.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rune-row.n5 .rune-tile:first-child { grid-column: 1 / -1; } .rune-row.n3 .rune-tile .oracle-glyph.rune { font-size: 42px; } .rune-row.n3 small { font-size: 11px; } }
.astro-asp.al-tap .al-d > summary { grid-template-columns: 62px minmax(0, 1fr) auto auto; } .pt-more .astro-asp.al-tap .al-d > summary { grid-template-columns: 62px minmax(0, 1fr) auto; }
.al-d[open] .al-more { opacity: 1; background: rgba(255, 210, 122, .14); }
/* Discussions: reactions and replies to replies (v69) */
.bd-pfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.bd-react { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bd-rx { font: inherit; font-size: 13px; border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 2px 9px; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; min-height: 30px; }
.bd-rx span { font-size: 12px; color: var(--ink-soft); } .bd-rx.mine { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); } .bd-rx:disabled { cursor: default; }
.bd-rpick { position: relative; display: inline-flex; } .bd-radd { font: inherit; font-size: 13px; border: 1px dashed var(--line); background: none; border-radius: 99px; padding: 2px 9px; min-height: 30px; cursor: pointer; color: var(--ink-soft); }
.bd-rmenu { display: inline-flex; gap: 2px; margin-left: 6px; } .bd-rmenu[hidden] { display: none; } .bd-rmenu button { font-size: 18px; background: none; border: 0; cursor: pointer; padding: 2px 4px; border-radius: 6px; min-width: 34px; min-height: 34px; } .bd-rmenu button:hover { background: var(--panel-2); }
.bd-replyto { font-size: 13px; }
.bd-branch > .bd-nested, .bd-branch > .bd-to { margin-left: 28px; } .bd-to { font-size: 12px; color: var(--ink-faint); margin: 6px 0 -4px; }
.bd-nested { border-left: 2px solid var(--line); padding-left: 12px; }
.bd-replying { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 6px; } .bd-inline-reply { margin: 8px 0 12px 28px; }
.bd-flash { animation: bdflash 1.6s ease-out 1; } @keyframes bdflash { 0% { background: color-mix(in srgb, var(--accent) 18%, transparent); } 100% { background: transparent; } }
@media (max-width: 600px) { .bd-branch > .bd-nested, .bd-branch > .bd-to, .bd-inline-reply { margin-left: 14px; } }
/* Team chat bubble: easier to spot, labelled on desktop; tools and mentions (5 Oct 2026) */
.dq-bubble { background: var(--accent); color: var(--accent-ink, #fff); }
@media (min-width: 761px) { .dq-bubble { width: auto; padding: 0 18px 0 14px; border-radius: 99px; gap: 8px; grid-auto-flow: column; } .dq-bubble::after { content: "Team chat"; font-weight: 700; font-size: 14px; } }
.bd-tools { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin: 0 0 4px; } .bd-tools > button { font: inherit; font-size: 13px; min-width: 32px; min-height: 30px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; cursor: pointer; color: var(--ink); }
.bd-tools > button:hover { background: var(--panel-2); } .bd-emo { display: inline-flex; flex-wrap: wrap; gap: 2px; } .bd-emo[hidden] { display: none; } .bd-emo button { font-size: 18px; background: none; border: 0; cursor: pointer; min-width: 32px; min-height: 32px; border-radius: 6px; } .bd-emo button:hover { background: var(--panel-2); }
.bd-at-pop { position: relative; z-index: 5; display: grid; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 6px 18px rgba(0,0,0,.12); max-width: 240px; margin-top: 4px; } .bd-at-pop[hidden] { display: none; }
.bd-at-opt { display: flex; gap: 8px; align-items: center; font: inherit; font-size: 14px; background: none; border: 0; padding: 6px 8px; border-radius: 6px; cursor: pointer; text-align: left; color: var(--ink); } .bd-at-opt.on, .bd-at-opt:hover { background: var(--panel-2); }
.bd-at { color: var(--accent); font-weight: 600; } .dq-to { font-size: 11.5px; color: var(--ink-faint); margin-left: 6px; } .dq-post .bd-pfoot { margin-top: 6px; } .dq-reply .bd-replying { margin: 0 0 4px; }
.dq-bubble .dq-n { background: var(--ink); color: var(--paper); border: 2px solid var(--paper); }
/* Legal review (v70, 5 Oct 2026): Review → green when approved */
.legal-row .legal-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.lg-rev { font: inherit; font-size: 12.5px; font-weight: 600; min-height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.lg-rev:hover:not(:disabled) { border-color: var(--ink-faint); } .lg-rev:disabled { cursor: default; opacity: .8; }
.lg-rev.ok { background: var(--sig-ok); border-color: var(--sig-ok); color: #fff; }
.lg-rev.warn { border-color: var(--sig-doing); color: var(--sig-doing); }
.lg-rev.no { border-color: var(--sig-no); color: var(--sig-no); }
body.acid:not(.mode-light) .lg-rev.ok { color: #0d0b11; }
.lg-pop { display: grid; gap: 8px; width: min(340px, calc(100vw - 48px)); } .lg-now { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.lg-btns { display: flex; gap: 6px; flex-wrap: wrap; } .lg-btns .ini { width: 18px; height: 18px; font-size: 10px; }
.lg-approve { background: var(--sig-ok); border-color: var(--sig-ok); color: #fff; } body.acid:not(.mode-light) .lg-approve { color: #0d0b11; }
.lg-msg { margin: 0; font-size: 12.5px; color: var(--sig-no); } .lg-msg:empty { display: none; }
@media (max-width: 760px) { .lg-rev { max-width: 180px; } }
@media (max-width: 1180px) { .legal-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n n" "link acts"; row-gap: 8px; }
  .legal-row .legal-n { grid-area: n; } .legal-row .legal-link { grid-area: link; grid-column: auto; order: 0; } .legal-row .legal-acts { grid-area: acts; } }
@media (max-width: 560px) { .legal-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "link" "acts"; } .legal-row .legal-acts { justify-content: flex-start; } }
.mini-pop .btn.lg-approve, body.acid .mini-pop .btn.lg-approve, body.f1 .mini-pop .btn.lg-approve, body.huntress .mini-pop .btn.lg-approve { background: var(--sig-ok); border-color: var(--sig-ok); color: #fff; }
body.acid:not(.mode-light) .mini-pop .btn.lg-approve { color: #0d0b11; }
/* Collectors (v72, 6 Oct 2026) */
.cl-due { padding: 14px 16px; margin: 0 0 14px; } .cl-due h3 { margin: 0 0 8px; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.cl-drow { display: grid; grid-template-columns: 110px minmax(0, auto) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.cl-drow:first-of-type { border-top: 0; } .cl-dwhen { font-size: 12.5px; color: var(--ink-faint); } .cl-dwhen.now { color: var(--ink); font-weight: 700; }
.cl-dnote { font-size: 13px; color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; } .cl-dacts { display: flex; gap: 8px; align-items: center; }
.cl-sel { max-width: 200px; } .cl-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .cl-tags .cl-bud { font-weight: 600; }
.cl-ps { font: inherit; font-size: 11.5px; cursor: pointer; border: 1px dashed var(--line); background: none; color: var(--ink-soft); }
.cl-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-faint); min-width: 0; } .cl-meta .cl-ok { color: var(--sig-ok); }
.cl-row { grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr) auto; }
.cl-add { margin: 12px 0; } .cl-add .minput { width: 100%; }
.cl-box { border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px 10px; margin: 8px 0 12px; background: var(--panel-2); } .cl-box .tp-sec { margin-top: 8px; }
.cl-mark { margin: 6px 0 10px; } .cl-frow { display: flex; gap: 6px; } .cl-frow .minput:last-child { flex: 1; min-width: 0; }
.mp-opt small { color: var(--ink-faint); font-size: 11.5px; margin-left: 4px; }
@media (max-width: 760px) { .cl-drow { grid-template-columns: 1fr auto; } .cl-drow .cl-dwhen { grid-column: 1 / -1; } .cl-drow .cl-dnote { grid-column: 1 / -1; order: 3; }
  .cl-row { grid-template-columns: auto minmax(0, 1fr) auto; } .cl-row .cl-meta { grid-column: 2 / -1; order: 4; } .cl-sel { max-width: none; flex: 1; } }
.cl-box .tp-sec { border-top: 0; padding-top: 0; } .cl-row .art-title, .cl-drow .art-title { cursor: pointer; }
#ct-body .cl-list ~ .cl-add { margin-top: 12px; } .ps-clink { margin: 4px 0 0; } .ps-clink:empty { display: none; }
@media (max-width: 760px) { #ct-body .ct-cats:has([data-clw]) { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 760px) { .cl-drow { grid-template-columns: minmax(0, 1fr); gap: 4px; } .cl-drow > * { grid-column: 1 / -1 !important; } .cl-drow .cl-dnote { order: 0; } .cl-drow .cl-dacts { margin-top: 4px; } }
/* Admin (v74, 6 Oct 2026) */
.adm-invite { padding: 16px 18px; margin: 0 0 14px; } .adm-invite h3 { margin: 0 0 10px; font-size: 16px; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; align-items: end; }
.adm-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .adm-msg { font-size: 13px; color: var(--sig-no); }
.adm-invited { margin: 12px 0 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); display: grid; gap: 8px; } .adm-invited p { margin: 0; }
.adm-invited textarea { width: 100%; font-size: 13px; }
.adm-list { display: grid; gap: 10px; } .adm-row, .adm-sale { padding: 0; overflow: hidden; } .adm-sale { padding: 14px 18px; display: grid; gap: 8px; }
.adm-head { all: unset; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 18px; cursor: pointer; }
.adm-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.adm-head > span:first-child, .adm-shead > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .adm-head small, .adm-shead small { color: var(--ink-faint); font-size: 12.5px; }
.adm-shead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.adm-hright { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; flex-shrink: 0; max-width: 55%; }
.adm-body { padding: 0 18px 16px; display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.adm-line { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; } .adm-line code { font-size: 12.5px; }
.adm-goals { margin: 0; padding-left: 20px; display: grid; gap: 3px; font-size: 14px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.adm-table th, .adm-table td { text-align: left; padding: 9px 8px; border-top: 1px solid var(--line); white-space: nowrap; } .adm-table th { font-size: 12px; color: var(--ink-faint); border-top: 0; }
.mini-pop .btn.adm-ok, .adm-ok { background: var(--sig-ok); border-color: var(--sig-ok); color: #fff; } body.acid:not(.mode-light) .adm-ok { color: #0d0b11; }
@media (max-width: 600px) { .adm-head, .adm-shead { flex-direction: column; align-items: flex-start; } .adm-hright { align-items: flex-start; text-align: left; max-width: none; } .adm-head { padding: 12px 14px; } .adm-body { padding: 12px 14px 14px; } .adm-sale { padding: 12px 14px; } }
.adm-body .fl .minput, .adm-invite .fl .minput, .sl-main .fl .minput, .lf-form .fl .minput, #ld-body .fl .minput, #modal-bg .fl select#ct-imlist { padding-top: 21px; padding-bottom: 7px; width: 100%; box-sizing: border-box; min-height: 48px; }
.adm-body .fl-area, .sl-main .fl-area, #ld-body .fl-area { display: block; } .adm-body textarea.minput, .sl-main textarea.minput, #ld-body textarea.minput { width: 100%; box-sizing: border-box; resize: vertical; }
.sl-main input[type=file].minput { padding-top: 24px; }
.adm-tablewrap { overflow-x: auto; max-width: 100%; border-radius: 10px; } .adm-table td { white-space: normal; } .adm-table td:nth-child(3) { min-width: 160px; }
@media (max-width: 760px) { .adm-table thead { display: none; } .adm-table, .adm-table tbody, .adm-table tr, .adm-table td { display: block; width: 100%; box-sizing: border-box; }
  .adm-table tr { border-top: 1px solid var(--line); padding: 8px 10px; } .adm-table td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; }
  .adm-table td[data-l]::before { content: attr(data-l); color: var(--ink-faint); font-size: 12px; } .adm-table td:nth-child(3) { min-width: 0; } }
.sl-tablewrap { overflow-x: auto; max-width: 100%; }
/* Navigation restructure (6 Oct 2026): view switches inside one tab, and the archive link on Projects */
.view-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); margin: 0 0 12px; flex-wrap: wrap; }
.vs-b { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: none; color: var(--ink-soft); padding: 6px 14px; border-radius: 999px; cursor: pointer; min-height: 32px; }
.vs-b:hover { color: var(--ink); } .vs-b.on { background: var(--ink); color: var(--paper); }
body.acid:not(.mode-light) .vs-b.on { background: var(--accent); color: var(--accent-ink, #fff); }
.pf-archline { margin: -6px 0 10px; font-size: 13px; } .mk-links-sec { padding: 14px 16px; margin-top: 14px; } .mk-sub { margin: 0 0 8px; font-size: 15px; }

/* Lead finder (6 Oct 2026): a bar on Places and Collectors, and the results list */
.lf-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card, transparent); }
.lf-bar-t { color: var(--ink-soft, var(--ink-faint)); font-size: 13px; flex: 1 1 240px; }
.lf-form { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; align-items: end; }
.lf-form .adm-acts { grid-column: 1 / -1; }
.lf-sum { margin: 14px 0 6px; font-size: 13px; color: var(--ink-faint); }
.lf-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; margin-bottom: 10px; }
.lf-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.lf-row input { margin-top: 3px; flex: 0 0 auto; }
.lf-row.lf-have { opacity: .6; cursor: default; }
.lf-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lf-main small { color: var(--ink-faint); overflow-wrap: anywhere; }
.lf-why { font-size: 13px; }
.lf-src { font-size: 12px; overflow-wrap: anywhere; }
.lf-tag { font-size: 11px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-faint); }
@media (max-width: 600px) { .lf-form { grid-template-columns: 1fr; } }

.modal-bg.modal-wide .modal { max-width: 760px; width: calc(100vw - 32px); }
.lf-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lf-name .lf-tag { flex: 0 0 auto; }
.lf-fit { color: var(--sig-doing, #c90); font-size: 12px; letter-spacing: 1px; }
.modal-bg.modal-over-panel { z-index: 1000; }
/* "Is our work adult content?" notice above the payment providers (6 Oct 2026) */
.adult-notice { border-left: 4px solid var(--sig-doing); }
.adult-notice .an-h { margin: 4px 0 6px; font-size: 16px; line-height: 1.35; max-width: 760px; }
.adult-notice .an-list { margin: 10px 0 6px; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; max-width: 760px; }
.boi-law-note { margin-bottom: 14px; }
.adult-notice .an-qs { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.tl-h { margin: 16px 0 6px; font-size: 14px; letter-spacing: .02em; }
.tl-table th[scope=row] { white-space: normal; font-weight: 600; min-width: 130px; } .tl-table td, .tl-table th { vertical-align: top; } .tl-table .tl-pen { min-width: 150px; }
.tl-table small { font-weight: 400; color: var(--ink-faint); }
.tl-table .tl-pen { color: var(--ink); } .tl-table .tl-pen b { color: var(--sig-no); }
.adult-notice .an-qs { font-size: 14px; line-height: 1.5; max-width: 760px; }
.tl-table th[scope=row] { color: var(--ink); }
@media (max-width: 600px) { .tl-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; } }
.tl-plan { margin: 6px 0; font-size: 14px; line-height: 1.5; max-width: 760px; }
.tl-sub { font-size: 13px; margin-top: 10px; }
.tl-flag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: var(--s); white-space: nowrap; }
.tl-flags td:nth-child(2) { width: 80px; }
@media (max-width: 600px) { .tl-table td { justify-content: flex-start; } .tl-table td > span { flex: 1; text-align: left; } }
/* Saved brain dumps (6 Oct 2026) */
.sd-saved { margin-top: 16px; } .sd-saved:empty { display: none; }
.sd-list { display: flex; flex-direction: column; gap: 8px; }
.sd-item { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; flex-wrap: wrap; }
.sd-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 260px; font-size: 14px; overflow-wrap: anywhere; }
.sd-text small { color: var(--ink-faint); }
.sd-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Team chat channels, clearer (Aaron, 6 Oct 2026: "make the + channel and navigation more obvious"; "dont collapse the all topics") */
.bd-chhead { margin: 0 0 4px 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.bd-addch { all: unset; box-sizing: border-box; cursor: pointer; margin: 8px 0 0; padding: 7px 10px; border: 1px dashed color-mix(in srgb, var(--accent) 60%, var(--line)); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--accent); text-align: center; }
.bd-addch:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .bd-addch:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.bd-chrow .bd-chmore { opacity: .55; }
@media (max-width: 860px) {
  .bd-chans { flex-wrap: wrap; overflow: visible; }
  .bd-chhead { width: 100%; margin: 0 0 2px 2px; }
  .bd-chrow { flex: 0 0 auto; }
  .bd-chrow .bd-chmore { opacity: 1; padding: 4px 6px; }
  .bd-addch { display: inline-flex !important; margin: 0; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
}
.bd-editing { margin: 0 0 6px; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bd-editing .linkbtn { color: var(--accent); font-weight: 600; text-decoration: underline; }
/* Enquiry PDF (6 Oct 2026: "the enquiry pdfs are fucking up"): pictures sized to fit a page with their details, on white, never split */
.pdoc-eq .eq-img { background: transparent; } .pdoc-eq .eq-img img { width: auto; max-width: 100%; max-height: 115mm; margin: 0 auto; object-fit: contain; }
.pdoc-eq .eq-piece { align-items: start; }
/* The Enquiry PDF pop-up */
#modal-bg .eq-form { display: grid; gap: 10px; margin-top: 4px; }
#modal-bg .eq-form .ho-chk { margin: 2px 0; }
.pdoc-eq .eq-eds { width: 100%; border-collapse: collapse; margin-top: 4mm; font-size: 9pt; }
.pdoc-eq .eq-eds th { text-align: left; font-size: 7pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #777; padding: 0 2mm 1.5mm 0; border-bottom: .3mm solid #ddd; }
.pdoc-eq .eq-eds td { padding: 1.5mm 2mm 1.5mm 0; border-bottom: .3mm solid #eee; }
/* "✓ Saved" — confirmed by the server (6 Oct 2026) */
#saved-ping { position: fixed; left: 50%; top: 14px; transform: translate(-50%, -8px); z-index: 2000; padding: 6px 14px; border-radius: 999px; background: #2e7d32; color: #fff; font: 600 13px/1.2 var(--body, sans-serif); box-shadow: 0 4px 14px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
#saved-ping.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { #saved-ping { transition: none; } }
/* Home blends (6 Oct 2026): What's new = Team + Portal in one list; For you inside My tasks; From your brain dumps */
.wn-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: 13px; }
.wn-list { display: flex; flex-direction: column; }
.wn-item { all: unset; box-sizing: border-box; display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; border-top: 1px solid var(--line); width: 100%; }
.wn-list > .wn-item:first-child { border-top: 0; }
button.wn-item { cursor: pointer; } button.wn-item:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
button.wn-item:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }
.wn-item.fresh { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }
.wn-tag, .fy-tag { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-faint); margin-top: 1px; }
.wn-portal .wn-tag { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.wn-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.wn-t { font-weight: 700; } .wn-d { color: var(--ink-soft, var(--ink)); font-size: 13px; } .wn-w { font-size: 12px; color: var(--ink-faint); }
.wn-team .ini { flex: 0 0 auto; }
.wn-more { margin-top: 6px; }
.fy-in { margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.fy-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 4px; }
.fy-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.fy-item { grid-template-columns: 28px auto minmax(0, 1fr) auto; } /* icon · tag · text · when */
.fy-item .fy-tag { align-self: center; margin: 0; }
@media (max-width: 600px) { .fy-item { grid-template-columns: 28px minmax(0, 1fr) auto; } .fy-item .fy-tag { grid-column: 2; justify-self: start; } .fy-item .fy-t { grid-column: 2; } .fy-item .fy-w { grid-column: 3; grid-row: 1; } }
.bd-from .eyebrow { margin-top: 4px; }
.bdf-group { margin: 6px 0 12px; }
.bdf-src { margin: 0 0 4px; font-size: 13px; color: var(--ink-faint); overflow-wrap: anywhere; }
.bdf-task { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; margin-top: 6px; }
.bdf-task:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); } .bdf-task:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.bdf-tt { font-size: 14px; font-weight: 600; } .bdf-task small { color: var(--ink-faint); }
/* My Art series tabs (6 Oct 2026) */
.art-stabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.art-stab { all: unset; box-sizing: border-box; cursor: pointer; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink-soft, var(--ink)); white-space: nowrap; }
.art-stab span { font-size: 11px; color: var(--ink-faint); margin-left: 3px; }
.art-stab:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.art-stab.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--ink); font-weight: 700; }
.art-stab:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.pdoc-eq .eq-noimg { background: #0d0d0d; min-height: 60mm; } /* no picture yet: the dark letter panel, not a blank column */
.hc-bdfrom { order: 4; } @media (min-width: 1360px) { .hc-bdfrom { order: 0; } } /* below My tasks on smaller screens, so what needs you comes first */ /* not first on smaller screens (judge, 6 Oct) */
@media (max-width: 600px) { .fy-item .fy-t { grid-column: 2 / -1; } }
.ad-detbtn { font-weight: 700; }
.fy-acts { display: inline-flex; gap: 12px; }
/* Menu scrolled down: a fade at the top too, so Me / Home / My Art never look "gone" (Aaron, 6 Oct 2026) */
@media (min-width: 761px) {
  .nav.nav-scrolled { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
}
.nav-more-up { all: unset; box-sizing: border-box; cursor: pointer; display: none; width: 100%; margin: 6px 0 4px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #ece6da; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 5px 0; }
.nav-more-up.on { display: block; } .nav-more-up:hover { background: rgba(255,255,255,.16); } .nav-more-up:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.acid .nav-more-up { border-radius: 0; border-color: #E23C8E; color: #FF9FCB; background: #1B1920; font-family: "JetBrains Mono", monospace; }
@media (max-width: 760px) { .nav-more-up { display: none !important; } }
.nav-sec-n { order: 2; margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: none; white-space: nowrap; color: var(--sec-l, var(--sec, #e9e2d4)); border: 1px solid currentColor; border-radius: 999px; padding: 0 7px; line-height: 16px; }
.nav-sec-n:empty { display: none; } .nav-sec-n:not(:empty) + .chev { margin-left: 4px; }
body.side-collapsed .nav-sec-h .nav-sec-n { display: none; }
body.acid .nav-sec.shut > .nav-sec-h { background: #2A2731; color: #F4F3F0 !important; box-shadow: inset 0 -2px 0 var(--sec), inset 0 0 0 1px #3A3842; }
body.acid .nav-sec-n { font: 700 10px "JetBrains Mono", monospace; line-height: 16px; border-radius: 0; color: var(--sec-l, #9FF2D2); }
/* Team chat: "← All topics" is a real button, pinned while you read a thread (Aaron, 6 Oct 2026). */
.bd-backbtn { font-weight: 700; padding: 7px 16px; border: 1.5px solid var(--accent); color: var(--accent-ink, #fff); background: var(--accent); border-radius: 999px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.bd-backbtn:hover, .bd-backbtn:focus { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); filter: brightness(1.12); } .bd-backbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bd-thead { position: sticky; top: 0; z-index: 5; background: var(--paper, #f6f2ea); padding: 10px 0; }
.dq-head [data-dqback].bd-backbtn { flex: 0 0 auto; } .dq-head [data-dqfull] { margin-left: auto; }
body.acid .bd-backbtn { border-radius: 0; border-color: #E23C8E; color: #fff; background: #E23C8E; box-shadow: none; font-family: "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
body.acid .bd-backbtn:hover { background: #ff5db1; }
@media (max-width: 760px) { .bd-thead { top: 56px; } body.acid .bd-thead { top: 56px; } }
/* Sell › Events (6 Oct 2026) */
.ev-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 12px; }
.ev-bar .view-tabs { margin: 0; } .ev-q { flex: 1 1 200px; max-width: 320px; } .ev-bar #ev-add { margin-left: auto; }
.ev-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ev-month { margin: 0 0 18px; } .ev-mh { font-family: var(--display); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.ev-row { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 58px 1fr auto; gap: 14px; align-items: center; width: 100%; padding: 12px 14px; margin: 0 0 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.ev-row:hover { border-color: var(--accent); } .ev-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ev-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); line-height: 1.1; }
.ev-date b { font-size: 16px; } .ev-date small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.ev-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-name { font-weight: 700; font-size: 15px; } .ev-ed { font-weight: 500; color: var(--ink-soft); font-size: .85em; }
.ev-where { font-size: 13px; color: var(--ink-soft); } .ev-focus { font-size: 12.5px; color: var(--ink-faint, #8b8376); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.ev-st { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap; }
.ev-st-considering { border-color: #a15c00; color: #a15c00; } .ev-st-applied { border-color: #3b6fb6; color: #3b6fb6; }
.ev-st-accepted, .ev-st-going { background: #2e7d32; border-color: #2e7d32; color: #fff; } .ev-st-done { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--paper); }
.ev-st-declined { text-decoration: line-through; opacity: .7; }
.ev-when { font-size: 12px; color: var(--ink-soft); white-space: nowrap; } .ev-when.now { color: #2e7d32; font-weight: 700; } .ev-when.due { color: #a15c00; font-weight: 700; }
.ev-modal { max-width: 720px; } .ev-mhead { position: relative; padding-right: 36px; } .ev-mhead h2 { margin: 0; font-family: var(--display); }
.ev-mhead .tp-x { position: absolute; top: 0; right: 0; } .ev-msub { margin: 4px 0 0; color: var(--ink-soft); font-size: 13.5px; }
.ev-note { background: var(--paper); border-left: 3px solid #a15c00; padding: 8px 12px; font-size: 13px; margin: 12px 0 0; }
.ev-sec { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 8px; }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px; }
.ev-who { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .ev-whochip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; cursor: pointer; }
.ev-sum { font-weight: 700; font-size: 13.5px; margin: 8px 0 0; } .ev-sum:empty { display: none; }
.ev-det { margin: 16px 0 0; } .ev-det summary { cursor: pointer; font-weight: 700; font-size: 13.5px; } .ev-det .ev-grid { margin-top: 10px; }
.ev-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .ev-actions .danger { margin-left: auto; }
@media (max-width: 760px) { .ev-row { grid-template-columns: 50px 1fr; } .ev-side { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; } .ev-q { max-width: none; } .ev-bar #ev-add { margin-left: 0; } }
body.acid .ev-row, body.acid .ev-date { border-radius: 0; } body.acid .ev-row:hover { border-color: #E23C8E; } body.acid .ev-mh { font-family: "Inter Tight", sans-serif; font-weight: 900; color: #F4F3F0; }
.ev-fit { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid currentColor; }
.ev-fit-3 { color: #2e7d32; } .ev-fit-2 { color: #a15c00; } .ev-fit-1 { color: #8b8376; } .ev-side .ev-fit-l { display: none; }
.ev-apply { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 4px 14px 12px; margin-top: 14px; }
.ev-apply .ev-sec { display: flex; align-items: center; gap: 8px; } .ev-why { margin: 0 0 8px; font-size: 13.5px; }
.ev-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 13.5px; } .ev-dl dt { font-weight: 700; color: var(--ink-soft); } .ev-dl dd { margin: 0; }
.ev-steps { margin: 10px 0 0; padding-left: 20px; font-size: 13.5px; } .ev-steps li { margin: 2px 0; }
.ev-ev { margin: 10px 0 0; padding: 6px 12px; border-left: 3px solid var(--line); font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
.ev-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0 0; font-size: 13px; }
.ev-tl { margin: 0 0 22px; } .ev-tl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.ev-tl-grid { display: grid; grid-template-columns: repeat(12, minmax(96px, 1fr)); gap: 0; min-width: 1152px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.ev-tl-col { padding: 0 6px 8px; border-left: 1px solid var(--line); min-height: 120px; display: flex; flex-direction: column; gap: 4px; } .ev-tl-col:first-child { border-left: 0; }
.ev-tl-col.now { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ev-tl-m { position: relative; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 2px 6px; margin: 0 -6px 4px; padding-left: 8px; border-bottom: 1px solid var(--line); } .ev-tl-m small { font-weight: 500; color: var(--ink-soft); }
.ev-tl-today { position: absolute; bottom: -1px; width: 2px; height: 10px; background: var(--accent); }
.ev-tl-chip { all: unset; box-sizing: border-box; cursor: pointer; display: block; font-size: 11.5px; line-height: 1.25; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); }
.ev-tl-chip > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.ev-tl-chip b { font-weight: 800; } .ev-tl-chip:hover { border-color: var(--accent); } .ev-tl-chip:focus-visible { outline: 2px solid var(--accent); }
.ev-tl-chip.ev-st-going, .ev-tl-chip.ev-st-accepted { background: #2e7d32; border-color: #2e7d32; color: #fff; } .ev-tl-chip.ev-st-applied { border-color: #3b6fb6; color: #3b6fb6; } .ev-tl-chip.ev-st-considering { border-color: #a15c00; }
.ev-tl-chip.due { border-style: dashed; border-color: #a15c00; color: #a15c00; background: transparent; }
.ev-tl-key { display: flex; gap: 8px; align-items: center; margin: 6px 0 0; font-size: 12px; } .ev-tl-key .ev-tl-chip { display: inline-block; cursor: default; }
@media (max-width: 760px) { .ev-bar .view-tabs { flex-wrap: wrap; overflow: visible; } }
body.acid .ev-tl-grid, body.acid .ev-tl-chip, body.acid .ev-apply { border-radius: 0; } body.acid .ev-tl-today { background: #E23C8E; }
.ev-strong { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ev-strong input { accent-color: #2e7d32; margin: 0; } .ev-strong.on { border-color: #2e7d32; background: #2e7d32; color: #fff; }
body.acid .ev-strong { border-radius: 0; } body.acid .ev-strong.on { background: #35E0A1; border-color: #35E0A1; color: #0D0B11; }
.ev-kinds .chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 700; }
body.acid .ev-kinds .chip.on { background: #E23C8E; border-color: #E23C8E; color: #fff; }
@media (max-width: 760px) { .ev-tl-grid { grid-template-columns: repeat(12, 124px); min-width: 0; } }
.ev-vip { color: var(--ink-faint, #8b8376); }
.mkt-brand-intro { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; }
@media (max-width: 760px) { .mkt-savebar { padding-right: 78px !important; } }
@media (min-width: 761px) { .mkt-savebar { padding-right: 150px !important; } }
.mkt-ph { display: inline-block; vertical-align: middle; margin-left: 6px; font: 800 10.5px/1 var(--sans, inherit); letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: #a15c00; color: #fff; }
.mkt-sec.placeholder { border: 2px dashed #a15c00 !important; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(161,92,0,.05) 14px 28px), var(--panel); }
.mkt-sec.placeholder .mkt-ta { color: var(--ink-soft); font-style: italic; }
.mkt-ph-note { margin: 0 0 14px; padding: 10px 14px; border-left: 4px solid #a15c00; background: rgba(161,92,0,.08); font-size: 13.5px; }
body.acid .mkt-ph { border-radius: 0; background: #FFB020; color: #0D0B11; } body.acid .mkt-sec.placeholder { border-color: #FFB020 !important; } body.acid .mkt-ph-note { border-color: #FFB020; background: rgba(255,176,32,.1); }
.ev-vd { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid currentColor; }
.ev-vd-go { background: #2e7d32; border-color: #2e7d32; color: #fff; } .ev-vd-look { color: #2e7d32; } .ev-vd-later { color: #a15c00; } .ev-vd-skip { color: #8b8376; }
.ev-vline { margin: 0 0 8px; font-size: 13.5px; } .ev-acc { font-weight: 800; } .ev-acc-high { color: #2e7d32; } .ev-acc-medium { color: #a15c00; } .ev-acc-low, .ev-acc-invite { color: #b42318; }
.ev-tent { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); font-style: italic; }
body.acid .ev-vd { border-radius: 0; } body.acid .ev-vd-go { background: #35E0A1; border-color: #35E0A1; color: #0D0B11; } body.acid .ev-vd-look, body.acid .ev-acc-high { color: #35E0A1; }
.ev-wholbl { margin: 10px 0; } .ev-wholbl .fl-n { display: block; position: static; font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.ev-dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } .ev-dl dt { margin-top: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } .ev-dl dd { min-width: 0; overflow-wrap: anywhere; } .ev-dl dd small { color: var(--ink-soft); }
.ev-vline .ev-vd { margin-right: 4px; }
body.acid .mkt-sec.placeholder .mkt-ta { font-weight: 400; }
body.acid .mkt-sec.placeholder .mkt-ta { font-style: normal; color: #B8B5C0; }
/* Me › My calendar (7 Oct 2026) */
.myc-tabs { margin: 4px 0 14px; }
.myc-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.myc-pill { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.myc-pill small { font-weight: 500; opacity: .8; margin-right: 2px; } .myc-l3 { color: #2e7d32; } .myc-l2 { color: #a15c00; } .myc-l1 { color: #b42318; } .myc-l0 { color: var(--ink-soft); }
.ev-tl-chip.res { border-color: #3b6fb6; color: #3b6fb6; }
.myc-next { margin: 4px 0 20px; } .myc-nrow { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.myc-nrow:hover { background: var(--paper); } .myc-nrow:focus-visible { outline: 2px solid var(--accent); } .myc-nd { font-weight: 700; font-size: 13px; } .myc-nl { font-size: 14px; }
.myc-method { font-size: 13px; color: var(--ink-soft); margin: 0 0 10px; max-width: 70ch; }
.myc-hm-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.myc-hm { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.myc-hm th, .myc-hm td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--line); }
.myc-hm thead th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.myc-hm tbody th { text-align: left; white-space: nowrap; } .myc-hm tbody th small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 11.5px; }
.myc-hr { cursor: pointer; } .myc-hr:hover th { color: var(--accent); } .myc-hr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hm { font-weight: 800; } .hm0 { background: transparent; color: var(--ink-soft); }
.hm1 { background: #f3d9d4; color: #6e1b10; } .hm2 { background: #f6e3c8; color: #6b3d00; } .hm3 { background: #efe9b8; color: #4e4700; } .hm4 { background: #cfe8c4; color: #1d4d18; } .hm5 { background: #2e7d32; color: #fff; }
.myc-key { display: inline-block; padding: 2px 8px; border-radius: 4px; margin: 0 2px; }
.myc-hd td { text-align: left; background: var(--paper); font-size: 13.5px; } .myc-hd p { margin: 4px 0; }
body.acid .hm1 { background: #3a1420; color: #ff9fbf; } body.acid .hm2 { background: #3a2a14; color: #ffc97a; } body.acid .hm3 { background: #33331a; color: #f1ea8a; } body.acid .hm4 { background: #173a2a; color: #9ff2c8; } body.acid .hm5 { background: #35E0A1; color: #0D0B11; }
body.acid .myc-hm-wrap { border-radius: 0; }
@media (max-width: 760px) { .myc-nrow { grid-template-columns: 1fr auto; } .myc-nd { grid-column: 1 / -1; } }
.myc-sub { margin: -4px 0 6px; font-size: 13px; color: var(--ink-soft); } .myc-tbc .myc-nl small { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 2px; }
.myc-out { margin-top: 14px; } .myc-out > summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--ink-soft); padding: 8px 0; }
.myc-how { display: inline; } .myc-how summary { display: inline; cursor: pointer; text-decoration: underline; } .myc-how[open] { display: block; margin-top: 6px; }
.hm-s { display: none; }
@media (max-width: 760px) {
  .myc-tabs { flex-wrap: wrap; overflow: visible; }
  .myc-hm { min-width: 0; font-size: 12px; } .myc-hm th, .myc-hm td { padding: 6px 4px; } .myc-hm tbody th { white-space: normal; max-width: 92px; }
  .hm-l { display: none; } .hm-s { display: inline; } .myc-hm thead th { font-size: 10px; letter-spacing: .02em; }
  .ev-tl-grid { grid-template-columns: repeat(12, 150px) !important; } .ev-tl-chip > span { -webkit-line-clamp: 4; }
}
body.acid .hm1 { background: #5a1a2c; color: #ffd0de; } body.acid .hm2 { background: #6b4a12; color: #ffe2b0; } body.acid .hm3 { background: #5d5a18; color: #fffbc4; } body.acid .hm4 { background: #1f7a52; color: #e6fff2; } body.acid .hm5 { background: #35E0A1; color: #0D0B11; }
body.acid .myc-pill small { opacity: 1; color: #D4D2DA; }
@media (max-width: 760px) { .view-tabs.myc-tabs, body.acid .view-tabs.myc-tabs { flex-wrap: wrap !important; overflow: visible !important; } }
@media (max-width: 760px) { .myc-hm th, .myc-hm td { padding: 5px 2px !important; } .myc-hm tbody th { max-width: 78px; padding-left: 6px !important; } .myc-hm { font-size: 11.5px; } .myc-hd td { padding: 8px !important; overflow-wrap: anywhere; } }
/* Home order (Aaron, 7 Oct 2026): Brain dump, Discussions, My tasks, From your brain dumps, What's new last; the calendar card is gone
   (My calendar lives in Me). Wide screens: two columns that read left to right, What's new across the bottom. */
.home-cols > .hc { order: 0 !important; }
@media (min-width: 1100px) {
  .home-cols { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); grid-template-areas: "dump board" "tasks bdfrom" "hint bdfrom" "new new"; gap: 22px 26px; align-items: start; }
  .home-cols > .hc-dump { grid-area: dump; } .home-cols > .hc-board { grid-area: board; } .home-cols > .hc-tasks { grid-area: tasks; }
  .home-cols > .hc-bdfrom { grid-area: bdfrom; } .home-cols > .hc-hint { grid-area: hint; } .home-cols > .hc-new { grid-area: new; }
  .home-cols > .hc-bdfrom:has(> #bd-from[hidden]) { display: none; }
}
@media (min-width: 1100px) { .home-cols:has(#bd-from[hidden]) { grid-template-areas: "dump board" "tasks tasks" "hint hint" "new new"; } }
@media (min-width: 1100px) {
  .home-cols { grid-template-areas: "dump board" "tasks bdfrom" "hint bdfrom" "extra extra" "new new"; }
  .home-cols:has(#bd-from[hidden]) { grid-template-areas: "dump board" "tasks tasks" "hint hint" "extra extra" "new new"; }
  .home-cols:not(:has(> .hc-dump)) { grid-template-areas: "board board" "tasks bdfrom" "hint bdfrom" "extra extra" "new new"; }
  .home-cols:not(:has(> .hc-dump)):has(#bd-from[hidden]) { grid-template-areas: "board board" "tasks tasks" "hint hint" "extra extra" "new new"; }
  .home-cols > .hc-extra { grid-area: extra; }
  .home-cols > .hc-dump, .home-cols > .hc-board { align-self: stretch; } .home-cols > .hc-dump > .card, .home-cols > .hc-board > .card { height: 100%; box-sizing: border-box; }
}
.hc-extra .nc-row { margin: 0; }

/* ============ NEWS style (Aaron, 7 Oct 2026) — "design wise make it like higgsfield website inspired, colours and design".
   Tokens read from higgsfield.ai: page #0F1113, cards #1C1E21 (16px, no border/shadow), tiles #23262A (8px), text #F7F7F8, muted #898A8B,
   one lime accent #D1FE17 with #1A1A1A on it; type Inter / Space Grotesk (uppercase headings, -4% tracking) / Space Mono labels.
   Lean dots stay red / blue / green (Aaron's colours); the centre green is a true green so it never reads as the lime accent. */
body.news {
  --ink: #F7F7F8; --ink-2: #E6E7E9; --ink-soft: #B9BABC; --ink-faint: #898A8B; --paper: #0F1113; --panel: #1C1E21; --panel-2: #23262A;
  --line: rgba(255,255,255,.08); --accent: #D1FE17; --accent-ink: #1A1A1A; --shadow: none;
  --display: "Space Grotesk", "Inter", sans-serif; --body: "Inter", system-ui, sans-serif;
  background: #0F1113; color: #F7F7F8; color-scheme: dark; font-family: "Inter", system-ui, sans-serif;
}
body.news .main { background: transparent; }
body.news .side, body.news .mbar { background: #0B0C0E; border-color: rgba(255,255,255,.06); }
body.news .nav-item { color: #B9BABC; border-radius: 8px; } body.news .nav-item:hover { background: #1C1E21; color: #F7F7F8; }
body.news .nav-item.active { background: #23262A; color: #F7F7F8; box-shadow: inset 3px 0 0 #D1FE17; }
body.news .nav-sec-h.nav-label { font-family: "Space Mono", monospace; letter-spacing: .08em; color: #898A8B !important; }
body.news .card, body.news .ev-row, body.news .mkt-sec, body.news .modal { background: var(--panel); border-color: transparent; border-radius: 16px; box-shadow: none; }
body.news h1, body.news h2, body.news h3, body.news .page-head h1 { font-family: "Space Grotesk", "Inter", sans-serif; letter-spacing: -.04em; }
body.news .btn { border-radius: 10px; } body.news .btn.primary, body.news .side-add { background: #D1FE17 !important; border-color: #D1FE17 !important; color: #1A1A1A !important; }
body.news .btn.primary:hover, body.news .side-add:hover { background: #E4FF66 !important; }
body.news .minput { background: var(--panel-2); border-color: var(--line); color: var(--ink); border-radius: 8px; }
body.news a { color: var(--ink); } body.news .linkbtn { color: var(--news-link, #D1FE17); }

/* The command centre */
.nh { max-width: 1800px; margin: 0 auto; }
.nh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 14px; }
.nh-kick { margin: 0; font: 700 11px/1 "Space Mono", monospace; letter-spacing: .14em; color: #D1FE17; }
.nh-title { margin: 6px 0 4px; font: 700 clamp(30px, 4vw, 52px)/1 "Space Grotesk", sans-serif; letter-spacing: -.04em; text-transform: uppercase; color: #F7F7F8; }
.nh-sub { margin: 0; color: #898A8B; font-size: 13.5px; }
.nh-ticker { display: flex; gap: 8px; overflow-x: auto; padding: 10px; margin: 0 0 12px; background: #1C1E21; border-radius: 16px; scrollbar-width: none; }
.nh-ticker::-webkit-scrollbar { display: none; }
.nh-tk { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 8px; background: #23262A; font: 500 12.5px "Space Mono", monospace; color: #F7F7F8; white-space: nowrap; }
.nh-tk b { font-weight: 700; color: #B9BABC; } .nh-tk em { font-style: normal; } .nh-tk.up em { color: #4ADE80; } .nh-tk.dn em { color: #F87171; }
.nh-tk-src, .nh-tk-load { flex: 0 0 auto; align-self: center; font: 11px "Space Mono", monospace; color: #898A8B; padding: 0 6px; }
.nh-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 22px; font: 12px "Space Mono", monospace; color: #B9BABC; }
.nh-legend span { display: inline-flex; align-items: center; gap: 6px; } .nh-legend small { flex-basis: 100%; color: #898A8B; font-family: "Inter", sans-serif; font-size: 12px; }
.nl { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.nl-left { background: #3B82F6; } .nl-center { background: #22C55E; } .nl-right { background: #EF4444; } .nl-none { background: #5B5E63; }
.nh-sec { margin: 0 0 30px; }
.nh-sh { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 700 15px "Space Grotesk", sans-serif; letter-spacing: -.02em; text-transform: uppercase; color: #F7F7F8; }
.nh-sh::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.nh-sh span::before { content: "■ "; color: #D1FE17; }
.nh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.nh-card { background: #1C1E21; border-radius: 16px; padding: 16px 16px 10px; display: flex; flex-direction: column; min-width: 0; }
.nh-card header h3 { margin: 0; font: 700 16px "Space Grotesk", sans-serif; letter-spacing: -.04em; text-transform: uppercase; color: #F7F7F8; }
.nh-card header p { margin: 3px 0 10px; font-size: 12.5px; color: #898A8B; }
.nh-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nh-items a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: #F7F7F8; background: transparent; }
.nh-items a:hover { background: #23262A; } .nh-items a:focus-visible { outline: 2px solid #D1FE17; outline-offset: 0; }
.nh-h { display: block; font-size: 14px; line-height: 1.35; font-weight: 500; }
.nh-m { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: 11.5px "Space Mono", monospace; color: #898A8B; }
.nh-more { all: unset; cursor: pointer; margin: 6px 10px 4px; font: 700 12px "Space Mono", monospace; color: #D1FE17; } .nh-more:focus-visible { outline: 2px solid #D1FE17; }
.nh-wait { color: #898A8B; font-size: 13px; padding: 8px 10px; margin: 0; }
@media (max-width: 760px) { .nh-grid { grid-template-columns: 1fr; } .nh-title { font-size: 30px; } }
.nh-note { margin: -4px 0 12px; font: 12px "Space Mono", monospace; color: #D1FE17; opacity: .85; }
.nh-sec-tinfoil .nh-sh span::before { content: "◬ "; }
.myc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 14px; } .myc-top .myc-tabs { margin: 0; }
.myc-upd { color: #3b6fb6; } body.acid .myc-upd { color: #A8EBFF; }
.myc-upd-box { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid #3b6fb6; border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; }
.myc-upd-h { display: flex; align-items: center; justify-content: space-between; } .myc-upd-h h3 { margin: 0; font-size: 15px; }
.myc-upd-box h4 { margin: 12px 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.myc-upd-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; } .myc-upd-list small { color: var(--ink-soft); } .myc-upd-list .btn { margin-left: 6px; padding: 2px 10px; }
body.acid .myc-upd-box { border-radius: 0; border-left-color: #A8EBFF; }
.myc-sv { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: start; } .myc-sv-img img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; display: block; }
.myc-sv-name { font-weight: 800; font-size: 15px; margin: 0 0 4px; } .myc-sv-name small { font-weight: 500; color: var(--ink-soft); } .myc-sv p { margin: 0 0 6px; font-size: 13.5px; }
.myc-wh { margin: 12px 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.myc-win { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; } .myc-win small { display: block; color: var(--ink-soft); }
@media (max-width: 760px) { .myc-sv { grid-template-columns: 80px 1fr; } .myc-sv-img img { width: 80px; height: 80px; } }
body.acid .myc-sv-img img { border-radius: 0; }
.myc-row .myc-best { font-size: 12px; color: var(--ink-soft); }
.myc-sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.myc-scard { display: grid; grid-template-columns: 96px 1fr; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.myc-scov img, .myc-snone { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display: grid; place-items: center; background: var(--paper); font-weight: 800; font-size: 28px; color: var(--ink-soft); }
.myc-sbody h3 { margin: 2px 0 4px; font-size: 15px; } .myc-sbody h3 a { text-decoration: none; } .myc-sfit { margin: 6px 0 0; font-size: 12.5px; }
body.acid .myc-scard, body.acid .myc-scov img, body.acid .myc-snone { border-radius: 0; }
body.acid .myc-upd-list .btn { background: #24222A; color: #F4F3F0; border-color: #E23C8E; } body.acid .myc-upd-list .btn:hover { background: #E23C8E; color: #fff; }
.myc-dup { color: #a15c00; } body.acid .myc-dup { color: #FFB020; }
@media (max-width: 480px) { .myc-sv { grid-template-columns: 1fr; } .myc-sv-img img { width: 100%; height: 160px; } }
/* Co-Star-style chart table (Aaron, 7 Oct 2026): monochrome grid — signs | planets | houses, vertical side labels, serif house numbers. */
.cs-switch { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin: 0 0 12px; }
.cs-seg { display: inline-flex; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; overflow: hidden; }
.cs-seg button { all: unset; cursor: pointer; padding: 5px 14px; font: 600 12px/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .06em; color: inherit; opacity: .7; }
.cs-seg button.on { background: #F2F2F2; color: #111; opacity: 1; } .cs-seg button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.cs-wrap { background: #111; color: #F2F2F2; border-radius: 10px; padding: 16px 10px 12px; }
.cs-big3 { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin: 0 0 14px; font: 15px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .04em; }
.cs-table { position: relative; margin: 0 26px; border: 1px solid rgba(255,255,255,.18); }
.cs-side { position: absolute; top: 4px; font: 600 13px/1.25 "JetBrains Mono", ui-monospace, monospace; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .1em; color: #F2F2F2; }
.cs-side-l { left: -24px; } .cs-side-r { right: -24px; top: auto; bottom: 4px; }
.cs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) 64px; border-top: 1px solid rgba(255,255,255,.18); } .cs-row:first-of-type { border-top: 0; }
.cs-sign { padding: 12px 12px; font: 400 15px/1.3 "Inter", system-ui, sans-serif; border-right: 1px solid rgba(255,255,255,.18); }
.cs-pl { padding: 10px 12px; background: #0A0A0A; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid rgba(255,255,255,.18); }
.cs-p { font: 500 13.5px/1.2 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.cs-g { width: 16px; text-align: center; font-size: 14px; }
.cs-house { display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px 12px; font: 400 34px/1 "Cinzel", Georgia, "Times New Roman", serif; }
@media (max-width: 480px) { .cs-table { margin: 0 20px; } .cs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 44px; } .cs-sign { font-size: 13.5px; padding: 10px 8px; } .cs-p { font-size: 12px; } .cs-house { font-size: 26px; padding: 6px 8px; } .cs-side-l { left: -19px; } .cs-side-r { right: -19px; } }
.cs-sum { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); }
.cs-sum .astro-h { margin: 0 0 6px; } .cs-sum-t { margin: 0; font-size: 14px; line-height: 1.55; } .cs-sum-t small { display: block; margin-top: 8px; }
.cs-nohouse .cs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } .cs-nohouse .cs-house { display: none; } .cs-nohouse .cs-pl { border-right: 0; }
.cs-p .al-r { color: inherit !important; opacity: .65; font-style: normal; }
.cs-sign { overflow-wrap: anywhere; } .cs-p { white-space: nowrap; } .cs-g { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 480px) { .cs-big3 { gap: 10px; font-size: 13px; } }
@media (max-width: 480px) {
  .cs-wrap { padding: 12px 4px 10px; } .cs-table { margin: 0 18px; }
  .cs-row, .cs-nohouse .cs-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr) 38px; } .cs-nohouse .cs-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); }
  .cs-sign { font-size: 13px; padding: 9px 6px; } .cs-pl { padding: 8px 6px; gap: 10px; } .cs-p { font-size: 11px; letter-spacing: .01em; gap: 5px; } .cs-g { width: 12px; font-size: 12px; }
  .cs-house { font-size: 24px; padding: 6px 5px; } .cs-side-l { left: -16px; } .cs-side-r { right: -16px; } .cs-side { font-size: 11px; }
}
/* ============ My Art redesign (Aaron, 7 Oct 2026) — logo + valuation head, one action bar, one filter bar, one view bar,
   series headers that stand out. Uses each style's own tokens (--ink, --panel, --line, --accent, --display) so it fits every look. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.art-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; }
#art-head-in { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.art-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.art-brand h1 { margin: 0; }
.art-logo { width: 96px; height: 96px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
.art-tag { margin: 0; color: var(--ink-soft); font-size: 13.5px; max-width: 34ch; }
.art-head .ptip-link { margin-left: 0; }
/* valuation, compact on the right; details drop below */
.art-head .art-val { margin: 0; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 0; min-width: 0; }
.art-head .art-val > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto auto; grid-template-areas: "k chev" "sum chev" "hint chev"; column-gap: 14px; padding: 10px 16px; }
.art-head .art-val > summary::-webkit-details-marker { display: none; }
.art-head .art-val > summary::after { content: "▾"; grid-area: chev; align-self: center; color: var(--ink-soft); transition: transform .15s; }
.art-head .art-val[open] > summary::after { transform: rotate(180deg); }
.art-head .av-k { grid-area: k; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.art-head .av-sum { grid-area: sum; font-size: 13.5px; } .art-head .av-sum b:first-child { font-family: var(--display); font-size: 26px; line-height: 1.1; margin-right: 6px; display: inline-block; }
.art-head .av-hint { grid-area: hint; font-size: 12px; color: var(--ink-soft); }
.art-head .art-val[open] .av-body { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(820px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.28); max-height: 70vh; overflow: auto; }
/* action bar */
.art-actbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 12px; }
.art-actbar .art-cats { margin: 0; } .aab-sp { flex: 1; }
.art-sharebtn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 13px; }
.art-sharebtn:hover { border-color: var(--accent); } .art-sharebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.asb-t { display: flex; flex-direction: column; line-height: 1.15; } .asb-t small { color: var(--ink-soft); font-size: 11.5px; } .asb-c { color: var(--accent); font-weight: 700; font-size: 12.5px; }
.art-tmenu { display: flex; flex-direction: column; gap: 2px; min-width: 260px; }
.art-tmenu button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; } .art-tmenu button:hover, .art-tmenu button:focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.art-tmenu small { color: var(--ink-soft); font-size: 12px; }
/* filter bar */
.art-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px; margin: 0 0 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.art-q { flex: 1 1 220px; min-width: 0; }
.art-fsel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; } .art-fsel .minput { text-transform: none; letter-spacing: 0; min-width: 0; max-width: 260px; }
.art-morefb.on { border-color: var(--accent); color: var(--accent); }
.art-fbar .ct-count { margin-left: auto; color: var(--ink-soft); font-size: 12.5px; } .art-fbar .art-ckall { font-size: 13px; }
.art-filters.open { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
/* view bar */
.art-vbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; }
.art-vbar .art-views { margin: 0; } .art-vbar .art-tl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); } .art-collall { margin-left: auto; }
/* series headers */
.art-gh2 { display: flex; align-items: center; gap: 10px; margin: 26px 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.art-gchev { all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; flex: 0 0 auto; }
.art-gchev:hover, .art-gchev:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.art-gt { margin: 0; } .art-gtb { all: unset; cursor: pointer; font-family: var(--display); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
.art-gtb:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.art-gh2 .art-count { font-size: 12px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); }
.art-gval { margin-left: auto; text-align: right; font-size: 14px; } .art-gval small { display: block; font-size: 11px; color: var(--ink-soft); }
.art-gh2 + .art-sdesc { margin: 0 0 14px 40px; max-width: 78ch; }
.art-cks .art-gh2 + .art-sdesc { margin-left: 70px; }
.art-group.collapsed .art-gh2 { margin-bottom: 0; }
@media (max-width: 760px) {
  .art-logo { width: 64px; height: 64px; } .art-head .art-val { width: 100%; } .art-head .art-val[open] .av-body { position: static; width: auto; margin: 0 10px 10px; box-shadow: none; }
  .art-sharebtn { flex: 1 1 100%; } .aab-sp { display: none; } .art-actbar .btn { flex: 1 1 auto; }
  .art-fsel { flex: 1 1 45%; } .art-fsel span { display: none; } .art-fsel .minput { width: 100%; max-width: none; }
  .art-fbar .ct-count { margin-left: 0; } .art-vbar .art-views { width: 100%; overflow-x: auto; } .art-collall { margin-left: 0; }
  .art-gh2 + .art-sdesc, .art-cks .art-gh2 + .art-sdesc { margin-left: 0; } .art-gval { flex-basis: 100%; text-align: left; margin-left: 40px; }
}
body.acid .art-head .art-val, body.acid .art-fbar, body.acid .art-sharebtn, body.acid .art-gchev { border-radius: 0; }
body.acid .art-gtb { font-family: "Inter Tight", sans-serif; font-weight: 900; text-transform: uppercase; }
body.news .art-gtb { font-family: "Space Grotesk", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -.04em; }
.art-gh.art-gh2 { justify-content: flex-start; } .art-gh2 h3.art-gt { margin-right: 0 !important; }
@media (min-width: 1100px) { .art-fbar { flex-wrap: nowrap; } .art-fbar .art-ckall { white-space: nowrap; } }
.art-logo { width: 112px; height: 112px; }
@media (max-width: 760px) { .art-logo { width: 64px; height: 64px; } }
/* My Art redesign — judge fixes (7 Oct 2026) */
@media (min-width: 900px) { #art-head-in { flex-wrap: nowrap; } .art-brand { flex: 1 1 auto; } .art-head .art-val { flex: 0 1 470px; } }
.art-logo { width: 120px; height: 120px; padding: 10px; box-sizing: border-box; border-radius: 16px; background: #15120E; }
body.acid .art-logo, body.news .art-logo, body.mode-dark .art-logo { background: transparent; padding: 0; }
.art-head .art-val > summary { grid-template-areas: "k chev" "sum sum" "hint hint"; }
.art-head .art-val > summary::after { content: "Details ▾"; justify-self: end; align-self: start; font-size: 12px; font-weight: 700; color: var(--accent); }
.art-head .art-val[open] > summary::after { content: "Close ▴"; transform: none; }
.art-morefb, .art-fbar .ct-count, .art-fbar .art-ckall { white-space: nowrap; }
.art-gchev { width: 34px; height: 34px; border: 1.5px solid color-mix(in srgb, var(--ink) 45%, transparent); background: var(--panel); color: var(--ink); font-size: 15px; }
.art-gchev:hover, .art-gchev:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.art-gh2 + .art-sdesc { margin-left: 44px; } .art-cks .art-gh2 + .art-sdesc { margin-left: 74px; }
.artg-s .artg-cap, .artg .artg-cap { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
body.news .art-row { background: var(--panel); border-color: var(--line); }
body.f1 .art-gtb { font-family: "Titillium Web", sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; }
body.huntress .art-gtb { font-family: "Cinzel", serif; font-weight: 700; letter-spacing: .02em; }
@media (max-width: 760px) {
  .art-actbar .art-new { display: inline-flex; position: static; margin-left: 0; }
  .art-vbar .art-views { width: auto; overflow: visible; } .art-vbar .vt { display: none; } .art-vbar .seg-b { padding: 6px 10px; }
  .art-vbar { padding-right: 70px; }
  .art-gh2 + .art-sdesc, .art-cks .art-gh2 + .art-sdesc { margin-left: 44px; }
  .art-head .av-sum b:first-child { font-size: 22px; } .art-tag { display: none; } .art-logo { width: 72px; height: 72px; padding: 6px; }
}
/* People › Crew & connections (7 Oct 2026): the longer tab name wraps onto two lines on a phone instead of being cut off. */
@media (max-width: 760px) { .gtab[data-gtab-btn="staff"] .gtab-l { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; line-height: 1.15; } }
/* My Art in NEWS (judge, 7 Oct 2026): the row text used a fixed dark ink and vanished on the dark NEWS panel — use the style's own ink. */
body.news .art-v, body.news .art-title, body.news .art-gh h3, body.news .pf-name b, body.news .soc-name, body.news .soc-acc a, body.news .tc-title, body.news .m-tt { color: var(--ink); }
body.news .art-v.none { color: var(--ink-faint); }
body.news .art-thumb.noimg { background: var(--panel-2); color: var(--ink-soft); } body.news .art-thumb.noimg b { color: var(--ink-soft); }
/* My Art judge fixes, round 3 (7 Oct 2026): long titles get two lines instead of being cut; each sold amount stays on one line, and the
   valuation card is a little wider on big screens so the line doesn't break. */
.art-rows .art-row .art-title, .artl-row:not(.artl-h) > b, .artn-t b { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; text-overflow: clip; }
.art-head .av-sum b { white-space: nowrap; }
@media (min-width: 1400px) { .art-head .art-val { flex-basis: 560px; } }
@media (max-width: 760px) { .art-brand { min-width: 0; } .art-logo { flex: 0 0 auto; object-fit: contain; } #art-head-in { padding-right: 4px; } }
/* My Art + People judge fixes, round 4 (7 Oct 2026) */
.art-gh2 + .art-sdesc, .art-cks .art-gh2 + .art-sdesc { margin-left: 0; } /* set exactly by alignArtDesc() */
.art-rows .art-row .art-title { overflow-wrap: anywhere; word-break: break-word; }
.art-row .art-id, .art-row .art-tline { min-width: 0; }
.art-logo, body.acid .art-logo, body.news .art-logo, body.mode-dark .art-logo { padding: 10px; border-radius: 10px; object-fit: contain; }
@media (max-width: 760px) { .art-logo, body.acid .art-logo, body.news .art-logo, body.mode-dark .art-logo { width: 76px; height: 76px; padding: 7px; border-radius: 8px; } }
body.news .nav-badge { color: #0F1113; }
body.news .side-toggle, body.news .side-toggle:hover { color: #0F1113; }
@media (max-width: 760px) { #main { padding-bottom: 96px; } .art-gh.art-gh2 { flex-wrap: nowrap; } .art-gh2 .art-count { flex: 0 0 auto; } .art-gh2 .art-gt { min-width: 0; } }
.adm-type { display: flex; gap: 6px; } .adm-type select { flex: 0 0 auto; width: auto; min-width: 118px; } .adm-type input { flex: 1 1 auto; min-width: 0; }
/* My Art on a phone (judge, 7 Oct 2026): the status and buttons sit under the title, so the title gets the full width. */
@media (max-width: 560px) {
  #art-body .art-rows .art-row { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "th id" "th st"; row-gap: 6px; }
  #art-body .art-rows .art-row > .art-acts { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin-left: 0; }
}
/* Judge round 5 (7 Oct 2026) */
@media (max-width: 760px) {
  .art-gh.art-gh2 { flex-wrap: wrap; row-gap: 2px; }
  .art-gh2 .art-gt { flex: 1 1 0; min-width: 0; }
  .art-gh2 .art-gval { flex: 0 0 calc(100% - 44px); max-width: calc(100% - 44px); margin-left: 44px; text-align: left; min-width: 0; }
  .art-cks .art-gh2 .art-gval { flex-basis: calc(100% - 74px); max-width: calc(100% - 74px); margin-left: 74px; }
}
.adm-grid .fl:has(.adm-type) { grid-column: 1 / -1; }
.art-head .av-sum { padding-right: 8px; } .art-head .art-val > summary { column-gap: 14px; }
@media (max-width: 560px) {
  #art-body .art-rows .art-row { position: relative; } #art-body .art-rows .art-row .art-id { padding-right: 38px; }
  #art-body .art-rows .art-row > .art-acts .art-more { position: absolute; top: 10px; right: 10px; }
}
/* F1 › Art world matched to your work (7 Oct 2026): why each story is here, and what the card matched to. */
.nc-why { font-style: normal; font-size: 11.5px; letter-spacing: .02em; opacity: .9; }
.nc-f1 .nc-why { color: #ff5a4e; font-family: "Titillium Web", var(--body), sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.nc-prof { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: -2px 0 10px; font-size: 12px; opacity: .85; line-height: 1.4; }
.nc-prof span { padding: 1px 8px; border: 1px solid currentColor; border-radius: 99px; font-size: 11.5px; opacity: .85; }
.nc-prof .linkbtn { color: inherit; font-size: 12px; text-decoration: underline; padding: 0; }
/* Judge round 6 (7 Oct 2026): People Type picker and detail side by side (stacked on a phone); phone valuation — "Details" on the label row. */
.adm-type { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
.adm-type .minput, .adm-type select.minput, .adm-type input.minput { width: auto !important; min-width: 0 !important; max-width: 100%; }
@media (max-width: 560px) { .adm-type { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .art-head .art-val > summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k chev" "sum sum" "hint hint"; row-gap: 4px; }
  .art-head .art-val > summary::after { align-self: center; }
}
.art-head .art-val > summary::after { position: static; white-space: nowrap; } .art-head .art-val > summary { padding-right: 16px; }
@media (max-width: 760px) { .nc-list { max-height: none; overflow: visible; } .nc-row { margin-bottom: 72px; } }
.av-nb { white-space: nowrap; }
/* My Art (Aaron, 7 Oct 2026: "the series description and title look disconnected from the artworks below it"): each series is one
   framed panel — accent edge on top, title and description as its header, a divider, then its pieces inside the same frame. */
#art-body section.art-group[data-ag] { position: relative; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 60%, transparent); padding: 14px 14px 12px; margin: 0 0 22px; }
#art-body section.art-group[data-ag] > .art-gh2 { margin: 0; padding: 0 0 6px; }
#art-body section.art-group[data-ag] > .art-sdesc { margin-bottom: 12px; padding-bottom: 12px; }
#art-body section.art-group[data-ag] > .art-sdesc { border-bottom: 1px solid var(--line); }
#art-body section.art-group[data-ag]:not(.collapsed) > .art-gh2:not(:has(+ .art-sdesc)) { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
#art-body section.art-group[data-ag] > .art-sdesc + * { margin-top: 0; }
#art-body section.art-group[data-ag].collapsed { padding-bottom: 8px; }
#art-body section.art-group[data-ag] .art-addin { margin-bottom: 0; }
body.acid #art-body section.art-group[data-ag] { background: rgba(255,255,255,.025); }
@media (max-width: 760px) { #art-body section.art-group[data-ag] { padding: 12px 8px 10px; border-radius: 12px; } }
#art-body section.art-group[data-ag] > .art-sdesc { border-bottom: 0; padding-bottom: 0; }
#art-body section.art-group[data-ag]:not(.collapsed) > .art-sdesc + * { border-top: 1px solid var(--line); padding-top: 12px; }
/* Series panel, judge round 2: no line between a title and its description; full-width description and value on a phone. */
#art-body section.art-group[data-ag] > .art-gh2 { border-bottom: 0; }
#art-body section.art-group[data-ag]:not(.collapsed) > .art-gh2:not(:has(+ .art-sdesc)) { border-bottom: 1px solid var(--line); }
body.acid #art-body section.art-group[data-ag] { background: rgba(255,255,255,.045); }
@media (max-width: 760px) { #art-body section.art-group[data-ag] .art-gh2 .art-gval { margin-left: 0; flex-basis: 100%; max-width: 100%; } }
@media (max-width: 760px) { #art-body section.art-group[data-ag] .art-gh2 .art-gval { margin-top: 4px; } }
/* NEWS: cards start closed — the header is the button; Open all / Close all beside Refresh (Aaron, 7 Oct 2026). */
.nh-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.nh-card { padding: 0; }
.nh-ch { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; padding: 16px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 16px; }
.nh-ch:hover h3 { color: #D1FE17; } .nh-ch:focus-visible { outline: 2px solid #D1FE17; outline-offset: -3px; }
.nh-ch .nh-cht { min-width: 0; } .nh-ch .nh-cht p { margin: 3px 0 0; font-size: 12.5px; color: #898A8B; }
.nh-chev { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 99px; border: 1px solid rgba(255,255,255,.16); color: #B9BABC; font-size: 13px; transition: transform .15s; }
.nh-card.open .nh-chev { transform: rotate(180deg); background: #D1FE17; border-color: #D1FE17; color: #0F1113; }
.nh-card .nh-list { padding: 0 16px 10px; }
.nh-grid { align-items: start; }
.nh-ch h3 { margin: 0; font: 700 16px "Space Grotesk", sans-serif; letter-spacing: -.04em; text-transform: uppercase; color: #F7F7F8; transition: color .12s; }
/* My Art navigation (Aaron, 7 Oct 2026: "better collapse tools for easy navigation … another option of 3 x the current smallest"). */
.art-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.art-nav .art-jump { width: auto; min-width: 210px; max-width: 320px; }
.art-cseg .seg-b[disabled] { opacity: .4; cursor: default; }
.art-one { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.art-navn { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
/* A folded series shows its pictures as a strip — a visual index; tap it to open the series. */
.art-strip { display: flex; align-items: center; gap: 5px; width: 100%; margin: 4px 0 2px; padding: 4px 0 2px; background: none; border: 0; cursor: pointer; overflow: hidden; }
.art-strip .art-thumb { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 6px; } .art-strip .art-thumb b { font-size: 12px; } .art-strip .car-c { display: none; }
.art-strip:hover .art-thumb, .art-strip:focus-visible .art-thumb { outline: 2px solid var(--accent); outline-offset: 1px; }
.art-strip-n { flex: 0 0 auto; font-size: 12px; color: var(--ink-faint); padding: 0 6px; }
#art-body section.art-group[data-ag].collapsed { padding-bottom: 10px; }
/* The open series' header stays in view while you scroll its pieces, so you can fold it from anywhere. */
#art-body section.art-group[data-ag]:not(.collapsed) > .art-gh2 { position: sticky; top: 0; z-index: 6; background: var(--paper); margin: -14px -14px 0; padding: 14px 14px 6px; border-radius: 13px 13px 0 0; }
body.acid #art-body section.art-group[data-ag]:not(.collapsed) > .art-gh2 { background: #121014; }
/* Tiny grid: about three times as many as Small per screen. */
.artg.artg-s.artg-t { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 3px; }
.artg-t .artg-card { border-radius: 4px; } .artg-t .artg-cap { display: none !important; } .artg-t .artg-dot { width: 5px; height: 5px; top: 3px; right: 3px; }
@media (max-width: 760px) {
  .artg.artg-s.artg-t { grid-template-columns: repeat(auto-fill, minmax(31px, 1fr)); gap: 2px; }
  .art-nav { gap: 8px; } .art-nav .art-jump { flex: 1 1 100%; max-width: none; min-width: 0; } .art-navn { margin-left: 0; }
  #art-body section.art-group[data-ag]:not(.collapsed) > .art-gh2 { top: var(--art-stick, 56px); margin: -12px -8px 0; padding: 12px 8px 6px; }
  .art-strip .art-thumb { width: 34px; height: 34px; }
}
/* Judge round (7 Oct 2026): Tiny tiles keep the picture clear — the tick box appears on hover/focus or once something is selected. */
.artg-t .art-ck { width: 13px !important; height: 13px !important; top: 3px !important; left: 3px !important; opacity: 0; transition: opacity .12s; }
.artg-t .art-selwrap:hover .art-ck, .artg-t .art-ck:focus-visible, .artg-t .art-ck:checked, .artg-t.sel-on .art-ck { opacity: 1; }
@media (hover: none) { .artg-t:not(.sel-on) .art-ck:not(:checked) { display: none; } }
/* Folded series on a phone: title, count and value on one row; the strip shows "+N" for what doesn't fit. */
.art-strip-np { display: none; flex: 0 0 auto; font-size: 12px; color: var(--ink-faint); padding: 0 6px; }
@media (max-width: 760px) {
  #art-body section.art-group[data-ag].collapsed .art-gh2 { flex-wrap: nowrap; }
  #art-body section.art-group[data-ag].collapsed .art-gh2 .art-gt { flex: 1 1 auto; min-width: 0; } #art-body section.art-group[data-ag].collapsed .art-gtb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
  #art-body section.art-group[data-ag].collapsed .art-gh2 .art-gval { flex: 0 0 auto; max-width: none; margin: 0 0 0 auto; text-align: right; } #art-body section.art-group[data-ag].collapsed .art-gval small { display: none; }
  .art-strip .art-thumb:nth-of-type(n+8), .art-strip .art-strip-n { display: none; } .art-strip-np { display: inline; }
}
@media (min-width: 1000px) { .art-nav { flex-wrap: nowrap; } .art-nav .art-jump { min-width: 180px; } }
/* NEWS: a clear arrow and even closed cards. */
.nh-chev { font-size: 17px; line-height: 1; } .nh-ch { min-height: 88px; }
@media (max-width: 760px) { .nh-ch { min-height: 0; } }
@media (max-width: 760px) { #art-body section.art-group[data-ag].collapsed .art-gtb { font-size: 15.5px !important; letter-spacing: -.01em; } #art-body section.art-group[data-ag].collapsed .art-gval b { font-size: 13px; } #art-body section.art-group[data-ag].collapsed .art-gh2 { gap: 8px; } }
@media (max-width: 760px) { #art-body section.art-group[data-ag].collapsed .art-gtb { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.15; text-align: left; } }
@media (max-width: 760px) { #art-body section.art-group[data-ag].collapsed .art-gtb { line-height: 1.3; padding-bottom: 1px; } }
.exp-copybox { margin-top: 12px; display: grid; gap: 8px; } .exp-copybox[hidden] { display: none; } .exp-copybox textarea { width: 100%; font-family: ui-monospace, monospace; font-size: 11px; }
/* Private series notes (v91) */
.asd-notes { margin-top: 8px; font-size: 13px; } .asd-notes summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; } .asd-notes summary small { font-weight: 400; color: var(--ink-faint); margin-left: 6px; }
.asd-nt { white-space: pre-wrap; margin: 8px 0; color: var(--ink-soft); line-height: 1.5; max-width: 80ch; }
/* Urgent flag (text starting "!"): red, so the owner can't miss it. */
.art-flag.red { background: #fde3e1; color: #9b1c12; border-color: #e5948d; }
.ad-flag.red { background: #fdecea; border-color: #e5948d; color: #5c120c; } .ad-flag.red b { color: #b3261e; }
body.mode-dark .art-flag.red, body.acid:not(.mode-light) .art-flag.red, body.news:not(.mode-light) .art-flag.red { background: rgba(255, 99, 88, .16); color: #ff8a80; border-color: rgba(255, 99, 88, .55); }
body.mode-dark .ad-flag.red, body.acid:not(.mode-light) .ad-flag.red, body.news:not(.mode-light) .ad-flag.red { background: rgba(255, 99, 88, .12); border-color: rgba(255, 99, 88, .5); color: #ffd6d2; } body.mode-dark .ad-flag.red b, body.acid:not(.mode-light) .ad-flag.red b, body.news:not(.mode-light) .ad-flag.red b { color: #ff8a80; }
.artg-flag.red { color: #d93025; } body.mode-dark .artg-flag.red, body.acid:not(.mode-light) .artg-flag.red, body.news:not(.mode-light) .artg-flag.red { color: #ff8a80; }
/* ===== Finances › Bank (v92) ===== */
.bk-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; font-size: 13.5px; }
.bk-dot { width: 9px; height: 9px; border-radius: 50%; background: #1e9e5a; box-shadow: 0 0 0 3px rgba(30,158,90,.18); flex: 0 0 auto; } .bk-status.off .bk-dot { background: var(--ink-faint); box-shadow: none; }
.bk-st { flex: 1 1 260px; } .bk-err { color: #b3261e; } .bk-status .btn { margin-left: auto; }
.bk-kpis { margin-bottom: 14px; }
.bk-needs { border: 1px solid #e8c46a; background: #fff8e6; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.bk-needs-h { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; } .bk-needs-h small { color: var(--ink-soft); }
.bk-nlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.bk-nlist li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid rgba(0,0,0,.06); }
.bk-nt { flex: 1 1 220px; min-width: 0; display: grid; } .bk-nt small { color: var(--ink-soft); } .bk-na { font-variant-numeric: tabular-nums; font-weight: 600; }
.bk-up { cursor: pointer; } .bk-ok { color: #1e7a46; font-size: 13.5px; margin: 0 0 14px; } .bk-more { font-size: 12.5px; color: var(--ink-faint); }
.bk-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 8px; } .bk-bar input { flex: 1 1 200px; } .bk-bar select { width: auto; } .bk-n { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); }
.bk-list { border-top: 1px solid var(--line); }
.bk-row { display: grid; grid-template-columns: 78px minmax(0, 2fr) 120px minmax(0, 1fr) 84px 110px; gap: 10px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.bk-d { color: var(--ink-soft); font-size: 12.5px; white-space: nowrap; } .bk-p { min-width: 0; display: grid; } .bk-p b, .bk-p small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bk-p small { color: var(--ink-faint); }
.bk-k { display: grid; gap: 1px; } .bk-k small { font-size: 11px; color: var(--ink-faint); } .bk-b { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-r { font-size: 12.5px; } .bk-faint { color: var(--ink-faint); } .bk-a { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .bk-a.neg { color: var(--ink); } .bk-a.pos { color: #1e7a46; }
.bk-tag { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: rgba(0,0,0,.06); justify-self: start; }
.bk-tag.bk-in { background: #e3f4ea; color: #1e6b3f; } .bk-tag.bk-sub { background: #ece6fb; color: #4b2d9a; } .bk-tag.bk-ex { background: #fdeee4; color: #8a3b0c; } .bk-tag.bk-tr { background: #eef0f2; color: #555; } .bk-tag.bk-own { background: #fdf3d6; color: #6b4a00; }
.bk-tax { margin-top: 18px; } .bk-tax h3, .bk-guides h3 { font-size: 15px; margin: 0 0 6px; } .bk-tax-note { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 10px; }
.bk-tt { width: 100%; border-collapse: collapse; font-size: 13px; } .bk-tt th, .bk-tt td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; } .bk-tt .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .bk-tt th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.bk-tot td { font-weight: 700; border-bottom: 0; }
.bk-guides { margin-top: 20px; } .bk-guides.open { margin-top: 4px; }
.bk-g { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--panel); } .bk-g summary { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; font-weight: 600; list-style: none; } .bk-g summary::-webkit-details-marker { display: none; }
.bk-gn { font-size: 12px; font-weight: 600; color: var(--ink-faint); white-space: nowrap; } .bk-gn.all { color: #1e7a46; }
.bk-gs { margin: 0 14px 8px; font-size: 13px; color: var(--ink-soft); }
.bk-steps { margin: 0 14px 12px 34px; padding: 0; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.5; } .bk-steps label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; } .bk-steps input { margin-top: 4px; flex: 0 0 auto; }
.bk-steps code { font-size: 12px; background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; word-break: break-all; } .bk-by { display: block; margin-left: 24px; font-size: 11.5px; color: #1e7a46; }
.bk-rules { margin: 0 14px 12px; overflow-x: auto; } .bk-g > .btn { margin: 0 14px 14px; }
body.mode-dark .bk-needs, body.acid:not(.mode-light) .bk-needs, body.news:not(.mode-light) .bk-needs { background: rgba(255,217,122,.08); border-color: rgba(255,217,122,.35); }
body.mode-dark .bk-tag, body.acid:not(.mode-light) .bk-tag, body.news:not(.mode-light) .bk-tag { background: rgba(255,255,255,.08); color: var(--ink); }
body.mode-dark .bk-steps code, body.acid:not(.mode-light) .bk-steps code, body.news:not(.mode-light) .bk-steps code { background: rgba(255,255,255,.08); }
@media (max-width: 760px) {
  .bk-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "p a" "d k" "b r"; gap: 2px 10px; }
  .bk-p { grid-area: p; } .bk-a { grid-area: a; } .bk-d { grid-area: d; } .bk-k { grid-area: k; justify-self: end; } .bk-b { grid-area: b; } .bk-r { grid-area: r; justify-self: end; }
  .bk-steps { margin-left: 28px; }
}
.bk-row { grid-template-columns: 72px minmax(0, 2.4fr) 112px minmax(0, 1fr) 70px 104px; }
.bk-bi { display: none; } .bk-list.one-biz .bk-b { display: none; } .bk-list.one-biz .bk-row { grid-template-columns: 72px minmax(0, 3fr) 112px 70px 104px; }
@media (max-width: 1180px) and (min-width: 761px) { .bk-row, .bk-list.one-biz .bk-row { grid-template-columns: 66px minmax(0, 1fr) 104px 64px 100px; } .bk-b { display: none; } .bk-list:not(.one-biz) .bk-bi { display: inline; } }
@media (max-width: 760px) { .bk-list:not(.one-biz) .bk-b { display: block; } }
.ft-count.ft-alert { background: #b3261e; color: #fff; }
/* Bank — judge fixes (7 Oct 2026) */
.bk-rc { text-decoration: none; color: inherit; } .bk-rx { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 14px; padding: 0 4px; } .bk-rx:hover, .bk-rx:focus-visible { color: #b3261e; }
.bk-up:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .bk-chk { color: #8a5f00; }
.bk-steps code { word-break: normal; overflow-wrap: anywhere; }
body.mode-dark .bk-needs, body.acid:not(.mode-light) .bk-needs, body.news:not(.mode-light) .bk-needs { background: rgba(255,196,77,.12); border-color: rgba(255,196,77,.6); }
body.mode-dark .bk-tag.bk-in, body.acid:not(.mode-light) .bk-tag.bk-in, body.news:not(.mode-light) .bk-tag.bk-in { background: rgba(80,200,130,.18); color: #8fe3b0; }
body.mode-dark .bk-tag.bk-sub, body.acid:not(.mode-light) .bk-tag.bk-sub, body.news:not(.mode-light) .bk-tag.bk-sub { background: rgba(160,130,255,.2); color: #c9b8ff; }
body.mode-dark .bk-tag.bk-ex, body.acid:not(.mode-light) .bk-tag.bk-ex, body.news:not(.mode-light) .bk-tag.bk-ex { background: rgba(255,150,90,.18); color: #ffb98f; }
body.mode-dark .bk-tag.bk-tr, body.acid:not(.mode-light) .bk-tag.bk-tr, body.news:not(.mode-light) .bk-tag.bk-tr { background: rgba(255,255,255,.1); color: #d4d6da; }
body.mode-dark .bk-tag.bk-own, body.acid:not(.mode-light) .bk-tag.bk-own, body.news:not(.mode-light) .bk-tag.bk-own { background: rgba(255,217,122,.16); color: #ffd97a; }
body.mode-dark .bk-a.pos, body.acid:not(.mode-light) .bk-a.pos, body.news:not(.mode-light) .bk-a.pos, body.mode-dark .bk-gn.all, body.acid:not(.mode-light) .bk-gn.all, body.news:not(.mode-light) .bk-gn.all, body.mode-dark .bk-by, body.acid:not(.mode-light) .bk-by, body.news:not(.mode-light) .bk-by, body.mode-dark .bk-ok, body.acid:not(.mode-light) .bk-ok, body.news:not(.mode-light) .bk-ok { color: #6fdc9c; }
body.mode-dark .bk-chk, body.acid:not(.mode-light) .bk-chk, body.news:not(.mode-light) .bk-chk { color: #ffd97a; }
/* phone last, so nothing above overrides it */
@media (max-width: 760px) {
  .bk-row, .bk-list.one-biz .bk-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "p a" "d k" "b r"; gap: 2px 10px; }
  .bk-list.one-biz .bk-row { grid-template-areas: "p a" "d k" "r r"; } .bk-bi { display: none !important; }
  .bk-nlist li { gap: 6px 10px; } .bk-nlist .bk-up { margin-left: auto; }
}
.bk-rx { min-width: 28px; min-height: 28px; display: inline-grid; place-items: center; } @media (hover: none) { .bk-rx { min-width: 40px; min-height: 40px; } }
.bk-r .linkbtn.bk-up { color: var(--ink-soft); }
.bd-form.bd-drop { outline: 2px dashed var(--accent); outline-offset: 4px; }
/* Team chat attachments (v93) */
.bd-attbtn { display: inline-flex; align-items: center; gap: 6px; } .ic-clip { flex: 0 0 auto; }
.bd-file { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 8px 0 2px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 10px; color: inherit; text-decoration: none; background: var(--panel); }
.bd-file:hover, .bd-file:focus-visible { border-color: var(--accent); }
.bd-fic { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: var(--accent); color: var(--accent-ink, #fff); font: 700 11px/1 var(--body); letter-spacing: .04em; }
.bd-fn { display: grid; min-width: 0; } .bd-fn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } .bd-fn small { color: var(--ink-faint); font-size: 12px; }
.bd-thumbf { display: grid; place-items: center; font: 700 10px var(--body); background: var(--accent); color: var(--accent-ink, #fff); }

/* Thailand › Bangkok base (7 Oct 2026): map of places around the house */
.th-map-card { padding-top: 1rem; }
.th-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.th-leg { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line, #ddd); background: transparent; border-radius: 999px; padding: .3rem .7rem; font: inherit; font-size: .82rem; cursor: pointer; opacity: .55; }
.th-leg.on { opacity: 1; }
.th-leg i { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.th-map { height: min(62vh, 560px); border-radius: 10px; overflow: hidden; border: 1px solid var(--line, #ddd); z-index: 0; position: relative; }
.th-pop b { display: block; font-size: .95rem; }
.th-pop-k { display: block; font-size: .72rem; opacity: .7; margin-bottom: .3rem; }
.th-pop p { margin: .25rem 0; font-size: .82rem; line-height: 1.35; }
.th-loose { margin-top: .6rem; font-size: .88rem; }
.th-loose ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.th-maplink { white-space: nowrap; }
@media (max-width: 640px) { .th-map { height: 58vh; } .th-legend { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; } .th-leg { font-size: .76rem; padding: .25rem .55rem; justify-content: flex-start; min-width: 0; } }

/* Me › Editions & rights (7 Oct 2026) */
.ed-strip { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .88rem; margin: 0 0 .8rem; color: var(--ink-soft, inherit); }
.ed-tabs { margin-bottom: 1rem; }
.ed-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.ed-tools .grp-search { flex: 1 1 220px; }
.ed-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; margin: .2rem 0 1rem; }
.ed-legend i, .ed-st::before { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.ed-legend i { background: var(--ec); }
.ed-series { padding-top: .9rem; }
.ed-work { border-top: 1px solid var(--line, #e5e0d8); }
.ed-work-h { display: flex; justify-content: space-between; align-items: center; gap: .8rem; width: 100%; background: none; border: 0; padding: .7rem .2rem; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.ed-work-h:hover .ed-title { text-decoration: underline; }
.ed-title { font-weight: 600; }
.ed-chips { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.ed-chip { font-size: .72rem; padding: .12rem .45rem; border-radius: 999px; border: 1px solid var(--line, #ddd); white-space: nowrap; opacity: .75; }
.ed-chip.some { opacity: 1; border-color: #2f6fa8; color: #2f6fa8; }
.ed-chip.leg { border-style: dashed; }
.ed-work-b { padding: 0 .2rem 1rem; }
.ed-line { margin: .5rem 0 .8rem; }
.ed-line-h { font-size: .84rem; margin-bottom: .35rem; }
.ed-nos { display: flex; flex-wrap: wrap; gap: .3rem; }
.ed-no { width: 2.2rem; height: 2.2rem; border-radius: 6px; border: 1px dashed var(--line, #cfc8bd); background: transparent; font: inherit; font-size: .8rem; cursor: pointer; color: inherit; }
.ed-no:hover { border-style: solid; }
.ed-no.on { background: var(--ec); border: 1px solid var(--ec); color: #fff; font-weight: 600; }
.ed-legacy { font-size: .68rem; padding: .08rem .4rem; border-radius: 999px; background: #f3e7d3; color: #7a5c3e; white-space: nowrap; }
.ed-legnote { font-size: .84rem; margin: .4rem 0; }
.ed-st::before { content: ""; background: var(--ec); }
.ed-changed { margin-top: .4rem; }
@media (max-width: 640px) { .ed-work-h { flex-direction: column; align-items: flex-start; } .ed-chips { justify-content: flex-start; } .ed-no { width: 2.5rem; height: 2.5rem; } }
.ed-title .red { color: var(--sig-no, #b3402f); font-weight: 600; }
.ed-legnote.red { color: var(--sig-no, #b3402f); }
#ed-pane td.nowrap { white-space: nowrap; }
#ed-pane td.muted { white-space: nowrap; font-size: .8rem; }
.ed-legnote { margin: .4rem 0 .2rem; font-size: .84rem; }
.ed-legnote summary { cursor: pointer; }
.ed-legnote p { margin: .3rem 0 0; }
.ed-conf td { background: #fbf4f2; }
.ed-conf-l { margin: 0; padding-left: 1.1rem; font-size: .82rem; }
/* Credits & releases per series (v98) */
.sc-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .45rem 0 .2rem; font-size: .84rem; }
.sc-flag { display: inline-flex; align-items: center; font-size: .74rem; font-weight: 600; padding: .14rem .55rem; border-radius: 999px; background: #eee9e1; color: #6b6156; white-space: nowrap; }
.sc-flag.sc-ok { background: #e2f1e5; color: #2f6b3b; }
.sc-flag.sc-warn { background: #fbecd8; color: #8a5a12; }
.sc-t { font-size: .78rem; }
.sc-list { list-style: none; padding: 0; margin: .4rem 0 1rem; }
.sc-row { display: grid; gap: .1rem; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line, #e5e0d8); padding: .55rem .1rem; font: inherit; color: inherit; cursor: pointer; }
.sc-rel { font-size: .78rem; }
.sc-rel.sc-ok { color: #2f6b3b; } .sc-rel.sc-warn { color: #8a5a12; }
.sc-ser { border-top: 1px solid var(--line, #e5e0d8); padding: .6rem 0; }
.sc-files { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .86rem; }
.sc-file { display: inline-flex; gap: .4rem; align-items: center; margin-left: .5rem; font-size: .8rem; }
.boi-fx { display: block; font-size: .72rem; font-weight: 400; opacity: .7; white-space: nowrap; }
.sc-hd { margin-left: .5rem; font-size: .68rem; }
.sc-ask { color: #8a5a12; font-weight: 600; }
.sc-files { list-style: none; padding-left: 0; }
.sc-files li { padding: .45rem 0; border-top: 1px dashed var(--line, #e5e0d8); }
.sc-files li:first-child { border-top: 0; }
.sc-name { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.sc-file { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: center; margin: .3rem 0 0; font-size: .8rem; }
.sc-fn { flex: 1 1 100%; overflow-wrap: anywhere; }
@media (min-width: 641px) { .sc-fn { flex: 0 1 auto; } }
/* Works already sold at a different edition size — impossible to miss (Aaron, 8 Oct 2026) */
.art-legacy { display: inline-flex; align-items: center; gap: .35rem; background: #b3261e; color: #fff; font-weight: 700; font-size: .7rem; letter-spacing: .04em; padding: .2rem .55rem; border-radius: 4px; white-space: nowrap; vertical-align: middle; }
.art-legacy.big { display: flex; flex-wrap: wrap; white-space: normal; font-size: .74rem; padding: .35rem .6rem; margin: 0 0 .35rem; width: fit-content; max-width: 100%; }
.art-legacy.big b { font-weight: 600; letter-spacing: 0; }
.art-legacy.sm { margin-left: .5rem; font-size: .66rem; }
.art-row-legacy { box-shadow: inset 4px 0 0 #b3261e; } /* no forced pale background: it made titles unreadable in dark looks (24 Oct 2026) */
.ed-ip { padding: .9rem 1.1rem; }
.ed-ip summary { cursor: pointer; }
.ed-ip ul { margin: .6rem 0 .3rem; padding-left: 1.1rem; font-size: .88rem; line-height: 1.45; }
.ed-ip li { margin: .3rem 0; }

/* Copyright tab: plain-English explainer (Aaron, 8 Oct 2026) */
.ed-plain dl{margin:.6rem 0 0;display:grid;gap:.75rem}
.ed-plain dt{font-weight:600}
.ed-plain dd{margin:.15rem 0 0;line-height:1.5;max-width:68ch;text-wrap:pretty}

/* News & media (Aaron, 8 Oct 2026) */
.pr-bar{display:flex;gap:.75rem;align-items:center;justify-content:space-between;margin:0 0 .75rem;flex-wrap:wrap}
.pr-bar .grp-search{flex:1 1 220px;max-width:420px}
.pr-kinds{margin-top:-.25rem}
.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;margin-top:1rem}
.pr-card{display:flex;flex-direction:column;gap:.55rem;margin:0}
.pr-top{display:flex;align-items:center;gap:.75rem}
.pr-logo{flex:0 0 44px;width:44px;height:44px;border-radius:10px;background:#fff;border:1px solid var(--line,rgba(0,0,0,.12));display:grid;place-items:center;overflow:hidden}
.pr-logo img{width:32px;height:32px;object-fit:contain}
.pr-mono{font-weight:700;font-size:1.1rem;color:#555}
.pr-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.pr-meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-meta small{opacity:.7}
.pr-title{margin:0;font-size:1.05rem;line-height:1.3;text-wrap:balance}
.pr-title a{color:inherit;text-decoration:none}
.pr-title a:hover{text-decoration:underline}
.pr-who{margin:0;display:flex;gap:.35rem;flex-wrap:wrap}
.pr-tag{font-size:.72rem;padding:.12rem .55rem;border-radius:999px;border:1px solid currentColor;opacity:.8}
.pr-tag-warn{color:var(--sig-no,#b3261e);opacity:1}
.pr-sum{margin:0;opacity:.85;line-height:1.45;text-wrap:pretty}
.pr-bl{font-size:.85rem}
.pr-bl summary{cursor:pointer;opacity:.75}
.pr-bl ul{margin:.35rem 0 0;padding-left:1.1rem}
.pr-bl a{word-break:break-all}
.pr-bl-none{margin:0;font-size:.85rem;opacity:.55}
.pr-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding-top:.5rem;border-top:1px solid var(--line,rgba(0,0,0,.08))}
.pr-files{display:flex;gap:.35rem;align-items:center;font-size:.85rem}
.pr-file{text-decoration:none}
.pr-dead .pr-title a{text-decoration:line-through}
@media (max-width:520px){.pr-grid{grid-template-columns:1fr}}
.pr-list{list-style:none;padding:.25rem 1rem;margin-top:1rem}
.pr-li{display:grid;grid-template-columns:3.2rem 1fr auto auto;gap:.75rem;align-items:start;padding:.75rem 0;border-top:1px solid var(--line,rgba(0,0,0,.08))}
.pr-li:first-child{border-top:0}
.pr-yr{font-variant-numeric:tabular-nums;font-weight:600;opacity:.75;padding-top:.1rem}
.pr-lim{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.pr-lim b a{color:inherit}
.pr-lim small{opacity:.75;line-height:1.4}
@media (max-width:520px){.pr-li{grid-template-columns:2.8rem 1fr auto}.pr-li .pr-files{grid-column:2}}
.pr-thumbs{display:flex;gap:.35rem;margin-top:.35rem;align-items:center}
.pr-thumbs img{width:56px;height:42px;object-fit:cover;border-radius:6px;display:block;background:#0001}
.pr-more{font-size:.8rem;padding:.2rem .5rem;border-radius:6px;border:1px solid var(--line,rgba(0,0,0,.15));background:transparent;cursor:pointer;color:inherit}

/* Materials calculator (Aaron, 8 Oct 2026) */
.mc-note{border-left:4px solid var(--sig-doing,#c78a1d);font-size:.9rem;line-height:1.5}
.mc-bar{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:flex-end}
.mc-bar label,.mc-row label{display:flex;flex-direction:column;gap:.25rem;font-size:.75rem;opacity:.85;min-width:0}
.mc-bar .minput{min-width:130px}
.mc-spots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.mc-spot{display:flex;flex-direction:column;padding:.6rem .75rem;border:1px solid var(--line,rgba(0,0,0,.1));border-radius:10px}
.mc-spot b{font-size:1.15rem;font-variant-numeric:tabular-nums}.mc-spot b span{font-size:.75rem;opacity:.6;font-weight:400}
.mc-spot small{opacity:.65}.mc-stale{opacity:.6}
.mc-warn{color:var(--sig-no,#b3261e)}
.mc-table{display:flex;flex-direction:column;gap:.6rem}
.mc-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem;align-items:end;padding:.75rem;border:1px solid var(--line,rgba(0,0,0,.08));border-radius:10px;position:relative}
.mc-row .mc-w2{grid-column:span 2}
.mc-row .minput{width:100%;min-width:0}
.mc-out{grid-column:1/-1;display:flex;flex-direction:column;gap:.15rem;padding-right:2rem}
.mc-out b{font-size:1.05rem;font-variant-numeric:tabular-nums}.mc-out small{opacity:.7;line-height:1.4}
.mc-x{position:absolute;top:.35rem;right:.5rem;border:0;background:transparent;font-size:1.1rem;cursor:pointer;opacity:.6;color:inherit}
.mc-tiers{margin-top:.75rem;font-size:.85rem}.mc-tiers summary{cursor:pointer;opacity:.75}
.mc-hubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem;margin-bottom:.9rem}
.mc-hub{display:flex;flex-direction:column;gap:.2rem;text-align:left;padding:.65rem .75rem;border:1px solid var(--line,rgba(0,0,0,.12));border-radius:10px;background:transparent;color:inherit;cursor:pointer;font:inherit}
.mc-hub small{opacity:.7;font-size:.75rem;line-height:1.35}
.mc-hub.on{border-color:var(--sig-ink,#222);box-shadow:0 0 0 2px var(--sig-ink,#222) inset}
.mc-rec{align-self:flex-start;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;padding:.1rem .45rem;border-radius:999px;background:var(--sig-ok,#2e7d32);color:#fff}
.mc-lines{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mc-lines td{padding:.4rem 0;border-top:1px solid var(--line,rgba(0,0,0,.08))}.mc-lines td:last-child{text-align:right}
.mc-lines tfoot td{font-weight:700;font-size:1.15rem;border-top:2px solid currentColor}
.mc-lines tfoot .mc-range td{font-weight:400;font-size:.85rem;opacity:.75;border-top:0}
.mc-save{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1rem}.mc-save .minput{flex:1 1 240px}
.mc-savedl{list-style:none;padding:0;margin:.4rem 0 0}.mc-savedl li{display:flex;gap:.5rem;align-items:center;padding:.25rem 0;position:relative}
.mc-savedl .mc-x{position:static}
.mc-src summary{cursor:pointer}.mc-src li{margin:.25rem 0;font-size:.85rem}
@media (max-width:620px){.mc-spots{grid-template-columns:repeat(2,minmax(0,1fr))}.mc-row{grid-template-columns:repeat(2,minmax(0,1fr))}.mc-bar label{flex:1 1 140px}}
@media print{.mc-bar,.mc-save,#mc-refresh,.mc-x,#mc-addm,#mc-adds,.mc-src{display:none!important}}
.mc-note details{margin-top:.4rem}.mc-note summary{cursor:pointer;opacity:.75;font-size:.85rem}.mc-note ul{margin:.4rem 0 0;padding-left:1.1rem}.mc-note li{margin:.2rem 0}
.mc-c2{opacity:.6;font-weight:400;font-size:.85em;margin-left:.35rem}.mc-lines td.mc-c2{text-align:right;padding-left:1rem}
.mc-addbtns{display:flex;gap:.4rem;flex-wrap:wrap}.mc-dia{margin:0 0 .6rem;font-variant-numeric:tabular-nums}.mc-row input[readonly]{opacity:.7}
.pr-scanbox{margin-top:.75rem;border-left:4px solid var(--sig-ok,#2e7d32)}
.pr-scanl{list-style:none;padding:0;margin:0}.pr-scanl li{display:flex;justify-content:space-between;gap:.75rem;align-items:center;padding:.55rem 0;border-top:1px solid var(--line,rgba(0,0,0,.08))}
.pr-scanl li:first-child{border-top:0}.pr-scanl li div{display:flex;flex-direction:column;min-width:0}.pr-scanl a{color:inherit}.pr-scanl small{opacity:.7}
.pr-scanl li span{display:flex;gap:.4rem;align-items:center;flex-shrink:0}.pr-scan-none{font-size:.85rem;opacity:.7;margin:.4rem 0 0}
@media (max-width:520px){.pr-scanl li{flex-direction:column;align-items:flex-start}}
.ct-web{margin:0 0 .9rem}.wc-pre{white-space:pre-wrap;font-size:.75rem;background:rgba(0,0,0,.05);padding:.5rem;border-radius:6px;max-height:220px;overflow:auto}
.pr-filters{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:flex-end;justify-content:space-between;margin:.25rem 0 .5rem}
.pr-filters label{display:flex;flex-direction:column;gap:.2rem;font-size:.75rem;opacity:.9}.pr-filters .minput{min-width:220px}
.pr-views{display:flex;gap:.35rem}.pr-tag-proj{border-style:dashed}
.pr-player{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}.pr-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mc-chk{flex-direction:row!important;align-items:center;gap:.4rem!important;font-size:.85rem!important;opacity:1!important}.mc-lines tr.mc-sub td{font-weight:600}
.art-bom{margin:.4rem 0 .2rem}.bom-top{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:.5rem}.bom-top label,.bom-notes{display:flex;flex-direction:column;gap:.2rem;font-size:.75rem}.bom-notes{margin-top:.6rem}
.bom-sec{margin:.75rem 0;padding-top:.5rem;border-top:1px solid var(--line,rgba(0,0,0,.1))}.bom-sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.bom-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem;padding:.6rem;border:1px solid var(--line,rgba(0,0,0,.08));border-radius:10px;margin-bottom:.4rem;position:relative}
.bom-row label{display:flex;flex-direction:column;gap:.2rem;font-size:.72rem;opacity:.9}.bom-row .minput{width:100%;min-width:0}.bom-tot{font-variant-numeric:tabular-nums;margin:.75rem 0 0}.bom-pdfs{list-style:none;padding:0;margin:.3rem 0}
.pdoc.pd-bom{font-size:9.5pt}.pd-bom .pd-sec{margin:12px 0 4px}.pd-bom .pd-sec h2{font-size:12pt;margin:0 0 4px}
.pd-bom .pd-t{width:100%;border-collapse:collapse;table-layout:auto}.pd-bom .pd-t th{text-align:left;font-weight:600;font-size:8.5pt;border-bottom:1.5px solid #141414;padding:4px 6px 4px 0}
.pd-bom .pd-t td{padding:4px 6px 4px 0;border-bottom:1px solid #ddd;vertical-align:top}.pd-bom .bom-tot{margin:4px 0 10px}
.pp-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem;margin-bottom:.75rem}.pp-tile{padding:.6rem .8rem;border:1px solid var(--line,rgba(0,0,0,.1));border-radius:10px;display:flex;flex-direction:column}.pp-tile b{font-size:1.4rem}.pp-tile small{opacity:.7}
.pp-filters{display:flex;gap:.5rem;flex-wrap:wrap}.pp-li{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:.75rem;align-items:center;padding:.65rem 0;border-top:1px solid var(--line,rgba(0,0,0,.08))}.pp-li:first-child{border-top:0}
.pp-val{font-variant-numeric:tabular-nums;white-space:nowrap}.pd-quote .pd-small{font-size:8.5pt;opacity:.75}
@media (max-width:620px){.pp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.pp-li{grid-template-columns:auto 1fr}.pp-li .pp-val,.pp-li .pr-files,.pp-li .linkbtn{grid-column:2}}
#pt-grid.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem;max-height:320px;overflow:auto;padding:.25rem}
.pt-w{display:flex;flex-direction:column;gap:.25rem;border:1px solid var(--line,rgba(0,0,0,.12));border-radius:8px;padding:.35rem;cursor:pointer;font-size:.72rem;position:relative}.pt-w input{position:absolute;top:.4rem;left:.4rem}
.pt-w img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px;background:#0001}.pt-w.on{border-color:var(--sig-ink,#222);box-shadow:0 0 0 2px var(--sig-ink,#222) inset}.pt-noimg{display:grid;place-items:center;aspect-ratio:1;background:#0001;border-radius:5px;opacity:.6}
.pdoc.pt-deck{width:297mm;font-size:12pt}.pt-s{width:297mm;height:209mm;box-sizing:border-box;overflow:hidden;position:relative;page-break-after:always}
.pt-cover{display:flex;background:#111;color:#f4efe7}.pt-cover .pt-hero{width:58%;height:100%;object-fit:cover}.pt-cover .pt-ct{flex:1;padding:22mm 16mm;display:flex;flex-direction:column;justify-content:flex-end}
.pt-cover h1{font-size:30pt;margin:0 0 6px;color:#f4efe7}.pt-cover .pd-k{letter-spacing:.18em;text-transform:uppercase;font-size:9pt;opacity:.75}.pt-sub{font-size:15pt;margin:0 0 12px}.pt-for,.pt-date{font-size:10pt;opacity:.8;margin:2px 0}
.pt-text{padding:20mm 26mm;column-gap:12mm}.pt-text h2{font-size:18pt;margin:0 0 8px}.pt-text p{margin:0 0 8px;line-height:1.55}.pt-sign{margin-top:14px!important;font-weight:600}
.pt-work{display:flex;align-items:center;gap:12mm;padding:14mm}.pt-work img{max-width:62%;max-height:181mm;object-fit:contain}.pt-work .pt-cap{flex:1}.pt-work h2{font-size:18pt;margin:0 0 6px}.pt-work p{margin:2px 0;font-size:11pt}.pt-price{font-weight:600;margin-top:8px!important}
.pt-cv{display:grid;grid-template-columns:1fr 1fr;gap:10mm}.pt-cv ul{list-style:none;padding:0;margin:0}.pt-cv li{margin:0 0 5px;font-size:10.5pt}.pt-end{display:flex;flex-direction:column;justify-content:center}
.pc-intro{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between;margin:0 0 .75rem}.pc-cur{display:flex;gap:.4rem;align-items:center;font-size:.85rem}.pc-cur .minput{min-width:90px}
.pc-n{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin:0 0 .6rem}
.pc-sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.pc-ratio{display:flex;flex-direction:column;gap:.4rem}.pc-ratio>small{opacity:.6;font-size:.72rem}
.pc-size{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;padding:.5rem .65rem;border:1px solid var(--line,rgba(0,0,0,.15));border-radius:9px;background:transparent;color:inherit;cursor:pointer;font:inherit;text-align:left}
.pc-size b{font-size:.95rem}.pc-size small{font-size:.72rem;opacity:.75}.pc-size.on{border-color:var(--sig-ink,#222);box-shadow:0 0 0 2px var(--sig-ink,#222) inset}
.pc-lab{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.75rem;align-items:end}.pc-lab label{display:flex;flex-direction:column;gap:.25rem;font-size:.75rem}.pc-big{display:flex;flex-direction:column}.pc-big b{font-size:1.6rem;font-variant-numeric:tabular-nums}.pc-big small{font-size:.75rem;opacity:.7}
.pc-receipt .pc-h td{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.65;padding-top:.9rem;border-top:0}.pc-note{font-size:.8rem;opacity:.7}.pc-more{margin-top:.75rem}.pc-more summary{cursor:pointer;opacity:.8}
@media (max-width:620px){.pc-sizes{grid-template-columns:1fr}.pc-ratio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.pc-ratio>small{grid-column:1/-1}.pc-lab{grid-template-columns:1fr}}
.pr-acts{display:flex;gap:.6rem}.pr-vid{width:100%;max-height:260px;border-radius:8px;background:#000}
.ed-pwrap{display:inline-flex;align-items:center;gap:2px}.ed-pin{width:6.5em;padding:.2rem .35rem;border:1px solid var(--line,rgba(0,0,0,.2));border-radius:6px;font:inherit;background:transparent;color:inherit;font-variant-numeric:tabular-nums}.ed-ladder{margin-top:.4rem}
.thb-fx{display:block;opacity:.65;font-size:.8em;margin-top:.15rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.thb-box{margin:.35rem 0 .6rem;padding:.55rem .7rem;border:1px solid var(--line,rgba(0,0,0,.12));border-radius:8px;font-size:.88em;font-variant-numeric:tabular-nums}.thb-box ul{margin:0 0 .45rem;padding-left:1.1rem}.thb-box li{margin:.1rem 0}.thb-box .thb-q{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.2rem 0 .35rem}.thb-box .thb-q .minput{width:8.5rem;margin:0}.thb-box p{margin:.2rem 0 0;font-size:.92em}
.thb-box .thb-l{opacity:.75}@media (max-width:600px){.thb-fx{white-space:normal}}
.bd-upbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0;font-size:13px;font-weight:600}.bd-upbar progress{flex:1 1 140px;height:8px;accent-color:var(--sig-ink,#b3402f)}.bd-upbar.err{color:#b3261e;font-weight:600}
/* Calculators: hierarchy (Aaron, 8 Oct 2026: "some of the titles, or main data blends in with sub data … use the 10% rule, or highlight
   the bounding box"). 60/30/10: the accent goes only on section titles, the number that matters in each box, and what you've chosen.
   Labels step back (small, faint); values and totals step forward; every box is a raised surface with an edge that lights while you work in it.
   --mc-hi is each style's own accent, lifted to a readable tint on dark grounds. */
#mc-body { --mc-hi: var(--accent); }
body.mode-dark #mc-body { --mc-hi: var(--ox-500, var(--accent)); }
body.acid #mc-body, body.news #mc-body { --mc-hi: var(--accent); }
#mc-body .card-head .eyebrow, #mc-body .pc-n { color: var(--mc-hi); opacity: 1; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-wrap: balance; }
body.acid #mc-body .card-head .eyebrow, body.acid #mc-body .pc-n { color: var(--ox-700, var(--accent)); } /* pink at title size needs the lighter tint for AA */
#mc-body .grp-sub { color: var(--ink-faint); }
#mc-body .mc-bar label, #mc-body .mc-row label, #mc-body .pc-lab label { color: var(--ink-soft); opacity: 1; font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
#mc-body label.mc-chk { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-soft); }
#mc-body .minput { color: var(--ink); font-weight: 500; }
#mc-body .mc-spot, #mc-body .mc-row, #mc-body .mc-hub, #mc-body .pc-size { background: var(--panel-2); border-color: var(--line); }
#mc-body .mc-row .minput, #mc-body .mc-row select { background: var(--panel); }
#mc-body .mc-row { transition: border-color .15s, box-shadow .15s; }
#mc-body .mc-row:focus-within { border-color: var(--mc-hi); box-shadow: inset 3px 0 0 var(--mc-hi); }
#mc-body .mc-spot > small:first-child { color: var(--ink-soft); opacity: 1; font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
#mc-body .mc-spot b { color: var(--ink); font-size: 1.3rem; }
#mc-body .mc-spot > small:not(:first-child), #mc-body .mc-spot b span { color: var(--ink-faint); opacity: 1; }
#mc-body .mc-out b { color: var(--mc-hi); font-size: 1.3rem; }
#mc-body .mc-out small, #mc-body .mc-c2, #mc-body .pc-big small { color: var(--ink-faint); opacity: 1; }
#mc-body .pc-big b { color: var(--mc-hi); }
#mc-body .mc-hub.on, #mc-body .pc-size.on { border-color: var(--mc-hi); box-shadow: 0 0 0 2px var(--mc-hi) inset; }
#mc-body .mc-sum { border: 1px solid var(--mc-hi); }
#mc-body .mc-lines tfoot tr:first-child td { color: var(--mc-hi); }
#mc-body .pc-lab { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } #mc-body .pc-lab > * { min-width: 0; } #mc-body .pc-lab .minput { width: 100%; min-width: 0; }
@media (max-width:620px) { #mc-body .pc-lab { grid-template-columns: 1fr; } }
body.mode-dark #mc-body .mc-row .minput, body.mode-dark #mc-body .mc-row select, body.acid #mc-body .mc-row .minput, body.acid #mc-body .mc-row select { background: var(--panel) !important; } /* the dark-mode input rule is !important; fields sit a step darker than their box */
.bd-addch { border-color: var(--line) !important; } /* search owns the accent edge now; New channel keeps accent text only (10% rule, 8 Oct 2026) */

/* ============ Sidebar, tidied (Aaron, 8 Oct 2026: "better use of space … rebellion logo not needed at the top … + add a to-do could
   just be a simple + … Search is important … style and daylight and nighttime mode should blend").
   Top: Search (lit) · ＋ · «. Foot: style + Day/Night/Device on one row; you · layout · guide · sign out on one line. Desktop only —
   the phone keeps its own top bar. */
@media (min-width: 761px) {
  .side { --side-hi: color-mix(in srgb, var(--accent) 72%, #ffffff); }
  body.news .side { --side-hi: #D1FE17; }
  .side-brand { display: none; }
  .side-tools { flex-direction: row; align-items: center; gap: 6px; padding: 0 0 12px; }
  .side .side-tools .nav-search { flex: 1 1 auto; min-width: 0; margin: 0; min-height: 40px; padding: 8px 11px; border-radius: 10px; border: 1.5px solid var(--side-hi) !important; color: #f4f1e9; font-size: 14px; font-weight: 600; }
  .side .side-tools .nav-search .nav-ico { color: var(--side-hi); }
  .side .side-tools .nav-search:hover { background: color-mix(in srgb, var(--side-hi) 12%, transparent); }
  .side-tools .side-add { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border-radius: 10px; }
  .side-tools .side-add .sa-txt { display: none; }
  .side-tools .side-add .sa-plus { font-size: 22px; }
  .side-tools .side-toggle, body:not(.side-collapsed) .side-tools .side-toggle { position: static; flex: 0 0 28px; width: 28px; height: 40px; align-self: center; margin: 0; padding: 0; }
  body.side-collapsed .side-tools { flex-direction: column; }
  body.side-collapsed .side .side-tools .nav-search { flex: 0 0 auto; width: 40px; padding: 8px 0; justify-content: center; }
  body.side-collapsed .side-tools .nav-search > span:not(.nav-ico), body.side-collapsed .side-tools .nav-search .kbd { display: none; }
  .nav-more-up { display: none !important; }
  /* Foot: one row for the look, one line for you */
  .side-foot { padding-top: 10px; }
  .look-row { display: flex; align-items: stretch; gap: 6px; margin-bottom: 8px; }
  .look-row .style-switch { flex: 1 1 auto; min-width: 0; margin: 0; }
  .look-row .style-switch .ss-ic { display: none; }
  .look-row .style-switch .ss-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mode-switch { display: flex; margin: 0; border: 1px solid #2a2a33; border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
  .ms-b { all: unset; box-sizing: border-box; width: 30px; display: grid; place-items: center; cursor: pointer; color: #8a8273; font-size: 14px; }
  .ms-b + .ms-b { border-left: 1px solid #2a2a33; }
  .ms-b:hover { color: #f4f1e9; } .ms-b:focus-visible { outline: 2px solid var(--side-hi); outline-offset: -2px; }
  .ms-b.on { background: color-mix(in srgb, var(--side-hi) 22%, transparent); color: #fff; }
  body.side-collapsed .look-row { flex-direction: column; } body.side-collapsed .mode-switch { flex-direction: column; } body.side-collapsed .ms-b + .ms-b { border-left: 0; border-top: 1px solid #2a2a33; } body.side-collapsed .ms-b { height: 28px; }
  .side-foot .who { flex-wrap: nowrap; margin-bottom: 0; gap: 8px; }
  .side-foot .who-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-foot .who .foot-links { gap: 2px; margin: 0; flex: 0 0 auto; }
  .side-foot .who .foot-links .signout { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 7px; background: transparent; font-size: 14px; font-weight: 700; color: #8a8273; text-decoration: none; }
  .side-foot .who .foot-links .signout:hover { background: rgba(255,255,255,.08); color: #f4f1e9; }
  #density-toggle { font-size: 0 !important; } #density-toggle .dz-ic { font-size: 15px; margin: 0; }
  body.side-collapsed .side-foot .who { flex-direction: column; } body.side-collapsed .side-foot .who .foot-links { flex-direction: column; }
}
@media (min-width: 761px) {
  .look-row .style-switch { padding: 6px 10px; gap: 6px; font-size: 13px; }
  .look-row .style-switch .ss-dots { display: none; }
  .look-row .style-switch::after { content: "›"; font-size: 16px; line-height: 1; opacity: .7; }
  .side-tools .side-toggle { background: transparent !important; border: 1px solid #2a2a33 !important; color: #b9b1a1 !important; border-radius: 8px; font-size: 13px; }
  .side-tools .side-toggle:hover { color: #fff !important; border-color: var(--side-hi) !important; transform: none; }
}

/* NEWS by day (Aaron, 8 Oct 2026: "day and night mode dont exist for some styles"). Same Higgsfield-inspired build — Inter / Space Grotesk,
   16px cards with no borders, one lime accent — on a light ground. Lime stays the fill for buttons and marks (dark text on it); where lime
   would be text on white it becomes a deep olive so it reads. The sidebar stays dark, as in every style's day look. */
body.news.mode-light {
  --ink: #0F1113; --ink-2: #1C1E21; --ink-soft: #45484D; --ink-faint: #6B6E73; --paper: #F2F3F4; --panel: #FFFFFF; --panel-2: #F2F3F5;
  --line: rgba(15,17,19,.10); --stone: #C9CBCE; --accent: #D1FE17; --accent-ink: #1A1A1A; --news-link: #4A6100;
  --ox-500: #4A6100; --ox-700: #3A4D00; --ox-100: #F3FBD0; --ox-50: #F9FDE8;
  --shadow: 0 1px 2px rgba(15,17,19,.05), 0 6px 18px rgba(15,17,19,.05);
  background: #F2F3F4; color: #0F1113; color-scheme: light;
}
body.news.mode-light .card, body.news.mode-light .ev-row, body.news.mode-light .mkt-sec, body.news.mode-light .modal { box-shadow: var(--shadow); }
body.news.mode-light #mc-body { --mc-hi: #4A6100; }
body.news.mode-light .bd-search { color: #4A6100; } body.news.mode-light .bd-search .minput { border-color: #4A6100 !important; }
body.news.mode-light .nh-kick, body.news.mode-light .nh-more, body.news.mode-light .nh-note { color: #4A6100; }
body.news.mode-light .nh-title, body.news.mode-light .nh-sh, body.news.mode-light .nh-card header h3, body.news.mode-light .nh-items a, body.news.mode-light .nh-tk { color: #0F1113; }
body.news.mode-light .nh-ticker, body.news.mode-light .nh-card { background: #FFFFFF; box-shadow: var(--shadow); }
body.news.mode-light .nh-tk { background: #F2F3F5; } body.news.mode-light .nh-tk b { color: #45484D; }
body.news.mode-light .nh-items a:hover { background: #F2F3F5; } body.news.mode-light .nh-sh::after { background: rgba(15,17,19,.10); }
body.news.mode-light .nh-sub, body.news.mode-light .nh-card header p, body.news.mode-light .nh-m, body.news.mode-light .nh-wait, body.news.mode-light .nh-tk-src, body.news.mode-light .nh-tk-load, body.news.mode-light .nh-legend small { color: #6B6E73; }
body.news.mode-light .nh-legend { color: #45484D; } body.news.mode-light .nh-sh span::before { color: #7FA300; }
body.news.mode-light .nh-items a:focus-visible, body.news.mode-light .nh-more:focus-visible { outline-color: #4A6100; }
body.news.mode-light .nh-tk.up em { color: #15803D; } body.news.mode-light .nh-tk.dn em { color: #B91C1C; }
body.news.mode-light .nh-ch h3 { color: #0F1113; } body.news.mode-light .nh-ch:hover h3 { color: #4A6100; } body.news.mode-light .nh-ch:focus-visible { outline-color: #4A6100; }
body.news.mode-light .nh-ch .nh-cht p { color: #6B6E73; }
body.news.mode-light .nh-chev { border-color: rgba(15,17,19,.18); color: #45484D; }
body.news.mode-light .bd-addch, body.news.mode-light .linkbtn { color: #4A6100 !important; }
/* Board cards: a bin to delete (8 Oct 2026). Shows on hover or focus; always there on touch screens. */
.tcard { position: relative; } .tcard .tc-title { padding-right: 22px; }
.tc-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: var(--panel); color: var(--ink-faint); cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, background .12s; }
.tcard:hover .tc-del, .tcard:focus-within .tc-del, .tc-del:focus-visible { opacity: 1; }
.tc-del:hover { color: var(--sig-no, #b3261e); background: var(--panel-2); }
@media (hover: none) { .tc-del { opacity: .75; } }
@media (max-width: 760px) {
  .side-tools .m-top[data-mtop="search"] { display: none; } /* the Search box in the top bar replaces the magnifier */
  .side .side-tools .nav-search { flex: 1 1 auto; min-width: 0; margin: 0; min-height: 38px; border: 1.5px solid color-mix(in srgb, var(--accent) 72%, #ffffff) !important; border-radius: 10px; }
  body.news .side .side-tools .nav-search { border-color: #D1FE17 !important; }
  .side-tools .nav-search .kbd { display: none; }
}
/* Judge round 1 (8 Oct 2026): style + day/night as ONE control; the lit mode is obvious; bin quieter and bigger to tap on phones. */
@media (min-width: 761px) {
  .look-row { gap: 0; border: 1px solid #2a2a33; border-radius: 9px; overflow: hidden; }
  .look-row .style-switch { border: 0 !important; border-radius: 0 !important; }
  .look-row .mode-switch { border: 0; border-left: 1px solid #2a2a33; border-radius: 0; }
  .ms-b.on { background: var(--side-hi); color: #111; }
  .side .side-tools .nav-search .kbd { color: color-mix(in srgb, var(--side-hi) 60%, transparent); border-color: color-mix(in srgb, var(--side-hi) 35%, transparent); }
  body.side-collapsed .look-row .style-switch .ss-name, body.side-collapsed .look-row .style-switch::after { display: none; }
  body.side-collapsed .look-row .style-switch .ss-ic { display: inline; }
  body.side-collapsed .look-row .style-switch { justify-content: center; }
  body.side-collapsed .look-row .mode-switch { border-left: 0; border-top: 1px solid #2a2a33; }
}
.tcard .tc-title { padding-right: 32px; }
.tc-del::before { content: ""; position: absolute; inset: -9px; }
@media (hover: none) { .tc-del { opacity: .45; } }
/* Padlocked rows (8 Oct 2026) */
.reg-lock { display: inline-grid; place-items: center; color: var(--ink-faint); }
.reg-lock:hover { color: var(--ink); }
.lk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.lk-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1.5px dashed var(--line); background: var(--panel-2); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.lk-btn:hover { border-color: var(--accent); }
.lk-btn.open { border-style: solid; border-color: var(--sig-no, #b3261e); color: var(--sig-no, #b3261e); }
.btn.danger:not(:disabled) { background: var(--sig-no, #b3261e); border-color: var(--sig-no, #b3261e); color: #fff; }
.btn.danger:disabled { opacity: .45; cursor: not-allowed; }
.reg-lock.open { color: var(--sig-no, #b3261e); font-weight: 700; font-size: 12px; }
.look-row .style-switch .ss-ic { font: 700 12px var(--body); letter-spacing: -.02em; }
.lk-btn.open { padding: 6px 10px; font-size: 13px; border-width: 1px; }
#lk-go { font-size: 14px; padding: 9px 18px; text-transform: none; letter-spacing: 0; }

/* ============ Phone: fewer bars (Aaron, 8 Oct 2026: "how are we looking in mobile format now, as theres a lot of nav bars").
   Top bar: logo · Search · ＋ (Home went — Me at the bottom is home, and its dot carries the count). It tucks away while you scroll down.
   Bottom bar: words under the icons. The floating chat bubble is gone on phones; the Team tab shows a dot for new messages. */
@media (max-width: 760px) {
  .side-tools .m-top[data-mtop="home"] { display: none; }
  .side { transition: transform .22s ease; will-change: transform; }
  body.m-tuck .side { transform: translateY(-110%); }
  .side-brand img { height: 34px; }
  .mbar { padding-top: 4px; }
  .mbar button { min-height: 50px; gap: 3px; padding: 4px 0 2px; }
  .mbar .mi-art { width: 24px; height: 24px; }
  .mbar-l { font: 600 10.5px/1 var(--body); letter-spacing: .02em; color: inherit; opacity: .85; position: static; }
  .mbar button.on .mbar-l { opacity: 1; }
  #dq-bubble { display: none !important; }
  body:has(#dq-bubble) #main { padding-bottom: 96px; }
  .gtabs:has(> .gtab:nth-child(7)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .gtabs:has(> .gtab:nth-child(7)) .gtab { padding: 7px 4px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }
@media (max-width: 760px) {
  /* the active tab's brush stroke now underlines the word instead of covering it */
  .mbar button.on::before { bottom: 0 !important; height: 7px !important; width: 40px !important; opacity: .9; }
  .mbar button.on::after { display: none !important; }
  .mbar-l { position: relative; z-index: 1; }
  .side-tools { flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
  .side .side-tools .nav-search { flex: 1 1 auto; max-width: 260px; }
}
@media (max-width: 760px) {
  .mbar button.on .mbar-l { color: #fff !important; }
  .mbar button.on::before { bottom: -1px !important; height: 4px !important; width: 30px !important; }
}
@media (max-width: 760px) {
  /* Judge round 1 (8 Oct 2026) */
  .mbar-l { opacity: 1; color: #c9c1b3; }                                   /* idle labels readable */
  .mbar [data-m="tools"] .mi-art .ac.sold { fill: none; stroke: currentColor; } /* the drawing's red spot no longer looks like news */
  .mbar .js-inbox-dot:not([hidden]) { width: auto; min-width: 17px; height: 17px; padding: 0 4px; top: 2px; right: calc(50% - 26px); border-radius: 9px; font: 700 10px/13px var(--body); color: #fff; text-align: center; }
  .mbar .js-chat-dot:not([hidden]) { width: 11px; height: 11px; top: 4px; right: calc(50% - 18px); box-shadow: 0 0 0 2px var(--ox-500); }
  .sr-new { margin-left: auto; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #fff); font-size: 12px; font-weight: 700; }
}
@media (max-width: 360px) { .gtabs:has(> .gtab:nth-child(7)) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .mbar button.on .mi-art { color: #fff; opacity: 1; } }

/* Hide/show the menu: a clear button and a one-time note (Aaron, 8 Oct 2026) */
@media (min-width: 761px) {
  .side-tools .side-toggle, body:not(.side-collapsed) .side-tools .side-toggle { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border: 1.5px solid var(--side-hi) !important; color: var(--side-hi) !important; border-radius: 10px; }
  .side-tools .side-toggle:hover, .side-tools .side-toggle:focus-visible { border-color: var(--side-hi) !important; color: #fff !important; background: color-mix(in srgb, var(--side-hi) 14%, transparent) !important; }
  body.side-collapsed .side-tools .side-toggle { border-color: var(--side-hi) !important; }
}
.side-hint { position: fixed; z-index: 90; max-width: none; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--panel); color: var(--ink); border: 1.5px solid var(--accent); box-shadow: var(--shadow), 0 10px 30px rgba(0,0,0,.25); font-size: 13.5px; line-height: 1.4; animation: sideHintIn .25s ease; }
.side-hint::before { content: ""; position: absolute; top: -8px; left: var(--arrow-x, 22px); border: 7px solid transparent; border-top: 0; border-bottom-color: var(--accent); }
.side-hint b { font-size: 14px; } .side-hint kbd { font: 600 12px var(--body); padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; }
.side-hint .btn { align-self: flex-start; margin-top: 2px; }
@keyframes sideHintIn { from { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .side-hint { animation: none; } }
@media (max-width: 760px) { .side-hint { display: none; } }
.tr-left { display: inline-block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--ink-faint); } .tr-left.soon { color: var(--sig-no, #b3261e); } .tr-left.keep { color: var(--olive, #4f6b3a); }
.tr-rule { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); border-left: 4px solid var(--sig-no, #b3261e); background: var(--panel); font-size: 13.5px; }
.tr-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tr-acts .linkbtn.del { color: var(--sig-no, #b3261e); }

/* ============ Day sidebar (Aaron, 8 Oct 2026: "yes" — the menu goes light in day mode, so Day/Night changes the whole
   screen, not just the page). Desktop only (the phone's bars keep their look). Day = Standard / F1 / Huntress in their
   own (light) look or Day, and ACID / NEWS switched to Day. Built on each style's day tokens, so every style stays itself. */
@media (min-width: 761px) {
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side {
    --side-hi: var(--accent); background: var(--panel) !important; color: var(--ink) !important; border-right: 1px solid var(--line) !important; }
  body.news.mode-light .side { --side-hi: #4A6100; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side :is(.nav-item, .nav-item.add, .nav-item.proj) { color: var(--ink-soft) !important; background: transparent; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .nav-item:hover { background: var(--panel-2) !important; color: var(--ink) !important; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .nav-item.active { background: color-mix(in srgb, var(--side-hi) 10%, var(--panel)) !important; color: var(--ink) !important; box-shadow: inset 3px 0 0 var(--side-hi) !important; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .nav-item.active :is(.nav-ico, .nav-ico.svg) { color: var(--side-hi) !important; opacity: 1; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side :is(.nav-sec-h.nav-label, .nav-sec[class*="sec-"] > .nav-sec-h, .nav-sec.shut > .nav-sec-h) { color: var(--ink-faint) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .nav-sec-h.nav-label:hover { background: var(--panel-2) !important; color: var(--ink) !important; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .side-tools .nav-search { color: var(--ink) !important; background: var(--panel) !important; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .side-tools .nav-search .kbd { color: var(--ink-faint); border-color: var(--line); }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .side-tools .side-toggle { background: var(--panel) !important; color: var(--side-hi) !important; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .side-foot { border-top-color: var(--line) !important; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side :is(.look-row, .look-row .mode-switch, .ms-b + .ms-b) { border-color: var(--line) !important; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .style-switch { color: var(--ink-soft) !important; background: transparent !important; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .ms-b { color: var(--ink-faint); }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .ms-b:hover { color: var(--ink); }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .ms-b.on { background: var(--side-hi); color: var(--accent-ink, #fff); }
  body.news.mode-light .side .ms-b.on { background: #D1FE17; color: #1A1A1A; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side :is(.who-name, .side-foot .who-name) { color: var(--ink) !important; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .side-foot .who .foot-links .signout { color: var(--ink-faint) !important; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .side-foot .who .foot-links .signout:hover { background: var(--panel-2) !important; color: var(--ink) !important; }
}
@media (min-width: 761px) {
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .side-add { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-ink, #fff) !important; }
}
@media (min-width: 761px) {
  /* ACID keeps its sidebar dark by resetting the colour tokens on .side; by day it takes ACID's own day tokens instead. */
  body.acid.mode-light .side { --paper: #f5f3f0; --panel: #ffffff; --panel-2: #f2eff3; --line: #dedae3; --ink: #0d0b11; --ink-2: #24222a; --ink-soft: #3d3a45; --ink-faint: #6e6b78; --accent: #c8266f; --accent-ink: #ffffff; --side-hi: #c8266f; }
}
@media (min-width: 761px) {
  body.acid.mode-light .side .side-foot { background-image: linear-gradient(to top, var(--panel) 70%, transparent) !important; }
  body.acid.mode-light .side .side-foot::before { color: var(--ink-faint) !important; }
}
@media (min-width: 761px) { body.news.mode-light .side { --side-hi: #4A6100 !important; } } /* olive, not lime, for lines and text on white */
@media (min-width: 761px) { body.news.mode-light .side .ms-b.on { background: #D1FE17 !important; color: #1A1A1A !important; } }
/* Day sidebar, judge round 1 (8 Oct 2026) */
@media (min-width: 761px) {
  body.acid.mode-light .side .nav-item::before { color: var(--ink-soft) !important; border-color: var(--ink-faint) !important; }   /* 01–07 boxes readable on white */
  body.acid.mode-light .side .nav-badge { box-shadow: 0 0 0 2px var(--panel); }                                                   /* badge clear of the stripe art */
  body.acid.mode-light .side :is(.side-art, .acid-step) { opacity: .55; }
  body.acid .side .side-tools .nav-search .kbd { display: none; }                                                                   /* ACID's mono ⌘K didn't fit */
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .side-tools .side-toggle { border-color: var(--line) !important; }
  :is(body:not(.mode-dark):not(.acid):not(.news), body.acid.mode-light, body.news.mode-light) .side .side-tools .side-toggle:hover { border-color: var(--side-hi) !important; }
}
@media (min-width: 761px) { body.acid.mode-light .side::after { opacity: .5 !important; } } /* ACID's stripe art, softened by day so the menu reads */
@media (min-width: 761px) { body.acid.mode-light .side .nav-item.active::before { color: #ffffff !important; border-color: var(--ink) !important; } }
@media (min-width: 761px) { body.acid.mode-light .side .nav-sec-h { color: var(--ink-soft) !important; font-weight: 600; } }

/* Large files (Aaron, 8 Oct 2026: "flag the file with a red border when they are so large so as later they can either be deleted or managed"):
   anything over 50 MB gets a red outline wherever it's listed — Team chat, Temporary files, project and to-do files. */
:root { --up-big: #c62828; }
body.mode-dark, body.acid:not(.mode-light), body.news:not(.mode-light) { --up-big: #ff6b6b; }
.up-big { border-color: var(--up-big) !important; border-width: 2px !important; border-style: solid !important; }
.up-tag { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 4px; background: var(--up-big); color: #fff; font: 700 10px/1.5 var(--body); letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
body.mode-dark .up-tag, body.acid:not(.mode-light) .up-tag, body.news:not(.mode-light) .up-tag { color: #1a0505; }
.up-redtxt { color: var(--up-big); }

/* Temporary files: a slim shelf above the channels in Team chat. */
.tf { margin: 0 0 16px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; background: var(--panel); }
.tf.tf-drop { border-color: var(--accent); border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.tf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tf-title { margin: 0; font: 700 12px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.tf-sub { flex: 1 1 220px; font-size: 13px; color: var(--ink-soft, var(--ink-faint)); }
.tf-add { margin-left: auto; align-self: center; }
.tf-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.tf-list:empty { display: none; }
.tf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic name acts" "ic meta acts"; align-items: center; column-gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg, transparent); }
.tf-row .bd-fic { grid-area: ic; width: 32px; height: 32px; font-size: 10px; }
.tf-name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); text-decoration: none; }
a.tf-name:hover, a.tf-name:focus-visible { text-decoration: underline; }
.tf-meta { grid-area: meta; font-size: 12px; color: var(--ink-faint); }
.tf-acts { grid-area: acts; display: flex; gap: 2px; }
.tf-acts .linkbtn { min-width: 34px; min-height: 34px; display: grid; place-items: center; font-size: 18px; text-decoration: none; color: var(--ink-soft, var(--ink)); }
.tf-acts .linkbtn:hover, .tf-acts .linkbtn:focus-visible { color: var(--accent); }
.tf-tog { display: none; }
.tf-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--accent-ink, #fff); font-size: 11px; letter-spacing: 0; }
.tf-up progress { grid-area: meta; width: 100%; height: 6px; accent-color: var(--accent); }
.tf-empty { margin: 6px 0 0; font-size: 13px; color: var(--ink-faint); }
.tf-more { margin-top: 6px; font-size: 13px; }
@media (max-width: 640px) { .tf { padding: 10px 12px; } .tf-sub { flex-basis: 100%; order: 3; } .tf-row { column-gap: 8px; padding: 6px; } .tf-acts { gap: 0; } .tf-acts .linkbtn { min-width: 34px; min-height: 40px; }
  .tf-titletxt { display: none; } .tf-tog { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
  .tf-tog::after { content: "▾"; font-size: 12px; transition: transform .15s; } .tf-shut .tf-tog::after { transform: rotate(-90deg); }
  .tf-shut .tf-body, .tf-shut .tf-sub { display: none; } .tf-shut { padding-top: 6px; padding-bottom: 6px; }
  .tf-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.25; } }
.bd-thumbf.up-big { gap: 6px; align-content: center; border: 0 !important; outline: 2px solid var(--up-big); outline-offset: 3px; overflow: visible; }
.bd-thumbf .up-tag { margin: 0; background: #fff; color: #b71c1c; }

/* Large files on My Files: every file over 50 MB, biggest first. */
.lgf-card { margin-top: 18px; }
.lgf-sub { margin: 4px 0 0; font-size: 13px; color: var(--ink-faint); }
.lgf-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.lgf-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.lgf-row.up-big { border-width: 1.5px !important; }
.lgf-meta b { color: var(--up-big); font-weight: 700; }
.lgf-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.lgf-name { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.lgf-name:hover, .lgf-name:focus-visible { text-decoration: underline; }
.lgf-meta { font-size: 12px; color: var(--ink-faint); }
.lgf-acts { display: flex; gap: 6px; flex: 0 0 auto; }
@media (max-width: 640px) { .lgf-row { flex-wrap: wrap; row-gap: 8px; } .lgf-acts .btn { min-height: 40px; } }

/* Materials list: parts of a set, and the appraisal (8 Oct 2026). One part open at a time is the calm default; each closed part reads as a line. */
.bom-info, .bom-part { margin: .6rem 0; border: 1px solid var(--line, rgba(0,0,0,.1)); border-radius: 12px; background: var(--panel); }
.bom-info > summary, .bom-part > summary { cursor: pointer; padding: .7rem .9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; font-weight: 600; list-style: none; }
.bom-info > summary::-webkit-details-marker, .bom-part > summary::-webkit-details-marker { display: none; }
.bom-info > summary::before, .bom-part > summary::before { content: "▸"; font-size: .8em; color: var(--ink-faint); transition: transform .15s; }
.bom-info[open] > summary::before, .bom-part[open] > summary::before { transform: rotate(90deg); }
.bom-info > .bom-top, .bom-part > .bom-top { padding: 0 .9rem; }
.bom-part > .bom-sec, .bom-part > .bom-pacts { margin-left: .9rem; margin-right: .9rem; }
.bom-pq { color: var(--accent); font-variant-numeric: tabular-nums; }
.bom-psum { flex-basis: 100%; padding-left: 1.1rem; font-weight: 400; font-size: .8rem; color: var(--ink-faint); }
.bom-pacts { display: flex; gap: .5rem; padding: .2rem 0 .9rem; }
.bom-armed { border-color: #b3261e !important; color: #b3261e !important; }
.bom-parts { margin: .9rem 0; }
.bom-hint { margin: 0 0 .4rem; font-size: .8rem; color: var(--ink-faint); }
.bom-whole { margin-top: 1.2rem; }
.bom-est { margin: .3rem 0 0; font-size: .78rem; color: var(--ink-faint); }
.pd-bom .pd-part { break-inside: auto; } .pd-bom .pd-part h3 { font-size: 11px; margin: 8px 0 3px; text-transform: uppercase; letter-spacing: .06em; }
.pd-bom .pd-q { font-weight: 400; color: #666; } .pd-bom .pd-kv th { text-align: left; width: 34%; padding: 3px 8px 3px 0; color: #555; font-weight: 600; }
.bom-info > .bom-top, .bom-part > .bom-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem .75rem; padding-bottom: .4rem; }
.bom-info > .bom-top .minput, .bom-part > .bom-top .minput { width: 100%; min-width: 0; }
@media (min-width: 761px) { .modal-bg.bom-sheet .modal { width: min(1080px, 94vw); max-width: none; } }
@media (min-width: 761px) { .modal-bg.bom-sheet .bom-row { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: .35rem; padding: .45rem 2rem .45rem .5rem; margin-bottom: .3rem; }
  .modal-bg.bom-sheet .bom-row .minput { padding: 6px 7px; font-size: 13px; } .modal-bg.bom-sheet .bom-row label { font-size: .66rem; }
  .modal-bg.bom-sheet .bom-row .mc-x { position: absolute; top: 50%; right: .4rem; transform: translateY(-50%); } }
@media (min-width: 761px) { .modal-bg.bom-sheet .bom-row { align-items: end; } }
.pd-bom .bom-tot p { text-align: left; word-spacing: normal; letter-spacing: normal; } .pd-bom .pd-kv th, .pd-bom .pd-kv td { border-bottom: 1px solid #ddd; }
.pd-bom .bom-tot, .pd-bom .bom-tot p { font-variant-numeric: normal; }
/* Needs your attention: red, at the top of a materials list and its PDF (Aaron, 8 Oct 2026: "flag in red text"). */
.bom-attn { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .8rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.bom-attn.on { color: var(--up-big); } .bom-attn textarea { text-transform: none; letter-spacing: normal; font-weight: 500; font-size: 14px; line-height: 1.45; }
.bom-attn.on textarea { color: var(--up-big); border: 2px solid var(--up-big); background: color-mix(in srgb, var(--up-big) 7%, var(--panel)); }
.pd-bom .pd-attn { margin: 6px 0 12px; padding: 8px 12px; border: 2px solid #c62828; border-radius: 6px; color: #c62828; break-inside: avoid; }
.pd-bom .pd-attn h2 { color: #c62828; margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; } .pd-bom .pd-attn p { margin: 0; line-height: 1.5; }
.modal-bg.bom-sheet { z-index: 950; } /* above the artwork panel it opens from (900) */
.bom-row label:has(> input[data-f="item"]), .bom-row label:has(> input[data-f="name"]) { grid-column: span 3; }

/* Materials list colour system (8 Oct 2026, Aaron: "make it visually easy to navigate using colour theory"). One hue per material,
   used only as an edge, a dot and the section label — the page stays neutral (60/30/10). Day hues pass 4.5:1 on white; night hues on #1b1920. */
:root { --h-metal: #9A6200; --h-dia: #0B7285; --h-pearl: #A3456E; --h-gem: #3949AB; --h-other: #2F7D6B; --h-lab: #5F6670; }
body.mode-dark, body.acid:not(.mode-light), body.news:not(.mode-light) { --h-metal: #E8B04B; --h-dia: #5ED3E8; --h-pearl: #F2A3C4; --h-gem: #A5B4FC; --h-other: #7FD6BE; --h-lab: #A8AEB8; }
.h-metal { --h: var(--h-metal); } .h-dia { --h: var(--h-dia); } .h-pearl { --h: var(--h-pearl); } .h-gem { --h: var(--h-gem); } .h-other { --h: var(--h-other); } .h-lab { --h: var(--h-lab); }
.bom-dot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--h, currentColor); vertical-align: 1px; }
.bom-sec[class*="h-"] { border-top: 0; margin: .7rem 0; padding: .55rem .7rem .4rem; border-left: 3px solid var(--h); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--h) 5%, transparent); }
.bom-sec[class*="h-"] > .bom-sh > b { color: var(--h); letter-spacing: .01em; }
.bom-sec[class*="h-"] .bom-row { background: var(--panel); }
.bom-tot .bt { white-space: nowrap; } .bom-tot .bt b { color: var(--h); }
/* Parts: a picture, a tone dot (white / black / clear / metal) and the summary — each closed part reads as one line. */
.bom-part > summary { align-items: center; flex-wrap: nowrap; gap: .75rem; }
.bom-ph { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.bom-pline { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.bom-part .bom-psum { flex-basis: auto; padding-left: 0; }
.bom-thumb { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; background-color: var(--panel-2, #eee); background-repeat: no-repeat; background-size: cover; background-position: center; border: 1px solid var(--line); }
.bom-thumb[data-focus="left"] { background-size: 300%; background-position: 40% var(--fy, 22%); } .bom-thumb[data-focus="right"] { background-size: 300%; background-position: 60% var(--fy, 22%); } /* the top of the piece: crown or head and its pearl tell black from white */
.bom-thumb[data-focus="centre"] { background-size: 150%; background-position: 50% var(--fy, 38%); }
.bom-thumb.none { display: grid; place-items: center; font: 700 18px/1 var(--display, var(--body)); color: var(--ink-faint); }
.bom-thumb.big { width: 120px; height: 120px; border-radius: 12px; } .bom-thumb.mini { width: 26px; height: 26px; border-radius: 7px; font-size: 11px; }
.bom-tone { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink-faint); }
.bom-tone.t-white { background: #fff; } .bom-tone.t-black { background: #111; border-color: #111; } .bom-tone.t-clear { background: linear-gradient(135deg, #e8f6fb, #b9dde8 55%, #f7fdff); border-color: #7fb3c4; } .bom-tone.t-metal { background: linear-gradient(135deg, #f2f2f2, #9aa0a6 60%, #e6e6e6); border-color: #8b9096; }
.bom-pic { display: flex; gap: .9rem; align-items: flex-start; padding: 0 .9rem .6rem; }
.bom-picside { display: grid; gap: .5rem; min-width: 0; flex: 1; } .bom-pmat { margin: 0; font-weight: 600; }
.bom-picacts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .bom-focus { display: flex; align-items: center; gap: .4rem; font-size: .75rem; } .bom-focus .minput { width: auto; }
.bom-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .4rem; max-height: 220px; overflow: auto; padding: .4rem; border: 1px dashed var(--line); border-radius: 10px; }
.bom-pk { padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; } .bom-pk:hover, .bom-pk:focus-visible { border-color: var(--accent); }
.bom-pk span { display: block; aspect-ratio: 1; border-radius: 6px; background-size: cover; background-position: center; }
/* Jump strip: every part at a glance — tap one to open it. */
.bom-jump { display: grid; gap: .4rem; margin: .2rem 0 .6rem; } .bom-jrow { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .bom-jl { flex: 0 0 4.6rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); } .bom-jl:empty { display: none; }
.bom-jb { display: inline-flex; align-items: center; gap: .4rem; padding: 3px 10px 3px 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font-size: .78rem; cursor: pointer; }
.bom-jb:hover, .bom-jb:focus-visible { border-color: var(--accent); } .bom-jb small { color: var(--accent); font-weight: 700; }
.bom-jb.tone-black { background: color-mix(in srgb, #111 10%, var(--panel)); }
.bom-exp { display: inline-flex; gap: .4rem; margin-left: auto; }
@media (max-width: 640px) { .bom-pic { flex-direction: column; } .bom-thumb.big { width: 100%; height: 180px; } .bom-exp { margin-left: 0; } }
/* PDF: same hues, fixed to their day values on white paper. */
.pd-bom { --h-metal: #9A6200; --h-dia: #0B7285; --h-pearl: #A3456E; --h-gem: #3949AB; --h-other: #2F7D6B; --h-lab: #5F6670; }
.pd-bom h3[class*="h-"] { color: var(--h); }
.pd-bom .pd-metal thead th { border-bottom-color: var(--h-metal); } .pd-bom .pd-dia thead th { border-bottom-color: var(--h-dia); } .pd-bom .pd-pearl thead th { border-bottom-color: var(--h-pearl); } .pd-bom .pd-gem thead th { border-bottom-color: var(--h-gem); } .pd-bom .pd-other thead th { border-bottom-color: var(--h-other); } .pd-bom .pd-lab thead th { border-bottom-color: var(--h-lab); }
.pd-bom .pd-ph { display: flex; gap: 12px; align-items: center; } .pd-bom .pd-ph h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.pd-bom .bom-thumb.pdf { width: 70px; height: 70px; border-radius: 8px; border: 1px solid #ddd; } .pd-bom .pd-mat { margin: 2px 0 0; font-weight: 600; }
@media (max-width: 640px) { .bom-jrow { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .bom-jb, .bom-jl { flex: 0 0 auto; } .bom-jl { width: 3.6rem; } }
@media (max-width: 640px) { .bom-thumb.big[data-focus] { background-size: cover; background-position: center 40%; } }

/* The Materials list button sparkles (Aaron, 8 Oct 2026: "make it sparkle and be obvious to see … so he knows where to find it").
   A jeweller's jewel: deep sapphire fill, a gold-and-pearl edge (Colin's gold work), full width — the strongest thing in the panel.
   Light sweeps across it three times when the panel opens and again on hover; two small sparkles twinkle slowly. Still when motion is off. */
.btn.art-bom, body.mode-dark .btn.art-bom, body.acid .btn.art-bom, body.news .btn.art-bom, body.f1 .btn.art-bom, body.huntress .btn.art-bom { position: relative; overflow: hidden; isolation: isolate; display: flex; width: 100%; justify-content: center; align-items: center; gap: .55rem;
  margin: .5rem 0 .3rem; padding: .85rem 1.2rem; border: 2px solid transparent; border-radius: 999px; font-size: .95rem; font-weight: 800; letter-spacing: .06em;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  background: linear-gradient(120deg, #0B2F4A, #0B7285 50%, #3949AB) padding-box, linear-gradient(120deg, #C9A24A, #F3E3B0 30%, #ffffff 50%, #F3E3B0 70%, #C9A24A) border-box;
  box-shadow: 0 0 0 1px rgba(201, 162, 74, .35), 0 8px 22px -8px rgba(11, 47, 74, .8), 0 0 16px -6px rgba(243, 227, 176, .7); transition: transform .15s, box-shadow .15s; }
.btn.art-bom .ab-gem { font-size: 1.25em; background: linear-gradient(135deg, #ffffff, #F3E3B0 50%, #C9A24A); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.btn.art-bom::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: 0; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: translateX(-160%) skewX(-22deg); animation: ab-sweep 3.6s ease-in-out 3; }
.btn.art-bom:hover::after, .btn.art-bom:focus-visible::after { animation: ab-sweep 1.4s ease-in-out 1; }
.btn.art-bom .ab-spark { position: absolute; line-height: 1; color: #fff; text-shadow: 0 0 8px #F3E3B0, 0 0 3px #fff; pointer-events: none; animation: ab-twinkle 3.2s ease-in-out infinite; }
.btn.art-bom .s1 { top: 6px; right: 18%; font-size: 13px; } .btn.art-bom .s2 { bottom: 6px; left: 16%; font-size: 10px; animation-delay: 1.6s; }
.btn.art-bom:hover, .btn.art-bom:focus-visible, body.mode-dark .btn.art-bom:hover, body.acid .btn.art-bom:hover, body.news .btn.art-bom:hover, body.f1 .btn.art-bom:hover, body.huntress .btn.art-bom:hover, body.mode-dark .btn.art-bom:focus-visible, body.acid .btn.art-bom:focus-visible, body.news .btn.art-bom:focus-visible, body.f1 .btn.art-bom:focus-visible, body.huntress .btn.art-bom:focus-visible { transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(243, 227, 176, .7), 0 12px 26px -8px rgba(11, 47, 74, .9), 0 0 22px -4px rgba(243, 227, 176, .8); }
@keyframes ab-sweep { 0%, 50% { transform: translateX(-160%) skewX(-22deg); } 100% { transform: translateX(320%) skewX(-22deg); } }
@keyframes ab-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 45%, 55% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .btn.art-bom, .btn.art-bom::after, .btn.art-bom .ab-spark { animation: none !important; transition: none; } .btn.art-bom .ab-spark { opacity: .9; } }
.ab-hint { margin: 0 0 .5rem; font-size: .75rem; text-align: center; color: var(--ink-soft, var(--ink)); }
/* Folder-based artists: single files fold away under the master folder (8 Oct 2026). */
.art-single { margin: .4rem 0 .6rem; border: 1px dashed var(--line); border-radius: 10px; padding: .1rem .7rem; }
.art-single > summary { cursor: pointer; padding: .5rem 0; font-size: .8rem; font-weight: 700; color: var(--ink-soft, var(--ink)); }
.art-single > summary small { font-weight: 400; color: var(--ink-faint); margin-left: .3rem; } .art-single[open] { padding-bottom: .5rem; }
/* Sell › Collectors & contacts › Platforms (v129) */
.pf-head { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: .6rem; }
.pf-sub { margin: .25rem 0 0; max-width: 62ch; font-size: .85rem; color: var(--ink-soft, var(--ink)); } .pf-acts { display: flex; gap: .6rem; align-items: center; }
.pf-chips { margin: 0 0 .6rem; }
#pf-body td[data-col="fit_aaron"], #pf-body td[data-col="fit_colin"] { white-space: nowrap; color: var(--accent); font-weight: 700; letter-spacing: .05em; }
#pf-body td[data-col="commission"], #pf-body td[data-col="fees"], #pf-body td[data-col="markets"] { max-width: 18rem; font-size: .82rem; }
.pf-head .pf-sub { font: 400 .88rem/1.45 var(--body); text-transform: none; letter-spacing: normal; color: var(--ink-soft, var(--ink)); }
#pf-body table { table-layout: auto; } #pf-body td[data-col="kind"] { max-width: 11rem; font-size: .8rem; color: var(--ink-soft, var(--ink)); }
#pf-body td[data-col="cost"] { min-width: 15rem; max-width: 22rem; font-size: .84rem; line-height: 1.35; }
/* Platform research, to read */
.pfd-meta { margin: -.2rem 0 .6rem; font-size: .8rem; color: var(--ink-faint); } .pfd-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .9rem; }
.pfd-fits { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .7rem; margin-bottom: .8rem; }
.pfd-fit { padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); } .pfd-fit p { margin: 0; font-size: .88rem; line-height: 1.45; }
.pfd-fh { font-size: .72rem !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .3rem !important; } .pfd-fh b { color: var(--accent); letter-spacing: .1em; margin-left: .3rem; font-size: .9rem; }
.pfd-cost { margin: 0 0 .9rem; padding: .6rem .85rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 0 10px 10px 0; font-weight: 600; }
.pfd-cost span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.pfd-sec { padding: .55rem 0; border-top: 1px solid var(--line); } .pfd-sec h4 { margin: 0 0 .25rem; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.pfd-sec p { margin: 0; font-size: .88rem; line-height: 1.5; } .pfd-src { margin: 0; padding-left: 1.1rem; font-size: .82rem; line-height: 1.5; } .pfd-src a { font-weight: 600; }
#pf-body tbody tr[data-rid] td.cell { cursor: pointer; }
@media (max-width: 640px) { #pf-body [data-col="kind"], #pf-body [data-col="cost"], #pf-body [data-col="status"] { display: none; } }
.pf-cost-m { display: none; } #pf-body.pf-nostatus [data-col="status"] { display: none; }
@media (max-width: 640px) { .pf-cost-m { display: block; margin-top: .2rem; font-size: .76rem; line-height: 1.3; color: var(--ink-soft, var(--ink)); } }
@media (max-width: 640px) { #pf-body [data-col="fit_aaron"], #pf-body [data-col="fit_colin"] { width: 3.4rem; padding-left: .3rem; padding-right: .3rem; font-size: .78rem; letter-spacing: 0; } #pf-body td[data-col="name"] { width: auto; } }
@media (max-width: 640px) { #pf-body .tdact, #pf-body thead th:last-child { display: none; } #pf-body table { table-layout: fixed; width: 100%; } #pf-body th[data-col="name"] { width: 58%; } #pf-body th[data-col="fit_aaron"], #pf-body th[data-col="fit_colin"] { width: 21%; } }
#pf-body.pf-colin [data-col="fit_aaron"] { display: none; } /* Colin's tab: his fit only */

/* Phone menus from the bottom bar: the bar stays on top, one tap opens/closes, swipe between menus (9 Oct 2026) */
@media (max-width: 760px) {
  body.m-sheet-open .mbar { z-index: 70; }
  .modal-bg.msheet .modal { max-height: calc(100% - 28px); padding-bottom: 18px; }
  .ms-dots { display: flex; justify-content: center; gap: 6px; margin: -4px 0 12px; }
  .ms-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .18s, background .18s; }
  .ms-dots i.on { width: 18px; background: var(--accent); }
  .modal-bg.msheet .modal.ms-next { animation: msNext .2s ease-out; }
  .modal-bg.msheet .modal.ms-prev { animation: msPrev .2s ease-out; }
  .modal-bg.msheet .modal.ms-edge { animation: msEdge .28s ease-out; }
}
@keyframes msNext { from { transform: translateX(32px); opacity: .35; } }
@keyframes msPrev { from { transform: translateX(-32px); opacity: .35; } }
@keyframes msEdge { 30% { transform: translateX(-10px); } 65% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .modal-bg.msheet .modal.ms-next, .modal-bg.msheet .modal.ms-prev, .modal-bg.msheet .modal.ms-edge { animation: none; } }

/* Phone: secondary grey text reaches 4.5:1 in every style and mode (mobile QC, 9 Oct 2026). Same hue, nudged toward --ink-soft. */
@media (max-width: 760px) {
  :root { --ink-faint: #736c60; }
  body.acid { --ink-faint: #9a97a3; }
  body.f1 { --ink-faint: #6b6b78; }
  body.huntress { --ink-faint: #756887; }
  body.mode-dark { --ink-faint: #978e81; }
  body.mode-dark.f1 { --ink-faint: #9494a8; }
  body.mode-dark.huntress { --ink-faint: #998bae; }
  body.acid.mode-light { --ink-faint: #6d6a77; }
  body.acid.mode-light :is(.side, .mbar, .mtop) { --ink-faint: #9a97a3; }
  body.news { --ink-faint: #8d8e8f; }
  body.news.mode-light { --ink-faint: #6b6e73; }
  body.acid.mode-light .side { --ink-faint: #6d6a77; }
}

/* Phone QC pass (Aaron, 9 Oct 2026: "this has gotta be smart for mobile use"). Measured on every main page at 375px. */
@media (max-width: 760px) {
  /* Typing never zooms the page: iOS zooms into any text box under 16px. */
  /* Only raises small boxes: titles and big inputs that are already over 16px keep their own size. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not(.note-title, .sp-input, .tp-title, .cal-title, .qa2-input, .mer-title, .bd-ttitle, .bd-ptitle, .nh-title, .ad-ratio .minput), textarea:not(.note-title, .sp-input, .tp-title, .cal-title, .qa2-input, .mer-title, .bd-ttitle, .bd-ptitle, .nh-title, .ad-ratio .minput), select:not(.note-title, .sp-input, .tp-title, .cal-title, .qa2-input, .mer-title, .bd-ttitle, .bd-ptitle, .nh-title, .ad-ratio .minput) { font-size: 16px !important; }
  /* Small links and chips keep their look but get a finger-sized tap area (about 44px) around them. */
  :is(.linkbtn, a.pr-file, .art-st, .sh-x, a.asd-src, .ct-star, .ev-tl-chip, .art-addin, .cat-chip, .art-gtb) { position: relative; }
  :is(.linkbtn, a.pr-file, .art-st, .sh-x, a.asd-src, .ct-star, .ev-tl-chip, .art-addin, .cat-chip, .art-gtb)::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
  .linkbtn { font-size: 13px; padding: 6px 8px; }
  input.art-ck, input.art-gck { width: 22px; height: 22px; }
  /* Nothing smaller than 12px to read. */
  :is(.ed-chip, .dc-file.sm, .pr-tag, .btn.small, .ev-st, .ev-vd, .ct-for, .eyebrow, .artl-st, .mkt-when, .hb-s) { font-size: 12px; }
  #main small { font-size: max(12px, 0.85em); }
  /* Marketing: the "Saved … by …" line wraps instead of pushing the page sideways. */
  .mkt-sh { flex-wrap: wrap; } .mkt-when { white-space: normal; }
}
@media (max-width: 760px) {
  /* Leftovers from the second measuring pass: fixed greys and 11px labels. */
  .ev-vd-skip, .art-addin, .art-count { color: var(--ink-faint); }
  :is(.ev-tl-chip, .sc-flag, .ct-prio, .wn-tag, .sh-sec, .art-n, .artl-h b, .av-t span) { font-size: 12px; }
  #main :is(span, b):not([class]) { font-size: max(12px, 1em); }
}

/* Phone QC, judge round 1 fixes (9 Oct 2026) — one accent per screen, less before the content, clearer editing. */
.ba-phone { display: none; }
.sr-t { display: block; font-weight: 600; } .sr-d { display: block; font-size: 13px; color: var(--ink-faint); margin-top: 1px; }
@media (max-width: 760px) {
  /* Accent discipline: the header ＋ is outlined, so the page's own main button is the one filled colour. */
  .m-top.m-add { background: transparent; border: 1.5px solid var(--accent); color: #fff; }
  /* Backup warning: a phone can't run the Terminal fix, so it just says where to fix it. */
  .backup-alert { padding: 10px 14px; } .backup-alert h3 { font-size: 15px; }
  .backup-alert .ba-why, .backup-alert .ba-fix, .backup-alert .ba-cmd { display: none; } .ba-phone { display: block; margin: 0; font-weight: 600; }
  /* Section headings never outrank the page title. */
  #main .card h2 { font-size: 21px; }
  /* My Art: view, group and sort live behind Filters on a phone, so the art comes sooner. */
  .art-vbar:not(.fopen) { display: none; }
  /* Sub-tabs: compact one-line chips that wrap to two rows, every tab still visible. */
  .gtabs, .gtabs:has(> .gtab:nth-child(7)) { display: flex; flex-wrap: wrap; gap: 6px; }
  .gtabs .gtab, .gtabs:has(> .gtab:nth-child(7)) .gtab { flex: 0 0 auto; white-space: nowrap; min-height: 38px; padding: 6px 12px; font-size: 13px; }
  /* Menus: plain dividers instead of a tinted edge. */
  .modal-bg.msheet .sheet-list { border-left-color: var(--line) !important; }
  /* To-do editor: say what each field is, rather than an icon alone. */
  .tp-grid { grid-template-columns: 62px minmax(0, 1fr) !important; }
  .tp-grid .tp-ic { font-size: 0; } .tp-grid .tp-ic::after { content: attr(title); font-size: 12px; font-weight: 600; color: var(--ink-soft); line-height: 1.2; }
  /* Status: neutral until chosen, then filled in its own colour. */
  .tp-status .st-pill:not(.on) { background: var(--panel-2); color: var(--ink-soft); }
  /* Save buttons only show when there's something to save; "✓ All saved" says the rest. */
  .tp-savebar:not(.dirty):not(.err) .btn, .mkt-savebar:not(.dirty):not(.err) .btn { display: none; }
}
@media (max-width: 760px) {
  .art-vbar:not(.fopen) ~ .art-nav :is(.art-cseg, .art-one, .art-navn) { display: none; } /* fold/unfold sit under Filters; Jump to a series stays */
  .art-brand .art-logo { max-height: 48px; width: auto; }
}
@media (max-width: 760px) {
  .tp-status .st-pill.st-stuck:not(.on), .tp-status .st-pill.st-done:not(.on), .tp-status .st-pill.st-doing:not(.on), .tp-status .st-pill.st-todo:not(.on) { background: var(--panel-2); color: var(--ink-soft); }
  .tp-due label:has(input[type=time]), .tp-due input[type=time] { flex: 0 0 104px; max-width: 104px; } .tp-due > :first-child { flex: 1 1 auto; min-width: 0; }
  .attach-add .upload-btn { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
}
@media (max-width: 760px) {
  /* Judge round 2: less before the art, nothing floating over content, no dead buttons. */
  .art-brand { display: none; }
  .art-sharebtn { padding-top: 6px; padding-bottom: 6px; min-height: 0; }
  .art-fsel { flex: 1 1 100%; } /* full labels — "All series (278)" no longer cut off */
  .mkt-savebar:not(.dirty):not(.err) { position: static; padding-top: 6px; padding-bottom: 6px; }
  .tp-undo:disabled { display: none; }
}
/* A drafted first email, kept on the contact (9 Oct 2026) */
.ct-draft { margin: 0 0 16px; padding: 12px 14px 14px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--panel); }
.ct-draft-n { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
.ct-draft-t { width: 100%; box-sizing: border-box; margin: 6px 0 10px; font: 14px/1.55 var(--body); padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--ink); resize: vertical; }
.ct-draft-acts { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.ct-draft-acts a.ct-act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; border-radius: 99px; border: 1.5px solid var(--ink); background: var(--panel); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; }
.ct-draft-acts a.ct-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
body.acid .ct-draft-acts a.ct-primary { color: #0b0a0e; }
@media (max-width: 760px) {
  .modal-bg.msheet .modal { touch-action: pan-y; will-change: transform; }
  @keyframes msNext { from { transform: translateX(28%); opacity: .3; } }
  @keyframes msPrev { from { transform: translateX(-28%); opacity: .3; } }
  /* First-time hint: arrows either side, gently pulsing, and one sideways nudge of the menu */
  .ms-hint { display: flex; justify-content: center; align-items: center; gap: 10px; margin: -6px 0 12px; font-size: 13px; font-weight: 600; color: var(--accent); }
  .ms-ha { font-size: 22px; line-height: 1; animation: msArrow 1.1s ease-in-out infinite; }
  .ms-ha:first-child { animation-name: msArrowL; }
  .modal-bg.msheet .modal.ms-nudge { animation: sheetup .22s ease-out, msNudge 1s .45s ease-in-out 1; }
}
@keyframes msArrow { 50% { transform: translateX(5px); opacity: .55; } }
@keyframes msArrowL { 50% { transform: translateX(-5px); opacity: .55; } }
@keyframes msNudge { 30% { transform: translateX(-26px); } 60% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .ms-ha, .modal-bg.msheet .modal.ms-nudge { animation: none; } }
@media (max-width: 760px) {
  @keyframes msNext { from { transform: translateX(100%); } }
  @keyframes msPrev { from { transform: translateX(-100%); } }
  .modal-bg.msheet .modal.ms-next, .modal-bg.msheet .modal.ms-prev { animation-duration: .25s; animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  .ms-hint { gap: 6px; margin: -8px 0 10px; }
  .ms-ha { flex: 0 0 auto; } .ms-ha.off { opacity: .25; animation: none !important; }
  .modal-bg.msheet .modal.ms-nudge-r { animation: sheetup .22s ease-out, msNudgeR 1s .45s ease-in-out 1; }
}
@keyframes msNudgeR { 30% { transform: translateX(26px); } 60% { transform: translateX(-8px); } }
@media (prefers-reduced-motion: reduce) { .modal-bg.msheet .modal.ms-nudge-r { animation: none; } }
@media (max-width: 760px) {
  /* The last item in a menu always scrolls clear of the bar and of Safari's own bottom toolbar. */
  .modal-bg.msheet .modal { padding-bottom: calc(40px + env(safe-area-inset-bottom)); scroll-padding-bottom: 40px; overscroll-behavior: contain; }
}
/* One-button bottom bar, chosen in More › Bottom bar (9 Oct 2026): Search at the thumb, one Menu button, menus named and swiped. */
.mb1 { display: none !important; }
@media (max-width: 760px) {
  body.mbar-one .mbar { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-left: 12px; padding-right: 12px; }
  body.mbar-one .mbar > button[data-m] { display: none !important; }
  body.mbar-one .mbar > .mb1 { display: flex !important; }
  body.mbar-one .mb1-search { flex-direction: row !important; justify-content: flex-start !important; gap: 10px !important; min-height: 44px !important; padding: 0 14px !important; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--accent) 72%, #ffffff); background: rgba(255,255,255,.06); color: #d9d3c9 !important; font: 500 16px/1 var(--body); }
  body.mbar-one .mb1-menu { min-width: 64px; }
  body.mbar-one .mb1-menu.on { color: #fff; }
  body.mbar-one .mb1-menu.on::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 18px; height: 3px; margin-left: -9px; border-radius: 2px; background: var(--accent); }
  body.mbar-one .side .side-tools .nav-search { display: none !important; } /* search lives at the bottom instead */
  body.news.mbar-one .mb1-search { border-color: #D1FE17; }
  /* Menus named across the top of the sheet: tap or swipe */
  .ms-tabs { display: flex; gap: 4px; justify-content: space-between; margin: -2px 0 10px; padding: 3px; border-radius: 12px; background: var(--panel-2); }
  .ms-tabs button { flex: 1 1 0; min-width: 0; min-height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); font: 600 13px/1 var(--body); cursor: pointer; padding: 0 4px; }
  .ms-tabs button.on { background: var(--ink); color: var(--panel); }
  body.acid .ms-tabs button.on { background: #E23C8E; color: #0b0a0e; }
}
@media (max-width: 760px) {
  body.mbar-one .mb1-search { border-color: rgba(255,255,255,.22); } /* neutral until used */
  body.mbar-one .mb1-search:active, body.mbar-one .mb1-search:focus-visible { border-color: color-mix(in srgb, var(--accent) 72%, #ffffff); }
  body.mbar-one .modal-bg.msheet .sheet-head h3 { visibility: hidden; } /* the named tab says where you are */
  body.mbar-one .modal-bg.msheet .sheet-head { margin-bottom: -34px; position: relative; z-index: 1; pointer-events: none; } body.mbar-one .modal-bg.msheet .sheet-head .tp-x { pointer-events: auto; }
  body.mbar-one .ms-tabs { margin-right: 46px; }
  .ms-tn { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; line-height: 16px; }
}
/* News & media on a phone (Aaron, 9 Oct 2026: "went into a full zoom out and everything went tiny"): the middle column
   couldn't shrink below its longest link, so rows ran 675px wide and the phone zoomed out to fit them. */
.pr-li { grid-template-columns: 3.2rem minmax(0, 1fr) auto auto; }
.pr-lim, .pr-lim * { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .pr-li { grid-template-columns: 2.8rem minmax(0, 1fr); }
  .pr-li .pr-files, .pr-li .pr-acts { grid-column: 2; }
  .pr-bar .grp-search { width: 100%; max-width: 100%; }
}
/* One-button mode: names stay put, the list slides, the highlight glides (option 1, 9 Oct 2026) */
@media (max-width: 760px) {
  .ms-tabs { position: relative; }
  .ms-tabs button { position: relative; z-index: 1; background: transparent !important; transition: color .2s; }
  .ms-tabs button.on { color: var(--panel); }
  body.acid .ms-tabs button.on { color: #0b0a0e; }
  .ms-ind { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 9px; background: var(--ink); z-index: 0; pointer-events: none; }
  body.acid .ms-ind { background: #E23C8E; }
  .ms-tabs.ms-glide-ready .ms-ind { transition: transform .28s cubic-bezier(.2,.8,.3,1), width .28s cubic-bezier(.2,.8,.3,1); }
  .modal-bg.msheet .modal.ms-stay { animation: none; }
  .ms-body { will-change: transform; }
  .ms-body.ms-next { animation: msNext .25s cubic-bezier(.2,.8,.3,1); }
  .ms-body.ms-prev { animation: msPrev .25s cubic-bezier(.2,.8,.3,1); }
  .modal-bg.msheet .modal { overflow-x: hidden; }
}
@media (prefers-reduced-motion: reduce) { .ms-body.ms-next, .ms-body.ms-prev { animation: none; } .ms-tabs .ms-ind { transition: none !important; } }
@media (max-width: 760px) {
  /* One-button mode: every menu is the same height, so the row of names never moves between menus. */
  body.mbar-one .modal-bg.msheet .modal { height: min(640px, calc(100% - 28px)); }
}
/* My Files › From My Art (13 Oct 2026) */
.pdoc.pd-wide .pd-table { font-size: 7.5pt; } .pdoc.pd-wide .pd-table th { font-size: 7pt; } .pdoc h3 { font-size: 12.5pt; margin: 16px 0 6px; padding-bottom: 3px; border-bottom: 1px solid #d8d2c8; page-break-after: avoid; }
.mydocs .md-head h2 { margin: 0 0 4px; }
.mydocs .md-sec { margin: 18px 0 6px; font: 600 12px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.mydocs .md-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.mydocs .md-sec + .md-row, .mydocs .md-more > .md-row:first-of-type { border-top: 0; }
.mydocs .md-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .mydocs .md-t b { font-size: 15px; } .mydocs .md-t small { color: var(--ink-faint); font-size: 13px; overflow-wrap: anywhere; }
.mydocs .md-t a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mydocs .md-b { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: 0 0 auto; }
.mydocs .md-off .md-t small { color: var(--ink-soft); }
.mydocs .md-more, .mydocs .md-connect { margin: 4px 0 0; } .mydocs .md-more > summary, .mydocs .md-connect > summary { cursor: pointer; font-weight: 600; padding: 6px 0; color: var(--ink-soft); }
.mydocs .md-connect > summary { color: var(--accent); }
.mydocs .md-connect .fl { margin: 8px 0; } .mydocs .md-connect .minput { width: 100%; }
@media (max-width: 760px) { .mydocs .md-row { flex-direction: column; align-items: stretch; } .mydocs .md-b { justify-content: flex-start; } }
.mydocs .md-wq { width: 100%; margin: 6px 0 4px; }
.mydocs .md-wlist { max-height: 480px; overflow-y: auto; padding-right: 4px; }
.mydocs .md-w[hidden] { display: none; }
/* Sell › Orders & shipping (13 Oct 2026) — pipeline, route tree, stage tracker, who-does-what */
.of-answer { border-left: 4px solid var(--accent); } .of-answer h2 { margin-top: 0; }
.of-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.of-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font: 600 12px/1.4 var(--body); color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.of-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.of-pipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 26px; counter-reset: of; }
.of-pipe li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; border-radius: 12px; background: var(--panel-2); border-top: 4px solid var(--c); }
.of-pipe li b { font-size: 15px; } .of-pipe li small { color: var(--ink-soft); font-size: 13px; line-height: 1.45; flex: 1; } .of-pipe li .of-chip { align-self: flex-start; }
.of-pipe li:not(:nth-child(4n)):not(:last-child)::after { content: "→"; position: absolute; right: -20px; top: 22px; font-size: 18px; color: var(--ink-faint); }
.of-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font: 700 13px/1 var(--body); }
.of-root { display: inline-block; margin: 0 0 12px; padding: 8px 14px; border-radius: 10px; background: var(--ink); color: var(--panel); font-size: 14px; }
.of-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.of-route { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--panel); display: flex; flex-direction: column; }
.of-route header { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } .of-route header b { font-size: 15px; } .of-route header small { color: var(--ink-faint); font-size: 12.5px; }
.of-auto { align-self: flex-start; margin-top: 6px; padding: 2px 9px; border-radius: 99px; font: 700 11.5px/1.5 var(--body); letter-spacing: .02em; }
.of-a3 { background: color-mix(in srgb, #4f6b3a 16%, var(--panel)); color: #3d5530; } .of-a2 { background: color-mix(in srgb, #a8742a 16%, var(--panel)); color: #7d5418; }
.of-a1 { background: color-mix(in srgb, #7a4ea3 14%, var(--panel)); color: #5d3a80; } .of-a0 { background: var(--panel-2); color: var(--ink-soft); }
.of-route ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; flex: 1; }
.of-route ol li { position: relative; padding: 6px 0 10px 18px; font-size: 13.5px; line-height: 1.4; border-left: 2px solid color-mix(in srgb, var(--c) 45%, var(--line)); margin-left: 5px; }
.of-route ol li::before { content: ""; position: absolute; left: -6px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.of-route ol li:last-child { border-left-color: transparent; }
.of-who { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--ink-soft); }
.of-stages { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.of-stages li { position: relative; text-align: center; font-size: 12.5px; color: var(--ink-faint); padding-top: 34px; }
.of-stages li span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); background: var(--panel); font: 700 12px/1 var(--body); z-index: 1; }
.of-stages li::before { content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: var(--line); } .of-stages li:first-child::before { display: none; }
.of-stages li.on { color: var(--ink); font-weight: 600; } .of-stages li.on span { background: var(--accent); border-color: var(--accent); color: #fff; } .of-stages li.on::before { background: var(--accent); }
.of-jobs { display: flex; flex-direction: column; }
.of-job { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.of-job:first-child { border-top: 0; } .of-j { font-weight: 600; font-size: 14px; } .of-a { font-size: 14px; line-height: 1.45; } .of-a small { display: block; color: var(--ink-faint); font-size: 12.5px; margin-top: 2px; }
.of-s { padding: 2px 9px; border-radius: 99px; font: 700 11.5px/1.5 var(--body); white-space: nowrap; }
.of-s-have { background: color-mix(in srgb, #4f6b3a 16%, var(--panel)); color: #3d5530; } .of-s-build { background: color-mix(in srgb, #3b6fb6 14%, var(--panel)); color: #2d568f; } .of-s-choose { background: color-mix(in srgb, #a8742a 16%, var(--panel)); color: #7d5418; }
.of-list { margin: 0; padding-left: 18px; } .of-list li { margin: 6px 0; line-height: 1.5; } .of-decide li { margin: 6px 0; line-height: 1.5; }
@media (max-width: 900px) { .of-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .of-pipe li::after { display: none; } .of-job { grid-template-columns: minmax(0, 1fr) auto; } .of-a { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 560px) { .of-pipe { grid-template-columns: 1fr; } .of-stages { grid-template-columns: 1fr; text-align: left; } .of-stages li { text-align: left; padding: 4px 0 10px 38px; } .of-stages li span { left: 13px; top: 2px; } .of-stages li::before { left: 13px; top: -12px; width: 2px; height: 100%; } }
body.mode-dark .of-a3, body.mode-dark .of-s-have, body.acid .of-a3, body.acid .of-s-have { color: #a8c98f; } body.mode-dark .of-a2, body.mode-dark .of-s-choose, body.acid .of-a2, body.acid .of-s-choose { color: #e2b56e; }
body.mode-dark .of-a1, body.acid .of-a1 { color: #c9a6ec; } body.mode-dark .of-s-build, body.acid .of-s-build { color: #9cc1f2; }
body.acid .of-chip, body.mode-dark .of-chip, body.news .of-chip { color: color-mix(in srgb, var(--c) 55%, #ffffff); }
body.acid .of-n, body.mode-dark .of-n { color: #0b0a0e; background: color-mix(in srgb, var(--c) 70%, #ffffff); }
.of-yes { padding: 10px 12px; border-radius: 10px; background: var(--panel-2); }
.of-decide { list-style: none; padding: 0; } .of-decide li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); } .of-decide li:first-child { border-top: 0; }
.of-decide li small { display: block; color: var(--ink-faint); font-size: 12.5px; margin-top: 2px; }
.of-dn { flex: 0 0 auto; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: var(--panel-2); font: 700 12.5px/1 var(--body); color: var(--ink-soft); }
.of-dn.first { background: var(--accent); color: #fff; }
.of-pipe-wall li:not(:nth-child(4n)):not(:last-child)::after { content: "→"; }
.of-ticks { list-style: none; margin: 0; padding: 0; } .of-ticks li { position: relative; padding: 5px 0 5px 26px; font-size: 13.5px; line-height: 1.4; border-top: 1px solid var(--line); } .of-ticks li:first-child { border-top: 0; }
.of-ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border: 1.5px solid var(--ink-soft); border-radius: 4px; }
.of-check .of-route header small { color: var(--ink-soft); }

/* Shipments › Before it leaves (v148) */
.sh-box { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.sh-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sh-count { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ox-100); color: var(--sig-ink); border: 1px solid var(--ox-200); white-space: nowrap; }
.sh-count.ok { background: var(--olive-100); color: var(--olive); border-color: var(--olive-200); }
.sh-list { list-style: none; margin: 6px 0 0; padding: 0; }
.sh-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.sh-list li:first-child { border-top: 0; }
.sh-list label { display: flex; gap: 9px; align-items: flex-start; flex: 1 1 260px; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.sh-list input[type=checkbox] { width: 18px; height: 18px; flex: none; margin: 1px 0 0; accent-color: var(--olive); }
.sh-list li.na label span { color: var(--ink-faint); text-decoration: line-through; }
.sh-list small { color: var(--ink-faint); font-size: 12px; padding-left: 27px; }
.sh-list .linkbtn { margin-left: 27px; font-size: 12px; }
@media (min-width: 600px) { .sh-list .linkbtn { margin-left: 0; } }
.sh-photohint { margin: 2px 0 6px; }

/* Orders & shipping: at a glance, then the detail folded (Aaron, 13 Oct 2026: "simplify … easier to understand at a glance") */
.of-gl { list-style: none; counter-reset: gl; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.of-gl li { counter-increment: gl; position: relative; padding: 30px 10px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); min-width: 0; }
.of-gl li::before { content: counter(gl); position: absolute; top: 8px; left: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--panel); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.of-gl b { display: block; font-size: 14px; line-height: 1.3; } .of-gl small { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.of-glfacts { margin-top: 14px; display: grid; gap: 8px; } .of-glfacts p { margin: 0; font-size: 13.5px; line-height: 1.45; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 2px 12px; }
.of-glfacts .of-s { margin-right: 4px; }
.of-foldbar { display: flex; justify-content: space-between; align-items: center; margin: 18px 2px 6px; } .of-foldbar .eyebrow { margin: 0; }
details.of-fold { padding-top: 0; padding-bottom: 0; } details.of-fold[open] { padding-bottom: 16px; }
details.of-fold > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding: 14px 28px 14px 0; position: relative; }
details.of-fold > summary::-webkit-details-marker { display: none; }
details.of-fold > summary::after { content: "+"; position: absolute; right: 2px; top: 11px; font-size: 20px; line-height: 1; color: var(--ink-soft); }
details.of-fold[open] > summary::after { content: "−"; }
details.of-fold > summary h2 { margin: 0; font-size: 16px; } .of-sum { color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
details.of-fold[open] > summary .of-sum { display: none; }
details.of-fold > summary:focus-visible { outline: 2px solid var(--sig-ink); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 1180px) { .of-gl { grid-template-columns: 1fr; gap: 0; } .of-gl li { padding: 9px 0 9px 30px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; } .of-gl li:first-child { border-top: 0; } .of-gl li::before { top: 10px; left: 0; } .of-gl small { margin-top: 2px; } }
@media (max-width: 600px) { .of-glfacts p { grid-template-columns: 1fr; } }
.of-glance { border-left: 4px solid var(--accent); } .of-glance h2 { margin-top: 0; }

.of-check .of-ticks li::before { width: 6px; height: 6px; top: 12px; left: 6px; border: 0; border-radius: 50%; background: var(--ink-faint); } /* a reference list, not boxes to tick */
.rf-say { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--ox-100); color: var(--sig-ink); border: 1px solid var(--ox-200); font-size: 13px; line-height: 1.4; }

/* "Legal documents for this" on Orders & shipping, Distribution, Accounts & logins, Merchandise (14 Oct 2026) */
details.legal-for > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding-right: 26px; position: relative; }
details.legal-for > summary::-webkit-details-marker { display: none; }
details.legal-for > summary::after { content: "+"; position: absolute; right: 2px; top: -2px; font-size: 20px; color: var(--ink-soft); } details.legal-for[open] > summary::after { content: "−"; }
.legal-for .ldoc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .legal-for .ldoc-sub { color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
details.legal-for > summary:focus-visible { outline: 2px solid var(--sig-ink); outline-offset: 2px; border-radius: 6px; }
.ldoc-count { font-size: 12px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.ldoc-list { list-style: none; margin: 8px 0 0; padding: 0; }
.ldoc-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n s" "w s"; gap: 1px 12px; padding: 8px 0; border-top: 1px solid var(--line); align-items: center; }
.ldoc-list li:first-child { border-top: 0; }
.ldoc-name { grid-area: n; justify-self: start; text-align: left; font-weight: 600; font-size: 14px; }
.ldoc-list small { grid-area: w; color: var(--ink-soft); font-size: 12.5px; line-height: 1.4; }
.ldoc-st { grid-area: s; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.ldoc-ok { background: var(--olive-100); color: var(--olive); } .ldoc-mid { background: var(--ox-100); color: var(--sig-ink); } .ldoc-no { background: var(--panel-2); color: var(--ink-soft); }
/* Legal › Facts used in documents (14 Oct 2026) */
details.lfacts > summary { cursor: pointer; display: flex; flex-direction: column; gap: 3px; list-style: none; }
details.lfacts > summary::-webkit-details-marker { display: none; }
details.lfacts > summary small { color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
.lfacts-list { list-style: none; margin: 10px 0 0; padding: 0; }
.lfacts-list li { padding: 10px 0; border-top: 1px solid var(--line); } .lfacts-list li:first-child { border-top: 0; }
.lfacts-k { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .lfacts-k code { font-size: 11.5px; color: var(--ink-faint); }
.lfacts-v { margin: 4px 0 2px; font-size: 13.5px; line-height: 1.45; } .lfacts-in { width: 100%; margin: 6px 0 2px; font-size: 13.5px; }
.lfacts-src { color: var(--ink-soft); font-size: 12px; }
body.viewer #proj-delete, body.viewer #proj-archive { display: none !important; } /* view-only: no archiving or deleting projects */

/* Website › rebellionarthouse.com (14 Oct 2026) */
body.viewer .obs-edit [data-gadd] { display: revert !important; } /* Joe can add to the Website section's lists */
.web-facts { display: grid; gap: 8px; margin: 8px 0 14px; } .web-facts p { margin: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 2px 12px; font-size: 14px; line-height: 1.45; }
.web-facts .spill { margin-left: 6px; }
.web-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.web-ok { list-style: none; margin: 6px 0 0; padding: 0; } .web-ok li { padding: 5px 0; border-top: 1px solid var(--line); font-size: 13.5px; } .web-ok li:first-child { border-top: 0; }
.web-ok small { display: block; color: var(--ink-soft); font-size: 12px; } .web-n { margin: 6px 0 4px; font-weight: 600; font-size: 14px; }
.web-topics { list-style: none; margin: 8px 0 0; padding: 0; } .web-topics li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); } .web-topics li:first-child { border-top: 0; }
.web-topics small { color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.web-legal .legal-for { box-shadow: none; border: 0; padding: 0; margin: 0; }
.spill.s-researching, .spill.s-asked-in-writing, .spill.s-to-build, .spill.s-paused { background: var(--panel-2); color: var(--ink-soft); }
.spill.s-approved, .spill.s-chosen, .spill.s-built-not-connected { background: var(--ox-100); color: var(--sig-ink); }
.spill.s-connected { background: var(--olive-100); color: var(--olive); } .spill.s-declined { background: var(--panel-2); color: var(--ink-faint); text-decoration: line-through; }
@media (max-width: 760px) { .web-cols { grid-template-columns: 1fr; } .web-facts p { grid-template-columns: 1fr; } .web-topics li { flex-direction: column; } }
.web-sub { margin-top: 12px; }
body.vo-data [data-view="psales"] { display: none !important; } /* strict view-only accounts don't see private sales */
/* Website: approved, connected and working things in green (Aaron, 15 Oct 2026: "when something is approved highlight it in green") */
.spill.s-approved, .spill.s-connected, .spill.s-works, .spill.s-set-up { background: rgba(46, 125, 50, .16); color: #2e7d32; border-color: rgba(46, 125, 50, .35); } /* a clear green in every style, like the BOI flags */
body.mode-dark .spill.s-approved, body.mode-dark .spill.s-connected, body.mode-dark .spill.s-works, body.mode-dark .spill.s-set-up { color: #7bd88f; background: rgba(123, 216, 143, .16); }
.spill.s-needs-checking, .spill.s-ask-joe, .spill.s-to-decide, .spill.s-not-set-up { background: var(--ox-100); color: var(--sig-ink); }
[data-gsec^="web_"] tbody tr:has(.spill.s-approved, .spill.s-connected, .spill.s-works, .spill.s-set-up) { background: rgba(46, 125, 50, .08); }
[data-gsec^="web_"] tbody tr:has(.spill.s-approved, .spill.s-connected, .spill.s-works, .spill.s-set-up) td:first-child { box-shadow: inset 3px 0 0 #2e7d32; }
/* Joe's to-do board (15 Oct 2026) */
.wt-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.wt-col { background: var(--panel-2); border-radius: 10px; padding: 8px; min-width: 0; } .wt-col h4 { margin: 2px 4px 8px; font-size: 13px; display: flex; justify-content: space-between; } .wt-col h4 span { color: var(--ink-soft); font-weight: 400; }
.wt-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; position: relative; }
.wt-card b { display: block; font-size: 13.5px; line-height: 1.35; padding-right: 34px; } .wt-card small { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 3px; }
.wt-mv { position: absolute; top: 6px; right: 6px; display: flex; gap: 6px; } .wt-done .wt-card b { color: var(--ink-soft); text-decoration: line-through; }
@media (max-width: 1300px) { .wt-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .wt-board { grid-template-columns: 1fr; } }
/* Website › Message board — its own posts and replies (15 Oct 2026) */
.web-board .wb-new { display: grid; gap: 8px; margin: 12px 0 18px; }
.web-board .wb-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.web-board .wb-row .minput { flex: 1 1 220px; }
.web-board .wb-thread { border: 1px solid var(--line, rgba(0,0,0,.1)); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; background: var(--card, transparent); }
.web-board .wb-msg + .wb-msg { margin-top: 10px; }
.web-board .wb-rep { margin-left: 28px; padding-left: 12px; border-left: 2px solid var(--sig-ok, #2e7d32); }
.web-board .wb-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.web-board .wb-head small { color: var(--muted, #777); }
.web-board .wb-body { margin: 6px 0 4px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.web-board .wb-acts { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.web-board .wb-replybox { margin: 10px 0 0 28px; }
@media (max-width: 700px) { .web-board .wb-rep, .web-board .wb-replybox { margin-left: 12px; } }
/* Website › Assets — per-artist bio, CV, portrait and web files (15 Oct 2026) */
.web-assets .wa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin: 14px 0 6px; }
.web-assets .wa-card { border: 1px solid var(--line, rgba(0,0,0,.1)); border-radius: 12px; padding: 14px; min-width: 0; }
.web-assets .wa-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.web-assets .wa-card h3 { margin: 0; font-size: 16px; }
.web-assets .wa-card header a { font-size: 12px; overflow-wrap: anywhere; }
.web-assets .wa-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--line, rgba(0,0,0,.08)); }
.web-assets .wa-row > div:first-child { display: grid; gap: 2px; min-width: 0; }
.web-assets .wa-row small { color: var(--muted, #777); font-size: 12px; overflow-wrap: anywhere; }
.web-assets .wa-off b { color: var(--muted, #777); }
.web-assets .wa-b { display: flex; gap: 6px; flex-wrap: wrap; }
.web-assets .wa-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; padding: 6px 0 10px; }
.web-assets .wa-pics figure { margin: 0; display: grid; gap: 6px; }
.web-assets .wa-pics img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 8px; background: var(--ox-50, #f3efe8); }
.web-assets .wa-files summary { cursor: pointer; font-size: 13px; padding: 4px 0; }
.web-assets .wa-files ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 280px; overflow: auto; }
.web-assets .wa-files li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 13px; border-bottom: 1px dashed var(--line, rgba(0,0,0,.08)); }
.web-assets .wa-files li small { color: var(--muted, #777); white-space: nowrap; }
.web-assets .wa-links-h { margin-top: 18px; }
/* Crew (Brian, 15 Oct 2026): a team login without an artist's own pages */
body.crew #nav .nav-item[data-view="art"]:not([data-kind]), body.crew #nav .nav-item[data-view="editions"], body.crew #nav .nav-matcalc { display: none !important; }
/* Materials calculator: Reset at the top (15 Oct 2026) */
.mc-reset-row { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
/* ===== Kitsune — Wouter's look (15 Oct 2026): night indigo, fox-fire orange, hand-drawn nine-tailed fox, rune stones ===== */
body.kitsune {
  --ink: #EEF0FF; --ink-2: #DADDF7; --ink-soft: #AAB0E6; --ink-faint: #7F86C6; --paper: #07081A; --panel: #10123A; --panel-2: #171A4A;
  --line: rgba(130,140,255,.16); --accent: #FF7A00; --accent-ink: #160800; --shadow: none;
  --display: "Dela Gothic One", "Inter", sans-serif; --body: "Inter", system-ui, sans-serif;
  background: radial-gradient(1100px 520px at 72% -12%, #20155a, transparent 62%), #07081A; color: #EEF0FF; color-scheme: dark; font-family: "Inter", system-ui, sans-serif;
}
body.kitsune .main { background: transparent; }
body.kitsune .side, body.kitsune .mbar { background: #050612; border-color: #1b1f44; }
body.kitsune .nav-item { color: #C9CDF0; border-radius: 9px; } body.kitsune .nav-item:hover { background: #10123A; color: #fff; }
body.kitsune .nav-item.active { background: linear-gradient(90deg, rgba(255,120,0,.3), transparent); color: #fff; box-shadow: inset 3px 0 0 #FF7A00; }
body.kitsune .nav-sec-h.nav-label { color: #FF9A2E !important; letter-spacing: .16em; }
body.kitsune .card, body.kitsune .ev-row, body.kitsune .mkt-sec, body.kitsune .modal { background: var(--panel); border: 1px solid #23285a; border-radius: 16px; box-shadow: none; }
body.kitsune .page-head h1 { font-family: "Dela Gothic One", "Inter", sans-serif; letter-spacing: 0; text-shadow: 0 0 18px rgba(255,120,0,.45); }
body.kitsune .btn { border-radius: 10px; } body.kitsune .btn.primary, body.kitsune .side-add { background: #FF7A00 !important; border-color: #FF7A00 !important; color: #160800 !important; }
body.kitsune .btn.primary:hover, body.kitsune .side-add:hover { background: #FF9A3D !important; }
body.kitsune .minput { background: var(--panel-2); border-color: var(--line); color: var(--ink); border-radius: 8px; }
body.kitsune a { color: var(--ink); } body.kitsune .linkbtn { color: #FFB347; }
body.kitsune .vo-banner { background: #10123A; color: #9cc2ff; border-bottom: 1px solid #23285a; }
/* the hero: the video owns it; only the carved WIN WIN WIN sits on it (Aaron: "the video not so covered in text") */
.kit-hero { position: relative; overflow: hidden; height: clamp(440px, 66vh, 760px); margin: 0 0 14px; border-radius: 22px; border: 1px solid #2a2f6e; background: #0b0c2a center / cover no-repeat; background-position: 70% 50%; }
.kit-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.kit-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(7,8,26,.75), rgba(7,8,26,0)); }
/* WIN WIN WIN, cut like a runestone: each stroke is carved in, then the words catch fox-fire */
.kit-win { position: absolute; left: 34px; bottom: 30px; z-index: 2; width: min(620px, 62%); height: auto; overflow: visible; }
.kit-win path { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: square; stroke-linejoin: miter; stroke-dasharray: 400; stroke-dashoffset: 400; animation: kitCarve .5s cubic-bezier(.6,0,.4,1) forwards, kitFire 3.2s ease-in-out 2.2s infinite; filter: drop-shadow(0 0 6px rgba(255,140,0,.9)) drop-shadow(3px 3px 0 #ff4d00); }
.kw1 path:nth-child(1) { animation-delay: .1s, 2.2s } .kw1 path:nth-child(2) { animation-delay: .3s, 2.2s } .kw1 path:nth-child(3) { animation-delay: .4s, 2.2s }
.kw2 path:nth-child(1) { animation-delay: .7s, 2.4s } .kw2 path:nth-child(2) { animation-delay: .9s, 2.4s } .kw2 path:nth-child(3) { animation-delay: 1s, 2.4s }
.kw3 path:nth-child(1) { animation-delay: 1.3s, 2.6s } .kw3 path:nth-child(2) { animation-delay: 1.5s, 2.6s } .kw3 path:nth-child(3) { animation-delay: 1.6s, 2.6s }
@keyframes kitCarve { to { stroke-dashoffset: 0 } }
@keyframes kitFire { 0%, 100% { stroke: #fff } 50% { stroke: #ffd9a0 } }
/* the words that used to sit on the video, now a quiet strip beneath it */
.kit-bar { display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; margin: 0 0 22px; padding: 16px 22px; border-radius: 16px; background: rgba(16,18,58,.6); border: 1px solid #23285a; }
.kit-hi { margin: 0; color: #fff; font: 400 18px/1.2 "Dela Gothic One", sans-serif; }
.kit-lede { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.5; color: #C3C8F2; }
.kit-count { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.kit-count b { font: 400 40px/1 "Dela Gothic One", sans-serif; color: #7FB3FF; text-shadow: 0 0 18px #2F6BFF; }
.kit-count span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9CC2FF; max-width: 16ch; }
/* the rune stones */
.kit-runes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 18px; }
.kit-rune { all: unset; cursor: pointer; position: relative; overflow: hidden; padding: 16px; min-height: 104px; border-radius: 16px; background: linear-gradient(170deg, #181b46, #0e1030); border: 1px solid #2c3270; display: grid; align-content: end; gap: 3px; transition: transform .15s, border-color .15s; }
.kit-rune:hover, .kit-rune:focus-visible { transform: translateY(-2px); border-color: #FF7A00; }
.kit-rune:focus-visible { outline: 2px solid #FF7A00; outline-offset: 2px; }
.kr-g { position: absolute; left: 16px; top: 12px; font: 40px/1 "Noto Sans Runic", serif; color: #7FD1FF; text-shadow: 0 0 12px #2F8BFF, 0 0 26px #2F6BFF; animation: kitGlow 3s ease-in-out infinite; }
.kit-rune:nth-child(2) .kr-g, .kit-rune:nth-child(5) .kr-g { color: #FFB347; text-shadow: 0 0 12px #FF8A00, 0 0 26px #FF5E00; }
.kit-rune:nth-child(2n) .kr-g { animation-delay: 1.2s; }
.kit-rune b { font-size: 15px; color: #fff; margin-top: 44px; } .kit-rune small { font-size: 11.5px; color: #AAB0E6; }
@keyframes kitGlow { 0%, 100% { opacity: .75 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .kit-win path { animation: none; stroke-dashoffset: 0; } .kr-g { animation: none; } }
/* phone: the video keeps its own shape; the strip and runes stack beneath */
@media (max-width: 760px) {
  .kit-hero { height: auto; aspect-ratio: 16 / 10; border-radius: 16px; }
  .kit-win { left: 14px; bottom: 14px; width: 78%; }
  .kit-bar { padding: 14px 16px; gap: 10px 16px; }
  .kit-runes { grid-template-columns: 1fr 1fr; gap: 10px; }
}
body.lang-nl.tr-busy::after { content: "Vertalen…"; font-family: "Inter", system-ui, sans-serif; }
/* Kitsune: the daily reading is a rune stone, in fox-fire colours */
body.kitsune .tarot { background: linear-gradient(135deg, #10123A, #0b0c2a 60%, #1d1240); border-color: #2c3270; color: #EEF0FF; }
body.kitsune .tarot.glow { box-shadow: 0 0 0 1px #FF7A00, 0 0 24px rgba(255,122,0,.35); }
body.kitsune .tarot-back { border-color: #FF9A2E; background: radial-gradient(circle at 50% 40%, #3a2a1a, #1a1410); border-radius: 46% 54% 42% 58% / 22% 24% 20% 22%; }
body.kitsune .tarot-back span { font-size: 0; } body.kitsune .tarot-back span::after { content: "ᚹ"; font: 30px/1 "Noto Sans Runic", serif; color: #FFB347; text-shadow: 0 0 10px #FF7A00; }
body.kitsune .tarot-t b { font-family: "Dela Gothic One", sans-serif; font-weight: 400; letter-spacing: .02em; color: #fff; }
body.kitsune .oracle-tab.on { background: #FF7A00; color: #160800; border-color: #FF7A00; }
/* Kitsune's companion: an animated fox, top left above the search bar, about half the menu's width */
.kit-mascot { flex: 0 0 auto; width: 50%; aspect-ratio: 1; height: auto; margin: 0 auto 12px; border-radius: 50%; overflow: hidden; pointer-events: none; background: #0B0C2A;
  box-shadow: 0 0 0 2px rgba(255,122,0,.55), 0 0 22px rgba(255,122,0,.35); }
.kit-mascot video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); display: block; }
body.side-collapsed .kit-mascot { width: 40px; margin: 0 auto 10px; }
@media (max-width: 760px) { .kit-mascot { width: 44px; margin: 0 auto 0 6px; } }

/* SKU key (15 Oct 2026) */
.sk-eg { font: 600 clamp(15px, 3.6vw, 22px)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 6px 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.sk-eg i { font-style: normal; opacity: .5; }
.sk-seg { display: inline-block; padding: 2px 7px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.sk-seg.s1 { background: rgba(120,120,140,.22); } .sk-seg.s2 { background: rgba(255,122,0,.25); } .sk-seg.s3 { background: rgba(80,160,255,.25); }
.sk-seg.s4 { background: rgba(70,200,140,.25); } .sk-seg.s5 { background: rgba(200,90,220,.25); }
.sk-parts { display: grid; gap: 6px; margin: 0 0 14px; }
.sk-parts > div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; }
.sk-parts dt { text-align: right; } .sk-parts dd { margin: 0; }
.sk-h { margin: 14px 0 6px; }
.sk-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.sk-t th, .sk-t td { text-align: left; padding: 5px 6px; border-bottom: 1px solid rgba(128,128,128,.22); vertical-align: top; }
.sk-t td small { display: block; opacity: .7; font-size: 11px; }
.sk-t .sk-pr td { font-weight: 600; border-bottom: 0; }
.sk-t td:nth-child(n+3) { white-space: nowrap; }
@media (max-width: 560px) { .sk-t { font-size: 12px; } .sk-t th, .sk-t td { padding: 4px 3px; } .sk-parts > div { grid-template-columns: 70px 1fr; } }

/* Marketing › AI tools (15 Oct 2026) */
.ai-rule { border: 1px solid var(--sig-doing, #c8902a); border-left-width: 4px; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; line-height: 1.5; font-size: 14px; }
.aif-list { display: grid; gap: 8px; max-height: 50vh; overflow: auto; margin: 6px 0; }
.aif-row { align-items: flex-start; } .aif-row small { opacity: .75; }
.rd-long { margin: 10px 0; } .rd-long b { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: 3px; } .rd-long p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }


/* Team chat: thread tools at the foot of a topic — ✨ Summary and 🗓 Itinerary (16 Oct 2026, redesigned after Aaron's "a little off and funky") */
.bd-x { margin: 16px 0 12px; }
.bdx-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.bdx-tab { font: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; text-transform: none; letter-spacing: 0; }
.bdx-tab:hover { border-color: var(--accent); }
.bdx-tab.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #111); }
.bdx-tab i { font-style: normal; font-size: 12px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); }
.bdx-panel { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--panel); color: var(--ink); font-size: 14px; line-height: 1.5; }
.bdx-panel p { margin: 0 0 8px; } .bdx-panel ul { margin: 0 0 8px 18px; padding: 0; } .bdx-panel li { margin: 3px 0; }
.bdx-meta { color: var(--ink-soft); font-size: 13px; } .bdx-meta a { color: var(--accent); }
.bdx-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; }
.bdx-btn { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; text-transform: none; letter-spacing: 0; }
.bdx-btn.on { border-color: var(--accent); color: var(--accent); }
.bdx-btn:disabled { opacity: .6; cursor: wait; }
.bdx-seg { margin-left: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.bdx-seg button { font: inherit; font-size: 13px; padding: 5px 12px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; text-transform: none; letter-spacing: 0; }
.bdx-seg button.on { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); }
.bd-tday h4 { margin: 12px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-family: inherit; }
.bd-tday ul { list-style: none; margin: 0; padding: 0; }
.bd-ti { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: start; }
.bd-ti:last-child { border-bottom: 0; }
.bd-ti-t { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.bd-ti-m b { font-weight: 600; } .bd-ti-m small { display: block; color: var(--ink-soft); font-size: 12px; } .bd-ti-m a { font-size: 12px; color: var(--accent); }
.bd-ti-a { display: flex; gap: 2px; }
.bdx-ic { font: inherit; width: 28px; height: 28px; border-radius: 6px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; }
.bdx-ic:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--ink); }
.bdx-month { font-weight: 600; margin: 0 0 6px; }
.bd-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; font-size: 12px; margin-bottom: 8px; }
.bd-cal > b { text-align: center; color: var(--ink-faint); font-weight: 500; }
.bd-cal-d { min-height: 62px; border-radius: 6px; padding: 4px 5px; background: color-mix(in srgb, var(--ink) 4%, transparent); overflow: hidden; }
.bd-cal-d span { color: var(--ink-faint); font-size: 11px; display: block; }
.bd-cal-d.has { background: color-mix(in srgb, var(--accent) 14%, transparent); } .bd-cal-d.has span { color: var(--ink); font-weight: 600; }
.bd-cal-d em { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-style: normal; overflow: hidden; line-height: 1.25; margin-top: 3px; overflow-wrap: anywhere; font-size: 11px; }
@media (max-width: 560px) { .bdx-seg { margin-left: 0; } .bd-cal-d { min-height: 50px; padding: 3px; } .bd-cal-d em { -webkit-line-clamp: 2; font-size: 10px; } }
.bd-ti { grid-template-columns: 18px minmax(0, 1fr) auto auto; }
.bd-ti-k { color: var(--accent); line-height: 1.4; } .bd-ti.is-task .bd-ti-k { color: var(--ink-soft); }
.bd-ti-when { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.bdx-in { font: inherit; font-size: 12px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--ink); color-scheme: light dark; max-width: 130px; }
.bdx-in[type="time"] { max-width: 112px; }
.bd-tday.undated h4 { color: var(--accent); } .bd-tday h4 small { font-weight: 500; opacity: .8; margin-left: 4px; }
@media (max-width: 560px) { .bd-ti { grid-template-columns: 16px minmax(0, 1fr) auto; } .bd-ti-when { grid-column: 2 / 3; justify-content: flex-start; } .bd-ti-a { grid-row: 1; grid-column: 3; } }
@media (max-width: 560px) { .bd-ti-when { flex-wrap: nowrap; gap: 6px; } .bd-ti-when .bdx-in { max-width: none; flex: 1 1 0; min-width: 0; padding: 4px 6px; } .bd-ti-when .bdx-in[type="time"] { flex: 0 0 104px; } }

/* Itinerary colour coding, week/month calendars, drag and drop, PDF (16 Oct 2026) */
.tt-travel { --tt: #4c8ee8; } .tt-stay { --tt: #9b7ae0; } .tt-meeting { --tt: #e0a63a; } .tt-food { --tt: #e2734f; }
.tt-visit { --tt: #2fb38a; } .tt-task { --tt: #9aa0ad; } .tt-other { --tt: #b8a98f; }
.bd-ti { border-left: 3px solid var(--tt, transparent); padding-left: 8px; }
.bd-ti .bd-ti-k { color: var(--tt); }
.bdx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; font-size: 12px; color: var(--ink-soft); }
.bdx-legend span { display: inline-flex; align-items: center; gap: 5px; } .bdx-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--tt); display: inline-block; }
.bdx-calnav { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; } .bdx-calnav b { font-weight: 600; }
.bd-chip { display: block; font-style: normal; font-size: 11px; line-height: 1.25; margin-top: 3px; padding: 3px 5px; border-radius: 5px; background: color-mix(in srgb, var(--tt) 22%, transparent); border-left: 3px solid var(--tt); color: var(--ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.bd-chip[draggable="true"] { cursor: grab; } .bd-chip.dragging { opacity: .45; }
.bd-chip i { font-style: normal; font-weight: 600; margin-right: 4px; font-variant-numeric: tabular-nums; }
.bd-cal-d.has, .bd-wd.has { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.bd-cal-d.out { opacity: .45; } .bd-cal-d.today span, .bd-wd.today span b { color: var(--accent); }
.bd-cal-d.drop-on, .bd-wd.drop-on { outline: 2px dashed var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.bd-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.bd-wd { min-height: 150px; border-radius: 8px; padding: 6px; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.bd-wd > span { display: block; font-size: 11px; color: var(--ink-soft); margin-bottom: 2px; } .bd-wd > span b { font-size: 15px; color: var(--ink); margin-left: 2px; }
.bd-wd .bd-chip { -webkit-line-clamp: 4; font-size: 12px; }
.bdx-out { margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
a.bdx-btn { text-decoration: none; display: inline-block; }
@media (max-width: 560px) {
  .bd-week { grid-template-columns: 1fr; } .bd-wd { min-height: 0; display: grid; grid-template-columns: 64px 1fr; gap: 4px 8px; align-items: start; }
  .bd-wd > span { grid-row: span 9; } .bd-wd .bd-chip { margin-top: 0; }
}
/* the PDF */
.pdoc-trip .tp-sub { color: #555; margin: -4px 0 10px; text-align: center; font-size: 10pt; }
.pdoc-trip .tp-legend { text-align: center; font-size: 9pt; margin: 0 0 12px; } .pdoc-trip .tp-legend span { margin: 0 8px; white-space: nowrap; }
.pdoc-trip .tp-legend i, .pdoc-trip .pt-k i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--tt); margin-right: 4px; vertical-align: middle; }
.pdoc-trip .tp-day { font-size: 12pt; margin: 14px 0 4px; border-bottom: 1.5px solid #141414; padding-bottom: 2px; page-break-after: avoid; }
.pdoc-trip .tp-list { width: 100%; border-collapse: collapse; font-size: 10pt; } .pdoc-trip .tp-list tr { page-break-inside: avoid; }
.pdoc-trip .tp-list td { padding: 5px 6px; border-bottom: 1px solid #ddd; vertical-align: top; } .pdoc-trip .tp-list tr td:first-child { border-left: 3px solid var(--tt); }
.pdoc-trip .pt-t { width: 44px; font-variant-numeric: tabular-nums; } .pdoc-trip .pt-k { width: 84px; color: #444; font-size: 9pt; white-space: nowrap; } .pdoc-trip small { color: #555; }
.pdoc-trip .tp-month { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 8pt; page-break-inside: avoid; margin-bottom: 10px; }
.pdoc-trip .tp-month th { font-weight: 600; padding: 3px; border-bottom: 1px solid #141414; }
.pdoc-trip .tp-month td { height: 62px; vertical-align: top; border: 1px solid #ddd; padding: 2px 3px; } .pdoc-trip .tp-month td.out { color: #bbb; background: #fafafa; }
.pdoc-trip .tp-month td span { font-size: 7.5pt; color: #777; }
.pdoc-trip .tp-month em { display: block; font-style: normal; margin-top: 2px; padding: 1px 3px; border-left: 3px solid var(--tt); background: var(--ttbg, #f4f4f4); overflow: hidden; word-break: break-word; }
.pdoc-trip .tt-travel { --ttbg: #e4eefc; } .pdoc-trip .tt-stay { --ttbg: #efe9fb; } .pdoc-trip .tt-meeting { --ttbg: #fbf1de; } .pdoc-trip .tt-food { --ttbg: #fbe7e0; }
.pdoc-trip .tt-visit { --ttbg: #def4ec; } .pdoc-trip .tt-task { --ttbg: #eeeff2; } .pdoc-trip .tt-other { --ttbg: #f3f0ea; }
.bd-chip { white-space: normal !important; text-overflow: clip; overflow-wrap: break-word; word-break: normal; hyphens: auto; }
/* Free time: green blocks (16 Oct 2026) */
.tt-free { --tt: #3fbf5f; }
.bd-cal-d.is-free, .bd-wd.is-free { background: color-mix(in srgb, #3fbf5f 24%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #3fbf5f 55%, transparent); }
.bdx-btn.bdx-free { border-color: #3fbf5f; color: #3fbf5f; }
.pdoc-trip .tt-free { --ttbg: #dcf5e2; } .pdoc-trip .tp-month td.is-free { background: #e3f7e8; }
.bd-cal-d[data-dropday]:not(.out), .bd-wd[data-dropday] { cursor: cell; position: relative; }
.bd-cal-d[data-dropday]:hover::after, .bd-wd[data-dropday]:hover::after { content: "+"; position: absolute; right: 6px; top: 3px; font-size: 14px; color: var(--accent); opacity: .8; }
/* Itinerary full screen + collapse (16 Oct 2026) */
.bdx-panel { position: relative; }
.bdx-ptools { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; align-items: center; }
.bdx-panel > .bdx-acts:first-of-type { padding-right: 64px; }
.bdx-full { position: fixed; inset: 0; z-index: 900; margin: 0; border-radius: 0; overflow: auto; padding: 56px max(16px, 3vw) 24px; background: var(--panel); }
.bdx-full .bdx-ptools { position: fixed; top: 12px; right: 16px; left: max(16px, 3vw); justify-content: flex-end; z-index: 2; }
.bdx-full .bdx-ftitle { margin-right: auto; font-size: 16px; }
.bdx-full .bd-wd { min-height: 60vh; } .bdx-full .bd-cal-d { min-height: 13vh; } .bdx-full .bd-chip { font-size: 13px; -webkit-line-clamp: 4; }
body.bdx-noscroll { overflow: hidden; }
@media (max-width: 560px) { .bdx-full .bd-wd { min-height: 0; } .bdx-full .bd-cal-d { min-height: 64px; } }
#signed-out { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 2000; display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--panel, #1c1c28); color: var(--ink, #fff); border: 1px solid var(--accent, #e08a2a); box-shadow: 0 10px 30px rgba(0,0,0,.35); max-width: calc(100vw - 32px); font-size: 14px; }
@media (max-width: 560px) { #signed-out { flex-direction: column; align-items: stretch; text-align: center; } }
/* Google Calendar look: solid coloured blocks, white text; colour picker swatches (16 Oct 2026) */
.bd-chip { background: var(--tt) !important; color: #fff !important; border-left: 0 !important; border-radius: 4px; font-weight: 500; padding: 3px 6px; }
.bd-chip.ink-dark, .tt-free.bd-chip:not([style]) { color: #1d1d1d !important; }
.bd-chip i { font-weight: 700; }
.ti-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ti-sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; background: var(--sw); cursor: pointer; padding: 0; }
.ti-sw.on { box-shadow: 0 0 0 2px var(--panel, #1c1c28), 0 0 0 4px var(--ink, #fff); }
.ti-sw-auto { width: auto; border-radius: 12px; padding: 0 10px; font: inherit; font-size: 12px; background: transparent; border: 1px solid var(--line); color: var(--ink); height: 24px; }
.ti-sw-auto.on { border-color: var(--accent); box-shadow: none; color: var(--accent); }
.pdoc-trip .tp-month em[style] { background: var(--tt); color: #fff; border-left: 0; }
.bdx-ptools + .bdx-acts { padding-right: 70px; } .bdx-full .bdx-ptools + .bdx-acts { padding-right: 0; }
/* My Art: sold at a different edition = red border; the series story in the drop-down (16 Oct 2026) */
.art-thumb.sold-leg { outline: 3px solid #e0393e; outline-offset: -3px; box-shadow: 0 0 0 1px #e0393e; }
.ad-story { margin: 12px 0 4px; border: 1px solid var(--line); border-radius: 10px; }
.ad-story > summary { cursor: pointer; padding: 9px 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ad-story > summary small { color: var(--ink-soft); }
.ad-story-b { padding: 0 14px 10px; line-height: 1.6; font-size: 14px; max-height: 420px; overflow: auto; }
.ad-story-b p { margin: 0 0 10px; } .ad-story-l a { color: var(--accent); }
/* delete from the calendar (16 Oct 2026) */
.bd-chip { position: relative; }
.bd-chip-x { position: absolute; top: 1px; right: 1px; width: 18px; height: 18px; line-height: 16px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 13px; cursor: pointer; opacity: 0; transition: opacity .12s; }
.bd-chip:hover .bd-chip-x, .bd-chip:focus-within .bd-chip-x { opacity: 1; }
@media (hover: none) { .bd-chip-x { display: none; } }
.ti-del { margin-left: auto; color: #e0393e !important; border-color: transparent !important; }
.ti-sw { flex: 0 0 24px; min-width: 0 !important; } .ti-sw-auto { flex: 0 0 auto !important; width: auto !important; padding: 0 10px !important; letter-spacing: 0; text-transform: none; }
/* Sittard seal (17 Oct 2026) */
.kit-seal { position: relative; display: inline-block; flex: 0 0 auto; width: 76px; height: 76px; }
.kit-seal img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; clip-path: circle(46.5%); }
.kit-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kit-seal text { fill: #ffb04a; font-size: 15px; font-weight: 700; letter-spacing: 1px; filter: drop-shadow(0 0 3px rgba(255,122,0,.7)); }
.kit-seal.bar { animation: kitSealTurn 120s linear infinite; } .kit-seal.bar img { animation: kitSealTurn 120s linear infinite reverse; }
@keyframes kitSealTurn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kit-seal.bar, .kit-seal.bar img { animation: none; } }
.tarot-back.kit-sealback { display: grid; place-items: center; background: #0b0c2a; }
.kit-seal.card { width: 100%; height: auto; aspect-ratio: 1; }
@media (max-width: 760px) { .kit-seal.bar { width: 58px; height: 58px; } }

.kit-seal { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 50%; }
.kit-seal.bar { width: 96px; height: 96px; }

/* ---- Needs attention (Aaron, 24 Oct 2026): one obvious mark in every look — amber hazard stripes + ◌ "placeholder" ---- */
:root { --needs-a: #fff3c4; --needs-b: #ffd966; --needs-edge: #c47f00; --needs-ink: #3d2a00; }
.needs { background: repeating-linear-gradient(135deg, var(--needs-a) 0 7px, var(--needs-b) 7px 14px) !important; color: var(--needs-ink) !important;
  outline: 1.5px dashed var(--needs-edge); outline-offset: 1px; border-radius: 3px; padding: 0 4px; font-weight: 600; cursor: help;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; text-shadow: none !important; }
html body .needs::before { content: "◌ "; font-weight: 900; font-size: 1.2em; line-height: 0; color: #a35f00; }
html body :is(#main, #modal-bg, #side, .app) :is(textarea, input).needs-field.needs-field, html body .needs-field { outline: 2px dashed var(--needs-edge) !important; outline-offset: 2px; background: #fff6d8 !important; color: var(--needs-ink) !important; box-shadow: inset 5px 0 0 var(--needs-b) !important; }
.needs-chip { display: inline-block; margin: 0 0 6px; font-size: 11.5px; letter-spacing: .02em; }
.sample-tag { background: repeating-linear-gradient(135deg, var(--needs-a) 0 6px, var(--needs-b) 6px 12px) !important; color: var(--needs-ink) !important; border: 1.5px dashed var(--needs-edge) !important; font-weight: 800; }
.sample-tag::before { content: "◌ "; }
tr.is-sample td, .fx-row.is-sample, .art-row.is-sample, .task.is-sample { background: repeating-linear-gradient(135deg, var(--needs-a) 0 8px, var(--needs-b) 8px 16px) !important; color: var(--needs-ink) !important; }
tr.is-sample td:first-child, .fx-row.is-sample, .art-row.is-sample, .task.is-sample { box-shadow: inset 4px 0 0 var(--needs-edge) !important; }
tr.is-sample td > :not([class]), tr.is-sample td > b, tr.is-sample td > small, .fx-row.is-sample .fx-name b, .fx-row.is-sample .fx-name small { color: var(--needs-ink) !important; } /* plain text only: pills and chips keep their own colours */
/* a work with no picture yet */
.art-thumb.noimg { background: repeating-linear-gradient(135deg, var(--needs-a) 0 6px, var(--needs-b) 6px 12px) !important; outline: 1.5px dashed var(--needs-edge); outline-offset: -1.5px; }
.art-thumb.noimg b { visibility: hidden !important; }
.art-thumb.noimg::after { content: "◌"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 1.1em; color: #a35f00; }
.art-thumb.noimg { position: relative; }
/* ---- Approved suppliers + Order routes (Aaron, 24 Oct 2026): green = approved by the team; the pipeline is cards ---- */
:root { --ok: #2e9d5b; --ok-bg: rgba(46,157,91,.12); --ok-ink: #1d6b3c; }
.appr-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; border: 1.5px dashed var(--line); background: transparent; color: var(--ink-soft); cursor: pointer; vertical-align: middle; }
.appr-chip:hover { border-color: var(--ok); color: var(--ok); }
.appr-chip.on { border: 1.5px solid var(--ok); background: var(--ok); color: #fff; cursor: default; }
button.appr-chip.on { cursor: pointer; }
tr.reg-approved td { box-shadow: inset 0 3px 0 var(--ok), inset 0 -3px 0 var(--ok) !important; background: var(--ok-bg) !important; }
tr.reg-approved td:first-child { box-shadow: inset 5px 0 0 var(--ok), inset 0 3px 0 var(--ok), inset 0 -3px 0 var(--ok) !important; }
tr.reg-approved td:last-child { box-shadow: inset -3px 0 0 var(--ok), inset 0 3px 0 var(--ok), inset 0 -3px 0 var(--ok) !important; }
.ors-grid > .empty { grid-column: 1 / -1; }
.or-wrap h2 { margin: 0 0 4px; }
.or-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.or-tab { border: 1.5px solid var(--line); background: var(--panel-2); color: var(--ink); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.or-tab.on { border-color: var(--accent); background: var(--accent); color: var(--accent-ink, #fff); }
.or-tab.or-new { border-style: dashed; background: transparent; }
.or-panel { border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; }
.or-panel.is-locked { border-color: var(--ok); }
.or-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between; align-items: flex-start; }
.or-title h3 { margin: 0 8px 4px 0; display: inline; }
.or-st { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.or-st.locked { background: var(--ok); color: #fff; } .or-st.draft { border: 1.5px dashed var(--line); color: var(--ink-soft); }
.or-about { margin: 6px 0 0; color: var(--ink-soft); font-size: 13px; }
.or-acts { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.or-calc { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 14px 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); }
.or-calc label { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; }
.or-calc input[type=date] { width: auto; }
.or-total { margin: 0; font-size: 14px; }
.or-chk { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.or-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; counter-reset: orc; }
.or-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; min-height: 150px; transition: transform .12s, border-color .12s; }
.or-card:hover, .or-card:focus-visible { transform: translateY(-2px); border-color: var(--accent); outline: none; }
.or-card.ok { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.or-card:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); font-weight: 900; color: var(--ink-soft); background: var(--panel); line-height: 1; padding: 2px 0; }
.or-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; background: var(--panel-2); color: var(--ink); border: 1.5px solid var(--line); }
.or-card.ok .or-n { background: var(--ok); border-color: var(--ok); color: #fff; }
.or-t { font-size: 15px; } .or-h { color: var(--ink-soft); font-size: 12px; line-height: 1.35; }
.or-picks, .or-br, .ors-brp { display: flex; flex-wrap: wrap; gap: 4px; }
.or-pick { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 6px; border: 1.5px solid var(--line); }
.or-pick.ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.or-br { flex-direction: column; } .or-brl { font-size: 11.5px; color: var(--ink-soft); border-left: 2px dashed var(--line); padding-left: 6px; }
.or-brl.ok { border-left-color: var(--ok); }
.or-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 6px; align-items: flex-end; font-size: 12px; }
.or-own.muted { color: var(--ink-soft); } .or-days { text-align: right; font-weight: 700; } .or-days small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 11px; }
.or-more { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.or-sales { display: grid; gap: 10px; } .or-sale { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px; }
.or-sale-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .or-sale-h small { color: var(--ink-soft); flex: 1; }
.or-ticks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.or-ticks small { display: block; color: var(--ink-soft); font-size: 11px; margin-left: 22px; }
.of-guide-h { margin: 22px 0 8px; }
.ors-h { margin: 16px 0 8px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.ors-picks { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.ors-picks li { padding: 8px 10px; border-radius: 8px; border: 1.5px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ors-picks li.ok { border-color: var(--ok); background: var(--ok-bg); } .ors-picks li small { color: var(--ink-soft); } .ors-act { margin-left: auto; display: inline-flex; gap: 10px; }
.ors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ors-sup { text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 10px; border: 2px solid var(--ok); background: var(--panel); color: var(--ink); cursor: pointer; }
.ors-sup small { color: var(--ink-soft); font-size: 11.5px; } .ors-sup span { font-size: 11.5px; font-weight: 700; color: var(--ok); margin-top: 2px; }
.ors-sup.picked { background: var(--ok-bg); cursor: default; } .ors-sup:disabled { opacity: 1; }
.ors-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 10px 0; align-items: end; }
.ors-row .mf-l { display: flex; flex-direction: column; gap: 4px; }
.ors-branch { border: 1.5px dashed var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.ors-brh { display: flex; gap: 8px; align-items: center; } .ors-brh span { font-weight: 900; } .ors-brh input { flex: 1; }
.ors-brp { margin: 6px 0 0; }
.ors-move { margin-left: auto; display: inline-flex; gap: 12px; align-items: center; }
.linkbtn.danger { color: #c0392b; }
@media (max-width: 600px) { .or-cards { grid-template-columns: 1fr; } .or-card:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -13px; transform: translateX(50%); } .ors-move { margin-left: 0; width: 100%; } }
.or-det { display: flex; flex-direction: column; gap: 3px; font-size: 12px; padding: 6px 8px; border-radius: 8px; background: var(--panel-2); }
.or-det span, .or-det a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.or-det a { text-decoration: underline; text-underline-offset: 2px; }
.or-det .or-dnote { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--ink-soft); }
/* ---- A product's route (24 Oct 2026): a clean numbered stepper — dots on one line, green when sorted, amber ◌ when not ---- */
.rp-box { margin: 14px 0 4px; padding: 12px 12px 10px; border: 1.5px solid var(--line); border-radius: 12px; }
.rp-row { display: flex; gap: 8px; align-items: center; margin: 6px 0 10px; } .rp-row select { flex: 1; min-width: 0; }
.rp-strip { list-style: none; margin: 0; padding: 0; display: flex; counter-reset: rp; overflow-x: auto; scrollbar-width: thin; }
.rp-strip li { counter-increment: rp; position: relative; flex: 1 1 0; min-width: 78px; padding: 30px 4px 0; text-align: center; }
.rp-strip li::before { content: counter(rp); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--panel); border: 2px dashed var(--needs-edge, #c47f00); color: var(--ink); z-index: 1; }
.rp-strip li::after { content: ""; position: absolute; top: 11px; left: 50%; width: 100%; height: 2px; background: var(--line); }
.rp-strip li:last-child::after { display: none; }
.rp-strip li.ok::before { content: "✓"; background: var(--ok); border: 2px solid var(--ok); color: #fff; }
.rp-strip li.ok::after { background: var(--ok); }
.rp-strip b { display: block; font-size: 12px; line-height: 1.2; }
.rp-strip small { display: block; font-size: 11px; color: var(--ink-soft); line-height: 1.25; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-strip li.rp-no small { color: #c47f00; font-weight: 600; }
.rp-strip li.rp-no::before { border-color: #e0a100; }
.rp-time { margin: 10px 0 2px; font-size: 13px; }
.rp-acts { display: flex; gap: 14px; flex-wrap: wrap; }
.or-kind { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 8px 0 0; font-size: 13px; }
.or-kind label { display: inline-flex; gap: 6px; align-items: center; } .or-kind select { width: auto; }
.or-def { color: var(--ok); font-size: 11px; }
/* ---- Order routes, redesigned (24 Oct 2026, from Aaron's picks on the Higgsfield sheets) ---- */
.ri { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ri .ri-a { fill: var(--ok); stroke: none; } .ri .ri-s { stroke: var(--ok); stroke-width: 2; }
/* status chips (sheet 10) */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; line-height: 1; padding: 4px 9px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--ink); background: transparent; white-space: nowrap; vertical-align: middle; }
.chip-approved { background: var(--ok); border-color: var(--ok); color: #fff; }
.chip-locked { background: #3d6fd8; border-color: #3d6fd8; color: #fff; }
.chip-needs { border-style: dashed; border-color: #e0a100; color: #c47f00; }
.chip-notyet { border-color: #e0a100; color: #c47f00; }
.chip-def { border-color: var(--ok); color: var(--ok); }
.chip-av { width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: 9.5px; font-weight: 800; background: rgba(255,255,255,.25); color: inherit; }
.chip-own .chip-av { background: var(--panel-2); }
.appr-by { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.appr-by .chip-av { background: var(--ok); color: #fff; }
/* metro map (sheet 7) */
.or-metro { overflow-x: auto; margin: 14px 0 4px; padding: 6px 0 2px; scrollbar-width: thin; }
.or-metro svg { display: block; margin: 0 auto; overflow: visible; }
.rm-line { stroke: var(--line); stroke-width: 3; fill: none; }
.rm-br { stroke: var(--line); stroke-width: 2.5; fill: none; stroke-dasharray: 6 5; } .rm-br.ok { stroke: var(--ok); stroke-dasharray: none; }
.rm-st { cursor: pointer; outline: none; }
.rm-n.ok { fill: var(--ok); stroke: var(--ok); stroke-width: 2; } .rm-n.no { fill: var(--panel); stroke: #e0a100; stroke-width: 2.4; stroke-dasharray: 3.5 3; }
.rm-st:hover .rm-n, .rm-st:focus .rm-n { stroke: var(--accent); stroke-width: 3.5; }
.rm-ck { stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rm-q { fill: var(--ink); font-size: 11px; font-weight: 800; text-anchor: middle; }
.rm-t { fill: var(--ink); font-size: 13px; font-weight: 700; text-anchor: middle; } .rm-bt { font-size: 12px; font-weight: 600; }
.rm-s { fill: var(--ink-soft); font-size: 11.5px; text-anchor: middle; } .rm-s.no { fill: #c47f00; font-weight: 600; }
.or-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 14px; justify-content: center; }
/* timeline (sheet 6) */
.rt { margin-top: 12px; width: 100%; }
.rt-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; margin-bottom: 8px; }
.rt-keys span { display: inline-flex; gap: 5px; align-items: center; } .rt-keys i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.rt-track { position: relative; height: 30px; border-radius: 8px; background: var(--panel); margin-top: 26px; }
.rt-seg { position: absolute; top: 0; bottom: 0; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--c) 32%, transparent); cursor: pointer; border-right: 2px solid var(--panel-2); }
.rt-seg i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); }
.rt-seg span { position: relative; font-size: 11px; font-weight: 800; color: #141210; padding: 0 6px; line-height: 30px; white-space: nowrap; }
.rt-win { position: absolute; top: -8px; bottom: -8px; border-left: 2px dashed var(--ok); border-right: 2px dashed var(--ok); pointer-events: none; }
.rt-win b { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #fff; background: var(--ok); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.rt-ticks { position: relative; height: 22px; margin-top: 10px; font-size: 11px; color: var(--ink-soft); }
.rt-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; } .rt-ticks span:first-child { transform: none; } .rt-ticks span:last-child { transform: translateX(-100%); }
.or-calc { flex-direction: row; } .or-calc .rt { flex-basis: 100%; }
/* cards (sheet 4/9) */
.or-card { gap: 4px; padding: 14px 14px 12px; min-height: 190px; }
.or-card.no { border-style: dashed; border-color: #e0a100; }
.or-ctop { display: flex; justify-content: space-between; align-items: flex-start; }
.or-num { font-family: var(--serif, Georgia, serif); font-size: 34px; line-height: 1; font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
.or-card.ok .or-num { color: var(--ok); }
.or-ico { width: 26px; height: 26px; color: var(--ink-soft); }
.or-card .or-n { display: none; }
.or-t { font-size: 17px; margin-top: 6px; } .or-h { text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; }
.or-sup { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; } .or-sl { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 13px; }
.or-det { font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace); font-size: 11.5px; }
/* vertical list (sheet 8 phones, 12C products) */
.rv { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.rv li { display: grid; grid-template-columns: 20px 22px 1fr auto; gap: 8px; align-items: center; padding: 5px 4px; border-radius: 8px; font-size: 13px; }
.rv li[data-rcard] { cursor: pointer; } .rv li[data-rcard]:hover { background: var(--panel-2); }
.rv-dot { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; border: 2px dashed #e0a100; color: #fff; }
.rv li.ok .rv-dot { background: var(--ok); border: 2px solid var(--ok); }
.rv b { font-weight: 600; } .rv-sup { color: var(--ink-soft); font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; } .rv-sup.no { color: #c47f00; font-weight: 600; }
.rv.big li { grid-template-columns: 20px 22px 1fr auto auto; } .rv-d { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.or-vwrap { display: none; }
/* segmented bar (sheet 12B) */
.rb { display: flex; gap: 3px; margin: 4px 0 2px; } .rb i { flex: 1; height: 10px; border-radius: 3px; background: var(--ok); }
.rb i.no { background: repeating-linear-gradient(135deg, #ffd966 0 4px, #f2b632 4px 8px); }
/* step sheet header (sheet 14) */
.ors-head { display: flex; gap: 12px; align-items: center; } .ors-head > div { flex: 1; min-width: 0; } .ors-head small { color: var(--ink-soft); font-size: 12px; } .ors-head h3 { margin: 0; }
.ors-ico { width: 34px; height: 34px; padding: 6px; border-radius: 10px; background: var(--panel-2); }
.ors-h span { margin-right: 4px; }
@media (max-width: 640px) { .or-metro, .or-legend { display: none; } .or-vwrap { display: block; } .rv.big li { grid-template-columns: 20px 22px 1fr auto; } .rv.big .rv-d { display: none; } .rt-keys { font-size: 11px; } }

/* ---- Home › Today band (24 Oct 2026). Layout after Aaron's approved Home proof (design-refs/aaron-2026-10-24);
   colours come from each look's tokens, so every HUD keeps its own feel. Amber dashed = needs you, green = done/on track. */
.td-wrap { margin: 0 0 16px; --td-amber: #e0a100; --td-amber-ink: #c47f00; }
.td-top { display: flex; justify-content: flex-end; margin: -6px 0 10px; }
.td-bk { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ok); color: var(--ok); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; }
.td-bk::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.td-bk.late { border-color: var(--td-amber); color: var(--td-amber-ink); border-style: dashed; }
.td-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; min-width: 0; background: color-mix(in srgb, var(--panel, transparent) 60%, transparent); }
.td-needs-card { margin: 0 0 16px; }
.td-nh { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.td-nt { font-size: 18px; font-weight: 600; }
.td-dash { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px dashed var(--td-amber); }
.td-dash.big { width: 30px; height: 30px; }
.td-needs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.td-need { display: flex; align-items: center; gap: 14px; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1.5px dashed var(--td-amber); border-radius: 10px; padding: 16px 18px; background: color-mix(in srgb, var(--td-amber) 6%, transparent); }
.td-need:hover { background: color-mix(in srgb, var(--td-amber) 12%, transparent); }
.td-need:focus-visible, .td-row:focus-visible, .td-foot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.td-svg { flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.td-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.td-t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.td-s { font-size: 12.5px; color: var(--ink-faint); }
.td-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.td-ch { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding-bottom: 8px; }
.td-ch h3 { margin: 0; font-size: 17px; font-weight: 500; flex: 1; text-transform: none; letter-spacing: 0; }
.td-ch .td-svg { width: 22px; height: 22px; }
.td-n { font-size: 12.5px; color: var(--ink-faint); }
.td-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px 2px; color: inherit; font: inherit; cursor: pointer; }
.td-row:last-of-type { border-bottom: 0; }
.td-row:hover { background: var(--panel-2); }
.td-due { flex: none; font-size: 12.5px; padding: 4px 12px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); white-space: nowrap; }
.td-due.now { background: color-mix(in srgb, var(--td-amber) 22%, transparent); border-color: color-mix(in srgb, var(--td-amber) 50%, transparent); color: var(--td-amber-ink); }
.td-due.late { border: 1.5px dashed var(--td-amber); color: var(--td-amber-ink); background: none; }
.td-go { flex: none; color: var(--ink-faint); font-size: 17px; }
.td-ring { flex: none; width: 50px; height: 50px; }
.td-ring circle { fill: none; stroke-width: 4.5; }
.td-ring-bg { stroke: var(--line); }
.td-ring-fg { stroke: var(--ok); stroke-linecap: round; }
.td-ring-fg.low { stroke: var(--td-amber); }
.td-ring text { font-size: 11px; font-weight: 700; fill: currentColor; stroke: none; }
.td-h-off, .td-h-risk { color: var(--td-amber-ink); font-weight: 600; }
.td-h-on { color: var(--ok); }
.td-act { display: flex; gap: 12px; align-items: flex-start; padding: 9px 2px; }
.td-act .ini { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11.5px; font-weight: 800; }
.td-act .td-t { font-weight: 400; }
.td-foot { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 8px; padding: 12px 2px 2px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink-faint); font: inherit; font-size: 13px; cursor: pointer; }
.td-foot:hover { color: inherit; }
@media (max-width: 640px) { .td-card { padding: 12px; } .td-need { padding: 12px; gap: 10px; } .td-nh { gap: 10px; } }

/* ---- Order routes, consolidated (24 Oct 2026, Aaron: "gotta be a better way to show or consolidate all of the info").
   Layout from his approved proofs (design-refs/aaron-2026-10-24): slim bar → name + arrival → metro line → Aurora-style cards. */
.or-wrap { padding-top: 14px; }
.ox-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.ox-pick { display: flex; align-items: center; gap: 8px; }
.ox-pl { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.ox-pick select { font-weight: 600; min-width: 220px; }
.ox-sp { flex: 1; }
.ox { padding-top: 18px; }
.ox-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.ox-name { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; letter-spacing: -.01em; }
.ox-kick { margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft, var(--ink)); }
.ox-about { margin: 6px 0 0; color: var(--ink-faint); max-width: 60ch; }
.ox-eta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 4px 0; }
.ox-eta small { font-size: 11.5px; color: var(--ink-faint); letter-spacing: .04em; }
.ox-eta > small:first-child { text-transform: uppercase; letter-spacing: .14em; }
.ox-eta b { font-size: 20px; }
.ox-eta.no b { color: #c47f00; font-size: 16px; }
.ox-eta:hover b { text-decoration: underline; text-underline-offset: 4px; }
.ox .or-metro { display: flex; justify-content: center; margin: 22px 0 4px; }
.ox .or-metro svg { width: 100%; height: auto; }
.ox .or-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-start; font-size: 12px; margin: 4px 0 18px; opacity: .85; }
.ox-cards { list-style: none; margin: 8px 0 0; padding: 4px 2px 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.ox-card { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 14px; background: var(--panel); cursor: pointer; min-height: 300px; transition: border-color .12s, transform .12s; }
.ox-card:hover, .ox-card:focus-visible { border-color: var(--accent); outline: none; transform: translateY(-2px); }
.ox-card.ok { border-color: color-mix(in srgb, var(--ok) 60%, var(--line)); }
.ox-card.no { border: 1.5px dashed #e0a100; }
.ox-card.no .ox-num, .ox-card.no .ox-t { color: #c47f00; }
.ox-top { display: flex; justify-content: space-between; align-items: flex-start; }
.ox-num { font-family: Georgia, "Times New Roman", serif; font-size: 44px; line-height: 1; font-weight: 400; }
.ox-ico.ri { width: 34px; height: 34px; }
.ox-t { font-size: 22px; font-weight: 500; margin-top: 18px; font-family: Georgia, "Times New Roman", serif; }
.ox-h { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; min-height: 1.3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-sup { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; min-height: 58px; }
.ox-sl { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ox-sl > span { display: flex; flex-direction: column; min-width: 0; }
.ox-sl b { font-weight: 500; overflow-wrap: anywhere; }
.ox-sl small { color: var(--ink-faint); font-size: 11.5px; }
.ox-nh { margin: 8px 0 0; font-size: 12.5px; color: #c47f00; }
.ox-br { margin: 8px 0 0; font-size: 12px; color: var(--ink-faint); }
.ox-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; }
.ox-dl dt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); padding-top: 2px; }
.ox-dl dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-dl a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ox-dash { color: var(--ink-faint); }
.ox-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ox-days { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.ox-days.no { color: #c47f00; }
.ox-add { border-style: dashed; align-items: center; justify-content: center; min-height: 0; }
.ox-add button { background: none; border: 0; color: inherit; font: inherit; font-weight: 600; cursor: pointer; padding: 20px; }
.oxs section { padding: 12px 0; border-top: 1px solid var(--line); }
.oxs section:first-child { border-top: 0; padding-top: 0; }
.oxs h3 { margin: 0 0 4px; } .oxs h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.oxs-row { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.oxs-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.oxs-appr { border-top: 1px solid var(--line); padding-top: 12px; margin: 0; }
@media (max-width: 640px) { .ox-eta { align-items: flex-start; text-align: left; } .ox-pick select { min-width: 0; max-width: 62vw; } .ox-cards { grid-auto-columns: 84%; } .ox .or-legend, .ox .or-metro { display: none; } }
.ox-tl { margin: 6px 0 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.ox-tl summary { cursor: pointer; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.ox-tl[open] summary { margin-bottom: 10px; }

/* ---- Marketing › Plan and Brand at a glance (24 Oct 2026, from the Higgsfield mock in design-proofs/marketing-2026-10-24).
   Look colours come through the tokens; amber dashed = placeholder or to confirm, green = written. */
.mk-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; }
.mk-strip { margin: 0; flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.mk-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px dashed #e0a100; }
.mk-dot.on { background: var(--ok); border: 0; }
.mk-prog { display: flex; align-items: center; gap: 8px; }
.mk-prog .pf-bar { width: 120px; }
.mk-prog small { white-space: nowrap; color: var(--ink-faint); }
.mk-view { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.mk-view button { border: 0; background: none; color: inherit; font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
.mk-view button.on { background: var(--accent); color: #fff; font-weight: 600; }
.mk-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 0 0 16px; }
.mk-goal { display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: inherit; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; background: var(--panel); cursor: pointer; }
.mk-goal:hover { border-color: var(--accent); }
.mk-gl { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.mk-gn { font-size: 46px; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.mk-gt { font-size: 13.5px; color: var(--ink-soft, var(--ink)); line-height: 1.45; }
.mk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.mk-tile { display: flex; flex-direction: column; gap: 8px; text-align: left; font: inherit; color: inherit; border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--panel); cursor: pointer; min-height: 196px; transition: border-color .12s, transform .12s; }
.mk-tile:hover, .mk-tile:focus-visible { border-color: var(--accent); transform: translateY(-2px); outline: none; }
.mk-tile.no { border: 1.5px dashed #e0a100; }
.mk-tt { display: flex; justify-content: space-between; align-items: flex-start; }
.mk-svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mk-svg.big { width: 30px; height: 30px; }
.mk-ring { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 2px dashed #e0a100; flex: none; }
.mk-n { font-size: 12px; color: var(--ink-faint); }
.mk-title { font-size: 16.5px; font-weight: 600; margin-top: 6px; }
.mk-sum { font-size: 13px; color: var(--ink-faint); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mk-chips { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 6px; }
.mk-c { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); white-space: nowrap; }
.mk-c.warn { border: 1.5px dashed #e0a100; color: #c47f00; background: none; }
.mk-go { margin-left: auto; color: var(--ink-faint); font-size: 16px; }
.mk-tp { display: flex; flex-direction: column; }
.mk-sh { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mk-sh > div { flex: 1; min-width: 0; }
.mk-sh h3 { margin: 0; font-size: 21px; }
.mk-sh small { color: var(--ink-faint); font-size: 12px; }
.mk-phnote { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border: 1.5px dashed #e0a100; border-radius: 10px; font-size: 13px; }
.mk-read { flex: 1; overflow-y: auto; padding: 6px 2px 16px; font-size: 14.5px; line-height: 1.6; }
.mk-read p { margin: 10px 0; }
.mk-h { display: flex; gap: 10px; align-items: baseline; font-size: 16.5px; margin: 20px 0 6px; }
.mk-hn { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-grid; place-items: center; font-size: 12px; }
.mk-g { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 22px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.mk-ul { margin: 6px 0 10px; padding-left: 20px; }
.mk-ul li { margin: 6px 0; }
.mk-ul li::marker { color: var(--ink-faint); }
.mk-sf { display: flex; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.mk-nav { margin-left: auto; display: flex; gap: 6px; }
.mkt-docacts .mk-view { margin-right: 6px; }
@media (max-width: 640px) { .mk-prog .pf-bar { width: 70px; } .mk-gn { font-size: 38px; } .mk-tiles { grid-template-columns: 1fr 1fr; gap: 10px; } .mk-tile { min-height: 0; padding: 12px; } .mk-sum { -webkit-line-clamp: 2; } }

/* ---- Website › Overview (24 Oct 2026): fact tiles + a status board; every tile and card opens its edit form. */
.wo-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.wo-head .eyebrow { margin: 0; }
.wo-hint { margin: 0; font-size: 12.5px; color: var(--ink-faint); }
.wo-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0 0 18px; }
.wo-tile { display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: inherit; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--panel); cursor: pointer; min-height: 104px; transition: border-color .12s, transform .12s; }
.wo-tile:hover, .wo-tile:focus-visible { border-color: var(--accent); transform: translateY(-2px); outline: none; }
.wo-tile.no { border: 1.5px dashed #e0a100; }
.wo-tile.no .wo-v { color: #c47f00; }
.wo-l { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.wo-v { font-size: 18px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.wo-s { font-size: 12.5px; color: var(--ink-faint); margin-top: auto; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wo-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.wo-col { border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wo-ch { margin: 0 0 2px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.wo-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.wo-col.live .wo-dot { background: var(--ok); }
.wo-col.appr .wo-dot { background: transparent; border: 2px solid var(--ok); }
.wo-col.built .wo-dot { background: #6b93e8; }
.wo-col.todo .wo-dot { border: 2px dashed #e0a100; }
.wo-n { margin-left: auto; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
.wo-card { display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; color: inherit; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; cursor: pointer; }
.wo-card:hover, .wo-card:focus-visible { border-color: var(--accent); outline: none; }
.wo-col.live .wo-card { border-left: 3px solid var(--ok); }
.wo-col.todo .wo-card { border-left: 3px dashed #e0a100; }
.wo-card b { font-weight: 600; font-size: 14px; }
.wo-card small { font-size: 12px; color: var(--ink-faint); }
.wo-empty, .wo-more { margin: 0; font-size: 12.5px; color: var(--ink-faint); }
@media (max-width: 900px) { .wo-board { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wo-board { grid-template-columns: 1fr; } .wo-tiles { grid-template-columns: 1fr 1fr; } .wo-v { font-size: 16px; } }

/* ---- Business › Banking & payments (24 Oct 2026, from design-proofs/business-2026-10-24/mock-banking.png) */
.bk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; background: none; border: 0; padding: 0; box-shadow: none; }
.bk-t { display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: inherit; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--panel); cursor: pointer; transition: border-color .12s, transform .12s; }
.bk-t:hover, .bk-t:focus-visible { border-color: var(--accent); transform: translateY(-2px); outline: none; }
.bk-t.no { border: 1.5px dashed #e0a100; }
.bk-t.no .wo-s { color: #c47f00; }
.bk-n { font-size: 26px; font-weight: 600; line-height: 1.1; }
.bk-n small { font-size: 14px; font-weight: 400; color: var(--ink-faint); }
section.bk-empty { display: none; }
.an2-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 24px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.an2-risk { border-left: 1px solid var(--line); padding-left: 20px; }
.an2-r { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 8px 0; font-size: 13.5px; }
.an2-r span { width: 10px; height: 10px; border-radius: 50%; flex: none; align-self: center; }
.an2-r.mid span { background: #e0a100; } .an2-r.hi span { background: #c4553a; }
.an2-r b { font-weight: 700; }
.an2-pts { margin: 6px 0 10px; }
.an2-pt { border-bottom: 1px solid var(--line); }
.an2-pt summary { cursor: pointer; padding: 12px 2px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.an2-pt summary::-webkit-details-marker { display: none; }
.an2-pt summary::after { content: "▾"; color: var(--ink-faint); transition: transform .15s; }
.an2-pt[open] summary::after { transform: rotate(180deg); }
.an2-pt p { margin: 0 0 14px; line-height: 1.6; max-width: 80ch; }
@media (max-width: 760px) { .an2-top { grid-template-columns: 1fr; } .an2-risk { border-left: 0; padding-left: 0; } }
.bk-tiles { margin-bottom: 14px; }
.bk-t { align-items: flex-start; }
.bk-t .bk-n, .bk-t .wo-l, .bk-t .wo-s { text-align: left; align-self: flex-start; }
.bk-t .bk-n { margin-left: 0; }

/* ---- Legal board, document sheet and links (24 Oct 2026, from design-proofs/legal-2026-10-24). Rebellion branding — the R mark,
   a Bodoni title and brass — over each look's own surfaces, so every HUD keeps its colours. */
:root { --rb-brass: #b08d57; --rb-serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; }
.lgb-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 6px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.lgb-mark { width: 54px; height: 54px; flex: none; background: var(--rb-brass); -webkit-mask: url(/logo-white.png) center / contain no-repeat; mask: url(/logo-white.png) center / contain no-repeat; }
.lgb-ht { flex: 1; min-width: 200px; }
.lgb-ht h2 { margin: 0; font-family: var(--rb-serif); font-weight: 400; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; letter-spacing: 0; text-transform: none; }
.lgb-ht p { margin: 6px 0 0; color: var(--ink-faint); }
.lgb-prog { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.lgb-prog small { color: var(--ink-faint); }
.lgb-prog .pf-bar span { background: var(--rb-brass) !important; }
.lgb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.lgb-chip { border: 1px solid var(--line); background: none; color: inherit; font: inherit; font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.lgb-chip.on { background: var(--rb-brass); border-color: var(--rb-brass); color: #15120c; font-weight: 600; }
.lgb-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.lgb-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.lgb-cols.one { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lgb-cols.one .lgb-col { display: contents; }
.lgb-cols.one .lgb-col h3 { grid-column: 1 / -1; }
.lgb-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lgb-col h3, .lgb-rail h3 { margin: 0 0 4px; display: flex; flex-direction: column; gap: 2px; }
.lgb-col h3 span, .lgb-rail h3 span { font-family: var(--rb-serif); font-weight: 400; font-size: 22px; text-transform: none; letter-spacing: 0; }
.lgb-col h3 small, .lgb-rail h3 small { font-size: 12px; color: var(--ink-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
.lgb-card { display: flex; gap: 10px; align-items: flex-start; text-align: left; font: inherit; color: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: var(--panel); cursor: pointer; transition: border-color .12s, transform .12s; }
.lgb-card:hover, .lgb-card:focus-visible, .lgb-loose:hover, .lgb-loose:focus-visible { border-color: var(--rb-brass); outline: none; transform: translateY(-1px); }
.lgb-card .mk-svg { width: 22px; height: 22px; margin-top: 1px; }
.lgb-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-items: flex-start; }
.lgb-t b { font-weight: 600; font-size: 14px; line-height: 1.3; }
.lgb-used { display: flex; flex-wrap: wrap; gap: 4px; }
.lgc { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-faint); }
.lgp { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.lgp-no { border: 1.5px dashed #e0a100; color: #c47f00; }
.lgp-mid { background: var(--panel-2); border: 1px solid var(--line); }
.lgp-ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); }
.lgp-off { color: var(--ink-faint); border: 1px solid var(--line); }
.lgb-rail { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 12px; }
.lgb-loose { display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; font-size: 13.5px; color: inherit; background: none; border: 1px solid transparent; border-radius: 8px; padding: 7px 6px; cursor: pointer; }
.lgb-loose span:nth-child(2) { flex: 1; }
.lgb-loose .mk-svg { width: 18px; height: 18px; }
.lgb-rail .minput { margin-top: 8px; font-size: 13px; }
.lgb-listbar { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.lg-tp { display: flex; flex-direction: column; gap: 4px; }
.lg-sh { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.lg-sh > div { flex: 1; min-width: 0; }
.lg-sh .mk-svg.big { color: var(--rb-brass); }
.lg-k { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.lg-sh h3 { margin: 2px 0 8px; font-family: var(--rb-serif); font-weight: 400; font-size: 26px; line-height: 1.15; text-transform: none; letter-spacing: 0; }
.lg-st { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lg-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lg-acts .btn.primary { background: var(--rb-brass); border-color: var(--rb-brass); color: #15120c; }
.lg-stsel { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-left: auto; }
.lg-stsel select { width: auto; }
.lg-sec { padding: 12px 0; border-bottom: 1px solid var(--line); }
.lg-sec h4 { margin: 0 0 8px; font-family: var(--rb-serif); font-weight: 400; font-size: 19px; text-transform: none; letter-spacing: 0; }
.lg-sec p { margin: 0 0 6px; line-height: 1.55; }
.lg-notes { color: var(--ink-faint); font-size: 13px; white-space: pre-wrap; }
.lg-g { margin: 12px 0 6px !important; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.lg-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lgchip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; background: var(--panel-2); }
.lgchip .linkbtn { font-size: 13px; text-align: left; }
.lgx { border: 0; background: none; color: var(--ink-faint); font-size: 16px; line-height: 1; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; }
.lgx:hover { background: var(--line); color: inherit; }
.lg-none { font-size: 13px; color: var(--ink-faint); }
.lg-add { width: auto; font-size: 13px; padding: 4px 8px; border-color: var(--rb-brass); }
.lg-pick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.lg-pick .minput { flex: 1; min-width: 160px; font-size: 13px; }
.ox-legal { margin: 10px 0 0; font-size: 12px; color: var(--ink-faint); }
.ox-legal.no { color: #c47f00; }
.ors-legal { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ors-legal h4, .art-legal .rp-h { margin: 0 0 8px; font-family: var(--rb-serif); font-weight: 400; font-size: 18px; text-transform: none; letter-spacing: 0; }
.orl-list { list-style: none; margin: 0 0 10px; padding: 0; }
.orl-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.orl-list .mk-svg { width: 20px; height: 20px; }
.orl-n { flex: 1; text-align: left; font-size: 14px; }
.orl-open { text-decoration: none; color: inherit; padding: 0 4px; }
.art-legal { margin-top: 12px; }
@media (max-width: 900px) { .lgb-wrap { grid-template-columns: 1fr; } .lgb-rail { position: static; } }
@media (max-width: 560px) { .lgb-cols { grid-template-columns: 1fr; } .lg-stsel { margin-left: 0; } }
html body .lg-acts .btn.primary, html body .lg-acts .btn.primary:hover { background: var(--rb-brass) !important; border-color: var(--rb-brass) !important; color: #15120c !important; }

/* ---- The World, Now: each person's own groups (24 Oct 2026) */
.nh-card.nh-editing { position: relative; outline: 1.5px dashed var(--line); outline-offset: 2px; }
.nh-x { position: absolute; top: 8px; right: 52px; z-index: 2; border: 1px solid var(--line); background: var(--panel); color: inherit; font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.nh-x:hover { border-color: #c4553a; color: #c4553a; }
.nh-addcard { border: 1.5px dashed var(--line); background: none; color: var(--ink-faint); font: inherit; font-weight: 600; border-radius: 14px; min-height: 72px; cursor: pointer; }
.nh-addcard:hover { border-color: var(--accent); color: inherit; }
.nh-hlist { display: flex; flex-wrap: wrap; gap: 8px; }
.nh-back { border: 1px solid var(--line); background: none; color: inherit; font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }

/* ---- Badge A (Aaron, 24 Oct 2026: "A for the badge") — green pill, cream check disc, a divider, APPROVED. Every look. */
html body .appr-chip.on, html body .chip-approved { display: inline-flex; align-items: center; gap: 7px; background: #1f6b45; color: #f1ead8; border: 1.5px solid #e9e1cc; border-radius: 999px; padding: 2px 11px 2px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; }
html body .chip-approved.chip-by { padding-left: 4px; text-transform: none; letter-spacing: .01em; }
.bA-ck { width: 17px; height: 17px; flex: none; border-radius: 50%; background: #f1ead8; color: #1f6b45; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: 0; }
.bA-t { padding-left: 7px; border-left: 1.5px solid rgba(241, 234, 216, .65); }

/* ---- Private Sales, laid out like Aaron's approved proof (24 Oct 2026). Pictures are shown whole: never cropped. */
.ps2-row { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.ps2-row:last-child { border-bottom: 0; }
.ps2-row.closed { opacity: .8; }
.ps2-work { display: flex; gap: 14px; align-items: center; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; min-width: 0; }
.ps2-pic { flex: none; width: 76px; height: 92px; border-radius: 6px; background: var(--panel-2); display: grid; place-items: center; overflow: hidden; }
.ps2-pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.ps2-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps2-info small { font-size: 12px; color: var(--ink-faint); }
.ps2-info b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ps2-price { font-size: 19px; font-weight: 700; margin-top: 6px; }
.ps2-work:hover b { text-decoration: underline; text-underline-offset: 3px; }
.ps2-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(78px, 1fr)); overflow-x: auto; scrollbar-width: thin; }
.ps2-st { position: relative; min-width: 0; }
.ps2-st::before { content: ""; position: absolute; top: 19px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.ps2-st:first-child::before { display: none; }
.ps2-st.is-done::before, .ps2-st.is-now::before { background: var(--ok); }
.ps2-st > button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 2px 2px 4px; }
.ps2-node { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 2px solid var(--line); font-weight: 900; }
.ps2-node .mk-svg { width: 18px; height: 18px; }
.ps2-st.is-done .ps2-node { border-color: var(--ok); color: var(--ok); }
.ps2-st.is-now .ps2-node { border-color: var(--ok); color: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent), 0 0 18px color-mix(in srgb, var(--ok) 55%, transparent); }
.ps2-st.is-past .ps2-node { border-color: #e0a100; border-style: dashed; color: #c47f00; }
.ps2-l { font-size: 11.5px; text-align: center; line-height: 1.25; }
.ps2-doc { display: flex; flex-direction: column; align-items: center; font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; line-height: 1.25; text-align: center; max-width: 100%; }
.ps2-doc small { font-weight: 400; font-size: 10px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 92px; }
.ps2-doc.d-ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.ps2-doc.d-no { border: 1.5px dashed #e0a100; color: #c47f00; }
.ps2-doc.d-off, .ps2-doc.d-none { color: var(--ink-faint); border: 1px solid var(--line); }
.ps2-st > button:hover .ps2-node, .ps2-st > button:focus-visible .ps2-node { border-color: var(--accent); }
.ps2-tp { display: flex; flex-direction: column; }
.ps2-steps { list-style: none; margin: 0; padding: 0; }
.ps2-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ps2-steps li > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.ps2-steps li b { font-weight: 500; }
.ps2-steps li small { color: var(--ink-faint); font-size: 12px; }
.ps2-ck { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line); background: none; color: #fff; font-weight: 900; cursor: pointer; display: grid; place-items: center; font-size: 13px; }
.ps2-steps li.on .ps2-ck { background: var(--ok); border-color: var(--ok); }
.ps2-people { list-style: none; margin: 0; padding: 0; }
.ps2-people li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.ps2-people li b { flex: 1; font-weight: 500; }
.ps2-people li small { color: var(--ink-faint); }
@media (max-width: 900px) { .ps2-row { grid-template-columns: 1fr; } }
.ps2-row { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); }
.ps2-info small:nth-of-type(2) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps2-track { grid-template-columns: repeat(var(--n), minmax(64px, 1fr)); }
.ps2-l { font-size: 11px; }
@media (max-width: 900px) { .ps2-row { grid-template-columns: 1fr; gap: 12px; } .ps2-track { padding-bottom: 6px; } }
.ps2-doc { width: calc(100% - 6px); box-sizing: border-box; overflow: hidden; } .ps2-doc small { max-width: 100%; }

/* ---- Alignment pass (24 Oct 2026): the look of Aaron's approved zip on Home, Marketing, Website, Business, Legal, Routes and
   Private Sales — serif numerals and titles, letter-spaced monospace labels, one line-icon weight, thin borders with hairline
   dividers, Badge A for approved/ready and amber dashed ◌ for anything that needs input. Colours stay each look's own. */
:root { --z-serif: var(--rb-serif); --z-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.zc-num, .ox-num { font-family: var(--z-serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -.01em; }
.z-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; width: 100%; }
.z-ic { width: 26px; height: 26px; opacity: .9; }
/* labels: letter-spaced mono small caps, like ACCOUNT REF / ARTWORK PRODUCTION */
.wo-l, .mk-gl, .ox-h, .ox-dl dt, .ox-kick, .lg-k, .lg-g, .td-h, .an2-risk .eyebrow, .ox-eta > small:first-child, .ps2-info > small:first-child, .wo-ch, .ox-pl, .mk-l, .ors-head small { font-family: var(--z-mono); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
/* titles: serif, like "Made" / "Private Sales" */
.mk-title, .ox-t, .ox-name, .lg-sh h3, .mk-sh h3, .td-nt, .ps2-info b, .wo-v, .bk-n, .mk-gn, .lgb-col h3 span, .lgb-ht h2, .lg-sec h4, .ors-legal h4 { font-family: var(--z-serif); font-weight: 400; letter-spacing: 0; text-transform: none; }
.mk-title { font-size: 21px; }
.wo-v { font-size: 22px; }
.bk-n { font-size: 30px; }
.mk-gn { font-size: 52px; }
.ps2-info b { font-size: 18px; }
/* cards: thin border, hairline dividers between parts */
.mk-tile, .wo-tile, .bk-t, .lgb-card, .ox-card, .td-card, .mk-goal, .wo-col { border-width: 1px; }
.mk-tile .mk-chips { border-top: 1px solid var(--line); padding-top: 10px; margin-top: auto; }
.mk-tile .mk-title { padding-top: 6px; }
.mk-tt { align-items: flex-start; }
.wo-tile .wo-s, .bk-t .wo-s { border-top: 1px solid var(--line); padding-top: 8px; width: 100%; }
.bk-t .z-top, .wo-tile .z-top { margin-bottom: 4px; }
/* needs input: amber dashed everywhere (tiles, cards, chips) */
.mk-tile.no, .wo-tile.no, .bk-t.no, .ox-card.no, .td-need { border: 1.5px dashed #e0a100; }
.an2 .an-h { font-family: var(--z-serif); font-weight: 400; font-size: 22px; line-height: 1.3; letter-spacing: 0; text-transform: none; }
html body #main :is(.mk-title, .ox-t, .ox-name, .td-nt, .ps2-info b, .wo-v, .bk-n, .mk-gn, .lgb-col h3 span, .lgb-ht h2, .lg-sec h4, .an2 .an-h, .zc-num, .ox-num), html body :is(.lg-sh h3, .mk-sh h3, .ors-legal h4) { font-family: var(--z-serif); }

/* ---- Editions as cards with the edition ladder (24 Oct 2026, concept C). Pictures are shown whole — never cropped. */
.ed-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 8px; }
.ed-cards .ed-work { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; margin: 0; }
.ed-cards .ed-work.open { grid-column: 1 / -1; border-color: var(--accent); }
.ed-cards .ed-work-h { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; text-align: left; padding: 14px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.edc-top { display: flex; gap: 12px; align-items: flex-start; }
.edc-pic { flex: none; width: 64px; height: 76px; border-radius: 6px; background: var(--panel-2); display: grid; place-items: center; overflow: hidden; }
.edc-pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.edc-h { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html body #main .edc-h .ed-title { font-family: var(--z-serif); font-weight: 400; font-size: 19px; line-height: 1.2; }
.edc-h small { font-family: var(--z-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.edc-go { color: var(--ink-faint); font-size: 18px; }
.edl { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--line); padding-top: 10px; }
.edl-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.edl-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edl-bar { display: flex; gap: 2px; min-width: 0; }
.edl-bar i { flex: 1; max-width: 12px; height: 11px; border: 1px solid var(--line); border-radius: 2px; }
.edl-bar i.on { background: var(--ok); border-color: var(--ok); }
.edl-bar.solid { height: 9px; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.edl-bar.solid i { max-width: none; flex: none; height: 100%; border: 0; border-radius: 0; }
.edl-n { font-family: var(--z-mono); font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.edl-bar i { border-color: color-mix(in srgb, var(--ink, #888) 32%, transparent); }

/* ---- Distribution supplier cards (24 Oct 2026, concept I) */
.dc-bar { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.dc-card { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--panel); cursor: pointer; transition: border-color .12s, transform .12s; }
.dc-card:hover, .dc-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); outline: none; }
.dc-card.ok { border-color: color-mix(in srgb, var(--ok) 70%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent); }
.dc-top { display: flex; gap: 12px; align-items: flex-start; }
.dc-mono { flex: none; width: 46px; height: 46px; border-radius: 8px; background: #f1ead8; color: #1b1b1b; display: grid; place-items: center; font-family: var(--z-serif); font-size: 18px; }
.dc-h { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html body #main .dc-h b { font-family: var(--z-serif); font-weight: 400; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.dc-h small { font-family: var(--z-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.dc-where { font-size: 12.5px; color: var(--ink-faint); }
.dc-fit { display: flex; gap: 5px; }
.dc-fit i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.dc-fit i.on { background: var(--ok); }
.dc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-c { font-size: 11.5px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); }
.dc-c.ok { border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); }
.dc-c.ask { border: 1.5px dashed #e0a100; color: #c47f00; background: none; }
.dc-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-foot small { font-size: 12px; color: var(--ink-faint); }
.dc-appr:not(.on) { font-size: 12px; padding: 4px 12px; }

/* ---- Money › Recurring as cards (24 Oct 2026, concept E) + the money tiles in the zip look */
.fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.fr-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--panel); cursor: pointer; transition: border-color .12s, transform .12s; }
.fr-card:hover, .fr-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); outline: none; }
.fr-top { display: flex; gap: 10px; align-items: center; }
.fr-n { display: flex; flex-direction: column; min-width: 0; }
.fr-n b { font-weight: 600; overflow-wrap: anywhere; }
.fr-n small { font-family: var(--z-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
html body #main .fr-price { margin: 4px 0 0; font-family: var(--z-serif); font-size: 32px; line-height: 1; }
.fr-price small { font-family: inherit; font-size: 15px; color: var(--ink-faint); }
.fr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.fr-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; border: 1.5px dashed #e0a100; border-radius: 12px; background: none; color: #c47f00; font: inherit; cursor: pointer; padding: 18px; min-height: 150px; }
.fr-add span { font-size: 26px; line-height: 1; } .fr-add small { color: var(--ink-faint); }
.fr-tot { display: flex; gap: 14px; align-items: baseline; justify-content: flex-end; margin: 14px 2px 0; }
html body #main .fr-tot b { font-family: var(--z-serif); font-weight: 400; font-size: 22px; }
.fr-tot span { color: var(--ink-faint); font-size: 13px; }
.fx-k { font-family: var(--z-mono); letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; }
html body #main .fx-v { font-family: var(--z-serif); font-weight: 400; }

/* ---- Collectors as cards (24 Oct 2026, concept F): initials, warmth, place, last contact, follow-up, interests and their sales. */
html body .ct-people.cl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
html body .ct-people.cl-list .cl-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "ini id" "meta meta" "acts acts"; gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--panel); }
.cl-list .cl-row .ct-ini { grid-area: ini; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--z-serif); font-size: 19px; background: #f1ead8; color: #1b1b1b; }
.cl-list .cl-row .art-id { grid-area: id; min-width: 0; }
html body #main .cl-list .cl-row .art-title { font-family: var(--z-serif); font-weight: 400; font-size: 18px; text-align: left; }
.cl-list .cl-row .cl-meta { grid-area: meta; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.cl-list .cl-meta small { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.cl-list .cl-meta small i { font-style: normal; font-family: var(--z-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.cl-list .cl-fu { border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.cl-list .cl-fu.now { border: 1.5px dashed #e0a100; color: #c47f00; }
.cl-list .cl-row .art-acts { grid-area: acts; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* initials for people are not missing pictures: no needs-attention stripes (24 Oct 2026) */
html body .art-thumb.noimg.ct-ini { background: #f1ead8 !important; background-image: none !important; border: 0 !important; color: #1b1b1b; }
html body .art-thumb.noimg.ct-ini::before, html body .art-thumb.noimg.ct-ini::after { content: none !important; display: none !important; }
html body .art-thumb.noimg.ct-ini b { display: block !important; color: #1b1b1b; font-family: var(--z-serif); font-weight: 400; }
html body .art-thumb.noimg.ct-ini b { visibility: visible !important; font-size: 19px; }
html body .art-thumb.noimg.ct-ini { outline: 0 !important; box-shadow: none !important; }

/* ---- Events as cards (24 Oct 2026, concept G): each month a grid; date in serif, name, place · kind · dates, what it is, and status. */
html body #main .ev-month:has(> .ev-row) { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-items: stretch; }
html body #main .ev-month:has(> .ev-row) > .ev-mh { grid-column: 1 / -1; margin: 18px 0 2px; }
html body #main .ev-month > .ev-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "date main" "side side"; gap: 10px 12px; align-items: start; text-align: left; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--panel); margin: 0; width: auto; min-height: 150px; transition: border-color .12s, transform .12s; }
html body #main .ev-month > .ev-row:hover, html body #main .ev-month > .ev-row:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.ev-month > .ev-row .ev-date { grid-area: date; display: flex; flex-direction: column; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 0; }
html body #main .ev-month > .ev-row .ev-date b { font-family: var(--z-serif); font-weight: 400; font-size: 24px; line-height: 1; }
.ev-month > .ev-row .ev-date small { font-family: var(--z-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.ev-month > .ev-row .ev-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
html body #main .ev-month > .ev-row .ev-name { font-family: var(--z-serif); font-weight: 400; font-size: 17px; line-height: 1.25; }
.ev-month > .ev-row .ev-where { font-family: var(--z-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.ev-month > .ev-row .ev-focus { font-size: 12.5px; color: var(--ink-faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-month > .ev-row .ev-side { grid-area: side; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; align-self: end; }
.ev-month > .ev-row .ev-when { margin-left: auto; }
html body #main .ev-month > .ev-row .ev-side { flex-direction: row; justify-content: flex-start; text-align: left; }

/* ---- Projects (24 Oct 2026, concept J): a progress ring in the header; board columns as quiet panels with the status dot. */
.proj-progress { display: flex; align-items: center; gap: 12px; }
.pj-ring { width: 56px; height: 56px; }
.pj-ring circle { fill: none; stroke-width: 4.5; }
html body #main .tcol { background: var(--panel-2); border: 1px solid var(--line); }
html body #main .tcol .tcol-h { color: inherit; }
html body #main .tcol .tcol-h > span:not(.tcol-dot):not(.count) { font-family: var(--z-mono); letter-spacing: .12em; text-transform: uppercase; font-size: 11.5px; color: inherit; }
html body #main .tcard .tc-title { font-weight: 600; }

/* ---- BOI items as cards (24 Oct 2026, concept K): each item shows what it is, the note, its price and status; groups head each set. */
html body #main .boi-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; align-items: stretch; }
html body #main .boi-list > :not(.boi-row) { grid-column: 1 / -1; }
html body #main .boi-list > .sh-month { margin: 14px 0 0; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
html body #main .boi-list > .sh-month span:first-child { font-family: var(--z-serif); font-size: 19px; text-transform: none; letter-spacing: 0; }
html body #main .boi-list > .boi-row { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "w w" "amt st"; gap: 10px; align-items: end; border: 1px solid var(--line); border-radius: 12px; padding: 14px 14px 12px; background: var(--panel); margin: 0; min-height: 150px; cursor: pointer; transition: border-color .12s, transform .12s; }
html body #main .boi-list > .boi-row:hover, html body #main .boi-list > .boi-row:focus-visible { border-color: var(--accent); transform: translateY(-2px); outline: none; }
.boi-list > .boi-row .boi-w { grid-area: w; display: flex; flex-direction: column; gap: 5px; align-self: start; padding-right: 18px; }
.boi-list > .boi-row .boi-w b { font-weight: 600; line-height: 1.3; }
.boi-list > .boi-row .boi-w small { font-size: 12px; color: var(--ink-faint); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.boi-list > .boi-row .boi-w .boi-tags { font-family: var(--z-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.boi-list > .boi-row .boi-amt { grid-area: amt; border-top: 1px solid var(--line); padding-top: 8px; }
html body #main .boi-list > .boi-row .boi-amt, html body #main .boi-list > .boi-row .boi-amt b { font-family: var(--z-serif); font-size: 18px; }
.boi-list > .boi-row > span:nth-of-type(3) { grid-area: st; border-top: 1px solid var(--line); padding-top: 8px; text-align: right; }
.boi-list > .boi-row .sh-x { position: absolute; top: 8px; right: 8px; }
.boi-list > .boi-row .boi-sugg { align-self: flex-start; }

/* ---- Aaron's works are never cropped (his rule; found 24 Oct 2026 that these used "cover"). Every place an artwork is shown fits
   the whole picture in its frame. The Kitsune hero art is not an artwork and is left as it is. */
html body .art-thumb img, html body .artg-card .art-thumb img, html body .art-car img, html body .ap-pic img, html body .myc-sv-img img, html body .myc-scov img,
html body .web-assets .wa-pics img, html body .pdoc .pd-img, html body .pdoc-eq .eq-more img, html body .pt-w img, html body .pt-cover .pt-hero { object-fit: contain !important; }
html body .art-thumb, html body .art-car, html body .ap-pic, html body .myc-sv-img, html body .myc-scov { background-color: color-mix(in srgb, var(--panel-2, #111) 80%, #000); }

/* ---- My Art › Grid cards (24 Oct 2026, concept L) */
.artg-meta { display: flex; flex-direction: column; gap: 6px; padding: 8px 2px 2px; width: 100%; text-align: left; }
.artg-st { display: flex; align-items: center; gap: 6px; font-family: var(--z-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.artg-st i { width: 7px; height: 7px; border-radius: 50%; }
.artg-ed { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; }
.artg-ed small { font-family: var(--z-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.artg-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.artg-bar i { display: block; height: 100%; background: var(--ok); }
.artg-rt { display: flex; align-items: center; gap: 0; }
.artg-rt i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px dashed #e0a100; flex: none; }
.artg-rt i.ok { background: var(--ok); border: 0; }
.artg-rt i + i { margin-left: 12px; position: relative; }
.artg-rt i + i::before { content: ""; position: absolute; right: 100%; top: 50%; width: 12px; height: 1px; background: var(--line); }
html body #main .artg:not(.artg-s) .artg-cap { font-family: var(--z-serif); font-weight: 400; font-size: 15px; }
html body #main .artg:not(.artg-s) { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
html body #main .artg:not(.artg-s) .artg-card { aspect-ratio: auto; display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 0 0 10px; background: var(--panel); border-radius: 12px; }
html body #main .artg:not(.artg-s) .artg-card .art-thumb { height: auto !important; aspect-ratio: 4 / 5; position: relative; }
html body #main .artg:not(.artg-s) .artg-card .artg-cap { position: static; opacity: 1; background: none; color: inherit; padding: 10px 10px 0; font-size: 15px; }
html body #main .artg:not(.artg-s) .artg-card .artg-meta { padding: 6px 10px 0; }
html body #main .artg:not(.artg-s) .artg-card > .artg-dot { position: absolute; top: 8px; right: 8px; }
html body #main .artg:not(.artg-s) .artg-card .art-thumb { flex: none !important; }

/* ---- Full screen / minimise on the big panels (24 Oct 2026) */
.fs-panel { position: relative; }
.fs-ctl { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin: 0 0 6px; grid-column: 1 / -1; }
.fs-t { display: none; margin-right: auto; font-family: var(--z-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.fs-b { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: inherit; font: inherit; font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.fs-b:hover, .fs-b:focus-visible { border-color: var(--accent); }
.fs-panel.fs-min > :not(.fs-ctl) { display: none !important; }
.fs-panel.fs-min > .fs-ctl .fs-t { display: block; }
.fs-panel.fs-min { min-height: 0 !important; }
.fs-panel.fs-on { position: fixed !important; inset: 0 !important; z-index: 900; margin: 0 !important; max-width: none !important; width: auto !important; overflow: auto; background: var(--fs-bg, #111) !important; padding: 18px 22px 40px !important; border-radius: 0 !important; }
.fs-panel.fs-on > .fs-ctl { position: sticky; top: -18px; z-index: 2; background: var(--fs-bg, #111); padding: 10px 0; margin: -18px 0 10px; }
.fs-panel.fs-on > .fs-ctl .fs-t { display: block; }
body.fs-body { overflow: hidden; }
.abr-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; max-height: 50vh; overflow: auto; }
.abr-opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.abr-opt:has(input:checked) { border-color: var(--accent); }
.abr-opt span { display: flex; flex-direction: column; gap: 2px; } .abr-opt small { color: var(--ink-faint); font-size: 12px; }

/* ---- Round 2 (24 Oct 2026, design-proofs/round2-2026-10-24). Merchandise ideas as product cards. */
html body #main .art-rows:has(> .mer-row) { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
html body #main .art-rows > .mer-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "pic id" "c1 c1" "c2 c3" "prog prog" "acts acts"; gap: 10px 12px; align-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--panel); }
.art-rows > .mer-row > .art-thumb { grid-area: pic; width: 76px !important; height: 76px !important; border-radius: 8px; }
.art-rows > .mer-row > .art-id { grid-area: id; min-width: 0; }
html body #main .art-rows > .mer-row .art-title { font-family: var(--z-serif); font-weight: 400; font-size: 19px; text-align: left; line-height: 1.2; }
.art-rows > .mer-row > .art-c:nth-of-type(1) { grid-area: c1; }
.art-rows > .mer-row > .art-c:nth-of-type(2) { grid-area: c2; }
.art-rows > .mer-row > .art-c:nth-of-type(3) { grid-area: c3; }
.art-rows > .mer-row > .art-c { border-top: 1px solid var(--line); padding-top: 8px; text-align: left; display: flex; flex-direction: column-reverse; gap: 2px; align-items: flex-start; }
.art-rows > .mer-row > .art-c .art-l { font-family: var(--z-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
html body #main .art-rows > .mer-row > .art-c .art-v { font-family: var(--z-serif); font-size: 16px; }
.art-rows > .mer-row > .mer-prog { grid-area: prog; }
.art-rows > .mer-row > .art-acts { grid-area: acts; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; }
html body #main .art-group:has(.mer-row) .art-gh h3 { font-family: var(--z-serif); font-weight: 400; font-size: 24px; text-transform: none; letter-spacing: 0; }

/* ---- Sales hub in the zip look (round 2): serif numbers, mono small-caps labels; sale rows with the amount in serif */
html body #main .sh-tile b { font-family: var(--z-serif); font-weight: 400; font-size: 34px; letter-spacing: 0; }
html body #main .sh-tile small, html body #main .sh-tile span { font-family: var(--z-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
html body #main .sh-list .empty { border: 1.5px dashed #e0a100; border-radius: 12px; padding: 18px; color: #c47f00; font-style: normal; text-align: center; }
html body #main .sh-list .sh-month span:first-child { font-family: var(--z-serif); font-size: 19px; text-transform: none; letter-spacing: 0; }

/* ---- Team chat in the zip look (round 2): serif topic titles, mono meta, unread counts as pills */
html body #main .bd-ttitle { font-family: var(--z-serif); font-weight: 400; font-size: 19px; letter-spacing: 0; }
html body #main .bd-tmeta { font-size: 12px; }
html body #main .bd-topic { border-radius: 12px; }

/* ---- Calendars in the zip look (round 2) */
html body #main .myc-nrow .myc-nl b { font-family: var(--z-serif); font-weight: 400; font-size: 17px; }
html body #main .myc-nrow { border-bottom: 1px solid var(--line); }

/* ---- Bangkok base map, dark on dark looks (round 2) */
.th-map-card.th-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }
.th-map-card.th-dark .leaflet-container { background: #111; }
.th-map-card.th-dark .leaflet-bar a { background: #1c1f22; color: #e8e8e8; border-color: #333; }
.dc-h small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) {
  html body #main .artg:not(.artg-s) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html body #main .artg:not(.artg-s) .artg-card .artg-cap { font-size: 13.5px; padding: 8px 8px 0; }
  html body #main .artg:not(.artg-s) .artg-card .artg-meta { padding: 4px 8px 0; }
  .artg-ed small:first-child { display: none; }
  .artg-rt i + i { margin-left: 6px; } .artg-rt i + i::before { width: 6px; }
}
@media (max-width: 640px) { .artg-ed { grid-template-columns: 1fr auto; } }

/* Small and Tiny grids stay picture-only, as Aaron liked them (24 Oct 2026): the card details show in the regular Grid only. */
.artg.artg-s .artg-meta { display: none !important; }
.ed-no.retired { text-decoration: line-through; opacity: .75; }

/* ---- Orders & shipping as the pipeline (26 Oct 2026, Aaron: "way too much info and possibly double up info … make into the pipeline
   style we talked about"). His approved Aurora proof: name + ORDER PIPELINE, four numbered cards across with arrows between, the
   guide folded underneath. The metro line is the Map view. */
.ox-name { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.ox-tag { font-family: var(--z-mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); padding-left: 16px; border-left: 1px solid var(--line); }
.ox-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.ox-seg button { background: none; border: 0; color: var(--ink-faint); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 14px; border-radius: 999px; cursor: pointer; }
.ox-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink, #111); }
html body .ox-cards { grid-auto-columns: calc((100% - 3 * 34px) / 4); gap: 34px; padding: 6px 2px 14px; margin-top: 22px; }
.ox-cards .ox-card { min-height: 330px; overflow: visible; }
.ox-cards .ox-card:not(:last-child)::after { content: "→"; position: absolute; right: -26px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 18px; pointer-events: none; }
.ox-cards .ox-ico.ri { width: 44px; height: 44px; stroke-width: 1.4; }
.ox-cards .ox-t { font-size: 26px; margin-top: 22px; }
.ox-cards .ox-sl { align-items: flex-start; }
.ox-cards .ox-sl small { font-family: var(--z-mono); letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px; margin-top: 4px; }
.ox-cards .ox-sl .chip { flex: 0 0 auto; white-space: nowrap; }
.ox-cards .ox-foot { justify-content: flex-end; }
.ox-folds { display: grid; gap: 4px; margin-top: 8px; }
.ox-folds .ox-tl { margin: 0; }
.ox-sd .appr-chip { margin-left: 6px; }
.of-guide { margin: 22px 0 0; border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; }
.of-guide > summary { cursor: pointer; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 16px 0; list-style: none; }
.of-guide > summary::-webkit-details-marker { display: none; }
.of-guide > summary::before { content: "▸"; color: var(--ink-faint); }
.of-guide[open] > summary::before { content: "▾"; }
.of-guide > summary b { font-family: var(--z-serif); font-weight: 400; font-size: 20px; }
.of-guide > summary small { color: var(--ink-faint); font-size: 12.5px; }
.of-guide[open] { padding-bottom: 16px; }
.of-guide .of-guide-h { display: none; }
@media (max-width: 1100px) { html body .ox-cards { grid-auto-columns: calc((100% - 2 * 34px) / 3); } }
@media (max-width: 820px) { html body .ox-cards { grid-auto-columns: calc((100% - 34px) / 2); } }
@media (max-width: 640px) { html body .ox-cards { grid-auto-columns: 84%; gap: 30px; } .ox-tag { border-left: 0; padding-left: 0; } .ox .or-vwrap { display: block; } }
.ox-cards .ox-h { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.6em; line-height: 1.3; }
.ox-cards .ox-sl { flex-direction: column; gap: 8px; }
.ox-cards .ox-sl > .chip { order: -1; }
.ox-cards .ox-sl b { font-family: var(--z-serif); font-size: 17px; line-height: 1.2; }
html body .ox-cards .chip-approved { display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.ox-cards .ox-t { font-size: 24px; }
.ox-cards .ox-card { padding: 18px 16px 14px; }
html body .ox-sl > span.chip { flex-direction: row; align-self: flex-start; gap: 0; } /* the supplier-name column rule was catching Badge A and stacking it */
.ox-mbw { display: flex; justify-content: flex-end; margin: -4px 0 6px; min-height: 0; }
.ox-mb { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--ink-faint); font-family: var(--z-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.ox-mb:hover { color: var(--ink); border-color: var(--accent); }
.ox .rm-br { stroke: var(--ink-faint); stroke-dasharray: none; stroke-width: 2.5; } .ox .rm-br.ok { stroke: var(--ok); } /* 26 Oct: solid branch, as his route-map proof */
.ox .rm-t, .ox .rm-s { paint-order: stroke; stroke: var(--panel); stroke-width: 7px; stroke-linejoin: round; } /* labels sit over the branch line cleanly */

/* ---- Supplier List (26 Oct 2026, Aaron's proof in design-refs/aaron-2026-10-24): partner · region · prints nudes? · status ·
   approved by. Approved rows carry the green border; Approve is a quiet outline pill, Approved a solid green one. */
.dc-bar { align-items: center; gap: 10px; }
.spl-f { width: auto; min-width: 150px; padding: 6px 10px; font-size: 13px; }
.spl { display: grid; gap: 6px; }
.spl-head, .spl-row { display: grid; grid-template-columns: minmax(220px, 2.3fr) minmax(110px, 1.2fr) minmax(110px, 1fr) 120px minmax(150px, 1.1fr); align-items: center; gap: 14px; padding: 10px 16px; }
.spl-head { padding-top: 0; padding-bottom: 4px; font-family: var(--z-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.spl-row { border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.spl-row:hover, .spl-row:focus-visible { background: color-mix(in srgb, var(--ink) 4%, transparent); outline: none; }
.spl-row.ok { border: 1px solid color-mix(in srgb, var(--ok) 70%, transparent); background: color-mix(in srgb, var(--ok) 6%, transparent); }
.spl-p { display: flex; align-items: center; gap: 14px; min-width: 0; }
.spl-p .dc-mono { width: 40px; height: 40px; font-size: 16px; }
.spl-row.ok .dc-mono { background: color-mix(in srgb, var(--ok) 35%, #10241a); color: #eaf6ee; }
.spl-pn { display: flex; flex-direction: column; min-width: 0; }
.spl-pn b { font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spl-pn small, .spl-x small { color: var(--ink-faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.spl-r { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spl-x { min-width: 0; font-size: 13.5px; }
.spl-n.ok { color: var(--ok); } .spl-n.ask { color: #c47f00; } .spl-n.no { color: var(--ink-faint); }
.spl-dash { color: var(--ink-faint); }
.spl-ap { border: 1px solid var(--line); background: none; color: var(--ink); border-radius: 999px; padding: 6px 0; width: 100%; max-width: 110px; font: inherit; font-size: 13px; cursor: pointer; }
.spl-ap:hover:not(:disabled) { border-color: var(--ok); }
html body .spl-ap.on { background: #4fbf7a; border-color: #4fbf7a; color: #0d1f14; font-weight: 600; }
.spl-ap:disabled { cursor: default; }
.spl-by { display: flex; align-items: center; gap: 10px; min-width: 0; }
.spl-by .chip-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 13px; flex: none; }
.spl-by > span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.spl-by small { color: var(--ink-faint); font-size: 11px; }
.spl-by b { font-weight: 500; font-size: 13px; }
@media (max-width: 900px) { .spl-head { display: none; } .spl-row { grid-template-columns: 1fr auto; gap: 6px 12px; } .spl-r, .spl-x { grid-column: 1; font-size: 12.5px; } .spl-r { padding-left: 54px; } .spl-x { padding-left: 54px; } .spl-s { grid-column: 2; grid-row: 1; } .spl-by { grid-column: 2; grid-row: 2 / span 2; justify-content: flex-end; } .spl-by > span small:first-child { display: none; } }
.spl-n { display: block; font-weight: 600; font-size: 13.5px; }
html body .spl-x { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .spl-x .spl-n { white-space: nowrap; }
@media (max-width: 900px) {
  html body .spl-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "p s" "r by" "x by"; gap: 4px 12px; padding: 12px; }
  html body .spl-p { grid-area: p; } html body .spl-r { grid-area: r; padding-left: 54px; } html body .spl-x { grid-area: x; padding-left: 54px; flex-direction: row; gap: 6px; align-items: baseline; }
  html body .spl-s { grid-area: s; } html body .spl-by { grid-area: by; justify-content: flex-end; }
  html body .spl-x small { white-space: normal; }
}
body.news .mk-view button.on, body.news .ox-seg button[aria-pressed="true"] { color: #1A1A1A; } /* white on lime was unreadable in the NEWS look */

/* ---- Private Sales, closer to Aaron's proof (26 Oct 2026): no stage strip (a stage filter in the bar instead), document names
   wrap rather than cut off, and the sheet carries price · client, notes, the latest activity and where buyer emails will land. */
.ps-bar-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ps-fsel { width: auto; min-width: 200px; max-width: 320px; font-size: 13px; padding: 7px 10px; }
html body .ps2-doc small { white-space: normal; overflow: visible; text-overflow: clip; max-width: 96px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ps2-shs { margin: 2px 0 6px; color: var(--ink-faint); font-size: 13px; }
.ps2-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.ps2-log small { display: block; color: var(--ink-faint); font-size: 11px; }
.ps2-mail { margin: 0; padding: 10px 12px; border: 1.5px dashed #e0a100; border-radius: 10px; color: #c47f00; font-size: 13px; }
.ps2-work { cursor: pointer; }
@media (max-width: 640px) { .ps-bar-r { width: 100%; } .ps-fsel { width: 100%; max-width: none; } }
html body .ps2-doc { max-width: 100%; box-sizing: border-box; } html body .ps2-doc small { max-width: 100%; overflow-wrap: anywhere; }

/* ---- Every pipeline on one page (26 Oct 2026, Aaron: "an infographic pipeline with colour indicators … on one page"). Lines after
   his Order Route proof, stations from his icon sheet; green = approved, solid amber = assigned not approved, dashed amber = nobody. */
.rl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.rl-kf { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-kf button { border: 1px solid var(--line); background: none; color: var(--ink-soft, var(--ink)); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.rl-kf button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
body.news .rl-kf button.on { color: #1A1A1A; }
.rl-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 12.5px; margin: 0 0 8px; color: var(--ink-soft, var(--ink)); }
.rl-legend span { display: inline-flex; align-items: center; gap: 7px; } .rl-legend b { font-weight: 700; }
.rl-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.rl-dot.ok { background: #3fbf6f; } .rl-dot.mid { border: 2.5px solid #e0a100; } .rl-dot.no { border: 2px dashed #e0a100; }
.rl-g { margin-top: 18px; }
.rl-gh { font-family: var(--z-mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.rl-row { padding: 14px 0 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.rl-row:last-child { border-bottom: 0; }
.rl-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rl-hl h3 { margin: 0; font-family: var(--z-serif); font-weight: 400; font-size: 24px; letter-spacing: 0; text-transform: none; display: flex; align-items: center; gap: 8px; }
.rl-hl p { margin: 3px 0 0; font-family: var(--z-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.rl-def { font-size: 14px; color: var(--accent); }
.rl-ha { display: flex; align-items: center; gap: 12px; flex: none; }
.rl-more { border: 1px solid var(--line); background: none; color: inherit; border-radius: 999px; width: 34px; height: 30px; font-size: 18px; line-height: 1; cursor: pointer; }
.rl-more:hover { border-color: var(--accent); }
.rl-wrap { display: flex; align-items: flex-start; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 6px 0 2px; }
.rl-svg { flex: 1; width: 100%; height: auto; max-width: 1180px; overflow: visible; }
.rl-add { flex: none; margin-top: 18px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed var(--ink-faint); background: none; color: var(--ink-faint); font-size: 18px; cursor: pointer; }
.rl-add:hover { border-color: var(--accent); color: var(--accent); }
.rl-line { stroke: color-mix(in srgb, var(--ink) 75%, transparent); stroke-width: 3; fill: none; }
.rl-br { stroke: color-mix(in srgb, var(--ink) 60%, transparent); stroke-width: 2.5; fill: none; }
.rl-st { cursor: pointer; outline: none; }
.rl-n { stroke-width: 2.4; fill: var(--panel); }
.rl-n.ok { fill: #3fbf6f; stroke: #3fbf6f; } .rl-n.mid { stroke: #e0a100; stroke-width: 3; } .rl-n.no { stroke: #e0a100; stroke-dasharray: 4 3.4; }
.rl-st:hover .rl-n, .rl-st:focus-visible .rl-n { stroke: var(--accent); stroke-width: 4; }
.rl-ic { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rl-st .rl-n.ok + .rl-ic { stroke: #0f2417; }
.rl-ic .rl-badge { fill: var(--panel); } .rl-n.ok + .rl-ic .rl-badge { fill: #3fbf6f; }
.rl-ic .rl-badge-ck { stroke-width: 1.6; }
.rl-okd { fill: #3fbf6f; stroke: var(--panel); stroke-width: 2; display: none; }
.rl-ck { stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .rl-ck.sm { display: none; }
.rl-t, .rl-s { text-anchor: middle; paint-order: stroke; stroke: var(--panel); stroke-width: 6px; stroke-linejoin: round; }
.rl-t { fill: var(--ink); font-size: 13.5px; font-weight: 600; } .rl-bt { font-size: 12.5px; }
.rl-s { fill: var(--ink-faint); font-size: 11.5px; } .rl-s.no, .rl-s.mid { fill: #c47f00; } .rl-s.no { font-weight: 600; }
.rl-v { display: none; list-style: none; margin: 8px 0 0; padding: 0; }
.rl-row.locked .rl-hl h3 { opacity: .9; }
/* the station pop-up: his Supplier List proof for one step */
.rp-modal .modal { width: min(1000px, 96vw) !important; max-width: 1000px !important; }
.rp-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.rp-head > div { flex: 1; min-width: 0; }
.rp-head small { font-family: var(--z-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.rp-head h3 { margin: 2px 0 0; font-family: var(--z-serif); font-weight: 400; font-size: 28px; text-transform: none; letter-spacing: 0; }
.rp-head p { margin: 2px 0 0; color: var(--ink-faint); font-size: 13px; }
.rp-ic { width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; flex: none; } .rp-ic .ri { width: 30px; height: 30px; }
.rp-now { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.rp-pk { border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.rp-pk.ok { background: color-mix(in srgb, #3fbf6f 18%, transparent); border: 1px solid #3fbf6f; } .rp-pk.mid { border: 1.5px solid #e0a100; } .rp-pk.no { border: 1.5px dashed #e0a100; color: #c47f00; }
.rp-tools { display: flex; gap: 8px; margin: 0 0 8px; } html body .rp-tools #rp-q { flex: 1 1 auto; width: auto; min-width: 0; } html body .rp-tools select { flex: 0 0 auto; width: auto; }
.rp-list { max-height: 52vh; overflow-y: auto; }
html body .rp-list .spl-head, html body .rp-list .spl-row { grid-template-columns: minmax(200px, 2.2fr) minmax(90px, 1.1fr) minmax(90px, 1fr) 112px 150px; padding: 9px 12px; }
.rp-row.on { box-shadow: inset 3px 0 0 var(--accent); }
.rp-asb { border: 1px solid var(--line); background: none; color: inherit; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.rp-asb:hover { border-color: var(--accent); } .rp-asb.on { border-color: var(--accent); color: var(--accent); }
body.news .rp-asb.on { color: var(--ink); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.rp-on { font-size: 12.5px; color: var(--accent); }
.rp-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
.rp-row { cursor: default; }
@media (max-width: 760px) {
  .rl-wrap .rl-svg { display: none; } .rl-wrap { padding: 0; } .rl-add { margin: 6px 0 0; }
  .rl-v { display: grid; gap: 6px; }
  .rl-vb { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; background: none; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .rl-vn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; } .rl-vn .ri { width: 17px; height: 17px; }
  .rl-vn.ok { background: #3fbf6f; color: #0f2417; } .rl-vn.mid { border: 2.5px solid #e0a100; } .rl-vn.no { border: 2px dashed #e0a100; }
  .rl-vb small { font-size: 12px; color: var(--ink-faint); } .rl-vb small.no, .rl-vb small.mid { color: #c47f00; }
  .rl-h { flex-wrap: wrap; } .rl-hl h3 { font-size: 21px; }
  html body .rp-list .spl-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "p s" "r as" "x as"; }
  .rp-list .spl-head { display: none; } .rp-as { grid-area: as; justify-self: end; } .rp-tools { flex-wrap: wrap; }
}
.rl-svg { flex: none; width: auto; max-width: none; } /* one scale for every pipeline, so lines compare */
#rp-st { width: 190px !important; flex: 0 0 190px !important; } #rp-q { flex: 1 1 auto !important; }
@media (max-width: 760px) { .rl-row { display: flex; flex-direction: column; } .rl-row .rl-v { order: 2; } .rl-row .rl-wrap { order: 3; } }

/* ---- The business systems (27 Oct 2026, Higgsfield mocks in design-proofs/systems-2026-10-27): stat tiles with line icons, quiet
   rows, serif names, mono small-caps labels, green done / amber soon or missing (dashed ◌) / red overdue, a right-hand sheet. */
.bz { --bz-ok: #3fbf6f; --bz-mid: #e0a100; --bz-no: #e5534b; --bz-blue: #5b8def; }
.bz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 16px; }
.bz-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; color: inherit; font: inherit; cursor: pointer; position: relative; }
.bz-stat:hover { border-color: var(--accent); }
.bz-stat b { font-family: var(--z-serif); font-weight: 400; font-size: 30px; line-height: 1; }
.bz-stat small { font-family: var(--z-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.bz-stat .bz-ic { width: 22px; height: 22px; margin-bottom: 4px; }
.bz-stat.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bz-stat.ok b { color: var(--bz-ok); } .bz-stat.mid b { color: var(--bz-mid); } .bz-stat.no b { color: var(--bz-no); } .bz-stat.blue b, .bz-stat.blue .bz-ic { color: var(--bz-blue); }
.bz-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bz-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.bz-q { flex: 0 1 340px; } .bz-sel { width: auto; }
.bz-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.bz-row { display: grid; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px 6px; color: inherit; font: inherit; cursor: pointer; }
.bz-row:hover, .bz-row:focus-visible { background: color-mix(in srgb, var(--ink) 4%, transparent); outline: none; }
.bz-t { display: flex; flex-direction: column; min-width: 0; }
.bz-t b { font-family: var(--z-serif); font-weight: 400; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-t small { color: var(--ink-faint); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.bz-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px; white-space: nowrap; color: inherit; text-decoration: none; }
.bz-chip.ok { border-color: color-mix(in srgb, var(--bz-ok, #3fbf6f) 60%, transparent); color: var(--bz-ok, #3fbf6f); background: color-mix(in srgb, #3fbf6f 10%, transparent); }
.bz-chip.mid { border: 1.5px dashed var(--bz-mid, #e0a100); color: #c47f00; }
.bz-chip.no { border-color: var(--bz-no, #e5534b); color: var(--bz-no, #e5534b); }
.bz-chip.off { color: var(--ink-faint); } .bz-chip.ghost { color: var(--ink-faint); border-style: dotted; }
.bz-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 0 0 16px; }
.bz-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.bz-ch h2, .bz-ch h3 { margin: 0; font-family: var(--z-serif); font-weight: 400; font-size: 22px; text-transform: none; letter-spacing: 0; }
/* the sheet */
html body .bz-tp { width: min(460px, 96vw); }
.bz-sh { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.bz-sh > div { flex: 1; min-width: 0; }
.bz-sh small { font-family: var(--z-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.bz-sh h3 { margin: 2px 0; font-family: var(--z-serif); font-weight: 400; font-size: 26px; text-transform: none; letter-spacing: 0; }
.bz-sh p { margin: 0; color: var(--ink-faint); font-size: 13px; }
.bz-shic { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; flex: none; } .bz-shic .bz-ic { width: 26px; height: 26px; }
.bz-sec { padding: 14px 0; border-bottom: 1px solid var(--line); }
.bz-sec h4 { margin: 0 0 8px; font-family: var(--z-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.bz-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px; }
.bz-dl dt { font-family: var(--z-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); padding-top: 2px; } .bz-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.bz-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.bz-tl { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 8px; font-size: 13px; }
.bz-tl li { position: relative; } .bz-tl li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--panel); border: 2px solid var(--bz-ok, #3fbf6f); }
.bz-ul { margin: 0; padding-left: 18px; font-size: 13.5px; display: grid; gap: 4px; }
.bz-notes { white-space: pre-wrap; margin: 0; font-size: 13.5px; }
.bz-ini, .bz-shic.bz-ini { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 10%, transparent); font-weight: 600; font-size: 13px; flex: none; }
/* 1. where every work is */
.wl-row { grid-template-columns: 52px minmax(180px, 1.3fr) minmax(180px, 1.4fr) minmax(0, 1.6fr); }
.wl-pic { width: 52px; height: 52px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 7%, transparent); display: grid; place-items: center; overflow: hidden; }
.wl-pic img { width: 100%; height: 100%; object-fit: contain; }
.wl-where { display: flex; gap: 8px; align-items: flex-start; min-width: 0; } .wl-where > span { display: flex; flex-direction: column; min-width: 0; } .wl-where b { font-weight: 500; font-size: 14px; } .wl-where small { color: var(--ink-faint); font-size: 12px; }
/* 2. enquiries */
.eq-row { grid-template-columns: 36px minmax(200px, 2fr) minmax(0, 1.4fr) 44px 130px; }
.eq-row.late { box-shadow: inset 3px 0 0 #e5534b; }
.eq-own .chip-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 12px; }
.eq-age { font-size: 12.5px; text-align: right; color: var(--ink-faint); } .eq-age.no { color: #e5534b; font-weight: 600; } .eq-age.ok { color: #3fbf6f; }
.eq-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; } .eq-ctl label { display: grid; gap: 4px; font-size: 12px; color: var(--ink-faint); }
/* 3+4. contracts and deadlines */
.dl-tl { margin: 4px 0 14px; } .dl-months { display: grid; grid-template-columns: repeat(6, 1fr); font-family: var(--z-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.dl-track { position: relative; height: 26px; border-bottom: 2px solid var(--line); margin-top: 6px; }
.dl-dot { position: absolute; bottom: -8px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--panel); border: 2.5px solid var(--ink-faint); cursor: pointer; padding: 0; }
.dl-dot.mid { border-color: #e0a100; background: #e0a100; }
.dl-now { position: absolute; left: 0; bottom: -5px; width: 2px; height: 30px; background: var(--accent); }
.dl-list { list-style: none; margin: 0; padding: 0; display: grid; }
.dl-list li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.dl-list li.mid { box-shadow: inset 3px 0 0 #e0a100; } .dl-list li.no { box-shadow: inset 3px 0 0 #e5534b; }
.dl-when { display: flex; flex-direction: column; } .dl-when b { font-weight: 600; font-size: 13.5px; } .dl-when small { font-size: 11.5px; color: var(--ink-faint); }
.dl-list li.no .dl-when small { color: #e5534b; } .dl-list li.mid .dl-when small { color: #c47f00; }
.ct-table { display: grid; }
.ct-row { display: grid; grid-template-columns: 24px minmax(180px, 2fr) 110px 110px auto auto; gap: 12px; align-items: center; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ct-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
/* 5. cash flow */
.cf-key { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--ink-faint); flex-wrap: wrap; }
.cf-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: -6px; } .cf-key .in { background: #3fbf6f; } .cf-key .inl { background: color-mix(in srgb, #3fbf6f 45%, transparent); } .cf-key .out { background: color-mix(in srgb, var(--ink) 60%, transparent); } .cf-key .ln { height: 2px; background: var(--accent); }
.cf-chart { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; height: 240px; padding-top: 10px; }
.cf-line { position: absolute; inset: 10px 0 46px 0; width: 100%; height: calc(100% - 56px); pointer-events: none; z-index: 2; }
.cf-line polyline { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cf-m { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.cf-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; border-bottom: 1px solid var(--line); }
.cf-b { width: 22%; min-height: 1px; border-radius: 3px 3px 0 0; } .cf-b.in { background: #3fbf6f; } .cf-b.inl { background: color-mix(in srgb, #3fbf6f 45%, transparent); } .cf-b.out { background: color-mix(in srgb, var(--ink) 55%, transparent); }
.cf-m b { font-family: var(--z-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; } .cf-m small { font-size: 11.5px; color: var(--ink-faint); }
.cf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-list { list-style: none; margin: 0; padding: 0; } .cf-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.cf-amt { font-family: var(--z-serif); font-weight: 400; font-size: 17px; }
/* 6. waitlist */
.wt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.wt-card { display: flex; flex-direction: column; gap: 10px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; color: inherit; font: inherit; cursor: pointer; }
.wt-card:hover { border-color: var(--accent); } .wt-card > b { font-family: var(--z-serif); font-weight: 400; font-size: 20px; }
.wt-sizes { display: flex; flex-wrap: wrap; gap: 5px; } .wt-avs { display: flex; align-items: center; } .wt-avs .chip-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 11px; margin-right: -6px; border: 2px solid var(--panel); } .wt-avs small { margin-left: 14px; color: var(--ink-faint); font-size: 12px; }
.wt-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; }
.wt-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 120px auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.wt-n { font-family: var(--z-serif); font-size: 18px; color: var(--ink-faint); } .wt-list li.st-bought .wt-n { color: #3fbf6f; } .wt-list li.st-passed { opacity: .55; }
/* 7. purchase orders */
.po-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.po-col { background: color-mix(in srgb, var(--ink) 3%, transparent); border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-height: 120px; display: flex; flex-direction: column; gap: 10px; }
.po-col h3 { margin: 0; font-family: var(--z-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--ink-faint); display: flex; justify-content: space-between; }
.po-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.po-card:hover { border-color: var(--accent); } .po-card.late { border-color: #e5534b; }
.po-card > small { font-family: var(--z-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--ink-faint); } .po-card > b { font-weight: 500; font-size: 14px; }
.po-sup { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .po-sup .dc-mono { width: 26px; height: 26px; font-size: 11px; border-radius: 6px; }
.po-ft { display: flex; justify-content: space-between; align-items: center; gap: 6px; } .po-ft b { font-family: var(--z-serif); font-weight: 400; font-size: 18px; }
.po-mv { display: flex; justify-content: space-between; font-size: 12px; }
.wc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.wc-card { display: flex; flex-direction: column; gap: 8px; text-align: left; background: none; border: 1px solid var(--line); border-radius: 12px; padding: 14px; color: inherit; font: inherit; cursor: pointer; } .wc-card:hover { border-color: var(--accent); }
.wc-card > b { font-family: var(--z-serif); font-weight: 400; font-size: 19px; }
.wc-m { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .wc-m i { display: block; height: 100%; background: #3fbf6f; } .wc-m i.low { background: #e0a100; }
/* 8. how we work */
.hb { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.hb-toc { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; }
.hb-area { margin: 12px 0 4px; font-family: var(--z-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.hb-li { text-align: left; background: none; border: 0; color: inherit; font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 8px; cursor: pointer; } .hb-li:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } .hb-li.on { background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 600; }
.hb-toc .btn { margin-top: 12px; align-self: flex-start; }
.hb-doc { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.hb-doc h2 { margin: 2px 0 6px; font-family: var(--z-serif); font-weight: 400; font-size: 30px; text-transform: none; letter-spacing: 0; } .hb-sum { color: var(--ink-faint); margin: 0 0 14px; }
.hb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hb-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.hb-n { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-family: var(--z-serif); font-size: 15px; }
.hb-links { font-size: 13px; color: var(--ink-faint); }
.hb-ob { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.ob-p { margin: 8px 0 14px; } .ob-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ob-h span { display: flex; flex-direction: column; } .ob-h small { color: var(--ink-faint); font-size: 12px; }
.hb-ring { width: 48px; height: 48px; } .hb-ring circle { fill: none; stroke-width: 3.2; } .hb-ring .bg { stroke: var(--line); } .hb-ring .fg { stroke: #3fbf6f; transform: rotate(-90deg); transform-origin: 18px 18px; stroke-linecap: round; } .hb-ring text { font-size: 8.5px; text-anchor: middle; fill: var(--ink); font-weight: 600; }
.ob-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .ob-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13.5px; padding: 4px 0; } .ob-list li.ok > span { color: var(--ink-faint); text-decoration: line-through; }
.ob-ck { width: 22px; height: 22px; border-radius: 6px; border: 1.5px dashed #e0a100; background: none; color: #0f2417; cursor: pointer; font-weight: 700; padding: 0; } .ob-list li.ok .ob-ck { background: #3fbf6f; border: 1.5px solid #3fbf6f; }
@media (max-width: 1100px) { .hb { grid-template-columns: 1fr; } .hb-toc { position: static; flex-direction: row; flex-wrap: wrap; } .po-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .wl-row, .eq-row { grid-template-columns: 44px minmax(0, 1fr); } .wl-row .wl-where, .wl-row .bz-chips, .eq-row .bz-chips { grid-column: 2; justify-content: flex-start; } .eq-row .eq-own { display: none; } .eq-row .eq-age { grid-column: 2; text-align: left; }
  .wl-pic { width: 44px; height: 44px; } .dl-list li { grid-template-columns: 1fr auto; } .dl-list li .bz-t { grid-column: 1 / -1; grid-row: 2; }
  .ct-row { grid-template-columns: 24px minmax(0, 1fr) auto; } .ct-row > span:nth-of-type(n+2):not(.bz-chip) { display: none; }
  .cf-cols { grid-template-columns: 1fr; } .cf-chart { height: 200px; gap: 4px; } .po-board { grid-template-columns: 1fr; } .eq-ctl { grid-template-columns: 1fr; }
  .wt-list li { grid-template-columns: 22px minmax(0, 1fr) 110px; } .wt-list li .linkbtn, .wt-list li a { grid-column: 2; }
}
.bz-stats { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
html body #main .bz-ch h2, html body #main .bz-ch h3, html body .bz-sh h3, html body #main .hb-doc h2, html body #main .bz-t b, html body #main .bz-stat b, html body #main .wt-card > b, html body #main .wc-card > b { font-family: var(--z-serif); font-weight: 400; text-transform: none; letter-spacing: 0; }
.wl-pic { position: relative; } .wl-pic img, .wt-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--panel); }
.wt-pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 8px; background: color-mix(in srgb, var(--ink) 6%, transparent); overflow: hidden; color: var(--ink-faint); } .wt-pic .bz-ic { width: 34px; height: 34px; }

/* ---- Business polish (27 Oct 2026, Higgsfield mocks 01–04 in design-proofs/systems-2026-10-27): line icons, small-caps kinds, serif
   names, hairline cards; green = sorted, amber dashed = still to do. */
html body #main .st-node { padding: 14px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: var(--panel); min-width: 190px; gap: 4px; }
html body #main .st-node.st-biz { border-color: color-mix(in srgb, var(--ink) 45%, transparent); min-width: 230px; }
html body #main .st-node.st-pending { border: 1.5px dashed #e0a100; }
html body #main .st-node.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.st-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; gap: 10px; margin-bottom: 6px; }
.st-top .bz-ic { width: 28px; height: 28px; stroke-width: 1.4; }
.st-top em { font-style: normal; font-family: var(--z-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); text-align: right; }
.st-node.st-pending .st-top em, .st-node.st-pending .st-top .bz-ic { color: #c47f00; }
html body #main .st-node > b { font-family: var(--z-serif); font-weight: 400; font-size: 20px; letter-spacing: 0; text-transform: none; line-height: 1.15; }
html body #main .st-node > small { font-family: var(--z-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.st-bk { font-family: var(--z-mono); letter-spacing: .18em; }
/* Businesses & tax at a glance (mock 02) */
.tx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 4px 0 16px; }
html body #main .tx-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); border-top: 3px solid var(--tc); }
html body #main .tx-card.pending { border-style: dashed; border-color: #e0a100; border-top: 3px solid var(--tc); }
html body #main .tx-card.on { box-shadow: 0 0 0 1px var(--accent); border-color: var(--accent); }
.tx-top { display: flex; justify-content: space-between; align-items: center; } .tx-top .bz-ic { width: 30px; height: 30px; stroke-width: 1.4; }
html body #main .tx-card > b { font-family: var(--z-serif); font-weight: 400; font-size: 24px; text-transform: none; letter-spacing: 0; }
html body #main .tx-card > small { font-family: var(--z-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.tx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.tx-stats > span { display: flex; flex-direction: column; gap: 2px; } .tx-stats em { font-style: normal; font-family: var(--z-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.tx-stats i { font-style: normal; font-family: var(--z-serif); font-size: 20px; } .tx-stats i.mid { color: #e0a100; }
.tx-next { font-size: 12.5px; color: var(--ink-faint); } .tx-warn { white-space: normal; text-align: left; line-height: 1.35; padding: 6px 10px; border-radius: 10px; }
.tx-year { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
.tx-yh { margin: 0 0 12px; font-family: var(--z-serif); font-size: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.tx-yh small { font-family: inherit; font-size: 12px; color: var(--ink-faint); display: flex; align-items: center; gap: 6px; } .tx-yh small i { width: 10px; height: 10px; border-radius: 50%; background: var(--tc); display: inline-block; margin-left: 8px; }
.tx-track { position: relative; height: 22px; border-bottom: 2px solid var(--line); }
.tx-dot { position: absolute; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--tc); border: 2px solid var(--panel); }
.tx-now { position: absolute; bottom: -6px; width: 2px; height: 28px; background: var(--accent); }
.tx-months { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: 8px; font-family: var(--z-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
html body #main .tx-card { min-width: 0; } .tx-next { white-space: normal; overflow-wrap: anywhere; } html body #main .tx-card.on > b, html body #main .tx-card > b { color: var(--ink); }
/* Banking & payments (mock 03) */
.bk2 { margin: 0 0 16px; display: grid; gap: 14px; }
.bk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.bk-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; min-height: 150px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--ink) 9%, var(--panel)), var(--panel)); }
.bk-card:hover { border-color: var(--accent); }
html body #main .bk-card > b { font-family: var(--z-serif); font-weight: 400; font-size: 22px; text-transform: none; letter-spacing: 0; }
.bk-no { font-family: var(--z-mono); letter-spacing: .2em; font-size: 15px; margin-top: auto; } .bk-card small { color: var(--ink-faint); font-size: 12px; }
.bk-card.add { border: 1.5px dashed #e0a100; background: none; align-items: center; justify-content: center; text-align: center; color: #c47f00; } .bk-card.add > span { font-size: 26px; line-height: 1; }
.bk-short { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--panel); }
.bk-short > .wo-l { margin: 0 0 8px; display: flex; gap: 10px; align-items: baseline; } .bk-short > .wo-l small { text-transform: none; letter-spacing: 0; font-family: inherit; color: var(--ink-faint); }
.bk-sr { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 60px 170px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.bk-sr .dc-mono { width: 32px; height: 32px; font-size: 12px; } .bk-fit { color: #e0a100; letter-spacing: 2px; font-size: 13px; } .bk-sr select { width: 100%; }
@media (max-width: 760px) { .bk-sr { grid-template-columns: 34px minmax(0, 1fr); } .bk-sr > .bz-chip, .bk-sr .bk-fit, .bk-sr select { grid-column: 2; justify-self: start; } }
/* Everything we own (mock 04) */
.as-wrap { margin: 4px 0 12px; } .as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.as-card { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.as-card:hover { border-color: var(--accent); } .as-card.sample { border-style: dashed; border-color: color-mix(in srgb, #e0a100 60%, var(--line)); }
.as-ic { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; } .as-ic .bz-ic { width: 24px; height: 24px; stroke-width: 1.4; }
.as-ft { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.as-ft > span { display: flex; flex-direction: column; } .as-ft em { font-style: normal; font-family: var(--z-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.as-ft i { font-style: normal; font-family: var(--z-serif); font-size: 17px; } .as-ft i.mid { color: #e0a100; } .as-card > .bz-chip { grid-column: 1 / -1; justify-self: start; }

/* ---- Reference lock: "elevate professionalism" (27 Oct 2026; Refero: Origin Financial primary, Mercury rows, Cosmos icons; Higgsfield
   mock-pro-*.png). Ledger KPI strips, light serif figures with tabular numerals, mono labels, dot + word statuses, hairline rows. */
.bz, .tx-cards, .as-wrap, .bk2 { font-variant-numeric: tabular-nums; }
html body #main .bz-stats { display: flex; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 0 22px; overflow-x: auto; }
html body #main .bz-stat { flex: 1 1 0; min-width: 104px; background: none; border: 0; border-radius: 0; border-left: 1px solid var(--line); padding: 14px 16px 12px; gap: 6px; align-items: center; text-align: center; position: relative; }
html body #main .bz-stat:first-child { border-left: 0; }
html body #main .bz-stat:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
html body #main .bz-stat.on { box-shadow: none; } html body #main .bz-stat.on::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--ink); }
html body #main .bz-stat small { order: 1; font-size: 10px; letter-spacing: .18em; } html body #main .bz-stat b { order: 2; font-family: var(--z-serif); font-weight: 300; font-size: 28px; }
html body #main .bz-stat .bz-ic { order: 0; width: 24px; height: 24px; stroke-width: 1.3; margin: 0 0 2px; }
html body #main .bz-stat.ok b, html body #main .bz-stat.mid b, html body #main .bz-stat.no b { color: var(--ink); } html body #main .bz-stat.no small { color: #e5534b; } html body #main .bz-stat.mid small { color: #c47f00; }
.bz-mono { font-family: var(--z-mono); font-size: 10.5px !important; letter-spacing: .14em; text-transform: uppercase; }
.bz-fig { font-family: var(--z-mono); font-size: 13px; letter-spacing: .04em; } .bz-fig.mid { color: #c47f00; } .bz-fig.no { color: #e5534b; } .bz-dim { color: var(--ink-faint); }
.bz-dot { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; white-space: nowrap; }
.bz-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.bz-dot.ok i { background: #3fbf6f; } .bz-dot.mid i { background: #e0a100; } .bz-dot.no i { background: #e5534b; } .bz-dot.blue i { background: #5b8def; }
.bz-dot.miss { color: #c47f00; } .bz-dot.miss i { background: none; border: 1.5px dashed #e0a100; width: 10px; height: 10px; }
.bz-th { cursor: default !important; font-family: var(--z-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); padding-top: 4px !important; padding-bottom: 10px !important; }
.bz-th:hover { background: none !important; }
html body #main .wl-row { grid-template-columns: 56px minmax(200px, 1.6fr) minmax(190px, 1.5fr) 110px 120px 120px; padding: 14px 6px; }
.wl-list { border-top: 0; } .wl-pic { width: 56px; height: 56px; border-radius: 4px; }
html body #main .bz-t b { font-weight: 400; font-size: 17px; } .bz-t .bz-mono { margin-top: 3px; }
.wl-where b { font-weight: 400 !important; font-size: 14px !important; } .wl-where .bz-ic { width: 16px; height: 16px; margin-top: 2px; color: var(--ink-faint); }
@media (max-width: 760px) { html body #main .wl-row { grid-template-columns: 48px minmax(0, 1fr); } html body #main .wl-row > span:nth-child(n+4) { grid-column: 2; } .bz-th { display: none !important; } }
/* sheets: label/value ledger, quiet surface */
html body .bz-tp { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); }
html body .bz-sh h3 { font-weight: 300; font-size: 28px; }
.bz-dl dt { font-size: 10px; letter-spacing: .18em; } .bz-dl { row-gap: 10px; }
.bz-tl li { font-family: inherit; } .bz-sec h4 { letter-spacing: .2em; font-size: 10px; }
/* section cards: tone not borders */
html body #main .bz-card { border: 0; background: color-mix(in srgb, var(--ink) 4%, var(--panel)); border-radius: 16px; }
html body #main .bz-ch h2 { font-weight: 300; font-size: 26px; }
/* Distinction (Aaron, 27 Oct 2026: "i get frustrated with mono or repetition without distinction"): a colour per place, kind and stage;
   names and descriptions in sentence case — mono only for dates and figures. */
html body #main .bz-stat.hued .bz-ic { color: var(--hue); } html body #main .bz-stat.hued b { color: var(--hue); }
html body #main .bz-stat.hued.on::after { background: var(--hue); }
html body #main .bz-stat.hued:not(.on) b { color: color-mix(in srgb, var(--hue) 80%, var(--ink)); }
html body #main .wl-row .wl-pic { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hue) 55%, transparent); color: var(--hue); }
html body #main .wl-row .wl-where .bz-ic { color: var(--hue); } html body #main .wl-row .wl-where b { color: color-mix(in srgb, var(--hue) 75%, var(--ink)); }
html body #main .bz-row:not(.bz-th) { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--hue, transparent) 70%, transparent); }
html body #main .bz-row.late { box-shadow: inset 3px 0 0 #e5534b; }
.bz-t small.bz-mono, .wl-where small.bz-mono { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 12.5px !important; }
.bz-chip.hued { border-color: color-mix(in srgb, var(--hue) 55%, transparent); color: color-mix(in srgb, var(--hue) 85%, var(--ink)); background: color-mix(in srgb, var(--hue) 10%, transparent); }
.bz-ini.hued { background: color-mix(in srgb, var(--hue) 22%, transparent); color: color-mix(in srgb, var(--hue) 70%, var(--ink)); }
.bz-kind { color: color-mix(in srgb, var(--hue) 85%, var(--ink)); } .bz-kind::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--hue); margin-right: 6px; vertical-align: 1px; }
.dl-dot { border-color: var(--hue, var(--ink-faint)); } .dl-dot.mid { background: var(--hue, #e0a100); border-color: #e0a100; }
.po-col { border-top: 3px solid var(--hue); } .po-col h3 { color: color-mix(in srgb, var(--hue) 80%, var(--ink)); }
.hb-area { color: var(--hue) !important; } .hb-area::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--hue); margin-right: 8px; }
html body #main .bz-th { display: grid; align-items: end; gap: 14px; }
.wl-shpic { position: relative; width: 72px !important; height: 72px !important; border-radius: 6px !important; overflow: hidden; color: var(--hue); border-color: color-mix(in srgb, var(--hue) 50%, transparent) !important; } .wl-shpic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--panel); }

/* Aaron, 27 Oct 2026: "serif font for vast data is a bit much ❤️ however pretty" — serif stays for headings only (page, section, sheet
   titles); every list name, count, amount and card in data sets uses the sans with tabular figures. */
html body #main .bz-t b, html body #main .bz-stat b, html body #main .wt-card > b, html body #main .wc-card > b,
html body #main .st-node > b, html body #main .tx-card > b, html body #main .tx-stats i, html body #main .bk-card > b,
html body #main .as-ft i, html body #main .cf-amt, html body #main .po-ft b, html body #main .wt-n, html body #main .hb-n,
html body #main .bk-n, html body .bz-sh h3 + p { font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
html body #main .bz-t b { font-weight: 500; font-size: 15px; }
html body #main .bz-stat b { font-weight: 300; font-size: 30px; letter-spacing: -.01em; }
html body #main .st-node > b, html body #main .tx-card > b, html body #main .bk-card > b, html body #main .wt-card > b, html body #main .wc-card > b { font-weight: 500; font-size: 17px; }
html body #main .tx-card > b { font-size: 20px; }
html body #main .tx-stats i, html body #main .as-ft i, html body #main .cf-amt, html body #main .po-ft b { font-weight: 500; font-size: 16px; }
html body #main .wt-n, html body #main .hb-n { font-weight: 600; font-size: 14px; }
/* Cash flow, connected (27 Oct 2026): nine months — three actual, six expected */
.cf-chart.cf9 { grid-template-columns: repeat(9, 1fr); }
.cf-m.past .cf-b { opacity: .55; } .cf-m.now { position: relative; } .cf-m.now::before { content: ""; position: absolute; left: -6px; top: 0; bottom: 40px; border-left: 1px dashed var(--ink-faint); }
.cf-m.past small { font-family: var(--z-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.cf-auto .bz-t b { color: color-mix(in srgb, #5b8def 70%, var(--ink)); }
/* This month */
.sn-hero { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 0 18px; }
.sn-hero > div { padding: 18px 20px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; } .sn-hero > div:first-child { border-left: 0; }
.sn-hero small { font-family: var(--z-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.sn-hero b { font-weight: 300; font-size: 40px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .sn-hero > div:first-child b { font-size: 52px; }
.sn-hero span { color: var(--ink-faint); font-size: 13px; } .sn-hero i { font-style: normal; } .sn-hero i.up { color: #3fbf6f; } .sn-hero i.dn { color: #e5534b; }
.sn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.sn-t { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; background: color-mix(in srgb, var(--hue) 8%, var(--panel)); border-left: 3px solid var(--hue); }
.sn-t:hover { background: color-mix(in srgb, var(--hue) 14%, var(--panel)); }
.sn-t small { font-family: var(--z-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--hue) 75%, var(--ink)); }
.sn-t b { font-weight: 400; font-size: 28px; font-variant-numeric: tabular-nums; } .sn-t span { font-size: 12.5px; color: var(--ink-faint); } .sn-t em { font-style: normal; color: #e0a100; } .sn-t.warn em { color: #e5534b; }
/* Price book */
.pb-ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.pb-step { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 12px; background: var(--panel); border-top: 3px solid var(--hue); }
.pb-step:hover { box-shadow: 0 0 0 1px var(--accent); } .pb-step small { color: color-mix(in srgb, var(--hue) 80%, var(--ink)); font-weight: 600; font-size: 12.5px; }
.pb-step b { font-weight: 300; font-size: 32px; font-variant-numeric: tabular-nums; } .pb-step > span { font-size: 12px; color: var(--ink-faint); } .pb-hist { font-style: italic; } .pb-disc { color: var(--ink) !important; }
/* Insurance */
.in-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.in-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 12px; background: var(--panel); border-left: 3px solid var(--hue); }
.in-card:hover { box-shadow: 0 0 0 1px var(--accent); } .in-card b { font-weight: 500; font-size: 17px; } .in-card small { color: var(--ink-faint); font-size: 12.5px; }
.in-row { grid-template-columns: minmax(0, 1fr) 130px 140px; } .bz-warn { margin: 0 0 10px; }
/* Invoices */
.iv-age { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 16px; }
.iv-b { padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--hue) 8%, var(--panel)); border-top: 3px solid var(--hue); display: flex; flex-direction: column; gap: 3px; }
.iv-b small { font-weight: 600; font-size: 12.5px; color: color-mix(in srgb, var(--hue) 80%, var(--ink)); } .iv-b b { font-weight: 300; font-size: 28px; font-variant-numeric: tabular-nums; } .iv-b span { font-size: 12px; color: var(--ink-faint); }
html body #main .iv-row { grid-template-columns: minmax(150px, 1.4fr) minmax(120px, 1fr) 130px 110px 110px 120px auto; cursor: pointer; }
.iv-acts { display: flex; gap: 8px; justify-content: flex-end; } .iv-row .bz-fig small { color: #e5534b; font-size: 11px; } .bov-tb .bz-fig small { color: var(--ink-faint); font-size: 11.5px; font-family: inherit; }
/* Access */
.ax-wrap { overflow-x: auto; } .ax { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.ax th, .ax td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.ax thead th { font-family: var(--z-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.ax tbody th { text-align: left; font-weight: 500; display: flex; align-items: center; gap: 10px; } .ax .bz-ini { width: 28px; height: 28px; font-size: 12px; }
.ax-lv { border: 0; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; background: color-mix(in srgb, var(--hue) 18%, transparent); color: color-mix(in srgb, var(--hue) 85%, var(--ink)); }
@media (max-width: 760px) { .sn-hero { grid-template-columns: 1fr; } .sn-hero > div { border-left: 0; border-top: 1px solid var(--line); } .iv-age { grid-template-columns: 1fr 1fr; } html body #main .iv-row { grid-template-columns: minmax(0, 1fr) auto; } html body #main .iv-row > span:nth-child(n+2):not(:last-child) { display: none; } .cf-chart.cf9 { gap: 2px; } }
html body #main .iv-row { grid-template-columns: minmax(150px, 1.4fr) minmax(120px, 1fr) 140px 110px 110px 110px 170px; } .iv-acts .btn { white-space: nowrap; } .iv-acts { align-items: center; }
html body #main .pt-board { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pt-board .po-card > small { font-family: inherit; letter-spacing: 0; font-size: 12.5px; color: var(--ink-faint); } .pt-board .po-card > b { font-weight: 500; } @media (max-width: 1100px) { html body #main .pt-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { html body #main .pt-board { grid-template-columns: 1fr; } }

/* ---- Business, with design love (27 Oct 2026; Refero: Sequel + Fey; Higgsfield mocks in design-proofs/business-2026-10-27) */
.bzid { display: flex; align-items: center; gap: 18px; margin: 4px 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bzid-crest { width: 64px; height: 64px; border-radius: 10px; border: 1px solid color-mix(in srgb, #e9c46a 55%, transparent); display: grid; place-items: center; color: #e9c46a; flex: none; background: color-mix(in srgb, #e9c46a 6%, transparent); }
.bzid-crest .bz-ic { width: 34px; height: 34px; stroke-width: 1.3; }
.bzid-main { flex: 1; min-width: 260px; } html body #main .bzid-main h2 { margin: 0 0 8px; font-family: var(--z-serif); font-weight: 400; font-size: 34px; letter-spacing: 0; text-transform: none; }
.bzid-chips { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.bzid-c { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; } .bzid-c .bz-ic { width: 17px; height: 17px; }
.bzid-c.c-violet .bz-ic { color: #c48cff; } .bzid-c.c-pink .bz-ic { color: #ff7aa8; } .bzid-c.c-green .bz-ic { color: #3fbf6f; } .bzid-c.c-teal .bz-ic { color: #4fc3c7; } .bzid-c.c-blue .bz-ic { color: #5b8def; }
.bzid-c.c-amber { color: #e0a100; } .bzid-c.c-cream .bz-ic { color: #e9c46a; } .bzid-c.c-miss { color: #c47f00; } .bzid-c.c-miss .bz-ic { color: #e0a100; }
.bzid-sw { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.bzid-sw button { border: 0; background: none; color: var(--ink-faint); font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.bzid-sw button.on { background: #f1ead8; color: #141210; font-weight: 600; } .bzid-sw button.pend:not(.on) { color: #c47f00; } .bzid-sw small { font-size: 11.5px; opacity: .8; }
/* icon tabs, a colour each, underline for the open one */
html body #main .gtabs.bz-tabs { gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 0; flex-wrap: wrap; }
html body #main .bz-tabs .gtab { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 10px 16px 12px !important; color: var(--ink-soft, var(--ink)) !important; display: inline-flex; align-items: center; gap: 8px; position: relative; }
html body #main .bz-tabs .gtab .gtab-ic { width: 18px; height: 18px; fill: none; stroke: var(--tc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html body #main .bz-tabs .gtab .gtab-l { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 14px; }
html body #main .bz-tabs .gtab .gtab-n { background: none !important; color: var(--ink-faint) !important; font-size: 12px; padding: 0; }
html body #main .bz-tabs .gtab.on { color: var(--ink) !important; } html body #main .bz-tabs .gtab.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--tc); }
html body #main .bz-tabs .gtab:hover { color: var(--ink) !important; }
/* Overview */
.bov { margin: 18px 0 0; } .bov-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.bov-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; background: color-mix(in srgb, var(--ink) 2%, var(--panel)); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
html body #main .bov-card h3 { margin: 0; font-family: var(--z-serif); font-weight: 400; font-size: 24px; letter-spacing: 0; text-transform: none; }
.bov-card > .linkbtn { align-self: flex-start; margin-top: auto; } .bov-wide { grid-column: span 2; }
.bov-ownb { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.bov-donut { width: 150px; height: 150px; transform: rotate(-90deg); } .bov-donut circle { fill: none; stroke-width: 14; } .bov-donut .bg { stroke: var(--line); }
.bov-donut text { transform: rotate(90deg); transform-origin: 50px 50px; text-anchor: middle; fill: var(--ink); font-size: 15px; font-weight: 600; } .bov-donut text.sm { font-size: 7px; fill: var(--ink-faint); font-weight: 400; }
.bov-ownb ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .bov-ownb li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.bov-ownb li > i { width: 10px; height: 10px; border-radius: 50%; } .bov-ownb li span { display: flex; flex-direction: column; min-width: 0; } .bov-ownb li b { font-weight: 500; font-size: 14px; } .bov-ownb li small { color: var(--ink-faint); font-size: 12px; }
.bov-ownb li em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.bov-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; margin: 0; font-size: 13.5px; }
.bov-dl dt, .bov-dl dd { padding: 8px 0; border-bottom: 1px solid var(--line); margin: 0; } .bov-dl dt { color: var(--ink-faint); padding-right: 16px; } .bov-dl dd { overflow-wrap: anywhere; }
.bov-docs { list-style: none; margin: 0; padding: 0; } .bov-docs li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.bov-docs li .bz-ic { width: 18px; height: 18px; color: #5b8def; } .bov-docs .linkbtn { font-size: 12.5px; color: #c47f00; }
.bov-tb { width: 100%; border-collapse: collapse; font-size: 13.5px; } .bov-tb th { text-align: left; font-family: var(--z-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; padding: 0 0 8px; }
.bov-tb td { padding: 9px 0; border-top: 1px solid var(--line); }
.bov-m { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.bov-m > span { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, #3fbf6f 14%, transparent); color: #3fbf6f; } .bov-m.out > span { background: color-mix(in srgb, #c48cff 14%, transparent); color: #c48cff; }
.bov-m small { color: var(--ink-faint); font-size: 12.5px; } .bov-m b { display: block; font-weight: 400; font-size: 24px; font-variant-numeric: tabular-nums; }
/* Providers as role cards */
.pv-wrap { margin: 0 0 12px; } .pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pv-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 5px; padding: 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--hue); }
.pv-card:hover { border-color: var(--accent); } .pv-card b { font-weight: 500; font-size: 16px; } .pv-card small { font-size: 12.5px; color: var(--ink-faint); }
.pv-card.empty { border: 1.5px dashed #e0a100; border-left: 3px solid var(--hue); } .pv-card.empty b { color: var(--ink-faint); font-weight: 400; } .pv-card.empty small { color: #c47f00; }
@media (max-width: 1100px) { .bov-grid { grid-template-columns: 1fr 1fr; } .bov-wide { grid-column: span 2; } }
@media (max-width: 760px) { .bov-grid { grid-template-columns: 1fr; } .bov-wide { grid-column: auto; } .bov-ownb { grid-template-columns: 110px minmax(0, 1fr); } .bov-donut { width: 110px; height: 110px; } html body #main .bzid-main h2 { font-size: 26px; } }
html body #main .gtabs.bz-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } html body #main .bz-tabs .gtab { padding: 10px 12px 12px !important; flex: none; white-space: nowrap; }
html body #main .bz-tabs .gtab[data-gtab-btn="overview"] .gtab-n { display: none; }
.bov-grid { grid-template-columns: 1.35fr 1fr 1fr; } .bov-ownb { grid-template-columns: 132px minmax(0, 1fr); } .bov-donut { width: 132px; height: 132px; }
.bov-ownb li b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bov-grid { grid-template-columns: 1fr 1fr; } .bov-wide { grid-column: 1 / -1; order: 9; } .bov-money { order: 5; }
@media (min-width: 1560px) { .bov-grid { grid-template-columns: 1.35fr 1fr 1fr; } .bov-wide { grid-column: span 2; order: 0; } .bov-money { order: 0; } }
@media (max-width: 860px) { .bov-grid { grid-template-columns: 1fr; } }
html body #main .bz-tabs .gtab:has(.gtab-s) .gtab-l { display: none; } html body #main .bz-tabs .gtab .gtab-s { display: inline; font-weight: 500; font-size: 14px; text-transform: none; letter-spacing: 0; color: inherit; opacity: 1; }
.bz-warn .bz-dot, .modal-hint .bz-dot, .bov-card .bz-dot.miss { white-space: normal; align-items: flex-start; } .bz-warn .bz-dot i, .modal-hint .bz-dot i { margin-top: 4px; }
/* Flags and fact cards (Aaron, 27 Oct 2026: "text walls are too much for me, clickable expanding tabs, flags, cards are more my jam") */
.bz-flags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; align-items: flex-start; }
.bz-flag { border-radius: 10px; border: 1.5px dashed #e0a100; background: color-mix(in srgb, #e0a100 7%, transparent); max-width: 460px; }
.bz-flag.no { border: 1.5px solid #e5534b; background: color-mix(in srgb, #e5534b 8%, transparent); }
.bz-flag > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 13.5px; font-weight: 600; color: #e0a100; }
.bz-flag.no > summary { color: #e5534b; } .bz-flag > summary::-webkit-details-marker { display: none; } .bz-flag > summary .bz-ic { width: 15px; height: 15px; }
.bz-flag > summary::after { content: "▾"; font-size: 11px; opacity: .7; margin-left: 2px; } .bz-flag[open] > summary::after { content: "▴"; }
.bz-flag > div { padding: 0 12px 10px 35px; font-size: 13px; color: var(--ink-soft, var(--ink)); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bov-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bov-f { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--hue) 7%, var(--panel)); border-left: 3px solid var(--hue); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bov-f.wide { grid-column: 1 / -1; } .bov-f small { font-size: 11.5px; color: color-mix(in srgb, var(--hue) 75%, var(--ink)); font-weight: 600; }
.bov-f b { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; } .bov-f.miss { border-left-style: dashed; } .bov-f.miss b { color: #c47f00; font-weight: 400; }
@media (max-width: 760px) { .bov-facts { grid-template-columns: 1fr; } }
/* Board titles in their channel's colour (Aaron, 27 Oct 2026: "please colour the titles on the chat boards") */
html body .bd-topic .bd-ttitle, html body .hb-item .hb-t, html body .bd-ptitle { color: color-mix(in srgb, var(--bdh, var(--ink)) 82%, var(--ink)) !important; }
html body .bd-topic { box-shadow: inset 3px 0 0 var(--bdh, transparent); }
.bd-chn { color: var(--bdh); font-weight: 600; }
.bd-ch .bd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bdh); margin-right: 6px; vertical-align: 1px; }
.bd-ch.on { box-shadow: inset 3px 0 0 var(--bdh, transparent); }
/* Tax tab as cards and flags (27 Oct 2026; Aaron: "text walls are too much for me, clickable expanding tabs, flags, cards") */
.tx-ocards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.tx-oc { padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--hue) 8%, var(--panel)); border-left: 3px solid var(--hue); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
.tx-oc b { font-weight: 500; } .tx-oc small { grid-column: 1; color: var(--ink-faint); font-size: 12px; } .tx-oc em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 22px; font-weight: 300; color: var(--hue); font-variant-numeric: tabular-nums; }
.tx-cards2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; align-items: start; }
.txr-card, .tx-pt, .tx-date { border-radius: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--hue); }
.txr-card > summary, .tx-pt > summary, .tx-date > summary { list-style: none; cursor: pointer; } .txr-card > summary::-webkit-details-marker, .tx-pt > summary::-webkit-details-marker, .tx-date > summary::-webkit-details-marker, .tx-more > summary::-webkit-details-marker { display: none; }
.txr-card > summary { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.tx-fig { font-size: 26px; font-weight: 300; color: color-mix(in srgb, var(--hue) 85%, var(--ink)); font-variant-numeric: tabular-nums; line-height: 1.1; } .tx-fig.long { font-size: 16px; font-weight: 500; }
.txr-card > summary b { font-weight: 500; font-size: 14px; } .txr-card[open] { border-color: var(--hue); }
.txr-card > div, .tx-pt > p, .tx-date > div { padding: 0 16px 14px; font-size: 13px; color: var(--ink-soft, var(--ink)); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .txr-card > div p, .tx-date > div p { margin: 0; }
.tx-pts { display: grid; gap: 8px; margin: 0 0 10px; } .tx-pt > summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; }
.tx-pt > summary::after, .txr-card > summary b::after { content: ""; } .tx-pt > summary::after { content: "▾"; color: var(--ink-faint); font-size: 12px; } .tx-pt[open] > summary::after { content: "▴"; }
.tx-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--hue) 18%, transparent); color: color-mix(in srgb, var(--hue) 85%, var(--ink)); font-weight: 700; font-size: 12.5px; }
.tx-pt > summary b { font-weight: 500; font-size: 14px; } .tx-pt > p { margin: 0; padding-left: 52px; }
.tx-more { margin: 0 0 12px; } .tx-more > summary { list-style: none; cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; padding: 4px 0 8px; } .tx-more > summary::before { content: "＋ "; } .tx-more[open] > summary::before { content: "− "; }
html body #main .tx-h { margin: 14px 0 8px; font-family: var(--z-serif); font-weight: 400; font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.tx-dates { display: grid; gap: 8px; } .tx-date > summary { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; }
.tx-dtile { width: 52px; height: 56px; border-radius: 10px; background: color-mix(in srgb, var(--hue) 14%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; color: color-mix(in srgb, var(--hue) 85%, var(--ink)); }
.tx-dtile small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; } .tx-dtile b { font-size: 22px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
.tx-dmain { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .tx-dmain > b { font-weight: 500; font-size: 14.5px; } .tx-dmain > span { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tx-when2 { font-size: 12px; color: color-mix(in srgb, var(--hue) 80%, var(--ink)); font-weight: 600; } .tx-date > div { padding-left: 84px; }
.tx-block .bov-facts { margin-top: 4px; }
@media (max-width: 760px) { .tx-date > summary { grid-template-columns: 52px minmax(0, 1fr); } .tx-date > summary .linkbtn { grid-column: 2; justify-self: start; } .tx-date > div, .tx-pt > p { padding-left: 16px; } }
@media (max-width: 760px) { .tx-months { font-size: 8px; letter-spacing: 0; } }

/* ======== Design system, portal-wide (Aaron, 28 Oct 2026). Inside every look: each look keeps its background, accent and heroes.
   Refero: Linear (sans, calm surfaces, status tags, collapsible groups), IFTTT (category tiles with white icons), Aboard (section headers).
   Mocks: design-proofs/design-system-2026-10-28. ======== */
/* 1. Sans-serif everywhere — headings included; the look's own sans */
html body { --rb-serif: var(--body); --z-serif: var(--body); --z-mono: var(--body); --serif: var(--body); }
html body #main .ox-num, html body #main .ox-t, html body #main .or-num { font-family: var(--body); }
html body #main h1, html body #main h2, html body #main h3, html body #main h4 { font-family: var(--body); }
/* 2. Section colours: the menu, the page header, the tab underline */
.nav-sec[data-sec="me"] { --sec: #f2b134; } .nav-sec[data-sec="team"] { --sec: #2ec4b6; } .nav-sec[data-sec="sell"] { --sec: #8b6cf6; } .nav-sec[data-sec="promote"] { --sec: #ef5da8; }
.nav-sec[data-sec="make"] { --sec: #ff7a59; } .nav-sec[data-sec="website"] { --sec: #4f8ef7; } .nav-sec[data-sec="thailand"] { --sec: #22c07a; } .nav-sec[data-sec="run"] { --sec: #e3b341; }
html body .nav-sec[data-sec] > .nav-sec-h { color: var(--sec) !important; }
html body .nav-sec[data-sec] .nav-item .nav-ico { color: color-mix(in srgb, var(--sec) 80%, var(--ink)) !important; }
html body .nav-sec[data-sec] .nav-item.active { box-shadow: inset 3px 0 0 var(--sec) !important; }
/* 3. Page header: a section-coloured icon tile, the title, one sentence (More folds the rest) */
html body #main .ds-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; align-items: center; }
html body #main .ds-head .acid-crumb { grid-column: 1 / -1; }
.ds-tile { width: 52px; height: 52px; border-radius: 14px; background: var(--sec); display: grid; place-items: center; color: #fff; flex: none; box-shadow: 0 6px 18px -8px var(--sec); }
.ds-tile svg { width: 26px !important; height: 26px !important; stroke: #fff !important; }
html body #main .ds-head h1 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
html body #main .ds-head .page-sub { margin: 4px 0 0; max-width: 72ch; }
.ds-rest { display: none; } .page-sub.open .ds-rest { display: inline; }
.ds-more { border: 0; background: none; color: var(--sec); font: inherit; font-weight: 600; cursor: pointer; padding: 0 2px; }
/* tabs on every grouped page: the tab's own colour underlines it */
html body #main .gtabs .gtab.on { box-shadow: inset 0 -2px 0 var(--tc, var(--sec)) !important; }
html body #main .ds-head { grid-template-columns: 52px minmax(0, 1fr); } html body #main .ds-head .ds-tile { grid-row: span 2; align-self: start; }
html body #main .ds-head > :not(.ds-tile):not(.acid-crumb) { grid-column: 2; }
/* 4. Text walls fold to two lines with More */
.ds-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ds-clamp.ds-open { display: block; -webkit-line-clamp: unset; }
.ds-mb { display: inline-block; margin: 2px 0 6px; font-size: 12.5px; color: var(--sec, var(--accent)); }
/* 5. Tabs on every page: a line icon in the tab's colour, a colour underline for the open one (no pills) */
html body #main .gtabs:not(.bz-tabs) { gap: 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; padding-bottom: 0; }
html body #main .gtabs:not(.bz-tabs) .gtab { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 9px 12px 11px !important; color: var(--ink-soft, var(--ink)) !important; display: inline-flex; align-items: center; gap: 7px; position: relative; }
html body #main .gtabs:not(.bz-tabs) .gtab .gtab-l { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 14px; }
html body #main .gtabs:not(.bz-tabs) .gtab .gtab-n { background: none !important; color: var(--ink-faint) !important; font-size: 12px; padding: 0; }
html body #main .gtabs:not(.bz-tabs) .gtab.on { color: var(--ink) !important; } html body #main .gtabs:not(.bz-tabs) .gtab.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--tc, var(--sec)); }
html body #main .gtab .gtab-ic { width: 17px; height: 17px; fill: none; stroke: var(--tc, var(--sec)); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* 6. Flags: an ok (green) variant; flag boxes sit flat */
.bz-flag.ok { border: 1px solid color-mix(in srgb, #3fbf6f 60%, transparent); background: color-mix(in srgb, #3fbf6f 7%, transparent); } .bz-flag.ok > summary { color: #3fbf6f; }
html body #main .ds-flagbox { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 10px !important; box-shadow: none !important; }
.ds-flagbox .bz-flag > summary { gap: 8px; } .ds-flagbox .bz-flag { max-width: 560px; }
/* 7. Collapsible groups — a coloured icon, the name, a count and a chevron; rows inside (mock-3-list) */
html body #main .ds-groups { display: flex !important; flex-direction: column; gap: 10px; grid-template-columns: none !important; }
.ds-group { border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--ink) 2%, var(--panel)); overflow: hidden; }
.ds-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .ds-group > summary::-webkit-details-marker { display: none; }
.ds-group > summary b { font-weight: 600; font-size: 15px; } .ds-gn { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ds-gic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--g) 22%, transparent); color: var(--g); flex: none; }
.ds-gic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ds-chev { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg); transition: transform .15s; } .ds-group[open] > summary .ds-chev { transform: rotate(-135deg); }
.ds-grows { border-top: 1px solid var(--line); }
html body #main .ds-groups .cl-row { display: grid !important; grid-template-columns: 40px minmax(180px, 1.6fr) minmax(170px, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; min-height: 0 !important; }
html body #main .ds-groups .cl-row:last-child { border-bottom: 0 !important; } html body #main .ds-groups .cl-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent) !important; }
html body #main .ds-groups .cl-row .art-thumb.ct-ini { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: color-mix(in srgb, var(--g) 30%, var(--panel)) !important; color: var(--ink) !important; font-size: 13px; }
html body #main .ds-groups .cl-row .art-title { font-weight: 600; font-size: 14.5px; text-align: left; }
html body #main .ds-groups .cl-row .art-sub { font-size: 12.5px; color: var(--ink-faint); }
html body #main .ds-groups .cl-row .cl-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } html body #main .ds-groups .cl-row .ct-ltag { font-size: 11.5px; border-radius: 999px; padding: 1px 8px; background: color-mix(in srgb, var(--sec) 16%, transparent); color: color-mix(in srgb, var(--sec) 80%, var(--ink)); border: 0; }
html body #main .ds-groups .cl-row .cl-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; } html body #main .ds-groups .cl-row .cl-meta i { font-style: normal; color: var(--ink-faint); margin-right: 6px; }
html body #main .ds-groups .cl-row .art-acts { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
@media (max-width: 760px) { html body #main .ds-groups .cl-row { grid-template-columns: 36px minmax(0, 1fr); } html body #main .ds-groups .cl-row .cl-meta, html body #main .ds-groups .cl-row .art-acts { grid-column: 2; justify-content: flex-start; } }
/* the page-tip link sits under the title, left */
html body #main .ds-head .tour-link, html body #main .ds-head > a, html body #main .ds-head > button { justify-self: start; }
.ds-fold { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
html body #main .tb-p.on { color: #141210 !important; background: #f1ead8 !important; } html body #main .tb-p.on .art-n { color: #141210 !important; }
html body #main .ds-groups .cl-row { grid-template-areas: none !important; } html body #main .ds-groups .cl-row > * { grid-area: auto !important; }
html body #main .ds-groups .cl-row .cl-meta { display: flex !important; flex-direction: column; border-top: 0 !important; padding-top: 0 !important; }
html body #main .ds-groups .cl-row .art-title { font-family: var(--body) !important; font-weight: 600 !important; font-size: 14.5px !important; }
/* 8. Groups and chips everywhere: a colour per name; group headers get an icon tile and a coloured edge */
html body #main .ds-grp > .art-gh h3 { display: flex; align-items: center; gap: 10px; }
html body #main .ds-grp > .art-gh .ds-gic { width: 28px; height: 28px; border-radius: 8px; }
html body #main .ds-grp { border-left: 3px solid var(--g); padding-left: 10px; border-radius: 4px; }
html body #main .tb-p.ds-chip::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--g); margin-right: 6px; vertical-align: 1px; }
html body #main .tb-p.ds-chip.on { background: color-mix(in srgb, var(--g) 85%, #fff) !important; color: #141210 !important; }
/* Legal in the system (28 Oct 2026): a colour per process on its chip, column and cards */
html body #main .lgb-col[style*="--g"] > h3 { border-top: 3px solid var(--g); padding-top: 10px; } html body #main .lgb-col[style*="--g"] > h3 span { color: color-mix(in srgb, var(--g) 80%, var(--ink)); font-weight: 600; font-size: 18px; }
html body #main .lgb-col[style*="--g"] .lgb-card { border-left: 3px solid var(--g) !important; } html body #main .lgb-col[style*="--g"] .lgb-card .mk-svg { color: var(--g); stroke: var(--g); }
html body #main .lgb-chip.ds-chip::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--g); margin-right: 6px; vertical-align: 1px; }
html body #main .lgb-chip.ds-chip.on { background: color-mix(in srgb, var(--g) 85%, #fff) !important; color: #141210 !important; }
html body #main .lgb-ht h2 { font-size: 22px !important; font-weight: 600 !important; } html body #main .lgb-head img, html body #main .lgb-crest { max-height: 40px; width: auto; }
/* 9. Sub-tabs everywhere: underline in the tab's colour */
html body #main .view-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); background: none !important; padding: 0 !important; border-radius: 0 !important; }
html body #main .view-tabs .view-tab { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 12px 10px !important; color: var(--ink-soft, var(--ink)) !important; font-weight: 500; text-transform: none; letter-spacing: 0; position: relative; }
html body #main .view-tabs .view-tab::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tc, var(--sec)); margin-right: 7px; vertical-align: 1px; }
html body #main .view-tabs .view-tab.on, html body #main .view-tabs .view-tab[aria-selected="true"] { color: var(--ink) !important; } html body #main .view-tabs .view-tab.on::after, html body #main .view-tabs .view-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--tc, var(--sec)); }
/* 10. Section titles: clear headings with a coloured icon tile (no more tiny caps) */
html body #main p.eyebrow.ds-sec { display: flex; align-items: center; gap: 10px; font-family: var(--body) !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; margin: 0 0 12px !important; }
html body #main p.eyebrow.ds-sec .ds-gic { width: 30px; height: 30px; border-radius: 8px; } html body #main p.eyebrow.ds-sec .muted { font-weight: 400; color: var(--ink-faint); font-size: 14px; }
html body #main .card:has(> p.eyebrow.ds-sec:first-child) { border-top: 2px solid color-mix(in srgb, var(--line) 60%, transparent); }
/* Marketing in the system: a colour per plan tile, goals and summaries trimmed */
html body #main .mk-tiles > .mk-tile:nth-child(10n+1) { --g: #8b6cf6; } html body #main .mk-tiles > .mk-tile:nth-child(10n+2) { --g: #4f8ef7; } html body #main .mk-tiles > .mk-tile:nth-child(10n+3) { --g: #2ec4b6; }
html body #main .mk-tiles > .mk-tile:nth-child(10n+4) { --g: #ef5da8; } html body #main .mk-tiles > .mk-tile:nth-child(10n+5) { --g: #f2b134; } html body #main .mk-tiles > .mk-tile:nth-child(10n+6) { --g: #ff7a59; }
html body #main .mk-tiles > .mk-tile:nth-child(10n+7) { --g: #22c07a; } html body #main .mk-tiles > .mk-tile:nth-child(10n+8) { --g: #c48cff; } html body #main .mk-tiles > .mk-tile:nth-child(10n+9) { --g: #4fc3c7; } html body #main .mk-tiles > .mk-tile:nth-child(10n) { --g: #9ad06b; }
html body #main .mk-tiles > .mk-tile:not(.no) { border-top: 3px solid var(--g) !important; } html body #main .mk-tile:not(.no) .zc-num, html body #main .mk-tile:not(.no) .mk-tt svg { color: var(--g) !important; stroke: var(--g) !important; }
html body #main .mk-tile .mk-sum, html body #main .mk-goal .mk-gt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body #main .mk-goals > .mk-goal:nth-child(1) { border-left: 3px solid #8b6cf6; } html body #main .mk-goals > .mk-goal:nth-child(2) { border-left: 3px solid #ef5da8; } html body #main .mk-goals > .mk-goal:nth-child(3) { border-left: 3px solid #2ec4b6; }
/* 11. Every other tab row: the same underline style */
html body #main .ds-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); background: none !important; padding: 0 !important; border-radius: 0 !important; }
html body #main .ds-tabs > button, html body #main .ds-tabs > [role=tab] { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 12px 10px !important; color: var(--ink-soft, var(--ink)) !important; font-weight: 500; text-transform: none; letter-spacing: 0; position: relative; }
html body #main .ds-tabs > button::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tc, var(--sec)); margin-right: 7px; vertical-align: 1px; }
html body #main .ds-tabs > .on, html body #main .ds-tabs > [aria-selected="true"] { color: var(--ink) !important; } html body #main .ds-tabs > .on::after, html body #main .ds-tabs > [aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--tc, var(--sec)); }
/* 12. Category tags in tables */
.ds-tag { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 500; background: color-mix(in srgb, var(--g) 16%, transparent); color: color-mix(in srgb, var(--g) 85%, var(--ink)); white-space: nowrap; }
/* 13. Plain tabs (no icon) get a colour dot, like the view tabs */
html body #main .gtabs:not(.bz-tabs) .gtab.ds-dot .gtab-l::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dsc, var(--sec)); margin-right: 7px; vertical-align: 1px; }
/* Sales › Connections: each connection a small card, the detail folded to two lines */
html body #main .sh-ci { border-left: 3px solid var(--g, var(--sec)); padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--g, var(--sec)) 6%, transparent); margin-bottom: 8px; }
html body #main .sh-ci small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body #main .gtabs:not(.bz-tabs) .gtab.ds-dot.on::after { background: var(--dsc, var(--sec)); }
/* 14. Stat strips: a colour bar and label per status; quick-filter pills get a dot */
html body #main .bz-stat { box-shadow: inset 0 3px 0 var(--g, transparent); }
html body #main .bz-stat small { color: color-mix(in srgb, var(--g, var(--ink-faint)) 80%, var(--ink)); }
html body #main .rl-kf > button::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--g, var(--sec)); margin-right: 6px; vertical-align: 1px; }
html body #main .pp-tile { box-shadow: inset 0 3px 0 var(--g, transparent); }
html body #main .pp-tile small { color: color-mix(in srgb, var(--g, var(--ink-faint)) 80%, var(--ink)); }
/* 15. Trash rows: a colour edge and icon for where each item came from */
html body #main .tr-li.ds-trow { display: flex; align-items: center; gap: 12px; border-left: 3px solid var(--g); padding-left: 12px; }
html body #main .tr-li.ds-trow .pr-lim { flex: 1; min-width: 0; }
html body #main .tr-li.ds-trow .pr-lim small { color: color-mix(in srgb, var(--g) 75%, var(--ink)); }
html body #main .tr-li.ds-trow { flex-wrap: wrap; } html body #main .tr-li.ds-trow .pr-lim { flex: 1 1 220px; }
@media (max-width: 640px) { html body #main .tr-li.ds-trow .tr-acts { flex-basis: 100%; padding-left: 44px; } }
html body #main .tr-li.ds-trow { padding-top: 10px; padding-bottom: 10px; }
/* ==== Business systems, third set (v174, 29 Oct 2026) — built on the design system: colour per kind, icons, folds, dot + word */
.b3-group { margin: 14px 0; }
.b3-group > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 8px 4px; }
.b3-group > summary::-webkit-details-marker { display: none; }
.b3-group > summary b { font-size: 15px; font-weight: 600; }
.b3-n { color: var(--ink-faint); font-size: 13px; }
.b3-group > summary .ds-chev { margin-left: auto; transition: transform .15s; }
.b3-group:not([open]) > summary .ds-chev { transform: rotate(-90deg); }
.b3-gb { padding: 4px 0 6px; }
.b3-list { display: grid; gap: 10px; }
.b3-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px; }
.b3-tag { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 12px; background: color-mix(in srgb, var(--hue, var(--sec)) 15%, transparent); color: color-mix(in srgb, var(--hue, var(--sec)) 80%, var(--ink)); }
.b3-tag.hot { background: color-mix(in srgb, #e3b341 22%, transparent); color: color-mix(in srgb, #e3b341 85%, var(--ink)); }
.b3-note { color: var(--ink-faint); font-size: 13px; }
.b3-bar { display: block; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.b3-bar i { display: block; height: 100%; border-radius: 99px; background: var(--hue); }
/* cards that open the record */
.b3-shoot, .b3-trip, .b3-ex, .b3-goal, .b3-mcard { all: unset; box-sizing: border-box; cursor: pointer; display: grid; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--hue); border-radius: 12px; padding: 12px 14px; }
.b3-shoot, .b3-trip { grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.b3-shoot:hover, .b3-trip:hover, .b3-ex:hover, .b3-goal:hover, .b3-mcard:hover { border-color: color-mix(in srgb, var(--hue) 50%, var(--line)); }
.b3-shoot:focus-visible, .b3-trip:focus-visible, .b3-ex:focus-visible, .b3-goal:focus-visible, .b3-mcard:focus-visible { outline: 2px solid var(--hue); outline-offset: 2px; }
.b3-date { display: grid; place-items: center; border-radius: 10px; padding: 6px 0; background: color-mix(in srgb, var(--hue) 16%, transparent); color: color-mix(in srgb, var(--hue) 80%, var(--ink)); }
.b3-date b { font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; } .b3-date small { font-size: 11px; }
.b3-budget { display: grid; gap: 4px; margin-top: 8px; max-width: 320px; } .b3-budget small { color: var(--ink-faint); font-size: 12px; }
/* payouts */
.b3-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 12px 0; }
.b3-card { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--hue); border-radius: 12px; padding: 14px; display: grid; gap: 6px; }
.b3-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--hue) 22%, transparent); color: var(--hue); font-weight: 700; }
.b3-card small { color: var(--ink-faint); }
.b3-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0; }
.b3-figs span { display: grid; } .b3-figs em { font-style: normal; font-size: 11px; color: var(--ink-faint); } .b3-figs i { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; } .b3-figs i.mid { color: #e3b341; }
.b3-splits { display: flex; flex-wrap: wrap; gap: 6px; }
.b3-chip { all: unset; cursor: pointer; font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.b3-mrow { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; } .b3-mrow em { font-style: normal; color: var(--ink-faint); font-size: 12px; }
/* exhibitions: one line from install to de-install */
.b3-ex { gap: 8px; }
.b3-line { display: flex; flex-wrap: wrap; gap: 0; margin-top: 4px; }
.b3-line > span { position: relative; display: grid; gap: 1px; padding: 14px 16px 0 0; min-width: 96px; }
.b3-line > span i { position: absolute; top: 3px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--hue); }
.b3-line > span::before { content: ""; position: absolute; top: 7px; left: 12px; right: 4px; height: 1px; background: color-mix(in srgb, var(--hue) 45%, transparent); }
.b3-line > span:last-child::before { display: none; }
.b3-line > span.done i { background: color-mix(in srgb, var(--hue) 35%, transparent); }
.b3-line em { font-style: normal; font-size: 11px; color: var(--ink-faint); } .b3-line b { font-size: 13px; font-weight: 500; }
/* made to order: a board */
.b3-board { display: grid; grid-template-columns: repeat(6, minmax(170px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.b3-col h3 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--hue); }
.b3-col h3 i { width: 8px; height: 8px; border-radius: 50%; background: var(--hue); } .b3-col h3 span { margin-left: auto; color: var(--ink-faint); font-weight: 400; }
.b3-col { display: grid; align-content: start; gap: 8px; --hue: inherit; }
.b3-mcard { gap: 3px; } .b3-mcard small { color: var(--ink-faint); font-size: 12px; }
.b3-none { color: var(--ink-faint); margin: 0; }
/* mailouts */
.b3-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 10px; }
.b3-lcard { border: 1px solid var(--line); border-left: 3px solid var(--hue); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; } .b3-lcard small { color: var(--ink-faint); }
/* goals */
.b3-goals { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.b3-goal { position: relative; gap: 7px; border-left-width: 1px; border-top: 3px solid var(--hue); }
.b3-goal > b { font-size: 15px; } .b3-goal small { color: var(--ink-faint); font-size: 12px; }
.b3-goal .b3-tag { justify-self: start; }
.b3-gnum { color: var(--ink-faint); } .b3-gnum i { font-style: normal; color: var(--ink); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.b3-goal .b3-bar { height: 9px; position: relative; }
.b3-tick { position: absolute; width: 2px; height: 15px; background: var(--ink); opacity: .55; margin-top: -12px; margin-left: 14px; }
/* reports */
.b3-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 150px; padding-top: 6px; }
.b3-mo { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; text-align: center; }
.b3-mo i { align-self: end; display: block; border-radius: 5px 5px 2px 2px; background: var(--sec, #4f8ef7); min-height: 0; }
.b3-mo span { font-size: 11px; color: var(--ink-faint); }
.b3-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.b3-bars { display: grid; gap: 8px; }
.b3-brow { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.b3-brow > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .b3-brow b { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .b3-two { grid-template-columns: 1fr; } .b3-board { grid-template-columns: repeat(6, 78vw); } .b3-line > span { min-width: 84px; } }
/* v174 fixes: one-line rows inside the new groups; a blue "for your information" flag; flags sit with a little space */
.b3-gb .bz-row, .bz .b3-srow { grid-template-columns: minmax(0, 1fr) auto auto; border-left: 3px solid var(--hue, transparent); padding-left: 12px; }
.b3-gb .bz-row.b3-mrow { display: flex; }
.bz-flag.blue { border: 1.5px solid #4f8ef7; background: color-mix(in srgb, #4f8ef7 7%, transparent); }
.bz-flag.blue > summary { color: #4f8ef7; }
.bz > .bz-flag { margin: 0 0 10px; }
@media (max-width: 640px) { .b3-gb .bz-row, .bz .b3-srow { grid-template-columns: minmax(0, 1fr) auto; } .b3-gb .bz-row > :last-child { grid-column: 1 / -1; } }
.b3-gbar { position: relative; display: block; } .b3-gbar .b3-tick { position: absolute; top: -3px; width: 2px; height: 15px; margin: 0; background: var(--ink); opacity: .6; border-radius: 1px; }
/* ==== Gallery look (Aaron, 29 Oct 2026: "thats so much easier to navigate and experience … yes go ahead"). Built on NEWS, then
   quietened to the "gallery wall" mocks (design-proofs/hubs-2026-10-29): charcoal page, slate panels separated by lightness, hairline
   borders, one sans-serif, white as the action colour. Each hub owns one hue, used only on its rail icon, the rule under its header
   and the current tab; amber + ◌ stays "needs you". */
body.news.gallery {
  --ink: #fafafa; --ink-2: #ececec; --ink-soft: #b4b4b4; --ink-faint: #8c8c8c; --paper: #181818; --panel: #232323; --panel-2: #2b2b2b;
  --line: rgba(255,255,255,.08); --accent: #fafafa; --accent-ink: #181818; --display: "Inter", system-ui, sans-serif; --body: "Inter", system-ui, sans-serif;
  background: #181818; color: #fafafa;
}
body.gallery h1, body.gallery h2, body.gallery h3, body.gallery .page-head h1 { font-family: "Inter", system-ui, sans-serif !important; letter-spacing: -.02em; font-weight: 600; }
body.gallery .card, body.gallery .bz-card, body.gallery .modal { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
body.gallery .btn.primary { background: #fafafa; color: #181818; border-color: #fafafa; }
body.gallery .nav-item.active { box-shadow: inset 3px 0 0 var(--hub, #fafafa); }
/* the rail */
#hubrail { display: none; }
@media (min-width: 761px) {
  body.gallery .app { grid-template-columns: 68px minmax(0, 1fr); }
  body.gallery .side { width: 68px; padding: 10px 0; background: #121212; border-right: 1px solid rgba(255,255,255,.06); overflow: visible; }
  body.gallery .side > :not(#hubrail) { display: none !important; }
  body.gallery #hubrail { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
  body.gallery .hr-hubs { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
  body.gallery .hr-sp { flex: 1; }
  body.gallery .hr-b { all: unset; box-sizing: border-box; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; position: relative;
    color: color-mix(in srgb, var(--hub, #b4b4b4) 70%, #8c8c8c); }
  body.gallery .hr-b:hover { background: #1f1f1f; color: var(--hub, #fafafa); }
  body.gallery .hr-b.on { background: color-mix(in srgb, var(--hub, #fafafa) 16%, #1b1b1b); color: var(--hub, #fafafa); }
  body.gallery .hr-b.on::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--hub, #fafafa); }
  body.gallery .hr-b:focus-visible { outline: 2px solid var(--hub, #fafafa); outline-offset: 2px; }
  /* the full menu, one tap away on the cog */
  body.gallery.gallery-menu .side { position: fixed; z-index: 60; width: 272px; height: 100vh; left: 0; top: 0; padding: 14px 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.5); overflow-y: auto; }
  body.gallery.gallery-menu .side > :not(#hubrail) { display: revert !important; }
  body.gallery.gallery-menu #hubrail { display: none; }
}
/* tooltips for icon-only buttons */
body.gallery [data-tip] { position: relative; }
body.gallery [data-tip]:hover::after, body.gallery [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; z-index: 80; white-space: nowrap; pointer-events: none;
  background: #fafafa; color: #181818; font: 500 12.5px/1 "Inter", sans-serif; padding: 6px 9px; border-radius: 7px; }
body.gallery .hr-b[data-tip]:hover::after, body.gallery .hr-b[data-tip]:focus-visible::after { left: 54px; top: 50%; transform: translateY(-50%); }
body.gallery .hb-tab[data-tip]:hover::after, body.gallery .hb-tab[data-tip]:focus-visible::after { left: 50%; top: calc(100% + 6px); transform: translateX(-50%); }
/* the hub header and its icon tabs */
.hub-bar { display: none; }
body.gallery .hub-bar { display: block; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 2px solid color-mix(in srgb, var(--hub) 70%, transparent); }
body.gallery .hb-top { display: flex; align-items: center; gap: 14px; }
body.gallery .hb-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--hub) 16%, #1f1f1f); color: var(--hub); flex: none; }
body.gallery .hb-h { font-size: 26px; margin: 0; line-height: 1.1; }
body.gallery .hb-sub { margin: 3px 0 0; color: var(--ink-faint); font-size: 14px; }
body.gallery .hb-sub b { color: var(--ink-soft); font-weight: 500; }
body.gallery .hb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
body.gallery .hb-tab { all: unset; box-sizing: border-box; width: 44px; height: 40px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); border: 1px solid var(--line); background: #1d1d1d; }
body.gallery .hb-tab:hover { color: #fafafa; border-color: rgba(255,255,255,.18); }
body.gallery .hb-tab.on { color: var(--hub); border-color: color-mix(in srgb, var(--hub) 60%, transparent); background: color-mix(in srgb, var(--hub) 14%, #1d1d1d); }
body.gallery .hb-tab:focus-visible { outline: 2px solid var(--hub); outline-offset: 2px; }
/* the page's own header steps back: the hub bar already says where you are */
body.gallery #main:has(> .hub-bar) .ds-head { display: none; }
body.gallery .ds-tile { background: color-mix(in srgb, var(--hub, var(--sec)) 16%, #1f1f1f) !important; color: var(--hub, var(--sec)) !important; }
/* calmer colour in Gallery: stat strips neutral, the one amber still speaks */
body.gallery .bz-stat { box-shadow: none; }
body.gallery .bz-stat small { color: var(--ink-faint); }
body.gallery .bz-stat.mid small { color: #e0a100; }
/* Today */
.gt-date { color: var(--ink-faint); margin: 0 0 14px; font-size: 14px; }
.gt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.gt-left { display: grid; gap: 18px; }
.gt-now { background: var(--panel-2, #2b2b2b); border: 1px solid var(--line); border-top: 3px solid var(--hub); border-radius: 18px; padding: 22px 24px; }
.gt-now.calm { border-top-color: var(--line); }
.gt-k { display: flex; align-items: center; gap: 8px; margin: 0; color: #e0a100; font-size: 13px; font-weight: 600; }
.gt-now.calm .gt-k { color: var(--ink-faint); }
.gt-ring { width: 12px; height: 12px; border-radius: 50%; border: 2px dotted #e0a100; }
.gt-of { color: var(--ink-faint); font-weight: 400; }
.gt-t { font-size: 26px; margin: 8px 0 4px; line-height: 1.2; }
.gt-s { color: var(--ink-soft); margin: 0 0 16px; font-size: 15px; }
.gt-acts { display: flex; align-items: center; gap: 16px; }
.gt-hubs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gt-hub { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid color-mix(in srgb, var(--hub) 75%, transparent); }
.gt-hub:hover { background: var(--panel-2); } .gt-hub:focus-visible { outline: 2px solid var(--hub); outline-offset: 2px; }
.gt-hic { color: var(--hub); margin-bottom: 6px; } .gt-hub b { font-size: 16px; font-weight: 600; } .gt-hub small { color: var(--ink-faint); font-size: 13px; }
.gt-mark { position: absolute; top: 14px; right: 14px; width: 12px; height: 12px; border-radius: 50%; border: 2px dotted #e0a100; }
.gt-soon { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: grid; gap: 6px; }
.gt-soon h3 { margin: 0 0 6px; font-size: 16px; }
.gt-row { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 46px 22px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; }
.gt-row:hover { background: var(--panel-2); } .gt-row:focus-visible { outline: 2px solid var(--hub); }
.gt-dt { display: grid; place-items: center; background: #1d1d1d; border: 1px solid var(--line); border-radius: 10px; padding: 5px 0; } .gt-dt small { font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; } .gt-dt b { font-size: 17px; font-variant-numeric: tabular-nums; }
.gt-ri { color: var(--hub); } .gt-rt { display: grid; } .gt-rt b { font-weight: 500; font-size: 14px; } .gt-rt small { color: var(--ink-faint); font-size: 12px; }
@media (max-width: 1100px) { .gt-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .gt-hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.gallery .hb-tabs { flex-wrap: nowrap; overflow-x: auto; } }
@media (min-width: 761px) { body.gallery .side { display: flex; flex-direction: column; } body.gallery #hubrail { flex: 1; min-height: 0; height: auto; padding-bottom: 6px; } body.gallery .hr-hubs { gap: 4px; margin-top: 10px; } }
/* Gallery: NEWS's lime steps aside — white for actions, the hub's own colour (lightened) for links */
body.news.gallery { --news-link: color-mix(in srgb, var(--hub, #fafafa) 55%, #fafafa); }
body.news.gallery .btn.primary, body.news.gallery .side-add { background: #fafafa !important; border-color: #fafafa !important; color: #181818 !important; }
body.news.gallery .linkbtn { color: var(--news-link) !important; }
body.news.gallery .nav-item.active { box-shadow: inset 3px 0 0 var(--hub, #fafafa); }
body.news.gallery.mbar-one .mb1-search, body.news.gallery .side .side-tools .nav-search { border-color: rgba(255,255,255,.3) !important; }
body.gallery .btn { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; }
html body.gallery #main .bz-stat, html body.gallery #main .pp-tile { box-shadow: none; }
html body.gallery #main .bz-stat small, html body.gallery #main .pp-tile small { color: var(--ink-faint); font-family: "Inter", system-ui, sans-serif; text-transform: none; letter-spacing: 0; font-size: 13px; }
html body.gallery #main .bz-stat.mid small { color: #e0a100; }
html body.gallery #main .bz-stat b { font-family: "Inter", system-ui, sans-serif; font-weight: 600; }