/* Shared app shell — matches the 1P Metrix / AdIQ design system exactly. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* paints scrollbars, selects and checkboxes dark to match the app */
  color-scheme:dark;
  --bg:#0a0e1a; --panel:#111726; --panel2:#0d1320; --border:#1e2740;
  --text:#e6ebf5; --muted:#8b97b3; --accent:#4f7cff; --accent2:#22d3a6;
  --good:#22d3a6; --bad:#ff5d7a; --warn:#ffb454; --chip:#1a2238;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
body { margin:0; background:radial-gradient(1200px 600px at 80% -10%,#16203a 0,transparent 60%),var(--bg);
       color:var(--text); font:14px/1.5 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; }

.app { display:flex; min-height:100vh; }
.sidebar { width:210px; flex-shrink:0; border-right:1px solid var(--border); padding:16px 10px; position:sticky; top:0;
           height:100vh; overflow-y:auto; background:var(--panel2); display:flex; flex-direction:column; }
.sidebar .brand { display:flex; align-items:center; gap:11px; padding:2px 6px 4px; margin-bottom:10px; }
.sidebar .brand img { width:38px; height:38px; border-radius:10px; object-fit:contain; box-shadow:var(--shadow); }
.sidebar .brand h1 { font-size:15px; margin:0; font-weight:800; letter-spacing:-.2px; }
.sidebar .brand p { margin:0; color:var(--muted); font-size:11px; }
.navgroup-label { font-size:10px; letter-spacing:1px; color:var(--muted); text-transform:uppercase; margin:14px 8px 6px; font-weight:700; }
.navitem { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:transparent; border:1px solid transparent;
           border-radius:9px; padding:9px 11px; color:var(--muted); font-size:13px; font-weight:600; text-decoration:none; cursor:pointer; transition:.15s; }
.navitem:hover { color:var(--text); background:var(--chip); }
.navitem.active { background:linear-gradient(135deg,var(--accent),#3b63e6); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(79,124,255,.3); }
.navitem svg { width:17px; height:17px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.navspacer { margin-top:auto; }
.navstat { margin:8px 6px 2px; font-size:11px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.navstat .dot { width:8px; height:8px; border-radius:50%; background:var(--muted); flex-shrink:0; }
.navstat .dot.on { background:var(--good); box-shadow:0 0 0 4px rgba(34,211,166,.15); }

.main { flex:1; min-width:0; padding:22px 26px 80px; }
/* No reading-width cap: every tool uses the whole window. Anything that is genuinely
   a column of prose caps itself with .prose rather than making the whole page narrow. */
.prose { max-width: 78ch; }
/* the one-click path from any page to its explanation */
.page-head .whatis { margin-left: auto; align-self: center; font-size: 12px; color: var(--muted);
  text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
  white-space: nowrap; }
.page-head .whatis:hover { color: var(--accent); border-color: var(--accent); }
.page-head { display:flex; align-items:flex-end; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.page-head h2 { font-size:20px; font-weight:800; margin:0; letter-spacing:-.3px; }
.page-head .sub { color:var(--muted); font-size:12.5px; padding-bottom:2px; }
.page-head .head-actions { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.navitem .lbl-s { display:none; }

/* Phone-only chrome, off until the phone tier claims it. */
#appbar, #navScrim { display:none; }

/* ---------- the rail ---------- */
/* The full sidebar costs a fifth of a tablet's width, so it folds down to a rail
   with the word under the icon and hands that width back to the page. Tablets get
   it automatically; on a desktop it is the collapse button's doing. shell.js adds
   the class, so one set of rules covers both. */
.sidebar.rail { width:78px; padding:14px 7px; align-items:center; }
.sidebar.rail .brand { justify-content:center; gap:0; padding:0 0 2px; margin-bottom:4px; }
.sidebar.rail .brand img { width:34px; height:34px; }
.sidebar.rail .brandtext { display:none; }
.sidebar.rail .navgroup-label { margin:13px 0 5px; text-align:center; font-size:9px; letter-spacing:.5px; }
.sidebar.rail .navitem { flex-direction:column; gap:5px; padding:9px 3px; text-align:center; font-size:10px;
           line-height:1.1; letter-spacing:-.1px; }
.sidebar.rail .navitem svg { width:20px; height:20px; }
.sidebar.rail .navitem .lbl { display:none; }
.sidebar.rail .navitem .lbl-s { display:block; }
.sidebar.rail .navstat { justify-content:center; margin:8px 0 2px; }
.sidebar.rail .navstat .txt { display:none; }
.sidebar.rail #navProgress .pgtext { display:none; }
body.rail .main { padding:20px 20px 64px; }
@media (min-width:761px) and (max-width:1100px){ .main { padding:20px 20px 64px; } }

/* collapse control, desktop only: a tablet is already a rail and a phone is a drawer */
#railToggle { display:none; align-items:center; justify-content:center; gap:7px; width:100%;
  background:transparent; border:1px solid transparent; border-radius:9px; padding:7px 9px; margin-top:6px;
  color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; transition:.15s; }
#railToggle:hover { color:var(--text); background:var(--chip); }
#railToggle svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:1101px){ #railToggle { display:flex; } }
.sidebar.rail #railToggle .rl { display:none; }

/* ---------- phone: top bar + slide-in drawer ---------- */
@media(max-width:760px){
  .app { display:block; }

  #appbar { display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:60;
            height:calc(54px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 12px 0;
            background:rgba(10,14,26,.86); backdrop-filter:saturate(150%) blur(12px);
            border-bottom:1px solid var(--border); }
  #navToggle { display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0;
               margin-left:-4px; background:transparent; border:none; color:var(--text); flex-shrink:0; }
  #navToggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
  #appbar .abmark { width:26px; height:26px; border-radius:7px; object-fit:contain; }
  #appbar .abtitle { font-size:15px; font-weight:700; letter-spacing:-.2px; white-space:nowrap;
                     overflow:hidden; text-overflow:ellipsis; }
  #appbar .abdot { width:8px; height:8px; border-radius:50%; background:var(--muted); margin-left:auto; flex-shrink:0; }
  #appbar .abdot.on { background:var(--good); box-shadow:0 0 0 4px rgba(34,211,166,.15); }

  .sidebar { position:fixed; top:0; bottom:0; left:0; width:266px; max-width:82vw; height:100%;
             z-index:80; padding:calc(14px + env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom));
             border-right:1px solid var(--border); box-shadow:0 0 40px rgba(0,0,0,.5);
             transform:translateX(-100%); visibility:hidden;
             transition:transform .22s cubic-bezier(.4,0,.2,1), visibility .22s; }
  body.nav-open .sidebar { transform:none; visibility:visible; }
  body.nav-open { overflow:hidden; }

  #navScrim { display:block; position:fixed; inset:0; z-index:70; background:rgba(3,6,14,.6);
              opacity:0; pointer-events:none; transition:opacity .22s; }
  body.nav-open #navScrim { opacity:1; pointer-events:auto; }

  /* Thumbs, not cursors. */
  .navitem { padding:12px 12px; font-size:14px; gap:12px; }
  .navitem svg { width:19px; height:19px; }
  .navgroup-label { margin:16px 8px 6px; }

  .main { padding:16px 14px calc(48px + env(safe-area-inset-bottom)); max-width:100%; }
  /* The page name already sits in the bar above. */
  .page-head { margin-bottom:14px; }
  .page-head h2 { display:none; }
  .page-head .sub { font-size:13px; padding-bottom:0; }
  .page-head .head-actions { margin-left:0; width:100%; }

  .panel { padding:15px; border-radius:14px; }
  .status { top:calc(54px + env(safe-area-inset-top) + 8px); }

  /* iOS zooms the whole page in when a field under 16px takes focus. Pages set
     their own field styles after this sheet, so this one has to hold its ground. */
  select, input[type=text], input[type=number], input[type=date], input[type=password],
  input[type=url], input[type=email], input[type=search], textarea { font-size:16px !important; }
  button { padding:11px 15px; }

  /* Wide tables scroll inside their panel instead of stretching the page. */
  .panel table { display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
}

/* Shared components (Metrix language) */
.panel { background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--border); border-radius:16px;
         padding:18px; margin-bottom:14px; position:relative; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.22); }
.panel::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--cc,var(--accent)),transparent 92%); }
.panel > * { position:relative; z-index:1; }
.panel h3 { font-size:12px; text-transform:uppercase; letter-spacing:.7px; color:#9aa6c0; margin:0 0 12px; font-weight:700; }
.main .panel:nth-of-type(5n+1){--cc:#4f8cff}.main .panel:nth-of-type(5n+2){--cc:#22d3a6}.main .panel:nth-of-type(5n+3){--cc:#ffb454}.main .panel:nth-of-type(5n+4){--cc:#a78bfa}.main .panel:nth-of-type(5n+5){--cc:#ff5d7a}

select, input, textarea, button { font:inherit; color:var(--text); }
select, input[type=text], input[type=number], input[type=date], textarea {
  background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:9px 12px; outline:none; }
select:focus, input:focus, textarea:focus { border-color:var(--accent); }
button { cursor:pointer; border-radius:10px; border:1px solid var(--border); background:var(--panel); padding:9px 14px; font-weight:600; transition:.15s; }
button:hover { border-color:var(--accent); }
button:disabled { opacity:.45; cursor:default; }
.btn-primary { background:linear-gradient(135deg,var(--accent),#3b63e6); border:none; color:#fff; font-weight:600; box-shadow:0 4px 14px rgba(79,124,255,.28); }
.btn-primary:hover { filter:brightness(1.08); }
.btn-ghost { background:#1b2440; color:#cdd7ee; border:1px solid #35426e; font-size:12.5px; padding:7px 12px; font-weight:600; transition:.13s; }
.btn-ghost:hover { color:#fff; background:#24305a; border-color:var(--accent); }
.btn-ghost:active { transform:translateY(1px); }

.status { display:none; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--border); border-radius:10px;
          padding:10px 14px; margin-bottom:14px; font-size:13px; color:var(--muted); position:sticky; top:10px; z-index:30; }
.status.show { display:flex; }
.status.error { border-color:var(--bad); color:var(--bad); }
.spinner { width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }

.banner { background:linear-gradient(180deg,rgba(79,124,255,.08),rgba(79,124,255,.03)); border:1px solid rgba(79,124,255,.3);
          border-radius:12px; padding:12px 16px; font-size:13px; color:var(--muted); margin-bottom:16px; }
.banner b { color:var(--text); }
.pill { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); background:var(--chip);
        border:1px solid var(--border); padding:6px 12px; border-radius:999px; }
.pill.good { color:var(--good); border-color:rgba(34,211,166,.4); background:rgba(34,211,166,.1); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); }
th { color:#9aa6c0; font-size:11px; text-transform:uppercase; letter-spacing:.5px; background:rgba(255,255,255,.04); }

/* ---------- work in progress, visible from any page ---------- */
/* Generation runs in the tab that started it. This is the reminder that a run is
   part done, so leaving the page does not mean losing track of it. */
#navProgress { display:none; margin:8px 4px 2px; }
#navProgress.on { display:block; }
#navProgress a { display:block; text-decoration:none; color:inherit; border:1px solid var(--border);
  background:var(--chip); border-radius:10px; padding:8px 9px; transition:.15s; }
#navProgress a:hover { border-color:var(--accent); }
#navProgress .pgtop { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted);
  font-weight:700; letter-spacing:.03em; margin-bottom:6px; }
#navProgress .pgcount { color:var(--text); }
#navProgress .pgtrack { height:4px; background:var(--panel); border-radius:3px; overflow:hidden; }
#navProgress .pgfill { height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .3s; }
#navProgress .pgdot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0;
  animation:pgpulse 1.4s ease-in-out infinite; }
#navProgress.idle .pgdot { background:var(--warn); animation:none; }
@keyframes pgpulse { 50% { opacity:.25; } }
.sidebar.rail #navProgress a { padding:7px 4px; text-align:center; }
.sidebar.rail #navProgress .pgtop { justify-content:center; font-size:10px; }
@media(max-width:760px){
  #appbar .abwork { display:none; font-size:11px; color:var(--accent); font-weight:700; white-space:nowrap; }
  #appbar .abwork.on { display:inline; }
}