/* iPhone Safari fixes for date boxes and form fields, ledger entry rows */
/* iPhone Safari: a date box keeps its own width and pushes a sheet wider than the screen; the page then shifts and zooms when a field gets focus */
input[type=date]{ display:block; width:100%; min-width:0; max-width:100%; box-sizing:border-box; -webkit-appearance:none; appearance:none; min-height:calc(46px * var(--dt,1)) }
.field input,.field select,.field textarea{ box-sizing:border-box; max-width:100% }
.ent{ padding:14px 18px; border-top:1px solid var(--line-soft) } .ent.rev{ opacity:.7 }
.ent-top{ display:flex; justify-content:space-between; align-items:center; gap:10px } .ent-amt{ font-weight:700; font-size:calc(17px * var(--dt,1)) } .ent-amt.struck{ text-decoration:line-through }
.ent-meta{ color:var(--muted); font-size:calc(13px * var(--dt,1)); margin-top:6px } .ent-note{ font-size:calc(13px * var(--dt,1)); margin-top:4px; overflow-wrap:anywhere }
.ent-act{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
@media(max-width:600px){ .setrow[data-req]{ flex-wrap:wrap; gap:10px } .setrow[data-req] > span:last-child{ width:100% } }
/* A-28 (owner round 9): a request row's date no longer stands in a narrow column beside a two-line title; under 480 px it has its own line under the title */
.ent-top > .muted:last-child{ white-space:nowrap; flex:none }
@media(max-width:480px){ .ent-top{ flex-wrap:wrap } .ent-top > .muted:last-child{ flex:1 1 100%; margin-top:2px } }
/* phone tap targets: at least 44 points (A-6: also the plain .btn, the pickers in the app bar, selects and the segmented controls; the height scales with the text size) */
@media(max-width:900px){ .btn.sm{ min-height:calc(44px * var(--dt,1)) } .choice button{ min-height:calc(48px * var(--dt,1)) } }
@media (pointer:coarse), (max-width:900px){ .btn, .btn.sm, .appbar select, .tools select, .ctools select, .seg button, .dseg button, .cchip, .chip, .fxsel, .ledger .fxsel, .callbtn, .pillbtn{ min-height:calc(44px * var(--dt,1)) } }
/* iOS zooms the page when a field with text smaller than 16px gets focus: some later rules shrink inputs to 13.5px */
@media(max-width:900px){ input, select, textarea{ font-size:calc(16px * var(--dt,1)) !important } }

/* phone layout polish (Phase E): segmented choices wrap instead of being cut off; small controls reach a comfortable touch size */
.seg{ flex-wrap:wrap; max-width:100% }
@media (max-width:760px){
  .chip, .fxsel{ min-height:calc(44px * var(--dt,1)) }
  .seg button{ min-height:calc(44px * var(--dt,1)) }
  .facts .btn{ min-height:calc(44px * var(--dt,1)) }
}
.actfilters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; align-items:end }
.actfilters select,.actfilters input{ width:100% }

/* a table with many columns is a list of cards on a phone (labels from helpers.js: stackTables) */
@media (max-width:640px){
  table.stack, table.stack tbody { display:block; width:100% }
  table.stack thead { display:none }
  table.stack tr { display:block; border:1px solid var(--line); border-radius:14px; margin:0 0 10px; padding:6px 12px; background:var(--card) }
  table.stack tr.stack-wide { border:0; padding:0; background:transparent }
  table.stack td { display:flex; justify-content:space-between; align-items:center; gap:12px; border:0; padding:7px 0; text-align:end; min-width:0 }
  table.stack td[data-label]::before { content:attr(data-label); color:var(--muted); font-size:calc(12.5px * var(--dt,1)); text-align:start; flex:0 0 38%; max-width:38% }
  table.stack td:empty { display:none }
  table.stack td > * { min-width:0; overflow-wrap:anywhere }
  table.stack td > .cv { text-align:end }
  .tw { overflow:visible }
}

/* Text in the status colours reads from its own "ink" variables (branding.js makes them readable on the light or the dark page); the plain colours stay for bars, dots and backgrounds */
:root{ --clay-ink:var(--bad-ink); --brass-ink:var(--warn-ink); --nile-ink:var(--c-primary-ink) }

/* Keyboard focus: a solid ring that no component rule can switch off (the older soft glow was 18% green, and buttons that set their own shadow lost it altogether). Two rings, so it shows on light and dark backgrounds. */
:focus-visible{ outline:2px solid var(--ink,#0A2540) !important; outline-offset:2px !important; box-shadow:0 0 0 4px #fff !important }
html[data-company-dark="true"] :focus-visible{ box-shadow:0 0 0 4px #000 !important }
input:focus-visible,select:focus-visible,textarea:focus-visible{ outline-offset:1px !important }

/* Phones: a name that opens a record is a small target (22px tall); the hit area grows to 44px without moving anything */
@media (pointer:coarse), (max-width:700px) {
  .ucard .linkish { display:inline-block; padding-block:11px; margin-block:-11px }
}

/* A filter group that wraps onto two rows (long labels, narrow phone) keeps rounded corners instead of becoming a stretched pill */
.seg{ border-radius:22px }
.seg button{ border-radius:18px }

/* Guide: a step ticked by the data is a read-only box at full strength, not a greyed-out one */
input[data-guidetick]{ accent-color:var(--nile) }
input[data-guidetick][data-auto]{ cursor:default }

/* Desktop side menu: the focus ring of the first and last entries sat against the edge of the scrolling list */
@media (min-width:761px){ .nav{ padding-inline:12px; scroll-padding:8px } }

/* Photo tiles: a phone shows the picture (tap to open it) and one "more" button; the actions open in a sheet. The desktop keeps the row of buttons. */
.fthumb .fmore{ display:none }
@media (pointer:coarse), (max-width:700px) {
  .fthumb .facts .btn:not(.fmore){ display:none }
  .fthumb .facts .fmore{ display:inline-flex; align-items:center; justify-content:center; min-height:calc(44px * var(--dt,1)); font-size:calc(18px * var(--dt-cap,1)); line-height:1 }
}
.fmenu{ display:flex; flex-direction:column; gap:8px }
.fmenu .btn{ min-height:calc(48px * var(--dt,1)); width:100%; justify-content:center }

/* Dark page: buttons, chips and selected states must be seen against the dark card (3:1) and their text must read (4.5:1). A company's own dark primary colour
   on a dark card made primary buttons look greyed out, and the thin grey edge of secondary buttons disappeared. */
html[data-company-dark="true"]{ --btn-edge:#8d8e8a }
html[data-company-dark="true"] .btn, html[data-company-dark="true"] .btn:hover, html[data-company-dark="true"] .btn.ghost, html[data-company-dark="true"] .chip, html[data-company-dark="true"] .cchip:not(.cchip-unpaid){ border:1px solid var(--btn-edge); border-color:var(--btn-edge) !important }
html[data-company-dark="true"] .cchip-unpaid:not([aria-pressed="true"]){ border-color:var(--clay-ink) }
html[data-company-dark="true"] .btn.primary, html[data-company-dark="true"] .btn.primary:hover{ background:#f3f3f0; border-color:#f3f3f0; color:#202121; box-shadow:none }
html[data-company-dark="true"] .btn.go, html[data-company-dark="true"] .btn.go:hover{ background:var(--nile-ink); border-color:var(--nile-ink); color:#111; box-shadow:none }
/* a red button for the one step that cannot be taken back lightly (Log out, Remove logo): the error red with white text; the readable red ink with dark text on a dark page */
.btn.danger, .btn.danger:hover{ background:var(--clay); border-color:var(--clay); color:#fff }
html[data-company-dark="true"] .btn.danger, html[data-company-dark="true"] .btn.danger:hover{ background:var(--clay-ink); border-color:var(--clay-ink); color:#111; box-shadow:none }
/* a warning line inside a sheet (the unsent entries before a log-out): red tint, readable red ink */
.warnline{ background:var(--clay-tint); color:var(--clay-ink); border-radius:12px; padding:10px 12px; font-size:calc(13.5px * var(--dt,1)); line-height:1.5; margin:0 0 6px }
html[data-company-dark="true"] .cchip-unpaid[aria-pressed="true"]{ background:var(--clay-ink); border-color:var(--clay-ink); color:#111 }
html[data-company-dark="true"] .cchip-unpaid[aria-pressed="true"] .num{ color:#111 }
html[data-company-dark="true"] .cchip[aria-pressed="true"] .num{ color:inherit }
/* A-2 (owner round 9): the chosen payment method in the record sheet (and any .choice group) takes the selected-chip pair on the dark page: a light fill with dark
   text (it used to be the light "ink" on the light fill, 1.05:1). The pressed flash keeps dark text too. */
html[data-company-dark="true"] .choice button[aria-pressed="true"]{ background:var(--chip-selected-bg,#f3f3f0); border-color:var(--chip-selected-bg,#f3f3f0); color:var(--chip-selected-fg,#202121) }
html[data-company-dark="true"] .scrim.fluid .choice button[aria-pressed="true"].pressed{ background:#e4e4df; color:#202121 }
html[data-company-dark="true"] .choice button:not([aria-pressed="true"]){ border-color:var(--btn-edge) }

/* Receipts: Print / save as PDF reduces the page to the receipt alone while the print dialog is open (the same idea as the condition report) */
#rcPrintHost{ display:none }
@media print {
  html.printing-rc body > *:not(#rcPrintHost){ display:none !important }
  html.printing-rc #rcPrintHost{ display:block !important }
  html.printing-rc #rcPrintHost img{ width:100%; max-width:170mm; margin:0 auto; display:block }
  html.printing-rc, html.printing-rc body{ background:#fff !important }
}

/* ---------- fit on every iPhone: the visible height (dvh: it follows the browser bars), sheets that stay above the keyboard ---------- */
@supports (height:100dvh){
  .shell, .gate{ min-height:100dvh }
  .rail{ height:100dvh }
  .modal{ max-height:92dvh }
  .mapbox{ height:min(62dvh,560px) }
}
.scrim{ --kb:0px }
@media(max-width:900px){
  .scrim{ padding-bottom:var(--kb,0px) !important }                        /* the keyboard height (boot.js, from visualViewport): the sheet sits above it */
  @supports (height:100dvh){ .modal{ max-height:calc(92dvh - var(--kb,0px)) } }
  .scrim.fluid .modal .body{ scroll-padding-bottom:24px }
}


/* ---------- Liquid Glass in the web page too (Safari, the home-screen app): a floating capsule tab bar and glass sheets, toasts and segmented controls on phones.
   The iPhone app has the native glass bar (UITabBar) and the rules in native-ios.css; these are the same look for everything that is not the app. ---------- */
@media(max-width:900px){
  html:not(.native-ios){
    --glass-w:color-mix(in srgb, var(--chip-idle-bg,#fff) 58%, transparent); --glass-w-strong:color-mix(in srgb, var(--chip-idle-bg,#fff) 82%, transparent);
    --glass-w-edge:rgba(255,255,255,.65); --glass-w-edge-lo:rgba(0,0,0,.06); --glass-w-shadow:0 8px 28px rgba(0,0,0,.14); --glass-w-blur:blur(22px) saturate(185%);
  }
  html:not(.native-ios) .tabbar{
    inset-inline:12px; bottom:calc(var(--safe-b) + 8px); padding:3px 4px; border:0; border-radius:30px; overflow:hidden;
    background:var(--glass-w); -webkit-backdrop-filter:var(--glass-w-blur); backdrop-filter:var(--glass-w-blur);
    box-shadow:inset 0 1px 0 var(--glass-w-edge), inset 0 -1px 0 var(--glass-w-edge-lo), var(--glass-w-shadow);
  }
  html:not(.native-ios) .content{ padding-bottom:calc(var(--tabh) + var(--safe-b) + 34px) }
  html:not(.native-ios) .toast{ bottom:calc(var(--tabh) + var(--safe-b) + 24px);
    background:var(--glass-w-strong); -webkit-backdrop-filter:var(--glass-w-blur); backdrop-filter:var(--glass-w-blur); box-shadow:inset 0 1px 0 var(--glass-w-edge), var(--glass-w-shadow) }
  html:not(.native-ios) .scrim.fluid .modal, html:not(.native-ios) .modal{
    background:var(--glass-w-strong); -webkit-backdrop-filter:blur(30px) saturate(190%); backdrop-filter:blur(30px) saturate(190%);
    box-shadow:inset 0 1px 0 var(--glass-w-edge), 0 -12px 44px rgba(0,0,0,.28);
  }
  html:not(.native-ios) .seg{ background:var(--glass-w); -webkit-backdrop-filter:var(--glass-w-blur); backdrop-filter:var(--glass-w-blur); box-shadow:inset 0 1px 0 var(--glass-w-edge), inset 0 -1px 0 var(--glass-w-edge-lo) }
}
@media(max-width:900px) and (prefers-color-scheme:dark){
  html:not(.native-ios){ --glass-w-edge:rgba(255,255,255,.22); --glass-w-edge-lo:rgba(0,0,0,.45); --glass-w-shadow:0 10px 32px rgba(0,0,0,.55) }
}
@media(max-width:900px) and (prefers-reduced-transparency:reduce){
  html:not(.native-ios) .tabbar, html:not(.native-ios) .modal, html:not(.native-ios) .toast, html:not(.native-ios) .seg{ background:var(--chip-idle-bg,#fff); -webkit-backdrop-filter:none; backdrop-filter:none }
}

/* a sheet with a button row: the row carries the bottom (home indicator) space itself; padding on the sheet as well left a differently coloured strip under the glass row */
@media(max-width:900px){ .modal:has(> .foot){ padding-bottom:0 } }
html.native-ios .devstrip{ padding-top:calc(var(--safe-t) + 4px) !important }   /* the development strip must not sit under the status bar (never shown in the hosted build) */

/* ---------- the glass back button: one round Liquid Glass button in the leading corner of the app bar on every screen that sits under another (shell.js: backButton).
   44 pt, light and dark, mirrored in Arabic (the chevron flips with the page direction), tinted with the company colour when there is one (--back-tint), neutral glass otherwise. ---------- */
.glassback{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; flex:none; margin-inline-end:10px; vertical-align:middle; color:var(--ink); cursor:pointer; border:0; padding:0;
  background:color-mix(in srgb, var(--back-tint, transparent) 14%, var(--glass, rgba(255,255,255,.72))); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 .5px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.14); transition:transform .14s cubic-bezier(.2,.8,.2,1), opacity .14s ease }
.glassback svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
.glassback{ transform:scale(var(--gb,1)) }                                      /* --gb: .82 when the bar is compact (36 pt on screen, the 44 pt box and hit area kept; a transform, so nothing relayouts) */
.glassback:active{ transform:scale(calc(var(--gb,1) * .94)); opacity:.85 }
html[dir=rtl] .glassback svg{ transform:scaleX(-1) }
.appbar.compact{ --gb:.82 }
.appbar.has-back .mark{ display:none !important }                               /* the back button takes the mark's place */
.appbar .big .ttl{ min-width:0 }
@media(max-width:900px){ .appbar .big .ttl{ flex:1 } .appbar .big{ align-items:center } }
html[data-company-dark="true"] .glassback{ background:color-mix(in srgb, var(--back-tint, transparent) 18%, rgba(44,44,48,.6)); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 4px 16px rgba(0,0,0,.45) }
@media(prefers-reduced-transparency:reduce){ .glassback{ background:var(--card); -webkit-backdrop-filter:none; backdrop-filter:none; border:1px solid var(--line) } }
@media(prefers-reduced-motion:reduce){ .glassback{ transition:none } }

/* ---------- "More details" in the property and unit sheets (sheets.js: fold): the fields a form does not need in order to save sit closed under one line.
   A muted summary line, 44 pt tap target, a chevron at the inline end that points forward when closed (mirrored in Arabic) and down when open. ---------- */
details.more{ margin:2px 0 13px; border-top:1px solid var(--line) }
details.more > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; min-height:calc(44px * var(--dt,1)); padding:6px 0; color:var(--muted); font-size:calc(13.5px * var(--dt,1)); font-weight:600; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none }
details.more > summary::-webkit-details-marker{ display:none }
details.more > summary::after{ content:"\203A"; margin-inline-start:auto; font-size:calc(24px * var(--dt-cap,1)); line-height:1; color:var(--muted); transition:transform .18s ease; direction:ltr; unicode-bidi:bidi-override; margin-inline-end:2px }
/* the glyph is a bidi-mirrored character, so the browser would already flip it in an Arabic paragraph; the direction override above keeps it "›" and this one flip points it forward in Arabic */
html[dir=rtl] details.more > summary::after{ transform:scaleX(-1); margin-inline:2px auto }
details.more[open] > summary{ color:var(--ink) }
details.more[open] > summary::after, html[dir=rtl] details.more[open] > summary::after{ transform:rotate(90deg) }
details.more > summary:focus-visible{ outline:2px solid var(--nile-ink); outline-offset:2px; border-radius:6px }
@media(prefers-reduced-motion:reduce){ details.more > summary::after{ transition:none } }
/* a toast with one button for the next step (sheets.js: toastAction), for example "Add another unit" after a unit is saved */
.toast.action{ display:flex; align-items:center; justify-content:center; gap:12px; max-width:440px; margin-inline:auto }   /* centred between the phone insets (design.css sets both sides under 900 px) */
.toast .tact{ flex:none; min-height:calc(36px * var(--dt,1)); padding:6px 14px; border-radius:100px; border:1.5px solid color-mix(in srgb, currentColor 55%, transparent); background:transparent; color:inherit; font:inherit; font-weight:700; cursor:pointer }
.toast .tact:active{ opacity:.7 }
/* ---------- the dashboard's fast paths (branch claude/usability): the receipt toast with a button, the invite sheet's fold ---------- */
.toast.rctoast{ display:flex; align-items:center; gap:12px; max-width:min(92vw,460px); margin-inline:auto } .rctoast .rc-txt{ flex:1; min-width:0 }
/* the button uses the readable pair (branding.js computes --nile-ink from the company accent), never white on the raw accent: readable with any accent, in both themes */
.rctoast .rc-go{ flex:none; min-height:calc(36px * var(--dt,1)); padding:0 14px; border:0; border-radius:100px; background:var(--nile-tint); color:var(--nile-ink); font:inherit; font-size:calc(13.5px * var(--dt,1)); font-weight:600; cursor:pointer }
.rctoast .rc-go:disabled{ opacity:.7 }
html.native-ios .rctoast .rc-go{ background:var(--nile-tint); color:var(--nile-ink) }
/* the invite sheet's fold is the shared fold above (one chevron, at the inline end); only its colour and spacing differ */
details.more#ivMore{ margin:0 0 10px } details.more#ivMore > summary{ min-height:calc(44px * var(--dt,1)); color:var(--nile-ink) }
/* ---------- smoothness (owner usability pass, build 3): screen transitions, pressed states, waiting states, skeletons, toasts. Shared by the web page and the iPhone app. ---------- */
/* screen transitions (shell.js renderView, motion.js animateScreen): a push comes in from the trailing side, a pop from the leading side, a change of section fades;
   160 ms, transform and opacity only; mirrored in Arabic; the class is removed when the animation ends; nothing under Reduce Motion, nothing for a poll redraw */
.main{ overflow-x:clip }   /* the 12 px slide must not widen the page: no horizontal scroll range (or scrollbar flash) for the 160 ms of the transition */
.content{ --nav-x:0px; transition:opacity .15s ease }
.content.nav-push{ --nav-x:12px } .content.nav-pop{ --nav-x:-12px }
html[dir=rtl] .content.nav-push{ --nav-x:-12px } html[dir=rtl] .content.nav-pop{ --nav-x:12px }
.content.nav-push, .content.nav-pop, .content.nav-tab{ animation:navIn .16s cubic-bezier(.2,.8,.2,1) }
@keyframes navIn{ from{ opacity:0; transform:translate3d(var(--nav-x),0,0) } to{ opacity:1; transform:translate3d(0,0,0) } }

/* pressed states for the controls that had none: the segmented filters (web layer; native-ios.css colours the app's) */
.seg button{ transition:transform .14s cubic-bezier(.2,.8,.2,1), background .14s ease }
.seg button:active{ transform:scale(.95); background:var(--line) }
.fthumb img:active, .check:active{ opacity:.7; transition:opacity .1s ease }

/* waiting: a disabled button is clearly off; a button that is working shows a 14 px spinner; a sheet that is saving stops taking taps in its fields (sheets.js);
   the page dims and stops taking taps while a month loads or pull-to-refresh runs (.content.busy, wire.js selPeriod, boot.js) */
.btn:disabled{ opacity:.55; pointer-events:none }
.btn.working::before{ content:""; width:14px; height:14px; flex:none; border-radius:50%; border:2px solid currentColor; border-top-color:transparent; animation:btnspin .7s linear infinite }
@keyframes btnspin{ to{ transform:rotate(360deg) } }
.scrim.saving .modal .body{ pointer-events:none; opacity:.65; transition:opacity .15s ease }
.content.busy{ opacity:.55; pointer-events:none }

/* skeletons (helpers.js skeleton): grey blocks shaped like the rows on their way, a shimmer that stands still under Reduce Motion; a reserved height where a section
   fills itself in after the screen is drawn (photos and documents .fl-loading, the dashboard side panels .dloading), so the page does not grow in steps */
.skel{ display:flex; flex-direction:column; gap:10px; padding:14px 18px } .pbody > .skel{ padding:0 }
.sk{ border-radius:12px; background:linear-gradient(90deg, var(--line-soft) 0%, var(--line) 50%, var(--line-soft) 100%); background-size:200% 100%; animation:skshine 1.2s linear infinite }
.sk-row{ height:66px } .sk-card{ height:112px; border-radius:16px } .sk-line{ height:16px; width:62% } .sk-line:nth-child(odd){ width:84% } .sk-feed{ height:50px }
.skel.sk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:12px } .sk-tile{ aspect-ratio:1 }
.skel.sk-stages{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:12px 14px 14px } .sk-stage{ height:62px; border-radius:14px }
.fl-loading{ min-height:140px }
.panel.dloading{ min-height:180px }
.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
@keyframes skshine{ from{ background-position:200% 0 } to{ background-position:-200% 0 } }

/* toasts (state.js toast): rise in over 180 ms, fade out at the end; a second toast takes over the same capsule, so there is no flash between them */
.toast{ animation:toastIn .18s cubic-bezier(.2,.8,.2,1) }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px) scale(.98) } }
.toast.out{ opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease }

@media(prefers-reduced-motion:reduce){
  .content.nav-push, .content.nav-pop, .content.nav-tab, .sk, .btn.working::before{ animation:none }
  .toast{ animation:toastFade .18s ease } .toast.out{ transform:none; transition:opacity .18s ease }
  .seg button, .fthumb img, .check, .content, .scrim.saving .modal .body{ transition:none }
}
@keyframes toastFade{ from{ opacity:0 } }

/* ---------- Company settings (js/company-settings.js): the colour fields beside a small phone that previews the app with the chosen colours.
   The preview's own colours are the same fixed ones the guided setup uses (they are a picture of the app, not the company's text), so the contrast scan is unaffected. ---------- */
.cs-cols{ display:grid; grid-template-columns:1fr; gap:16px }
@media(min-width:760px){ .cs-cols{ grid-template-columns:1fr 280px; align-items:start } }
.cs-logo{ height:96px; display:flex; align-items:center; justify-content:center; background:var(--line-soft); border:1px dashed var(--line); border-radius:14px; padding:10px; margin-bottom:10px; text-align:center; font-size:calc(13px * var(--dt,1)) }
.cs-logo img{ max-width:100%; max-height:100%; object-fit:contain }
.field input[type=color]{ width:100%; height:44px; padding:3px; border-radius:11px; border:1px solid var(--line); background:var(--card); cursor:pointer }
.cs-preview .phone{ border-radius:24px; background:#F2F2F7; color:#0A2540; padding:12px; box-shadow:0 10px 28px rgba(0,0,0,.22); border:5px solid #0b1522; max-width:300px; margin:0 auto }
.cs-preview .phone.dark{ background:#202121; color:#f3f3f0 }
.cs-preview .pv-bar{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:var(--pv-primary,#0A2540); color:var(--pv-primary-fg,#fff); margin-bottom:10px }
.cs-preview .pv-bar b{ font-size:calc(15px * var(--dt,1)); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cs-preview .pv-logo{ flex:none; width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; overflow:hidden; font-weight:800 }
.cs-preview .pv-logo img{ max-width:100%; max-height:100%; object-fit:contain }
.cs-preview .pv-card{ border-radius:14px; padding:12px 14px; background:var(--pv-accent,#00A990); color:var(--pv-accent-fg,#fff); margin-bottom:10px }
.cs-preview .pv-card small{ display:block; font-size:calc(12px * var(--dt,1)); opacity:.85 } .cs-preview .pv-card b{ font-size:calc(22px * var(--dt-cap,1)) }
.cs-preview .pv-row{ display:flex; gap:8px }
.cs-preview .pv-row > span{ flex:1; border-radius:12px; padding:8px 10px; background:#fff; color:#0A2540; font-size:calc(12px * var(--dt,1)); line-height:1.3 }
.cs-preview .phone.dark .pv-row > span{ background:#2c2d2d; color:#f3f3f0 }
.cs-preview .pv-row > span > b{ display:block; font-size:calc(16px * var(--dt,1)) }
.cs-preview .pv-foot{ margin-top:10px; font-size:calc(12px * var(--dt,1)); opacity:.6; text-align:center }
.cs-preview-title{ font-size:calc(12.5px * var(--dt,1)); color:var(--muted); margin:0 0 8px; text-align:center }
/* Company settings, Modules (js/company-settings.js): the walk-through's tick cards, one per line on a phone, two per line on a wide screen */
.cs-mods{ display:grid; grid-template-columns:1fr; gap:8px; margin:10px 0 4px } @media(min-width:760px){ .cs-mods{ grid-template-columns:1fr 1fr } }
.cs-mod{ display:flex; align-items:flex-start; gap:12px; min-height:calc(56px * var(--dt,1)); padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--card); cursor:pointer }
.cs-mod input{ flex:none; width:22px; height:22px; margin:2px 0 0; accent-color:var(--nile) } .cs-mod span{ min-width:0 } .cs-mod b{ display:block; font-size:calc(15px * var(--dt,1)) } .cs-mod small{ display:block; color:var(--muted); font-size:calc(13px * var(--dt,1)); line-height:1.45; margin-top:2px }
.cs-mod.core, .cs-mod.soon{ cursor:default } .cs-mod.soon{ opacity:.6 } .cs-mod:has(input:checked:not(:disabled)){ border-color:var(--nile) }
/* ---- the recorded demo's banner (app/js/tour.js): permanent, first in the page, the app bar and the rail sit under it; amber so it is never mistaken for the app ---- */
.tour-banner{ position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:calc(var(--safe-t) + 8px) max(16px,var(--safe-r)) 8px max(16px,var(--safe-l)); background:#FFE9B5; color:#4A3500; font-weight:600; font-size:calc(14px * var(--dt,1)); line-height:1.35; text-align:center }
.tour-banner .tour-btn{ flex:none; position:relative; min-height:calc(34px * var(--dt,1)); padding:4px 14px; border-radius:100px; border:1.5px solid rgba(74,53,0,.45); background:transparent; color:inherit; font:inherit; font-weight:700; cursor:pointer }
.tour-banner .tour-btn:active{ opacity:.7 }
.tour-banner .tour-btn::before{ content:""; position:absolute; inset:-5px -4px }   /* the banner stays low; the button's hit area is 44 pt (A-6) */
@media(max-width:520px){ .tour-banner{ flex-wrap:nowrap; justify-content:space-between; text-align:start; font-size:calc(13px * var(--dt,1)); gap:10px } }   /* one row on a phone, so the banner costs little height */
html.tour .appbar{ top:var(--tour-h,0px); padding-top:10px }   /* the banner carries the safe area now */
html.native-ios.tour .abtns{ top:16px }   /* the language and eye buttons follow the bar: 6 px below its 10 px top, as safe area + 14 is 6 px below safe area + 8 (without this they fell onto the scope pill in the demo) */
html.tour .rail{ top:var(--tour-h,0px); height:calc(100vh - var(--tour-h,0px)) }
/* dark only when the page is dark (the company's dark look, or the iPhone app on a dark phone, app/branding.js), not merely when the computer is */
html[data-company-dark="true"] .tour-banner{ background:#5A4300; color:#FFF1C9 } html[data-company-dark="true"] .tour-banner .tour-btn{ border-color:rgba(255,241,201,.5) }
@media(prefers-color-scheme:dark){ html.native-ios .tour-banner{ background:#5A4300; color:#FFF1C9 } html.native-ios .tour-banner .tour-btn{ border-color:rgba(255,241,201,.5) } }