/* One stylesheet, no framework and no build step.
 *
 * Typographic and colour-led, because there is no character art in the mod to lean on -- the
 * only per-suit image is a 128x128 armor atlas, which is a flat texture sheet rather than a
 * portrait and reads as noise at card size. So the depth here comes from a real type scale,
 * space, and colour that means something: every colour in the state palette below maps to a
 * status or to one of the four plan-vs-reality outcomes, and nothing is coloured decoratively.
 */

:root {
  color-scheme: light dark;

  /* Surfaces, from furthest back to nearest front. */
  --bg:        #f7f8fa;
  --sunk:      #eef0f4;
  --panel:     #ffffff;
  --raised:    #ffffff;
  --line:      #e2e6ec;
  --line-soft: #edf0f4;

  --ink:       #11141a;
  --ink-2:     #4a5462;
  --ink-3:     #7c8798;
  --ink-4:     #a8b1be;

  --accent:      #2563d9;
  --accent-soft: #e8effc;
  --good:        #12784a;
  --good-soft:   #e3f4eb;
  --warn:        #8a5a00;
  --warn-soft:   #fbf0da;
  --bad:         #b4241c;
  --bad-soft:    #fbe9e7;
  --note:        #f7c948;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-2: 0 2px 4px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-3: 0 12px 24px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .06);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0c0e12;
    --sunk:      #101318;
    --panel:     #161a21;
    --raised:    #1c212a;
    --line:      #262d38;
    --line-soft: #1e242d;

    --ink:       #e8ecf2;
    --ink-2:     #a7b1c0;
    --ink-3:     #737e8f;
    --ink-4:     #525c6b;

    --accent:      #6f9dff;
    --accent-soft: #16233d;
    --good:        #4ecb8b;
    --good-soft:   #10281d;
    --warn:        #e0ac4d;
    --warn-soft:   #2a2110;
    --bad:         #ff7a6e;
    --bad-soft:    #2d1614;
    --note:        #f0c33c;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .45);
    --shadow-3: 0 16px 32px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- type scale ---------- */

h1 { font-size: 27px; line-height: 1.2; letter-spacing: -.021em; margin: 0 0 6px;
     font-weight: 640; }
h2 { font-size: 12px; margin: 30px 0 12px; text-transform: uppercase;
     letter-spacing: .07em; color: var(--ink-3); font-weight: 650; }
h3 { font-size: 15px; margin: 0 0 8px; font-weight: 620; letter-spacing: -.006em; }
p  { margin: 0 0 12px; }

.lede { font-size: 15px; color: var(--ink-2); margin: 0 0 26px; }
.faint { color: var(--ink-4); }
.dim { color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- chrome ---------- */

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 22px; height: 54px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.bar .brand { font-weight: 680; letter-spacing: -.02em; margin-right: 6px; white-space: nowrap; }
.bar nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.bar nav a {
  padding: 6px 11px; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 520;
  transition: background .12s, color .12s;
}
.bar nav a:hover { background: var(--sunk); color: var(--ink); text-decoration: none; }
.bar nav a.on { background: var(--accent-soft); color: var(--accent); }
.bar nav a .count {
  margin-left: 6px; font-size: 11px; padding: 0 5px; border-radius: 999px;
  background: var(--bad); color: #fff; font-variant-numeric: tabular-nums;
}

main { padding: 26px 22px 80px; max-width: 1360px; margin: 0 auto; }

/* ---------- surfaces ---------- */

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px; box-shadow: var(--shadow-1);
}
.card + .card { margin-top: 14px; }
.card.flush { padding: 0; overflow: hidden; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }

.empty {
  padding: 26px 18px; text-align: center; color: var(--ink-4);
  border: 1px dashed var(--line); border-radius: var(--r); background: var(--sunk);
}

/* ---------- rows ---------- */

.rows { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
        background: var(--panel); box-shadow: var(--shadow-1); }
.row {
  display: flex; gap: 12px; align-items: center; padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft); transition: background .1s;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--sunk); }
.row .grow { flex: 1; min-width: 0; }
.row .title { display: block; font-weight: 500; }
.row .meta { font-size: 12px; color: var(--ink-3); display: block; margin-top: 1px; }
.row.is-selected { background: var(--accent-soft); }

/* Dragging. The handle is always there but only shows itself on hover, so a list of tasks
   does not look like a control panel until you reach for it. */
.row[draggable="true"] { cursor: grab; }
.row.dragging { opacity: .4; }
.row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.row.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.grip {
  width: 14px; color: var(--ink-4); opacity: 0; cursor: grab; user-select: none;
  transition: opacity .12s; line-height: 1; font-size: 15px; flex: none;
}
.row:hover .grip { opacity: 1; }

/* ---------- status ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; background: var(--sunk); color: var(--ink-3);
  border: 1px solid transparent;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                background: currentColor; flex: none; }
.pill.idea, .pill.triage       { color: var(--ink-3); background: var(--sunk); }
.pill.estimation, .pill.approved { color: var(--accent); background: var(--accent-soft); }
.pill.ready       { color: var(--good); background: var(--good-soft); }
.pill.in_progress { color: var(--accent); background: var(--accent-soft); }
.pill.in_review   { color: var(--warn); background: var(--warn-soft); }
.pill.done        { color: var(--good); background: var(--good-soft); }
.pill.cancelled   { color: var(--ink-4); background: var(--sunk); text-decoration: line-through; }

/* A status you can click straight through, rather than opening a menu for. */
button.pill { cursor: pointer; border: 1px solid transparent; font: inherit;
              font-size: 11.5px; font-weight: 600; }
button.pill:hover { border-color: currentColor; }

/* ---------- the kit ---------- */

.kit { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
       background: var(--panel); box-shadow: var(--shadow-1); }
.kit-head, .slot {
  display: grid; grid-template-columns: 96px minmax(0, 1.1fr) minmax(0, 1fr) 132px;
  gap: 14px; align-items: baseline;
}
.kit-head { padding: 9px 16px; font-size: 10.5px; text-transform: uppercase;
            letter-spacing: .07em; color: var(--ink-4); font-weight: 650;
            background: var(--sunk); border-bottom: 1px solid var(--line); }
.slot { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.slot:last-child { border-bottom: 0; }
.slot:hover { background: var(--sunk); }
.slot .label { color: var(--ink-3); font-weight: 620; font-size: 11px;
               text-transform: uppercase; letter-spacing: .05em; }
.slot .planned { font-weight: 500; }
.slot .shipped { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.slot.st-empty { opacity: .5; }

/* The four outcomes, as a left edge rather than a badge -- a column of colour reads at a
   glance, which is the whole point of putting the two halves side by side. */
.slot { border-left: 3px solid transparent; }
.slot.st-matched      { border-left-color: var(--good); }
.slot.st-drift        { border-left-color: var(--warn); }
.slot.st-planned-only { border-left-color: var(--accent); }
.slot.st-shipped-only { border-left-color: var(--ink-4); }

.note-gap { font-size: 12px; font-weight: 500; }
.st-drift .note-gap { color: var(--warn); }
.st-planned-only .note-gap { color: var(--accent); }
.st-shipped-only .note-gap { color: var(--ink-3); }

/* ---------- facts read from the mod ---------- */

.facts { display: flex; flex-wrap: wrap; gap: 6px; }
.fact {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px; font-weight: 550;
  border: 1px solid var(--line); background: var(--sunk); color: var(--ink-3);
}
.fact.yes { color: var(--good); background: var(--good-soft); border-color: transparent; }
.fact.no  { color: var(--bad); background: var(--bad-soft); border-color: transparent; }
.fact.na  { color: var(--ink-4); }

/* ---------- roadmap ---------- */

.release { margin-bottom: 34px; }
.release > header {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.release h3 { margin: 0; font-size: 19px; letter-spacing: -.015em; }
.release .when { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.release.archived { opacity: .62; }
.release.archived h3 { text-decoration: line-through; text-decoration-color: var(--ink-4); }

.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.char {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 15px; color: inherit; box-shadow: var(--shadow-1);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.char:hover { text-decoration: none; transform: translateY(-2px);
              box-shadow: var(--shadow-2); border-color: var(--ink-4); }
.char .name { font-weight: 640; font-size: 16px; letter-spacing: -.012em; }
.char .sub  { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }

/* A three-part bar: built, drifted, still planned. Reads as a progress bar and is one. */
.meter { display: flex; height: 5px; border-radius: 999px; overflow: hidden;
         background: var(--sunk); margin: 12px 0 7px; }
.meter i { display: block; height: 100%; }
.meter .built   { background: var(--good); }
.meter .drifted { background: var(--warn); }
.meter .todo    { background: var(--accent); opacity: .35; }

/* ---------- notes, in the spirit of Apple Notes ---------- */

.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
              gap: 14px; align-items: start; }
.note {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); overflow: hidden; position: relative;
  transition: box-shadow .14s, transform .14s;
}
.note:hover { box-shadow: var(--shadow-2); }
.note::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--note);
}
.note.team::before { background: var(--accent); }
.note .body {
  padding: 14px 16px 14px 19px; white-space: pre-wrap; word-break: break-word;
  min-height: 70px; outline: none; font-size: 14px; line-height: 1.5;
}
/* The first line is the title, the way a note works. */
.note .body:first-line { font-weight: 640; }
.note .body:focus { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.note footer {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px 10px 19px;
  border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--ink-4);
}
.note footer .spacer { flex: 1; }
.note.converted { opacity: .55; }
.note .saving { color: var(--accent); }

.note-composer {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel);
  box-shadow: var(--shadow-1); padding: 4px 4px 10px; margin-bottom: 20px;
}
.note-composer textarea {
  border: 0; background: transparent; width: 100%; padding: 13px 15px; resize: vertical;
  min-height: 74px; font: inherit; color: var(--ink); outline: none;
}
.note-composer .actions { padding: 0 12px; }

/* ---------- tables ---------- */

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; padding: 9px 14px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-4); font-weight: 650;
  background: var(--sunk); border-bottom: 1px solid var(--line);
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
           vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--sunk); }
tbody tr.is-selected { background: var(--accent-soft); }

/* ---------- controls ---------- */

input[type=text], input[type=date], input[type=password], textarea, select {
  font: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 10px;
  max-width: 100%; transition: border-color .12s, box-shadow .12s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
textarea { width: 100%; resize: vertical; min-height: 76px; line-height: 1.5; }
input[type=text] { width: 100%; }
select { padding: 6px 8px; }

button {
  font: inherit; font-weight: 550; cursor: pointer; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 7px 13px; transition: background .12s, border-color .12s, transform .06s;
}
button:hover { background: var(--sunk); border-color: var(--ink-4); }
button:active { transform: translateY(1px); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { filter: brightness(1.08); }
button.quiet { border-color: transparent; background: transparent; color: var(--ink-3); }
button.quiet:hover { background: var(--sunk); color: var(--ink); }
button.danger { color: var(--bad); border-color: var(--line); }
button.danger:hover { background: var(--bad-soft); border-color: var(--bad); }

form.inline { display: inline-flex; gap: 7px; align-items: center; margin: 0; }
.stack { display: flex; flex-direction: column; gap: 11px; }
.actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
label.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px;
              color: var(--ink-3); font-weight: 550; }

input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent);
                       cursor: pointer; flex: none; }

/* ---------- the bulk action bar ---------- */

.bulkbar {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 130%);
  display: flex; align-items: center; gap: 12px; z-index: 60;
  background: var(--raised); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-3); padding: 9px 10px 9px 18px;
  transition: transform .2s cubic-bezier(.2, .8, .3, 1);
}
.bulkbar.up { transform: translate(-50%, 0); }
.bulkbar .n { font-weight: 640; white-space: nowrap; }
.bulkbar form { display: flex; gap: 7px; align-items: center; margin: 0; }
.bulkbar select { border-radius: 999px; }
.bulkbar button { border-radius: 999px; }

/* ---------- misc ---------- */

code { font-family: var(--mono); font-size: 12.5px; background: var(--sunk);
       padding: 1.5px 6px; border-radius: 5px; color: var(--ink-2); }
.login { max-width: 350px; margin: 14vh auto; }
.error { color: var(--bad); }
.origin { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
          font-weight: 650; color: var(--ink-4); }
.origin.qa_report, .origin.crash { color: var(--bad); }

hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }