/* ספרון - the interface.
 *
 * Tokens from the ui-ux-pro-max design system for this product: premium black with a gold
 * accent (#A16207, adjusted from #CA8A04 so it clears 4.5:1 on white as text). The generator
 * also suggested "Liquid Glass" chrome and a scroll-storytelling page pattern; both were
 * declined on purpose. The first spends blur and animation budget on a phone for no gain in a
 * tool, and its own notes mark its accessibility as conditional. The second is a landing-page
 * narrative, and this is a thing you use, not a thing you read.
 *
 * Typography is the Hebrew equivalent of the recommended Cormorant/Montserrat pairing:
 * Frank Ruhl Libre carries the headings and Assistant does the work. The Latin fonts have no
 * Hebrew at all, so taking them literally would have produced a page in a fallback face.
 *
 * THE BOOKLET IS NOT STYLED FROM HERE. It prints on a home laser printer with no colour, so
 * it stays pure greyscale and keeps its own stylesheet in render.js. This file dresses the
 * app around it.
 */

:root{
  --ink:#1C1917;            /* primary */
  --ink-2:#44403C;          /* secondary */
  --fg:#0C0A09;
  --bg:#FAFAF9;
  --card:#FFFFFF;
  --line:#D6D3D1;
  --muted:#475569;          /* 8.1:1 on --bg */
  --muted-soft:#E8ECF0;
  --gold:#A16207;           /* 4.9:1 on white - the only gold allowed as text */
  --gold-soft:#FDF8EE;
  --on-gold:#FFFFFF;
  --bad:#DC2626;
  --warn:#8A5A1E;
  --ring:#1C1917;

  --r:10px;
  --r-sm:8px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px;
  --t:180ms cubic-bezier(.2,.6,.3,1);

  --sans:Assistant,"Segoe UI",Arial,sans-serif;
  --display:"Frank Ruhl Libre",Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--fg);
  font:400 16px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--display); font-weight:700; line-height:1.2; letter-spacing:-.2px}

a,button,[role=tab],label.drop{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[role=tab]:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px; border-radius:var(--r-sm);
}

/* ---- controls ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 var(--s3); border:1px solid var(--ink); border-radius:var(--r-sm);
  background:var(--ink); color:#fff; font:700 16px var(--sans); text-decoration:none;
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.btn:hover{background:#000; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--muted-soft); transform:none}
/* The gold appears once per screen, and it is always the thing to press. */
.btn.gold{background:var(--gold); border-color:var(--gold); color:var(--on-gold)}
.btn.gold:hover{background:#8A5406; border-color:#8A5406}
.btn[disabled]{opacity:.45; cursor:default; transform:none}

input[type=text],input[type=url],textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm);
  font:inherit; font-size:16px;           /* 16px or iOS zooms on focus and never returns */
  background:var(--card); color:var(--fg); min-height:48px;
  transition:border-color var(--t), box-shadow var(--t);
}
input:hover,textarea:hover{border-color:#BDB9B6}
input:focus,textarea:focus{border-color:var(--ink); box-shadow:0 0 0 3px rgba(28,25,23,.07)}
textarea{resize:vertical; min-height:88px; line-height:1.55}
label{display:block; font-weight:700; font-size:14.5px; margin-bottom:6px; color:var(--fg)}
.hint{color:var(--muted); font-size:13.5px; margin:7px 0 0; line-height:1.5}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:var(--s3)}

/* A row of mutually exclusive choices. One is on, and it is obvious which. */
.seg{display:flex; gap:var(--s1); flex-wrap:wrap}
.seg button{
  flex:1 1 auto; min-width:106px; min-height:48px; padding:0 var(--s2);
  border:1px solid var(--line); background:var(--card); border-radius:var(--r-sm);
  font:700 15px var(--sans); color:var(--muted);
  transition:background var(--t), color var(--t), border-color var(--t);
}
.seg button:hover{border-color:var(--ink); color:var(--fg)}
.seg button[aria-selected=true]{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---- messages ---- */
.flags{display:grid; gap:var(--s1); margin:0 0 var(--s2); padding:0; list-style:none}
.flags li{
  font-size:14px; line-height:1.5; padding:11px 13px; border-radius:var(--r-sm);
  background:var(--muted-soft); border:1px solid var(--line); color:var(--fg);
}
.flags li.error{background:#FDECEC; border-color:#F5C9C9; color:#9B1C1C}
.flags li.warn{background:var(--gold-soft); border-color:#EBD9B4; color:var(--warn)}

.msg{margin-top:var(--s2); padding:12px 14px; border-radius:var(--r-sm); font-size:14.5px; display:none}
.msg.show{display:block}
.msg.err{background:#FDECEC; color:#9B1C1C; border:1px solid #F5C9C9}

.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .btn:hover{transform:none}
}