/* ============================================================
   dev shell — v1
   the shared design language for mianda.dev and every {app}.mianda.dev
   https://mianda.dev/shell/v1/shell.css

   this file is the single source of truth for tokens and .dv-* components.
   do not copy it into apps — link it.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* ---------- tokens: typography ---------- */
:root{
  --font-sans:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --fs-display:clamp(44px,6vw,76px);
  --fs-h1:32px; --fs-h2:22px; --fs-body:14px; --fs-small:12px; --fs-label:11px;
  --ls-label:.08em;
}

/* ---------- tokens: color ---------- */
:root{
  /* base */
  --white:#fcfcfc; --black:#0b0b0b;
  --green:oklch(0.88 0.24 136);
  --green-deep:oklch(0.55 0.15 140);
  --green-glow:oklch(0.88 0.24 136 / .28);
  /* semantic — light */
  --bg:#fafafa;
  --surface-1:#f1f1f1; --surface-2:#e8e8e8; --surface-3:#dedede;
  --text:#141414; --text-2:#5f5f5f; --text-3:#9b9b9b;
  --border:rgba(0,0,0,.10); --border-strong:rgba(0,0,0,.24);
  --accent:var(--green); --on-accent:#0c1207;
  --accent-text:var(--green-deep); --accent-glow:var(--green-glow);
  --hover:rgba(0,0,0,.05); --press:rgba(0,0,0,.10);
  --glass:rgba(250,250,250,.78);
  --shadow-1:0 1px 2px rgba(0,0,0,.06);
  --shadow-2:0 10px 30px rgba(0,0,0,.14);
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0b0b0b;
  --surface-1:#151515; --surface-2:#1e1e1e; --surface-3:#282828;
  --text:#f1f1f1; --text-2:#a3a3a3; --text-3:#6a6a6a;
  --border:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.3);
  --accent-text:var(--green);
  --hover:rgba(255,255,255,.06); --press:rgba(255,255,255,.12);
  --glass:rgba(11,11,11,.72);
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 10px 30px rgba(0,0,0,.55);
  color-scheme:dark;
}

/* ---------- tokens: shape ---------- */
:root{
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-full:999px;
  /* material-you asymmetric "cookie" radius */
  --r-asym:23px 23px 23px 6px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --h-control:40px; --h-input:44px; --h-bar:46px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--accent-text)}
::selection{background:var(--accent);color:var(--on-accent)}
h1,h2,h3,p{margin:0}
.dv-mono{font-family:var(--font-mono)}
.dv-label{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-2)}
.dv-placeholder{background:repeating-linear-gradient(45deg,var(--surface-2) 0 10px,var(--surface-1) 10px 20px);border:1px solid var(--border);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:var(--text-3);font-family:var(--font-mono);font-size:12px}
.dv-skip{position:absolute;left:-9999px}
.dv-skip:focus{left:14px;top:14px;z-index:60;padding:8px 14px;border-radius:var(--r-full);background:var(--accent);color:var(--on-accent);text-decoration:none}

/* ---------- buttons ---------- */
/* also used on <a> — kill the inherited link underline */
.dv-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-weight:500;border:1px solid transparent;border-radius:var(--r-full);cursor:pointer;white-space:nowrap;overflow:hidden;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.dv-btn::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .12s;pointer-events:none}
.dv-btn:hover::after{opacity:.08}
.dv-btn:active::after{opacity:.15}
.dv-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dv-btn:disabled{opacity:.35;pointer-events:none}
.dv-btn--sm{height:32px;padding:0 14px;font-size:13px}
.dv-btn--md{height:40px;padding:0 20px;font-size:14px}
.dv-btn--lg{height:48px;padding:0 26px;font-size:15px}
.dv-btn--primary{background:var(--accent);color:var(--on-accent)}
.dv-btn--tonal{background:var(--surface-2);color:var(--text)}
.dv-btn--outline{background:transparent;border-color:var(--border-strong);color:var(--text)}
.dv-btn--ghost{background:transparent;color:var(--text-2)}
.dv-btn--inverse{background:var(--text);color:var(--bg)}
.dv-iconbtn{width:40px;padding:0;flex:0 0 auto}
.dv-iconbtn.dv-btn--sm{width:32px}

/* ---------- fields ---------- */
.dv-field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-sans)}
.dv-field__label{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-2)}
.dv-input{height:var(--h-input);padding:0 14px;border-radius:var(--r-sm);background:var(--surface-1);border:1px solid var(--border);color:var(--text);font-family:var(--font-sans);font-size:14px;width:100%;transition:border-color .15s,box-shadow .15s}
.dv-input::placeholder{color:var(--text-3)}
.dv-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
textarea.dv-input{height:auto;padding:12px 14px;resize:vertical}
.dv-field__hint{font-family:var(--font-mono);font-size:11px;color:var(--text-3)}

/* ---------- switch ---------- */
.dv-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--text);position:relative}
.dv-switch input{position:absolute;opacity:0;width:0;height:0}
.dv-switch__track{width:46px;height:26px;border-radius:999px;background:var(--surface-3);border:1px solid var(--border);position:relative;transition:background .18s,border-color .18s;flex:0 0 auto}
.dv-switch__thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:999px;background:var(--bg);border:1px solid var(--border);transition:transform .18s,background .18s}
.dv-switch input:checked + .dv-switch__track{background:var(--accent);border-color:transparent}
.dv-switch input:checked + .dv-switch__track .dv-switch__thumb{transform:translateX(20px);background:var(--on-accent);border-color:transparent}
.dv-switch input:focus-visible + .dv-switch__track{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- card ---------- */
.dv-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;color:var(--text)}
.dv-card--interactive{cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.dv-card--interactive:hover{border-color:var(--border-strong);background:var(--surface-2)}
.dv-card--interactive:active{transform:scale(.99)}

/* ---------- badge + tag ---------- */
.dv-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:999px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.dv-badge--neutral{background:var(--surface-2);color:var(--text-2)}
.dv-badge--accent{background:var(--accent);color:var(--on-accent)}
.dv-badge--outline{border:1px solid var(--border-strong);color:var(--text-2);background:transparent}
.dv-badge__dot{width:6px;height:6px;border-radius:2px;background:var(--accent)}
.dv-tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-xs);background:var(--surface-2);color:var(--text-2);font-family:var(--font-mono);font-size:12px}

/* ---------- tabs ---------- */
.dv-tabs{display:inline-flex;padding:4px;gap:2px;background:var(--surface-1);border:1px solid var(--border);border-radius:999px}
.dv-tab{height:32px;padding:0 16px;border:none;border-radius:999px;background:transparent;color:var(--text-2);font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;cursor:pointer;transition:background .15s,color .15s}
.dv-tab:hover{color:var(--text)}
.dv-tab--active{background:var(--text);color:var(--bg)}

/* ---------- header ---------- */
/* `.dv-header` is applied to the <dev-header> custom element itself, so the
   sticky box is the host — no wrapper element in between. */
.dv-header{position:sticky;top:0;z-index:50;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px clamp(16px,3vw,28px)}
.dv-header__pill{display:flex;align-items:center;gap:4px;height:var(--h-bar);padding:0 8px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:999px;position:relative}
.dv-header--asym .dv-header__pill:first-child{border-radius:23px 23px 23px 6px}
.dv-header--asym .dv-header__pill:last-child{border-radius:23px 23px 6px 23px}
.dv-header--angle .dv-header__pill{border-radius:0;border:none;background:var(--surface-2)}
.dv-header--angle .dv-header__pill:first-child{clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);padding-right:26px}
.dv-header--angle .dv-header__pill:last-child{clip-path:polygon(16px 0,100% 0,100% 100%,0 100%);padding-left:26px}
.dv-header__mark{display:flex;align-items:center;gap:9px;padding:0 12px;text-decoration:none;color:var(--text)}
.dv-header__mark:hover{color:var(--text)}
.dv-header__mark strong{font-weight:600;font-size:15px;letter-spacing:-.01em}
.dv-header__name{display:flex;align-items:baseline}
/* home, sitting next to the wordmark. absent on the hub itself. */
.dv-header__home{font-size:15px;line-height:1;color:var(--text-3)}
.dv-header__home:hover{color:var(--text)}
.dv-mark-dot{width:9px;height:9px;border-radius:3px;background:var(--accent);flex:0 0 auto}
.dv-mark-dev{font-family:var(--font-mono);font-size:11px;color:var(--text-3);letter-spacing:.06em}
.dv-glyph-grid{display:grid;grid-template-columns:repeat(2,3px);gap:3px}
.dv-glyph-grid i{width:3px;height:3px;background:currentColor;border-radius:1px}
.dv-switcher{position:absolute;top:calc(100% + 8px);right:0;min-width:250px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:6px;box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:2px}
.dv-switcher a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--text);font-size:14px}
.dv-switcher a:hover{background:var(--hover);color:var(--text)}
.dv-switcher__idx{font-family:var(--font-mono);font-size:10px;color:var(--text-3);width:24px;flex:0 0 auto}
.dv-switcher__cur{width:7px;height:7px;border-radius:2px;background:var(--accent);margin-left:auto}

/* ---------- footer ---------- */
.dv-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(16px,3vw,28px);border-top:1px solid var(--border);font-family:var(--font-mono);font-size:11px;color:var(--text-3);letter-spacing:.03em}
.dv-footer a{color:var(--text-3);text-decoration:none}
.dv-footer a:hover{color:var(--text)}
.dv-footer__dot{width:7px;height:7px;border-radius:2px;background:var(--accent);display:inline-block;margin-right:8px;vertical-align:-1px}
.dv-footer__links{display:flex;gap:16px}

/* ---------- cfg + solid bars ---------- */
.dv-cfg{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em}
[data-bars="solid"] .dv-header__pill{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--shadow-1)}
[data-bars="solid"] .dv-footer{background:var(--surface-1)}

/* ---------- shell hosts ---------- */
/* before shell.js upgrades them the hosts are empty — keep them out of layout
   so a failed/blocked script leaves no phantom gap. */
dev-header:not(:defined),dev-footer:not(:defined){display:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}