/* PrepSheet shared brand layer, 2026-09-11.
   Loaded after each page's existing CSS. It changes the shared visual language while
   leaving page-specific grids, calculator behaviour, print visibility and copy alone. */

/* The route families covered by this file all expose one of these stable roots. The
   selector keeps the operator admin panel outside the public brand layer. */
body:has(.topbar),
body:has(.nav),
body:has(.shell),
body:has(.tool) {
  --ps-bg: #fbfbfa;
  --ps-surface: #f0f1ef;
  --ps-surface-2: #e7e9e6;
  --ps-paper: #ffffff;
  --ps-ink: #242d29;
  --ps-muted: #57605c;
  --ps-line: #d8dcd8;
  --ps-line-strong: #b9c2bc;
  --ps-green: #315e49;
  --ps-green-dark: #244a39;
  --ps-danger: #9b3b31;
  --bg: var(--ps-bg);
  --bg2: var(--ps-surface);
  --bg3: var(--ps-surface-2);
  --cream: var(--ps-paper);
  --cream2: #f5f6f4;
  --ink: var(--ps-ink);
  --text: var(--ps-ink);
  --muted: var(--ps-muted);
  --dim: #68716b;
  --line: var(--ps-line);
  --line2: var(--ps-line-strong);
  --copper: var(--ps-green);
  --copper-hot: var(--ps-green-dark);
  --copper-deep: var(--ps-green-dark);
  --card-muted: var(--ps-muted);
  --card-link: var(--ps-green-dark);
  --paper: var(--ps-bg);
  --card: var(--ps-paper);
  --green: var(--ps-green);
  --green-dark: var(--ps-green-dark);
  --wash: #e7eee9;
  --dark: var(--ps-green-dark);
  --orange: var(--ps-green);
  --maxw: 1180px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ps-ink);
  background: var(--ps-bg);
  background-image: none;
  font-family: Arial, Helvetica, sans-serif;
}

html:has(body > .topbar),
html:has(body > .nav),
html:has(body > .top),
html:has(body > .wrap .tool) {
  background: var(--ps-bg);
}

body:has(.topbar)::before,
body:has(.topbar)::after,
body:has(.nav)::before,
body:has(.nav)::after,
body:has(.shell)::before,
body:has(.shell)::after,
body:has(.tool)::before,
body:has(.tool)::after {
  display: none;
  background-image: none;
}

body:has(.topbar) *,
body:has(.nav) *,
body:has(.shell) *,
body:has(.tool) * {
  box-sizing: border-box;
}

/* Shared chrome. The homepage has its own final workspace layout; these rules only
   align its chrome with the server and static route families. */
body:has(.topbar) .topbar,
body:has(.top) > .top,
body:has(.nav) > .nav {
  background: var(--ps-bg);
  color: var(--ps-ink);
  border-bottom: 1px solid var(--ps-line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body:has(.topbar) .hwrap,
body:has(.topbar) .topbar > .wrap,
body:has(.nav) > .nav,
body:has(.shell) > header.top {
  color: var(--ps-ink);
}

body:has(.topbar) .topbar > .hwrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1392px;
  min-height: 84px;
  height: auto;
  margin: 0 auto;
  padding: 12px 32px;
}

body:has(.topbar) .brand,
body:has(.nav) .brand,
body:has(.shell) .brand {
  display: block;
  color: var(--ps-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  text-decoration: none;
  white-space: nowrap;
}

body:has(.topbar) .brand:hover,
body:has(.nav) .brand:hover,
body:has(.shell) .brand:hover {
  color: var(--ps-ink);
}

/* The old badge is deliberately removed everywhere the shared PrepSheet wordmark is
   emitted. A bare text span remains as the readable logo on the beta pricebook route. */
body:has(.topbar) .brand .mk,
body:has(.topbar) .brand .mark,
body:has(.nav) .brand .mark,
body:has(.shell) .brand .mark {
  display: none;
}

body:has(.topbar) .brand .lt,
body:has(.nav) .brand .lt,
body:has(.shell) .brand .lt {
  color: inherit;
}

body:has(.topbar) .brand small {
  display: block;
  margin-top: 4px;
  color: var(--ps-muted);
  font: 14px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

body:has(.nav) .brand small,
body:has(.shell) .brand small {
  display: block;
  margin-top: 4px;
  color: var(--ps-muted);
  font: 14px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

body:has(.topbar) .topbar nav,
body:has(.nav) .navlinks,
body:has(.shell) .top nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 28px;
  color: var(--ps-muted);
}

body:has(.topbar) .topbar nav a,
body:has(.nav) .navlinks a,
body:has(.shell) .top nav a {
  color: var(--ps-muted);
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
}

body:has(.topbar) .topbar nav a:hover,
body:has(.nav) .navlinks a:hover,
body:has(.shell) .top nav a:hover {
  color: var(--ps-ink);
}

body:has(.topbar) .topbar nav a.navcta,
body:has(.topbar) .navcta,
body:has(.shell) .navcta {
  background: var(--ps-green);
  color: #fff;
  border-color: var(--ps-green);
}

body:has(.topbar) .topbar nav a.navcta:hover,
body:has(.topbar) .navcta:hover,
body:has(.shell) .navcta:hover {
  background: var(--ps-green-dark);
  color: #fff;
}

/* Inner wrappers keep the old route-specific widths where they are useful, but lose
   the dark page treatment and remain safe at narrow widths. */
body:has(.topbar) main.wrap,
body:has(.tool) > .wrap {
  color: var(--ps-ink);
  background: transparent;
  min-width: 0;
}

body:has(.topbar) main.wrap > .crumbs,
body:has(.topbar) main.wrap > .back {
  color: var(--ps-muted);
}

body:has(.topbar) main.wrap .crumbs [aria-current],
body:has(.topbar) main.wrap .crumbs span:last-child {
  color: var(--ps-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

body:has(.topbar) main.wrap h1,
body:has(.topbar) main.wrap h2,
body:has(.topbar) main.wrap h3,
body:has(.topbar) main.wrap h4,
body:has(.nav) h1,
body:has(.nav) h2,
body:has(.shell) h1,
body:has(.shell) h2,
body:has(.tool) h1,
body:has(.tool) h2 {
  color: var(--ps-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

body:has(.topbar) main.wrap p,
body:has(.topbar) main.wrap li,
body:has(.nav) p,
body:has(.shell) p,
body:has(.tool) p {
  color: var(--ps-ink);
}

body:has(.topbar) main.wrap .muted,
body:has(.topbar) main.wrap .lede,
body:has(.topbar) main.wrap .dlede,
body:has(.topbar) main.wrap .fine,
body:has(.topbar) main.wrap .label,
body:has(.topbar) main.wrap .kicker,
body:has(.nav) .muted,
body:has(.shell) .muted,
body:has(.tool) .muted {
  color: var(--ps-muted);
}

body:has(.topbar) main.wrap a,
body:has(.nav) a,
body:has(.shell) a,
body:has(.tool) a {
  color: var(--ps-green);
  text-decoration-color: rgba(49, 94, 73, .45);
}

body:has(.topbar) main.wrap a:hover,
body:has(.nav) a:hover,
body:has(.shell) a:hover,
body:has(.tool) a:hover {
  color: var(--ps-green-dark);
}

/* Public cards and panels share a quiet ruled surface. Display, grid and flex values
   stay page-owned so calculators and the recipe tool keep their existing controls. */
body:has(.topbar) main.wrap .card,
body:has(.topbar) main.wrap .cream-card,
body:has(.topbar) main.wrap .data-card,
body:has(.topbar) main.wrap .gpcard,
body:has(.topbar) main.wrap .panel,
body:has(.topbar) main.wrap .related,
body:has(.topbar) main.wrap .dstat,
body:has(.topbar) main.wrap .docket2,
body:has(.topbar) main.wrap .freebox,
body:has(.topbar) main.wrap .acard,
body:has(.topbar) main.wrap .prod,
body:has(.topbar) main.wrap .pricebox,
body:has(.tool) > .wrap .tool,
body:has(.shell) .panel,
body:has(.nav) .card,
body:has(.nav) .panel {
  background: var(--ps-surface);
  color: var(--ps-ink);
  border-color: var(--ps-line);
  box-shadow: none;
  border-radius: 2px;
}

body:has(.topbar) main.wrap .cta,
body:has(.topbar) main.wrap .dlbox,
body:has(.topbar) main.wrap .card,
body:has(.topbar) main.wrap .panel,
body:has(.topbar) main.wrap .data-card,
body:has(.topbar) main.wrap .gpcard,
body:has(.topbar) main.wrap .prod {
  box-shadow: none;
}

body:has(.topbar) main.wrap .prod#kitchen-pack,
body:has(.topbar) main.wrap .prod#kitchen-pack h2,
body:has(.topbar) main.wrap .prod#kitchen-pack .blurb,
body:has(.topbar) main.wrap .prod#kitchen-pack ul {
  color: var(--ps-ink);
}

body:has(.topbar) main.wrap .prod h2,
body:has(.topbar) main.wrap .prod .plink,
body:has(.topbar) main.wrap .acard h2,
body:has(.topbar) main.wrap .dstat .dv,
body:has(.topbar) main.wrap .price,
body:has(.topbar) main.wrap .pricebox .pp {
  color: var(--ps-ink);
}

/* Tables stay real tables; only the rule, surface and type treatment is shared. Scroll
   containers are kept so guide and recipe tables do not create document overflow. */
body:has(.topbar) main.wrap .tbl,
body:has(.topbar) main.wrap .scrollx,
body:has(.topbar) main.wrap .table-wrap,
body:has(.topbar) main.wrap .recipe-table-wrap,
body:has(.shell) .table-wrap,
body:has(.shell) .table {
  max-width: 100%;
}

body:has(.topbar) main.wrap table,
body:has(.tool) table,
body:has(.shell) table,
body:has(.nav) table {
  color: var(--ps-ink);
  border-color: var(--ps-line-strong);
}

body:has(.topbar) main.wrap th,
body:has(.topbar) main.wrap td,
body:has(.tool) th,
body:has(.tool) td,
body:has(.shell) th,
body:has(.shell) td,
body:has(.nav) th,
body:has(.nav) td {
  border-color: var(--ps-line-strong);
  color: var(--ps-ink);
  background: transparent;
}

body:has(.topbar) main.wrap th,
body:has(.tool) th,
body:has(.shell) th,
body:has(.nav) th {
  background: var(--ps-surface-2);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-transform: none;
}

body:has(.topbar) main.wrap tbody tr:nth-child(even) td,
body:has(.tool) tbody tr:nth-child(even) td,
body:has(.shell) tbody tr:nth-child(even) td,
body:has(.nav) tbody tr:nth-child(even) td {
  background: #f5f6f4;
}

/* Fields and actions retain their existing sizing and event hooks. */
body:has(.topbar) main.wrap input,
body:has(.topbar) main.wrap select,
body:has(.topbar) main.wrap textarea,
body:has(.tool) input,
body:has(.tool) select,
body:has(.tool) textarea,
body:has(.shell) input,
body:has(.shell) select,
body:has(.shell) textarea {
  background: var(--ps-paper);
  color: var(--ps-ink);
  border-color: var(--ps-line-strong);
  color-scheme: light;
}

body:has(.topbar) main.wrap input::placeholder,
body:has(.topbar) main.wrap textarea::placeholder,
body:has(.tool) input::placeholder,
body:has(.tool) textarea::placeholder,
body:has(.shell) input::placeholder {
  color: var(--ps-muted);
  opacity: 1;
}

body:has(.topbar) main.wrap .btn-primary,
body:has(.topbar) main.wrap .btn.p,
body:has(.topbar) main.wrap .buy,
body:has(.topbar) main.wrap .dl,
body:has(.topbar) main.wrap .dlbtn,
body:has(.topbar) main.wrap .cta button,
body:has(.tool) button.btn-primary,
body:has(.tool) button.button,
body:has(.shell) button.button {
  background: var(--ps-green);
  color: #fff;
  border-color: var(--ps-green);
}

body:has(.topbar) main.wrap .btn-primary:hover,
body:has(.topbar) main.wrap .btn.p:hover,
body:has(.topbar) main.wrap .buy:hover,
body:has(.topbar) main.wrap .dl:hover,
body:has(.topbar) main.wrap .dlbtn:hover,
body:has(.topbar) main.wrap .cta button:hover,
body:has(.tool) button.btn-primary:hover,
body:has(.tool) button.button:hover,
body:has(.shell) button.button:hover {
  background: var(--ps-green-dark);
  color: #fff;
}

body:has(.topbar) main.wrap .btn-ghost,
body:has(.topbar) main.wrap .btn-ghost:hover,
body:has(.topbar) main.wrap .btn.s,
body:has(.topbar) main.wrap .btn.s:hover,
body:has(.topbar) main.wrap .linkbtn {
  background: transparent;
  color: var(--ps-ink);
  border-color: var(--ps-line-strong);
}

body:has(.topbar) main.wrap .error,
body:has(.topbar) main.wrap .bad,
body:has(.tool) .error {
  color: var(--ps-danger);
}

body:has(.topbar) main.wrap .ok,
body:has(.topbar) main.wrap .good,
body:has(.topbar) main.wrap .good {
  color: var(--ps-green);
}

body:has(.topbar) main.wrap .fine {
  color: var(--ps-muted);
}

/* Legacy page styles set emphasis and result values to cream/white for the former
   dark ground. Restore readable ink on the light public surfaces. */
body:has(.topbar) main.wrap strong,
body:has(.topbar) main.wrap b,
body:has(.topbar) main.wrap summary,
body:has(.topbar) main.wrap code,
body:has(.topbar) main.wrap .stat .v,
body:has(.topbar) main.wrap .results .v,
body:has(.topbar) main.wrap .cell-out .v,
body:has(.topbar) main.wrap .ps-head .t,
body:has(.topbar) main.wrap #ps-title.t,
body:has(.topbar) main.wrap .crow .cl,
body:has(.topbar) main.wrap .crow.net {
  color: var(--ps-ink);
}

body:has(.topbar) main.wrap code {
  background: var(--ps-surface-2);
}

body:has(.topbar) main.wrap .v.good,
body:has(.topbar) main.wrap .good {
  color: var(--ps-green);
}

body:has(.topbar) main.wrap .v.bad,
body:has(.topbar) main.wrap .bad,
body:has(.topbar) main.wrap .crow:not(.start):not(.net) .ca {
  color: var(--ps-danger);
}

body:has(.topbar) main.wrap .crow.start .ca,
body:has(.topbar) main.wrap .crow.net .ca {
  color: var(--ps-ink);
}

body:has(.topbar) main.wrap a.button:not(.ghost),
body:has(.topbar) main.wrap button.button:not(.ghost) {
  background: var(--ps-green);
  border-color: var(--ps-green);
  color: #fff;
}

body:has(.topbar) main.wrap a.button:not(.ghost):hover,
body:has(.topbar) main.wrap button.button:not(.ghost):hover {
  background: var(--ps-green-dark);
  border-color: var(--ps-green-dark);
  color: #fff;
}

body:has(.topbar) main.wrap a.button.ghost,
body:has(.topbar) main.wrap button.button.ghost {
  background: transparent;
  border-color: var(--ps-line-strong);
  color: var(--ps-ink);
}

body:has(.topbar) main.wrap a.button.ghost:hover,
body:has(.topbar) main.wrap button.button.ghost:hover {
  background: var(--ps-surface);
  border-color: var(--ps-ink);
  color: var(--ps-ink);
}

body:has(.topbar) main.wrap button.on,
body:has(.topbar) main.wrap .achip.on {
  background: var(--ps-green);
  border-color: var(--ps-green);
  color: #fff;
}

body:has(.topbar) main.wrap button.on:hover,
body:has(.topbar) main.wrap .achip.on:hover {
  background: var(--ps-green-dark);
  border-color: var(--ps-green-dark);
  color: #fff;
}

body:has(.topbar) main.wrap .button strong,
body:has(.topbar) main.wrap .button b,
body:has(.topbar) main.wrap .btn strong,
body:has(.topbar) main.wrap .btn b,
body:has(.topbar) main.wrap button strong,
body:has(.topbar) main.wrap button b {
  color: inherit;
}

/* Yield result tiles were the last fixed dark surface in the static calculator. Keep
   the result grid layout, but make its labels and values readable on the light ground. */
body:has(.tool) .result {
  background: var(--ps-surface);
  color: var(--ps-ink);
  border: 1px solid var(--ps-line);
}

body:has(.tool) .result dt {
  color: var(--ps-muted);
}

body:has(.tool) .result dd {
  color: var(--ps-ink);
}

/* The operator beta keeps its proof panel as a useful visual anchor, but on the
   approved light surface. */
body:has(.nav) .proof {
  background: var(--ps-surface);
  color: var(--ps-ink);
  border: 1px solid var(--ps-line);
  border-radius: 2px;
  box-shadow: none;
}

body:has(.nav) .proof p,
body:has(.nav) .proof .chain b {
  color: var(--ps-ink);
}

body:has(.nav) .proof-head {
  border-color: var(--ps-line-strong);
}

body:has(.nav) .proof-head span,
body:has(.nav) .proof .chain span,
body:has(.nav) .eyebrow {
  color: var(--ps-green);
}

body:has(.nav) .proof .chain div {
  background: var(--ps-surface-2);
}

body:has(.nav) .button:not(.ghost),
body:has(.nav) a.button:not(.ghost) {
  background: var(--ps-green);
  border-color: var(--ps-green);
  color: #fff;
}

body:has(.nav) .button:not(.ghost):hover,
body:has(.nav) a.button:not(.ghost):hover {
  background: var(--ps-green-dark);
  border-color: var(--ps-green-dark);
  color: #fff;
}

/* Pricebook prototype tables retain their wide table and get a bounded scrolling
   parent. The surrounding cards and impact grid may shrink at phone widths. */
body:has(.shell) .shell,
body:has(.shell) .shell main,
body:has(.shell) .content,
body:has(.shell) .panel,
body:has(.shell) .impact-hero,
body:has(.shell) .impact-card,
body:has(.shell) .guide,
body:has(.shell) .demo-box {
  min-width: 0;
  max-width: 100%;
}

body:has(.shell) .table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body:has(.shell) .demo-box {
  background: var(--ps-surface);
  color: var(--ps-ink);
  border: 1px solid var(--ps-line);
  border-radius: 2px;
}

body:has(.shell) .demo-box p,
body:has(.shell) .demo-box code {
  color: var(--ps-ink);
}

body:has(.shell) .demo-box h2,
body:has(.shell) .demo-box strong {
  color: var(--ps-ink);
}

@media (max-width: 900px) {
  body:has(.shell) .shell {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 16px;
  }

  body:has(.shell) .shell > aside,
  body:has(.shell) .shell > main {
    min-width: 0;
  }
}

body:has(.topbar) .sitefoot,
body:has(.topbar) .sitefoot .fmore,
body:has(.topbar) .sitefoot a {
  color: var(--ps-muted);
  border-color: var(--ps-line);
}

body:has(.topbar) .sitefoot .fblurb b {
  color: var(--ps-ink);
}

body:has(.topbar) :focus-visible,
body:has(.nav) :focus-visible,
body:has(.shell) :focus-visible,
body:has(.tool) :focus-visible {
  outline: 2px solid var(--ps-green);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  body:has(.topbar) .topbar > .hwrap {
    min-height: 84px;
    padding: 12px 16px;
    gap: 12px;
  }

  body:has(.topbar) .topbar nav {
    flex: 1 1 100%;
    justify-content: flex-start;
    gap: 6px 16px;
  }

  body:has(.topbar) .topbar nav a:not(.navcta) {
    display: inline-block;
    font-size: 13px;
  }

  body:has(.nav) > .wrap > header.nav {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 44px;
  }

  body:has(.nav) > .wrap > header.nav .navlinks {
    width: 100%;
    justify-content: flex-start;
    gap: 6px 16px;
  }

  body:has(.shell) > header.top {
    flex-wrap: wrap;
    padding: 16px;
  }

  body:has(.shell) > header.top .beta {
    margin-left: auto;
  }

  body:has(.topbar) main.wrap,
  body:has(.tool) > .wrap,
  body:has(.shell) .shell {
    min-width: 0;
  }

  body:has(.topbar) .brand,
  body:has(.nav) .brand,
  body:has(.shell) .brand {
    font-size: 30px;
  }
}

@media print {
  body:has(.topbar),
  body:has(.nav),
  body:has(.shell),
  body:has(.tool) {
    background: #fff !important;
    color: #111;
  }

  body:has(.topbar) .topbar,
  body:has(.topbar) .sitefoot,
  body:has(.nav) > .nav,
  body:has(.shell) > header.top {
    background: #fff;
    box-shadow: none;
  }

  body:has(.topbar) main.wrap,
  body:has(.tool) > .wrap {
    max-width: none;
    padding-top: 0;
  }
}

/* Ingredient addition is a primary action in both calculator tools. */
body:has(.topbar) main.wrap #add,body:has(.topbar) main.wrap #add:hover{background:var(--ps-green);border-color:var(--ps-green);color:#fff}
body:has(.shell) .brand small{text-transform:none}