/* ============================================================================
   DASHBOARD — `/` with no plan: every plan this person can see, and whose turn
   each one is. Built on app.css: its tokens, the doc chip's menu, the tracker's
   dot states, the ready band's pulse and the tracing ring. Only what is new is
   here, and nothing here restyles the workbench.
   ========================================================================== */

/* The workbench is a fixed, full-viewport instrument and app.css locks the body to it. The
   dashboard is a page, and a long list of plans has to scroll. */
html.route-dashboard body { overflow: auto; }
html.route-dashboard #wb-skeleton,
html.route-dashboard .scene:not(#scene-dashboard) { display: none !important; }
/* The topbar's plan chrome belongs to a plan on screen; the dashboard has none, so the doc chip
   and the tracker are hidden and the row is just the brand, the (optional) search and the menu. */
html.route-dashboard .doc-tools,
html.route-dashboard #track-slot { display: none; }
#scene-dashboard { position: static; }

/* ---------------------------------------------------------------- top nav */
/* Logo left, search centred, menu right. The brand becomes the way home. */
a.brand { color: inherit; text-decoration: none; }
a.brand:focus-visible { outline: 1px solid var(--det); outline-offset: 4px; border-radius: 4px; }

/* the search field in the toolbar, between the sort and the view toggle: it fills the middle of the
   bar and holds focus while the tiles redraw beneath it (dashboard.js keeps the bar across renders) */
.dash-search { flex: 1 1 180px; min-width: 130px; max-width: 560px; display: flex; }
.dash-search-box {
  position: relative; display: flex; align-items: center; gap: 8px;
  width: 100%; height: 34px; padding: 0 8px 0 30px; border-radius: 8px;
  background: var(--ink-1); border: 1px solid var(--hair);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.dash-search-box:hover { border-color: var(--hair-strong); }
.dash-search-box:focus-within {
  border-color: var(--det);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--det) 18%, transparent);
}
.dash-search-icon { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--txt-2); pointer-events: none; }
.dash-search-box:focus-within .dash-search-icon { color: var(--det); }
.dash-search-input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  color: var(--txt-0); font-family: var(--font-m); font-size: 12px;
}
.dash-search-input::placeholder { color: var(--txt-2); }
.nav-search-input::-webkit-search-cancel-button { filter: invert(0.55); cursor: pointer; }
.nav-kbd {
  flex: none; font-family: var(--font-m); font-size: 10.5px; line-height: 1; color: var(--txt-2);
  border: 1px solid var(--hair-strong); border-radius: 4px; padding: 2px 5px;
}
.nav-search-box:focus-within .nav-kbd { display: none; }

/* THE APP MENU is app.css's, already at the end of the row. The dashboard gives it a few more
   rows — who is signed in, and the ways home, to a new plan and to a passkey. */
html.route-dashboard .app-menu-list { min-width: 220px; }
.app-menu-who { display: flex; flex-direction: column; gap: 3px; padding: 8px 11px 10px; margin-bottom: 5px; border-bottom: 1px solid var(--hair); }
.app-menu-who-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt-2); }
.app-menu-who-email { font-family: var(--font-m); font-size: 12px; color: var(--txt-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.app-menu-item { text-decoration: none; }
.app-menu-sep { height: 1px; margin: 5px 4px; border: 0; background: var(--hair); }

/* ---------------------------------------------------------------- the page */
.dash-page {
  max-width: 1280px; margin: 0 auto;
  padding: calc(var(--top-h) + var(--banner-h) + 34px) 28px 96px;
}
.dash-head { margin-bottom: 24px; }
/* the page's own title: the upload-wait page's heading, one size up */
.dash-title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--txt-0); }
.dash-lead { margin: 8px 0 0; max-width: 64ch; font-size: 14px; line-height: 1.6; color: var(--txt-1); }
.dash-count { margin: 6px 0 0; font-family: var(--font-m); font-size: 11.5px; color: var(--txt-2); }
.dash-count-you { color: var(--keep); }
/* section headings: the side pane's title style, so the two read as one application */
.dash-sec-title { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--txt-1); }
.dash-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dash-more {
  white-space: nowrap; font-family: var(--font-m); font-size: 11.5px; color: var(--det);
  background: none; border: 0; padding: 2px 0; text-decoration: underline; text-underline-offset: 3px;
}
.dash-more:hover { color: var(--txt-0); }

/* STILL BEING READ — for somebody whose only plans are on their way. It says what the upload-wait
   page says, in its words, because it is the same promise. */
.dash-note {
  display: flex; gap: 14px; align-items: flex-start; margin: 0 0 30px; padding: 16px 18px;
  border: 1px solid color-mix(in oklab, var(--det) 35%, var(--hair)); border-radius: 10px;
  background: color-mix(in oklab, var(--det) 7%, var(--ink-1));
}
.dash-note-mark { flex: none; color: var(--det); display: grid; place-items: center; padding-top: 1px; }
.dash-note-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--txt-0); }
.dash-note-body { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--txt-1); max-width: 78ch; }
.dash-note-body + .dash-note-body { margin-top: 6px; }
.dash-note-body strong { color: var(--txt-0); font-weight: 600; }

/* ---------------------------------------------------------------- ready for your review */
/* The ready band's rows, laid out as cards: same green wash, same pulse, same "Open →". */
.dash-attn { margin: 0 0 34px; }
.dash-attn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 10px; }
.da-card {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px;
  color: var(--txt-0); text-decoration: none;
  background: color-mix(in oklab, var(--keep) 9%, var(--ink-1));
  border: 1px solid color-mix(in oklab, var(--keep) 28%, var(--hair)); border-radius: 9px;
  transition: background 0.15s, border-color 0.15s;
}
.da-card:hover { background: color-mix(in oklab, var(--keep) 15%, var(--ink-1)); border-color: color-mix(in oklab, var(--keep) 55%, var(--hair)); }
.da-card:focus-visible { outline: 1px solid var(--keep); outline-offset: 2px; }
.da-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.da-name { font-family: var(--font-m); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-stage { font-size: 13px; color: var(--txt-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-stage b { font-weight: 600; color: var(--txt-0); }
.da-lot { color: var(--txt-2); }
.da-card .rb-go { flex: none; font-size: 12px; }

/* ---------------------------------------------------------------- toolbar */
.dash-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.dash-bar-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* a segmented control in the doc chip's material: mono caps, hairline, the pressed one lifted */
.dash-seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; gap: 2px; padding: 3px; background: var(--ink-1); border: 1px solid var(--hair); border-radius: 8px; }
.dash-seg button {
  display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 5px 10px; border: 0; border-radius: 6px;
  white-space: nowrap; background: transparent; color: var(--txt-2);
  font-family: var(--font-m); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  transition: color 0.15s, background 0.15s;
}
.dash-seg button:hover { color: var(--txt-0); }
.dash-seg button:focus-visible { outline: 1px solid var(--det); outline-offset: 1px; }
.dash-seg button[aria-pressed="true"] { background: var(--ink-2); color: var(--txt-0); box-shadow: inset 0 0 0 1px var(--hair-strong); }
.dash-seg .n { color: var(--txt-2); }
.dash-seg button[aria-pressed="true"] .n { color: var(--det); }
.dash-seg svg { width: 14px; height: 14px; }
.dash-views button { padding: 5px 9px; }
.dash-views-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.dash-sort {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font-family: var(--font-m); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--txt-1); background: var(--ink-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%235d7389' stroke-width='1.4'/%3E%3C/svg%3E") right 9px center / 10px no-repeat;
  border: 1px solid var(--hair); border-radius: 8px; padding: 8px 28px 8px 11px;
}
.dash-sort:hover, .dash-sort:focus-visible { border-color: var(--det); color: var(--txt-0); outline: none; }
.dash-sort option { background: var(--ink-1); color: var(--txt-0); }
/* the primary button, at toolbar size */
.dash-upload { padding: 8px 15px; font-size: 13px; border-radius: 8px; gap: 7px; }
.dash-upload span { font-size: 17px; line-height: 1; font-weight: 600; }

/* ---------------------------------------------------------------- tiles */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr)); gap: 18px; }
/* a first visit is two tiles, the sample and the way in: larger, and held to a measure */
.dash-grid.is-first { max-width: 780px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.dt {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--ink-1); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.dt:hover { border-color: var(--det); transform: translateY(-2px); box-shadow: 0 16px 38px -20px color-mix(in oklab, var(--det) 60%, transparent); }
.dt:has(.dt-link:focus-visible) { border-color: var(--det); outline: 1px solid var(--det); outline-offset: 2px; }
/* the first sheet, at the aspect every sheet thumbnail in the app uses, in the same blueprint tint */
.dt-thumb { position: relative; aspect-ratio: 1191 / 842; overflow: hidden; background: var(--blueprint-deep); border-bottom: 1px solid var(--hair); }
.dt-thumb > img, .dt-thumb > svg.sheet {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: invert(0.92) sepia(0.4) saturate(2.2) hue-rotate(170deg) brightness(0.95);
}
/* a plan still being read wears the tracing ring: "something is happening to your drawing" looks
   the same wherever it happens */
.dt-busy { position: absolute; inset: 12px; }
.dt-busy-say { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-m); font-size: 11px; letter-spacing: 0.04em; color: var(--txt-2); }
.dt-tag, .dt-lots {
  position: absolute; top: 10px; z-index: 1;
  font-family: var(--font-m); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; backdrop-filter: blur(4px);
  background: color-mix(in oklab, var(--ink-0) 78%, transparent);
}
.dt-tag { white-space: nowrap; left: 10px; color: var(--det); border: 1px solid color-mix(in oklab, var(--det) 45%, transparent); }
.dt-lots { right: 10px; color: var(--txt-1); border: 1px solid var(--hair-strong); }

.dt-body { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 15px; }
/* the job, in the CAD-plate convention the doc chip uses */
.dt-name { margin: 0; font-family: var(--font-m); font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt-0); }
.dt-link { color: inherit; text-decoration: none; }
.dt-link:focus-visible { outline: none; }
/* the whole tile opens the plan; the dwelling rows sit above this and open their own dwelling */
.dt-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dt-meta { margin: auto 0 0; padding-top: 2px; font-family: var(--font-m); font-size: 11px; color: var(--txt-2); }

/* the upload tile: a place to put something, drawn as an outline waiting to be filled */
.dt-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  min-height: 250px; padding: 28px 20px; text-align: center; font-family: var(--font-d);
  color: var(--txt-1); background: transparent; border: 1px dashed var(--hair-strong); border-radius: 12px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.dt-add:hover, .dt-add:focus-visible { border-color: var(--det); color: var(--txt-0); background: color-mix(in oklab, var(--det) 5%, transparent); outline: none; }
.dt-add-plus {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px;
  font-size: 26px; font-weight: 300; line-height: 1; color: var(--det);
  border: 1px solid color-mix(in oklab, var(--det) 50%, transparent); border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.dt-add:hover .dt-add-plus { transform: scale(1.06); background: color-mix(in oklab, var(--det) 12%, transparent); }
.dt-add-lead { font-size: 15px; font-weight: 700; color: var(--txt-0); }
.dt-add-sub { font-family: var(--font-m); font-size: 11px; color: var(--txt-2); }

/* ---------------------------------------------------------------- status line */
.dt-status { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--txt-1); }
.st-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
/* waiting on the reviewer: the ready band's pulse */
.st-ready { color: var(--txt-0); }
.st-ready .st-dot { background: var(--keep); animation: rb-pulse 2.4s ease-out infinite; }
/* waiting on the pipeline: the tracker's dashed "nothing here yet" */
.st-waiting .st-dot { border: 1px dashed var(--txt-2); }
/* being read or measured: the tracing ring's blue */
.st-busy { color: var(--txt-1); }
.st-busy .st-dot { background: var(--det); animation: dt-breathe 2.4s ease-in-out infinite; }
@keyframes dt-breathe { 50% { opacity: 0.35; } }
/* at the Takeoff with every stage before it signed off: the tracker's confirmed green, still */
.st-walked { color: var(--keep); }
.st-walked .st-dot { background: var(--keep); }
.st-loading .st-dot { border: 1px solid var(--hair-strong); }

/* ---------------------------------------------------------------- stage dots */
/* The tracker's circles, shrunk: confirmed green, ready outlined, waiting dashed, and the stage a
   click lands on in the electric ring the tracker gives the stage on screen. */
.pdots { display: inline-flex; align-items: center; gap: 5px; }
.pdot { flex: none; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; }
.pdot.done { background: var(--keep); }
.pdot.ready { border: 1px solid var(--txt-2); }
.pdot.waiting { border: 1px dashed var(--hair-strong); }
.pdot.next.ready { border: 2px solid var(--electric); box-shadow: 0 0 0 2px color-mix(in oklab, var(--electric) 20%, transparent); }
.pdot.next.waiting { border-color: var(--txt-2); }

/* the dwellings of a development, one line each, each its own way in */
.dt-dw { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.dt-dw a {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 62px auto 1fr; align-items: center; gap: 10px;
  margin: 0 -6px; padding: 5px 6px; border-radius: 6px;
  font-size: 12px; color: var(--txt-1); text-decoration: none;
}
.dt-dw a:hover, .dt-dw a:focus-visible { background: var(--ink-2); color: var(--txt-0); outline: none; }
.dt-dw-lot { font-family: var(--font-m); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--txt-0); white-space: nowrap; }
.dt-dw-words { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-dw-words.st-ready { color: var(--keep); }
.dt-dw-words.st-waiting { color: var(--txt-2); }
.dt-dw-more { font-family: var(--font-m); font-size: 11px; color: var(--txt-2); padding: 2px 0; }
/* a dwelling's dots, a size down, so the stage it is at still fits beside them */
.dt-dw .pdots { gap: 3px; }
.dt-dw .pdot { width: 7px; height: 7px; }
.dt-dw .pdot.next.ready { border-width: 1.5px; box-shadow: none; }

/* ---------------------------------------------------------------- table */
.dash-table-wrap { overflow-x: auto; background: var(--ink-1); border: 1px solid var(--hair); border-radius: 12px; }
.dtab { width: 100%; border-collapse: collapse; }
.dtab th {
  padding: 11px 14px; text-align: left; white-space: nowrap;
  font-family: var(--font-m); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--txt-2); border-bottom: 1px solid var(--hair);
}
.dtab td { padding: 10px 14px; vertical-align: middle; font-size: 13px; color: var(--txt-1); border-bottom: 1px solid var(--hair); }
.dtab tbody tr:last-child td { border-bottom: 0; }
.dtab tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
.dtab-plan { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dtab-thumb { position: relative; flex: none; width: 56px; aspect-ratio: 1191 / 842; overflow: hidden; border-radius: 4px; border: 1px solid var(--hair); background: var(--blueprint-deep); }
.dtab-thumb > img, .dtab-thumb > svg.sheet { display: block; width: 100%; height: 100%; object-fit: cover; filter: invert(0.92) sepia(0.4) saturate(2.2) hue-rotate(170deg) brightness(0.95); }
.dtab-thumb .op-tracing-ring { border-radius: 4px; padding: 1.5px; }
.dtab-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dtab-name { font-family: var(--font-m); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt-0); text-decoration: none; }
.dtab-name:hover { color: var(--det); }
.dtab-sub { font-family: var(--font-m); font-size: 10.5px; color: var(--txt-2); }
.dtab-sub.is-sample { color: var(--det); letter-spacing: 0.08em; text-transform: uppercase; }
.dtab .num { white-space: nowrap; font-family: var(--font-m); font-size: 11.5px; color: var(--txt-2); }
.dtab .c-open { width: 1%; white-space: nowrap; text-align: right; }
.dtab-open { font-family: var(--font-m); font-size: 11.5px; color: var(--det); text-decoration: none; }
.dtab-open:hover { color: var(--txt-0); }
.dtab-expand {
  font-family: var(--font-m); font-size: 11px; color: var(--txt-1);
  background: var(--ink-2); border: 1px solid var(--hair); border-radius: 6px; padding: 4px 9px;
}
.dtab-expand:hover, .dtab-expand[aria-expanded="true"] { border-color: var(--det); color: var(--txt-0); }
.dtab-lot td { background: color-mix(in oklab, var(--ink-0) 45%, var(--ink-1)); }
.dtab-lot td:first-child { padding-left: 82px; }
.dtab-lot-name { font-family: var(--font-m); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--txt-0); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.dash-empty { padding: 48px 16px; text-align: center; color: var(--txt-2); font-size: 14px; }
.dash-empty p { margin: 0 0 8px; }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 760px) {
  .dash-page { padding-left: 16px; padding-right: 16px; padding-top: calc(var(--top-h) + var(--banner-h) + 22px); }
  .dash-bar-end { margin-left: 0; width: 100%; justify-content: space-between; }
  .dtab .c-progress, .dtab .c-updated { display: none; }
  .dtab-lot td:first-child { padding-left: 14px; }
}
/* PHONE: a tile becomes a row — the sheet beside the words, not above them — so a list of plans
   is a list, not a scroll through full-width drawings */
@media (max-width: 560px) {
  .dash-grid { gap: 10px; }
  .dt { flex-direction: row; }
  .dt:hover { transform: none; }
  .dt-thumb { flex: none; width: 104px; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--hair); }
  .dt-tag { top: 6px; left: 6px; font-size: 8.5px; padding: 2px 5px; }
  .dt-lots, .dt-busy-say, .dt-tag-more { display: none; }
  .dt-busy { inset: 6px; }
  .dt-body { gap: 7px; padding: 12px 14px; }
  .dt-add { min-height: 0; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 14px 16px; text-align: left; }
  .dt-add-plus { width: 36px; height: 36px; margin: 0; font-size: 22px; }
  .dt-add-sub { display: none; }
  /* the toolbar's Upload button sits directly above: on a phone the tile would only repeat it */
  .dash-bar ~ .dash-list .dt-add { display: none; }
  .dash-seg button { padding: 5px 8px; }
  .dash-views { display: none; }
}
@media (max-width: 600px) {
  #topbar { gap: 10px; padding: 0 12px; }
  .nav-kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .st-ready .st-dot, .st-busy .st-dot { animation: none; }
  .dt:hover { transform: none; }
}