/* Crossroads pocket journal. Presentation only; workflow states stay in app.js. */
:root {
  --bg:#F5F4EF; --surface:#FFFFFF; --raised:#F1F5F6;
  --ink:#202B33; --ink-2:#53616B; --rule:#D6DDD9; --rule-strong:#8A979E;
  --accent:#234C67; --accent-field:#E7EFF3; --focus:#234C67;
  --frame:#E0E5E3; --radius:10px; --radius-control:12px;
  --gutter:20px; --section:26px; --row-pad:17px;
  --header-h:72px; --nav-h:74px; --band-h:80px;
  --font-display:Georgia,'Times New Roman',serif;
  --lift:0 4px 24px rgba(30,46,56,.09);
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme='light']) {
    --bg:#161D23; --surface:#202A32; --raised:#293640; --ink:#F1F3F0;
    --ink-2:#B7C3C8; --rule:#394852; --rule-strong:#7E919B;
    --accent:#AFD3E8; --on-accent:#162A38; --accent-field:#2A3D4B;
    --frame:#11171C; --focus:#AFD3E8;
  }
}
:root[data-theme='dark'] {
  --bg:#161D23; --surface:#202A32; --raised:#293640; --ink:#F1F3F0;
  --ink-2:#B7C3C8; --rule:#394852; --rule-strong:#7E919B;
  --accent:#AFD3E8; --on-accent:#162A38; --accent-field:#2A3D4B;
  --frame:#11171C; --focus:#AFD3E8;
}
body { font-size:16px; line-height:1.5; }
.app-header { gap:8px; border-bottom-color:var(--rule); }
.app-title { font-size:18px; font-weight:600; letter-spacing:-.025em; }
.app-date { font-size:13px; margin-top:4px; }
.hdr-right { gap:0; }
.hdr-search { min-width:44px; }
.conn { font-family:var(--font-ui); font-size:13px; padding:0 6px; min-height:44px; }
.posture { border:0; background:var(--bg); border-radius:24px; font-size:13px; padding:6px 10px; min-height:44px; }
.hdr-back { margin-left:-10px; }
/* Today alone has a mode control. Give identity a full first line and place
   date/search/sync/mode on the second. Keep the shared height token in sync so
   content and the stale strip still clear the fixed header on phone/desktop. */
:root:has(#postureBtn:not([hidden])) { --header-h:88px; }
.app-header:has(#postureBtn:not([hidden])) {
  display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;
  grid-template-rows:24px 44px;column-gap:4px;row-gap:0;
  padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:9px;
}
.app-header:has(#postureBtn:not([hidden])) .hdr-name,
.app-header:has(#postureBtn:not([hidden])) .hdr-right { display:contents; }
.app-header:has(#postureBtn:not([hidden])) .app-title { grid-column:1 / -1;grid-row:1; }
.app-header:has(#postureBtn:not([hidden])) .app-date { grid-column:1;grid-row:2;margin:0; }
.app-header:has(#postureBtn:not([hidden])) .hdr-search { grid-column:2;grid-row:2;min-width:44px; }
.app-header:has(#postureBtn:not([hidden])) .conn { grid-column:3;grid-row:2; }
.app-header:has(#postureBtn:not([hidden])) .posture { grid-column:4;grid-row:2; }
.app-header:has(#postureBtn:not([hidden])) .hdr-barn { grid-column:4;grid-row:1;min-height:44px;padding:0 6px; }
:root:has(#postureBtn:not([hidden])):has(#barnBtn:not([hidden])) { --header-h:108px; }
.app-header:has(#postureBtn:not([hidden])):has(#barnBtn:not([hidden])) { grid-template-rows:44px 44px; }
.app-header:has(#postureBtn:not([hidden])):has(#barnBtn:not([hidden])) .app-title { grid-column:1 / 4; }
.band { border-top:0; margin-top:0; padding-bottom:12px; }
.band h2 { font-family:var(--font-ui); font-size:18px; font-weight:650; letter-spacing:-.025em; }
.band.title { padding-top:28px; padding-bottom:18px; }
.band.title h2 { font-family:var(--font-display); font-size:30px; font-weight:500; letter-spacing:-.035em; }
.band-note { font-size:14px; line-height:1.55; }
.band span.count { border:0; background:var(--accent-field); color:var(--accent); height:24px; min-width:26px; }
.row { border-bottom-color:var(--rule); }
.row-name { font-size:17px; font-weight:600; letter-spacing:-.02em; }
.row-sub { font-size:14px; margin-top:5px; }
.row-time { font-size:14px; min-width:62px; }
.row-when,.stamp,.pill,.comp-label,.month,.micro,.step,.weather-label,.r-head,.paid-tag,
.field label,.btn,.nav a,.type-btn,.chip,.seg button {
  text-transform:none; letter-spacing:0;
}
.stamp { font-size:14px; padding:3px 7px; border:0; background:var(--bg); }
.pill { min-height:28px; padding:3px 8px; font-size:14px; border:0; border-radius:7px; }
.row-right { font-size:16px; }
.btn { font-size:16px; font-weight:600; }
.btn.secondary { background:var(--surface); border-color:var(--rule-strong); font-size:15px; }
.action-band { border-top:0; padding:10px 16px 12px; background:var(--bg); }
.action-band .btn { height:58px; min-height:58px; border:1px solid var(--accent); border-radius:14px; }
.action-band .btn[disabled] { border:1px solid var(--rule); background:var(--surface); }
.nav { padding-left:10px; padding-right:10px; }
.nav a { flex-direction:column; gap:4px; font-size:13px; border:0; position:relative; }
.nav a svg { width:22px; height:22px; padding:0; }
.nav a[aria-current='page'] { font-weight:650; color:var(--accent); }
.nav a[aria-current='page']::before { content:''; position:absolute; top:8px; width:52px; height:31px; border-radius:18px; background:var(--accent-field); z-index:-1; }
.nav a { isolation:isolate; padding-top:8px; padding-bottom:8px; }
.weather { margin:20px 16px 8px; padding:18px 20px; border:0; border-radius:18px; background:#234C67; color:#FFFFFF; }
.weather-label { font-size:14px; color:#E4EEF4; }
.weather-head { font-size:16px; gap:8px 16px; margin-top:6px; }
.weather-head > span:first-child { font-size:23px; letter-spacing:-.03em; }
.weather-out { color:#FFFFFF; }
.weather-hours { gap:0; justify-content:space-between; padding-top:12px; margin-top:14px; border-top:1px solid #53748A; }
.wx-hour { min-width:0; font-size:14px; color:#E4EEF4; }
.wx-hour b { font-size:15px; color:#FFFFFF; }
.setup-card { margin:12px 16px 4px; border:1px solid var(--rule); border-radius:14px; overflow:hidden; }
.setup-card > .row { border-bottom:0; }
.setup-card .band { background:var(--surface); padding:20px 16px 10px; }
.setup-card .row-name { font-size:15px; }
.setup-card .row-sub { font-size:14px; }
.setup-card .row { padding:14px 16px; }
.setup-card .setup-foot { border:0; }
.setup-card .setup-done { font-size:14px; }
.outcomes { background:var(--accent-field); border-bottom:1px solid var(--rule); padding-top:16px; padding-bottom:16px; }
.outcomes .btn { border-radius:10px; }
.stall { padding-top:26px; padding-bottom:26px; }
.stall-thumb { width:58px; height:58px; flex-basis:58px; border-radius:16px; background:var(--accent-field); color:var(--accent); font-size:28px; }
.stall-name { font-size:30px; font-weight:500; letter-spacing:-.03em; }
.comp-label { font-size:14px; }
.comp-row { font-size:14px; }
.filters { gap:6px; padding:14px var(--gutter); background:var(--bg); border-bottom:0; }
.filter { font-size:14px; border-radius:10px; }
.month { font-size:14px; padding-top:14px; padding-bottom:14px; font-weight:600; }
.l-stamp { border-radius:6px; }
.owed-total { margin:20px 16px 10px; padding:24px; border:1px solid var(--rule); border-radius:18px; }
.owed-figure { font-size:48px; letter-spacing:-.055em; }
.owed-cap { margin-top:4px; }
.owed-client { padding-top:20px; padding-bottom:20px; }
.owed-head { min-height:48px; }
.form { border-bottom:0; padding-top:20px; padding-bottom:24px; gap:20px; }
.field label { font-size:14px; font-weight:600; }
.field input,.field select,.field textarea { border-color:var(--rule-strong); border-radius:10px; padding:12px 14px; background:var(--surface); font-size:16px; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--accent); }
.field .hint { font-size:14px; line-height:1.5; }
.saying { font-size:21px; line-height:1.45; padding-top:20px; padding-bottom:20px; letter-spacing:-.02em; }
.say-fill { border-radius:5px; }
.step { font-size:15px; font-weight:600; }
h3.step { margin:0; font-family:var(--font-ui); line-height:1.5; }
.type-group { font-size:14px; text-transform:none; letter-spacing:0; }
.type-group::before { display:none; }
.type-grid { gap:9px; }
.type-btn,.chip,.seg button { border-radius:10px; font-size:14px; }
.seg { gap:5px; padding:5px; margin:0 20px 20px; border:1px solid var(--rule); border-radius:13px; background:var(--surface); }
.seg button { border:0; background:transparent; min-height:48px; font-size:14px; }
.receipt { border-radius:16px 16px 0 0; box-shadow:0 -6px 28px rgba(0,0,0,.12); }
.r-head { font-size:14px; }
.empty { padding-top:24px; padding-bottom:24px; line-height:1.6; }
.page-intro { padding:28px 20px 22px; }
.page-intro h1 { margin:0 0 10px; font-family:var(--font-display); font-size:30px; line-height:1.13; font-weight:500; letter-spacing:-.035em; }
.page-intro p { margin:0; font-size:14px; line-height:1.6; color:var(--ink-2); max-width:36ch; }
.account-entry { display:flex; align-items:center; gap:13px; margin:0 16px; padding:16px; background:var(--accent); color:var(--on-accent); text-decoration:none; border-radius:16px; }
.account-entry .service-icon { background:rgba(255,255,255,.13); color:inherit; }
.entry-copy { flex:1; min-width:0; }
.entry-copy strong { display:block; font-size:16px; font-weight:600; }
.entry-copy > span { display:block; font-size:14px; margin-top:5px; line-height:1.5; }
.account-entry > svg { width:18px; height:18px; flex:none; }
.ranch-shortcuts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 16px 4px; }
.ranch-shortcuts a { display:flex; align-items:center; justify-content:center; gap:9px; min-height:56px; border:1px solid var(--rule); background:var(--surface); color:var(--ink); text-decoration:none; border-radius:12px; font-size:14px; font-weight:600; }
.ranch-shortcuts svg { width:20px; height:20px; color:var(--accent); }
.ranch-intro { padding-top:20px; padding-bottom:16px; }
.ranch-intro h1 { font-size:34px; }
.assistant-entry { display:flex; align-items:center; gap:12px; min-height:56px; margin:0 20px 8px; color:var(--accent); text-decoration:none; font-size:16px; font-weight:600; }
.assistant-entry .entry-copy { flex:1; }
.assistant-entry .entry-copy > span { color:var(--ink-2); font-weight:400; }
.assistant-entry svg { width:22px; height:22px; flex:none; }
.assistant-entry svg:last-child { width:16px; }
.ranch-section { margin:0 20px; border-top:1px solid var(--rule); }
.ranch-section-summary { display:flex; align-items:center; gap:14px; min-height:88px; padding:16px 0; cursor:pointer; list-style:none; }
.ranch-section-summary::-webkit-details-marker { display:none; }
.ranch-section-summary > svg { width:26px; height:26px; flex:none; color:var(--accent); }
.ranch-section-summary > svg:last-child { width:16px; height:16px; }
.ranch-section-summary h2 { margin:0; font:600 18px/1.3 var(--font-ui); letter-spacing:-.02em; }
.ranch-section-summary .entry-copy > span { color:var(--ink-2); }
.ranch-section[open] .ranch-section-summary > svg:last-child { transform:rotate(90deg); }
.ranch-section-content { padding-bottom:20px; }
.ranch-section-content .form,.ranch-section-content .row-actions,.ranch-section-content .band-note,
.ranch-section-content .saying { padding-left:0; padding-right:0; }
.ranch-section-content .row-actions { border:0; background:transparent; }
.ranch-display { padding-top:18px; }
.ranch-display + .seg { margin-bottom:8px; }
.ranch-section-summary:focus-visible,.service-summary:focus-visible { outline:3px solid var(--focus); outline-offset:-4px; border-radius:8px; }
.account-list { margin:0 16px; display:grid; gap:12px; }
.service-card { border:1px solid var(--rule); border-radius:16px; background:var(--surface); overflow:hidden; }
.service-summary { display:flex; align-items:flex-start; gap:12px; padding:18px 15px; cursor:pointer; list-style:none; scroll-margin-top:84px; }
.service-summary::-webkit-details-marker { display:none; }
.service-icon { display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex:0 0 42px; border-radius:12px; background:var(--accent-field); color:var(--accent); }
.service-icon svg { width:23px; height:23px; }
.service-copy { display:flex; flex-direction:column; min-width:0; flex:1; }
.service-name { font-size:17px; line-height:1.3; font-weight:650; letter-spacing:-.02em; }
.service-description { margin-top:5px; font-size:14px; line-height:1.5; color:var(--ink-2); overflow-wrap:anywhere; }
.service-status { margin-top:10px; align-self:flex-start; font-size:14px; line-height:1.4; font-weight:600; padding:4px 8px; border-radius:6px; background:var(--bg); color:var(--ink-2); }
.service-status.ready { background:var(--success-field); color:var(--success); }
.service-status.attention { background:var(--warn-field); color:var(--warn); }
.service-open { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; flex:0 0 48px; min-height:44px; font-size:13px; color:var(--accent); font-weight:600; }
.service-open svg { width:15px; height:15px; }
.service-card[open] { border-color:var(--rule-strong); }
.service-card[open] .service-open svg { transform:rotate(90deg); }
.service-content { padding:0 15px 8px; border-top:1px solid var(--rule); }
.service-content .service-detail-heading { padding:0; border:0; height:0; overflow:hidden; }
.service-content > .band-note { padding:14px 0 0; margin:0; font-size:14px; }
.service-content .form { padding:18px 0; background:transparent; gap:17px; }
.service-content .row-actions { padding:18px 0 10px; border:0; background:transparent; }
.service-content .row-actions.destructive { padding-top:8px; }
.service-content .btn { min-height:52px; }
.service-content .destructive .btn { color:var(--danger); border-color:var(--rule); background:transparent; }
.service-content .destructive .btn.danger { color:var(--on-danger); background:var(--danger); border-color:var(--danger); }
.service-content .connection-guide { margin:16px 0 0; padding:14px 16px; border-radius:10px; background:var(--bg); font-size:14px; color:var(--ink-2); }
.connection-guide p { margin:0 0 8px; }
.connection-guide ol { margin:8px 0 0; padding-left:18px; }
.connection-guide li + li { margin-top:7px; }
.connection-guide a { color:var(--accent); text-underline-offset:3px; }
.connection-guide .guide-link { display:inline-flex; align-items:center; min-height:44px; }
.account-section-title { padding:26px 20px 12px; }
.account-section-title h2 { margin:0; font-size:15px; font-weight:600; }
.secondary-services { gap:9px; }
.secondary-services .service-summary { padding-top:15px; padding-bottom:15px; }
.secondary-services .service-name { font-size:16px; }
.secondary-services .service-icon { width:36px; height:36px; flex-basis:36px; background:var(--bg); color:var(--ink-2); }
.accounts-privacy { display:flex; gap:10px; margin:24px 22px 12px; color:var(--ink-2); }
.accounts-privacy > svg { width:19px; height:19px; flex:none; margin-top:2px; }
.accounts-privacy p { margin:0; font-size:14px; line-height:1.7; }
.accounts-privacy a { color:var(--accent); text-underline-offset:3px; }
.auth { padding:60px 28px 32px; gap:26px; }
.auth h1 { font-size:36px; letter-spacing:-.04em; line-height:1.12; font-weight:500; }
.auth .sub { font-size:15px; line-height:1.6; }
.auth footer { font-size:14px; }
.ranch-mark { margin:0 auto; display:block; width:60px; height:60px; color:var(--accent); }
.auth .form { gap:20px; }
.auth.access-status { gap:24px; }
.access-status .status-brand { margin:0; color:var(--ink-2); font-size:15px; text-align:center; }
.access-status h1 { font-size:32px; line-height:1.18; text-wrap:balance; }
.access-status .status-message { margin:0; padding:24px 0; border-block:1px solid var(--rule); font-size:17px; line-height:1.65; overflow-wrap:anywhere; }
.access-status footer { margin:0; }
@media (max-width:359px) {
  .app-header { padding-left:14px; padding-right:12px; gap:2px; }
  .app-title { font-size:16px; }
  .posture { padding-left:6px; padding-right:6px; font-size:13px; }
  .hdr-search { min-width:40px; }
  .conn { padding:0 3px; font-size:13px; }
  .service-summary { gap:9px; padding-left:12px; padding-right:12px; }
  .service-icon { width:34px; height:34px; flex-basis:34px; }
  .service-open { flex-basis:44px; }
  .page-intro h1 { font-size:28px; }
}
@media screen and (min-width:600px) { :root[data-frame="phone"] body { width:420px; } }
/* Nonmodal write-pause notice. Fixed positioning also stays inside the
   transformed desktop phone frame. It never replaces a receipt or form. */
.ranch-notice {
  position:fixed;z-index:30;left:12px;right:12px;
  top:calc(var(--header-offset, var(--header-h)) + var(--stale-space,0px) + 10px);
  max-height:60%;overflow:auto;overscroll-behavior:contain;
  padding:16px;border:1px solid var(--rule-strong);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);box-shadow:var(--lift);
  font-size:inherit;line-height:1.5;
}
.ranch-notice[hidden] { display:none; }
.ranch-notice-message { margin:0;overflow-wrap:anywhere; }
.ranch-notice-dismiss {
  display:block;min-width:44px;min-height:44px;margin:12px 0 0 auto;
  padding:8px 12px;border:1px solid var(--rule-strong);border-radius:8px;
  background:var(--accent-field);color:var(--accent);font:inherit;
  font-weight:600;cursor:pointer;
}
.ranch-notice-dismiss:focus-visible { outline:3px solid var(--focus);outline-offset:3px; }

/* A field outside .form still belongs on the same journal gutter. */
.log-field { padding:0 var(--gutter) 14px; }
.log-layout > section { min-width:0; }

/* Full workspace. The page is the only scroller; forms and their persistent
   Save/receipt stay readable instead of stretching across the monitor. */
@media screen and (min-width:600px) {
  :root:not([data-frame='phone']) {
    --workspace-rail:0px;
    --workspace-gap:24px;
    --workspace-left:calc(var(--workspace-rail) + max(var(--workspace-gap), (100vw - var(--workspace-rail) - 1520px) / 2));
    --workspace-width:min(1520px, calc(100% - var(--workspace-rail) - 2 * var(--workspace-gap)));
  }
  :root:not([data-frame='phone']) main.screen {
    width:var(--workspace-width); margin-left:var(--workspace-left);
  }
  :root:not([data-frame='phone']) .app-header { padding-left:24px; padding-right:24px; }
  :root:not([data-frame='phone']) .app-header:has(#postureBtn:not([hidden])) {
    display:flex; min-height:72px; padding-top:env(safe-area-inset-top,0px); padding-bottom:0;
  }
  :root:not([data-frame='phone']):has(#postureBtn:not([hidden])) { --header-h:72px; }
  :root:not([data-frame='phone']) .app-header:has(#postureBtn:not([hidden])) .hdr-name { display:flex; }
  :root:not([data-frame='phone']) .app-header:has(#postureBtn:not([hidden])) .hdr-right { display:flex; gap:8px; }
  :root:not([data-frame='phone']) .app-header:has(#postureBtn:not([hidden])) .app-date { margin-top:4px; }
  :root:not([data-frame='phone']) .stale-strip {
    left:var(--workspace-rail); right:0;
  }
  :root:not([data-frame='phone']) .action-band,
  :root:not([data-frame='phone']) .receipt {
    left:calc(var(--workspace-left) + var(--gutter)); right:auto;
    width:min(680px, calc(100% - var(--workspace-left) - var(--workspace-gap) - 2 * var(--gutter)));
  }
  :root:not([data-frame='phone']) .action-band { padding-left:0; padding-right:0; }
  :root:not([data-frame='phone']) .receipt {
    max-height:calc(100dvh - var(--header-offset, var(--header-h)) - var(--stale-space,0px) - var(--nav-h) - var(--band-h) - 24px);
  }
  :root:not([data-frame='phone']) .receipt.no-band {
    max-height:calc(100dvh - var(--header-offset, var(--header-h)) - var(--stale-space,0px) - var(--nav-h) - 24px);
  }
  :root:not([data-frame='phone']) .ranch-notice {
    left:calc(var(--workspace-left) + var(--gutter)); right:auto;
    width:min(680px, calc(100% - var(--workspace-left) - var(--workspace-gap) - 2 * var(--gutter)));
  }
  :root:not([data-frame='phone']) #view > .form { max-width:720px; }
  :root:not([data-frame='phone']) #view > .saying { max-width:900px; }
  :root:not([data-frame='phone']) #view > .band-note,
  :root:not([data-frame='phone']) #view > .empty { max-width:80ch; }
  :root:not([data-frame='phone']) .auth { max-width:600px; margin:0 auto; }
  :root:not([data-frame='phone']) .auth.prose { max-width:800px; }
  :root:not([data-frame='phone']) .account-list,
  :root:not([data-frame='phone']) .ranch-section,
  :root:not([data-frame='phone']) .account-entry,
  :root:not([data-frame='phone']) .ranch-shortcuts,
  :root:not([data-frame='phone']) #view > .seg,
  :root:not([data-frame='phone']) .ranch-frame-pick,
  :root:not([data-frame='phone']) #view > .row-actions { max-width:720px; }
}
@media screen and (min-width:1024px) {
  :root:not([data-frame='phone']) .log-layout {
    display:grid; grid-template-columns:minmax(280px, 2fr) minmax(380px, 3fr);
    gap:24px; align-items:start;
  }
  :root:not([data-frame='phone']) .log-details { border-left:1px solid var(--rule); }
  :root:not([data-frame='phone']) .log-horses:only-child { grid-column:1 / -1; }
}
@media screen and (min-width:1280px) {
  :root:not([data-frame='phone']):has(#nav:not([hidden])) { --workspace-rail:208px; --nav-h:0px; }
  :root:not([data-frame='phone']) .nav {
    top:var(--header-offset, var(--header-h)); bottom:0; width:208px; height:auto;
    display:flex; flex-direction:column; justify-content:flex-start; gap:6px;
    padding:24px 12px; border-top:0; border-right:1px solid var(--rule);
  }
  :root:not([data-frame='phone']) .nav a {
    min-height:56px; padding:12px 16px; flex-direction:row; justify-content:flex-start;
    gap:14px; font-size:16px; border-radius:12px;
  }
  :root:not([data-frame='phone']) .nav a[aria-current='page'] { background:var(--accent-field); }
  :root:not([data-frame='phone']) .nav a[aria-current='page']::before { display:none; }
}
@media screen and (min-width:1800px) {
  :root:not([data-frame='phone']) { --workspace-gap:32px; }
}
/* Desktop working rhythm: one canvas, compact controls, one set of form nodes.
   Fields can have a readable measure without shrinking their section surface. */
@media screen and (min-width:768px) {
  :root:not([data-frame='phone']) {
    --workspace-left:calc(var(--workspace-rail) + max(var(--workspace-gap), (100% - var(--workspace-rail) - 1200px) / 2));
    --workspace-width:min(1200px, calc(100% - var(--workspace-rail) - 2 * var(--workspace-gap)));
  }
  :root:not([data-frame='phone']) :is(.account-list,.ranch-section,.account-entry,.ranch-shortcuts,.ranch-frame-pick),
  :root:not([data-frame='phone']) #view > :is(.form,.row-actions,.saying,.band-note,.empty,.seg) {
    max-width:none;
  }
  :root:not([data-frame='phone']) :is(.weather,.owed-total,.ranch-shortcuts,.account-entry) {
    margin-left:var(--gutter); margin-right:var(--gutter);
  }
  :root:not([data-frame='phone']) .row-actions {
    display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  }
  :root:not([data-frame='phone']) #view > .row-actions {
    background:transparent; border-bottom:0; padding-top:12px; padding-bottom:16px;
  }
  :root:not([data-frame='phone']) .row-actions > :is(.saying,.band-note) { flex-basis:100%; }
  :root:not([data-frame='phone']) :is(.row-actions,.form,.r-actions) .btn {
    width:auto; max-width:100%; min-height:44px; padding:10px 18px; border-radius:8px;
  }
  :root:not([data-frame='phone']) .form > .btn { justify-self:start; }
  :root:not([data-frame='phone']) .form > :is(.field,.form-more) { width:100%; max-width:640px; }
  :root:not([data-frame='phone']) .filters {
    display:flex; flex-wrap:wrap; gap:4px; padding-top:8px; padding-bottom:8px;
    border-bottom:1px solid var(--rule);
  }
  :root:not([data-frame='phone']) .filter {
    flex:0 1 auto; width:auto; min-height:44px; padding:8px 16px;
    text-transform:none; letter-spacing:0; border-radius:8px;
  }
  :root:not([data-frame='phone']) .seg {
    display:flex; flex-wrap:wrap; width:fit-content; max-width:calc(100% - 2 * var(--gutter));
  }
  :root:not([data-frame='phone']) .seg button { flex:0 1 auto; min-height:44px; padding:8px 18px; }
  :root:not([data-frame='phone']) .type-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  :root:not([data-frame='phone']) .type-btn { min-height:48px; padding:10px 12px; border-radius:8px; }
  :root:not([data-frame='phone']) .chips { gap:8px; }
  :root:not([data-frame='phone']) .chip { min-height:44px; }
  :root:not([data-frame='phone']) .pick-row { min-height:56px; }
  :root:not([data-frame='phone']) .pick-row .pr-name { min-width:0; overflow-wrap:anywhere; }
  :root:not([data-frame='phone']) .pick-row .pr-meta { max-width:42%; text-align:right; }
  :root:not([data-frame='phone']) .action-band .btn {
    width:fit-content; max-width:100%; height:auto; min-height:48px;
    padding:10px 24px; border-radius:8px;
  }
  :root:not([data-frame='phone']) .action-band { display:flex; align-items:center; }
  :root:not([data-frame='phone']) .r-actions { display:flex; flex-wrap:wrap; gap:12px; }
  /* Settings need a reading column, not the full roster canvas. */
  :root:not([data-frame='phone']) #view:has(> .ranch-intro) {
    width:min(760px, var(--workspace-width));
  }
  :root:not([data-frame='phone']) :is(.account-entry,.ranch-section-summary,.assistant-entry) {
    display:grid; grid-template-columns:42px minmax(0,1fr) 18px; gap:14px;
    align-items:center; padding:16px;
  }
  :root:not([data-frame='phone']) :is(.ranch-section-summary,.assistant-entry) > svg:first-child {
    justify-self:center; width:26px; height:26px;
  }
}
@media screen and (min-width:1024px) {
  :root:not([data-frame='phone']) .log-layout {
    grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  }
  :root:not([data-frame='phone']):has(.log-layout .log-details) .receipt {
    left:calc(var(--workspace-left) + (var(--workspace-width) - 24px) * .4 + 24px + var(--gutter) + 1px);
    width:calc((var(--workspace-width) - 24px) * .6 - 2 * var(--gutter) - 1px);
  }
}
/* One table and one set of actions at every size. On a phone the same
   cells form readable records; the desktop rules restore native columns. */
.roster-table,.owed-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.roster-table th,.owed-table th { text-align:left; font-weight:600; }
.roster-table :is(th,td),.owed-table :is(th,td) { overflow-wrap:anywhere; }
.roster-link { color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
.roster-link:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
.roster-sex { display:block; color:var(--ink-2); font-size:13px; }
.owed-table .oi-row { grid-template-columns:minmax(0,1fr) 20px; width:fit-content; max-width:100%; min-height:44px; gap:8px; padding:8px; color:var(--accent); }
.owed-table .oi-what { white-space:normal; overflow:visible; text-overflow:clip; }
.owed-table .owed-description > .micro { display:block; margin-top:5px; }
.owed-table .owed-amount { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.owed-item-row.is-paid .owed-amount { color:var(--success); }
.owed-item-detail > td { padding:0; }
.owed-name { overflow-wrap:anywhere; }
.section-header-actions { display:grid; gap:10px; padding:0 var(--gutter) 16px; }
.file-panels:not(:has(> :not([hidden]))) { display:none !important; }
.file-panels > * { width:100%; min-width:0; }
@media screen {
  .roster-table,.roster-table tbody,.owed-table,.owed-table tbody { display:block; }
  .roster-table thead,.owed-table thead {
    position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
    clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap;
  }
  .roster-row {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(88px,32%);
    gap:4px 16px; padding:12px var(--gutter); border-bottom:1px solid var(--rule); background:var(--surface);
  }
  .roster-row > td { display:block; padding:0; min-width:0; }
  .roster-name { grid-column:1; grid-row:1; }
  .roster-last { grid-column:2; grid-row:1; align-self:center; text-align:right; color:var(--ink-2); font-size:13px; }
  .roster-last::before { content:attr(data-label); display:block; font-size:12px; margin-bottom:3px; }
  .roster-owner,.roster-breed { grid-column:1 / -1; font-size:14px; }
  .roster-owner::before,.roster-breed::before { content:attr(data-label) ': '; color:var(--ink-2); }
  .owed-table { margin-top:12px; }
  .owed-item-row,.owed-fee-row {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(72px,28%);
    gap:4px 12px; padding:12px 0; border-top:1px solid var(--rule); font-size:14px;
  }
  .owed-table td { display:block; min-width:0; padding:0; }
  .owed-date { grid-column:1 / -1; color:var(--ink-2); font-size:13px; }
  .owed-description { grid-column:1; grid-row:2; }
  .owed-horse { grid-column:1; grid-row:3; color:var(--ink-2); }
  .owed-horse::before { content:attr(data-label) ': '; }
  .owed-amount { grid-column:2; grid-row:2 / 4; align-self:center; }
  .owed-amount::before { content:attr(data-label); display:block; font-size:12px; font-weight:400; color:var(--ink-2); margin-bottom:4px; }
  .owed-item-detail { display:block; }
  .owed-item-detail > td { width:100%; }
}
@media screen and (min-width:768px) {
  :root:not([data-frame='phone']) :is(.page-header,.section-header) {
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    padding:24px var(--gutter) 16px;
  }
  :root:not([data-frame='phone']) :is(.page-header-title,.section-header-title) { min-width:0; flex:1 1 40%; }
  :root:not([data-frame='phone']) :is(.band.page-header-title,.section-header-title,.page-header-title .stall) {
    margin:0; padding:0; border:0; background:transparent;
  }
  :root:not([data-frame='phone']) :is(.band.page-header-title,.section-header-title) { justify-content:flex-start; gap:12px; }
  :root:not([data-frame='phone']) :is(.page-header-title,.section-header-title) .count { margin-left:0; }
  :root:not([data-frame='phone']) :is(.page-header-actions,.section-header-actions) {
    display:flex; flex:0 1 auto; flex-wrap:wrap; justify-content:flex-end; align-items:center;
    gap:10px; max-width:50%; margin:0; padding:0; border:0; background:transparent;
  }
  :root:not([data-frame='phone']) :is(.page-header-actions,.section-header-actions) .btn {
    width:auto; max-width:100%; min-height:44px; padding:10px 18px; border-radius:8px;
  }
  :root:not([data-frame='phone']) .section-header { border-top:1px solid var(--rule); margin-top:12px; }
  :root:not([data-frame='phone']) .file-panels { gap:16px; }
  :root:not([data-frame='phone']) .roster-wrap {
    margin:0 var(--gutter); border:1px solid var(--rule); border-radius:12px; overflow:hidden;
  }
  :root:not([data-frame='phone']) :is(.roster-table,.owed-table) { display:table; }
  :root:not([data-frame='phone']) :is(.roster-table,.owed-table) tbody { display:table-row-group; }
  :root:not([data-frame='phone']) :is(.roster-table,.owed-table) thead {
    display:table-header-group; position:static; width:auto; height:auto;
    overflow:visible; clip:auto; clip-path:none; white-space:normal;
  }
  :root:not([data-frame='phone']) :is(.roster-row,.owed-item-row,.owed-fee-row,.owed-item-detail) { display:table-row; }
  :root:not([data-frame='phone']) :is(.roster-table,.owed-table) :is(th,td) {
    display:table-cell; vertical-align:middle; padding:12px 16px; font-size:14px; text-align:left;
  }
  :root:not([data-frame='phone']) :is(.roster-table,.owed-table) th {
    background:var(--raised); color:var(--ink-2); border-bottom:1px solid var(--rule); font-size:13px;
  }
  :root:not([data-frame='phone']) .roster-row { border-bottom:1px solid var(--rule); }
  :root:not([data-frame='phone']) .roster-row:last-child { border-bottom:0; }
  :root:not([data-frame='phone']) .roster-row:is(:hover,:focus-within) { background:var(--accent-field); }
  :root:not([data-frame='phone']) .roster-table :is(th,td):first-child { padding-left:20px; }
  :root:not([data-frame='phone']) .roster-table :is(th,td):last-child { padding-right:20px; }
  :root:not([data-frame='phone']) .roster-table th:nth-child(1) { width:34%; }
  :root:not([data-frame='phone']) .roster-table th:nth-child(2) { width:26%; }
  :root:not([data-frame='phone']) .roster-table th:nth-child(3) { width:22%; }
  :root:not([data-frame='phone']) .roster-table th:nth-child(4) { width:18%; }
  :root:not([data-frame='phone']) :is(.roster-table,.owed-table) td::before { content:none; }
  :root:not([data-frame='phone']) .roster-link { font-size:16px; }
  :root:not([data-frame='phone']) .owed-table th:nth-child(1) { width:18%; }
  :root:not([data-frame='phone']) .owed-table th:nth-child(2) { width:40%; }
  :root:not([data-frame='phone']) .owed-table th:nth-child(3) { width:24%; }
  :root:not([data-frame='phone']) .owed-table th:nth-child(4) { width:18%; }
  :root:not([data-frame='phone']) .owed-table :is(th,td):first-child { padding-left:0; }
  :root:not([data-frame='phone']) .owed-table :is(th,td):last-child { text-align:right; padding-right:32px; }
  :root:not([data-frame='phone']) .owed-table .owed-item-detail > td { padding:0; text-align:left; }
}
/* Horse record: keep paperwork beside the working history at desk widths. */
.record-summary,.record-history,.record-files { min-width:0; }
.record-summary .kind-pick .filter {
  max-width:100%; white-space:normal; overflow-wrap:anywhere;
}
@media screen and (min-width:1024px) {
  :root:not([data-frame='phone']) .record-layout {
    display:grid; grid-template-columns:340px minmax(0,1fr); gap:24px; align-items:start;
  }
  :root:not([data-frame='phone']) .record-history-title { margin-top:0; }
  :root:not([data-frame='phone']) .record-summary .comp-row {
    display:grid; grid-template-columns:minmax(0,1fr); gap:6px; justify-items:start;
  }
  :root:not([data-frame='phone']) .record-summary .comp-state { overflow-wrap:anywhere; }
  :root:not([data-frame='phone']) .record-files .section-header {
    flex-wrap:wrap; gap:12px; padding-top:20px;
  }
  :root:not([data-frame='phone']) .record-files .section-header-title { flex-basis:100%; }
  :root:not([data-frame='phone']) .record-files .section-header-actions {
    max-width:100%; justify-content:flex-start;
  }
  :root:not([data-frame='phone']) .record-summary .pick-source { grid-template-columns:minmax(0,1fr); }
  :root:not([data-frame='phone']) .record-summary .doc-meta { overflow-wrap:anywhere; }
}
/* Today follows the posture's DOM order: care first in Morning, work in Evening. */
.today-layout > section,.today-context,.today-record { min-width:0; }
.today-layout :is(.due-what,.row-sub),.today-context .row-sub { overflow-wrap:anywhere; }
@media screen and (min-width:1024px) {
  :root:not([data-frame='phone']) .today-layout {
    display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start;
  }
  :root:not([data-frame='phone']) .today-layout[data-posture='morning'] {
    grid-template-columns:340px minmax(0,1fr);
  }
}
/* The agenda is one chronological list at every width, with native row controls. */
.schedule-day-list { list-style:none; margin:0; padding:0; }
.schedule-day { margin:0 0 24px; }
.schedule-day-heading {
  margin:0; padding:14px var(--gutter); font:600 16px/1.5 var(--font-ui);
}
.schedule-row {
  display:grid; grid-template-columns:76px minmax(0,1fr) 18px;
  column-gap:12px; row-gap:6px; align-items:start;
}
.schedule-time { grid-column:1; grid-row:1 / span 2; min-width:0; }
.schedule-event { grid-column:2; grid-row:1; min-width:0; }
.schedule-title { display:block; font-weight:600; }
.schedule-stamps { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.schedule-stamps:empty { display:none; }
.schedule-people { grid-column:2; grid-row:2; margin-top:0; min-width:0; }
.schedule-row > .row-chev { grid-column:3; grid-row:1; margin:0; justify-self:end; }
.schedule-row :is(.schedule-time,.schedule-title,.schedule-people,.stamp) {
  overflow-wrap:anywhere; white-space:normal;
}
.schedule-menu .band-note { padding:0; }
.schedule-menu .row-actions { padding:0; border:0; background:transparent; }
.schedule-row:focus-visible { outline:3px solid var(--focus); outline-offset:-3px; }
@media screen and (min-width:768px) {
  /* Inset section surfaces once; nested rows/forms retain their own internal padding. */
  :root:not([data-frame='phone']) :is(.today-context,.today-layout,.today-record,.record-layout,.schedule-agenda) {
    padding-inline:var(--gutter);
  }
  :root:not([data-frame='phone']) #view > .setup-card { margin-inline:var(--gutter); }
  :root:not([data-frame='phone']) .today-context > .setup-card { margin-inline:0; }
  :root:not([data-frame='phone']) :is(.today-calendar,.today-working,.today-care,.today-closeout,.today-record,.record-history) > :is(.band,.band-note,.filters),
  :root:not([data-frame='phone']) .record-history .month,
  :root:not([data-frame='phone']) .record-files > .section-header,
  :root:not([data-frame='phone']) .schedule-day-heading { padding-inline:0; }
}
@media screen and (min-width:1024px) {
  :root:not([data-frame='phone']) .schedule-row {
    grid-template-columns:96px minmax(0,1fr) minmax(0,1fr) 18px; column-gap:16px;
  }
  :root:not([data-frame='phone']) .schedule-time { grid-row:1; }
  :root:not([data-frame='phone']) .schedule-people { grid-column:3; grid-row:1; }
  :root:not([data-frame='phone']) .schedule-row > .row-chev { grid-column:4; }
}
@media print {
  .schedule-menu,.schedule-row > .row-chev { display:none !important; }
  .schedule-day-heading { break-after:avoid; }
  .schedule-item { break-inside:avoid; }
}
/* Utility pages use a reading column; primary actions follow their own fields. */
.action-dock:empty,.action-dock:has(> .action-band[hidden]) { display:none; }
.ranch-section-content .barn-form > :is(.step,.chips) { padding-inline:0; }
.record-summary .horse-details-fields { display:grid; gap:16px; }
@media screen and (min-width:768px) {
  :root:not([data-frame='phone']) #view:is([data-page='/setup'],[data-page='/staff'],[data-page='/search'],[data-page='/connections'],[data-page='/ask'],[data-page^='/events/']) {
    width:min(760px, var(--workspace-width));
  }
  :root:not([data-frame='phone']) #view:is([data-page='/setup'],[data-page='/staff'],[data-page='/search'],[data-page='/ask'],[data-page^='/events/']) .form {
    width:100%; max-width:680px; min-width:0;
  }
  :root:not([data-frame='phone']) #view:is([data-page='/setup'],[data-page='/staff'],[data-page='/search'],[data-page='/ask']) > :is(.band-note,.empty,.saying),
  :root:not([data-frame='phone']) #view[data-page='/setup'] .barn-form { max-width:680px; }
  :root:not([data-frame='phone']) #view[data-page^='/events/'] > :is(.row,.band-note,.empty,.row-actions) {
    max-width:680px;
  }
  :root:not([data-frame='phone']):has(#actionBand.is-docked) { --band-h:0px; }
  :root:not([data-frame='phone']) .action-dock > .action-band.is-docked {
    position:static; inset:auto; width:100%; max-width:100%; height:auto;
    margin:0; padding:0; border:0; background:transparent; z-index:auto;
  }
  :root:not([data-frame='phone']) #view > .action-dock {
    max-width:680px; padding:0 var(--gutter) 20px;
  }
  :root:not([data-frame='phone']) .log-details > .action-dock {
    padding:0 var(--gutter) 20px;
  }
  :root:not([data-frame='phone']) .action-dock .btn {
    max-width:100%; white-space:normal; overflow-wrap:anywhere;
  }
  :root:not([data-frame='phone']) #view:is([data-page='/staff'],[data-page='/search']) .row {
    width:calc(100% - 2 * var(--gutter)); margin-inline:var(--gutter);
  }
  :root:not([data-frame='phone']) #view[data-page='/staff'] [data-person] > .outcomes {
    margin-inline:var(--gutter);
  }
  :root:not([data-frame='phone']) #view[data-page='/connections'] .account-list { margin-inline:var(--gutter); }
  :root:not([data-frame='phone']) #view[data-page='/connections'] .service-summary {
    display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:start;
  }
  :root:not([data-frame='phone']) #view[data-page='/connections'] .service-open {
    flex-direction:row; gap:8px; align-items:center; min-width:0;
  }
}
@media print {
  :root,:root[data-theme='dark'],:root:not([data-theme='light']) {
    --bg:#FFF; --surface:#FFF; --raised:#FFF; --ink:#000; --ink-2:#333;
    --accent:#000; --accent-field:#FFF; --rule:#666; color-scheme:light;
  }
  .ranch-notice { display:none; }
  .weather { background:#FFF; color:#000; }
  .service-card { break-inside:avoid; }
  .account-entry,.ranch-shortcuts { display:none; }
  .section-header-actions { display:none !important; }
}