/* T+G brand (Braid Creative brand platform): earthy clay/oxblood palette,
   Geologica type, generous whitespace, thin rules. Nexa (the brand's display
   face) is commercial, so headings use heavy Geologica instead. */

@font-face {
  font-family: "Geologica";
  src: url("/static/fonts/geologica-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --clay: #a4624c;       /* logo mark */
  --oxblood: #5e1d19;    /* wordmark, headings */
  --rust: #c26836;
  --blush: #efe0dd;      /* hero band */
  --blush-soft: #f8f0ee;
  --olive: #8a8541;
  --sage: #a1b5aa;
  --teal: #2b4d4f;
  --sand: #e4c99a;
  --ink: #232a22;
  --muted: #7a6560;
  --line: #e6d6d1;
  --paper: #fffdfc;
  --radius: 10px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 "Geologica", system-ui, sans-serif;
  font-weight: 350;
  color: var(--ink);
  background: var(--paper);
}
a { color: var(--clay); text-underline-offset: 3px; }
a:hover { color: var(--oxblood); }
h1, h2, h3 { color: var(--oxblood); font-weight: 750; letter-spacing: -0.01em; line-height: 1.15; }
h1 { font-size: 2rem; margin: 0 0 .5rem; }
[x-cloak] { display: none !important; }

/* Header */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 32px; background: #fff; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand .mark { height: 38px; width: auto; }
.brand .wordmark { height: 15px; width: auto; }
.brand .product {
  color: var(--clay); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border-left: 1px solid var(--line); padding-left: 12px;
}
.who { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 10px; }
.env-pill {
  white-space: nowrap; background: var(--sand); color: var(--oxblood); border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px;
}

/* Page band (the brand's blush hero) */
.band { background: var(--blush); padding: 28px 32px 22px; border-bottom: 1px solid var(--line); }
.band p { margin: 0; }
.band .controls { display: flex; align-items: center; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
main { padding: 24px 32px 48px; }

/* Individuals list */
.people { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.people a {
  display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; text-decoration: none; color: var(--oxblood); font-weight: 600;
}
.people a:hover { border-color: var(--clay); background: var(--blush-soft); }

/* Review table */
table { border-collapse: collapse; width: 100%; background: #fff; }
table.review { table-layout: fixed; border: 1px solid var(--line); border-radius: var(--radius); }
table.review col.date-col { width: 7em; }
table.review col.desc-col { width: 30%; }
th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; vertical-align: bottom; padding: 12px 10px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--oxblood); background: var(--blush-soft); box-shadow: inset 0 -2px 0 var(--clay);
}
td { padding: 12px 10px; vertical-align: top; border-bottom: 1px solid var(--line); }
tbody:hover td { background: #fffaf8; }
td.date { color: var(--ink); font-size: 13.5px; font-weight: 500; }
td.date .meta { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.35; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.desc .text { white-space: pre-wrap; margin-bottom: 6px; }
button.open-detail {
  all: unset; display: block; cursor: pointer; white-space: pre-wrap; margin-bottom: 6px; border-radius: 4px;
}
button.open-detail:hover { color: var(--oxblood); text-decoration: underline; text-decoration-color: var(--line);
  text-underline-offset: 4px; }
button.open-detail:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.actions { display: flex; gap: 6px; margin: 6px 0; }
.preview { margin-top: 6px; font-style: italic; }

/* Controls */
textarea, input, select {
  font: inherit; width: 100%; color: var(--ink); background: #fff;
  border: 1px solid #d9c3bc; border-radius: 8px; padding: 6px 8px;
}
select { padding-right: 4px; }
textarea:focus, input:focus, select:focus {
  outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(164, 98, 76, .18);
}
.band input[type="month"] { width: auto; }
button {
  font: inherit; font-size: 13px; font-weight: 550; cursor: pointer;
  color: var(--clay); background: #fff; border: 1px solid var(--clay);
  border-radius: 999px; padding: 4px 14px;
}
button:hover { background: var(--blush); }
button.primary { color: #fff; background: var(--clay); }
button.primary:hover { background: var(--oxblood); border-color: var(--oxblood); }
form label { display: block; margin: 8px 0 4px; }
form textarea + button { margin-top: 6px; }

.muted { color: var(--muted); font-size: 12.5px; }
button.link { border: 0; padding: 2px 4px; background: none; text-decoration: underline; }

/* Month navigation */
.month-nav { display: flex; align-items: center; gap: 6px; }
.month-nav .arrow {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--clay); background: #fff; text-decoration: none; font-size: 20px; line-height: 1;
}
.month-nav .arrow:hover { background: var(--blush-soft); }

/* Individuals: progress */
.people a { display: grid; gap: 6px; }
.people .progress-label { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.people .bar { height: 5px; border-radius: 999px; background: var(--blush); overflow: hidden; }
.people .bar { display: flex; }
.people .bar .seg { display: block; height: 100%; }
.people .bar .seg.reviewed { background: var(--olive); }
.people .bar .seg.classified { background: var(--sand); }

/* Classification picker: chips in the cell, checkbox panel below */
.picker { position: relative; }
button.pick {
  display: flex; align-items: flex-start; gap: 6px; width: 100%; min-height: 36px; text-align: left;
  color: var(--ink); border: 1px solid #d9c3bc; border-radius: 8px; padding: 5px 6px 5px 8px; font-weight: 400;
}
button.pick:hover { background: #fff; border-color: var(--clay); }
button.pick[aria-expanded="true"] { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(164, 98, 76, .18); }
.pick .summary { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pick .chev { color: var(--clay); font-size: 11px; padding-top: 4px; }
.chip {
  display: inline-block; max-width: 100%; padding: 2px 8px; border-radius: 999px;
  background: var(--blush); color: var(--oxblood); font-size: 12px; font-weight: 500; line-height: 1.4;
  overflow-wrap: break-word; hyphens: auto;
}
.chip.retired { background: #eee; color: var(--muted); text-decoration: line-through; }
.placeholder { color: var(--muted); font-size: 13px; padding: 2px 0; }
.saved-tick { color: var(--olive); font-size: 11px; font-weight: 600; align-self: center; animation: fade 2s forwards; }
@keyframes fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
.picker-panel {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: max(100%, 300px);
  max-height: 360px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(35, 42, 34, .16); padding: 8px 12px 12px;
}
td.cell:nth-last-child(-n+2) .picker-panel { left: auto; right: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  position: sticky; top: -8px; background: #fff; padding: 6px 0; font-size: 13px; color: var(--oxblood); }
.picker-panel fieldset { border: 0; margin: 6px 0 0; padding: 0; }
.picker-panel legend { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--clay); padding: 6px 0 2px; }
label.opt { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 5px 4px; border-radius: 6px;
  font-size: 13.5px; cursor: pointer; }
label.opt:hover { background: var(--blush-soft); }
label.opt input { width: auto; margin-top: 3px; accent-color: var(--clay); }
label.opt.retired { color: var(--muted); }

/* Main nav */
.main-nav { display: flex; gap: 4px; margin-right: auto; margin-left: 24px; }
.main-nav a { text-decoration: none; color: var(--oxblood); font-weight: 550; font-size: 14px; padding: 6px 12px;
  border-radius: 999px; }
.main-nav a:hover { background: var(--blush-soft); }

/* Filter bars */
.filters { display: flex; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; margin-top: 10px; }
.filters label { margin: 0; font-size: 12px; color: var(--muted); display: grid; gap: 3px; }
.filters select, .filters input[type="month"] { width: auto; min-width: 9em; font-size: 14px; }
.filters .month-nav { align-items: flex-end; }
.filters label.check { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); padding-bottom: 7px; }
.filters label.check input { width: auto; accent-color: var(--clay); }
.band .range { margin-top: 10px; }
.fpick { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; width: 13.5em; }
.flabel { font-size: 12px; color: var(--muted); }
.fpick-row { display: flex; align-items: stretch; gap: 4px; }
.fpick button.pick { background: #fff; min-height: 38px; align-items: center; flex: 1; min-width: 0; overflow: hidden; }
.fpick .summary { flex-wrap: nowrap; overflow: hidden; }
.fpick .summary .chip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.fpick .summary .chip.more { flex: none; background: var(--sand); }
.filters label.opt { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--ink); }
.fpick .picker-panel { width: max(100%, 280px); }
button.clear-x {
  flex: none; width: 30px; padding: 0; border-radius: 8px; font-size: 18px; line-height: 1; border-color: #d9c3bc;
}
input.fsearch { margin: 2px 0 6px; font-size: 14px; }
.filters a.reset { align-self: flex-end; padding: 8px 4px; font-size: 13.5px; font-weight: 550; }

/* Overview grid */
table.overview { border: 1px solid var(--line); border-radius: var(--radius); }
table.overview th, table.overview td { border-bottom: 1px solid var(--line); }
table.overview thead th a { color: inherit; text-decoration: none; }
table.overview thead th a:hover { text-decoration: underline; }
table.overview tbody th {
  position: static; background: #fff; box-shadow: none; text-transform: none; letter-spacing: 0;
  font-size: 15px; font-weight: 600; vertical-align: middle; min-width: 11em;
}
table.overview tbody th a { color: var(--oxblood); text-decoration: none; }
table.overview tbody th a:hover { text-decoration: underline; }
table.overview td { vertical-align: middle; padding: 8px; min-width: 8.5em; }
.cell-link { display: grid; gap: 3px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.cell-link:hover { background: var(--blush-soft); }
td.needs .cell-link { box-shadow: inset 3px 0 0 var(--rust); background: #fdf5f0; }
.cell-link .bar { height: 6px; border-radius: 999px; background: var(--blush); overflow: hidden; display: flex; }
.cell-link .bar .seg { display: block; height: 100%; }
.seg.reviewed { background: var(--olive); }
.seg.classified { background: var(--sand); }
.cell-text { font-size: 13px; font-weight: 550; }
td.needs .cell-text { color: var(--rust); }
.cell-sub { font-size: 11px; color: var(--muted); }
.none { color: var(--line); padding-left: 10px; }

/* Workspace */
table.review col.who-col { width: 8em; }
table.review:has(col.who-col) col.desc-col { width: 24%; }
td.indiv { font-weight: 600; color: var(--oxblood); font-size: 13.5px; }
tbody.group-head td {
  background: var(--blush); color: var(--oxblood); font-weight: 650; font-size: 13px; padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
tbody.group-head .count { margin-left: 6px; font-weight: 500; color: var(--muted); }
tbody.group-head:hover td { background: var(--blush); }

/* Filter tabs and review */
.tabs { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tab-list { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tab {
  padding: 8px 14px; text-decoration: none; color: var(--muted); font-weight: 550; font-size: 14px;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--oxblood); }
.tab[aria-current="page"] { color: var(--oxblood); border-bottom-color: var(--clay); }
.tab .count { display: inline-block; min-width: 1.7em; text-align: center; margin-left: 4px; padding: 0 6px;
  border-radius: 999px; background: var(--blush); color: var(--oxblood); font-size: 12px; }
.tab-reviewed .count { background: #e8e6cf; }
.tab-actions { display: flex; gap: 8px; flex-wrap: wrap; }
table.review col.review-col { width: 7.5em; }
td.empty { text-align: center; padding: 32px; }
.rbox { display: grid; gap: 4px; }
.review-check { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 550;
  color: var(--oxblood); cursor: pointer; white-space: nowrap; }
.review-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--olive); }
.is-unclassified .review-check { color: var(--muted); cursor: not-allowed; font-weight: 400; }
.flag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--rust); line-height: 1.3; }
tbody:has(.rbox.is-reviewed) td { background: #f7f6ec; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.section-head h3 { margin: 0; }
.review-bar {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 24px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 16px rgba(35, 42, 34, .06);
}
.review-bar .primary { margin-left: auto; }
.review-bar .keys { width: 100%; text-align: right; font-size: 11px; }
button:disabled { opacity: .45; cursor: default; }

/* Detail pane: right-side overlay, full screen on small screens */
body.locked { overflow: hidden; }
.overlay { position: fixed; inset: 0; z-index: 50; }
.scrim { position: absolute; inset: 0; background: rgba(35, 42, 34, .35); animation: fadein .15s; }
.detail {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); overflow-y: auto;
  background: var(--paper); box-shadow: -12px 0 40px rgba(35, 42, 34, .2); animation: slidein .2s ease-out;
}
@keyframes fadein { from { opacity: 0; } }
@keyframes slidein { from { transform: translateX(24px); opacity: 0; } }
.detail-head {
  position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 20px 24px 16px; background: var(--blush); border-bottom: 1px solid var(--line);
}
.detail-head h2 { margin: 2px 0 0; font-size: 1.35rem; }
.eyebrow { margin: 0; color: var(--clay); font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
button.close { width: 36px; height: 36px; padding: 0; font-size: 15px; flex: none; }
.detail section { padding: 16px 24px; border-bottom: 1px solid var(--line); }
.detail h3 { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; }
.body-text { white-space: pre-wrap; margin: 0 0 6px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0;
  padding: 16px 24px; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.facts dd { margin: 2px 0 0; font-weight: 500; }
.tasks { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.tasks li { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.tasks .score { float: right; color: var(--muted); font-size: 12px; }
.detail-cat { margin-bottom: 12px; }
.cat-label { font-size: 13px; font-weight: 550; color: var(--oxblood); margin-bottom: 4px; }
.detail .picker-panel { position: static; width: 100%; max-height: none; box-shadow: none; margin-top: 6px; }
.history { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 13px; }
.history li { display: grid; gap: 1px; padding-left: 10px; border-left: 3px solid var(--olive); }
.history li.removed { border-left-color: var(--line); color: var(--muted); }
.history li.removed strong { text-decoration: line-through; font-weight: 500; }
.history .when { color: var(--muted); font-size: 11.5px; }

@media (max-width: 760px) {
  .site-header { padding: 12px 16px; }
  .brand .product, .who .me, .env-pill .long { display: none; }
  .main-nav { margin-left: 8px; }
  .fpick { width: 100%; }
  .brand .wordmark { display: none; }
  .main-nav a { padding: 6px 8px; }
  .band, main { padding-left: 16px; padding-right: 16px; }
  .table-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
  table.review { min-width: 900px; }
  th { position: static; }
  .detail { width: 100%; box-shadow: none; animation: none; }
  .detail-head, .detail section, .facts { padding-left: 16px; padding-right: 16px; }
  .picker-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 70vh;
    border-radius: 16px 16px 0 0; }
  td.cell:nth-last-child(-n+2) .picker-panel { left: 0; right: 0; }
}