/* Captur.in design system
   Mono/technical. Paper, ink, hairline, one signal colour.
   Loaded by the home page and by every tool page. */

:root{
  --paper:#F7F7F4; --cell:#FFFFFF; --cell-hi:#F1F1EC;
  --ink:#14140F; --muted:#76766B; --line:#E0E0D8;
  --signal:#2F4BFF; --signal-soft:#EAEDFF;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wide:"Martian Mono","IBM Plex Mono",ui-monospace,monospace;
  --gutter:clamp(16px,4vw,40px);
}
html[data-theme="dark"]{
  --paper:#0F0F0E; --cell:#171716; --cell-hi:#1F1F1D;
  --ink:#EFEFE8; --muted:#7E7E74; --line:#282824;
  --signal:#6A80FF; --signal-soft:#1B1F3D;
}
@media (prefers-color-scheme:dark){
  html[data-theme="system"]{
    --paper:#0F0F0E; --cell:#171716; --cell-hi:#1F1F1D;
    --ink:#EFEFE8; --muted:#7E7E74; --line:#282824;
    --signal:#6A80FF; --signal-soft:#1B1F3D;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--mono); font-size:13px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.label{
  font-family:var(--wide); font-size:9px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.rule{border-bottom:1px solid var(--line)}

/* header */
header{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px var(--gutter); flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.mark{
  width:18px; height:18px; border:1.5px solid var(--ink);
  display:grid; place-items:center; flex:none;
}
.mark i{width:6px; height:6px; background:var(--signal); display:block}
.word{font-family:var(--wide); font-weight:700; font-size:15px; letter-spacing:-.02em}
.word span{color:var(--muted); font-weight:400}

/* theme switch */
.switch{display:flex; border:1px solid var(--line); background:var(--cell)}
.switch button{
  font-family:var(--wide); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  padding:7px 11px; background:none; border:0; border-right:1px solid var(--line);
  color:var(--muted); cursor:pointer;
}
.switch button:last-child{border-right:0}
.switch button[aria-pressed="true"]{color:var(--ink); background:var(--cell-hi)}
.switch button:focus-visible{outline:2px solid var(--signal); outline-offset:-2px}

/* intro */
.intro{padding:44px var(--gutter) 30px; max-width:660px}
.intro h1{
  font-family:var(--mono); font-weight:400; font-size:clamp(20px,3.2vw,29px);
  line-height:1.28; letter-spacing:-.025em;
}
.intro h1 b{font-weight:600}
.intro p{color:var(--muted); margin-top:14px; max-width:52ch}

/* live meter */
.meter{
  display:flex; gap:26px; flex-wrap:wrap; align-items:center;
  padding:11px var(--gutter); background:var(--cell);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.meter div{display:flex; gap:7px; align-items:baseline}
.meter b{font-weight:500; font-size:11px; color:var(--ink)}
.dot{width:5px; height:5px; background:var(--signal); flex:none; align-self:center}

/* filter */
.bar{display:flex; align-items:center; gap:12px; padding:14px var(--gutter) 20px}
.bar input{
  flex:1; min-width:0; font-family:var(--mono); font-size:13px; color:var(--ink);
  background:var(--cell); border:1px solid var(--line); padding:9px 12px;
}
.bar input::placeholder{color:var(--muted)}
.bar input:focus{outline:none; border-color:var(--signal)}
.key{
  border:1px solid var(--line); padding:3px 6px; font-family:var(--wide);
  font-size:9px; color:var(--muted); flex:none;
}

/* grid */
.grid{
  display:grid; gap:1px; background:var(--line);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  grid-template-columns:repeat(auto-fill,minmax(214px,1fr));
}
.tool{
  background:var(--cell); padding:14px 15px 13px; min-height:118px;
  display:flex; flex-direction:column; gap:6px;
  text-decoration:none; color:inherit;
}
.tool:hover,.tool:focus-visible{background:var(--cell-hi); outline:none}
.tool:focus-visible{box-shadow:inset 0 0 0 2px var(--signal)}
.tool .top{display:flex; justify-content:space-between; align-items:flex-start}
.code{
  font-family:var(--wide); font-size:9px; font-weight:600; letter-spacing:.1em;
  color:var(--muted); border:1px solid var(--line); padding:3px 5px;
}
.tool:hover .code{color:var(--signal); border-color:var(--signal); background:var(--signal-soft)}
.arrow{font-size:12px; color:var(--signal); opacity:0; transition:opacity .12s}
.tool:hover .arrow{opacity:1}
.tool h2{font-size:13px; font-weight:500; letter-spacing:-.01em; margin-top:auto}
.tool p{font-size:11px; color:var(--muted); line-height:1.45}
.tool.soon{background:var(--paper); cursor:default}
.tool.soon h2,.tool.soon p{color:var(--muted)}
.blank{background:var(--paper); min-height:118px}

.empty{padding:40px var(--gutter); color:var(--muted); display:none}
footer{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:20px var(--gutter) 34px;
}

@media (prefers-reduced-motion:no-preference){
  .tool{animation:in .34s ease both}
  @keyframes in{from{opacity:0; transform:translateY(5px)}to{opacity:1; transform:none}}
}

/* ── Tool pages ───────────────────────────────────────────────── */

.crumbs{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px var(--gutter); background:var(--cell);
  border-bottom:1px solid var(--line);
}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs .code{border-color:var(--line)}

.panes{
  display:grid; gap:1px; background:var(--line);
  border-bottom:1px solid var(--line);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.pane{background:var(--cell); padding:20px var(--gutter) 26px}
@media (max-width:820px){ .panes{grid-template-columns:minmax(0,1fr)} }

.panel-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; padding-bottom:12px; margin-bottom:18px;
  border-bottom:1px solid var(--line);
}

.field{margin-bottom:18px}
.field > .label{display:block; margin-bottom:7px}
.field input[type=text],
.field input[type=password]{
  width:100%; font-family:var(--mono); font-size:14px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); padding:10px 12px;
}
.field input:focus{outline:none; border-color:var(--signal)}
.field input::placeholder{color:var(--muted)}

.pw{position:relative}
.pw input{padding-right:64px}
.pw button{
  position:absolute; right:5px; top:5px; bottom:5px;
  font-family:var(--wide); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--cell); border:1px solid var(--line); color:var(--muted);
  padding:0 9px; cursor:pointer;
}
.pw button:hover{color:var(--ink); border-color:var(--ink)}

.seg{display:flex; border:1px solid var(--line); background:var(--paper)}
.seg button{
  flex:1; font-family:var(--mono); font-size:13px; color:var(--muted);
  background:none; border:0; border-right:1px solid var(--line);
  padding:10px 8px; cursor:pointer;
}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{color:var(--ink); background:var(--cell-hi)}
.seg button:focus-visible{outline:2px solid var(--signal); outline-offset:-2px}

.check{display:flex; align-items:center; gap:10px; margin-bottom:18px; font-size:13px}
.check input{width:15px; height:15px; accent-color:var(--signal); cursor:pointer}
.check label{cursor:pointer}

.note{
  font-size:12px; color:var(--signal); border-left:2px solid var(--signal);
  padding:8px 11px; background:var(--signal-soft); display:none; margin-bottom:18px;
}
.note.visible{display:block}

.raw{
  border:1px solid var(--line); background:var(--paper); padding:11px 12px;
  font-size:11px; line-height:1.6; color:var(--muted); word-break:break-all;
}

/* The QR itself stays black on white in both themes — inverted codes
   fail on a good number of scanners, so this surface never flips. */
.stage{
  background:#FFFFFF; border:1px solid var(--line);
  display:grid; place-items:center; padding:22px; min-height:280px;
}
.stage canvas,.stage svg{width:100%; max-width:300px; height:auto; display:block}
.stage.empty{background:var(--paper)}
.stage-empty{font-size:12px; color:var(--muted); text-align:center; max-width:26ch}
.caption{display:flex; justify-content:space-between; gap:10px; margin-top:9px}

.actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px}
.btn{
  font-family:var(--wide); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:12px 10px; border:1px solid var(--ink); background:var(--cell);
  color:var(--ink); cursor:pointer; text-align:center;
}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn:focus-visible{outline:2px solid var(--signal); outline-offset:2px}
.btn.primary{background:var(--ink); color:var(--paper)}
.btn.primary:hover{background:var(--signal); border-color:var(--signal); color:#FFFFFF}
.btn[data-busy="1"]{opacity:.55; pointer-events:none}

.steps{margin-top:26px; border-top:1px solid var(--line); padding-top:16px}
.steps li{display:flex; gap:11px; font-size:12px; color:var(--muted); margin-top:9px}
.steps span{
  font-family:var(--wide); font-size:9px; color:var(--ink);
  border:1px solid var(--line); padding:2px 5px; height:fit-content; flex:none;
}
.steps ol{list-style:none}

/* ── App frame ────────────────────────────────────────────────────
   The page sits in a contained window rather than running edge to
   edge. --canvas is the surface behind that window.
   Note: no overflow:hidden on body — it propagates to the viewport
   and kills page scrolling. Nothing sits in the rounded corners
   anyway, so there is nothing to clip. */

:root{ --canvas:#EFEFEA; }
html[data-theme="dark"]{ --canvas:#070707; }
@media (prefers-color-scheme:dark){
  html[data-theme="system"]{ --canvas:#070707; }
}

html{ background:var(--canvas); }
body{
  max-width:1180px;
  margin:28px auto 40px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
}

/* Edge to edge on phones — a frame wastes width there. */
@media (max-width:900px){
  body{ margin:0; border:0; border-radius:0; }
}