/* The owner's page, in the same paper look as the Mac's control panel
 * (src/carto/panel/page/panel.css, redesigned 3 November 2026): its palette,
 * its button ladder, its order-board cards, stage track and sale pane, so the
 * phone and the Mac read as one family. The root block below is copied from
 * the panel on purpose: panel.css styles a whole Mac app (a fixed-height body,
 * a header, a side rail) and would break this page if linked.
 *
 * The proof view reuses the proof page's own bars and sheet (proof.css), so
 * only the sales list, the sign-in screen and the sale pane are styled here.
 * The list uses no <header> or <footer>, which proof.css pins to the screen's
 * edges for the viewer. Light only: proof.css forces it. */

:root {
  --paper: #f4f1ea; --wall: #ebe7df; --sunk: #e4dfd4; --card: #fffdf9;
  --ink: #1d2328; --ink-soft: #5d6970; --ink-faint: #8d979d;
  --line: #d7d0c4; --line-firm: #b9b0a0;
  --action: #855832; --action-ink: #fff; --action-hover: #6f4826;
  --accent: #2f5d7c; --accent-soft: #e2ecf3;
  --ok: #3f6b4b; --ok-soft: #e3eee5;
  --warn: #9a5a12; --warn-soft: #f6ead8;
  --bad: #9b3b32; --bad-soft: #f5e1de;
  --quiet-soft: #ece8e0;
  --tap: 44px; --r: 8px; --r-sm: 6px;
  --shadow: 0 1px 2px rgba(29,35,40,.06), 0 4px 14px rgba(29,35,40,.06);
  --font: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* The proof page's own names (proof.css), mapped onto the panel's. */
  --paper-sunk: var(--sunk);
  --good: var(--ok);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: auto; min-height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
}

.page {
  display: block;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 16px
           calc(28px + env(safe-area-inset-bottom));
}

/* The panel's button ladder, on phone-sized taps: a bare button is the
 * secondary, .primary is the one brown move in a view, .quiet is text only. */
button {
  min-height: var(--tap);
  padding: 6px 16px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-firm);
  border-radius: var(--r);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button.primary {
  background: var(--action);
  border-color: var(--action);
  color: var(--action-ink);
  font-size: 15px;
  padding: 6px 18px;
}
button.primary:hover:not([disabled]) {
  background: var(--action-hover);
  border-color: var(--action-hover);
}
button.quiet { background: none; border-color: transparent; color: var(--ink-soft); }
button.quiet:hover:not([disabled]) { background: var(--quiet-soft); color: var(--ink); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------ sign-in */

#signin { text-align: center; padding-top: 12vh; }
#signin .logo { height: 44px; width: auto; }
#signin h1 { white-space: normal; font-size: 22px; margin: 18px 0 6px; }
#signin p { color: var(--ink-soft); margin: 0 0 20px; }

/* The two password forms: one column of labels and full-width fields, large
 * enough to tap, 16px so a phone does not zoom in on focus. */
.stack { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.stack label { font-size: 13px; font-weight: 600; color: var(--ink-soft);
               margin-top: 8px; }
.stack input[type="password"] {
  min-height: var(--tap); padding: 6px 12px; font: inherit; font-size: 16px;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line-firm); border-radius: var(--r);
}
.stack input[type="password"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.stack button { margin-top: 14px; }
/* The name field a phone files a password under: there for the phone, off
 * the screen for the owner. */
.away { position: absolute; left: -9999px; width: 1px; height: 1px;
        opacity: 0; }
#settings .bar { margin-bottom: 14px; }
#settings .small { margin: 0 0 12px; }

/* --------------------------------------------------------------- list */

.bar { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.bar .logo { flex: none; height: 36px; width: auto; }
.bar h1 { flex: 1; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }

.small { color: var(--ink-soft); font-size: 12.5px; line-height: 1.35; }

/* The machinery's one line, with the switch for printing beside it. */
.status {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 8px 0 8px 2px; margin: 0 0 8px;
  border-bottom: 1px solid var(--line);
}
.status .small { flex: 1; min-width: 0; }
.status button { flex: none; }

.needs {
  background: var(--bad-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bad);
  border-radius: var(--r);
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--ink);
}
.needs > div + div { margin-top: 4px; }

/* A group per stage of attention, in the board's order: small, spaced,
 * uppercase names. The one holding what needs the owner is brown. */
.board-col { margin-top: 20px; }
.board-col-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px;
  margin-bottom: 8px;
}
.board-col-name {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.board-col-n { color: var(--ink-soft); font-size: 13px; font-weight: 500; }
.board-col-who { font-size: 13px; color: var(--ink-soft); }
.board-col.is-yours .board-col-name,
.board-col.is-yours .board-col-who { color: var(--action); }
.board-col-cards { display: flex; flex-direction: column; gap: 8px; }

/* The Done group is folded until asked for. */
details.board-col > summary {
  list-style: none; cursor: pointer; min-height: var(--tap);
  align-items: center; margin-bottom: 0;
}
details.board-col > summary::-webkit-details-marker { display: none; }
details.board-col > summary::after {
  content: "›"; margin-left: auto; font-size: 20px; line-height: 1;
  color: var(--ink-faint); transition: transform .12s ease;
}
details.board-col[open] > summary::after { transform: rotate(90deg); }
details.board-col[open] > summary { margin-bottom: 4px; }
details.board-col .sale { opacity: .8; }

/* A sale: a card, as on the board. */
.sale {
  display: block;
  width: 100%;
  min-height: 0;
  text-align: left;
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  white-space: normal;
}
button.sale { cursor: pointer; }
button.sale:active { border-color: var(--line-firm); background: var(--paper); }
.sale.is-hot { border-left: 3px solid var(--warn); padding-left: 12px; }
.sale.shop-bad { opacity: .7; }

.sale .head { display: flex; gap: 8px; align-items: center; }
.sale .head strong { font-size: 16.5px; font-weight: 600; }
.sale .age { margin-left: auto; font-size: 12.5px; color: var(--ink-faint);
  white-space: nowrap; }
.board-pill {
  display: inline-flex; align-items: center; padding: 1px 9px;
  border-radius: 99px; font-size: 11.5px; font-weight: 600; line-height: 18px;
  background: var(--quiet-soft); color: var(--ink-soft); white-space: nowrap;
}
.sale .small { margin-top: 1px; font-size: 13.5px; }

/* Seven small marks: done, now, to come. Amber when the sale is on you. */
.board-track { display: flex; gap: 3px; flex: 0 0 150px; }
.board-track span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.board-track span.done { background: var(--ink-soft); }
.board-track span.now { background: var(--action); }
.board-track span.now.is-needs { background: var(--warn); }
.road { display: flex; align-items: center; gap: 10px; margin: 9px 0 7px; }
.road .stage {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.road .stage.is-needs { color: var(--warn); font-weight: 600; }

.sale .words { font-size: 14.5px; line-height: 1.35; }
.sale .words.is-needs { color: var(--warn); }
.sale .open {
  display: block; margin-top: 8px; font-size: 13.5px; font-weight: 600;
  color: var(--action);
}

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.foot .small { flex: 1 0 100%; }
.foot button { padding: 0 10px; font-size: 14px; }

.said { color: var(--ink); }
.said.good { color: var(--ok); font-weight: 600; }
.said.bad { color: var(--bad); }

/* ------------------------------------------------- the sale pane (proof) */

/* The proof stays the picture: the title and sub line are the bar above it
 * (the sale number, then size, paper, look), and the Next card is the first
 * thing in the bar below it. The rest folds away until asked for. */
header h1 { font-size: 18px; letter-spacing: -.01em; }
header .facts { font-size: 12.5px; }
/* The drawer at the foot of the proof. It is the proof page's bar (fixed, glass)
 * under another name, so the viewer does not leave room for it. Shut, it holds
 * the Next card and one line; open, it rises over the sheet. The sheet itself
 * ends where the shut drawer begins (set by owner.js), so it is centred in the
 * clear space between the two bars, and opening the drawer never moves it. */
#viewer #sheet {
  inset: auto; left: 0; right: 0;
  top: var(--head, 72px); bottom: var(--peek, 190px);
}
#drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: grid; gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-soft);
  max-height: 72vh; max-height: 72dvh;
  overflow-y: auto; overscroll-behavior: contain;
}
#drawer #line { min-height: 0; }
#drawer .handle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: var(--tap); padding: 0 4px; position: relative;
  background: none; border: none; color: var(--ink-soft); text-align: left;
}
#drawer .handle .grab {
  position: absolute; left: 50%; top: 4px; width: 36px; height: 4px;
  margin-left: -18px; border-radius: 2px; background: var(--line-firm);
}
#drawer .handle-words { flex: 1; font-size: 14px; min-width: 0; }
#drawer .handle-words b { color: var(--ink); margin-right: 6px; }
#drawer .chev { flex: none; transition: transform .15s ease; }
#drawer .handle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.bd-next {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.bd-next-lead { font-size: 13px; color: var(--ink-soft); }
.bd-next-lead b { font-weight: 700; color: var(--ink); }
.bd-words { color: var(--ink); font-size: 14.5px; line-height: 1.35; }
.bd-words:empty { display: none; }
.board-card-why { color: var(--warn); font-size: 14px; line-height: 1.35; font-weight: 600; }
.bd-actions { display: flex; flex-direction: column; gap: 8px; }
.bd-actions[hidden] { display: none; }
.bd-actions > button.primary { width: 100%; }
.bd-more { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-more button { flex: 1 1 auto; }
.bd-next .said { font-size: 14px; line-height: 1.35; }

.pane {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 4px 14px 12px;
  color: var(--ink);
}
.pane h4 {
  margin: 14px 0 4px; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 700;
}

/* "Where it is": the seven stages, the current one marked. */
.board-steps { list-style: none; margin: 0; padding: 0; }
.board-steps li {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 10px;
  padding: 6px 0; color: var(--ink-faint); font-size: 14.5px; align-items: center;
}
.board-steps .dot {
  width: 12px; height: 12px; border-radius: 50%; margin-left: 4px;
  border: 2px solid var(--line-firm);
}
.board-steps li.done { color: var(--ink-soft); }
.board-steps li.done .dot { background: var(--ink-soft); border-color: var(--ink-soft); }
.board-steps li.now { color: var(--ink); font-weight: 600; }
.board-steps li.now .dot {
  background: var(--action); border-color: var(--action);
  box-shadow: 0 0 0 4px rgba(133,88,50,.15);
}
.board-steps small { color: var(--ink-faint); font-weight: 400; font-size: 13px; }

/* "Its journey": what has happened, oldest first, the latest marked. */
.board-journey {
  list-style: none; margin: 4px 0 0 4px; padding: 0 0 0 14px;
  border-left: 1px solid var(--line-firm);
}
.board-journey li { position: relative; padding: 0 0 9px 4px; font-size: 14px; }
.board-journey li::before {
  content: ""; position: absolute; left: -19px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--line-firm);
}
.board-journey li.is-now::before {
  background: var(--accent); box-shadow: 0 0 0 3px rgba(47,93,124,.2);
}
.board-journey li span { display: block; color: var(--ink-soft); font-size: 12.5px; }
.board-journey li a { display: block; font-size: 12.5px; color: var(--accent); }

/* ---------------------------------------------------------- the question */

dialog {
  border-radius: var(--r);
  background: var(--card);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
  width: calc(100% - 40px);
  max-width: 340px;
}
dialog h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
dialog p { font-size: 14.5px; }
dialog .row button { flex: 1; }

@media (max-width: 380px) {
  .board-track { flex-basis: 120px; }
  .page { padding-left: 12px; padding-right: 12px; }
}

/* The close mark at the bar's right, and the pill that gives the whole sheet
 * back once it is zoomed in. */
header .close {
  flex: none; width: var(--tap); height: var(--tap); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: none; border-color: transparent;
  color: var(--ink-soft);
}
header .close:hover { background: var(--quiet-soft); color: var(--ink); }
#whole.pill {
  position: fixed; left: 50%; transform: translateX(-50%);
  z-index: 1001; min-height: 40px; padding: 0 16px;
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
  color: var(--ink); background: rgba(255,253,249,.94);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow);
}
#whole.pill[hidden] { display: none; }
.board-steps li { padding: 4px 0; }