/* HWise — tokens lifted directly from design/project/HWise.dc.html.
   Two axes: urgency is colour and position, certainty is mark and word.
   Neither borrows the other's language. */

:root {
  --paper:  oklch(0.955 0.008 252);
  --card:   #fff;
  --ink:    oklch(0.25 0.02 258);
  --ink-2:  oklch(0.48 0.015 258);
  --ink-3:  oklch(0.70 0.012 258);
  --rule:   oklch(0.90 0.012 255);
  --rule-2: oklch(0.93 0.01 255);
  --hair:   oklch(0.95 0.008 255);

  /* Axis A — urgency. Closed is grey on purpose: it is off the ramp, not the
     hot end of it, because nothing in the app can change it. */
  --comfortable: oklch(0.66 0.02 255);
  --approaching: oklch(0.72 0.13 42);
  --urgent:      oklch(0.58 0.19 18);
  --past_due:    oklch(0.50 0.17 352);
  --closed:      oklch(0.80 0.008 255);
  --backlog:     oklch(0.80 0.008 255);
  --past_due_stale: oklch(0.50 0.17 352);
  --resolved:    oklch(0.66 0.02 255);

  --urgent-text:      oklch(0.52 0.19 18);
  --approaching-text: oklch(0.50 0.12 42);
  --past_due-text:    oklch(0.45 0.15 352);
  --section-urgent:      oklch(0.50 0.16 18);
  --section-approaching: oklch(0.55 0.12 42);
  --section-quiet:       oklch(0.55 0.015 258);

  --ok:    oklch(0.62 0.13 155);
  --warn-bg:     oklch(0.97 0.03 60);
  --warn-border: oklch(0.90 0.03 60);
  --warn-text:   oklch(0.45 0.09 55);
  --dark:  oklch(0.24 0.03 258);

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

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}

a { color: oklch(0.50 0.17 352); text-decoration: none; }
a:hover { color: oklch(0.40 0.15 352); text-decoration: underline; }

.wrap { max-width: 1320px; margin: 0 auto; }
.mono { font-family: var(--mono); }

.label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: oklch(0.64 0.012 258);
}

/* ---------------------------------------------------------------- chrome */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; background: var(--card);
  border-bottom: 1px solid var(--rule-2); flex-wrap: wrap;
}
.brand { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.nav { display: flex; gap: 16px; font-family: var(--mono); font-size: 13px; }
.nav a { color: oklch(0.60 0.012 258); text-decoration: none; }
.nav a.on { color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }

.sync {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.dot.bad { background: var(--urgent); }

.token-chip {
  font-family: var(--mono); font-size: 12px; color: var(--warn-text);
  border: 1px solid var(--warn-border); background: var(--warn-bg);
  padding: 4px 8px; border-radius: 2px;
}

.banner {
  padding: 11px 16px; background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-border);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.45;
  color: var(--warn-text);
}
.banner a { color: var(--warn-text); text-decoration: underline; }

.flash { padding: 11px 16px; font-size: 15px; border-bottom: 1px solid var(--rule-2); }
.flash.error   { background: oklch(0.97 0.04 18); color: oklch(0.42 0.14 18); }
.flash.success { background: oklch(0.96 0.05 155); color: oklch(0.36 0.10 155); }
.flash.info    { background: var(--card); color: var(--ink-2); }

/* --------------------------------------------------------------- summary */
.summary {
  padding: 20px 16px 18px; background: var(--card);
  border-bottom: 1px solid var(--rule-2);
}
.summary-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.headline {
  font-size: 20.5px; font-weight: 600; letter-spacing: -0.015em;
  line-height: 1.3; margin: 0 0 10px;
}
.assessment {
  font-size: 16px; line-height: 1.55; color: oklch(0.35 0.018 258);
  text-wrap: pretty; margin: 0; max-width: 62ch;
}
.actions {
  margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--rule-2);
  display: flex; flex-direction: column; gap: 9px;
}
.action { display: flex; gap: 10px; align-items: baseline; }
.action-n { font-family: var(--mono); font-size: 13px; color: oklch(0.64 0.012 258); flex: none; }
.action-t { font-size: 15.5px; line-height: 1.45; }
.patterns {
  margin-top: 14px; padding: 11px 12px; background: oklch(0.975 0.006 252);
  border: 1px solid var(--rule-2); font-size: 14.5px; line-height: 1.5;
  color: var(--ink-2); text-wrap: pretty;
}
.degraded {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 10px;
}

/* Spans both columns, below the summary. Below, because the summary describes
   every course and a control above it would imply it narrowed that too. Full
   width, because it narrows the certainty rail as well as the list — and
   because sitting inside one column pushed that column's contents down out of
   line with the other. */
.list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 18px 16px 0;
}
.list-count { white-space: nowrap; }

/* The two columns start on the same line, and the gap above them belongs to
   the grid rather than to whichever child happens to come first. */
.cols > div > .section:first-child { padding-top: 0; }
.cols .rail-block > .card:first-child { margin-top: 0; }
.course-filter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0;
}
.course-filter select {
  width: auto; min-width: 190px; padding: 7px 10px; font-size: 14.5px;
  font-family: var(--mono); background: var(--card);
}
.course-filter a {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
}

/* --------------------------------------------------------------- sections */
.section { padding: 18px 16px 6px; display: flex; flex-direction: column; gap: 9px; }
.section-head { display: flex; align-items: center; gap: 9px; }
.section-title {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; white-space: nowrap;
}
.section-rule { flex: 1; height: 1px; background: var(--rule); }
.section-hint { font-family: var(--mono); font-size: 12px; color: oklch(0.64 0.012 258); }

/* -------------------------------------------------------------------- row */
.row {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px;
  background: var(--card); border: 1px solid var(--rule);
  border-left: 4px solid var(--comfortable); border-radius: 2px;
  color: inherit;
  position: relative;          /* anchors the stretched title link below */
}
.row:hover { background: oklch(0.985 0.004 255); }
.title-link { color: inherit; text-decoration: none; }
.title-link:hover { color: inherit; text-decoration: underline; }

/* The whole card opens the item page, without the card being one big anchor.
   A single real link — the title — stretches its hit area over the card via a
   pseudo-element, so there is still exactly one anchor here as far as the HTML
   is concerned. Keyboard users tab to the title as normal, and screen readers
   announce the title rather than the whole card as the link text.

   The title must NOT be positioned: `inset: 0` resolves against the nearest
   positioned ancestor, so making the link relative would shrink the hit area
   back down to the title itself. `.row` is that ancestor, deliberately. */
.row .title-link::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.row:has(.title-link) { cursor: pointer; }

/* Only the card's own links are raised above the overlay. Raising anything
   else — the due-date column, say — would punch a hole in the click target
   without providing a link to land on. */
.row-links a { position: relative; z-index: 2; }

/* Actions live on the card so the common ones need no click to reach. */
.row-links {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 7px;
  font-family: var(--mono); font-size: 12.5px;
}
.row-links a { color: oklch(0.45 0.015 258); text-decoration: none; }
.row-links a:hover { color: oklch(0.25 0.02 258); text-decoration: underline; }
.row.is-closed { background: oklch(0.965 0.004 255); }

.mark {
  width: 30px; height: 30px; flex: none; object-fit: contain;
  mix-blend-mode: multiply; margin-top: -2px;
}
.mark.dim { opacity: 0.42; filter: grayscale(1); }

.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.course {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2);
}
.title { font-size: 17px; font-weight: 500; line-height: 1.3; }
.meta { font-family: var(--mono); font-size: 14px; color: oklch(0.42 0.015 258); }
.note {
  font-size: 14.5px; color: oklch(0.45 0.015 258); line-height: 1.4; margin-top: 2px;
  text-wrap: pretty;
}
/* flex:none means this never shrinks, so it must never grow either — a single
   wide child in here collapses .row-body to zero width and pushes the card off
   the page. Capping it keeps that impossible rather than merely unlikely. */
.row-right { text-align: right; flex: 0 0 auto; max-width: 40%; }
.relative {
  font-family: var(--mono); font-size: 21px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.05;
}
.relative.calm { font-size: 14px; color: oklch(0.42 0.015 258); }
.absolute {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); margin-top: 4px;
}
.from-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px;
}
/* "Canvas 11:59 PM" under the real deadline: enough to say the two differ,
   without putting the reason on every card. The item page explains it. */
.canvas-differs {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
  margin-top: 3px; white-space: nowrap; text-decoration: line-through;
  text-decoration-color: oklch(0.80 0.012 255);
}
.snoozed {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 4px;
}

/* ------------------------------------------------------------ plain lists */
.thin {
  display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px;
  background: var(--card); border: 1px solid var(--rule-2); border-radius: 2px;
  font-size: 15px; color: oklch(0.42 0.015 258); text-decoration: none;
}
a.thin:hover { background: oklch(0.985 0.004 255); text-decoration: none; }
.thin .sub { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

details.resolved > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--card); border: 1px solid var(--rule-2);
  border-radius: 2px; cursor: pointer; font-family: var(--mono);
  font-size: 12.5px; color: var(--ink-2); list-style: none;
}
details.resolved > summary::-webkit-details-marker { display: none; }
.resolved-list {
  display: flex; flex-direction: column; margin-top: 8px;
  border-left: 1px solid var(--rule); padding-left: 12px;
}
.resolved-item {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  font-size: 14.5px; color: oklch(0.45 0.015 258);
}

/* ------------------------------------------------------------------ empty */
.empty {
  margin: 16px; padding: 34px 20px 26px; background: var(--dark);
  border-radius: 14px; color: oklch(0.96 0.006 258);
  display: flex; flex-direction: column; gap: 22px;
}
.empty h1 {
  font-size: 30px; font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.12; margin: 0;
}
.empty p { font-size: 16px; line-height: 1.6; color: oklch(0.80 0.02 258); margin: 0; text-wrap: pretty; }
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: oklch(0.34 0.03 258); border: 1px solid oklch(0.34 0.03 258);
  border-radius: 2px;
}
.stat { background: var(--dark); padding: 14px 12px; }
.stat b { font-family: var(--mono); font-size: 25.9px; font-weight: 500; }
.stat span {
  display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: oklch(0.70 0.02 258); margin-top: 4px; line-height: 1.4;
}

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--card); border: 1px solid var(--rule); border-radius: 2px;
  padding: 18px 16px; margin: 16px;
}
.card h2 { font-size: 18.5px; font-weight: 600; margin: 0 0 12px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0;
      border-bottom: 1px solid var(--hair); }
.kv:last-child { border-bottom: 0; }
.kv .k { font-size: 15px; color: oklch(0.42 0.015 258); }
.kv .v { font-family: var(--mono); font-size: 13.5px; text-align: right; }

.pair {
  display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule-2);
  border-radius: 2px;
}
.pair > div { padding: 12px 14px; }
.pair > div:first-child { border-right: 1px solid var(--rule-2); }
.pair .k {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: oklch(0.64 0.012 258);
}
.pair .v { font-family: var(--mono); font-size: 15px; margin-top: 3px; }
.pair .s { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

.prose { font-size: 16px; line-height: 1.6; color: oklch(0.35 0.018 258); text-wrap: pretty; }

/* ------------------------------------------------------------------ forms */
label.field { display: block; margin-bottom: 14px; }
label.field > span {
  display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: oklch(0.64 0.012 258); margin-bottom: 5px;
}
label.field .hint {
  display: block; font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  text-transform: none; letter-spacing: 0; margin-top: 5px; line-height: 1.5;
}
input[type=text], input[type=email], input[type=password], input[type=date],
select, textarea {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: 16.5px;
  color: var(--ink); background: oklch(0.985 0.004 255);
  border: 1px solid oklch(0.88 0.012 255); border-radius: 2px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: oklch(0.50 0.02 258); background: var(--card);
}
textarea { min-height: 104px; line-height: 1.5; resize: vertical; }
input[type=text].code {
  font-family: var(--mono); font-size: 26px; letter-spacing: 0.35em; text-align: center;
}

.btn {
  padding: 14px 16px; min-height: 44px; border: none; border-radius: 2px;
  font-family: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
  background: var(--ink); color: #fff;
}
.btn:hover { background: oklch(0.18 0.02 258); }
.btn.ghost {
  background: var(--card); color: oklch(0.42 0.015 258);
  border: 1px solid oklch(0.88 0.012 255); font-weight: 400;
}
.btn.ghost:hover { background: oklch(0.975 0.006 252); }
.btn:disabled { background: var(--rule-2); color: var(--ink-3); cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; padding-top: 4px; }
.btn-row .btn { flex: 1; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.chip {
  padding: 8px 12px; font-family: var(--mono); font-size: 12.5px; background: var(--card);
  border: 1px solid var(--rule); border-radius: 99px; color: oklch(0.45 0.015 258);
  cursor: pointer;
}
.chip:hover { border-color: oklch(0.70 0.015 258); }
/* A labelled rule between the two sign-in methods, so neither reads as the
   fallback of the other. */
.or {
  display: flex; align-items: center; gap: 12px; margin: 16px 0;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}
.or::before, .or::after {
  content: ""; flex: 1; height: 1px; background: var(--rule-2);
}

.fine { font-family: var(--mono); font-size: 12px; color: var(--ink-3); line-height: 1.5; }

/* ---------------------------------------------------------------- history */
.bars { display: flex; align-items: center; gap: 12px; }
.bars .name { width: 118px; font-size: 15px; flex: none; }
.bars .track { flex: 1; display: flex; gap: 3px; }
.bars .cell { flex: 1; height: 8px; background: oklch(0.86 0.012 255); }
.bars .cell.late { background: var(--approaching); }
.bars .cell.closed { background: var(--closed); }
.bars .tally {
  font-family: var(--mono); font-size: 12.5px; color: oklch(0.60 0.012 258);
  width: 42px; text-align: right; flex: none;
}
.legend {
  display: flex; gap: 16px; font-family: var(--mono); font-size: 11.5px;
  color: oklch(0.66 0.012 258); flex-wrap: wrap;
}
.legend i { width: 12px; height: 6px; display: inline-block; margin-right: 5px; }

.rail { display: flex; flex-direction: column; gap: 10px; }
.rail-item { display: flex; align-items: center; gap: 14px; }
.rail-item .mark { width: 34px; height: 34px; margin: 0; }
.rail-item span { font-size: 17px; font-weight: 500; }

/* ------------------------------------------------------------- responsive */
@media (min-width: 1000px) {
  .summary { padding: 26px; display: grid; grid-template-columns: minmax(0,1fr) 420px;
             gap: 36px; align-items: start; background: oklch(0.975 0.006 252); }
  .summary-head { grid-column: 1 / -1; }
  .list-head { padding: 22px 26px 0; }
  .headline { font-size: 26px; letter-spacing: -0.02em; }
  .assessment { font-size: 17px; }
  .actions {
    margin: 0; padding: 18px 20px; border-top: 0; background: var(--card);
    border: 1px solid var(--rule); border-radius: 3px;
  }
  .action-t { font-size: 16px; }
  .section { padding: 18px 26px 6px; }
  .card { margin: 16px 26px; }
  .empty { margin: 16px 26px; }
  .cols { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 26px;
          padding: 30px 26px 26px; align-items: start; }
  .row { padding: 15px 18px; }
  .relative { font-size: 23px; }
}
@media (max-width: 999px) {
  .cols { padding: 30px 0 26px; }
  .cols .rail-block { padding: 0 16px; }

  /* Phone chrome stays to two tight lines. The expiry banner below already
     carries the token warning, so the chip is redundant here. */
  .topbar { padding: 10px 16px; gap: 8px; }
  .token-chip { display: none; }
  .topbar > div:last-child { width: 100%; justify-content: space-between; }
  .sync { font-size: 11.5px; white-space: nowrap; }
  .wide-only { display: none; }
  .nav { gap: 14px; font-size: 12.5px; }
  .row-right { max-width: 34%; }
  .absolute, .relative { white-space: nowrap; }
}