/* Zafrika brand tokens — taken from zafrika.com */
:root{
  --navy-950:#00070f;
  --navy-850:#001028;   /* primary dark / site theme colour */
  --navy-800:#04162f;
  --azure-500:#00a5ff;  /* primary accent, the logo mark */
  --azure-600:#0084d6;
  --azure-700:#0067b8;  /* accent for text on light surfaces */
  --azure-400:#29b0ff;
  --azure-300:#66c6ff;
  --azure-50:#eaf7ff;
  --sand-100:#f4f5f7;

  --ink:var(--navy-850);
  --muted:#5b6675;
  --line:#e2e6ec;
  --panel:#fff;

  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Plus Jakarta Sans","Inter",ui-sans-serif,system-ui,sans-serif;
  --radius:.5rem;
  --radius-lg:.75rem;
  --shadow-card:0 2px 4px #0010280d, 0 24px 48px -20px #00102838;
}
*{box-sizing:border-box}
/* An author `display` rule beats the UA sheet's [hidden] rule, so make it stick. */
[hidden]{display:none !important}
html,body{height:100%}
@supports (height:100dvh){ html,body{height:100dvh} }
body{
  margin:0; background:var(--sand-100); color:var(--ink);
  font:400 14px/1.5 var(--font-sans);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}

/* ---------------------------------------------------------------- top bar */
.bar{
  display:flex; align-items:center; gap:10px; padding:8px 14px;
  background:var(--navy-850); color:#fff; flex:0 0 auto;
  border-bottom:1px solid var(--navy-800);
}
.brand{display:flex; align-items:center; gap:9px}
.brand .mark{width:24px; height:auto; display:block}
.brandtext{display:flex; flex-direction:column; line-height:1.1}
.brandtext b{font:700 15px/1.15 var(--font-display); letter-spacing:-.02em}
.brandtext small{
  font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--azure-300); margin-top:2px;
}
.bar .sep{width:1px; height:26px; background:rgba(255,255,255,.14)}
.grow{flex:1}
.zoombox{display:flex; align-items:center; gap:2px}
.zoom{min-width:46px; text-align:center; color:rgba(255,255,255,.65); font-variant-numeric:tabular-nums; font-size:12px}
.status{
  color:rgba(255,255,255,.6); font-size:12px; max-width:260px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* buttons — the bar is dark, the sidebar is light, so .btn adapts to context */
.btn{
  appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:6px 12px; border-radius:var(--radius); cursor:pointer;
  font:500 13px/1.2 var(--font-sans); transition:background .15s, border-color .15s, color .15s;
}
.btn:hover{background:var(--sand-100)}
.btn:disabled{opacity:.4; cursor:default}
.btn.primary{background:var(--azure-500); border-color:var(--azure-500); color:var(--navy-850); font-weight:600}
.btn.primary:hover:not(:disabled){background:var(--azure-400); border-color:var(--azure-400)}
.btn.big{padding:11px 22px; font-size:15px; border-radius:var(--radius-lg)}
.btn.wide{width:100%}
.btn.icon{padding:6px 10px; font-size:15px; line-height:1}

.bar .btn{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:#fff}
.bar .btn:hover:not(:disabled){background:rgba(255,255,255,.14)}
.bar .btn.primary{background:var(--azure-500); border-color:var(--azure-500); color:var(--navy-850)}
.bar .btn.primary:hover:not(:disabled){background:var(--azure-400); border-color:var(--azure-400)}
.bar .btn:disabled{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); color:rgba(255,255,255,.45)}

.tools{display:flex; gap:4px}
.narrow-only{display:none}
.lbl-tight{display:none}
.break{display:none}
.sidehead{display:none}
.backdrop{display:none}
.btn.icon svg{width:17px; height:17px; display:block}
.bar .tool.on{
  background:var(--azure-500); border-color:var(--azure-500);
  color:var(--navy-850); font-weight:600;
}

/* ----------------------------------------------------------------- layout */
.main{flex:1; display:flex; min-height:0}
.side{
  width:256px; flex:0 0 auto; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.sidescroll{flex:1; min-height:0; overflow-y:auto; padding:16px}
.side section{margin-bottom:24px}
.side h3{
  font:600 10.5px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); margin:0 0 10px;
}
.hint{color:var(--muted); font-size:12px; margin:10px 0 0; line-height:1.45}
.check{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); margin-top:10px}
.check input{accent-color:var(--azure-600)}
.row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px}
.row label{font-size:12px; color:var(--muted)}
.row input,.row select{
  border:1px solid var(--line); border-radius:var(--radius); padding:5px 7px;
  font:inherit; font-size:13px; background:#fff; color:var(--ink);
}
.row input:focus,.row select:focus{outline:2px solid var(--azure-300); outline-offset:-1px; border-color:var(--azure-500)}
.row input[type=number]{width:72px}
.row input[type=color]{width:46px; height:28px; padding:2px}
.row input[type=checkbox]{accent-color:var(--azure-600); width:16px; height:16px}
.row select{width:124px}

.siglist{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px}
.sig{
  position:relative; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer;
  background:repeating-conic-gradient(var(--sand-100) 0 25%, #fff 0 50%) 0 0/12px 12px;
  padding:6px; display:flex; align-items:center; justify-content:center; min-height:50px;
}
.sig:hover{border-color:var(--azure-300)}
.sig img{max-width:100%; max-height:44px; display:block}
.sig.on{border-color:var(--azure-500); box-shadow:0 0 0 3px var(--azure-50)}
.sig .x{
  position:absolute; top:-7px; right:-7px; width:19px; height:19px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--muted); font-size:12px; line-height:1;
  cursor:pointer; display:none; padding:0;
}
.sig:hover .x{display:block}
.sig .x:hover{border-color:var(--azure-500); color:var(--azure-700)}

/* ------------------------------------------------------------ powered by */
.poweredby{
  flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:12px 16px;
  border-top:1px solid var(--line); background:var(--navy-850);
  text-decoration:none; color:#fff;
}
.poweredby:hover{background:var(--navy-800)}
.poweredby img{width:20px; height:auto; flex:0 0 auto}
.poweredby span{display:block; font-size:11.5px; line-height:1.35; color:rgba(255,255,255,.72)}
.poweredby b{font:700 12.5px/1.35 var(--font-display); color:#fff}
.poweredby em{
  display:block; font-style:normal; font-size:9.5px; line-height:1.3;
  letter-spacing:.01em; color:var(--azure-300); margin-top:1px;
}

/* ----------------------------------------------------------------- viewer */
.viewer{flex:1; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:26px; display:flex; flex-direction:column; align-items:center; gap:24px}
.empty{margin:auto; text-align:center; color:var(--muted); padding:20px}
.empty .emptymark{width:52px; height:auto; margin-bottom:18px; opacity:.95}
.empty h2{color:var(--ink); margin:0 0 10px; font:700 22px/1.25 var(--font-display); letter-spacing:-.02em}
.empty p{margin:0 0 20px; line-height:1.6}
.empty .kicker{margin:18px 0 0; font-size:12px; color:var(--muted)}
.err{
  margin:14px auto 0; max-width:380px; padding:9px 12px; border-radius:var(--radius);
  background:#fff1f2; border:1px solid #fecdd3; color:#9f1239; font-size:12.5px; line-height:1.5;
}

/* --------------------------------------------------- password-protected */
.lock{margin:auto; text-align:center; color:var(--muted); padding:20px; max-width:440px}
.lockicon{
  width:52px; height:52px; margin:0 auto 18px; border-radius:14px;
  background:var(--navy-850); color:var(--azure-400);
  display:flex; align-items:center; justify-content:center;
}
.lockicon svg{width:27px; height:27px}
.lock h2{color:var(--ink); margin:0 0 10px; font:700 21px/1.25 var(--font-display); letter-spacing:-.02em}
.lock p{margin:0 0 20px; line-height:1.6}
.lock b{color:var(--ink); font-weight:600}
.lock form{display:flex; gap:8px; justify-content:center; margin-bottom:4px}
.lock input{
  flex:0 1 240px; border:1px solid var(--line); border-radius:var(--radius);
  padding:9px 12px; font:inherit; font-size:14px; background:#fff; color:var(--ink);
}
.lock input:focus{outline:2px solid var(--azure-300); outline-offset:-1px; border-color:var(--azure-500)}
.lock .kicker{margin:20px 0 0; font-size:11.5px; line-height:1.6; color:var(--muted)}

/* badge for documents that must be flattened on save */
.chip{
  display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:600;
  letter-spacing:.01em; white-space:nowrap; cursor:help;
  background:rgba(0,165,255,.14); color:var(--azure-300); border:1px solid rgba(0,165,255,.3);
}
.empty a{color:var(--azure-700); font-weight:600; text-decoration:none}
.empty a:hover{text-decoration:underline}

.pagewrap{display:flex; flex-direction:column; align-items:center; gap:7px}
.pagebar{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11.5px}
.pagebar button{
  border:1px solid var(--line); background:#fff; border-radius:6px; cursor:pointer;
  width:25px; height:25px; line-height:1; padding:0; color:var(--ink); font-size:12px;
}
.pagebar button:hover:not(:disabled){background:var(--azure-50); border-color:var(--azure-300); color:var(--azure-700)}
.pagebar button:disabled{opacity:.35; cursor:default}
.page{position:relative; background:#fff; box-shadow:var(--shadow-card)}
.page canvas{display:block}
.layer{position:absolute; inset:0; overflow:hidden}
.layer.select{cursor:default}
.layer.text{cursor:text}
.layer.draw,.layer.rect,.layer.stamp{cursor:crosshair}
.layer.text,.layer.draw,.layer.rect,.layer.stamp{touch-action:none}

/* --------------------------------------------------------- overlay items */
.item{position:absolute; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none}
.item.movable,.grip{touch-action:none}
.item.movable{cursor:move}
.item.sel{outline:1.5px solid var(--azure-500); outline-offset:1px}
.item img{width:100%; height:100%; display:block; pointer-events:none}
.item svg{width:100%; height:100%; display:block; overflow:visible; pointer-events:none}
.item.text{white-space:pre; line-height:1.2; padding:0; min-width:6px}
.item.text[contenteditable]{outline:1.5px solid var(--azure-500); cursor:text}
.grip{
  position:absolute; right:-5px; bottom:-5px; width:11px; height:11px; border-radius:2px;
  background:#fff; border:1.5px solid var(--azure-500); cursor:nwse-resize;
}
.marquee{position:absolute; border:1px dashed var(--azure-500); background:rgba(0,165,255,.1); pointer-events:none}

@media (max-width:820px){
  .side{width:210px}
  .status{display:none}
}


/* ==========================================================================
   Responsive — the sidebar becomes a bottom sheet and the toolbar wraps onto
   a second line. Below 900px there is not enough width for both a fixed
   sidebar and a legible page.
   ========================================================================== */
@media (max-width: 900px){
  .narrow-only{display:inline-flex; align-items:center; justify-content:center}
  .bar{flex-wrap:wrap; gap:6px 8px; padding:8px 10px}
  .bar .sep{display:none}
  .status{display:none}

  /* short labels so the top row does not wrap on a 375px phone */
  .lbl-wide{display:none}
  .lbl-tight{display:inline}

  .brand{order:1}
  #sideToggle{order:2}
  .grow{order:3}
  #openBtn{order:4}
  #saveBtn{order:5}
  .break{order:6; display:block; width:100%; height:0}
  .tools{order:7}
  .chip{order:8}

  /* zoom lifts out of the toolbar into a floating pill, saving a whole row */
  .zoombox{
    position:fixed; z-index:20; right:12px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    background:var(--navy-850); border-radius:999px; padding:5px 7px; gap:2px;
    box-shadow:0 8px 24px rgba(0,16,40,.34); border:1px solid rgba(255,255,255,.12);
  }
  .zoombox .btn{background:transparent; border-color:transparent}
  .zoom{color:rgba(255,255,255,.85)}

  .backdrop{
    display:block; position:fixed; inset:0; z-index:30;
    background:rgba(0,16,40,.4); backdrop-filter:blur(1px);
  }

  .sidehead{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 16px; border-bottom:1px solid var(--line); flex:0 0 auto;
    font:600 12px/1 var(--font-sans); text-transform:uppercase;
    letter-spacing:.08em; color:var(--muted);
  }
  .sidehead .btn{padding:4px 9px; font-size:16px; line-height:1}

  .side{
    position:fixed; z-index:40; left:0; right:0; bottom:0; top:auto; width:auto;
    max-height:min(76vh, 560px);
    border-right:0; border-top:1px solid var(--line);
    border-radius:16px 16px 0 0; box-shadow:0 -14px 44px rgba(0,16,40,.28);
    transform:translateY(101%); transition:transform .22s ease;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .side.open{transform:none}

  .viewer{padding:14px 10px 24px}
  .empty,.lock{padding:12px}
  .empty h2,.lock h2{font-size:19px}
  .empty p br{display:none}
}

@media (max-width: 560px){
  .brandtext b{font-size:14px}
  .brandtext small{font-size:8.5px; letter-spacing:.1em}
  .btn{padding:6px 10px; font-size:12.5px}
  .btn.big{padding:10px 18px; font-size:14px}
  /* the tool row scrolls sideways rather than wrapping into a ragged block */
  .tools{overflow-x:auto; max-width:100%; scrollbar-width:none; padding-bottom:1px}
  .tools::-webkit-scrollbar{display:none}
  .tools .btn{flex:0 0 auto}
  .lock form{flex-wrap:wrap}
  .lock input{flex:1 1 100%}
}

@media (max-width: 380px){
  .brandtext small{display:none}
  .zoom{min-width:38px; font-size:11px}
}

/* Touch: finger-sized handles, and 16px inputs so iOS does not zoom on focus. */
@media (pointer: coarse){
  .grip{width:19px; height:19px; right:-9px; bottom:-9px; border-width:2px}
  .pagebar button{width:32px; height:32px; font-size:14px}
  .sig .x{display:block; width:22px; height:22px; font-size:14px}
  .row input,.row select,.lock input{font-size:16px}
  .btn{padding:8px 13px}
}

/* Short, wide windows (a phone on its side): give the page more room. */
@media (max-height: 520px) and (max-width: 900px){
  .side{max-height:88vh}
  .viewer{padding:8px}
}