/* Logged-in app mockups. Loads after the site's tokens, layout and ui-kit; uses tokens only.
   Separation is by fill and spacing: no card outlines, no accent bars, no underline on the active item. */

/* Phosphor Bold under the regular stylesheet's class names, the same swap the site build makes */
@font-face {
  font-family: "Phosphor";
  src: url("../vendor/phosphor-2.1.2/bold/Phosphor-Bold.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

:root {
  --app-top-h: 72px;
  --app-tabs-h: 72px;
  --app-side-w: 18rem;
  --fs-app-title: clamp(1.875rem, 1.45rem + 1.6vw, 2.75rem);
}

html, body { overflow-x: clip; }

body.app-body { background-color: var(--c-paper); }

/* Mockup flag: on every page, so nobody mistakes a sample for the product */
.mock-flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-4);
  background-color: var(--c-orange-soft);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-align: center;
}

.mock-flag a { color: var(--c-ink); }

.slot { color: var(--c-muted); font-style: italic; }

/* Top bar */
.app-top {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--c-ink);
  border-bottom: var(--header-rail) solid var(--c-orange);
}

.app-top-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--app-top-h);
  padding: 0 var(--space-4);
}

.app-logo { display: inline-flex; flex-shrink: 1; min-width: 0; }
.app-logo img { height: 44px; width: auto; max-width: 100%; }

.app-side-label {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--c-charcoal);
  color: var(--c-on-dark);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.app-side-label .ph { color: var(--c-orange); font-size: 1.2em; }

.app-top-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--c-charcoal);
  color: var(--c-on-dark);
  font-size: 1.5rem;
  text-decoration: none;
}

.icon-btn:hover { background-color: var(--c-orange); color: var(--c-ink); }

.icon-btn .count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.3rem;
  border-radius: 0.7rem;
  background-color: var(--c-orange);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: var(--fw-black);
  line-height: 1.4rem;
  text-align: center;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--c-orange);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 1.05rem;
  text-decoration: none;
  flex-shrink: 0;
}

.app-company {
  display: none;
  flex-direction: column;
  line-height: 1.2;
  color: var(--c-on-dark);
  text-align: right;
}

.app-company strong { font-family: var(--font-display); font-weight: var(--fw-extrabold); }
.app-company span { color: var(--c-on-dark-soft); font-size: var(--fs-sm); }

@media (min-width: 768px) {
  .app-side-label { display: inline-flex; }
  .app-company { display: flex; }
}

/* Shell: sidebar on desktop, tab bar on phones */
.app-shell { display: block; }

.app-side { display: none; }

.app-main {
  min-width: 0;
  padding: var(--space-5) var(--space-4) calc(var(--app-tabs-h) + var(--space-7) + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
  .app-main { padding-inline: var(--space-6); }
}

@media (min-width: 992px) {
  .app-shell {
    display: grid;
    grid-template-columns: var(--app-side-w) minmax(0, 1fr);
    min-height: calc(100vh - var(--app-top-h));
  }

  .app-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-4);
    background-color: var(--c-ink);
    position: sticky;
    top: calc(var(--app-top-h) + var(--header-rail));
    align-self: start;
    height: calc(100vh - var(--app-top-h) - var(--header-rail));
    overflow-y: auto;
  }

  .app-main { padding: var(--space-6) var(--space-7) var(--space-8); }
}

.side-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }

.side-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--c-on-dark);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 1.0625rem;
  text-decoration: none;
}

.side-nav a .ph { font-size: 1.4rem; color: var(--c-orange); flex-shrink: 0; }
.side-nav a:hover { background-color: var(--c-charcoal); color: var(--c-on-dark); }

.side-nav a[aria-current="page"] { background-color: var(--c-orange); color: var(--c-ink); }
.side-nav a[aria-current="page"] .ph { color: var(--c-ink); }

.side-nav .count {
  margin-left: auto;
  min-width: 1.75rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--c-charcoal);
  color: var(--c-on-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  text-align: center;
}

.side-nav a[aria-current="page"] .count { background-color: var(--c-ink); }

.side-foot { margin-top: auto; }

.side-foot .btn { width: 100%; }

.app-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--c-ink);
}

.app-tabs a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--app-tabs-h);
  padding: var(--space-1);
  color: var(--c-on-dark);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 0.8125rem;
  text-decoration: none;
  min-width: 0;
}

.app-tabs a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-tabs .ph { font-size: 1.6rem; }
.app-tabs a[aria-current="page"] { background-color: var(--c-charcoal); color: var(--c-orange); }

.app-tabs .tab-post .ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background-color: var(--c-orange);
  color: var(--c-ink);
}

@media (min-width: 992px) {
  .app-tabs { display: none; }
}

/* Page head */
.app-head { margin-bottom: var(--space-6); }

.app-title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-app-title);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

.app-sub { margin: 0; color: var(--c-muted); }

.app-head .btn-row { margin-top: var(--space-5); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  color: var(--c-orange-text);
  text-decoration: none;
}

/* Cards and grids */
.app-grid { display: grid; gap: var(--space-5); }

@media (min-width: 1200px) {
  .app-grid-2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}

.app-stack { display: grid; gap: var(--space-5); min-width: 0; }

.app-card {
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background-color: var(--c-white);
}

@media (min-width: 768px) {
  .app-card { padding: var(--space-6); }
}

.app-card-ink { background-color: var(--c-ink); color: var(--c-on-dark); }
.app-card-ink h2, .app-card-ink h3 { color: var(--c-on-dark); }

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: var(--fw-extrabold);
}

.card-title .ph { color: var(--c-orange-text); font-size: 1.15em; flex-shrink: 0; }
.app-card-ink .card-title .ph { color: var(--c-orange); }

.card-head .text-link { margin-left: auto; }

/* Rows inside a card: paper fill on white, no rules between them */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.row-item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--c-paper);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

a.row-item:hover { background-color: var(--c-sand); color: inherit; }

.row-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.row-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: var(--fw-extrabold);
  color: var(--c-ink);
  overflow-wrap: anywhere;
}

.row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

.row-meta span { display: inline-flex; align-items: center; gap: var(--space-1); }
.row-meta .ph { color: var(--c-orange-text); font-size: 1.15em; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  background-color: var(--c-sand);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  max-width: 100%;   /* a chip longer than its card wraps inside it instead of widening it (phones) */
}

.chip .ph { font-size: 1.1em; }
.chip-orange { background-color: var(--c-orange-soft); }
.chip-ink { background-color: var(--c-ink); color: var(--c-white); }
.chip-ink .ph { color: var(--c-orange); }
.chip-sample { background-color: var(--c-charcoal); color: var(--c-white); }
.row-item .chip { background-color: var(--c-white); }
.row-item .chip-orange { background-color: var(--c-orange-soft); }
.row-item .chip-ink { background-color: var(--c-ink); }

/* To-do tiles at the top of a dashboard */
.todo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}

@media (min-width: 768px) {
  .todo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.todo a {
  display: grid;
  gap: var(--space-1);
  height: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--c-white);
  color: var(--c-ink);
  text-decoration: none;
}

.todo a:hover { background-color: var(--c-sand); }

.todo .n {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: var(--fw-black);
  line-height: 1;
}

.todo .l {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  line-height: 1.25;
}

.todo .l .ph { color: var(--c-orange-text); font-size: 1.2em; flex-shrink: 0; }

/* Assist (AI) touchpoint: a tinted block inside its card, marked as a draft */
.assist {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--c-orange-soft);
  color: var(--c-ink);
}

.assist-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.assist-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 1.0625rem;
}

.assist-name .ph { font-size: 1.3em; color: var(--c-orange-text); }
.assist .chip { background-color: var(--c-white); }

.assist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.assist-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.assist-list .ph { color: var(--c-orange-text); font-size: 1.2em; margin-top: 0.2em; flex-shrink: 0; }
.assist-list b { font-family: var(--font-display); }
.assist-src { color: var(--c-muted); font-size: var(--fs-sm); }

/* Empty state */
.empty {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--c-paper);
}

.empty .ph-empty { font-size: 2.5rem; color: var(--c-orange-text); }
.empty p { margin: 0; font-weight: var(--fw-semibold); }

/* Definition rows */
.facts { margin: 0; display: grid; gap: var(--space-3); }

.facts div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--c-paper);
}

/* Label beside value only when the list itself is wide enough; in a narrow card (a side column on a wide
   screen) a fixed 11rem label left the value a letter wide, so "Works In" stacked letter by letter */
.facts { container-type: inline-size; }
@container (min-width: 30rem) {
  .facts div { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
}

.facts dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  color: var(--c-ink);
}

.facts dt .ph { color: var(--c-orange-text); font-size: 1.2em; }
.facts dd { margin: 0; overflow-wrap: break-word; }

/* Files */
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

.files a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.25rem;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--c-paper);
  color: var(--c-ink);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  min-width: 0;
}

.files a:hover { background-color: var(--c-sand); }
.files .ph:first-child { font-size: 1.6rem; color: var(--c-orange-text); flex-shrink: 0; }
.files .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files .size { margin-left: auto; color: var(--c-muted); font-size: var(--fs-sm); white-space: nowrap; }

/* Number comparison: one card per shop, side by side from tablet up */
.num-grid { display: grid; gap: var(--space-3); }

@media (min-width: 768px) {
  .num-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.num-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--c-paper);
  min-width: 0;
}

.num-shop { margin: 0; font-family: var(--font-display); font-weight: var(--fw-extrabold); color: var(--c-ink); }

.num-amount {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--c-ink);
}

.num-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--fs-sm); }
.num-lines li { display: flex; align-items: center; gap: var(--space-2); }
.num-lines .ph-check-circle { color: var(--c-orange-text); font-size: 1.25em; }
.num-lines .ph-x-circle { color: var(--c-muted); font-size: 1.25em; }
.num-lines .is-flag { font-weight: var(--fw-bold); color: var(--c-ink); }
.num-lines .is-flag .ph { color: var(--c-orange-text); }

/* Forms: same controls as the site's join form */
.app-form { display: grid; gap: var(--space-5); }

.field { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }  /* start: a taller neighbour in the row never pushes this field down */

.field .req { margin-left: var(--space-1); color: var(--c-orange-text); }

/* Inputs, selects, textareas and labels take the shared control look (ui-kit.css, Controls) */

.field-hint { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }

/* Breathing room between stacked form blocks wherever their parent is plain flow (a card, a fieldset, a
   wrapper div). Grid and flex parents (.app-form, .field-row, .filters, .choices, button rows) space their
   own children with gap, so they are left out. Owner, 1 Oct 2026: "systemwide breathing room near form labels". */
:not(.app-form, .field-row, .filters, .filter-checks, .choices, .chips, .actions, .btn-row, .btn-stack, .app-stack, .app-grid) >
  :is(.field, .field-row, .choice, .choices, .money, div:has(> :is(.field, .field-row):last-child)) +
  :is(.field, .field-row, .choice, .choices, .btn-row, .actions) { margin-top: var(--space-5); }
.field > .field-hint { margin-top: calc(var(--space-1) * -1); }

.field-row { display: grid; align-items: end; gap: var(--space-5) var(--space-4); }  /* end: a label that wraps to two lines never drops its field below its neighbour */

@media (min-width: 576px) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.money { position: relative; }

.money span {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

.field .money input { padding-left: 2.25rem; }

.choices { display: grid; gap: var(--space-2); }

@media (min-width: 576px) {
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .choices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--choice-min-h);
  padding: var(--space-2) var(--control-px);
  border: var(--control-border) solid var(--control-border-color);
  border-radius: var(--control-radius);
  background-color: var(--c-white);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  min-width: 0;
}

.choice:hover { border-color: var(--c-ink); }
.choice:has(input:checked) { border-color: var(--c-orange-text); background-color: var(--c-orange-soft); }
.choice input { flex-shrink: 0; width: 1.25rem; height: 1.25rem; accent-color: var(--c-orange-text); }
.choice .ph { color: var(--c-orange-text); font-size: 1.3em; flex-shrink: 0; }

/* Role tiles on sign-up: equal tiles, icon over a centered label and its two lines (Nicholas, 1 Oct 2026:
   "clean this up, alignment"). The radio stays real and focusable inside its label but is hidden; the tile
   shows the state with the same 2px border throughout, so nothing shifts. Phones: full-width rows, icon left */
.role-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .role-tiles { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
}

.role-tile {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-content: center;
  gap: 2px var(--space-3);
  min-height: var(--choice-min-h);
  margin: 0;
  padding: var(--space-3) calc(var(--space-4) + 1.5rem) var(--space-3) var(--space-4);
  border: var(--control-border) solid var(--c-line);
  border-radius: var(--radius-md);
  background-color: var(--c-paper);
  cursor: pointer;
}

.role-tile input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.role-tile .ph { grid-row: 1 / span 3; align-self: center; font-size: 1.75rem; color: var(--c-orange-text); }
.role-tile strong { grid-column: 2; font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-extrabold); line-height: var(--lh-snug); color: var(--c-ink); text-wrap: balance; }
.role-tile span { grid-column: 2; font-size: var(--fs-sm); line-height: 1.3; color: var(--c-muted); }

/* the check badge: drawn in every state, shown only on the picked tile */
.role-tile::after {
  content: "\e184";  /* ph-check-circle */
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  font-family: "Phosphor";
  font-size: 1.375rem;
  line-height: 1;
  color: var(--c-orange-text);
  opacity: 0;
  pointer-events: none;
}

.role-tile:hover { border-color: var(--c-charcoal); }
.role-tile:has(input:checked) { border-color: var(--c-ink); background-color: var(--c-orange-soft); }
.role-tile:has(input:checked)::after { opacity: 1; }
.role-tile:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

@media (min-width: 768px) {
  .role-tile {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    gap: var(--space-1);
    min-height: 11rem;  /* one- or two-line labels: the same tile */
    padding: var(--space-5) var(--space-4);
    text-align: center;
  }

  .role-tile .ph { grid-row: auto; margin-bottom: var(--space-1); }
  .role-tile strong, .role-tile span { grid-column: 1; }
  .role-tile strong { margin-bottom: var(--space-1); }

  .role-tile::after { top: var(--space-2); right: var(--space-2); transform: none; }
}

/* Upload drop zone: a filled well, not a dashed outline */
.drop {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--c-sand);
  text-align: center;
}

.drop .ph { font-size: 2.5rem; color: var(--c-orange-text); }
.drop p { margin: 0; font-weight: var(--fw-semibold); }

/* Steps on sign-up: plain text, no numbered pills */
.steps-text { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: var(--fw-extrabold); color: var(--c-orange-text); }

/* Login and sign-up pages: no app shell */
.auth-top {
  background-color: var(--c-ink);
  border-bottom: var(--header-rail) solid var(--c-orange);
}

.auth-top .app-top-inner { justify-content: space-between; }

.auth-top .text-link { color: var(--c-orange); }

.auth-wrap {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
}

.auth-wrap-wide { max-width: 52rem; }

.auth-card { padding: var(--space-5); border-radius: var(--radius-lg); background-color: var(--c-white); }

@media (min-width: 576px) {
  .auth-card { padding: var(--space-7); }
}

.auth-alt {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.btn-stack { display: grid; gap: var(--space-3); justify-items: start; }
.btn-stack:has(> form) { justify-items: stretch; width: max-content; max-width: 100%; }  /* a stack of form buttons (Sides, Export): every button as wide as the longest */
.btn-stack > form > .btn { width: 100%; }

@media (max-width: 575.98px) {
  .btn-stack .btn-cta { width: 100%; }
}

.or { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--c-muted); font-weight: var(--fw-bold); }

/* Sticky action bar on the job request page, phones only */
.action-bar {
  position: sticky;
  bottom: calc(var(--app-tabs-h) + env(safe-area-inset-bottom));
  z-index: 10;
  margin: var(--space-5) calc(-1 * var(--space-4)) 0;
  padding: var(--space-3) var(--space-4);
  background-color: var(--c-ink);
}

.action-bar .btn { width: 100%; }

@media (min-width: 992px) {
  .action-bar { display: none; }
}

.visually-hidden-focusable:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* Single-column grids take minmax(0, 1fr) so a long file name truncates instead of widening the column */
.app-grid, .app-stack, .app-form, .rows, .row-item, .files, .facts, .num-grid, .assist, .assist-list, .empty { grid-template-columns: minmax(0, 1fr); }
.files li { min-width: 0; }

@media (min-width: 768px) {
  .num-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .app-grid-2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

@media (min-width: 1200px) {
  .app-grid-2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* Narrowest phones (320px): tighter gutters so labels stay whole */
@media (max-width: 359.98px) {
  .app-main { padding-inline: var(--space-3); }
  .app-card, .auth-card { padding: var(--space-4); }
  .assist { padding: var(--space-3); }
  .app-tabs a { font-size: 0.6875rem; }
  .btn { --bs-btn-padding-x: var(--space-3); }
}

/* File names wrap rather than hide: the name is how a shop knows which sheet it is */
.files .name { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 359.98px) {
  .action-bar { margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3); }
}

/* Every tab icon takes the same box, so the Post label lines up with its neighbors */
.app-tabs .ph { display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; }

/* Number cards: the actions sit on the card's foot as full-width buttons, Award first, so the three
   columns line up and every button is one width (owner: equal-width stacked buttons) */
.num-card { display: flex; flex-direction: column; }
.num-text { display: grid; gap: var(--space-1); }
.num-text strong { font-family: var(--font-display); color: var(--c-ink); }
.num-text p { margin: 0; }
.actions.num-actions { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding-top: var(--space-2); }
.num-actions .inline-form { display: block; }
.num-actions .btn { width: 100%; }

/* A card head holding only a title and its "See All" link: the link sits right while there is room and
   starts the next line on the left when there is not, instead of hanging alone at the right edge */
.card-head:has(> .text-link:nth-child(2):last-child) { justify-content: space-between; }
.card-head:has(> .text-link:nth-child(2):last-child) > .text-link { margin-left: 0; }

/* Side column cards (the narrow second column of a two-column page): stacked calls to action fill the card,
   so Revise, Withdraw and Message line up as one width */
@media (min-width: 1200px) {
  .app-grid-2 > :last-child .app-card :is(.btn-cta, .btn-stack) { width: 100%; }
  .app-grid-2 > :last-child .app-card .btn-stack { justify-items: stretch; }
  .app-grid-2 > :last-child .app-card .btn-stack .btn { width: 100%; }
}

/* Segmented tabs (Matches, Directory, My Posts): one row of equal tabs on wider screens. Phones: two across
   when the count is even, one across when odd (long labels like "Needs I Posted" never truncate), three
   across for short labels (.tabs-short) */
.btn-row[role="tablist"] { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* A tab fills its grid cell, so its side padding only decides where a label starts to truncate: keep it
   small, so "Contractors (1,378)" fits a quarter of the Directory row */
.btn-row[role="tablist"] > .btn { width: 100%; --bs-btn-padding-x: var(--space-2); }

/* Tablets and small laptops, where the side nav leaves the row too narrow for every counted label on one
   line: four tabs (Directory) two by two, five (My Jobs) three and two, and long labels (Matches) two across
   with an odd last tab the full width */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .btn-row[role="tablist"]:is(:has(> .btn:nth-child(4):last-child), .tabs-long) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-row[role="tablist"].tabs-long > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .btn-row[role="tablist"]:has(> .btn:nth-child(5)) { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .btn-row[role="tablist"] { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .btn-row[role="tablist"]:has(> .btn:nth-child(2):last-child),
  .btn-row[role="tablist"]:has(> .btn:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-row[role="tablist"].tabs-short { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The public search tabs' phone size: "Expired (0)" fits three across, "Contractors (1,378)" two across */
  .btn-row[role="tablist"] > .btn { --bs-btn-font-size: 0.9375rem; --bs-btn-padding-x: var(--space-2); }
}

/* Long forms on phones and tablets: the Save / Post buttons ride along at the foot of the screen, above the
   tab bar, until the form's own end scrolls into view. Two buttons sit side by side so the bar stays short */
@media (max-width: 991.98px) {
  .form-actions {
    position: sticky;
    bottom: calc(var(--app-tabs-h) + env(safe-area-inset-bottom));
    z-index: 10;
    margin-inline: calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4);
    background-color: var(--c-paper);
    box-shadow: 0 -10px 24px rgb(46 46 46 / 0.12);
  }
  .form-actions:has(> :nth-child(2)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .form-actions > .btn { width: 100%; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .form-actions { margin-inline: calc(-1 * var(--space-6)); padding-inline: var(--space-6); }
}

/* Count tiles: the icon sits in the tile's top right, beside the number, so the label gets the tile's full
   width and "Typical Production Hours a Month" wraps by word, not into a narrow column beside the icon */
.todo a { position: relative; }
.todo .l .ph { position: absolute; top: var(--space-4); right: var(--space-4); font-size: 1.5rem; }
.todo .n { padding-right: 2rem; }

/* Empty states: the icon reads as an icon and the title as a heading (the kit styled .ph-empty, which the
   component never output, so every empty state showed a text-size icon) */
.empty > .ph:first-child { font-size: 2.5rem; line-height: 1; color: var(--c-orange-text); }
.empty > p:first-of-type strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--fw-extrabold); color: var(--c-ink); }
.empty + * { margin-top: var(--space-4); }

/* A grid of equal link buttons (Admin sections): fills the card's width, every button one width */
.btn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-3); }
.btn-grid > .btn { width: 100%; }

/* A list of rows two across on wide screens (Directory results) */
@media (min-width: 1200px) {
  .rows-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Invite to Bid: the job picker and its button on one line, button the same 44px as the picker */
.actions.invite-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.actions.invite-form > .btn:only-of-type:first-of-type { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 575.98px) {
  .actions.invite-form { grid-template-columns: minmax(0, 1fr); }
  .actions.invite-form > .btn { width: 100%; }
}

/* Checkbox and radio tiles size to the space they are in, not the screen: one across in a narrow card, two
   in a half-width card, three across only where three fit. Owner, 1 Oct 2026: no "Fabricatio|n" clipping,
   no labels stacked a word per line. Tiles outside a .field keep the screen-width rules above. */
.field:has(> .choices) { container-type: inline-size; }
@container (max-width: 29.99rem) { .choices { grid-template-columns: minmax(0, 1fr); } }
@container (min-width: 30rem) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 46rem) { .choices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A row of fields where one carries a hint: line the fields up by their tops, so the hint under one does
   not lift its neighbour's label */
.field-row:has(> .field > .field-hint) { align-items: start; }

/* Month grid on Post Open Time: the month reads on one line, centred on its two inputs */
.month-grid tbody th[scope="row"] { white-space: nowrap; vertical-align: middle; }

/* Phone tab bar: the same new-item counts the side nav shows, as a badge on the tab's icon */
.app-tabs a { position: relative; }
.app-tabs .tab-count {
  position: absolute;
  top: 6px;
  left: calc(50% + 0.5rem);
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 0.625rem;
  background-color: var(--c-orange);
  color: var(--c-ink);
  font-size: 0.75rem;
  font-weight: var(--fw-black);
  line-height: 1.25rem;
  text-align: center;
}
@media (max-width: 575.98px) {
  /* Short labels in an odd count (My Jobs): two across, the last one full width */
  .btn-row[role="tablist"].tabs-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-row[role="tablist"].tabs-pairs > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.num-card.is-compact { padding: var(--space-3); }
.num-card.is-compact .num-amount { font-size: 1.375rem; }
.num-card.is-compact .num-shop { line-height: 1.25; }

/* Log In card: Log In and Email Me a Login Link run the width of the fields above them, like the demo
   buttons below */
.auth-card .btn-stack { justify-items: stretch; width: 100%; }
.auth-card .btn-stack .btn-cta { width: 100%; }

/* Page-head actions: four (a job's Compare, Edit, Find Installers, Duplicate) sit two by two at one width
   instead of three and one left alone; four across would cut "Compare Numbers (3)" short */
@media (min-width: 576px) {
  .app-head .btn-row:not([role="tablist"]):has(> :nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, var(--btn-w))); }
  .app-head .btn-row:not([role="tablist"]):has(> :nth-child(4)) > :is(.btn-cta, form),
  .app-head .btn-row:not([role="tablist"]):has(> :nth-child(4)) > form > .btn-cta { width: 100%; }
}

/* A call to action that posts (Cancel Plan, Mark Checked, Message) sits in a one-button form: the form steps
   out of the row's layout, so its button takes the same width as a link beside it instead of its label's */
.btn-row > form:has(> .btn-cta):not(:has(:is(select, textarea, input:not([type="hidden"])))) { display: contents; }

/* Availability: while Edit is closed, Close and Delete sit on its line, all three one width */
.window-edit > summary { width: 8rem; justify-content: center; }
.window-edit + .actions .btn { width: 8rem; justify-content: center; }
.window-edit:not([open]) + .actions { margin-top: calc(-1 * var(--control-h-sm)) !important; padding-left: calc(8rem + var(--space-2)); }

/* Forms on an ink card: labels and hints in the light text, not charcoal on charcoal */
.app-card-ink :is(.field > label, .field > legend) { color: var(--c-on-dark); }
.app-card-ink .field-hint { color: rgb(255 255 255 / 0.72); }

/* A legend is not a grid item, so the fieldset's gap never reached it: give it the same room a label gets */
fieldset.field > legend { margin-bottom: var(--space-2); }

/* A section title followed straight by a field in plain flow (Join's Shop Profile): the same room a title
   gets in a grid form, instead of the label touching the title */
:not(.app-form, .field-row, .filters) > .card-title + :is(.field, .field-row) { margin-top: var(--space-4); }

/* The side column's own action row (Post Request beside its form card) fills the column like the cards' */
@media (min-width: 1200px) {
  .app-grid-2 > :last-child > .btn-row .btn-cta { width: 100%; }
}

/* Phones: the sticky Save / Cancel pair keeps whole labels ("Save Changes") at half width each */
@media (max-width: 575.98px) {
  .form-actions .btn { --bs-btn-font-size: 1rem; --bs-btn-padding-x: var(--space-2); }
  .app-tabs a span { font-size: 0.75rem; }
  .btn-row[role="tablist"].tabs-long { grid-template-columns: minmax(0, 1fr) !important; }  /* beats the two-across :has() rule */
}

/* Cards side by side in a row stretch to the row's height and pin their last block (the actions, or a
   capacity month's match count) to the foot, so buttons line up across the row. Owner, 1 Oct 2026:
   "fixed heights on things like this so the buttons are all on the same row". Match cards and number
   cards do the same with .match-actions and .num-actions. */
.rows-2 > .row-item { display: flex; flex-direction: column; gap: var(--space-2); }
.rows-2 > .row-item > :last-child { margin-top: auto !important; }  /* beats a utility mt-* on the invite row */
.cap-month { display: flex; flex-direction: column; }
.cap-month > .chips:last-child { margin-top: auto; }

/* Same rule for photo tiles in a profile editor and the placement rate cards: Remove / Book buttons share
   the row's foot however long the caption or the card */
.photo-cell { display: flex; flex-direction: column; }
.photo-cell > form:last-child { margin-top: auto !important; padding-top: var(--space-1); }
.app-card.rate-card { display: flex; flex-direction: column; }  /* beats sponsor.css, loaded later */
.app-card.rate-card > :last-child { margin-top: auto; }

/* A shop's Google rating (shop._rating): stars as text, the count linked to Google Maps, Google named */
.google-rating { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.google-rating .stars { color: var(--c-orange-text); letter-spacing: 0.05em; }
.google-rating .google-attribution { color: var(--c-muted); font-size: 0.875em; }

/* Find a Shop and Find Installers result cards: two equal columns, each card a column as tall as its row,
   the buttons on its foot, so they line up across the row (owner, 1 Oct 2026: fixed heights, buttons on one row) */
.results-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 768px) { .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.result-card { display: flex; flex-direction: column; gap: var(--space-3); }
.result-card > * { margin: 0; }
.result-card > .btn-row { margin-top: auto; padding-top: var(--space-2); }

/* A rating inside a line of muted details reads as one more detail, not as a link shouting in orange */
.row-meta .google-rating .text-link, .facts .google-rating .text-link { color: var(--c-ink); font-weight: var(--fw-semibold); }

/* Facts holding several names (projects, clients): one per line, no bullets, like every other facts row */
.facts .fact-lines { display: grid; gap: var(--space-1); }

/* Claim Sent: one check above the title */
.claim-sent-icon { margin: 0 0 var(--space-3); font-size: 2.5rem; line-height: 1; color: var(--c-orange-text); }

/* Claim page: the place and the specialties sit together under the title, not spread out by the form rhythm */
.claim-meta { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.claim-meta > * { margin: 0; }

/* The public search tabs (Find a Shop, Installers, Contractors, Vendors, Work): five equal tabs on a wide
   screen, three across on a tablet, two across on a phone with the fifth full width. Scoped past the
   .app-head .btn-row grid for four or more buttons, which would otherwise make them two across everywhere */
.app-head .btn-row.tabs-row.tabs-public:not([role]) { display: grid; gap: var(--space-2); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.app-head .btn-row.tabs-row.tabs-public:not([role]) > .btn { width: 100%; min-width: 0; }
@media (max-width: 1199.98px) { .app-head .btn-row.tabs-row.tabs-public:not([role]) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .app-head .btn-row.tabs-row.tabs-public:not([role]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* "Find Contractors" fits a half-width tab only without its icon and a step down in size */
  .app-head .btn-row.tabs-row.tabs-public:not([role]) > .btn { --bs-btn-padding-x: var(--space-2); --bs-btn-font-size: 0.9375rem; }
  .app-head .btn-row.tabs-row.tabs-public:not([role]) > .btn > .ph { display: none; }
  .app-head .btn-row.tabs-row.tabs-public:not([role]) > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Plan page: the plan cards are peers, not a main column and a side column. Equal columns, each card as
   tall as its row, its Choose This Plan button (or form) on the card's foot so the buttons line up across
   the row (owner, 1 Oct 2026: fixed heights, buttons on one row) */
@media (min-width: 1200px) {
  .plan-side > .app-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
.plan-side > .app-grid-2 > .app-card { display: flex; flex-direction: column; }
.plan-side > .app-grid-2 > .app-card > :is(.btn-row, form):last-child { margin-top: auto !important; padding-top: var(--space-4); }