/* ------------------------------------------------------------------ *
 * Design tokens. Pasted verbatim from the house standard.
 * Do not retype these values and do not add another background color.
 * ------------------------------------------------------------------ */
:root{
  --bg:#0f172a; --surface:#1e293b; --surface-2:#334155;
  --border:#475569; --border-strong:#64748b;
  --text:#e2e8f0; --text-muted:#94a3b8;
  --accent:#38bdf8; --accent-ink:#0f172a;
  --green:#4ade80; --yellow:#fbbf24; --orange:#fb923c; --red:#f87171; --purple:#a78bfa;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;
  --r-sm:4px; --r:8px; --r-pill:999px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-mono:'SF Mono','Fira Code','Consolas',monospace;
}
body{background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.7; font-size:16px; margin:0}
.wrap{max-width:1000px; margin:0 auto; padding:32px 20px 64px}
h1{font-size:2rem; line-height:1.25; color:var(--accent)}
h2{font-size:1.4rem; line-height:1.3; color:var(--accent); border-bottom:1px solid var(--border); padding-bottom:var(--sp-2)}
h3{font-size:1.1rem; line-height:1.4}
code{font-family:var(--font-mono); font-size:.88em; background:var(--surface); padding:2px 6px; border-radius:var(--r-sm); color:var(--yellow)}
pre{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px; overflow-x:auto}
table{width:100%; border-collapse:collapse; display:block; overflow-x:auto}
th,td{border:1px solid var(--border); padding:10px 12px; text-align:left; vertical-align:top}
thead th{background:var(--surface-2)}
input,select,textarea{background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--r); padding:10px 12px; font:inherit}
button{font:inherit; border-radius:var(--r); padding:10px 16px; cursor:pointer}
.btn-primary{background:var(--accent); color:var(--accent-ink); border:0; font-weight:600}
.btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.btn-secondary{background:transparent; color:var(--text); border:1px solid var(--border-strong)}
.btn-secondary:hover:not(:disabled){background:var(--surface-2)}
button:disabled{opacity:.4; cursor:not-allowed}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (max-width:600px){ .wrap{padding:20px 14px 48px} h1{font-size:1.55rem} h2{font-size:1.3rem} }

/* ------------------------------------------------------------------ *
 * App shell
 * ------------------------------------------------------------------ */

*{box-sizing:border-box}
body{-webkit-text-size-adjust:100%; overscroll-behavior-y:none}

.btn-danger{background:transparent; color:var(--red); border:1px solid var(--red)}
.btn-danger:hover:not(:disabled){background:color-mix(in srgb, var(--red) 12%, transparent)}
.btn-ghost{background:transparent; color:var(--text-muted); border:1px solid transparent}
.btn-ghost:hover:not(:disabled){background:var(--surface); color:var(--text)}
.btn-block{width:100%; display:block}
a{color:var(--accent); text-underline-offset:2px}
.muted{color:var(--text-muted)}
.small{font-size:14px}
.micro{font-size:12.5px; font-weight:700; line-height:1.4}
.hidden{display:none !important}

/* Every tap target clears 44px so it works with one hand in a corridor. */
button, .tap{min-height:46px}
input, select, textarea{min-height:46px; width:100%}
textarea{min-height:96px; line-height:1.6; resize:vertical}
input[type="checkbox"]{min-height:0; width:22px; height:22px; accent-color:var(--accent)}

/* --- top bar --- */
.topbar{
  position:sticky; top:0; z-index:20; background:var(--bg);
  border-bottom:1px solid var(--border); padding:10px 16px;
  display:flex; align-items:center; gap:var(--sp-3);
}
.topbar .brand{font-weight:700; color:var(--accent); font-size:1.05rem; flex:1; min-width:0}
.topbar .spacer{flex:1; min-width:0}
.topbar button{padding:8px 12px; min-height:40px}

/* --- bottom nav, phone first --- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:grid; grid-template-columns:repeat(4, 1fr);
  background:var(--surface); border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:8px 4px; min-height:58px;
  color:var(--text-muted); text-decoration:none; font-size:12.5px; font-weight:600;
}
.tabbar a .ico{font-size:19px; line-height:1}
.tabbar a[aria-current="page"]{color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent)}
.page{padding-bottom:96px}

/* --- cards --- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:var(--sp-4); margin-bottom:var(--sp-3)}
.card-head{display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-2)}
.card-head h3{margin:0; flex:1; min-width:0}

/* --- section grouping in the form --- */
.section{border:1px solid var(--border); border-radius:var(--r); margin-bottom:var(--sp-4); overflow:hidden}
.section > summary, .section > .section-head{
  background:var(--surface-2); padding:12px var(--sp-4); font-weight:600;
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:var(--sp-2);
}
.section > summary::-webkit-details-marker{display:none}
.section > summary::after{content:"+"; margin-left:auto; color:var(--accent); font-weight:700; font-size:1.2rem}
.section[open] > summary::after{content:"\2212"}
.section-body{padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-4)}

.field label, .field .label{display:block; font-weight:600; font-size:14px; margin-bottom:6px}
.field .hint{color:var(--text-muted); font-size:13px; margin-top:4px; line-height:1.5}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3)}
@media (max-width:600px){ .row2{grid-template-columns:1fr} }

/* --- segmented control, for pick one of N --- */
.segmented{display:flex; border:1px solid var(--border-strong); border-radius:var(--r); overflow:hidden}
.segmented button{
  flex:1; min-width:0; border:0; border-radius:0; background:var(--surface);
  color:var(--text); font-weight:600; padding:11px 8px;
}
.segmented button + button{border-left:1px solid var(--border-strong)}
.segmented button:hover:not(:disabled):not([aria-pressed="true"]){background:var(--surface-2)}
.segmented button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}

/* --- switch style checkbox row --- */
.check-row{display:flex; align-items:center; gap:var(--sp-3); padding:10px 0; cursor:pointer}
.check-row .txt{flex:1; min-width:0}
.check-row input{flex-shrink:0}

/* --- flags --- */
.flag{border-radius:var(--r); padding:12px var(--sp-4); margin-bottom:var(--sp-2); border-left:4px solid}
.flag .flag-title{font-weight:700; display:block; margin-bottom:2px}
.flag .flag-text{font-size:14px; line-height:1.6}
.flag-stop{background:color-mix(in srgb, var(--red) 12%, transparent); border-color:var(--red)}
.flag-stop .flag-title{color:var(--red)}
.flag-warn{background:color-mix(in srgb, var(--orange) 11%, transparent); border-color:var(--orange)}
.flag-warn .flag-title{color:var(--orange)}
.flag-info{background:color-mix(in srgb, var(--accent) 10%, transparent); border-color:var(--accent)}
.flag-info .flag-title{color:var(--accent)}

.tag{display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.04em; padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap}
.tag-green{background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green)}
.tag-yellow{background:color-mix(in srgb, var(--yellow) 16%, transparent); color:var(--yellow)}
.tag-orange{background:color-mix(in srgb, var(--orange) 16%, transparent); color:var(--orange)}
.tag-red{background:color-mix(in srgb, var(--red) 16%, transparent); color:var(--red)}
.tag-purple{background:color-mix(in srgb, var(--purple) 16%, transparent); color:var(--purple)}
.tag-blue{background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent)}

/* --- error alert, one per page, collects every problem --- */
.error-alert{
  background:color-mix(in srgb, var(--red) 12%, transparent); border:1px solid var(--red);
  border-radius:var(--r); padding:12px var(--sp-4); margin-bottom:var(--sp-4); color:var(--text);
}
.error-alert strong{color:var(--red); display:block; margin-bottom:4px}
.error-alert ul{margin:0; padding-left:20px}

/* --- computed panel --- */
.computed{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:var(--sp-4); margin-bottom:var(--sp-4)}
.computed h3{margin:0 0 var(--sp-3); color:var(--accent); font-size:1.05rem}
.calc-row{display:flex; gap:var(--sp-3); padding:9px 0; border-bottom:1px solid var(--border); align-items:baseline}
.calc-row:last-child{border-bottom:0}
.calc-row .k{flex:0 0 132px; color:var(--text-muted); font-size:14px}
.calc-row .v{flex:1; min-width:0; font-weight:600; overflow-wrap:anywhere}
.calc-row .v .sub{display:block; font-weight:400; font-size:14px; color:var(--text-muted); overflow-wrap:anywhere}
@media (max-width:600px){ .calc-row{flex-direction:column; gap:2px} .calc-row .k{flex:none} }
.he{font-size:1.15em; direction:rtl; unicode-bidi:isolate}
.why{color:var(--text-muted); font-size:14px; line-height:1.6; margin:var(--sp-3) 0 0}

/* --- list rows --- */
.rec-row{
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:12px var(--sp-4); margin-bottom:var(--sp-2);
}
/* The text takes the slack, the button never moves. */
.rec-row .body{flex:1; min-width:0}
.rec-row .body a{font-weight:700; font-size:1.05rem; text-decoration:none; display:block; overflow-wrap:anywhere}
.rec-row .body .meta{color:var(--text-muted); font-size:14px; overflow-wrap:anywhere}
.rec-row .actions{flex-shrink:0; display:flex; gap:var(--sp-2)}
.rec-row .actions a, .rec-row .actions button{
  min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:var(--r); text-decoration:none; font-weight:600; font-size:14px;
  background:var(--accent); color:var(--accent-ink); border:0; white-space:nowrap;
}
.rec-row .actions a:hover{filter:brightness(1.08)}
.date-chip{
  flex-shrink:0; text-align:center; min-width:56px; padding:6px 8px;
  background:var(--surface-2); border-radius:var(--r);
}
.date-chip .d{display:block; font-size:1.3rem; font-weight:700; line-height:1.1}
.date-chip .m{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted)}

/* --- empty states always say what to do next --- */
.empty{
  border:1px dashed var(--border-strong); border-radius:var(--r);
  padding:var(--sp-6) var(--sp-4); text-align:center; color:var(--text-muted);
}
.empty strong{display:block; color:var(--text); margin-bottom:6px}
.empty button{margin-top:var(--sp-3)}

/* --- all records table --- */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.table-wrap table{display:table; min-width:760px}
.table-wrap tbody tr{cursor:pointer}
.table-wrap tbody tr:hover{background:var(--surface-2)}
th.sortable{cursor:pointer; white-space:nowrap; user-select:none}
th.sortable .arrow{color:var(--accent); font-size:12px}

/* --- Hebrew keypad --- */
.keypad{background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--r); padding:var(--sp-2); margin-top:var(--sp-2)}
.keypad .keys{display:grid; grid-template-columns:repeat(9, 1fr); gap:4px}
.keypad .keys button{
  min-height:42px; padding:4px 0; font-size:19px; border-radius:var(--r-sm);
  background:var(--surface); color:var(--text); border:1px solid var(--border);
}
.keypad .keys button:hover:not(:disabled){background:var(--accent); color:var(--accent-ink)}
.keypad .keypad-foot{display:flex; gap:var(--sp-2); margin-top:var(--sp-2)}
.keypad .keypad-foot button{flex:1; min-height:42px; font-size:14px}
@media (max-width:600px){ .keypad .keys{grid-template-columns:repeat(7, 1fr)} }

/* --- people rows --- */
.person{border:1px solid var(--border); border-radius:var(--r); padding:var(--sp-3); background:var(--bg); margin-bottom:var(--sp-3)}
.person-head{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3)}
.person-head select{flex:1; min-width:0}
.person-head button{flex-shrink:0}
.person .stack{display:flex; flex-direction:column; gap:var(--sp-3)}

/* --- form footer that stays reachable --- */
.form-actions{
  position:sticky; bottom:64px; z-index:10;
  display:flex; gap:var(--sp-3); padding:var(--sp-3) 0;
  background:linear-gradient(to top, var(--bg) 70%, transparent);
}
.form-actions button{flex:1}

/* --- audit --- */
.audit-entry{border-bottom:1px solid var(--border); padding:10px 0; font-size:14px}
.audit-entry:last-child{border-bottom:0}
.audit-entry .when{color:var(--text-muted); font-size:13px}

/* --- login --- */
.login-wrap{max-width:400px; margin:0 auto; padding:var(--sp-16) var(--sp-4)}
.login-wrap h1{text-align:center; margin-bottom:var(--sp-2)}
.login-wrap p.sub{text-align:center; color:var(--text-muted); margin-top:0; margin-bottom:var(--sp-8)}

/* --- toast --- */
.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:84px; z-index:60;
  background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--r);
  padding:12px var(--sp-4); font-weight:600; max-width:92vw; text-align:center;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
}
.toast.ok{border-color:var(--green); color:var(--green)}
.toast.bad{border-color:var(--red); color:var(--red)}

/* ------------------------------------------------------------------ *
 * Utility classes.
 *
 * These exist because the Content Security Policy blocks inline style
 * attributes. Every rule below replaced a style="..." that the browser
 * refused to apply. Add a class here rather than an inline style.
 * ------------------------------------------------------------------ */

.m0{margin:0}
.mb-2{margin-bottom:var(--sp-2)}
.mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)}
.mt-2{margin-top:var(--sp-2)}
.stack-h{display:flex; gap:var(--sp-3); flex-wrap:wrap}
.stack-h.mt-3{margin-top:var(--sp-3)}
.pre-wrap{margin:0; white-space:pre-wrap; overflow-wrap:anywhere}
.name-line{display:block; font-weight:700}

/* A link that has to look and behave like a primary button. */
.btn-link{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:10px 16px; border-radius:var(--r);
  background:var(--accent); color:var(--accent-ink);
  font-weight:600; text-decoration:none;
}
.btn-link:hover{filter:brightness(1.08)}

/* A secondary button that sits under a field rather than in a button row. */
.btn-inline{margin-top:var(--sp-2); min-height:40px; padding:8px 14px}