/*
 * AICoE Design System — application shell chrome
 *
 * The intranet-style chrome: top bar, nav, bottom tab bar, auth split, page
 * scaffold and stat cards. This is OPTIONAL — import it only when building a
 * full intranet-style app shell. The pure component kit is components.css.
 *
 * Import order: tokens.css → components.css → aicoe-shell.css (if needed).
 */

/* ── Page scaffold ── */
.page { max-width: var(--content-max); margin: 0 auto; padding: 44px 44px 90px; }
.page.narrow { max-width: var(--content-narrow); }

/* ── Layout primitives ──
   .layout-split   sidebar + main (settings, forms, docs) — stacks below 960px
   .layout-detail  list + inline detail pane (master-detail); below 881px the
                   pane yields to the record drawer (LAYOUTS-SPEC §4) */
.layout-split { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
                gap: var(--space-8); align-items: start; }
.layout-side { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); min-width: 0; }
.layout-main { min-width: 0; }
.layout-detail { display: grid; grid-template-columns: minmax(0, 1fr) 420px;
                 gap: var(--space-8); align-items: start; }
.detail-pane { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); min-width: 0;
               max-height: calc(100dvh - var(--topbar-h) - var(--space-8)); overflow-y: auto; }

/* nav group labels — non-interactive section labels inside .nav-links */
.nav-group { font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
             color: var(--textMuted); margin: 0 14px 0 10px; align-self: center; }

/* ── Top bar ── */
nav.topbar { position: sticky; top: 0; z-index: var(--z-nav); display: flex; align-items: center; gap: 6px;
      padding: 10px 44px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--ink-150);
      background: color-mix(in srgb, var(--bg) 82%, transparent);
      backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.topbar .logo { height: 30px; }
.nav-brand { font-family: var(--font-sans); font-size: 16.5px; font-weight: 800; letter-spacing: -.01em;
             margin: 0 20px 0 10px; color: var(--ink-900); text-decoration: none; }
.nav-brand em { font-style: italic; color: var(--teal-700); }
.nav-links { display: flex; gap: 2px; }
.nav-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650;
            color: var(--textSecondary); text-decoration: none; padding: 8px 13px; border-radius: 10px;
            transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nav-link:hover { background: var(--ink-100); color: var(--ink-900); }
.nav-link.active { background: var(--teal-100); color: var(--teal-900); }
.nav-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nav-link .m-ic { width: 15px; height: 15px; color: var(--ink-500); }
.nav-link.active .m-ic { color: var(--teal-700); }
.nav-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-user { font-size: 12.5px; font-weight: 700; color: var(--textSecondary); display: inline-flex;
            align-items: center; gap: 9px; text-decoration: none; }

/* ── Bottom tab bar (hidden on desktop; shown ≤880px) ── */
.tabbar { display: none; gap: var(--space-1); align-items: stretch;
          background: var(--surface); border-top: 1px solid var(--border);
          padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
.tabbar .tab { flex: 1 1 0; min-width: 0; min-height: 50px; display: flex;
               flex-direction: column; align-items: center; justify-content: center; gap: 4px;
               margin: 0; padding: 2px 4px; border: 0; border-radius: var(--radius-md);
               background: transparent; color: var(--textSecondary); font-family: var(--font-sans);
               font-size: 11px; line-height: 1.25; font-weight: 650; text-decoration: none;
               cursor: pointer; -webkit-tap-highlight-color: transparent;
               transition: color var(--dur-fast) var(--ease-out); }
.tabbar .tab .ti { display: grid; place-items: center; width: 52px; max-width: 100%; height: 28px;
                   padding: 0; border-radius: var(--radius-pill);
                   transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.tabbar .tab .m-ic { width: 21px; height: 21px; }
.tabbar .tab:is(.active, [aria-current="page"], [aria-pressed="true"]) { color: var(--teal-800); font-weight: 750; }
.tabbar .tab:is(.active, [aria-current="page"], [aria-pressed="true"]) .ti { background: var(--tint-teal-bg-strong, var(--teal-100)); }
@media (hover: hover) {
  .tabbar .tab:hover .ti { background: var(--ink-100); }
  .tabbar .tab:is(.active, [aria-current="page"], [aria-pressed="true"]):hover .ti { background: var(--tint-teal-bg-strong, var(--teal-100)); }
}
.tabbar .tab:active .ti { transform: scale(.94); }
.tabbar .tab:focus-visible { outline: 2px solid var(--accentStrong); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .tabbar .tab, .tabbar .tab .ti { transition: none; }
  .tabbar .tab:active .ti { transform: none; }
}

/* ── Stat cards ── */
.stats { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: 18px 0 30px; }
.stat { display: inline-flex; align-items: baseline; gap: var(--space-2); background: var(--surface);
        border: 1px solid var(--ink-150); border-radius: var(--radius-md); padding: 9px 15px;
        box-shadow: var(--shadow-sm); }
.stat b { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink-900); }
.stat span { font-size: 11.5px; font-weight: 700; color: var(--textMuted); }

/* ══════════ RESPONSIVE SHELL ══════════ */
@media (max-width: 960px) {
  .layout-split { grid-template-columns: 1fr; }
  .layout-side { position: static; }
}

@media (max-width: 880px) {
  nav.topbar { padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
  .nav-links { display: none; }
  .nav-brand { margin-right: auto; font-size: 15.5px; }
  .nav-user .u-name { display: none; }
  .layout-detail { grid-template-columns: 1fr; }
  .detail-pane { display: none; }
  .page { padding: 22px 16px calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom)); }

  /* bottom tab bar */
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); }
}

@media (max-width: 700px) {
  .page h1 { font-size: 34px; }
  .page-title { font-size: 26px; }
  .lede { font-size: 15.5px; margin-bottom: 22px; }
  .page-sub { font-size: var(--text-sm); }
}

/* ── Auth band ── */
.auth { max-width: 1060px; margin: 8px auto 0; border: 1px solid var(--ink-150); border-radius: 22px;
        overflow: hidden; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 1fr; }
.auth-brand { position: relative; background: var(--ink-900); color: #fff; padding: 34px 30px 30px;
              display: flex; flex-direction: column; overflow: hidden; }
.auth-brand .auth-logo { height: 34px; width: 34px; object-fit: contain; border-radius: 9px;
                         background: #fff; padding: 5px; position: relative; }
.auth-brand .kicker { color: var(--teal-300); margin-top: 26px; }
.auth-brand h1 { font-size: clamp(28px, 6vw, 42px); color: #fff; margin: 0 0 12px; position: relative; }
.auth-brand h1 em { color: var(--teal-300); }
/* deep ink in BOTH schemes — the ink ramp flips in dark, so re-pin it.
   :where() keeps specificity at class level so page overrides (login/signup
   brand panels) still win by cascade order. */
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme])) .auth-brand { background: var(--ink-050); } }
:where(:root[data-theme="dark"]) .auth-brand { background: var(--ink-050); }
.auth-form { background: var(--surface); padding: 34px 30px 30px; display: flex; flex-direction: column;
             justify-content: center; }
.auth-form .kicker { margin-bottom: var(--space-2); }
.auth-form h2 { font-family: var(--font-display); font-size: 27px; font-weight: 600;
                letter-spacing: -.02em; color: var(--ink-900); margin: 0 0 var(--space-5); }

/* Desktop auth split — declared after the base .auth rules so it wins the cascade */
@media (min-width: 881px) {
  .auth { grid-template-columns: 1.05fr .95fr; }
  .auth-brand { padding: 52px 48px; min-height: 560px; }
  .auth-form { padding: 52px 46px; }
}

/* ── Dark tint surfaces (see components.css, DARK TINT SURFACES) ── */
/* The same shell can be placed in a narrow panel or a small viewport. */
.page, .auth, .auth-brand, .auth-form, .detail-list { min-width: 0; max-width: 100%; }
.auth-brand, .auth-form { overflow-wrap: anywhere; }
nav.topbar { flex-wrap: wrap; }
.nav-links { flex-wrap: wrap; min-width: 0; }
.nav-brand, .nav-user, .stat { min-width: 0; overflow-wrap: anywhere; }
.stat { max-width: 100%; flex-wrap: wrap; }
.tab { min-width: 0; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 460px) {
  .auth-brand, .auth-form { padding: var(--space-5) var(--space-4); }
  .tab .ti { padding-inline: var(--space-2); }
}

:root[data-theme="dark"] {
  --tint-teal-bg: color-mix(in srgb, var(--teal-500) 14%, var(--surface));
  --tint-teal-bg-strong: color-mix(in srgb, var(--teal-500) 20%, var(--surface));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tint-teal-bg: color-mix(in srgb, var(--teal-500) 14%, var(--surface));
    --tint-teal-bg-strong: color-mix(in srgb, var(--teal-500) 20%, var(--surface));
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    .nav-link.active { background: var(--tint-teal-bg-strong); color: var(--success); }
    .nav-link.active .m-ic { color: var(--success); }
    .tabbar .tab:is(.active, [aria-current="page"], [aria-pressed="true"]) { color: var(--success); }
  }
}
:root[data-theme="dark"] {
  .nav-link.active { background: var(--tint-teal-bg-strong); color: var(--success); }
  .nav-link.active .m-ic { color: var(--success); }
  .tabbar .tab:is(.active, [aria-current="page"], [aria-pressed="true"]) { color: var(--success); }
}
/* Compact application hierarchy; editorial headings remain opt-in. */
.page-title { font-family:var(--font-sans); font-size:clamp(25px,3vw,34px); letter-spacing:-.025em; font-weight:650; }
.kicker { font-size:var(--text-sm); letter-spacing:.04em; }
#toast-root { z-index:var(--z-toast); }
@media(max-width:880px) { #toast-root { bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px) !important; } }