/* Malzama: brand tokens, base styles and the booklet tool.
   Source of truth: brand/brand-guide.md (Tajawal; Emerald, Ink, Signature Grey). */
:root{
  --emerald:#0B7A5E; --emerald-strong:#075C46; --emerald-tint:#E7F2EE; --on-emerald:#FFFFFF;
  --gold:#E9C46A;
  --ink:#1B1F24; --muted:#5C6168; --sig-grey:#7A7E84;
  --bg:#FFFFFF; --surface:#F6F4EF; --paper:#FFFFFF;
  --border:#E3E1DC; --border-strong:#C9C6BF;
  --success:#1F9254; --warning:#B7791F; --error:#C2410C;
  --drop:#5FAF92; --ring:0 0 0 3px rgba(11,122,94,.18);
  --shadow-card:0 1px 2px rgba(27,31,36,.06); --shadow-raised:0 8px 24px rgba(27,31,36,.10);
  --r-tag:4px; --r-ctl:6px; --r-card:10px;
  --font:"Tajawal",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --emerald:#34B38A; --emerald-strong:#5CC7A3; --emerald-tint:#0F2E25; --on-emerald:#121518;
    --ink:#ECEDEE; --muted:#A1A6AD; --sig-grey:#A1A6AD;
    --bg:#121518; --surface:#1B1F24; --paper:#121518;
    --border:#2C3238; --border-strong:#3A4148;
    --success:#3FBF7F; --warning:#E0B04A; --error:#F07A4A;
    --drop:#34B38A; --ring:0 0 0 3px rgba(52,179,138,.25);
    --shadow-card:none; --shadow-raised:none;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --emerald:#34B38A; --emerald-strong:#5CC7A3; --emerald-tint:#0F2E25; --on-emerald:#121518;
  --ink:#ECEDEE; --muted:#A1A6AD; --sig-grey:#A1A6AD;
  --bg:#121518; --surface:#1B1F24; --paper:#121518;
  --border:#2C3238; --border-strong:#3A4148;
  --success:#3FBF7F; --warning:#E0B04A; --error:#F07A4A;
  --drop:#34B38A; --ring:0 0 0 3px rgba(52,179,138,.25);
  --shadow-card:none; --shadow-raised:none;
  color-scheme:dark;
}
html{box-sizing:border-box;scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.75;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (max-width:640px){body{font-size:16px}}
h1,h2,h3{line-height:1.3;color:var(--ink)}
h1{font-weight:800;font-size:48px;line-height:1.25;margin:0 0 8px}
h2{font-weight:700;font-size:34px}
h3{font-weight:700;font-size:24px;line-height:1.4}
@media (max-width:640px){h1{font-size:34px;line-height:1.3}h2{font-size:26px;line-height:1.35}h3{font-size:20px}}
a{color:var(--emerald);text-underline-offset:3px}
a:hover{color:var(--emerald-strong)}
:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
[hidden]{display:none!important}
.mt-10{margin-top:12px}
.wrap{max-width:1180px;margin:0 auto;padding:32px 24px 64px}
@media (max-width:640px){.wrap{padding:24px 16px 48px}}

/* ---------- tool ---------- */
.tool-head{margin-bottom:32px;max-width:62ch}
.tool-head p{margin:0;color:var(--muted)}
.tool-head p.tag{color:var(--muted);font-size:20px;font-weight:500}
.grid{display:grid;grid-template-columns:380px 1fr;gap:32px;align-items:start}
@media (max-width:860px){.grid{grid-template-columns:1fr;gap:24px}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:24px;box-shadow:var(--shadow-card)}
@media (max-width:640px){.panel{padding:16px}}
.drop{border:2px dashed var(--drop);border-radius:var(--r-card);padding:24px 16px;text-align:center;cursor:pointer;background:var(--bg);transition:background .15s,border-color .15s}
.drop:hover,.drop.over{background:var(--emerald-tint);border-color:var(--emerald)}
.drop svg{display:block;margin:0 auto 8px;color:var(--emerald)}
.drop strong{display:block;font-size:17px;font-weight:700}
.drop span{color:var(--muted);font-size:14px}
.file-info{margin-top:12px;font-size:14px;color:var(--muted);min-height:1.6em;word-break:break-word}
.file-info b{color:var(--ink);font-weight:700}
fieldset{border:0;margin:24px 0 0;padding:0}
legend{font-weight:500;font-size:14px;line-height:1.4;margin-bottom:8px;padding:0;color:var(--ink)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{flex:1 1 auto;position:relative}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center;padding:6px 14px;border:1px solid var(--border-strong);border-radius:var(--r-ctl);font-size:15px;line-height:1.4;cursor:pointer;background:var(--bg);color:var(--ink)}
.seg label:hover span{background:var(--surface)}
.seg input:checked+span{background:var(--emerald-tint);border-color:var(--emerald);color:var(--emerald-strong);font-weight:700}
.seg input:focus-visible+span{outline:2px solid var(--emerald);outline-offset:2px}
.hint{font-size:14px;line-height:1.6;color:var(--muted);margin:8px 0 0}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px;font-size:14px;font-weight:500}
.row input[type=number]{width:84px;height:44px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--r-ctl);background:var(--bg);color:var(--ink);font:inherit;font-weight:400}
.row input[type=number]:focus{outline:none;border-color:var(--emerald);box-shadow:var(--ring)}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:15px;line-height:1.6}
.check input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--emerald)}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:24px;padding:10px 20px;border:1px solid transparent;border-radius:var(--r-ctl);
  background:var(--emerald);color:var(--on-emerald);font:700 16px/1.2 var(--font);cursor:pointer}
.btn:hover{background:var(--emerald-strong)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled:hover{background:var(--emerald)}
.btn.secondary{background:transparent;color:var(--ink);border-color:var(--border-strong);margin-top:12px}
.btn.secondary:hover{background:var(--surface)}
.status{margin-top:12px;font-size:14px;min-height:1.6em}
.status.err{color:var(--error)}
.preview-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.preview-head h2{font-size:24px;line-height:1.4;margin:0}
@media (max-width:640px){.preview-head h2{font-size:20px}}
.preview-head small{color:var(--muted);font-size:14px}
.sheets{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.sheet{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:12px;box-shadow:var(--shadow-card)}
.sheet h3{margin:0 0 8px;font-size:14px;line-height:1.4;font-weight:500;color:var(--muted)}
.sheet h3 em{font-style:normal;font-weight:700;color:var(--ink)}
.side{margin-bottom:12px}
.side:last-child{margin-bottom:0}
.side-label{font-size:13px;color:var(--muted);margin-bottom:4px}
.spread{display:flex;direction:ltr;border:1px solid var(--border-strong);border-radius:var(--r-tag);overflow:hidden;position:relative;background:var(--paper)}
.spread::after{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1.5px dashed var(--emerald)}
.pg{flex:1;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;background:var(--paper);color:var(--ink)}
.pg.blank{background:var(--surface);color:var(--muted);font-size:13px;font-weight:400}
.pg.flip{transform:rotate(180deg)}
.sig-break{grid-column:1/-1;font-size:14px;color:var(--emerald);font-weight:700;border-bottom:1px solid var(--border);padding-bottom:4px;margin-top:8px}
.guide{margin-top:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:16px 24px;max-width:75ch;box-shadow:var(--shadow-card)}
.guide h2{font-size:20px;line-height:1.4;margin:0 0 8px}
.guide ol{margin:0;padding-inline-start:22px}
.guide li{margin:4px 0}
.example-note{color:var(--muted);font-size:14px;margin:0 0 12px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}