/* =====================================================================
   Ctrl+Click — Expert Mode
   A CLI / terminal reskin of the whole site. Opt-in only.
   Everything here is scoped under `html.expert` so the default site is
   never touched unless the visitor turns expert mode on.
   The Control-key caret ⌃ is the shell prompt, ⌃click is the user.
   ===================================================================== */

html.expert {
  /* Phosphor-on-black palette. Brand teal + coral survive; grounds go darker. */
  --bg: #04070C;
  --term-bg: #06090F;
  --term-panel: #080C14;
  --text: #D7E3DC;          /* soft phosphor white-green */
  --muted: #6A7B84;
  --teal: #2FBCA9;
  --teal-dim: rgba(47,188,169,.55);
  --coral: #E8674C;
  --amber: #E0B44C;
  --line: rgba(47,188,169,.22);
  --line-soft: rgba(47,188,169,.12);
  --sel: rgba(47,188,169,.28);
  --glow: 0 0 6px rgba(47,188,169,.35);
  --font-term: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-pixel: "VT323", "JetBrains Mono", ui-monospace, monospace;
  --cmdbar-h: 52px;
  color-scheme: dark;
  background: var(--bg);
}

/* ---- base ---- */
html.expert body {
  font-family: var(--font-term);
  background:
    linear-gradient(180deg, rgba(47,188,169,.03), transparent 240px),
    radial-gradient(1200px 700px at 50% -10%, rgba(47,188,169,.06), transparent),
    var(--term-bg);
  color: var(--text);
  letter-spacing: .1px;
  padding-bottom: calc(var(--cmdbar-h) + 8px); /* room for the command bar */
}

html.expert ::selection { background: var(--sel); color: #fff; }

html.expert a { color: var(--teal); text-decoration: none; }
html.expert a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ---- CRT scanlines + faint vignette overlay (very subtle, non-interactive) ---- */
html.expert body::before {
  content: "";
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.16) 3px),
    radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0,0,0,.45) 100%);
  mix-blend-mode: multiply;
  opacity: .5;
}
@media (prefers-reduced-motion: no-preference) {
  html.expert body::after {
    content: "";
    position: fixed; inset: 0; z-index: 9997; pointer-events: none;
    background: rgba(47,188,169,.012);
    animation: crt-flicker 6s steps(60) infinite;
  }
  @keyframes crt-flicker { 0%,97%{opacity:0} 98%{opacity:.5} 99%{opacity:0} 100%{opacity:.4} }
}

/* =====================================================================
   Terminal title bar (injected by JS as the first child of <header>)
   ===================================================================== */
html.expert .term-titlebar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  font-family: var(--font-term);
  font-size: 12px; color: var(--muted);
  background: #05080E;
  border-bottom: 1px solid var(--line);
}
html:not(.expert) .term-titlebar { display: none; }
html.expert .term-lights { display: inline-flex; gap: 7px; }
html.expert .term-lights i {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
}
html.expert .term-lights i:nth-child(1){ background:#E8674C; }
html.expert .term-lights i:nth-child(2){ background:#E0B44C; }
html.expert .term-lights i:nth-child(3){ background:#2FBCA9; }
html.expert .term-path { color: var(--text); }
html.expert .term-path b { color: var(--teal); font-weight: 700; }
html.expert .term-titlebar .term-dims { margin-left: auto; opacity: .8; }

/* =====================================================================
   Header / nav → prompt bar
   ===================================================================== */
html.expert header.site-head {
  background: #05080E;
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
}
html.expert .nav { padding: 10px 16px; }
html.expert .wordmark {
  font-family: var(--font-term);
  font-weight: 700; font-size: 20px; letter-spacing: 0;
  text-shadow: var(--glow);
}
html.expert .wm-ctrl { color: var(--text); }
html.expert .wm-ctrl::before { content: "~/"; color: var(--muted); font-weight: 400; }
html.expert .wm-click { color: var(--teal); }
html.expert .wm-caret { filter: drop-shadow(0 0 4px rgba(47,188,169,.5)); }
html.expert .brand-suffix {
  color: var(--muted);
}
html.expert .brand-suffix::before { content: "— "; }

html.expert .nav-links a {
  color: var(--muted); position: relative;
}
html.expert .nav-links a::before { content: "["; color: var(--teal-dim); }
html.expert .nav-links a::after  { content: "]"; color: var(--teal-dim); }
html.expert .nav-links a:hover { color: var(--teal); text-decoration: none; }

/* CTA buttons → terminal buttons with a hard pixel shadow */
html.expert .cta {
  border-radius: 3px;
  border: 1px solid var(--teal-dim);
  background: rgba(47,188,169,.08);
  box-shadow: 3px 3px 0 rgba(47,188,169,.18);
  color: var(--teal);
  font-family: var(--font-term);
  font-weight: 700;
  transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
}
html.expert .cta::before { content: "❯ "; color: var(--teal); }
html.expert .cta:hover {
  filter: none; background: rgba(47,188,169,.16);
  transform: translate(1px,1px); box-shadow: 2px 2px 0 rgba(47,188,169,.18);
  text-decoration: none;
}

/* =====================================================================
   The toggle control (lives in the header markup on every page)
   The exit is the ONLY toggle in expert mode: it's hidden on the light site
   (entering the CLI stays a hidden easter egg) and appears once expert mode
   is on so the terminal is always escapable. Pages may add more specific
   rules, but this makes every page behave the same by default.
   ===================================================================== */
.expert-toggle { display: none; }
html.expert .expert-toggle { display: inline-flex; }
.expert-toggle {
  align-items: center; gap: 8px;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
  color: #94A0B4;
  background: linear-gradient(180deg, #1D2A40, #0C1322);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  transition: color .15s ease, border-color .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.expert-toggle:hover { color: #F2F5F7; border-color: rgba(47,188,169,.5); }
.expert-toggle:focus-visible { outline: 2px solid #2FBCA9; outline-offset: 2px; }
.expert-toggle .et-caret { color: #2FBCA9; font-weight: 700; }
.expert-toggle .et-state { color: #2FBCA9; }
.expert-toggle .et-label-off { display: inline; }
.expert-toggle .et-label-on  { display: none; }

/* In expert mode the toggle becomes an "exit" terminal chip */
html.expert .expert-toggle {
  border-radius: 3px;
  background: rgba(232,103,76,.08);
  border: 1px solid rgba(232,103,76,.45);
  box-shadow: 3px 3px 0 rgba(232,103,76,.18);
  color: var(--coral);
}
html.expert .expert-toggle:hover { color: #fff; border-color: var(--coral); }
html.expert .expert-toggle .et-caret { color: var(--coral); }
html.expert .expert-toggle .et-label-off { display: none; }
html.expert .expert-toggle .et-label-on  { display: inline; }
html.expert .expert-toggle .et-state { display: none; }

/* =====================================================================
   Panels / cards → terminal frames
   ===================================================================== */
html.expert .hero-card,
html.expert .card,
html.expert .grid {
  border-radius: 4px;
}
html.expert .hero-card {
  background:
    linear-gradient(180deg, rgba(47,188,169,.03), transparent 60px),
    var(--term-panel);
  border: 1px solid var(--line);
  box-shadow: none;
  position: relative;
}
/* a faint corner label on hero panels */
html.expert .hero-card::before {
  content: "┌─ ⌃click";
  position: absolute; top: -1px; left: 12px; transform: translateY(-50%);
  background: var(--term-bg); padding: 0 8px;
  font-size: 11px; color: var(--teal-dim); letter-spacing: .5px;
}

/* hero headline */
html.expert .hero h2 {
  font-family: var(--font-term);
  letter-spacing: -.3px;
}
html.expert .grad {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--teal); text-shadow: var(--glow);
}
html.expert .plus { color: var(--coral); }
html.expert .hero p { color: var(--muted); }
html.expert .hero p::selection { background: var(--sel); }

/* "formerly Maggio Consulting" → a comment line */
html.expert .formerly {
  border-radius: 3px; border: 1px dashed var(--line);
  background: transparent; color: var(--muted); font-family: var(--font-term);
}
html.expert .formerly::before { content: "// "; color: var(--teal-dim); }

/* the ctrl+click hint → a shell tip line */
html.expert .hint { color: var(--muted); font-family: var(--font-term); }
html.expert .hint kbd {
  border-radius: 3px; border: 1px solid var(--line);
  background: rgba(47,188,169,.08); color: var(--teal);
}

/* byline (⌃click persona) */
html.expert .byline img { border-radius: 3px; image-rendering: auto; }
html.expert .handle { color: var(--teal); text-shadow: var(--glow); }
html.expert .admin-badge {
  border-radius: 3px; border: 1px solid var(--teal-dim); color: var(--teal);
  background: rgba(47,188,169,.06);
}
html.expert .byline .meta { color: var(--muted); }

/* the "Recent focus" list → a log tail */
html.expert .hero-card ul { list-style: none; padding-left: 0; margin-left: 0; }
html.expert .hero-card ul li { position: relative; padding-left: 20px; }
html.expert .hero-card ul li::before {
  content: "▸"; position: absolute; left: 2px; color: var(--teal); }

/* =====================================================================
   Section headings → prompt + command
   ===================================================================== */
html.expert .section-title {
  flex-direction: column; align-items: flex-start; gap: 2px;
  margin: 40px 0 14px;
}
html.expert .section-title > svg { display: none; }         /* drop the icon */
html.expert .section-title::before {
  font-family: var(--font-term);
  font-size: 14px; color: var(--teal); text-shadow: var(--glow);
  content: "⌃click ❯ ls ./";
}
html.expert #business.section-title::before { content: "⌃click ❯ ls ./business-services"; }
html.expert #personal.section-title::before { content: "⌃click ❯ ls ./personal-services"; }
html.expert .section-title h1,
html.expert .section-title h2,
html.expert .section-title h3 {
  font-family: var(--font-pixel);
  font-size: 30px; line-height: 1; letter-spacing: .5px;
  color: var(--text); font-weight: 400;
}
html.expert .section-title h3::before { content: "# "; color: var(--muted); }

/* =====================================================================
   Service grid → `ls -l` style rows
   ===================================================================== */
html.expert .grid {
  display: block;
  border: 1px solid var(--line);
  background: var(--term-panel);
  padding: 6px;
}
html.expert .grid .card {
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--line-soft);
  border-radius: 0;
  box-shadow: none;
  padding: 11px 12px;
  transform: none !important;
  cursor: pointer;
}
html.expert .grid .card:last-child { border-bottom: none; }
html.expert .grid .card:hover,
html.expert .grid .card:focus-within {
  background: rgba(47,188,169,.07);
  border-color: var(--line-soft);
  outline: none;
}
html.expert .grid .card:focus-within { box-shadow: inset 2px 0 0 var(--teal); }
html.expert .card .icon { display: none; }        /* drop the icon tile */
html.expert .card-head { align-items: baseline; gap: 0; }
html.expert .card-head > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; width: 100%; }
html.expert .card h4 {
  font-family: var(--font-term); font-size: 14px; font-weight: 700;
  color: var(--teal); margin: 0; position: relative; padding-left: 18px;
  flex: 0 0 auto;
}
html.expert .card h4::before { content: "▸"; position: absolute; left: 0; color: var(--teal); }
html.expert .card p { color: var(--muted); font-size: 13px; margin: 0; }
/* hover affordance: show an "open" hint */
html.expert .card::after {
  content: "open ↵"; color: var(--teal-dim);
  font-size: 11px; opacity: 0; transition: opacity .12s ease;
  display: block; padding-left: 18px; margin-top: 2px;
}
html.expert .card:hover::after,
html.expert .card:focus-within::after { opacity: 1; }
/* the little category chip */
html.expert .chip {
  border-radius: 3px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); top: 11px;
}
html.expert .chip::before { content: "#"; color: var(--teal-dim); }

/* =====================================================================
   Contact + events cards
   ===================================================================== */
html.expert .contact-grid h3 { font-family: var(--font-pixel); font-weight: 400; font-size: 26px; }

/* =====================================================================
   Slide-over (service detail) → man page
   ===================================================================== */
html.expert .overlay { background: rgba(2,4,8,.78); backdrop-filter: blur(2px); }
html.expert .overlay::after {
  content: "press ESC or click to close";
  font-family: var(--font-term); color: var(--teal-dim);
  background: #05080E; border: 1px solid var(--line);
}
html.expert .sheet {
  background: var(--term-panel);
  border-left: 1px solid var(--teal-dim);
  box-shadow: -20px 0 60px rgba(0,0,0,.7);
}
html.expert .sheet header {
  background: #05080E; border-bottom: 1px solid var(--line);
}
html.expert .close {
  border-radius: 3px; background: rgba(232,103,76,.1);
  border: 1px solid rgba(232,103,76,.45); color: var(--coral);
  font-family: var(--font-term); font-weight: 700;
}
html.expert .close::before { content: "[esc] "; font-size: 12px; margin: 0; }
html.expert .sheet .body { font-family: var(--font-term); }
html.expert .sheet .body h2 {
  font-family: var(--font-pixel); font-weight: 400; font-size: 30px;
  color: var(--teal); text-shadow: var(--glow); letter-spacing: .5px;
}
html.expert .sheet .body h2::before { content: "man "; color: var(--muted); font-size: 20px; }
html.expert .sheet .body h3 {
  font-family: var(--font-term); font-size: 15px; color: var(--text);
  border-bottom: 1px dashed var(--line); padding-bottom: 6px;
}
html.expert .sheet .body h3::before { content: "## "; color: var(--teal-dim); }
html.expert .sheet .body p { color: var(--muted); }
html.expert .sheet .body ul { list-style: none; padding-left: 4px; }
html.expert .sheet .body li { position: relative; padding-left: 20px; color: var(--text); }
html.expert .sheet .body li::before { content: "-"; position: absolute; left: 4px; color: var(--teal); }
html.expert .sheet footer { background: #05080E; border-top: 1px solid var(--line); }

/* =====================================================================
   Custom "hidden menu" context menu → terminal popover
   ===================================================================== */
html.expert .ctx {
  background: rgba(6,9,15,.98);
  border: 1px solid var(--teal-dim);
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(47,188,169,.12);
  backdrop-filter: none;
}
html.expert .ctx-title { color: var(--teal); font-family: var(--font-term); }
html.expert .ctx a { color: var(--text); border-radius: 3px; }
html.expert .ctx a:hover { background: rgba(47,188,169,.12); }
html.expert .ctx-copy, html.expert .ctx-note { color: var(--muted); }
html.expert .ctx-sep { background: var(--line); }

/* =====================================================================
   Blog index + post pages
   ===================================================================== */
html.expert .post-card { }
html.expert .post-card::before { content: none; }
html.expert .post-date { color: var(--teal-dim); }
html.expert .post-date::before { content: "$ stat "; color: var(--muted); }
html.expert .post-card h2 a { color: var(--teal); }
html.expert .post-card:hover h2 a {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--text);
}
html.expert .blog-intro { color: var(--muted); }
html.expert .rss-link, html.expert .back-link { color: var(--teal-dim); font-family: var(--font-term); }
html.expert .rss-link:hover, html.expert .back-link:hover { color: var(--teal); }

html.expert .post-title {
  font-family: var(--font-pixel); font-weight: 400; letter-spacing: .5px;
  color: var(--text); text-shadow: 0 0 8px rgba(47,188,169,.15);
}
html.expert .post-body { font-family: var(--font-term); font-size: 15px; color: var(--text); }
html.expert .post-body h2 {
  font-family: var(--font-pixel); font-weight: 400; font-size: 28px;
  color: var(--teal); text-shadow: var(--glow);
}
html.expert .post-body h2::before { content: "## "; color: var(--muted); font-family: var(--font-term); font-size: 18px; }
html.expert .post-body h3::before { content: "### "; color: var(--teal-dim); }
html.expert .post-body a { color: var(--teal); }
html.expert .post-body blockquote {
  border-left: 3px solid var(--teal); background: rgba(47,188,169,.06);
  border-radius: 0; color: var(--muted);
}
html.expert .post-body code {
  background: rgba(47,188,169,.08); border: 1px solid var(--line); color: var(--teal);
}
html.expert .post-body pre {
  background: #04070C; border: 1px solid var(--line); border-radius: 4px;
}
html.expert .post-body pre code { color: var(--text); }
html.expert .post-body th { background: rgba(47,188,169,.06); }
html.expert .post-body th, html.expert .post-body td { border-color: var(--line); }

/* =====================================================================
   Footer
   ===================================================================== */
html.expert footer.site { border-top: 1px solid var(--line); color: var(--muted); }
html.expert footer.site .mono { color: var(--teal-dim); }
html.expert footer.site > div:first-child::before { content: "$ "; color: var(--teal); }

/* =====================================================================
   The command line (injected by JS at the end of <body>)
   ===================================================================== */
.term-chrome { display: none; }
/* while a service sheet is open, step the command bar aside so it never
   covers the sheet's footer / "Book this service" button */
html.expert .sheet[data-open="true"] ~ .term-chrome { display: none; }
html.expert .term-chrome {
  display: block;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  font-family: var(--font-term);
}
html.expert .term-output {
  max-height: min(46vh, 420px);
  overflow-y: auto;
  background: rgba(4,7,12,.97);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  font-size: 13px; line-height: 1.55;
  display: none;
}
html.expert .term-output.is-open { display: block; }
html.expert .term-output .line { white-space: pre-wrap; word-break: break-word; }
/* Tables and code blocks keep their columns: scroll sideways, don't wrap. */
html.expert .term-output .line.pre { white-space: pre; word-break: normal; overflow-x: auto; }
html.expert .term-output .line.cmd { color: var(--text); }
html.expert .term-output .line.cmd .p { color: var(--teal); }
html.expert .term-output .line.out { color: var(--muted); }
html.expert .term-output .line.ok  { color: var(--teal); }
html.expert .term-output .line.err { color: var(--coral); }
html.expert .term-output .line.head { color: var(--amber); }
html.expert .term-output a { color: var(--teal); }
html.expert .term-output .banner { color: var(--teal); text-shadow: var(--glow); font-family: var(--font-pixel); font-size: 18px; line-height: 1.05; }

html.expert .term-cmd {
  display: flex; align-items: center; gap: 10px;
  height: var(--cmdbar-h);
  padding: 0 16px;
  background: #05080E;
  border-top: 1px solid var(--teal-dim);
  box-shadow: 0 -8px 24px rgba(0,0,0,.5);
}
html.expert .term-prompt {
  color: var(--teal); font-weight: 700; white-space: nowrap; text-shadow: var(--glow);
  user-select: none;
}
html.expert .term-prompt .term-caret2 { color: var(--coral); }
html.expert .term-input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--font-term);
  /* 16px keeps iOS Safari from auto-zooming (and shifting the layout) on focus */
  font-size: 16px;
  caret-color: var(--teal);
}
html.expert .term-input::placeholder { color: var(--muted); opacity: .7; }
html.expert .term-cmd .term-hint { color: var(--muted); font-size: 11px; white-space: nowrap; }
html.expert .term-cmd .term-hint kbd {
  font-family: var(--font-term); font-size: 11px; padding: 1px 5px;
  border-radius: 3px; border: 1px solid var(--line); color: var(--teal);
}
@media (max-width: 620px) {
  html.expert .term-cmd .term-hint { display: none; }
}

/* blinking block cursor shown at the end of the input row when empty/focused */
html.expert .term-cursor {
  width: 9px; height: 18px; background: var(--teal);
  display: inline-block; box-shadow: var(--glow);
}
@media (prefers-reduced-motion: no-preference) {
  html.expert .term-cursor { animation: term-blink 1.05s steps(1) infinite; }
  @keyframes term-blink { 50% { opacity: 0; } }
}

/* thin teal scrollbar inside the output */
html.expert .term-output::-webkit-scrollbar { width: 8px; }
html.expert .term-output::-webkit-scrollbar-thumb { background: var(--teal-dim); border-radius: 4px; }
html.expert .term-output::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   Expert-mode header on mobile
   The terminal reskin uses a wider monospace face, so the wordmark and the
   "Schedule a Discussion" button need a touch less type to sit tidily on
   narrow screens without running off the right edge.
   ===================================================================== */
@media (max-width: 620px) {
  html.expert .wordmark { font-size: 17px; }
  /* Expert mode shows two buttons (exit CLI + Schedule): stack them, with
     Schedule anchored top-right and the always-visible exit just below. */
  html.expert .header-actions { flex-direction: column-reverse; align-items: flex-end; gap: 8px; }
  html.expert .header-actions .cta { font-size: 12px; padding: 8px 10px; box-shadow: 2px 2px 0 rgba(47,188,169,.18); }
  html.expert .header-actions .expert-toggle { font-size: 11px; padding: 7px 10px; }
}
@media (max-width: 400px) {
  html.expert .wordmark { font-size: 15px; }
  html.expert .brand-suffix { font-size: 10px; }
  html.expert .header-actions .cta { font-size: 11px; padding: 7px 9px; }
  html.expert .header-actions .expert-toggle { font-size: 10px; }
}
@media (max-width: 360px) {
  html.expert .nav { padding: 10px 12px; }
  html.expert .wordmark { font-size: 14px; }
  html.expert .header-actions .cta { font-size: 10px; padding: 7px 8px; }
  html.expert .header-actions .expert-toggle { font-size: 9px; padding: 6px 8px; }
}

/* =====================================================================
   FULL-SCREEN CLI TAKEOVER — landing page (html.expert.cli-full)
   On the home page, expert mode stops reskinning the marketing site and
   becomes a real terminal on every screen size: the shell fills the
   viewport, the website content steps aside, and there are no side frames
   — just the ⌃click banner, a few suggestions, and one command line. On
   mobile this replaces the stacked output panel + floating bar that ate
   half the screen with a single bottom input line.

   `cli-full` means the takeover is active (the landing page in expert
   mode). Entering expert mode stays a hidden easter egg. The blog never
   gets `cli-home`/`cli-full`, so none of this touches it.
   ===================================================================== */
html.expert.cli-full,
html.expert.cli-full body { height: 100%; }
html.expert.cli-full body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  padding-bottom: 0;            /* no room needed for a floating bar */
  overflow: hidden;            /* the terminal scrolls internally */
}

/* The header stays as the terminal window's chrome: title bar, wordmark, exit. */
html.expert.cli-full header.site-head { flex: 0 0 auto; position: static; }
/* Section links point at content that no longer renders — drop them.
   Navigation happens through commands now (business / personal / contact). */
html.expert.cli-full .nav-links { display: none; }

/* The marketing page steps aside entirely. Its service cards stay in the DOM
   (just hidden) so `ls` / `open` can still read and open them. */
html.expert.cli-full main.container { display: none; }

/* The command line is no longer a floating bar pinned over the site — it IS
   the page: a flex column that fills everything below the header. */
html.expert.cli-full .term-chrome {
  position: static;
  z-index: auto;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* A slide-over (from `open <service>`) is fixed above the static terminal,
   so the shell no longer needs to hide when one is open. */
html.expert.cli-full .sheet[data-open="true"] ~ .term-chrome { display: flex; }

/* Output grows to fill; it's the main content now, so it's always visible and
   sits directly on the terminal background (no inset panel, no top border). */
html.expert.cli-full .term-output {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  background: transparent;
  border-top: none;
  padding: 16px 18px;
}

/* The input row is a single line anchored to the bottom of the terminal. */
html.expert.cli-full .term-cmd {
  flex: 0 0 auto;
  box-shadow: none;
}

/* Keep wide ASCII from wrapping into mush on narrow screens — let it scroll. */
html.expert .term-output .banner { white-space: pre; overflow-x: auto; }

/* =====================================================================
   Clickable suggestion chips (rendered in the boot output as tap targets)
   ===================================================================== */
html.expert .term-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 8px 0 2px;
}
html.expert .term-chip {
  font-family: var(--font-term); font-size: 13px; line-height: 1;
  color: var(--teal);
  background: rgba(47,188,169,.08);
  border: 1px solid var(--teal-dim);
  border-radius: 3px;
  padding: 7px 11px;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(47,188,169,.16);
  transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
html.expert .term-chip::before { content: "❯ "; color: var(--teal); opacity: .8; }
html.expert .term-chip:hover {
  background: rgba(47,188,169,.16);
  transform: translate(1px,1px);
  box-shadow: 1px 1px 0 rgba(47,188,169,.16);
}
html.expert .term-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* =====================================================================
   Reading-level control (Beginner / Intermediate / Expert) + toast.
   Loaded on every page. These rules are NOT scoped to html.expert; they
   style the small pill control on the light site and adapt automatically
   in expert mode (the tokens below are redefined dark under html.expert).
   ===================================================================== */
.level-switch { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 0 14px; }
.level-switch .level-label { font-family: var(--font-mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #5C6B7E); }
.level-seg { display: inline-flex; gap: 2px; background: var(--panel, #FFFFFF); border: 1px solid var(--line, #D9E1E7); border-radius: 999px; padding: 3px; box-shadow: var(--shadow-1, 0 8px 24px rgba(14,22,38,.08)); }
.level-btn { border: 0; background: transparent; border-radius: 999px; cursor: pointer; color: var(--muted, #5C6B7E); font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 13px; transition: background .15s ease, color .15s ease; }
.level-btn:hover { color: var(--text, #0E1626); }
.level-btn.is-active { background: var(--teal, #146E63); color: #FFFFFF; }
.level-btn[data-level="expert"].is-active { background: #0E1626; color: var(--teal-bright, #2FBCA9); }
.level-btn:focus-visible { outline: 2px solid var(--teal-bright, #1E9C8C); outline-offset: 2px; }

/* Locked levels on resource pages: dimmed with a small padlock. They stay
   clickable on purpose — a tap is a conversation hook, not a dead control. */
.level-btn.is-locked { color: var(--muted, #5C6B7E); opacity: .62; }
.level-btn.is-locked:hover { color: var(--muted, #5C6B7E); opacity: .82; }
.level-btn .lock-i { vertical-align: -1px; margin-left: 5px; opacity: .85; }

/* The "unlock with a free consultation" note, revealed when a locked level
   is tapped. Sits under the switch and mirrors its right alignment. */
.level-unlock {
  margin: -6px 0 16px auto; max-width: 62ch; text-align: right;
  font-size: 13px; line-height: 1.5; color: var(--muted, #5C6B7E);
}
.level-unlock a { color: var(--teal, #146E63); font-weight: 600; }
html.expert .level-unlock { display: none !important; }

@media (max-width: 620px) {
  .level-switch { justify-content: center; }
  .level-switch .level-label { display: none; }
  .level-btn { padding: 6px 11px; }
  .level-unlock { text-align: center; margin-left: 0; }
}

/* In expert mode the reading-level control is meaningless — the CLI IS the
   view, and the only toggle is "exit CLI" in the header. Hide it entirely so
   it never lingers behind the terminal or offers a switch that does nothing. */
html.expert .level-switch { display: none !important; }

/* A brief toast confirming the level change (many changes are below the fold). */
.level-toast {
  position: fixed; left: 50%; top: 74px; z-index: 60;
  transform: translateX(-50%) translateY(-6px);
  background: #0E1626; color: #F2F5F7;
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px; font-weight: 600; line-height: 1.35;
  padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(14,22,38,.28);
  opacity: 0; pointer-events: none; max-width: 92vw; text-align: center;
  transition: opacity .2s ease, transform .2s ease;
}
.level-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .level-toast { transition: opacity .15s ease; }
  .level-toast.is-visible { transform: translateX(-50%); }
}