/* ── Benoz.AI take-home · shared styles ─────────────────────────────── */
:root{
  --bg:#f7f7f5; --panel:#ffffff; --ink:#1a1a1a; --muted:#5c5c5c; --line:#e4e4e0;
  --accent:#2f5d50; --code-bg:#f0f0ec; --code-ink:#333;
  --crit:#b3261e; --crit-bg:#fbeceb; --ser:#9a6a00; --ser-bg:#fbf3e2;
  --min:#3a6ea5; --min-bg:#eaf1f8; --ok:#2f7d55; --ok-bg:#e9f4ee;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#161715; --panel:#1e201d; --ink:#e9e9e4; --muted:#a3a39c; --line:#33352f;
    --accent:#7db9a6; --code-bg:#24261f; --code-ink:#d6d6cf;
    --crit:#f2837a; --crit-bg:#3a1f1d; --ser:#e0b25c; --ser-bg:#332a17;
    --min:#8fbde8; --min-bg:#1c2833; --ok:#7fd0a0; --ok-bg:#18271f;
  }
}
:root[data-theme="light"]{
  --bg:#f7f7f5; --panel:#ffffff; --ink:#1a1a1a; --muted:#5c5c5c; --line:#e4e4e0;
  --accent:#2f5d50; --code-bg:#f0f0ec; --code-ink:#333;
  --crit:#b3261e; --crit-bg:#fbeceb; --ser:#9a6a00; --ser-bg:#fbf3e2;
  --min:#3a6ea5; --min-bg:#eaf1f8; --ok:#2f7d55; --ok-bg:#e9f4ee;
}
:root[data-theme="dark"]{
  --bg:#161715; --panel:#1e201d; --ink:#e9e9e4; --muted:#a3a39c; --line:#33352f;
  --accent:#7db9a6; --code-bg:#24261f; --code-ink:#d6d6cf;
  --crit:#f2837a; --crit-bg:#3a1f1d; --ser:#e0b25c; --ser-bg:#332a17;
  --min:#8fbde8; --min-bg:#1c2833; --ok:#7fd0a0; --ok-bg:#18271f;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.layout{display:flex; align-items:flex-start; max-width:1180px; margin:0 auto}
.sidebar{
  flex:0 0 256px; position:sticky; top:0; align-self:flex-start;
  height:100vh; overflow-y:auto; padding:1.7rem 1.15rem;
  border-right:1px solid var(--line); background:var(--bg);
}
.content{flex:1 1 auto; min-width:0; max-width:820px; margin:0 auto; padding:3.25rem 1.75rem 5rem}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.sidebar .brand{
  display:block; text-decoration:none; color:var(--ink); font-weight:700;
  line-height:1.2; margin:0 .3rem 1.4rem; letter-spacing:-.01em;
}
.sidebar .brand span{display:block; font-weight:400; font-size:.82rem; color:var(--muted)}
.parts{display:flex; flex-direction:column; gap:.15rem}
.parts a{
  display:block; padding:.45rem .65rem; border-radius:8px; text-decoration:none;
  color:var(--muted); font-size:.92rem; transition:background .12s,color .12s;
}
.parts a:hover{background:var(--code-bg); color:var(--ink)}
.parts a.active{color:var(--accent); font-weight:600; background:color-mix(in srgb, var(--accent) 12%, transparent)}
.otp{margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--line)}
.otp .otp-title{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:0 0 .5rem .65rem}
.otp a{
  display:block; padding:.28rem .65rem; margin-left:.15rem; font-size:.85rem;
  color:var(--muted); text-decoration:none; border-left:2px solid var(--line);
  border-radius:0 6px 6px 0; line-height:1.35;
}
.otp a:hover{color:var(--ink); border-left-color:var(--muted)}
.otp a.current{color:var(--accent); border-left-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent)}

/* mobile off-canvas */
.menu-toggle{
  display:none; position:fixed; top:.85rem; left:.85rem; z-index:60;
  background:var(--panel); color:var(--ink); border:1px solid var(--line);
  border-radius:9px; width:42px; height:42px; font-size:1.2rem; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.scrim{display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40}
@media (max-width:900px){
  .sidebar{
    position:fixed; left:0; top:0; z-index:50; width:82%; max-width:300px;
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:2px 0 20px rgba(0,0,0,.15);
  }
  .sidebar.open{transform:none}
  .scrim.show{display:block}
  .menu-toggle{display:flex; align-items:center; justify-content:center}
  .content{padding:4.5rem 1.25rem 4rem; max-width:none}
}

/* ── Typography & shared blocks ─────────────────────────────────────── */
.masthead{border-bottom:1px solid var(--line); padding-bottom:1.75rem; margin-bottom:2.25rem}
.eyebrow{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 .5rem}
h1{font-size:1.95rem; line-height:1.2; margin:0 0 .6rem; letter-spacing:-.015em}
.lede{color:var(--muted); margin:.35rem 0 0; max-width:62ch}
.meta{font-size:.85rem; color:var(--muted); margin-top:1.1rem}
h2{font-size:1.3rem; margin:2.75rem 0 .5rem; letter-spacing:-.01em; padding-bottom:.4rem; border-bottom:1px solid var(--line); scroll-margin-top:1.5rem}
h2 .count{font-size:.8rem; color:var(--muted); font-weight:400; letter-spacing:0}
h3{font-size:1.05rem; margin:1.6rem 0 .3rem}
p{margin:.7rem 0}
a{color:var(--accent)}
code{background:var(--code-bg); color:var(--code-ink); padding:.12em .4em; border-radius:4px; font-size:.86em; font-family:"SF Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace}
pre{background:var(--code-bg); color:var(--code-ink); padding:.9rem 1rem; border-radius:8px; overflow-x:auto; font-size:.82rem; line-height:1.5; border:1px solid var(--line)}
pre code{background:none; padding:0}

/* Part 1 — findings */
.finding{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.25rem 1.4rem; margin:1.1rem 0}
.finding h3{margin:.1rem 0 .6rem; font-size:1.08rem; display:flex; align-items:flex-start; gap:.6rem; flex-wrap:wrap}
.fid{color:var(--muted); font-variant-numeric:tabular-nums; font-weight:600}
.badge{font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:.18em .6em; border-radius:999px; white-space:nowrap; align-self:center}
.b-crit{color:var(--crit); background:var(--crit-bg)}
.b-ser{color:var(--ser); background:var(--ser-bg)}
.b-min{color:var(--min); background:var(--min-bg)}
.b-ok{color:var(--ok); background:var(--ok-bg)}
.row{margin:.55rem 0}
.row .k{font-weight:600; font-size:.82rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.1rem}
ul.tight{margin:.5rem 0; padding-left:1.2rem}
ul.tight li{margin:.3rem 0}
.callout{background:var(--ok-bg); border:1px solid var(--line); border-left:3px solid var(--ok); border-radius:8px; padding:1rem 1.2rem; margin:1.1rem 0}
.first{background:var(--panel); border:1px solid var(--accent); border-radius:12px; padding:1.4rem 1.5rem; margin:1.25rem 0}

/* Part 2/3/4 — cards, decisions, metrics */
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.5rem 1.7rem; margin:1.4rem 0}
.card h2{margin-top:0}
.decision{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.6rem 1.7rem; margin:1.6rem 0}
.decision h2{margin-top:0}
.dnum{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 .3rem}
.choice{display:inline-block; background:var(--ok-bg); color:var(--ok); border:1px solid color-mix(in srgb, var(--ok) 35%, transparent); font-weight:600; font-size:.9rem; padding:.4rem .9rem; border-radius:999px; margin:.6rem 0 .2rem}
.subhead{font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:1.2rem 0 .1rem}
.giveup{background:var(--crit-bg); border:1px solid var(--line); border-left:3px solid var(--crit); border-radius:8px; padding:.9rem 1.1rem; margin:1rem 0}
.giveup .subhead{color:var(--crit)}
.decision h3{margin:.1rem 0 .4rem; font-size:1rem; color:var(--accent)}
.repo{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; background:var(--panel); border:1px solid var(--accent); border-radius:12px; padding:1.2rem 1.4rem; margin:1.5rem 0}
.repo .btn{display:inline-block; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; padding:.55rem 1.1rem; border-radius:8px; font-size:.92rem}
@media (prefers-color-scheme: dark){ .repo .btn{color:#12241d} }
.repo .u{font-family:"SF Mono",SFMono-Regular,Consolas,monospace; font-size:.85rem; color:var(--muted); word-break:break-all}
.metrics{display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0}
.metric{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:.7rem 1rem; flex:1 1 auto; min-width:150px}
.metric .n{font-size:1.35rem; font-weight:700; color:var(--accent); line-height:1}
.metric .l{font-size:.78rem; color:var(--muted); margin-top:.25rem}
table{border-collapse:collapse; width:100%; font-size:.9rem; margin:.6rem 0}
th,td{text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted)}
code.key{color:var(--accent)}
.placeholder{background:var(--ser-bg); border:1px dashed var(--ser); border-radius:12px; padding:1.4rem 1.6rem; margin:1.4rem 0}
.placeholder .tag{display:inline-block; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--ser); background:color-mix(in srgb, var(--ser) 15%, transparent); padding:.2em .7em; border-radius:999px; margin-bottom:.6rem}
.placeholder h2{color:var(--ink); border:none; padding:0; margin:.2rem 0 .4rem}
.chip{font-size:.82rem; background:var(--code-bg); border:1px solid var(--line); border-radius:999px; padding:.25rem .8rem; color:var(--ink)}
.toolrow{display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 0}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer{margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.85rem; color:var(--muted)}
.identity{margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:.6rem 1.1rem; align-items:center}
.identity .who{font-weight:600; color:var(--ink); font-size:.92rem}
.identity .sep{color:var(--line)}
.identity a{color:var(--accent); text-decoration:none; font-size:.9rem}
.identity a:hover{text-decoration:underline}