/* Layout: one ranked column under a tab rail. Tab color = priority; rank numerals in pixel type, like the game's UI. */
:root {
  --bg: #F1F3EC;
  --surface: #FAFBF7;
  --ink: #1C221E;
  --muted: #5B655D;
  --line: #D6DCD0;
  --chip: #E5E9DF;
  --accent: #3B6A44;
  --t-now: #B0501B;
  --t-next: #3B6A44;
  --t-later: #46607F;
  --t-ideas: #7A4877;
  --t-done: #737A73;
  --t-whispo: #8A6A12;
  --t-reports: #2A7A86;
  --danger: #A33A2A;
  --own-thebasement: #E5F1E0; --own-thebasement-ink: #2E6A39;
  --own-coopes: #E5EEF3; --own-coopes-ink: #2B5C88;
  --own-xenofluxx: #EEEAF2; --own-xenofluxx-ink: #6A3D8E;
  --own-carrot: #F7EBDE; --own-carrot-ink: #9B4D16;
  --own-acheron: #F5E8E9; --own-acheron-ink: #96344F;
  --own-hybrid: #F4F0D7; --own-hybrid-ink: #735F0E;
  --go: #2E7D45; --info: #2D6CA8; --stop: #B23A2B;
  --f-display: "Silkscreen", ui-monospace, monospace;
  --f-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131713; --surface: #1A1F1A; --ink: #E3E8DE; --muted: #9AA497; --line: #2C342C; --chip: #242B24;
    --accent: #8CC49A; --t-now: #EF9058; --t-next: #8CC49A; --t-later: #92AED2; --t-ideas: #CC99C8; --t-done: #8B938A; --t-whispo: #D9B54A; --t-reports: #6CC4D0; --danger: #F08A78;
    --own-thebasement: #1A251B; --own-thebasement-ink: #A3D6AA; --own-coopes: #182127; --own-coopes-ink: #A0C6EC; --own-xenofluxx: #201D27; --own-xenofluxx-ink: #CFB3EF;
    --own-carrot: #2A1E15; --own-carrot-ink: #F2B688; --own-acheron: #271C20; --own-acheron-ink: #F0A5BA; --own-hybrid: #252415; --own-hybrid-ink: #E3CD78;
    --go: #6CCB8A; --info: #7DB3EA; --stop: #F2826F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131713; --surface: #1A1F1A; --ink: #E3E8DE; --muted: #9AA497; --line: #2C342C; --chip: #242B24;
  --accent: #8CC49A; --t-now: #EF9058; --t-next: #8CC49A; --t-later: #92AED2; --t-ideas: #CC99C8; --t-done: #8B938A; --t-whispo: #D9B54A; --t-reports: #6CC4D0; --danger: #F08A78;
  --own-thebasement: #1A251B; --own-thebasement-ink: #A3D6AA; --own-coopes: #182127; --own-coopes-ink: #A0C6EC; --own-xenofluxx: #201D27; --own-xenofluxx-ink: #CFB3EF;
  --own-carrot: #2A1E15; --own-carrot-ink: #F2B688; --own-acheron: #271C20; --own-acheron-ink: #F0A5BA; --own-hybrid: #252415; --own-hybrid-ink: #E3CD78;
  --go: #6CCB8A; --info: #7DB3EA; --stop: #F2826F;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.5; }
.wrap { max-width: 860px; margin: 0 auto; padding-inline: 16px; padding-block: 28px 64px; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }

header { display: grid; gap: 6px; }
h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 5vw, 30px); letter-spacing: 0.02em; margin: 0; text-wrap: balance; }
.sub { color: var(--muted); margin: 0; max-width: 62ch; }

/* search: one quiet field above the rail; while it has text the list shows matches from every tab, grouped */
.search input { width: 100%; font: inherit; color: var(--ink); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23858C84' stroke-width='1.8'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E") no-repeat 12px center; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px 9px 36px; transition: border-color 0.15s ease; }
.search input::placeholder { color: var(--muted); }
.search input:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rail button.nohit { opacity: 0.45; }
.group { display: grid; gap: 8px; }
.group + .group { margin-top: 18px; }
.grouphead { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c); display: flex; align-items: baseline; gap: 8px; }
.grouphead .n { font-family: var(--f-mono); font-weight: 500; font-size: 12px; color: var(--muted); }

.rail-scroll { overflow-x: auto; margin-inline: -16px; padding-inline: 16px; }
.rail { display: flex; gap: 4px; border-bottom: 1px solid var(--line); min-width: max-content; }
/* dev reports sits apart from the work tabs, pushed to the right edge */
.rail #tab-reports { margin-left: auto; }
.rail button { --c: var(--muted); font: inherit; font-weight: 700; color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 12px 9px; cursor: pointer; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.rail button .n { font-family: var(--f-mono); font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.rail button[aria-selected="true"] { color: var(--c); border-bottom-color: var(--c); }
.rail button:hover { color: var(--c); }
.rail button:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tabhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.blurb { margin: 0; color: var(--muted); }

ol.list { list-style: none; margin: 0 -12px; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.item { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: 4px 14px; padding: 16px 12px; border-bottom: 1px solid var(--line); align-items: start; }
.rank { font-family: var(--f-display); font-size: 22px; line-height: 1.1; color: var(--c, var(--muted)); font-variant-numeric: tabular-nums; padding-top: 1px; }
.side { display: grid; gap: 10px; justify-items: start; align-content: start; }
.reorder { display: grid; gap: 5px; }
/* colored buttons (arrows and item actions): tinted fill, colored border and glyph; --k picks the color */
.arrow, .act { --k: var(--c); display: grid; place-items: center; padding: 0; font: inherit; line-height: 1; color: var(--k); background: color-mix(in srgb, var(--k) 14%, transparent); border: 1px solid color-mix(in srgb, var(--k) 45%, transparent); border-radius: 8px; cursor: pointer; transition: background-color 0.15s ease; }
.arrow:hover:not(:disabled), .act:hover:not(:disabled) { background: color-mix(in srgb, var(--k) 26%, transparent); }
.arrow:disabled, .act:disabled { opacity: 0.3; cursor: default; }
.arrow { width: 34px; height: 28px; font-size: 12px; }
.body { min-width: 0; display: grid; gap: 4px; }
.title { margin: 0; font-size: 16.5px; line-height: 1.3; text-wrap: balance; }
.area { font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: var(--chip); border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.why { margin: 0; }
.step { margin: 0; color: var(--muted); }
.step b { color: var(--ink); font-weight: 700; }
.ref { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; overflow-wrap: anywhere; }
.source { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.source a { color: var(--t-whispo); }

/* owners: each has a pastel tint and an ink; a row with two or more owners takes the hybrid tint, none stays plain */
.o-thebasement { --o-bg: var(--own-thebasement); --o-ink: var(--own-thebasement-ink); }
.o-coopes { --o-bg: var(--own-coopes); --o-ink: var(--own-coopes-ink); }
.o-xenofluxx { --o-bg: var(--own-xenofluxx); --o-ink: var(--own-xenofluxx-ink); }
.o-carrot { --o-bg: var(--own-carrot); --o-ink: var(--own-carrot-ink); }
.o-acheron { --o-bg: var(--own-acheron); --o-ink: var(--own-acheron-ink); }
.o-hybrid { --o-bg: var(--own-hybrid); --o-ink: var(--own-hybrid-ink); }
.item.tinted { background: var(--o-bg); }
.metaline { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.metaline b { font-weight: 700; }
.owner { font-size: 11.5px; letter-spacing: 0.02em; color: var(--o-ink); background: var(--o-bg); border: 1px solid color-mix(in srgb, var(--o-ink) 45%, transparent); border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.owners { border: 0; margin: 0; padding: 0; min-width: 0; }
.owners legend { font-size: 13px; color: var(--muted); padding: 0; margin-bottom: 6px; }
.ownerrow { display: flex; flex-wrap: wrap; gap: 6px; }
.editform .ownerpick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--o-ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px 3px 8px; cursor: pointer; }
.editform .ownerpick input { width: auto; margin: 0; padding: 0; accent-color: var(--o-ink); }
.editform .ownerpick:has(input:checked) { background: var(--o-bg); border-color: color-mix(in srgb, var(--o-ink) 55%, transparent); font-weight: 700; }
.item.done h3 { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--muted); }

.acts { display: grid; gap: 6px; align-content: start; }
.actrow { display: flex; gap: 6px; }
.act { width: 36px; height: 36px; font-size: 16px; }
.act-done { --k: var(--go); }
.act-edit { --k: var(--info); }
.act-remove { --k: var(--stop); }
.act.sure { width: auto; padding: 0 10px; font-size: 13px; font-weight: 700; }
.btn { font: inherit; font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; cursor: pointer; line-height: 1.3; }
.btn:hover:not(:disabled) { border-color: var(--ink); }
.btn:disabled { opacity: 0.4; cursor: default; }
/* Move menu: the same tinted look as the buttons; where appearance: base-select works (Chrome), the open list is styled too */
.move { --k: var(--c); appearance: none; width: 100%; height: 36px; font: inherit; font-size: 13px; font-weight: 700; color: var(--k); background-color: color-mix(in srgb, var(--k) 14%, transparent); border: 1px solid color-mix(in srgb, var(--k) 45%, transparent); border-radius: 8px; padding: 0 28px 0 10px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23858C84' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: background-color 0.15s ease; }
.move:hover:not(:disabled) { background-color: color-mix(in srgb, var(--k) 26%, transparent); }
.move:disabled { opacity: 0.3; cursor: default; }
.move .to-now { --k: var(--t-now); }
.move .to-next { --k: var(--t-next); }
.move .to-later { --k: var(--t-later); }
.move .to-ideas { --k: var(--t-ideas); }
@supports (appearance: base-select) {
  .move, .move::picker(select) { appearance: base-select; }
  .move { background-image: none; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; }
  .move::picker-icon { color: var(--k); transition: rotate 0.15s ease; }
  .move:open::picker-icon { rotate: 180deg; }
  .move::picker(select) { margin-block: 4px; padding: 4px; min-width: anchor-size(width); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
  .move option { color: var(--k); font-size: 13px; font-weight: 700; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
  .move option:hover, .move option:focus-visible { background: color-mix(in srgb, var(--k) 16%, transparent); outline: none; }
  .move option::checkmark { display: none; }
  .move option[value=""] { display: none; }
}
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
select.btn { padding-right: 4px; }

.empty, .notice { color: var(--muted); padding: 22px 0; margin: 0; }
.notice { border: 1px dashed var(--line); border-radius: 8px; padding: 14px 16px; }


.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 9px 14px; border-radius: 8px; font-size: 14px; max-width: calc(100% - 32px); }

@media (max-width: 620px) {
  .item { grid-template-columns: 3rem minmax(0, 1fr); }
  .rank { font-size: 18px; }
  .acts { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; padding-top: 6px; }
  .move { width: auto; }
  }
@media (prefers-reduced-motion: no-preference) {
  .item { transition: background-color 0.2s ease; }
}
/* header actions, item editor, login */
.topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.live { font-family: var(--f-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.live.off { color: var(--danger); }
.editform { display: grid; gap: 8px; }
.editform label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.editform input, .editform textarea, .editform select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; width: 100%; min-width: 0; }
.editform textarea { min-height: 72px; resize: vertical; }
.editform .row { display: flex; gap: 8px; flex-wrap: wrap; }

.login { min-height: 100vh; display: grid; place-items: center; padding-inline: 16px; }
.login form { width: min(360px, 100%); display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px 24px; }
.login h1 { font-size: 24px; }
.login p { margin: 0; color: var(--muted); }
.login label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.login input { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.login .error { color: var(--danger); min-height: 1.5em; font-size: 14px; }
.login .btn.primary { padding: 8px 12px; font-size: 15px; }
.topline .row { display: flex; align-items: center; gap: 10px; }
.topline .btn { white-space: nowrap; }

/* add button: big green plus, drawn with two bars so it stays crisp */
.addbtn { position: relative; flex: none; width: 46px; height: 46px; border: 0; border-radius: 12px; background: var(--accent); cursor: pointer; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28); }
.addbtn::before, .addbtn::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--bg); border-radius: 2px; }
.addbtn::before { width: 22px; height: 4px; }
.addbtn::after { width: 4px; height: 22px; }
.addbtn:hover { filter: brightness(1.08); }
.addbtn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }
.addbtn[hidden] { display: none; }

.adddialog { width: min(520px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: var(--surface); color: var(--ink); }
.adddialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.adddialog h2 { margin: 0 0 4px; font-family: var(--f-display); font-weight: 400; font-size: 18px; }

/* Drag to reorder by the card number */
.rank.grab { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 6px; }
.rank.grab:hover { background: color-mix(in srgb, var(--c, var(--muted)) 12%, transparent); }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
ol.list { position: relative; }
.item.dragging { opacity: 0.55; background: color-mix(in srgb, var(--c, var(--accent)) 10%, transparent); outline: 2px dashed color-mix(in srgb, var(--c, var(--accent)) 70%, transparent); outline-offset: -2px; }
.item.dragging .rank { opacity: 1; color: var(--c, var(--accent)); }
.dropline { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--c, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--accent)) 25%, transparent); pointer-events: none; z-index: 2; }
.dropline::before, .dropline::after { content: ''; position: absolute; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--accent)); }
.dropline::before { left: -2px; }
.dropline::after { right: -2px; }

/* dev reports: one card per page, the whole card is the link */
ol.reports { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.report { --c: var(--t-reports); }
.reportlink { display: grid; gap: 6px; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 10px; padding: 14px 16px; transition: border-color 0.15s ease, background-color 0.15s ease; }
.reportlink:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 6%, var(--surface)); }
.reporthead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.reporthead .open { flex: none; font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--c); white-space: nowrap; }