/* The signed-in app's controls, tables and dialogs.
 *
 * Written after the founder said, more than once, that the dashboard looked generic. It
 * did, and the reason was specific: every control was a browser default with a border
 * drawn round it. A native checkbox, a native radio, an input at whatever height the
 * browser chose, buttons at three different sizes because each was written where it was
 * needed. That is what "generated" looks like - not a colour, an absence of decisions.
 *
 * So the decisions, in one file, applied to the whole app:
 *
 *   Control height   36px small, 42px default. Nothing else.
 *   Radius           8px on controls, 12px on containers, 999px on pills only.
 *   Focus            a 3px mint ring at 18% - never the browser outline, never none.
 *   Borders          one hairline token; a second, darker one only on hover.
 *   Density          tables at 38px rows; long values truncate rather than stretch.
 *
 * Loaded after styles.css, so it wins on equal specificity by position.
 */

.dash-body {
  --ctl-h: 42px;
  --ctl-h-sm: 36px;
  --ctl-r: 9px;
  --ring: 0 0 0 3px rgba(52, 211, 153, .18);
  --line-2: rgba(11, 31, 42, .2);
  --row-h: 38px;
}

/* --- inputs ------------------------------------------------------------------------ */
.dash-body input[type="text"],
.dash-body input[type="email"],
.dash-body input[type="password"],
.dash-body input[type="number"],
.dash-body input[type="search"],
.dash-body select,
.dash-body textarea {
  height: var(--ctl-h);
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--ctl-r);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .93rem;
  width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
  -webkit-appearance: none;
  appearance: none;
}
.dash-body textarea { height: auto; padding: 11px 13px; line-height: 1.55; resize: vertical; }
.dash-body input:hover:not(:disabled), .dash-body select:hover, .dash-body textarea:hover {
  border-color: var(--line-2);
}
.dash-body input:focus, .dash-body select:focus, .dash-body textarea:focus {
  outline: none;
  border-color: var(--mint);
  box-shadow: var(--ring);
}
.dash-body input::placeholder, .dash-body textarea::placeholder { color: var(--ink-3); }
.dash-body input:disabled { background: rgba(11,31,42,.03); color: var(--ink-3); }

/* A select should look like a control, not like a system dropdown from 2009. */
.dash-body select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235E6C77' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
}

/* --- checkboxes and radios --------------------------------------------------------- */
/* Drawn rather than inherited: the native controls are the single most recognisable sign
   that nobody looked at the page. */
.dash-body input[type="checkbox"],
.dash-body input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  border: 1.5px solid var(--line-2);
  background: #fff;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
  display: inline-grid;
  place-content: center;
}
.dash-body input[type="checkbox"] { border-radius: 5px; }
.dash-body input[type="radio"] { border-radius: 50%; }
.dash-body input[type="checkbox"]::before {
  content: "";
  width: 10px; height: 10px;
  transform: scale(0);
  transition: transform .1s ease;
  box-shadow: inset 10px 10px #fff;
  clip-path: polygon(15% 48%, 8% 58%, 38% 86%, 92% 24%, 84% 16%, 37% 70%);
}
.dash-body input[type="radio"]::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  transform: scale(0);
  transition: transform .1s ease;
  box-shadow: inset 8px 8px #fff;
}
.dash-body input[type="checkbox"]:checked,
.dash-body input[type="radio"]:checked {
  background: var(--mint-deep);
  border-color: var(--mint-deep);
}
.dash-body input[type="checkbox"]:checked::before,
.dash-body input[type="radio"]:checked::before { transform: scale(1); }
.dash-body input[type="checkbox"]:hover, .dash-body input[type="radio"]:hover {
  border-color: var(--mint-deep);
}
.dash-body input[type="checkbox"]:focus-visible,
.dash-body input[type="radio"]:focus-visible { box-shadow: var(--ring); outline: none; }

/* --- buttons ------------------------------------------------------------------------ */
/* Two sizes, three roles. Every button in the app is one of these. */
.dash-body .btn {
  height: var(--ctl-h);
  padding: 0 18px;
  border-radius: var(--ctl-r);
  font-size: .92rem;
  font-weight: 650;
  letter-spacing: -.005em;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.dash-body .btn:hover { transform: none; }        /* no lift: this is a tool, not a landing page */
.dash-body .btn-sm { height: var(--ctl-h-sm); padding: 0 14px; font-size: .86rem; }
.dash-body .btn-mint { background: var(--mint-deep); color: #fff; box-shadow: none; }
.dash-body .btn-mint:hover { background: #0d6a60; }
.dash-body .btn-mint:disabled { background: rgba(11,31,42,.12); color: var(--ink-3); }
.dash-body .btn-dark { background: var(--navy); color: #fff; }
.dash-body .btn-dark:hover { background: var(--navy-2); }
.dash-body .btn-ghost-ink {
  background: #fff; color: var(--ink); border-color: var(--line);
}
.dash-body .btn-ghost-ink:hover { border-color: var(--line-2); background: #fff; }
.dash-body .btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* --- the results table --------------------------------------------------------------- */
/* Denser, quieter, and it no longer relies on a horizontal scrollbar to be usable: long
   values are truncated in the cell and the whole record is one click away. */
.p-scroll { border-radius: 12px; border-color: var(--line); }
.p-scroll table { font-size: .875rem; }
.p-scroll th, .p-scroll td {
  height: var(--row-h);
  padding: 0 14px;
  border-bottom: 1px solid rgba(11,31,42,.06);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-scroll thead th {
  height: 34px;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: none;                      /* uppercase mono headers read as a debug view */
  color: var(--ink-3);
  background: #FBFAF7;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(11,31,42,.04);
  white-space: nowrap;
}
.p-scroll thead th:hover { color: var(--ink); background: #F5F3EE; }
.p-scroll tbody tr:last-child td { border-bottom: 0; }
.p-scroll tbody tr:hover td { background: rgba(52,211,153,.06); }
.p-scroll td.num, .p-scroll th.num { text-align: right; font-variant-numeric: tabular-nums; }
.p-scroll td.nil { color: rgba(11,31,42,.28); }
/* One number for the tick column's width and for where the pinned column starts. They
   were both written as 38px in two places and the cell's own horizontal padding pushed the
   real width past it, so a scrolled table wedged the previous column's digits into the
   gap - the "overlapping Place ID" in the founder's screenshot. */
:root { --pick-w: 38px; }
.p-scroll .pick {
  width: var(--pick-w); min-width: var(--pick-w); max-width: var(--pick-w);
  padding-left: 0; padding-right: 0; text-align: center;
}
/* The first column carries the name; keep it in view while the rest scrolls. */
.p-scroll td:nth-child(2), .p-scroll th:nth-child(2) {
  position: sticky; left: var(--pick-w); z-index: 1; font-weight: 600;
  box-shadow: 1px 0 0 rgba(11,31,42,.06);
}
.p-scroll thead th:nth-child(2) { z-index: 3; }
.p-scroll .pick { position: sticky; left: 0; z-index: 1; background: var(--paper); }
.p-scroll thead .pick { z-index: 3; background: #FBFAF7; }
.p-scroll tbody tr:hover td:nth-child(2), .p-scroll tbody tr:hover .pick {
  background: #F2FBF7;
}

/* --- dialogs -------------------------------------------------------------------------- */
/* Centred and sized to their content. A full-height sheet for four choices was a lot of
   furniture for a small decision. */
.p-sheet {
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 30, 24, .5);
  backdrop-filter: blur(2px);
}
.p-sheet-in {
  width: min(560px, 100%);
  height: auto;
  max-height: min(86vh, 760px);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 40px 80px -30px rgba(7,30,24,.5);
  display: flex;
  flex-direction: column;
}
.p-sheet-head { background: var(--paper); border-radius: 16px 16px 0 0; padding: 18px 22px; }
.p-sheet-body { padding: 4px 22px 22px; overflow-y: auto; }
.p-x { border-radius: 8px; color: var(--ink-2); }
.p-x:hover { background: rgba(11,31,42,.05); }

/* Format as a chooser, not five buttons that each do something. */
.p-x-formats { grid-template-columns: 1fr 1fr; gap: 8px; }
.p-x-fmt {
  border-radius: 10px; padding: 11px 13px; gap: 1px;
  border-color: var(--line); transition: border-color .12s ease, background .12s ease;
}
.p-x-fmt b { font-size: .88rem; font-weight: 650; }
.p-x-fmt span { font-size: .78rem; line-height: 1.4; }
.p-x-fmt.on { border-color: var(--mint-deep); background: rgba(52,211,153,.09); }
.p-x-fmt.on b { color: var(--mint-deep); }
.p-x-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p-x-opts label {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  gap: 10px; cursor: pointer;
}
.p-x-opts label:has(input:checked) { border-color: var(--mint-deep); background: rgba(52,211,153,.07); }
.p-x-opts label span { font-size: .88rem; }
.p-x-opts label em { margin-left: auto; font-style: normal; font-size: .82rem;
  color: var(--ink-3); font-variant-numeric: tabular-nums; }
.p-x-group h5 { margin-bottom: 8px; }
.p-x-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 22px; border-top: 1px solid var(--line); background: #FBFAF7;
  border-radius: 0 0 16px 16px;
}
.p-x-foot .p-x-file {
  font-family: var(--font-mono); font-size: .78rem; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.p-x-foot .btn { margin-left: auto; }
.p-x-note { margin: 14px 0 0; font-size: .8rem; color: var(--ink-3); line-height: 1.5; }

/* --- the run screen's smaller parts --------------------------------------------------- */
.p-search { border-radius: 12px; }
.p-search input, .p-search textarea { height: 52px; padding: 0 18px; border-radius: 0;
  box-shadow: none; }
.p-search input:focus, .p-search textarea:focus { box-shadow: none; }
.p-search textarea { height: auto; padding: 15px 18px; }
.p-go { height: 52px; border-radius: 0; }
.p-cost { font-size: .85rem; }
.p-stats { font-size: .85rem; }
.p-rid { background: rgba(11,31,42,.05); padding: 2px 7px; border-radius: 5px; }

/* The history, wherever it sits, is a companion - never the tallest thing on the page. */
.p-history h4 { margin-bottom: 6px; }
.p-run-item { padding: 8px 0; }
.p-run-item b { font-size: .84rem; font-weight: 650; }
.p-run-item span, .p-run-item em { font-size: .78rem; }

/* === Form fields ====================================================================
   A field is a made thing here, not a box with a border: it says what kind of value it
   holds, it can be emptied without selecting its contents, numbers have buttons rather
   than the browser's four-pixel spinner arrows, and focus moves the border, the ring and
   the icon together. */
.dash-body .p-field { position: relative; }
.dash-body .f-wrap { position: relative; display: flex; align-items: center; }
.dash-body .f-wrap input,
.dash-body .f-wrap textarea { width: 100%; }
.dash-body .f-wrap.has-icon input,
.dash-body .f-wrap.has-icon textarea { padding-left: 36px; }
.dash-body .f-ic {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; color: var(--ink-3); pointer-events: none;
  transition: color .12s ease;
}
.dash-body .f-wrap textarea + .f-ic,
.dash-body .f-wrap.is-area .f-ic { top: 13px; transform: none; }
.dash-body .f-wrap:focus-within .f-ic { color: var(--mint-deep); }

/* Clear, on a field with something in it. */
.dash-body .f-clear {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; display: none; place-items: center;
  border: 0; border-radius: 6px; background: none; color: var(--ink-3);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0;
}
.dash-body .f-wrap.filled .f-clear { display: grid; }
.dash-body .f-clear:hover { background: rgba(11,31,42,.07); color: var(--ink); }
.dash-body .f-wrap.filled input { padding-right: 32px; }

/* Numbers get buttons. The native spinner is two arrows four pixels tall that appear on
   hover and are invisible on a touchscreen. */
.dash-body input[type="number"] { -moz-appearance: textfield; padding-right: 60px; }
.dash-body input[type="number"]::-webkit-outer-spin-button,
.dash-body input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dash-body .f-step {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 2px;
}
/* 30px is the floor for something a thumb has to hit. */
.dash-body .f-step button {
  width: 24px; height: 30px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--ink-2); font: inherit; font-size: 13px; line-height: 1;
  cursor: pointer; padding: 0; display: grid; place-items: center;
}
.dash-body .f-step button:hover { border-color: var(--mint-deep); color: var(--mint-deep); }
.dash-body .f-step button:active { background: rgba(52,211,153,.12); }

/* Required is a fact, not a warning: a small mint dot, not a red star. */
.dash-body .p-field i { color: transparent; position: relative; width: 6px; height: 6px;
  display: inline-block; }
.dash-body .p-field i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--mint-deep); opacity: .75;
}

/* === Typed cells ====================================================================
   A rating, a count, a website and an id are different kinds of thing and are drawn as
   different kinds of thing. Everything below is one rule per kind - there is no styling
   here that is not carrying information. */
.dash-body .c-nil { color: rgba(11,31,42,.26); }
.dash-body .c-mono, .dash-body .c-id {
  font-family: var(--font-mono); font-size: .8rem; font-variant-numeric: tabular-nums;
}
.dash-body .c-id { color: var(--ink-3); }
.dash-body .c-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: rgba(11,31,42,.055); font-size: .78rem; color: var(--ink-2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: middle;
}
.dash-body .c-status {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .76rem;
  font-weight: 600;
}
.dash-body .c-status.ok { background: rgba(52,211,153,.16); color: var(--mint-deep); }
.dash-body .c-status.bad { background: rgba(185,28,28,.09); color: #B91C1C; }
.dash-body .c-status.mid { background: rgba(11,31,42,.055); color: var(--ink-2); }
.dash-body .c-bool { font-size: .8rem; font-weight: 600; }
.dash-body .c-bool.yes { color: var(--mint-deep); }
.dash-body .c-bool.no { color: var(--ink-3); }
.dash-body .c-link {
  display: inline-flex; align-items: center; gap: 5px; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid rgba(11,31,42,.18);
}
.dash-body .c-link:hover { color: var(--mint-deep); border-bottom-color: var(--mint); }
.dash-body .c-link svg { opacity: .45; flex: none; }
.dash-body .c-when { color: var(--ink-2); font-size: .82rem; }
/* The rating reads before it is read: the bar carries the value, the number confirms it. */
.dash-body .c-rate { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.dash-body .c-rate b { font-variant-numeric: tabular-nums; font-weight: 650; }
.dash-body .c-bar {
  display: block; width: 38px; height: 4px; border-radius: 99px;
  background: rgba(11,31,42,.08); overflow: hidden; flex: none;
}
.dash-body .c-bar u { display: block; height: 100%; background: var(--mint-deep); }

/* === The header and the row ========================================================= */
.dash-body .p-scroll thead th { padding: 0 14px; }
.dash-body .th-in { display: inline-flex; align-items: center; gap: 6px; }
.dash-body .th-sort { font-style: normal; opacity: 0; font-size: .8em; transition: opacity .12s ease; }
.dash-body .p-scroll thead th:hover .th-sort { opacity: .55; }
.dash-body .p-scroll thead th.sorted { color: var(--ink); }
.dash-body .p-scroll thead th.sorted .th-sort { opacity: 1; color: var(--mint-deep); }
.dash-body .p-scroll th.num .th-in { justify-content: flex-end; width: 100%; }
.dash-body .th-open, .dash-body .td-open { width: 62px; padding-right: 12px; }
.dash-body .row-open {
  opacity: 0; font-size: .78rem; font-weight: 650; color: var(--mint-deep);
  transition: opacity .12s ease; white-space: nowrap;
}
.dash-body tbody tr:hover .row-open { opacity: 1; }
/* The pinned first column casts a shadow only once something has scrolled behind it. */
.dash-body .p-scroll td:nth-child(2), .dash-body .p-scroll th:nth-child(2) { box-shadow: none; }
.dash-body .p-scroll.scrolled td:nth-child(2),
.dash-body .p-scroll.scrolled th:nth-child(2) { box-shadow: 6px 0 8px -6px rgba(11,31,42,.18); }

/* The pager's rows-per-page select is a toolbar control, not a form field. Without this it
   inherits the form rules above - width:100% and the 42px control height - which squeezed
   the words "Rows per page" beside it onto three lines. */
.dash-body .pg-size select {
  width: auto; height: 30px; padding: 0 26px 0 9px; font-size: .84rem; font-weight: 600;
}
.dash-body .pg-size { white-space: nowrap; }