/* SIKASEM's look: the blues of the brand, soft rounded panels, and the navigation across the
   top. Colours come from ui.css's tokens, so light and dark both follow. */

:root { --navy: #03045E; --blue: #0077B6; --cyan: #00B4D8; --sky: #90E0EF; --ice: #CAF0F8; --r: 22px; --accent: #0077B6; }
:root[data-theme="dark"] { --accent: #0a8fd4; }
svg.defs { position: absolute; width: 0; height: 0; }
.cowry { fill: url(#cowryFill); }
main { background: var(--bg); }
.view { max-width: 1380px; margin: 0 auto; padding: 24px 32px 60px; }
.view.wide { max-width: none; margin: 0; padding: 0; }
.view h2 { font-size: 26px; letter-spacing: -.02em; font-weight: 800; }

/* ------------------------------------------------------------- Panels and controls */
.card, .stat, .biz, .empty, table.list { border-radius: var(--r); }
.card { padding: 20px 22px; box-shadow: 0 1px 2px rgba(3, 4, 94, .04), 0 8px 24px rgba(3, 4, 94, .05); }
.stat { padding: 16px 20px; box-shadow: 0 8px 24px rgba(3, 4, 94, .05); }
.stat::before { display: none; }
.stat b { font-size: 23px; font-weight: 800; }
.btn { border-radius: 99px; padding: 8px 16px; font-weight: 600; }
.btn.sm { padding: 5px 12px; }
.btn.primary { background: linear-gradient(135deg, var(--blue), #0096C7); border-color: transparent; }
.seg { border-radius: 99px; }
.seg button.on { border-radius: 99px; background: var(--navy); }
:root[data-theme="dark"] .seg button.on { background: var(--blue); }
label.f > input, label.f > select, label.f > textarea, .inp { border-radius: 12px; }
.modal-bg { background: rgba(3, 4, 94, .4); }
.modal-bg .modal { border-radius: var(--r); }
.badge.t-invoice { background: var(--ice); color: var(--blue); }
:root[data-theme="dark"] .badge.t-invoice { background: rgba(0, 180, 216, .18); color: var(--sky); }
.ed-prev, .paper-wrap.report-wrap, .issued-view, .design-wrap .paper-wrap { background: color-mix(in srgb, var(--sky) 26%, var(--bg)); }
:root[data-theme="dark"] .ed-prev, :root[data-theme="dark"] .paper-wrap.report-wrap, :root[data-theme="dark"] .issued-view, :root[data-theme="dark"] .design-wrap .paper-wrap { background: var(--paperbg); }
.design-wrap .paper-wrap { height: calc(100vh - 150px); }
.theme-btn { margin: 10px 0 0; width: 100%; border-color: var(--line); color: var(--ink); }
.theme-btn:hover { background: var(--hover); color: var(--ink); }
#toast { background: rgba(3, 4, 94, .95); }

/* ------------------------------------------------------------- The header */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.brand .cowry { width: 42px; height: 42px; flex-shrink: 0; }
.brand b { display: block; font-size: 18px; font-weight: 800; letter-spacing: .08em; line-height: 1.1; }
.brand small { display: block; font-size: 11px; color: var(--muted); }
:root[data-theme="dark"] .brand { color: #fff; }
.topbar .cowry { width: 28px; height: 28px; fill: #fff; flex-shrink: 0; }
.drop { position: relative; }
.drop-btn { font: inherit; cursor: pointer; }
.drop-menu { display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; min-width: 210px; padding: 8px; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); animation: drop .16s var(--ease); }
.drop.open > .drop-menu { display: flex; }
.drop-menu a { display: block; color: var(--ink) !important; padding: 8px 12px !important; border-radius: 10px; text-decoration: none; font-size: 13.5px; font-weight: 500; }
.drop-menu a:hover { background: var(--hover) !important; padding-left: 12px; }
.drop-menu a.on { background: var(--ice) !important; color: var(--navy) !important; box-shadow: none; }
:root[data-theme="dark"] .drop-menu a.on { background: var(--hover) !important; color: #fff !important; }
.drop-menu [data-owner] { display: flex; flex-direction: column; gap: 2px; }
.drop-menu .sep { height: 1px; background: var(--line); margin: 6px 4px; }
.acct .drop-menu { left: auto; right: 0; width: 240px; }
.side-foot { padding: 6px; color: var(--muted); }
.side-foot .who { color: var(--ink); }
.side-foot .who a { color: var(--link); }
.ico { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line); background: var(--panel); border-radius: 50%; color: var(--navy); padding: 0; transition: background var(--t), transform .12s; }
:root[data-theme="dark"] .ico { color: var(--ice); }
.ico:hover { background: var(--hover); }
.ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico span { display: none; }
.new-btn { border: 0; height: 42px; padding: 0 18px; border-radius: 99px; color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--blue), #0096C7); box-shadow: 0 6px 16px rgba(0, 119, 182, .28); white-space: nowrap; }
.new-drop .drop-menu { min-width: 170px; }
.co-switch { padding: 0; border: 0; position: relative; }
.co-cur { margin: 0; padding: 4px 12px 4px 4px; gap: 9px; border: 1px solid var(--line); background: var(--panel); border-radius: 99px; }
.co-cur:hover { background: var(--hover); }
.co-cur img, .co-cur .ph { width: 34px; height: 34px; border-radius: 50%; }
.co-cur .ph { background: var(--blue); }
.co-cur b { color: var(--ink); font-size: 12.5px; max-width: 120px; }
.co-cur small { color: var(--muted); font-size: 11px; }
.co-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; margin: 0; min-width: 230px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); }
.co-menu a { color: var(--ink); }
.co-menu a:hover { background: var(--hover); }
.co-menu a.on { color: var(--blue); }
body.no-business #nav, body.no-business .side-right > :not(.acct):not(.co-switch) { visibility: hidden; }

@media (min-width: 1101px) {
  body { flex-direction: column; }
  .side { width: auto; flex-direction: row; align-items: center; gap: 18px; padding: 14px 28px; background: transparent; color: var(--ink); position: relative; z-index: 40; }
  nav { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 2px; padding: 5px; margin: 0 auto; overflow: visible; background: var(--navy); border-radius: 99px; box-shadow: 0 8px 22px rgba(3, 4, 94, .22); }
  :root[data-theme="dark"] nav { background: #0b1080; }
  #nav > a, #nav > .drop > .drop-btn { display: block; border: 0; background: none; color: var(--ice); padding: 8px 15px; border-radius: 99px; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
  #nav > a:hover, #nav > .drop > .drop-btn:hover { padding-left: 15px; background: rgba(202, 240, 248, .14); color: #fff; }
  #nav > a.on, #nav > .drop:has(a.on) > .drop-btn { color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 4px 14px rgba(0, 180, 216, .4); }
  .side-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
}
@media (min-width: 1101px) and (max-width: 1340px) {
  .brand small, .co-cur > div { display: none; }
  .co-cur { padding: 4px; }
}

/* the same parts as a menu that slides in */
@media (max-width: 1100px) {
  .side { padding: 16px 12px; overflow: auto; background: var(--navy); }
  .brand { color: #fff; padding: 0 6px 14px; }
  .brand small { color: var(--sky); }
  .brand .cowry { fill: #fff; }
  nav { flex: 0 0 auto; overflow: visible; padding: 0; }
  .drop-btn:not(.ico):not(.new-btn) { display: none; }
  #nav .drop-menu, .new-drop .drop-menu { display: flex; position: static; background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; animation: none; }
  #nav .drop-menu a, .new-drop .drop-menu a { color: var(--ice) !important; font-size: 14px; }
  #nav .drop-menu a:hover, .new-drop .drop-menu a:hover { background: rgba(202, 240, 248, .14) !important; }
  #nav .drop-menu a.on, .new-drop .drop-menu a.on { background: var(--blue) !important; color: #fff !important; }
  #nav .drop-menu .sep { background: rgba(202, 240, 248, .18); }
  .new-btn { display: none; }
  .side-right { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(202, 240, 248, .18); }
  .side-right > a.ico { width: auto; height: auto; display: flex; gap: 10px; justify-content: flex-start; border: 0; border-radius: 10px; background: none; color: var(--ice); padding: 8px 12px; text-decoration: none; font-size: 14px; }
  .side-right > a.ico span { display: inline; }
  .acct { position: static; order: 9; }
  .acct > .ico { display: none; }
  .acct .drop-menu { display: flex; position: static; width: auto; background: none; border: 0; box-shadow: none; }
  .side-foot, .side-foot .who, .side-foot .who a { color: var(--sky); }
  .theme-btn { color: var(--ice); border-color: rgba(202, 240, 248, .25); }
  .co-switch { order: -1; margin-bottom: 8px; }
  .co-cur { background: rgba(202, 240, 248, .1); border-color: transparent; }
  .co-cur b { color: #fff; }
  .co-cur small { color: var(--sky); }
  .co-menu { position: static; background: none; border: 0; box-shadow: none; }
  .co-menu a { color: var(--ice); }
  .co-menu a:hover { background: rgba(202, 240, 248, .14); }
  .co-menu a.on { color: #fff; }
}

/* ------------------------------------------------------------- Overview */
.dash-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.dash h1 { margin: 0; font-size: 38px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--navy); }
:root[data-theme="dark"] .dash h1 { color: #fff; }
.dash-top .sub { margin: 4px 0 0; }
.dash-top .btn { padding: 11px 20px; }
.dash-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.dc { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 228px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 8px 24px rgba(3, 4, 94, .05); }
.dc h3 { display: flex; align-items: center; justify-content: space-between; min-height: 28px; margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.dc-num, .dc-days { font-size: 27px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--navy); white-space: nowrap; }
:root[data-theme="dark"] .dc-num, :root[data-theme="dark"] .dc-days { color: #fff; }
.dc-days small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.dc p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.dc p.dc-none { margin-top: auto; }
.dc-ic { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 800; }
.dc-ic.bad { color: var(--bad); border: 2px solid currentColor; }
.dc-go { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; text-decoration: none; color: var(--ink); font-size: 14px; }
.dc-go:hover { background: var(--hover); }
.dc-chart { width: 100%; max-height: 124px; margin-top: auto; padding-top: 8px; display: block; }
.dc-chart rect { fill: var(--sky); transition: fill var(--t); }
.dc-chart rect.now, .dc-chart rect:hover { fill: var(--blue); }
.dc-chart text { fill: var(--muted); font-size: 8px; text-anchor: middle; }
.dc-chart .stroke { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.dc-chart .fill { fill: var(--sky); opacity: .35; }
.dc-chart circle { fill: var(--panel); stroke: var(--blue); stroke-width: 2.2; }
.scene .waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100px; }
.scene .w1 { fill: var(--sky); opacity: .55; }
.scene .w2 { fill: var(--cyan); }
.scene-cowry { position: absolute; right: 14px; bottom: 34px; width: 92px; height: 92px; fill: url(#cowryFill); filter: drop-shadow(0 8px 12px rgba(3, 4, 94, .3)); }
.dc-methods { display: flex; gap: 6px; margin-top: auto; align-items: flex-end; padding-top: 10px; }
.dc-methods div { flex: 1; min-width: 0; padding: 10px 9px; border-radius: 12px 12px 0 0; background: var(--subtle); border: 1px solid var(--line); border-bottom: 0; }
.dc-methods div.top { padding-top: 26px; background: linear-gradient(180deg, var(--blue), var(--cyan)); border-color: transparent; color: #fff; }
.dc-methods span { display: block; font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-methods b { display: block; font-size: 12.5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

.dash-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.fl-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin-right: 8px; }
.fl-label i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font-style: normal; font-size: 12px; }
.pill { height: 42px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 99px; padding: 0 16px; font-size: 13px; }
.pill.date { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.pill.date input { border: 0; background: none; color: var(--ink); font-size: 13px; outline: none; box-shadow: none !important; }
.pill.search { flex: 1; min-width: 190px; }

.dash-board { position: relative; background: var(--navy); border-radius: 26px; padding: 18px; box-shadow: 0 18px 40px rgba(3, 4, 94, .28); }
:root[data-theme="dark"] .dash-board { background: #0b1080; }
.dash-tabs { position: absolute; top: -21px; left: 50%; translate: -50% 0; z-index: 2; display: flex; gap: 2px; padding: 5px; background: var(--bg); border-radius: 99px; box-shadow: 0 0 0 6px var(--bg); white-space: nowrap; }
.dash-tabs button { border: 0; cursor: pointer; background: none; color: var(--ink); padding: 8px 15px; border-radius: 99px; font-size: 13px; font-weight: 600; }
.dash-tabs button:hover { background: var(--hover); }
.dash-tabs button.on { color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.dash-tabs i { font-style: normal; display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 3px; border-radius: 10px; font-size: 11px; background: var(--ice); color: var(--navy); }
.dash-tabs button.on i { background: #fff; }
.board-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; }
.board-list { min-width: 0; padding-top: 12px; }
.board-list h3 { margin: 4px 8px 12px; color: #fff; font-size: 15px; }
.rows { display: flex; flex-direction: column; gap: 3px; max-height: 408px; overflow: auto; padding-right: 2px; }
.rows::-webkit-scrollbar-thumb { background-color: rgba(202, 240, 248, .3); }
.doc-row { flex-shrink: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto minmax(84px, auto); align-items: center; gap: 10px; width: 100%; padding: 9px 12px 9px 9px; border: 0; border-radius: 14px; background: none; color: var(--ice); text-align: left; cursor: pointer; transition: background var(--t); }
.doc-row:hover { background: rgba(202, 240, 248, .1); }
.doc-row.on { background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #fff; box-shadow: 0 8px 18px rgba(0, 119, 182, .4); }
.doc-row.voided b, .doc-row.voided small { text-decoration: line-through; opacity: .65; }
.av { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-weight: 700; color: var(--navy); background: linear-gradient(135deg, var(--ice), var(--sky)); }
.dr-main { min-width: 0; }
.dr-main b { display: block; font-size: 13.5px; color: #fff; white-space: nowrap; }
.dr-main b i { font-style: normal; opacity: .75; }
.dr-main small { display: block; font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-amt { text-align: right; font-size: 13.5px; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: rgba(202, 240, 248, .16); color: var(--ice); white-space: nowrap; }
.doc-row.on .chip, .board-detail .chip { background: #fff; color: var(--navy); }
.chip.paid { background: rgba(52, 199, 127, .2); color: #8cf0bd; }
.chip.partial { background: rgba(240, 166, 58, .22); color: #ffd28f; }
.chip.overdue { background: #e5484d; color: #fff; }
.doc-row.on .chip.overdue, .board-detail .chip.overdue { background: #e5484d; color: #fff; }
.chip.void { opacity: .7; }
.board-none { padding: 46px 16px; text-align: center; color: var(--ice); font-size: 13px; }
.board-none b { display: block; font-size: 15px; color: #fff; margin-bottom: 4px; }

.board-detail { min-width: 0; margin-top: 14px; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 20px; color: #fff; background: linear-gradient(145deg, #023E8A, var(--blue) 72%, #0088C4); border: 1px solid rgba(202, 240, 248, .25); }
.board-detail small { display: block; font-size: 12px; color: var(--ice); margin-bottom: 6px; }
.dt-empty { margin: auto; text-align: center; color: var(--ice); font-size: 13px; }
.dt-empty b { display: block; color: #fff; font-size: 15px; margin-bottom: 4px; }
.dt-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; }
.dt-num { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.dt-co > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dt-co img { width: 28px; height: 28px; border-radius: 50%; background: #fff; object-fit: contain; flex-shrink: 0; }
.dt-co b, .dt-cl b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.dt-cl > div { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dt-cl > div > span:last-child { min-width: 0; }
.dt-cl i { display: block; font-style: normal; font-size: 12px; color: var(--ice); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; flex: 1; }
.tile { min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(202, 240, 248, .16); border: 1px solid rgba(202, 240, 248, .2); color: #fff; text-decoration: none; }
.tile b { font-size: 15.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile span { font-size: 12.5px; color: var(--ice); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile.add { align-items: center; justify-content: center; text-align: center; background: none; border: 1.5px dashed rgba(202, 240, 248, .5); cursor: pointer; transition: background var(--t); }
.tile.add:hover { background: rgba(202, 240, 248, .12); }
.tile.add b { font-size: 24px; font-weight: 400; }
.dt-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; padding-top: 14px; border-top: 1px solid rgba(202, 240, 248, .25); }
.dt-foot small { margin-bottom: 2px; }
.dt-foot b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-foot .spacer { min-width: 0; }
.rnd { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(202, 240, 248, .45); background: none; color: #fff; cursor: pointer; margin-left: -14px; transition: background var(--t); }
.rnd:first-of-type { margin-left: 0; }
.rnd + .rnd { margin-left: -14px; }
.rnd:hover { background: rgba(202, 240, 248, .16); }
.rnd svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wbtn { height: 42px; padding: 0 20px; border: 0; border-radius: 99px; background: #fff; color: var(--navy); font-weight: 700; cursor: pointer; white-space: nowrap; transition: transform .12s, box-shadow var(--t); }
.wbtn:hover { box-shadow: 0 6px 18px rgba(3, 4, 94, .35); }
.wbtn:active { transform: scale(.97); }

@media (max-width: 1280px) {
  .dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-in { grid-template-columns: 1fr; }
  .rows { max-height: 320px; }
}
@media (max-width: 760px) {
  .view { padding: 16px 14px 70px; }
  .view.wide { padding: 0; }
  .dash h1 { font-size: 30px; }
  .dash-cards { grid-template-columns: 1fr; }
  .dc { min-height: 0; }
  .dc.scene { min-height: 214px; }
  .scene-cowry { width: 76px; height: 76px; right: 12px; bottom: 26px; }
  .dash-board { padding: 14px 10px; }
  .dash-tabs { position: static; translate: none; overflow-x: auto; margin: 0 0 8px; max-width: 100%; box-shadow: none; }
  .dt-head { grid-template-columns: 1fr; gap: 10px; }
  .dt-tiles { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .board-detail { margin-top: 0; }
  .doc-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .doc-row .chip { display: none; }
  .dt-foot .spacer { display: none; }
  .rnd { margin-left: 0 !important; }
  .wbtn { flex: 1; }
  .pill.search { width: 100%; }
}

/* ------------------------------------------------------------- Phones */
/* Text keeps clear of the screen's edges, and of the notch and home bar on an installed app. */
:root { --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); }
@media (max-width: 1100px) {
  .topbar { height: calc(52px + var(--safe-t)); padding: var(--safe-t) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l)); }
  .side { padding-top: calc(16px + var(--safe-t)); padding-bottom: calc(16px + var(--safe-b)); }
}
@media (max-width: 760px) {
  main { overflow-x: hidden; }
  ::-webkit-scrollbar { width: 0; height: 0; }
  .view { padding: 18px calc(18px + var(--safe-r)) calc(96px + var(--safe-b)) calc(18px + var(--safe-l)); }
  .view.wide { padding: 0; }
  .view h2 { font-size: 24px; line-height: 1.2; }
  .view .sub { line-height: 1.45; }
  .save-bar { margin: -18px -18px 14px; padding: 12px 18px; }

  /* An iPhone zooms into any field with text under 16px */
  input, select, textarea, .inp, label.f > input, label.f > select, label.f > textarea, .items-ed .inp, .pill, .pill.date input, .ask-form textarea { font-size: 16px; }

  .welcome { margin: 5vh auto; padding: 0 22px; }
  .welcome h1 { font-size: 26px; line-height: 1.2; }
  .welcome > p { line-height: 1.5; }
  .setup-card { max-width: none; }

  /* Figures always fit their card */
  .stats, .stats.five { gap: 10px; }
  .stat { padding: 13px 13px; min-width: 0; }
  .stat small { line-height: 1.3; }
  .stat b { font-size: clamp(14.5px, 4.5vw, 18px); white-space: nowrap; letter-spacing: -.02em; }
  .dc { padding: 18px; }
  .dc-num { font-size: 26px; white-space: normal; }

  /* Choices wrap instead of running off the edge */
  .seg { display: flex; flex-wrap: wrap; gap: 2px; max-width: 100%; overflow: visible; padding: 3px; border-radius: 18px; }
  .seg button { flex: 1 1 auto; border-right: 0; padding: 7px 11px; border-radius: 99px; white-space: nowrap; }
  .filters .seg, .filters .inp { width: 100%; }
  .row > .btn { min-width: 0; }
  .btn { max-width: 100%; white-space: normal; }

  /* Lists scroll inside their own box, with room around the text */
  table.list { max-width: 100%; }
  table.list th:first-child, table.list td:first-child { padding-left: 16px; }
  table.list th:last-child, table.list td:last-child { padding-right: 16px; }

  /* Business cards and the design page stay on the screen */
  .biz, .biz * { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
  .biz-grid { grid-template-columns: 1fr; }
  .biz-top small { white-space: normal; }
  .biz-top > div:not(.ph) { flex: 1; }
  .card canvas, .card img { max-width: 100%; }
  .design-wrap { flex-direction: column; }
  .design-wrap .left, .design-wrap .right { width: 100%; min-width: 0; position: static; }
  .pick { flex-wrap: wrap; }
  .tax-row:not(.doc) { grid-template-columns: minmax(0, 1fr) 72px; }
  .tax-row input { min-width: 0; width: 100%; }

  /* The editor: the preview waits off to the side, without letting the page slide */
  .editor { overflow: hidden; }
  .ed-form { padding: 14px calc(16px + var(--safe-r)) calc(150px + var(--safe-b)) calc(16px + var(--safe-l)); }
  .ed-form .card { padding: 16px; }
  .ed-bar { padding: 10px 16px; }
  .prev-toggle { right: calc(18px + var(--safe-r)); bottom: calc(18px + var(--safe-b)); }

  .dash-board { padding: 14px 12px; border-radius: 22px; }
  .dash-tabs { flex-wrap: wrap; justify-content: center; border-radius: 22px; white-space: normal; }
  .board-list h3 { margin-left: 6px; }
  .board-detail { padding: 18px 16px; }
  .doc-row { padding: 9px 10px; }

  .modal-bg .modal { padding-left: 20px; padding-right: 20px; padding-bottom: calc(16px + var(--safe-b)); }
  .tools { left: 10px !important; right: 10px !important; bottom: calc(10px + var(--safe-b)) !important; }
  #toast { left: 14px; right: 14px; }
}