/* Graph My Story: watercolour on paper. Tokens follow the visual specification. */

@font-face { font-family: "Caveat Brush"; src: url("../fonts/CaveatBrush.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/Caveat.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/CourierPrime.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/CourierPrime-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #F5F0E6; --paper-2: #EDE5D4; --card: #FBF8F1;
  --ink: #2B2A5C; --ink-soft: #615E8A; --rule: #D9CFBB; --title: #C8402F; --on-paint: #2B2A5C;
  --p-indigo: #3B4A9E; --p-violet: #7A62B8; --p-lilac: #B3A3DD; --p-sky: #6FBCDB; --p-pink: #EE97A9;
  --p-red: #E04E3C; --p-mustard: #EDB743; --p-tangerine: #EF9440; --p-sage: #93B78A; --p-sand: #E6D3A0;
  --good: #3F7D4E; --warn: #B4521F;
  --wash-op: .55; --blend: multiply; --shadow: rgba(30, 25, 60, .35);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .22 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --f-display: "Caveat Brush", "Segoe Print", "Bradley Hand", cursive;
  --f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --f-ui: "Nunito", "Avenir Next", system-ui, sans-serif;
  --f-mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #1C1B36; --paper-2: #25244A; --card: #2B2A55;
  --ink: #F1EADB; --ink-soft: #B4AFD0; --rule: #3E3C6E; --title: #F2846C; --on-paint: #FBF6EA;
  --p-indigo: #8C9AE8; --p-violet: #A891E6; --p-lilac: #C9BDF0; --p-sky: #7FCDEA; --p-pink: #F4A7B7;
  --p-red: #F06A57; --p-mustard: #F2C55E; --p-tangerine: #F4A55E; --p-sage: #A7CB9C; --p-sand: #D9C68F;
  --good: #8FD3A0; --warn: #F5A66E;
  --wash-op: .74; --blend: normal; --shadow: rgba(0, 0, 0, .55);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .78 0 0 0 0 .95 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --paper: #1C1B36; --paper-2: #25244A; --card: #2B2A55;
  --ink: #F1EADB; --ink-soft: #B4AFD0; --rule: #3E3C6E; --title: #F2846C; --on-paint: #FBF6EA;
  --p-indigo: #8C9AE8; --p-violet: #A891E6; --p-lilac: #C9BDF0; --p-sky: #7FCDEA; --p-pink: #F4A7B7;
  --p-red: #F06A57; --p-mustard: #F2C55E; --p-tangerine: #F4A55E; --p-sage: #A7CB9C; --p-sand: #D9C68F;
  --good: #8FD3A0; --warn: #F5A66E;
  --wash-op: .74; --blend: normal; --shadow: rgba(0, 0, 0, .55);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .78 0 0 0 0 .95 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* resolved story colours: each painted element carries --cl/--cn (fill) and --tl/--tn (text) */
.pc { --c: var(--cl); --t: var(--tl); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pc { --c: var(--cn); --t: var(--tn); } }
:root[data-theme="dark"] .pc { --c: var(--cn); --t: var(--tn); }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--paper); background-image: var(--grain);
  color: var(--ink); font-family: var(--f-ui); font-size: 16px; line-height: 1.55;
  min-height: 100vh;
}
h1, h2, h3 { text-wrap: balance; margin: 0; }
h1 { font-size: 2rem; }
p { margin: 0; }
a { color: inherit; text-decoration-color: var(--title); text-underline-offset: 3px; }
code, .mono { font-family: var(--f-mono); }
.hand { font-family: var(--f-hand); font-size: 1.3rem; line-height: 1.2; }
.hand-title { font-family: var(--f-display); font-weight: 400; color: var(--title); font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; }
.eyebrow { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.paint { mix-blend-mode: var(--blend); }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--title); outline-offset: 2px; }

/* header */
.site-header { border-bottom: 1.5px dashed var(--rule); }
.header-inner { max-width: 1400px; margin: 0 auto; padding: 10px 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
.brand { font-family: var(--f-display); font-size: 1.8rem; color: var(--title); text-decoration: none; line-height: 1; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-weight: 700; font-size: .92rem; }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
.nav-profile { display: inline-flex; align-items: center; gap: 8px; }
.inline-form { display: inline; margin: 0; }

.avatar { border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; }
.avatar-sm { width: 26px; height: 26px; font-size: .8rem; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.8rem; }
.avatar-fallback { background: color-mix(in srgb, var(--p-mustard) 55%, transparent); color: var(--ink); font-weight: 800; }

/* layout */
.content { max-width: 1120px; margin: 0 auto; padding: 28px 20px 80px; }
.content-narrow { max-width: 640px; margin: 0 auto; padding: 28px 20px 80px; }
.content-wide { max-width: none; margin: 0; padding: 14px 20px 80px; }
.page-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; justify-content: space-between; margin-bottom: 24px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 480px) { .row2, .row3 { grid-template-columns: 1fr; } }

/* flashes */
.flashes { display: grid; gap: 8px; margin-bottom: 18px; }
.flash { padding: 10px 14px; border-radius: 6px; border: 1.5px solid var(--rule); background: var(--card); font-weight: 600; }
.flash-success { border-color: var(--good); }
.flash-error { border-color: var(--title); color: var(--title); }

/* buttons */
.btn { font: 800 .9rem var(--f-ui); border-radius: 6px; padding: 8px 16px; cursor: pointer; border: 1.5px solid var(--ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-secondary { background: transparent; color: var(--ink); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink); padding: 6px 8px; font-weight: 700; }
.btn-ghost:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-sm { padding: 5px 11px; font-size: .82rem; }
.btn-danger-text, .btn.danger { color: var(--title); background: none; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; padding-inline: 4px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.iconbtn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 800 .95rem var(--f-ui); cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.seg { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; }
.seg button { font: 700 .82rem var(--f-ui); color: var(--ink); background: transparent; border: 0; padding: 5px 12px; cursor: pointer; }
.seg button + button { border-left: 1.5px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button[disabled] { opacity: .45; cursor: not-allowed; }

/* forms */
.form-card { background: var(--card); border: 1.5px solid var(--rule); border-radius: 8px; padding: 26px; display: grid; gap: 16px; }
.form-card form { display: grid; gap: 14px; }
.form-card h1:not(.hand-title) { font-family: var(--f-display); font-weight: 400; font-size: 2.2rem; color: var(--title); }
.form-foot { font-size: .9rem; color: var(--ink-soft); }
fieldset { border: 0; border-top: 1.5px solid var(--ink); margin: 6px 0 0; padding: 14px 0 0; display: grid; gap: 12px; min-width: 0; }
legend { font-family: var(--f-display); font-size: 1.5rem; padding-right: 10px; }
.step { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 800 .9rem var(--f-ui); margin-right: 6px; vertical-align: 3px; }
.field { display: grid; gap: 4px; min-width: 0; }
.field label, .field .label { font-weight: 800; font-size: .85rem; }
.field input:not([type=checkbox]):not([type=radio]):not([type=range]), .field textarea, .field select, .input {
  font: 400 .95rem var(--f-ui); color: var(--ink); background: var(--paper); border: 1.5px solid var(--rule);
  border-radius: 5px; padding: 7px 10px; width: 100%; min-width: 0;
}
.field input.mono, .field textarea.mono, .input.mono { font-family: var(--f-mono); }
.field textarea { resize: vertical; min-height: 70px; }
.field-hint { font-size: .8rem; color: var(--ink-soft); }
.field-error { font-size: .84rem; color: var(--title); font-weight: 700; }
.field-check { display: flex; gap: 8px; align-items: center; }
.field-check label { font-weight: 700; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.radio-row label { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: .9rem; }

/* cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.card { background: var(--card); border: 1.5px solid var(--rule); border-radius: 8px; padding: 18px; display: grid; gap: 8px; align-content: start; }
.story-card .cover { width: calc(100% + 36px); margin: -18px -18px 4px; height: 140px; object-fit: cover; border-radius: 7px 7px 0 0; }
.cover-preview { width: 120px; height: 80px; object-fit: cover; border-radius: 5px; border: 1px solid var(--rule); }
.thumb { display: grid; gap: 2px; justify-items: center; }
.thumb button { font: 700 .72rem var(--f-ui); color: var(--title); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; }
.story-card h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.8rem; line-height: 1.05; }
.story-card h3 a { text-decoration: none; }
.story-card h3 a:hover { text-decoration: underline; }
.meta { font-size: .82rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.meta-owner { display: inline-flex; gap: 6px; align-items: center; }
.desc { font-size: .92rem; }
.card-actions { display: flex; gap: 14px; align-items: center; font-weight: 700; font-size: .9rem; margin-top: 4px; }
.badge { font: 700 .72rem var(--f-mono); text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--rule); }
.badge-public { border-color: var(--good); color: var(--good); }
.empty-state { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 40px 16px; }
.empty-state h2 { font-family: var(--f-display); font-weight: 400; font-size: 2rem; }
.error-code { font: 700 2.6rem var(--f-mono); color: var(--ink-soft); }

/* landing */
.hero { position: relative; overflow: clip; padding: 70px 0 30px; display: grid; gap: 18px; justify-items: start; }
.hero .swoosh { position: absolute; inset: 0 0 auto 0; width: 100%; height: 150px; pointer-events: none; }
.hero h1 { position: relative; font-size: clamp(3rem, 9vw, 5.6rem); transform: rotate(-1.2deg); }
.hero-sub { font-size: 1.15rem; max-width: 60ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 700 .8rem var(--f-ui); padding: 3px 11px; color: var(--ink); background: color-mix(in srgb, var(--c) 45%, transparent); border-radius: 12px 9px 13px 8px / 9px 12px 8px 11px; border: 0; }
button.chip { cursor: pointer; }
.chip[aria-pressed="true"] { outline: 2px solid var(--ink); }
.keychip { display: inline-flex; align-items: stretch; border: 1.5px solid var(--rule); border-radius: 999px; overflow: hidden; font: 700 .82rem var(--f-ui); background: transparent; }
.keychip .sw { width: 26px; border: 0; padding: 0; background: color-mix(in srgb, var(--c) 72%, transparent); cursor: pointer; }
.keychip .sw:disabled { cursor: default; }
.keychip .nm { border: 0; background: transparent; color: var(--ink); padding: 4px 11px 4px 9px; cursor: pointer; font: inherit; }
.keychip.on { border-color: var(--ink); }
.keychip.on .nm { background: color-mix(in srgb, var(--c) 22%, transparent); }
.keychip.dim { opacity: .5; }

/* ------------------------------------------------------------- board page */
.story-head { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: end; justify-content: space-between; margin-bottom: 10px; }
.story-head h1 { font-family: var(--f-display); font-weight: 400; color: var(--title); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; }
.story-head .meta { margin-top: 4px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding-block: 8px; border-block: 1.5px dashed var(--rule); margin-bottom: 10px; }
.toolbar .grow { flex: 1; }
.toolbar .lbl { font-family: var(--f-hand); font-size: 1.2rem; color: var(--ink-soft); }
.zoom { display: inline-flex; align-items: center; gap: 6px; }
.zoom input[type=range] { width: 120px; accent-color: var(--title); }
.menu { position: relative; display: inline-block; }
.menu-list { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 210px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 8px; padding: 6px; display: grid; box-shadow: 0 12px 26px -16px var(--shadow); }
.menu-list.right { left: auto; right: 0; }
.menu-list button, .menu-list a { text-align: left; font: 700 .88rem var(--f-ui); color: var(--ink); background: none; border: 0; padding: 7px 10px; border-radius: 5px; cursor: pointer; text-decoration: none; }
.menu-list button:hover, .menu-list a:hover, .menu-list button:focus-visible { background: var(--paper-2); }
.menu-list hr { border: 0; border-top: 1px dashed var(--rule); margin: 4px 0; width: 100%; }
.keybar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 10px; min-height: 30px; }
.keybar .lbl { font-family: var(--f-hand); font-size: 1.2rem; color: var(--ink-soft); }

.board-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.board-wrap.with-side { grid-template-columns: minmax(0, 1fr) 380px; }
@media (max-width: 900px) { .board-wrap.with-side { grid-template-columns: minmax(0, 1fr); } }
.board { background: var(--card); border: 1.5px solid var(--rule); border-radius: 8px; padding: 8px 10px 12px; position: relative; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.board.panning { cursor: grabbing; }
.board.moving [filter] { filter: none; }
.panel { display: grid; grid-template-columns: 128px minmax(0, 1fr); border-top: 1.5px dashed var(--rule); }
.panel:first-child { border-top: 0; }
.panel-label { padding: 10px 8px 8px 2px; display: grid; gap: 6px; align-content: start; }
.panel-label .pname { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.05; color: var(--ink-soft); overflow-wrap: anywhere; }
.panel-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.panel-tools .iconbtn { width: 26px; height: 26px; font-size: .85rem; }
.panel-body { min-width: 0; position: relative; }
.panel-body svg { display: block; width: 100%; overflow: visible; }
.panel-body svg text { fill: var(--ink); }
.hidden-panels { font-size: .85rem; color: var(--ink-soft); padding: 8px 2px 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; border-top: 1.5px dashed var(--rule); }
.panel-sub { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 0 2px; }
.panel-note { font-family: var(--f-hand); font-size: 1.2rem; color: var(--ink-soft); padding: 18px 6px; }
.warnline { font-size: .8rem; color: var(--warn); font-weight: 700; }

/* svg element states */
.hit { cursor: pointer; }
.board.edit .plot-hit { cursor: crosshair; }
.dimmed { opacity: .18; }
.pt { cursor: grab; }
.pt:focus { outline: none; }
.pt:focus-visible .pt-ring, .pt.sel .pt-ring { stroke: var(--ink); stroke-width: 2; }
.hl-band { fill: var(--p-lilac); opacity: .3; pointer-events: none; }
.thread { transition: opacity .15s; }
.thread.faint { opacity: .15 !important; }
.lbl-hidden { opacity: 0; }
.hoverable:hover .lbl-hidden, .lbl-hidden.show { opacity: 1; }

/* detail card */
.detail { position: absolute; z-index: 60; width: min(360px, calc(100% - 20px)); }
.note { position: relative; background: var(--card); padding: 26px 20px 18px; box-shadow: 0 1px 0 var(--rule), 0 14px 30px -14px var(--shadow); transform: rotate(-.8deg); display: grid; gap: 9px; border: 1px solid var(--rule); }
.note::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; transform: translateX(-50%) rotate(2deg); background: color-mix(in srgb, var(--p-sand) 70%, transparent); mix-blend-mode: var(--blend); }
.note .t { font-family: var(--f-display); font-size: 2rem; line-height: 1; color: var(--title); overflow-wrap: anywhere; }
.note .meta { font-family: var(--f-mono); font-size: .82rem; }
.note p { font-size: .94rem; white-space: pre-line; }
.note .vals { font-family: var(--f-mono); font-size: .8rem; display: flex; flex-wrap: wrap; gap: 4px 14px; border-top: 1px dashed var(--rule); padding-top: 8px; }
.note .close { position: absolute; top: 6px; right: 8px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; cursor: zoom-in; border: 1px solid var(--rule); }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(20, 18, 40, .82); display: grid; place-items: center; padding: 20px; }
.lightbox img { max-width: 100%; max-height: 88vh; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.lightbox p { color: #F5F0E6; text-align: center; margin-top: 8px; }

/* popovers */
.pop { position: absolute; z-index: 50; background: var(--card); border: 1.5px solid var(--ink); border-radius: 8px; padding: 14px; display: grid; gap: 10px; box-shadow: 0 12px 26px -16px var(--shadow); width: 270px; }
.pop .head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pop .head b { font-family: var(--f-display); font-weight: 400; font-size: 1.4rem; }
.pigments { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pig { aspect-ratio: 1; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 50%; display: grid; place-items: center; }
.pig span { width: 82%; height: 70%; border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%; background: color-mix(in srgb, var(--c) 82%, transparent); }
.pig[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 1px; }
.preview2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.preview2 div { border-radius: 5px; padding: 6px 8px; font: 700 .74rem var(--f-mono); display: flex; align-items: center; gap: 6px; }
.preview2 .pv-paper { background: #F5F0E6; color: #2B2A5C; border: 1px solid #D9CFBB; }
.preview2 .pv-night { background: #1C1B36; color: #F1EADB; }
.preview2 .sw { width: 24px; height: 12px; border-radius: 3px; flex: none; }
.warn { font-size: .8rem; color: var(--warn); font-weight: 700; }

/* side panel */
.side { background: var(--card); border: 1.5px solid var(--ink); border-radius: 8px; padding: 16px; display: grid; gap: 14px; position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow-y: auto; }
.side h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; line-height: 1.05; }
.side .side-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.side form { display: grid; gap: 12px; }
.side .group-title { font: 700 .74rem var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); margin-top: 4px; }
.listrow { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dashed var(--rule); font-size: .9rem; }
.listrow .sw { width: 24px; height: 18px; border-radius: 9px 6px 10px 5px / 6px 9px 5px 8px; background: color-mix(in srgb, var(--c) 75%, transparent); border: 0; cursor: pointer; padding: 0; }
.listrow .sw:disabled { cursor: default; }
.listrow small { font-family: var(--f-mono); color: var(--ink-soft); font-size: .76rem; }
.listrow .follow { color: var(--ink-soft); font-size: .8rem; font-style: italic; }
.listrow .tools { display: flex; gap: 2px; align-items: center; }
.listrow .tools .iconbtn { width: 24px; height: 24px; font-size: .75rem; }
.mlist .listrow { grid-template-columns: 26px 1fr auto; }
.mlist .rank { font: 700 .78rem var(--f-mono); color: var(--ink-soft); text-align: right; }
.mlist .title { min-width: 0; overflow-wrap: anywhere; }
.mlist .title small { display: block; }
.conflict { color: var(--warn); font-weight: 800; }
.tagpick { display: flex; flex-wrap: wrap; gap: 6px; }
.tagpick button { font: 700 .8rem var(--f-ui); border-radius: 999px; padding: 3px 10px; cursor: pointer; border: 1.5px solid var(--rule); background: transparent; color: var(--ink); }
.tagpick button[aria-pressed="true"] { border-color: var(--ink); background: color-mix(in srgb, var(--c) 40%, transparent); }
.tagpick .order { font-family: var(--f-mono); font-size: .7rem; margin-right: 4px; }
.colourfield { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.colourfield .swbtn { width: 46px; height: 28px; border-radius: 12px 9px 13px 8px / 9px 12px 8px 11px; border: 1.5px solid var(--ink); background: color-mix(in srgb, var(--c) 80%, transparent); cursor: pointer; }
.colourfield .swbtn.none { background: repeating-linear-gradient(45deg, transparent 0 4px, var(--rule) 4px 6px); }
.from-tag { font-size: .85rem; background: var(--paper-2); border-radius: 6px; padding: 8px 10px; display: grid; gap: 6px; }
.counter { font: 400 .75rem var(--f-mono); color: var(--ink-soft); justify-self: end; }

/* points table */
.ptable-wrap { overflow-x: auto; padding: 4px 0 8px; }
.ptable { border-collapse: collapse; font-size: .86rem; min-width: 420px; }
.ptable th, .ptable td { padding: 4px 8px; border-bottom: 1px dashed var(--rule); text-align: left; }
.ptable th { font: 700 .72rem var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.ptable input { font: 400 .85rem var(--f-mono); color: var(--ink); background: var(--paper); border: 1.5px solid var(--rule); border-radius: 4px; padding: 3px 6px; width: 100%; min-width: 60px; }
.ptable td.note input { font-family: var(--f-ui); min-width: 160px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; font-weight: 700; box-shadow: 0 10px 24px -10px var(--shadow); max-width: calc(100% - 32px); }
.toast.err { background: var(--title); color: #fff; }

@keyframes ring { from { r: 5; opacity: .7; } to { r: 16; opacity: 0; } }
.fresh-ring { animation: ring .7s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
  .fresh-ring { animation: none; opacity: 0; }
  * { transition: none !important; }
}
@media (max-width: 640px) {
  .panel { grid-template-columns: 84px minmax(0, 1fr); }
  .panel-label .pname { font-size: 1rem; }
}