/* 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:46px }
.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:17px } .ent-amt.struck{ text-decoration:line-through }
.ent-meta{ color:var(--muted); font-size:13px; margin-top:6px } .ent-note{ font-size:13px; 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% } }
/* phone tap targets: at least 44 points */
@media(max-width:900px){ .btn.sm{ min-height:44px } .choice button{ min-height:48px } }
/* 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:16px !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:40px }
  .seg button{ min-height:36px }
  .facts .btn{ min-height:36px }
}
.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:12.5px; 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(--clay); --brass-ink:var(--brass); --nile-ink:var(--nile) }

/* 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,#14243B) !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:44px; font-size:18px; line-height:1 }
}
.fmenu{ display:flex; flex-direction:column; gap:8px }
.fmenu .btn{ min-height:48px; 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 }
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 }

/* 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 }
}