/* Pasture Studio, Quiet Ledger (round 5.2, locked 2026-11-09; see shared-context/PASTURE-BRAND.md).
   Ink and Cream: cream is the default, dark follows the device (or the client's pick in Help). Never pure black or white.
   Each surface wears one farm colour on its icon, its 6 px stripe and its buttons: put data-surface="<id>" on a screen
   or a row and style below it with the --s-* names only. Ids: shepherd, studio, barn, gospel, flock, dovecote, steward, yield.
   Type: PASTURE in Barlow Condensed 900, H1 and H2 in Barlow Condensed 800 caps, body in DM Sans, figures and labels in DM Mono. */
/* fonts ship with the Studio: the page paints without waiting on another site */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/barlow-condensed-800-normal.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/barlow-condensed-900-normal.woff2) format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-sans-400-normal.woff2) format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-sans-500-normal.woff2) format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/dm-sans-700-normal.woff2) format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-mono-400-normal.woff2) format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-mono-500-normal.woff2) format('woff2');}
:root {
  color-scheme: light;
  /* the Studio's working names, on the ledger's Ink and Cream values (tests/theme-contrast.test.mjs checks every pair) */
  --paper: #F2EDE1; --paper-2: #EAE4D7; --card: #FAF6EC; --ink: #2B2926; --mute: #5C574E; --line: #D8D0C0;
  --grass: #245418; --grass-dk: #245418; --on-grass: #FAF6EC; --warn: #853000; --bad: #89211E; --good: #245418;
  --focus: #417535; --live-bg: #EEF0E0; --draft-bg: #F8EBDE; --soon-bg: #EAE4D7; --soon-ink: #5C574E; --try-bg: #EEF0E0;
  --drop-line: #D8D0C0; --drop-bg: #FAF6EC; --drop-over: #F8EBE1; --frame: #2B2926; --frame-in: #1F1D1B;
  --field: #2B2926; --on-field: #F2EDE1; --field-ph: #B8B1A4; --tagline: #E6DFD1; --shade: rgba(43, 41, 38, .12); --shade-lg: rgba(43, 41, 38, .3); --pulse: rgba(137, 33, 30, .18);
  /* the ledger (shared-context/drafts/pasture-ledger-tokens.json -> palettes.final) */
  --pasture-shepherd-accent: #854F15; --pasture-shepherd-deep: #623200; --pasture-shepherd-tint: #F8ECDD; --pasture-shepherd-ground: #EEE7DA; --pasture-shepherd-on-deep: #FAF6EC;
  --pasture-studio-accent: #417535; --pasture-studio-deep: #245418; --pasture-studio-tint: #EEF0E0; --pasture-studio-ground: #ECE9DB; --pasture-studio-on-deep: #FAF6EC;
  --pasture-barn-accent: #89211E; --pasture-barn-deep: #630002; --pasture-barn-tint: #F8EBE1; --pasture-barn-ground: #EEE6DA; --pasture-barn-on-deep: #FAF6EC;
  --pasture-gospel-accent: #5A8D76; --pasture-gospel-deep: #2E5D4A; --pasture-gospel-tint: #EBF0E3; --pasture-gospel-ground: #EDEADD; --pasture-gospel-on-deep: #FAF6EC;
  --pasture-flock-accent: #AC4F00; --pasture-flock-deep: #853000; --pasture-flock-tint: #F8EBDE; --pasture-flock-ground: #F0E7D9; --pasture-flock-on-deep: #FAF6EC;
  --pasture-dovecote-accent: #385D83; --pasture-dovecote-deep: #1C3F61; --pasture-dovecote-tint: #ECEFEC; --pasture-dovecote-ground: #EBE8DE; --pasture-dovecote-on-deep: #FAF6EC;
  --pasture-steward-accent: #6A3053; --pasture-steward-deep: #481435; --pasture-steward-tint: #F8EAE7; --pasture-steward-ground: #EDE6DC; --pasture-steward-on-deep: #FAF6EC;
  --pasture-yield-accent: #9D7800; --pasture-yield-deep: #6E4C00; --pasture-yield-tint: #F5EDDD; --pasture-yield-ground: #EFE9D9; --pasture-yield-on-deep: #FAF6EC;
  --pasture-btn-secondary-bg: #FAF6EC; --pasture-btn-secondary-fg: #2B2926; --pasture-btn-secondary-border: #5C574E;
  --pasture-rule-width: 6px; --pasture-note-ruled: rgba(43, 41, 38, .055); --pasture-note-step: 24px; --pasture-note-margin: 1px; --pasture-note-margin-opacity: .55; --pasture-note-grain: .045;
  --pasture-plate: transparent; --pasture-plate-cream: #F2EDE1;
  /* P-41: every font size is N * --fs. 1px everywhere but iOS, where it follows Larger Text (below) */
  --fs: 1px;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif; --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif; --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --r: 6px; /* the ledger's one corner: rows, cards, buttons and fields */
}
/* Dark (ShprD 2026-11-06): it follows the device unless the client picks Light or Dark in Help (data-theme on <html>).
   The two dark blocks below must stay the same: tests/theme-contrast.test.mjs checks that, and 4.5:1 for every pair. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --paper: #1F1D1B; --paper-2: #34312D; --card: #2B2926; --ink: #F2EDE1; --mute: #B8B1A4; --line: #403C37;
  --grass: #C2E1BB; --grass-dk: #91C884; --on-grass: #1F1D1B; --warn: #FFC6A4; --bad: #F0A096; --good: #C2E1BB;
  --focus: #91C884; --live-bg: #273C23; --draft-bg: #593014; --soon-bg: #34312D; --soon-ink: #E6DFD1; --try-bg: #273C23;
  --drop-line: #403C37; --drop-bg: #2B2926; --drop-over: #4C2B27; --frame: #161514; --frame-in: #121110;
  --field: #34312D; --on-field: #F2EDE1; --field-ph: #B8B1A4; --tagline: #E6DFD1; --shade: rgba(18, 17, 16, .4); --shade-lg: rgba(18, 17, 16, .6); --pulse: rgba(210, 101, 91, .25);
  --pasture-shepherd-accent: #D69A65; --pasture-shepherd-deep: #EFCDB0; --pasture-shepherd-tint: #412507; --pasture-shepherd-ground: #352C24; --pasture-shepherd-on-deep: #1F1D1B;
  --pasture-studio-accent: #91C884; --pasture-studio-deep: #C2E1BB; --pasture-studio-tint: #273C23; --pasture-studio-ground: #2D3228; --pasture-studio-on-deep: #1F1D1B;
  --pasture-barn-accent: #D2655B; --pasture-barn-deep: #FFC1B9; --pasture-barn-tint: #4C2B27; --pasture-barn-ground: #342623; --pasture-barn-on-deep: #1F1D1B;
  --pasture-gospel-accent: #9CD1B9; --pasture-gospel-deep: #CFECDE; --pasture-gospel-tint: #193D2F; --pasture-gospel-ground: #2E332E; --pasture-gospel-on-deep: #1F1D1B;
  --pasture-flock-accent: #DC7A37; --pasture-flock-deep: #FFC6A4; --pasture-flock-tint: #593014; --pasture-flock-ground: #36281E; --pasture-flock-on-deep: #1F1D1B;
  --pasture-dovecote-accent: #86AED8; --pasture-dovecote-deep: #C0D7EF; --pasture-dovecote-tint: #21374E; --pasture-dovecote-ground: #2B2E32; --pasture-dovecote-on-deep: #1F1D1B;
  --pasture-steward-accent: #B17095; --pasture-steward-deep: #EFC7DC; --pasture-steward-tint: #482B3B; --pasture-steward-ground: #31272A; --pasture-steward-on-deep: #1F1D1B;
  --pasture-yield-accent: #E1BA57; --pasture-yield-deep: #F3DEAC; --pasture-yield-tint: #473300; --pasture-yield-ground: #363022; --pasture-yield-on-deep: #1F1D1B;
  --pasture-btn-secondary-bg: #2B2926; --pasture-btn-secondary-fg: #F2EDE1; --pasture-btn-secondary-border: #B8B1A4;
  --pasture-note-ruled: rgba(242, 237, 225, .05); --pasture-note-margin-opacity: .5; --pasture-note-grain: 0;
  --pasture-plate: #F2EDE1;
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1F1D1B; --paper-2: #34312D; --card: #2B2926; --ink: #F2EDE1; --mute: #B8B1A4; --line: #403C37;
  --grass: #C2E1BB; --grass-dk: #91C884; --on-grass: #1F1D1B; --warn: #FFC6A4; --bad: #F0A096; --good: #C2E1BB;
  --focus: #91C884; --live-bg: #273C23; --draft-bg: #593014; --soon-bg: #34312D; --soon-ink: #E6DFD1; --try-bg: #273C23;
  --drop-line: #403C37; --drop-bg: #2B2926; --drop-over: #4C2B27; --frame: #161514; --frame-in: #121110;
  --field: #34312D; --on-field: #F2EDE1; --field-ph: #B8B1A4; --tagline: #E6DFD1; --shade: rgba(18, 17, 16, .4); --shade-lg: rgba(18, 17, 16, .6); --pulse: rgba(210, 101, 91, .25);
  --pasture-shepherd-accent: #D69A65; --pasture-shepherd-deep: #EFCDB0; --pasture-shepherd-tint: #412507; --pasture-shepherd-ground: #352C24; --pasture-shepherd-on-deep: #1F1D1B;
  --pasture-studio-accent: #91C884; --pasture-studio-deep: #C2E1BB; --pasture-studio-tint: #273C23; --pasture-studio-ground: #2D3228; --pasture-studio-on-deep: #1F1D1B;
  --pasture-barn-accent: #D2655B; --pasture-barn-deep: #FFC1B9; --pasture-barn-tint: #4C2B27; --pasture-barn-ground: #342623; --pasture-barn-on-deep: #1F1D1B;
  --pasture-gospel-accent: #9CD1B9; --pasture-gospel-deep: #CFECDE; --pasture-gospel-tint: #193D2F; --pasture-gospel-ground: #2E332E; --pasture-gospel-on-deep: #1F1D1B;
  --pasture-flock-accent: #DC7A37; --pasture-flock-deep: #FFC6A4; --pasture-flock-tint: #593014; --pasture-flock-ground: #36281E; --pasture-flock-on-deep: #1F1D1B;
  --pasture-dovecote-accent: #86AED8; --pasture-dovecote-deep: #C0D7EF; --pasture-dovecote-tint: #21374E; --pasture-dovecote-ground: #2B2E32; --pasture-dovecote-on-deep: #1F1D1B;
  --pasture-steward-accent: #B17095; --pasture-steward-deep: #EFC7DC; --pasture-steward-tint: #482B3B; --pasture-steward-ground: #31272A; --pasture-steward-on-deep: #1F1D1B;
  --pasture-yield-accent: #E1BA57; --pasture-yield-deep: #F3DEAC; --pasture-yield-tint: #473300; --pasture-yield-ground: #363022; --pasture-yield-on-deep: #1F1D1B;
  --pasture-btn-secondary-bg: #2B2926; --pasture-btn-secondary-fg: #F2EDE1; --pasture-btn-secondary-border: #B8B1A4;
  --pasture-note-ruled: rgba(242, 237, 225, .05); --pasture-note-margin-opacity: .5; --pasture-note-grain: 0;
  --pasture-plate: #F2EDE1;
}
/* P-41 (stress test C-25): iOS Larger Text reaches the Studio. On an iPhone or iPad only (-webkit-touch-callout is
   iOS's own), the root takes the system body size (17px at the default setting), so --fs is 1px at default and grows
   with the setting, capped at 1.7 (about 26px body text) so the 390 px layout still holds at the largest sizes. It never
   goes under 1px: a smaller setting keeps the normal size, so no text box drops under 16px (iOS zooms the page then). */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
  :root { --fs: clamp(1px, calc(1rem / 17), 1.7px); }
}
/* one theme per surface: a screen or a row says which farm colour it wears; the Studio itself is green */
body, [data-surface="studio"] { --s-accent: var(--pasture-studio-accent); --s-deep: var(--pasture-studio-deep); --s-tint: var(--pasture-studio-tint); --s-ground: var(--pasture-studio-ground); --s-on-deep: var(--pasture-studio-on-deep); }
[data-surface="shepherd"] { --s-accent: var(--pasture-shepherd-accent); --s-deep: var(--pasture-shepherd-deep); --s-tint: var(--pasture-shepherd-tint); --s-ground: var(--pasture-shepherd-ground); --s-on-deep: var(--pasture-shepherd-on-deep); }
[data-surface="barn"] { --s-accent: var(--pasture-barn-accent); --s-deep: var(--pasture-barn-deep); --s-tint: var(--pasture-barn-tint); --s-ground: var(--pasture-barn-ground); --s-on-deep: var(--pasture-barn-on-deep); }
[data-surface="gospel"] { --s-accent: var(--pasture-gospel-accent); --s-deep: var(--pasture-gospel-deep); --s-tint: var(--pasture-gospel-tint); --s-ground: var(--pasture-gospel-ground); --s-on-deep: var(--pasture-gospel-on-deep); }
[data-surface="flock"] { --s-accent: var(--pasture-flock-accent); --s-deep: var(--pasture-flock-deep); --s-tint: var(--pasture-flock-tint); --s-ground: var(--pasture-flock-ground); --s-on-deep: var(--pasture-flock-on-deep); }
[data-surface="dovecote"] { --s-accent: var(--pasture-dovecote-accent); --s-deep: var(--pasture-dovecote-deep); --s-tint: var(--pasture-dovecote-tint); --s-ground: var(--pasture-dovecote-ground); --s-on-deep: var(--pasture-dovecote-on-deep); }
[data-surface="steward"] { --s-accent: var(--pasture-steward-accent); --s-deep: var(--pasture-steward-deep); --s-tint: var(--pasture-steward-tint); --s-ground: var(--pasture-steward-ground); --s-on-deep: var(--pasture-steward-on-deep); }
[data-surface="yield"] { --s-accent: var(--pasture-yield-accent); --s-deep: var(--pasture-yield-deep); --s-tint: var(--pasture-yield-tint); --s-ground: var(--pasture-yield-ground); --s-on-deep: var(--pasture-yield-on-deep); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 calc(15 * var(--fs))/1.5 var(--sans); }
/* paper grain: cream only, very faint, CSS only; it never takes a tap */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: var(--pasture-note-grain); mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.16 0 0 0 0 0.15 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
button, input, select, textarea { font: inherit; color: inherit; }
/* roles: primary = the surface's deep fill; every other plain button = the neutral outline */
button { cursor: pointer; border: 1px solid var(--pasture-btn-secondary-border); background: var(--pasture-btn-secondary-bg); color: var(--pasture-btn-secondary-fg); border-radius: var(--r); padding: 8px 14px; }
button:hover { border-color: var(--ink); }
button.primary { background: var(--s-deep); border-color: var(--s-deep); color: var(--s-on-deep); font-weight: 700; }
/* hover goes one step deeper, never to the accent: on-deep text on the accent is under AA for field sage (3.53:1) and
   hay gold (3.80:1) in cream (tests/surface-contrast.test.mjs) */
button.primary:hover { background: color-mix(in srgb, var(--s-deep) 82%, var(--ink)); border-color: color-mix(in srgb, var(--s-deep) 82%, var(--ink)); }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 2px solid var(--s-accent, var(--focus)); outline-offset: 2px; }

.spots { display: none; }
.brand { display: flex; align-items: center; gap: 8px; }
/* the block PASTURE wordmark beside the small-cut cow; on dark the cow sits on the cream plate */
.brand b { font: 900 calc(26 * var(--fs))/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.brand small { font: 500 calc(11.2 * var(--fs))/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.brand.small b { font-size: calc(22 * var(--fs)); }

/* login */
/* sign-in: the cow and the PASTURE wordmark on cream (on the plate in dark), the form card beside it */
.loginBrand .mark { position: relative; display: block; width: clamp(120px, 18vw, 190px); height: auto; margin: 0 0 18px -4px; background: var(--pasture-plate); border-radius: 12px; padding: 6px; }
.brand .mark { display: block; width: 34px; height: auto; aspect-ratio: 1; background: var(--pasture-plate); border-radius: var(--r); padding: 2px 3px; }
.login { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.loginBrand { position: relative; overflow: hidden; background-color: var(--s-ground); color: var(--ink); display: grid; align-content: end; padding: 48px max(32px, env(safe-area-inset-left)); border-right: 1px solid var(--line); box-shadow: inset var(--pasture-rule-width) 0 0 var(--s-accent);
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--pasture-note-step) - 1px), var(--pasture-note-ruled) calc(var(--pasture-note-step) - 1px) var(--pasture-note-step)); }
.loginBrand .wordmark { position: relative; display: flex; align-items: center; gap: 12px; font: 900 clamp(calc(48 * var(--fs)), 7vw, calc(84 * var(--fs)))/.95 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.loginBrand .tagline { position: relative; margin: 12px 0 0; font: 500 calc(20 * var(--fs))/1.3 var(--sans); color: var(--mute); }
.login .card { align-self: center; justify-self: center; width: min(420px, calc(100% - 32px)); background: var(--card); border: 1px solid var(--line); border-top: var(--pasture-rule-width) solid var(--s-accent); border-radius: var(--r); padding: 28px; display: grid; gap: 10px; margin: 32px 16px; box-shadow: 0 24px 60px -40px var(--shade-lg); }
.login h1 { font: 800 calc(34 * var(--fs))/1 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 0; }
@media (max-width: 760px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .loginBrand { padding: max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-left)) 26px; border-right: 0; border-bottom: 1px solid var(--line); }
  .loginBrand .mark { width: 110px; margin-bottom: 12px; }
  .login .card { align-self: start; margin-top: 20px; }
}
.login p { margin: 0; color: var(--mute); }
.login form { display: grid; gap: 10px; margin-top: 10px; }
.login label { font: 500 calc(12 * var(--fs))/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.login input { border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px; background: var(--paper); font-family: var(--mono); }
.err { color: var(--bad); min-height: 1.3em; }

/* top bar */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 10px max(16px, env(safe-area-inset-left)); padding-top: max(10px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top select { border: 1px solid var(--line); border-radius: var(--r); padding: 6px 10px; background: var(--card); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.tabs button { border: 1px solid transparent; background: transparent; padding: 8px 12px; border-radius: 999px; color: var(--mute); font-weight: 500; }
.tabs button:hover { border-color: var(--line); }
.tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); border-color: var(--line); font-weight: 700; }
.pub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } /* P-41: at iOS's largest text the chip, Publish and Help wrap instead of running off the screen */
.pub .primary { background: var(--pasture-btn-secondary-bg); border-color: var(--pasture-btn-secondary-border); color: var(--pasture-btn-secondary-fg); } /* the board: Publish sits in the bar as the plain outline */
.pub .primary:hover { background: var(--s-tint); border-color: var(--s-accent); }
.chip { font: 500 calc(11.84 * var(--fs))/1 var(--mono); letter-spacing: .04em; padding: 7px 10px; border-radius: 999px; background: transparent; border: 1px solid var(--line); color: var(--mute); white-space: nowrap; }
.chip.draft { background: var(--draft-bg); border-color: transparent; color: var(--warn); }
.chip.live { background: transparent; border-color: var(--line); color: var(--good); }

/* edit */
main { padding: 16px max(16px, env(safe-area-inset-left)) 40px; }
.edit { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.previewWrap { min-width: 0; position: sticky; top: 76px; }
.ptools { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: calc(14.4 * var(--fs)); }
.ptools a { color: var(--mute); }
.seg { display: inline-flex; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; }
/* A-110: the pressed side is the ink fill with paper text, as in the tab row (well past 3:1 on the track, light and dark) */
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: 0 1px 3px var(--shade); }
.tog { display: inline-flex; gap: 6px; align-items: center; color: var(--mute); }
/* the preview frames are placed and scaled by fitFrame() in studio.js (a real 1280 or 390 px page, scaled to fit) */
.frame { position: relative; background: var(--frame); border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; height: calc(100vh - 170px); min-height: 480px; }
.frame iframe { width: 100%; height: 100%; border: 0; background: var(--frame-in); }
.frame iframe[hidden] { display: none; }
.hint { color: var(--mute); font-size: calc(13.6 * var(--fs)); margin: 6px 2px 0; }

.assist { background: var(--card); border: 1px solid var(--line); border-top: var(--pasture-rule-width) solid var(--s-accent); border-radius: var(--r); display: flex; flex-direction: column; height: calc(100vh - 120px); min-height: 520px; min-width: 0; overflow: hidden; }
.assist .thread { flex: 1 1 auto; }
.thread { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.msg { max-width: 92%; padding: 10px 13px; border-radius: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.me { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
.msg.them { align-self: flex-start; background: var(--paper-2); border-bottom-left-radius: 4px; }
.msg.sys { align-self: center; background: none; color: var(--mute); font-size: calc(13.6 * var(--fs)); text-align: center; }
.proposal { align-self: stretch; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px 12px 18px; background: var(--try-bg); box-shadow: inset var(--pasture-rule-width) 0 0 var(--s-accent); display: grid; gap: 8px; }
.proposal b { font: 700 calc(16.8 * var(--fs))/1.3 var(--sans); }
.proposal ul { margin: 0; padding-left: 18px; font: 400 calc(12.8 * var(--fs))/1.45 var(--mono); color: var(--mute); }
.proposal details summary { cursor: pointer; color: var(--mute); font-weight: 600; width: max-content; min-height: 44px; display: flex; align-items: center; }
.proposal details ul { margin-top: 4px; }
.proposal .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.proposal.done { background: var(--paper); box-shadow: inset var(--pasture-rule-width) 0 0 var(--line); opacity: .8; }
.sugs { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 10px; }
.sugs button { font-size: calc(13.12 * var(--fs)); padding: 6px 10px; background: var(--paper); border-color: var(--line); border-radius: 999px; }
.composer { border-top: 1px solid var(--line); padding: 10px; display: grid; gap: 8px; background: var(--card); }
.composer textarea { width: 100%; resize: none; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--paper); min-height: 52px; }
.cbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* P-41: wraps at the largest text on a small phone */
.cbar .grow { flex: 1; }
.round { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: calc(19.2 * var(--fs)); }
.micIcon { width: 12px; height: 18px; border: 2px solid currentColor; border-radius: 8px; position: relative; display: block; }
.micIcon::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 2px; height: 5px; background: currentColor; transform: translateX(-50%); }
#mic.on { background: var(--bad); border-color: var(--bad); color: var(--paper); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px var(--pulse); } }
.picked { margin: 0 12px 10px; border: 1px dashed var(--s-accent); border-radius: var(--r); padding: 10px 12px; background: var(--try-bg); display: grid; gap: 8px; }
.picked .lbl { font: 500 calc(11.52 * var(--fs))/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grass-dk); }
.picked textarea, .picked input { width: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; background: var(--card); }
.picked .row { display: flex; gap: 8px; flex-wrap: wrap; }

/* pages */
.page { max-width: 980px; margin: 0 auto; }
.page h1 { font: 800 clamp(calc(32 * var(--fs)), 4.4vw, calc(46 * var(--fs)))/1 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 10px 0 8px; }
.page .sub { color: var(--mute); margin: 0 0 22px; max-width: 64ch; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 4px; }
.stat span { font: 500 calc(11.2 * var(--fs))/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.stat b { font: 500 calc(24 * var(--fs))/1.15 var(--mono); font-variant-numeric: tabular-nums; }
.stat small { color: var(--mute); }
table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 500 calc(11.2 * var(--fs))/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); background: var(--paper-2); }
tr:last-child td { border-bottom: 0; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--mono); }
.tablewrap { overflow-x: auto; }
.pill { display: inline-block; font: 500 calc(11.52 * var(--fs))/1 var(--mono); letter-spacing: .04em; padding: 5px 8px; border-radius: 999px; background: transparent; border: 1px solid var(--line); color: var(--mute); white-space: nowrap; }
.pill.yes { background: var(--live-bg); border-color: transparent; color: var(--good); }
.pill.no { background: var(--draft-bg); border-color: transparent; color: var(--warn); }
.alerts { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 8px; }
.alerts li { background: var(--card); border: 1px solid var(--line); box-shadow: inset var(--pasture-rule-width) 0 0 var(--mute); border-radius: var(--r); padding: 10px 12px 10px 18px; }
.alerts li.amber { box-shadow: inset var(--pasture-rule-width) 0 0 var(--warn); } .alerts li.red, .alerts li.critical { box-shadow: inset var(--pasture-rule-width) 0 0 var(--bad); }
.steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 10px; }
.steps li { overflow-wrap: anywhere; counter-increment: s; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px 12px 52px; position: relative; }
.steps li::before { content: counter(s); position: absolute; left: 14px; top: 10px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--s-accent); color: var(--s-deep); display: grid; place-items: center; font: 500 calc(13.6 * var(--fs))/1 var(--mono); }
.big-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.big-actions a, .big-actions button { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r); padding: 12px 18px; border: 1px solid var(--pasture-btn-secondary-border); color: var(--ink); background: var(--card); font-weight: 700; }
.big-actions .primary { background: var(--s-deep); border-color: var(--s-deep); color: var(--s-on-deep); }
.hist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
.hist li { background: var(--card); border-top: 1px solid var(--line); padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.hist li:first-child { border-top: 0; }
.hist .when { font: 400 calc(12.8 * var(--fs))/1.3 var(--mono); color: var(--mute); }
.hist .det { grid-column: 1 / -1; font: 400 calc(12.48 * var(--fs))/1.4 var(--mono); color: var(--mute); }
.promise { background: var(--field); color: var(--on-field); border-radius: var(--r); padding: 18px 20px; margin: 10px 0 22px; }
.promise h2 { font: 800 calc(22 * var(--fs))/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 8px; }
.promise ul { margin: 0; padding-left: 18px; }

.toast { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: var(--r); box-shadow: 0 10px 30px var(--shade-lg); z-index: 50; max-width: calc(100vw - 32px); display: flex; gap: 12px; align-items: center; }
.toast button { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 40%, transparent); padding: 5px 10px; }
.toast .toastX { min-width: 44px; min-height: 44px; border: 0; font-size: calc(22 * var(--fs)); line-height: 1; padding: 0; } /* A-27 close */

@media (max-width: 920px) {
  .edit { grid-template-columns: 1fr; }
  .previewWrap { position: static; }
  .frame { height: 62vh; min-height: 360px; }
  .assist { height: auto; min-height: 0; }
  .assist .thread { min-height: 220px; max-height: 46vh; }
  .cards { grid-template-columns: 1fr; }
  .tabs { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .tabs button { white-space: nowrap; }
}

/* look panel + "showing it now" */
.picked .looks .opt { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; background: var(--card); }
.picked .looks .opt[aria-pressed="true"] { border-color: var(--s-accent); box-shadow: inset 0 0 0 1px var(--s-accent); }
.picked .sw { display: inline-flex; } .picked .sw i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); margin-right: -4px; }
.picked .aa { font-size: calc(18.4 * var(--fs)); font-weight: 800; line-height: 1; min-width: 26px; }
.picked input[type="color"] { width: 46px; height: 34px; padding: 2px; border-radius: var(--r); }
.picked .note { margin: 0; font-size: calc(13.12 * var(--fs)); color: var(--mute); }
.proposal .seen { color: var(--grass-dk); font-size: calc(12.8 * var(--fs)); }
.sugs .lookBtn { border-color: var(--s-accent); background: var(--s-tint); color: var(--s-deep); font-weight: 700; }
.frame.trying { outline: 3px solid var(--s-accent); outline-offset: -3px; }

.openq { background: var(--card); border: 1px dashed var(--warn); border-radius: var(--r); padding: 14px 18px; margin: 18px 0; }
.openq h2 { font: 800 calc(19 * var(--fs))/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 6px; }
.openq ul { margin: 0; padding-left: 18px; color: var(--mute); }

/* phone first (Bates edits from his phone): the site stays in view at the top, the
   composer stays at the bottom, and the conversation scrolls between them. */
@media (max-width: 640px) {
  .top { position: relative; z-index: 7; gap: 8px 10px; padding-block: max(8px, env(safe-area-inset-top)) 8px; }
  .brand.small b { font-size: calc(20 * var(--fs)); }
  .brand .mark { width: 30px; }
  .pub { margin-left: auto; }
  .pub .chip { font-size: calc(10.88 * var(--fs)); padding: 6px 8px; }
  .pub .primary { padding: 7px 14px; }
  .tabs { scrollbar-width: none; margin: 0 -4px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { padding: 7px 11px; font-size: calc(14.72 * var(--fs)); }
  main { padding-top: 8px; padding-bottom: 0; }
  .edit { gap: 10px; }
  .hint { display: none; }
  .ptools .tog, .ptools #openFull { display: none; } /* a phone keeps only the Computer / Phone switch */
  .previewWrap { position: sticky; top: 0; z-index: 4; background: var(--paper); padding-block: env(safe-area-inset-top, 0px) 8px; margin-inline: -4px; }
  .frame { height: 40vh; min-height: 250px; }
  .assist { overflow: visible; }
  .assist .thread { max-height: none; min-height: 0; overflow: visible; padding: 12px; }
  .msg { max-width: 100%; }
  .sugs { padding: 0 12px 8px; }
  .composer { position: sticky; bottom: 0; z-index: 3; background: var(--card); border-radius: 0 0 var(--r) var(--r); padding-bottom: max(10px, env(safe-area-inset-bottom)); box-shadow: 0 -8px 16px -12px var(--shade-lg); }
  .composer textarea { font-size: calc(16 * var(--fs)); } /* 16px stops iPhone zooming into the box */
  .thread > * { scroll-margin-bottom: 170px; } /* a new card stops above the typing box, so Yes is always in reach */
  .proposal ul { font-size: calc(11.84 * var(--fs)); }
  /* tables on What I own / Costs become one card per row, so nothing hides off the right edge */
  .page table, .page tbody, .page tr, .page td { display: block; width: 100%; }
  .page thead { display: none; }
  .page tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .page tr:last-child { border-bottom: 0; }
  .page td { border: 0; padding: 2px 0; }
  .page td.num { text-align: left; white-space: normal; font-weight: 700; }
  .login input { font-size: calc(16 * var(--fs)); }
  .toast { left: 16px; right: 16px; transform: none; max-width: none; flex-wrap: wrap; }
}

/* readable on a phone (Casey 2026-11-03: no tiny fonts for clients): body 17px, nothing under 14px */
@media (max-width: 640px) {
  body, input, select, textarea { font-size: calc(17 * var(--fs)); }
  button { font-size: calc(15 * var(--fs)); }
  small, label, th, td, .chip, .pill, .lbl, .stat span, .stat small, .when, .det, .proposal ul, .proposal .seen, .picked .note,
  .msg.sys, .brand small, .sugs button, .tabs button, .hint, .err, .alerts li, .openq ul, .pub .chip, .login label { font-size: calc(14 * var(--fs)) !important; }
  .msg, .login p { font-size: calc(17 * var(--fs)); }
  /* notes sit just above the typing box: never over it, never over the Publish button */
  .toast { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 172px); z-index: 60; }
}
.boot { min-height: 100%; display: grid; place-items: center; color: var(--mute); font: 500 calc(16.8 * var(--fs))/1.4 var(--sans); padding: 24px; }
/* A-13: a first load that failed says why and offers Try again (never the sign-in page) */
.bootFail { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 22rem; color: var(--ink); }
.bootFail p { margin: 0; }

/* nothing a client reads is under 14px, at any width (Casey 2026-11-03) */
small, label, th, .chip, .pill, .lbl, .stat span, .stat small, .when, .det, .proposal ul, .proposal .seen, .picked .note,
.msg.sys, .brand small, .sugs button, .hint, .err, .alerts li, .openq ul, .login label, .ptools, .tog { font-size: max(calc(14 * var(--fs)), 1em) !important; }
.login label, .chip, .pill, .lbl, th, .stat span { font-size: calc(14 * var(--fs)) !important; }

/* app: the offline page, and the "put Pasture on your phone" bar */
.offline { min-height: 100%; max-width: 30rem; margin: 0 auto; display: grid; align-content: center; gap: 12px; padding: max(32px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom)); }
.offline h1 { font: 800 calc(34 * var(--fs))/1 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 18px 0 0; }
.offline p { margin: 0; color: var(--mute); font-size: calc(17 * var(--fs)); }
.offline button { justify-self: start; margin-top: 8px; }
.install { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px 12px 18px; background: var(--card); border: 1px solid var(--line); box-shadow: inset var(--pasture-rule-width) 0 0 var(--s-accent); border-radius: var(--r); }
.install img { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto; }
.install div { flex: 1 1 auto; min-width: 0; }
.install b { display: block; font-size: calc(16 * var(--fs)); }
.install span { display: block; color: var(--mute); font-size: calc(15 * var(--fs)); }
.install span b { display: inline; font-size: inherit; color: var(--ink); }
.install .shareIcon { display: inline-block; width: 15px; height: 18px; vertical-align: -3px; margin: 0 2px; background: currentColor; -webkit-mask: url(/share-ios.svg) center / contain no-repeat; mask: url(/share-ios.svg) center / contain no-repeat; }
.install .x { border: 0; background: none; padding: 6px 8px; color: var(--mute); font-size: calc(20 * var(--fs)); line-height: 1; }

/* talk to Casey */
.talk { max-width: 720px; }
.bubbles { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px; }
.bubble { max-width: 86%; padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: calc(17 * var(--fs)); }
.bubble small { display: block; margin-top: 4px; color: var(--mute); font-size: calc(14 * var(--fs)); }
.bubble.team { align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.them { align-self: flex-end; background: var(--paper-2); border-bottom-right-radius: 4px; }
.talkForm { display: grid; gap: 8px; position: sticky; bottom: 0; padding: 10px 0 max(10px, env(safe-area-inset-bottom)); background: var(--paper); }
.talkForm textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--card); font-size: calc(17 * var(--fs)); resize: vertical; }
.notify { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; margin: 0 0 16px; background: var(--card); border: 1px solid var(--line); box-shadow: inset var(--pasture-rule-width) 0 0 var(--s-accent); border-radius: var(--r); }
.notify div { flex: 1 1 auto; min-width: 0; }
.notify b { display: block; font-size: calc(16 * var(--fs)); }
.notify span { display: block; color: var(--mute); font-size: calc(15 * var(--fs)); }
.notify button { white-space: nowrap; flex: 0 0 auto; }

/* ---------- the notebook row (round 5): a 6 px stripe in the surface's accent, a near-cream wash, hairline ruled
   lines every 24 px and a thin margin rule at 46 px. Rows stack in one hairline box; the icon sits left of the margin. */
.pasture-row[data-surface] {
  position: relative;
  box-shadow: inset var(--pasture-rule-width) 0 0 var(--s-accent);
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(var(--pasture-note-step) - 1px), var(--pasture-note-ruled) calc(var(--pasture-note-step) - 1px) var(--pasture-note-step)),
    linear-gradient(90deg, var(--s-tint), var(--s-tint) 62%, var(--s-ground));
}
.pasture-row[data-surface]::before { content: ""; position: absolute; top: 0; bottom: 0; left: 46px; width: var(--pasture-note-margin); background: var(--s-accent); opacity: var(--pasture-note-margin-opacity); pointer-events: none; }
@media (hover: hover) { .pasture-row[data-surface]:hover { filter: brightness(.985); } }

/* home: the Pasture app's rows (D-048). Studio and Barn first, then the add-ons, each wearing its own farm colour.
   Ask Pasture sits under the greeting, Barn takes a dropped file. */
.home { max-width: 980px; margin: 0 auto; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
.home h1 { font: 800 clamp(calc(38 * var(--fs)), 5vw, calc(52 * var(--fs)))/.98 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 12px 0 6px; }
.home .sub { color: var(--mute); margin: 0 0 16px; }
.tilesHead { font: 800 calc(28 * var(--fs))/1 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 32px 0 8px; }
.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 720px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
/* one row: icon | words | the pill or the arrow. The two wrappers inside an add-on row step aside, so every row lines up. */
.tile { position: relative; container-type: inline-size; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-content: start; align-items: start; width: 100%; min-width: 0; text-align: left; margin: 0; padding: 14px 14px 14px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--ink); background: var(--card); font-weight: 400; }
.tile:first-child { border-top: 0; }
.tileTop, .tileTop > div { display: contents; }
.tile > *, .tileTop > div > * { grid-column: 2 / -1; min-width: 0; }
.tile .tileIco { grid-column: 1; grid-row: 1; justify-self: center; }
.tile .tileName { grid-column: 2; }
button.tile .tileName + p { grid-column: 2; } /* a base row keeps its arrow beside the words; an add-on's words take the whole row */
.tile .tileName + p { margin-top: -2px; }
.tile > .pill { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
/* the pill sits beside the name only when the row has room for both at this text size (em follows iOS Larger Text);
   otherwise it goes under the name, and the words below still take the whole row */
@container (max-width: 20em) { .tile > .pill.soon, .tile > .pill.yes { grid-column: 2 / -1; grid-row: 2; justify-self: start; } }
button.tile:hover { border-color: var(--line); }
button.tile::after { content: "›" / ""; grid-column: 3; grid-row: 1 / span 2; align-self: center; font: 400 calc(22 * var(--fs))/1 var(--sans); color: var(--s-deep); }
.tile p { margin: 0; color: var(--mute); }
.tileName { font: 700 calc(17 * var(--fs))/1.2 var(--sans); color: var(--ink); }
/* the 24 px function icon: the surface's deep line, its accent dot */
.tileIco { display: block; width: 24px; height: 24px; color: var(--s-deep); margin-top: 1px; }
.tileIco .ico { width: 24px; height: 24px; display: block; }
.tile.addon:not(.on) { border-top-style: dashed; }
.tile.addon:not(.on)::before { background: repeating-linear-gradient(180deg, var(--s-accent) 0 4px, transparent 4px 8px); } /* off: the margin rule is dashed */
.tile.addon .tileIco { opacity: 1; }
.tile details summary { cursor: pointer; color: var(--ink); font-weight: 600; min-height: 32px; display: flex; align-items: center; width: max-content; max-width: 100%; }
.tile details summary::before { content: "" / ""; width: 0; height: 0; margin-right: 8px; border-block: 4.5px solid transparent; border-left: 6px solid var(--s-deep); transition: transform 160ms; }
.tile details[open] summary::before { transform: rotate(90deg); }
.tile details summary::-webkit-details-marker { display: none; }
.tile details p { color: var(--ink); margin: 2px 0 6px; }
.tile > button, .tile > .pill { justify-self: start; }

/* asking for an add-on: the surface tint, deep words, the accent border */
.tile.addon button:not(.primary), .tile .askRow button { background: var(--s-tint); color: var(--s-deep); border: 1.5px solid var(--s-accent); font-weight: 700; }
.tile.addon button:not(.primary):hover { background: var(--s-ground); }
/* A-101, A-06 (fix batch 5): the settled line after a one-tap ask, and an add-on's price (from pasture/pricing.json) */
.tile .asked { margin: 0; color: var(--ink); font-weight: 600; }
.tile .price { font: 500 calc(15 * var(--fs))/1.3 var(--mono); color: var(--ink); }
.tile .askRow { display: grid; gap: 6px; justify-items: start; }
.tile .askRow .next { color: var(--mute); font-size: calc(14 * var(--fs)); }
.pill.soon { background: transparent; border-color: transparent; color: var(--soon-ink); text-transform: uppercase; letter-spacing: .06em; padding-inline: 0; }
.tile .pill.yes { background: transparent; border-color: var(--s-accent); color: var(--s-deep); text-transform: uppercase; }
.draftTag { display: inline-block; font: 500 calc(14 * var(--fs))/1 var(--mono); letter-spacing: .04em; padding: 5px 8px; border-radius: 999px; background: var(--draft-bg); color: var(--warn); }
.drop { display: grid; place-items: center; gap: 2px; min-height: 64px; border: 1.5px dashed var(--s-accent); background: color-mix(in srgb, var(--card) 72%, transparent); border-radius: var(--r); padding: 12px; text-align: center; cursor: pointer; margin-top: 6px; }
.drop b { font-size: calc(16 * var(--fs)); color: var(--ink); } .drop span { color: var(--mute); }
.drop.over { border-style: solid; background: var(--s-ground); }
.today { color: var(--mute); }
/* Ask Pasture sits in the page under the greeting (ShprD 2026-11-06: floating, it covered the add-on tiles) */
.dock { position: relative; margin: 0 0 18px; width: min(720px, 100%); display: flex; gap: 10px; align-items: center; padding: 7px 7px 7px 0; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); }
.dock .tileIco { width: 46px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; margin: 0; }
.dock .tileIco .ico { width: 24px; height: 24px; }
.dock input { flex: 1 1 auto; min-width: 0; border: 0; border-radius: var(--r); padding: 11px 6px; background: transparent; color: var(--ink); font-size: calc(16 * var(--fs)); }
.dock input::placeholder { color: var(--mute); }
.dock .primary { flex: 0 0 auto; }
#tab-home[hidden] + * .dock, .tab[hidden] .dock { display: none; }
@media (max-width: 640px) {
  .tile { padding-block: 13px; }
  .tileName { font-size: calc(17 * var(--fs)); }
  .tile p { font-size: calc(15 * var(--fs)); }
}
/* the not-found and error pages: a link that looks like the primary button */
a.btnLink { justify-self: start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; margin-top: 8px; border-radius: var(--r); text-decoration: none; font-weight: 700; background: var(--s-deep); color: var(--s-on-deep); }
a.btnLink:hover { background: color-mix(in srgb, var(--s-deep) 82%, var(--ink)); }
/* sign-in: "Forgot your password?" (A-to-Z row 9) */
.linkish { border: 0; background: none; padding: 6px 0; color: var(--grass-dk); text-decoration: underline; text-underline-offset: 3px; font-size: calc(15 * var(--fs)); justify-self: start; }
.login .card > .linkish { margin-top: -10px; }
#forgotForm { display: grid; gap: 10px; }
#forgotForm[hidden] { display: none; }
.login label, .resetForm label, .danger label { font-size: max(calc(14 * var(--fs)), calc(12 * var(--fs))); }
/* the reset page */
.resetForm { display: grid; gap: 10px; margin-top: 6px; }
.resetForm label { font: 500 calc(14 * var(--fs))/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.resetForm input, .danger input { font-size: calc(16 * var(--fs)); padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
/* What I own: delete my account */
.danger { margin-top: 40px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); display: grid; gap: 10px; max-width: 640px; }
.danger h2 { margin: 0; font: 800 calc(24 * var(--fs))/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.danger p { margin: 0; color: var(--mute); font-size: calc(15 * var(--fs)); }
.danger form { display: grid; gap: 10px; }
.danger form[hidden] { display: none; }
.danger label { font: 500 calc(14 * var(--fs))/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.danger .row { display: flex; gap: 10px; flex-wrap: wrap; }
button.warn { justify-self: start; border-color: var(--bad); color: var(--bad); background: transparent; font-weight: 700; }
button.warn:hover { background: var(--bad); color: var(--card); }
/* Home: what we need from the client (Flock's list) */
.todo { margin: 18px 0 22px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); max-width: 720px; }
.todoHead { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.todoHead h2 { margin: 0; font: 800 calc(22 * var(--fs))/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.todoHead p { margin: 2px 0 0; color: var(--mute); font-size: calc(15 * var(--fs)); }
.todoRing { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--s-accent) calc(var(--p) * 1%), var(--line) 0); }
.todoRing b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--card); font: 500 calc(14 * var(--fs))/1 var(--mono); }
.todo ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.todo li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.todo li .tick { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--mute); display: grid; place-items: center; font-size: calc(14 * var(--fs)); color: var(--s-on-deep); margin-top: 1px; }
.todo li.done .tick { background: var(--s-deep); border-color: var(--s-deep); }
.todo li b { display: block; font-weight: 600; }
.todo li.done b { color: var(--mute); text-decoration: line-through; text-decoration-color: var(--line); }
.todo li p { margin: 2px 0 0; color: var(--mute); font-size: calc(15 * var(--fs)); }
.todo li small { display: block; margin-top: 2px; color: var(--grass-dk); font-size: calc(14 * var(--fs)); }
/* Casey's admin view (row 16): every client, and the "viewing as" bar */
.clientGrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 16px; }
.client { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 18px; display: grid; gap: 12px; }
.clientTop { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.clientTop h2 { margin: 0; font: 800 calc(22 * var(--fs))/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.clientTop p { margin: 2px 0 0; color: var(--mute); font-size: calc(15 * var(--fs)); }
.client dl { margin: 0; display: grid; gap: 6px; }
.client dl div { display: grid; grid-template-columns: 8.5em 1fr; gap: 8px; font-size: calc(15 * var(--fs)); }
.client dt { color: var(--mute); }
.client dd { margin: 0; }
.client dd.hot { color: var(--bad); font-weight: 700; }
.client .row { display: flex; flex-wrap: wrap; gap: 8px; }
.viewAs { position: sticky; top: 0; z-index: 30; display: flex; justify-content: center; align-items: center; gap: 14px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--field); color: var(--on-field); font-size: calc(15 * var(--fs)); }
.viewAs button { background: transparent; color: var(--on-field); border-color: color-mix(in srgb, var(--on-field) 50%, transparent); }
html.viewing .top { padding-top: 10px; }
.learning .switchRow { display: flex; gap: 10px; align-items: center; font: 500 calc(15 * var(--fs))/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.learning .switchRow input { width: 22px; height: 22px; accent-color: var(--s-deep); }
.danger[hidden] { display: none; }
/* inside the App Store app (?embed=1): the native tab bar owns navigation, so the web one steps aside */
html.embed .top nav.tabs, html.embed .top .brand { display: none; }
html.embed .top { padding-top: max(10px, env(safe-area-inset-top)); }
/* app audit 2026-11-09 #2 (Apple 4.2): the native shell owns titles and the way out. Outside Edit the web header, with its
   Publish row, steps aside; a page's own first heading does not repeat the native title; the interview has no second exit
   (the native Back closes it). Edit keeps the header: Publish lives there. */
html.embed:not([data-tab="edit"]) .top { display: none; }
html.embed section.tab.page > h1:first-child { display: none; }
html.embed .ivTop > button, html.inapp .ivTop > button { display: none; }

/* Pasture the cow beside its words (business in a box, 2026-11-05) */
.from { display: flex; gap: 8px; align-items: flex-end; align-self: flex-start; max-width: 92%; }
.from .msg { max-width: 100%; min-width: 0; }
.from .msg.sys { text-align: left; }
.cow { flex: 0 0 auto; line-height: 0; }
.cow img { width: 32px; height: 32px; display: block; background: var(--pasture-plate); border-radius: var(--r); padding: 1px; }
.dock .cow img { width: 36px; height: 36px; }
@media (prefers-reduced-motion: no-preference) { .cow.thinking img { animation: cow-think 1.6s ease-in-out infinite; } }
@keyframes cow-think { 50% { transform: translateY(-2px) rotate(-3deg); } }

/* the add-on marks (kept for any screen that still shows one) */
.tileIco img.mark { width: 24px; height: 24px; object-fit: contain; display: block; }

/* ---------- the day-one interview (interview.mjs) ---------- */
.ivCard { display: flex; gap: 14px; align-items: center; width: 100%; max-width: 720px; text-align: left; margin: 0 0 16px; padding: 14px 16px 14px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--pasture-shepherd-tint); box-shadow: inset var(--pasture-rule-width) 0 0 var(--pasture-shepherd-accent); color: var(--ink); font: inherit; }
.ivCard .cow img { width: 52px; height: 52px; }
.ivCard .ivMark { flex: 0 0 auto; line-height: 0; }
.ivCard .ivMark img { display: block; width: 56px; height: 56px; background: var(--pasture-plate); border-radius: var(--r); padding: 2px; }
.ivCard b { display: block; font: 800 calc(21 * var(--fs))/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.ivCard span { font-size: calc(15 * var(--fs)); color: var(--mute); }
.iv { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); }
.ivTop { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); background: var(--pasture-shepherd-tint); box-shadow: inset 0 calc(-1 * var(--pasture-rule-width)) 0 var(--pasture-shepherd-accent); }
.ivTop .cow img { width: 40px; height: 40px; }
.ivTop b { flex: 1; min-width: 0; font: 900 calc(24 * var(--fs))/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.ivTop small { display: block; font: 500 calc(14 * var(--fs))/1.3 var(--mono); letter-spacing: .04em; color: var(--mute); text-transform: none; }
/* the step name under PASTURE: 14px as above. The "nothing under 14px" floor (max(14px, 1em)) read 1em off the 24px title,
   so at iOS Larger Text it grew to 41px and wrapped one word per line (Dashboards' review, batch 7) */
.ivTop b small { font-size: calc(14 * var(--fs)) !important; overflow-wrap: anywhere; }
.ivTop button, .ivChoices button { min-height: 44px; padding: 0 16px; font: inherit; font-size: calc(16 * var(--fs)); color: var(--ink); }
.ivThread { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); }
.ivThread .msg { font-size: calc(17 * var(--fs)); }
.ivWhy { display: block; margin-top: 6px; font-size: calc(14 * var(--fs)); line-height: 1.4; color: var(--mute); }
.ivSum { align-self: stretch; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 14px 16px; }
.ivSum dl { margin: 0; }
.ivSum dt { font: 500 calc(14 * var(--fs))/1.35 var(--mono); color: var(--mute); }
.ivSum dd { margin: 2px 0 12px; font-size: calc(16 * var(--fs)); white-space: pre-wrap; overflow-wrap: anywhere; }
.ivDock { display: grid; gap: 8px; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--line); background: var(--card); }
.ivDock:empty { display: none; }
.ivChoices { display: flex; flex-wrap: wrap; gap: 8px; }
.ivChoices button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ivChoices .ivSkip { background: transparent; color: var(--mute); }
.ivForm { display: flex; gap: 8px; align-items: flex-end; }
.ivForm.ivStack { flex-direction: column; align-items: stretch; }
.ivForm textarea, .ivForm input, .ivForm select { flex: 1; min-width: 0; min-height: 48px; max-height: 160px; resize: none; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; font: inherit; font-size: calc(16 * var(--fs)); background: var(--paper); color: var(--ink); }
.ivForm button[type="submit"] { min-height: 48px; padding: 0 18px; border: 0; background: var(--s-deep); color: var(--s-on-deep); font: inherit; font-size: calc(16 * var(--fs)); font-weight: 700; }
.ivDollar { align-self: center; font-size: calc(18 * var(--fs)); color: var(--mute); }
.ivChoices button.primary { background: var(--s-deep); border-color: var(--s-deep); color: var(--s-on-deep); font-weight: 700; }
.ivChoices .ivSample { background: var(--s-tint); border-color: var(--s-accent); color: var(--s-deep); font-weight: 700; }
/* ---------- import first + voice (Pitches 2026-11-09; spec drafts/PASTURE-ONBOARDING-IMPORT-VOICE-SPEC.md) ---------- */
.ivHave label, .ivLabel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } /* never wider than the dock (1.7x text) */
.ivHave label > span, .ivLabel > span { font: 500 calc(14 * var(--fs))/1.3 var(--mono); letter-spacing: .04em; color: var(--mute); }
.ivHave input { min-height: 48px; width: 100%; min-width: 0; }
/* the Google row: the box and Find side by side; when the text is large, Find wraps under the box */
.ivRowIn { display: flex; flex-wrap: wrap; gap: 8px; }
.ivRowIn input { flex: 1 1 12rem; min-width: 0; }
.ivRowIn button { flex: 0 0 auto; }
.ivRowIn button, .ivPlaces button, .ivPicked button, .ivHint button, .ivMicOff button { min-height: 44px; padding: 0 14px; font: inherit; font-size: calc(16 * var(--fs)); color: var(--ink); }
.ivPlaces { display: grid; gap: 6px; }
.ivPlace { display: grid; justify-items: start; text-align: left; gap: 2px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.ivPlace span { font-size: calc(14 * var(--fs)); color: var(--mute); }
.ivPicked { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px 8px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.ivPicked > span:nth-child(2) { flex: 1; min-width: 0; }
.ivMaps { font: 500 calc(13 * var(--fs))/1.2 var(--sans); color: var(--mute); letter-spacing: .01em; }
.ivNote { margin: 0; font-size: calc(15 * var(--fs)); color: var(--mute); }
.ivNote:empty { display: none; }
.ivConsent, .ivConsentSmall { align-self: stretch; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 12px 14px; font-size: calc(15 * var(--fs)); line-height: 1.45; }
.ivConsentSmall { margin: 0; color: var(--mute); }
.ivSteps { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 0 14px; }
.ivSteps summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.ivSteps[open] { padding-bottom: 12px; display: grid; gap: 10px; }
.ivSteps ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: calc(15 * var(--fs)); line-height: 1.45; }
.ivSteps a { color: var(--grass-dk); }
.ivDrop { position: relative; display: grid; place-items: center; gap: 4px; min-height: 64px; padding: 12px; border: 1.5px dashed var(--s-accent); border-radius: var(--r); background: var(--paper); text-align: center; cursor: pointer; font-size: calc(15 * var(--fs)); }
.ivDrop.over { border-style: solid; background: var(--s-tint); }
.ivFileIn { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.ivDrop:focus-within { outline: 2px solid var(--s-accent); outline-offset: 2px; }
.ivFileName { font: 500 calc(14 * var(--fs))/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.ivConnect { display: flex; align-items: center; gap: 10px; }
.ivConnect button { min-height: 44px; padding: 0 16px; opacity: .55; }
.ivConnect small { color: var(--mute); }
.ivThinking .msg { color: var(--mute); }
.ivFound { align-self: stretch; width: 100%; max-width: 760px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 6px 12px 12px; box-shadow: inset var(--pasture-rule-width) 0 0 var(--pasture-shepherd-accent); }
.ivFound h3 { margin: 14px 0 6px 6px; font: 800 calc(17 * var(--fs))/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.ivFound ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ivRow { display: grid; grid-template-columns: 44px 1fr; align-items: start; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.ivRow.on { border-color: var(--s-accent); }
.ivRow.hint { border-style: dashed; }
.ivTick { display: grid; place-items: center; min-height: 48px; cursor: pointer; }
.ivTick input { width: 22px; height: 22px; accent-color: var(--s-deep); }
.ivRowMain { min-width: 0; display: grid; gap: 6px; padding: 6px 10px 8px 0; }
.ivRowBody { display: grid; gap: 2px; justify-items: start; text-align: left; width: 100%; min-height: 44px; padding: 4px 0; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.ivRowQ { font: 500 calc(13 * var(--fs))/1.3 var(--mono); letter-spacing: .03em; color: var(--mute); }
.ivRowV { font-size: calc(16 * var(--fs)); white-space: pre-wrap; overflow-wrap: anywhere; }
.ivRowMeta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ivRowMeta small { font-size: calc(13 * var(--fs)); color: var(--warn); }
.ivChip { font: 500 calc(12.5 * var(--fs))/1 var(--mono); padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--mute); background: var(--card); }
.ivHint { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: calc(15 * var(--fs)); }
.ivHint > span { flex: 1; min-width: 0; color: var(--mute); overflow-wrap: anywhere; }
.ivHint q { color: var(--ink); }
.ivEdit { display: grid; gap: 8px; }
.ivEdit input, .ivEdit textarea { min-height: 44px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font: inherit; font-size: calc(16 * var(--fs)); background: var(--card); color: var(--ink); resize: vertical; }
.ivEdit .ivChoices button { min-height: 40px; padding: 0 12px; font-size: calc(15 * var(--fs)); }
.ivMapsLink { margin: 10px 6px 0; font-size: calc(15 * var(--fs)); }
.ivMapsLink a { color: var(--grass-dk); }
.ivPhotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.ivPhoto { position: relative; padding: 0; aspect-ratio: 1; overflow: hidden; border: 2px solid transparent; border-radius: var(--r); background: var(--paper-2); }
.ivPhoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ivPhoto[aria-pressed="true"] { border-color: var(--s-deep); }
.ivPhoto[aria-pressed="true"]::after { content: "✓" / ""; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--s-deep); color: var(--s-on-deep); font-weight: 700; }
.ivOwns { display: flex; gap: 10px; align-items: center; min-height: 44px; margin-top: 8px; font-size: calc(15 * var(--fs)); }
.ivOwns input { width: 22px; height: 22px; flex: none; accent-color: var(--s-deep); }
.ivMic { flex: none; width: 48px; min-height: 48px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); }
.ivMic.on { background: var(--bad); border-color: var(--bad); color: var(--paper); animation: pulse 1.2s infinite; }
.ivMicOff { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: calc(15 * var(--fs)); color: var(--mute); }
.ivMicOff span { flex: 1 1 100%; }
a.ivOpen { margin: 0 0 0 52px; }
.ivSeeDraft { margin-left: 52px; min-height: 48px; padding: 0 22px; border-radius: var(--r); font-weight: 700; background: var(--s-deep); border-color: var(--s-deep); color: var(--s-on-deep); }
.ivVoiceNote span { color: var(--ink); }
.ivMicOff button.primary { background: var(--s-deep); border-color: var(--s-deep); color: var(--s-on-deep); font-weight: 700; }
.ivSampleRow { display: grid; grid-template-columns: 1fr 1fr; }
.ivSampleRow button:last-child { grid-column: 1 / -1; }
.ivChoices .ivSample:disabled { opacity: .45; }
/* the photo picker's first tile: a new photo (editor item 1) */
.photoPick .newPhoto { width: 92px; height: 64px; border-radius: var(--r); border: 1.5px dashed var(--s-accent); display: grid; place-content: center; text-align: center; gap: 2px; color: var(--grass-dk); cursor: pointer; background: var(--card); }
.photoPick .newPhoto span { font-size: calc(22 * var(--fs)); line-height: 1; }
.photoPick .newPhoto small { font-size: calc(14 * var(--fs)); font-weight: 700; line-height: 1.1; }
.photoPick .newPhoto.busy { opacity: .6; cursor: progress; }
/* whole looks (editor item 4): a swatch and the look's name in its own heading font */
.looks .opt.whole span:last-child { font-size: calc(16 * var(--fs)); }
.looks .another { align-self: center; }

/* ---------- Help menu, the first-run tour, loading bars (ShprD 2026-11-06: "all the things you would expect from a modern app") ---------- */
.helpBtn { width: 38px; height: 38px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; font: 700 calc(17 * var(--fs))/1 var(--sans); color: var(--ink); background: var(--card); border-color: var(--line); }
.helpWrap { position: relative; }
.helpMenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(300px, calc(100vw - 32px)); background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: grid; gap: 12px; box-shadow: 0 18px 40px -20px var(--shade-lg); }
.helpMenu[hidden] { display: none; }
.helpMenu .lbl { font: 500 calc(14 * var(--fs))/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.helpMenu .themeSeg { display: flex; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.helpMenu .themeSeg button { flex: 1; border: 0; background: transparent; padding: 7px 8px; border-radius: 999px; }
.helpMenu .themeSeg button[aria-pressed="true"] { background: var(--card); box-shadow: 0 1px 3px var(--shade); font-weight: 700; }
.helpMenu .keys { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: calc(15 * var(--fs)); color: var(--mute); }
.helpMenu kbd { font: 500 calc(14 * var(--fs))/1 var(--mono); padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); }
@media (pointer: coarse) { .helpMenu .keysBox { display: none; } }
.helpMenu .signOut { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: 12px 0 0; min-height: 44px; text-align: left; color: var(--ink); font-weight: 600; } /* P-09 */

.tourCard { position: fixed; z-index: 70; width: min(340px, calc(100vw - 24px)); background: var(--card); color: var(--ink); border: 1px solid var(--line); border-top: var(--pasture-rule-width) solid var(--s-accent); border-radius: var(--r); padding: 16px 16px 14px; display: grid; gap: 10px; box-shadow: 0 24px 50px -24px var(--shade-lg); }
.tourCard h2 { margin: 0; font: 800 calc(22 * var(--fs))/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; padding-right: 64px; }
.tourCard p { margin: 0; font-size: calc(16 * var(--fs)); line-height: 1.45; color: var(--ink); }
.tourCard .tourSkip { position: absolute; top: 10px; right: 10px; border: 0; background: none; color: var(--mute); padding: 6px 8px; font-size: calc(15 * var(--fs)); text-decoration: underline; text-underline-offset: 3px; }
.tourCard .tourFoot { display: flex; align-items: center; gap: 8px; }
.tourCard .dots { display: flex; gap: 6px; flex: 1; }
.tourCard .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.tourCard .dots i.on { background: var(--s-accent); width: 18px; border-radius: 999px; }
.tourCard .draftTag { justify-self: start; }
.tourArrow { position: absolute; width: 14px; height: 14px; background: var(--card); border: 1px solid var(--line); transform: rotate(45deg); }
.tourArrow.up { top: -8px; border-right: 0; border-bottom: 0; background: var(--s-accent); border-color: var(--s-accent); }
.tourArrow.down { bottom: -8px; border-left: 0; border-top: 0; }
.tourRing { outline: 3px solid var(--focus) !important; outline-offset: 3px !important; border-radius: var(--r); position: relative; z-index: 6; }
@media (max-width: 640px) {
  .tourCard { left: 12px !important; right: 12px; top: auto !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); width: auto; }
  .tourArrow { display: none; }
}

.skel { display: grid; gap: 14px; padding: 10px 0; max-width: 980px; margin: 0 auto; }
.skel i { display: block; height: 18px; border-radius: 4px; background: linear-gradient(90deg, var(--paper-2) 0%, var(--line) 50%, var(--paper-2) 100%); background-size: 200% 100%; animation: skel 1.4s linear infinite; }
.skel i:first-child { height: 34px; width: 45%; } .skel i:nth-child(2) { width: 70%; } .skel i.box { height: 120px; border-radius: var(--r); }
@keyframes skel { to { background-position: -200% 0; } }

/* press feedback (2026-11-08): a press shrinks a button or tile a little in 120 ms and springs back on release;
   Yes and Publish add a short check mark (burst() in studio.js). Transform and opacity only, so nothing around it
   moves. None of it runs when the device asks for less motion. */
@media (prefers-reduced-motion: no-preference) {
  button { transition: transform 240ms cubic-bezier(.34, 1.56, .64, 1); }
  button:not(:disabled):active { transform: scale(.95); transition-duration: 120ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1); }
  button.tile:not(:disabled):active { transform: scale(.99); }
}
.burst { position: fixed; z-index: 60; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--s-deep); color: var(--s-on-deep); display: grid; place-items: center; pointer-events: none; opacity: 0; box-shadow: 0 8px 20px -8px var(--shade-lg); animation: burst 700ms cubic-bezier(.2, 0, 0, 1) forwards; }
.burst svg { width: 24px; height: 24px; }
.burst path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tick 260ms 90ms ease-out forwards; }
@keyframes burst { 0% { opacity: 0; transform: scale(.5); } 22% { opacity: 1; transform: scale(1.1); } 40% { transform: scale(1); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-10px) scale(.96); } }
@keyframes tick { to { stroke-dashoffset: 0; } }

/* drawings (plan item 2): line art in the ink colour, sized by its box; a short phone screen drops the tour drawing */
svg.art { display: block; width: 100%; height: auto; color: var(--ink); }
.emptyArt { display: grid; justify-items: center; gap: 10px; padding: 18px 0 8px; text-align: center; }
.emptyArt svg.art { max-width: 200px; }
.tourArt svg.art { max-width: 132px; height: 88px; }
@media (max-height: 640px) { .tourArt { display: none; } }

/* the device asks for less motion: nothing slides, pulses or shimmers */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* the smallest phones (320 px, iPhone SE): the status chip, Publish and Help share one row without pushing the page sideways */
@media (max-width: 360px) {
  .pub { gap: 6px; min-width: 0; }
  .pub .chip { padding: 6px 7px; letter-spacing: 0; }
  .helpBtn { width: 36px; height: 36px; }
}

/* ---------- punch list 2026-11-08: tap targets, tab cue, tour dock, busy ---------- */
/* P-19: every control is at least 44 px to tap */
button { min-height: 44px; }
.tabs button { min-height: 44px; }
.seg button { min-height: 44px; }
.helpBtn { width: 44px; height: 44px; }
.round { width: 44px; height: 44px; }
.tile details summary { min-height: 44px; }
.picked input[type="color"] { width: 48px; height: 44px; }
.picked .looks .opt { min-height: 44px; }
.install .x { min-width: 44px; min-height: 44px; }
.tourCard .tourSkip { min-height: 44px; min-width: 44px; top: 4px; right: 4px; }
/* P-11: more tabs past the right edge */
.tabs.more { -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 40px), transparent); mask-image: linear-gradient(to right, var(--ink) calc(100% - 40px), transparent); }
/* P-06: on a phone the tour card moves to the top when the bottom would cover its target */
@media (max-width: 640px) {
  .helpBtn { width: 44px; height: 44px; }
  .tourCard.dockTop { top: calc(env(safe-area-inset-top, 0px) + 12px) !important; bottom: auto; }
}
/* P-22: a button that is loading shows it at once */
button[aria-busy="true"] { cursor: progress; position: relative; color: transparent !important; }
button[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--s-on-deep); border-right-color: transparent; animation: pasture-spin .8s linear infinite; }
button:not(.primary)[aria-busy="true"]::after { border-color: var(--ink); border-right-color: transparent; } /* P-42: a plain button spins in ink */
@keyframes pasture-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button[aria-busy="true"]::after { animation-duration: 2.4s; } }
/* an owner's longer pill (Off for this client · asked …) runs under the words, not beside them */
.tile > .pill:not(.soon):not(.yes) { grid-column: 2 / -1; grid-row: auto; justify-self: start; }
/* Publish wears the plain outline in the bar, so its spinner turns in ink */
.pub .primary[aria-busy="true"]::after { border-color: var(--ink); border-right-color: transparent; }

/* ---------- "Your site today" (client Home) and the owner's close dialog (P-35b), 2026-11-09 ---------- */
.yourSite { display: grid; gap: 4px; max-width: 720px; margin: 0 0 16px; padding: 14px 16px 14px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: inset var(--pasture-rule-width) 0 0 var(--s-accent); }
.yourSiteLabel { font: 500 calc(14 * var(--fs))/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.yourSiteLink { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font: 800 calc(24 * var(--fs))/1.1 var(--display); text-transform: none; color: var(--s-deep); overflow-wrap: anywhere; }
.yourSite p { margin: 0; font-size: calc(15 * var(--fs)); color: var(--mute); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button.btnDanger { background: var(--bad); border-color: var(--bad); color: var(--paper); font-weight: 700; }
button.btnDanger:disabled { opacity: .45; }
.client .closeAcct { margin-left: auto; }
.closeDlg { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: var(--shade-lg); }
/* taller than the screen (1.7x text on a 375x667 phone): the dialog scrolls inside, and the buttons stay pinned at its foot */
.closeForm { max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; width: min(480px, 100%); display: grid; gap: 12px; padding: 20px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-top: var(--pasture-rule-width) solid var(--bad); border-radius: var(--r); }
.closeForm h2 { margin: 0; font: 800 calc(22 * var(--fs))/1.1 var(--display); text-transform: uppercase; }
.closeForm p { margin: 0; font-size: calc(15 * var(--fs)); }
.closeForm label { display: grid; gap: 6px; }
.closeForm label span { font: 500 calc(14 * var(--fs))/1.3 var(--mono); color: var(--mute); }
.closeForm input, .closeForm textarea { min-height: 44px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font: inherit; font-size: calc(16 * var(--fs)); background: var(--paper); color: var(--ink); }
.closeForm .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.closeForm > .row:last-child { position: sticky; bottom: -20px; margin: 0 -20px -20px; padding: 12px 20px 20px; background: var(--card); border-top: 1px solid var(--line); }
.closeForm .row button { min-height: 44px; padding: 0 18px; }
.closeNote { color: var(--ink); }
.closeNote:empty { display: none; }
/* the empty-Home lead: the first and largest thing on Home until the profile can make a first draft */
.ivCard.ivLead { margin: 0 0 20px; padding: 20px 20px 20px 24px; background: var(--pasture-shepherd-tint); box-shadow: inset var(--pasture-rule-width) 0 0 var(--pasture-shepherd-accent), 0 18px 40px -30px var(--shade-lg); }
.ivCard.ivLead b { font-size: calc(30 * var(--fs)); }
.ivCard.ivLead span:not(.ivMark) { display: block; margin-top: 6px; font-size: calc(17 * var(--fs)); color: var(--ink); }
.ivCard.ivLead::after { content: "›" / ""; margin-left: auto; font: 400 calc(30 * var(--fs))/1 var(--sans); color: var(--pasture-shepherd-deep); }
/* passkeys, "Sign in with Face ID" (Pitches 2026-11-09): a quiet "or" rule under the password form, then one outline
   button; in Help, a row like Sign out that opens the device card (the dialog ground is .closeDlg's) */
.pkLogin { display: grid; gap: 10px; }
.pkLogin[hidden] { display: none; }
.pkOr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; color: var(--mute); font: 500 calc(14 * var(--fs))/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.pkOr::before, .pkOr::after { content: ""; border-top: 1px solid var(--line); }
.pkBtn { min-height: 48px; font-weight: 700; }
.helpMenu .pkMenu { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: 12px 0 0; min-height: 44px; text-align: left; color: var(--ink); font-weight: 600; }
.helpMenu .pkMenu[hidden] { display: none; }
.pkCard { width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow: auto; display: grid; gap: 12px; padding: 20px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-top: var(--pasture-rule-width) solid var(--s-accent); border-radius: var(--r); box-shadow: 0 24px 60px -40px var(--shade-lg); }
.pkCard h2 { margin: 0; font: 800 calc(22 * var(--fs))/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.pkCard h2:focus { outline: none; }
.pkCard > p { margin: 0; font-size: calc(15 * var(--fs)); color: var(--mute); }
.pkCard > button.primary { justify-self: start; min-height: 44px; padding: 0 18px; }
.pkCard > button[hidden] { display: none; }
.pkCard .lbl { margin-top: 6px; font: 500 calc(14 * var(--fs))/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.pkNote { color: var(--ink) !important; }
.pkNote:empty { display: none; }
.pkList { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.pkRow, .pkNone { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pkNone { color: var(--mute); }
.pkWhat { flex: 1 1 12rem; min-width: 0; display: grid; gap: 2px; }
.pkWhat b { overflow-wrap: anywhere; }
.pkWhat small { font: 400 calc(14 * var(--fs))/1.35 var(--mono); color: var(--mute); }
.pkRow button { min-height: 44px; padding: 0 16px; }
.pkAsk { flex: 1 1 100%; margin: 0; }
.pkCard .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pkCard .row.end { justify-content: flex-end; }
.pkCard .row.end button { min-height: 44px; padding: 0 18px; }
/* "Your Google profile" (client Home): a link-only card to the Gospel page, in Gospel's farm colour */
.gbpCard { display: grid; gap: 6px; justify-items: start; max-width: 720px; margin: 0 0 16px; padding: 14px 16px 16px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: inset var(--pasture-rule-width) 0 0 var(--s-accent); }
.gbpCard p { margin: 0; font-size: calc(15 * var(--fs)); color: var(--mute); }
.gbpCard button { min-height: 44px; padding: 0 18px; margin-top: 4px; }
.gbpStats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 8px 16px; width: 100%; margin: 4px 0 0; }
.gbpStats div { min-width: 0; }
.gbpStats dt { font-size: calc(13 * var(--fs)); color: var(--mute); overflow-wrap: anywhere; }
.gbpStats dd { margin: 0; font: 700 calc(22 * var(--fs))/1.15 var(--display); font-variant-numeric: tabular-nums; }
.gbpWindow { margin-top: 6px; font: 500 calc(13 * var(--fs))/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }