/* AI OS operator console design system.
   Discipline from the locked Cursor/Linear ladder (type scale, spacing, restraint),
   theater from the org-colored glow layer. Surfaces darker than the v1 skin. */

:root {
  /* surface ladder, darkest -> raised */
  --bg: #06080c;
  --panel: rgba(15, 20, 28, 0.72);
  --panel-solid: #0e131b;
  --raised: #141b26;
  --border: rgba(120, 140, 170, 0.14);
  --border-strong: rgba(120, 140, 170, 0.28);

  --text: #e8ecf3;
  --muted: #8e99ad;
  --faint: #5b6678;

  --accent: #e8833a;

  /* org system */
  --cf: #3fb950;
  --cfs: #39c5cf;
  --olusa: #e8833a;
  --fcusa: #db61a2;
  --personal: #58a6ff;
  --shared: #95a0b4;

  --danger: #f85149;
  --ok: #3fb950;

  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, system-ui, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, monospace;

  --sidebar-w: 232px;
  --r: 12px;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
  overflow: hidden;
}

::selection { background: rgba(232, 131, 58, 0.35); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(120, 140, 170, 0.2); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- shell ---------- */

.shell { display: flex; height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  display: flex; flex-direction: column;
  overflow-y: auto;                 /* scroll when the nav is taller than the screen */
  -webkit-overflow-scrolling: touch;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(13, 18, 26, 0.9), rgba(8, 11, 16, 0.95));
  backdrop-filter: blur(14px);
  z-index: 20;
}

.sb-logo {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 18px 16px;
}
.sb-logo .mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: radial-gradient(circle at 32% 28%, #ffb380, var(--accent) 55%, #7a3414);
  box-shadow: 0 0 18px rgba(232, 131, 58, 0.45), inset 0 0 6px rgba(255, 255, 255, 0.25);
}
.sb-logo .name { font-weight: 700; font-size: 15px; letter-spacing: 0.4px; }
.sb-logo .role { font-family: var(--mono); font-size: 9.5px; letter-spacing: 2.2px; color: var(--muted); text-transform: uppercase; }

.sb-section {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--faint); padding: 16px 20px 6px;
}

.sb-nav { display: flex; flex-direction: column; gap: 1px; padding: 0 10px; }
.sb-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 7.5px 11px; border-radius: 8px;
  color: var(--muted); text-decoration: none; font-size: 13.5px;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s;
}
.sb-nav a:hover { color: var(--text); background: rgba(120, 140, 170, 0.07); }
.sb-nav a.active {
  color: var(--text);
  background: linear-gradient(90deg, rgba(232, 131, 58, 0.12), rgba(232, 131, 58, 0.03));
  border-color: rgba(232, 131, 58, 0.25);
}
.sb-nav a.active .ico { color: var(--accent); }
.sb-nav .ico { width: 16px; text-align: center; font-size: 13px; color: var(--faint); flex: none; }
.sb-nav .kbd { margin-left: auto; }

kbd, .kbd {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  background: rgba(120, 140, 170, 0.1); border: 1px solid var(--border);
  border-radius: 5px; padding: 1.5px 6px;
}

.sb-foot { margin-top: auto; padding: 12px 14px 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.agent-chip {
  display: flex; align-items: center; gap: 9px;
  background: rgba(120, 140, 170, 0.06); border: 1px solid var(--border);
  border-radius: 9px; padding: 7px 10px;
}
.agent-chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.agent-chip .dot.ok { background: var(--ok); box-shadow: 0 0 8px rgba(63, 185, 80, 0.7); animation: pulse 2.6s infinite; }
.agent-chip .dot.idle { background: var(--faint); }
.agent-chip .dot.bad { background: var(--danger); box-shadow: 0 0 8px rgba(248, 81, 73, 0.7); }
.agent-chip .nm { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; }
.agent-chip .st { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.main { flex: 1; position: relative; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 11, 16, 0.55);
  backdrop-filter: blur(10px);
  z-index: 15;
}
.crumb { font-size: 13px; color: var(--muted); }
.crumb b { color: var(--text); font-weight: 600; }
.topbar .spacer { flex: 1; }
.hamburger { display: none; background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 4px 11px; font-size: 16px; cursor: pointer; }
.sb-backdrop { display: none; }
.palette-hint {
  display: flex; align-items: center; gap: 8px;
  color: var(--faint); font-size: 12.5px;
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px;
  cursor: pointer; background: rgba(120, 140, 170, 0.05);
}
.palette-hint:hover { color: var(--muted); border-color: var(--border-strong); }
.health-pill {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px;
  color: var(--ok); text-transform: uppercase;
}
.health-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px rgba(63, 185, 80, 0.8); animation: pulse 2.6s infinite; }
.health-pill.bad { color: var(--danger); }
.health-pill.bad .dot { background: var(--danger); box-shadow: 0 0 8px rgba(248, 81, 73, 0.8); }

.content { flex: 1; position: relative; overflow: hidden; }
.content.page { overflow-y: auto; padding: 20px 24px 60px; }
.content.page > * { animation: rise 0.25s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.page-tools .spacer { flex: 1; }

.clickable { cursor: pointer; transition: border-color 0.12s, background 0.12s, transform 0.12s; }
.clickable:hover { border-color: var(--border-strong) !important; background: var(--raised); }
.flash { animation: flashring 1.6s ease 2; }
@keyframes flashring { 0%, 100% { box-shadow: none; } 35% { box-shadow: 0 0 0 2px var(--accent), 0 0 24px rgba(232, 131, 58, 0.35); } }

/* ---------- glass panels ---------- */

.glass {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.glass .hd {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--muted); padding: 12px 14px 8px;
}
.glass .hd .right { margin-left: auto; color: var(--faint); letter-spacing: 0.5px; }

.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border-radius: 0 0 var(--r) var(--r); overflow: hidden; }
.stat { background: var(--panel-solid); padding: 10px 14px 12px; }
.stat .v { font-family: var(--mono); font-size: 22px; font-weight: 600; letter-spacing: -0.5px; }
.stat .l { font-family: var(--mono); font-size: 9px; letter-spacing: 1.6px; color: var(--faint); text-transform: uppercase; margin-top: 2px; }
.stat .v.warn { color: var(--danger); }
.stat .v.good { color: var(--ok); }

.meter { padding: 0 14px 13px; }
.meter .bar { height: 5px; border-radius: 3px; background: rgba(120, 140, 170, 0.15); overflow: hidden; }
.meter .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2ea043, #3fb950); box-shadow: 0 0 10px rgba(63, 185, 80, 0.5); }
.meter .row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 7px; }
.meter .row b { color: var(--text); font-family: var(--mono); font-weight: 600; }

.list { padding: 2px 8px 10px; display: flex; flex-direction: column; }
.list .item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 8px; cursor: pointer;
  transition: background 0.1s;
}
.list .item:hover { background: rgba(120, 140, 170, 0.08); }
.list .item .sw { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.list .item .t { font-size: 12.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.list .item .m { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--faint); flex: none; }
.list .item .m.warn { color: var(--danger); }

button.os {
  background: rgba(120, 140, 170, 0.08); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 13px; font: 12.5px var(--font); cursor: pointer;
}
button.os:hover { border-color: var(--border-strong); }
button.os.primary { background: var(--accent); border-color: var(--accent); color: #14181f; font-weight: 600; box-shadow: 0 0 18px rgba(232, 131, 58, 0.3); }

/* ---------- command palette ---------- */

#palette-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(3, 5, 8, 0.6); backdrop-filter: blur(4px);
  display: none; align-items: flex-start; justify-content: center; padding-top: 14vh;
}
#palette-overlay.open { display: flex; }
#palette {
  width: min(640px, 90vw);
  background: rgba(14, 19, 27, 0.92); border: 1px solid var(--border-strong);
  border-radius: 14px; backdrop-filter: blur(24px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(232, 131, 58, 0.07);
  overflow: hidden;
}
#palette input {
  width: 100%; background: transparent; border: 0; outline: 0;
  color: var(--text); font: 16px var(--font);
  padding: 17px 18px 15px; border-bottom: 1px solid var(--border);
}
#palette input::placeholder { color: var(--faint); }
#palette .results { max-height: 46vh; overflow-y: auto; padding: 7px; }
#palette .res {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 9px; cursor: pointer;
}
#palette .res.sel { background: rgba(232, 131, 58, 0.12); }
#palette .res .ico { width: 18px; text-align: center; color: var(--muted); flex: none; font-size: 13px; }
#palette .res .t { font-size: 13.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#palette .res .k { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: 1px; color: var(--faint); text-transform: uppercase; flex: none; }
#palette .res .sw { width: 8px; height: 8px; border-radius: 50%; flex: none; }
#palette .foot {
  display: flex; gap: 14px; padding: 9px 14px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--faint);
}
#palette .foot span b { color: var(--muted); font-weight: 500; }

/* org color utility */
.oc-CF { --oc: var(--cf); } .oc-CFS { --oc: var(--cfs); } .oc-OLUSA { --oc: var(--olusa); }
.oc-FCUSA { --oc: var(--fcusa); } .oc-personal { --oc: var(--personal); } .oc-shared { --oc: var(--shared); }

/* ---------- The Intern panel ---------- */

#intern-panel {
  position: fixed; top: 0; right: -440px; width: min(430px, 94vw); height: 100vh; z-index: 90;
  background: rgba(13, 18, 26, 0.97); border-left: 1px solid var(--border-strong);
  backdrop-filter: blur(20px); transition: right 0.22s ease;
  display: flex; flex-direction: column;
}
#intern-panel.open { right: 0; box-shadow: -30px 0 80px rgba(0, 0, 0, 0.5); }
#intern-backdrop { display: none; }
#intern-panel .ip-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
#intern-panel .ip-title { font-weight: 700; font-size: 14px; }
#intern-panel .ip-sub { font-family: var(--mono); font-size: 9px; letter-spacing: 1.2px; color: var(--faint); text-transform: uppercase; }
#intern-panel .ip-head button { margin-left: auto; padding: 3px 10px; }
#intern-panel .ip-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.ip-msg { max-width: 88%; padding: 9px 12px; border-radius: 11px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.ip-msg.me { align-self: flex-end; background: rgba(232, 131, 58, 0.16); border: 1px solid rgba(232, 131, 58, 0.3); }
.ip-msg.them { align-self: flex-start; background: var(--raised); border: 1px solid var(--border); }
.ip-msg.them.think { color: var(--faint); font-style: italic; animation: pulse 1.6s infinite; }
.ip-msg.them.did { color: var(--ok); font-size: 12px; background: rgba(63, 185, 80, 0.07); border-color: rgba(63, 185, 80, 0.3); }
#intern-panel .ip-input { display: flex; gap: 8px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
#intern-panel .ip-input textarea { flex: 1; resize: none; font: 13px/1.45 var(--font); }
#intern-panel .ip-head button + button { margin-left: 0; } /* keep Fresh + ✕ together at the right */
#intern-panel .ip-draft:not([hidden]) { border-top: 1px solid var(--border); padding: 11px 14px; display: flex; flex-direction: column; gap: 8px; background: rgba(232, 131, 58, 0.05); max-height: 52%; overflow-y: auto; }
#intern-panel .ipd-flds { display: flex; flex-direction: column; gap: 6px; }
#intern-panel .ip-draft input, #intern-panel .ip-draft textarea { width: 100%; font: 12.5px/1.45 var(--font); }
#intern-panel .ip-draft textarea { resize: vertical; min-height: 88px; }
#intern-panel .ipd-foot { display: flex; align-items: center; gap: 8px; }
#intern-panel .ipd-meta { font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px; color: var(--faint); text-transform: uppercase; }
#intern-panel .ipd-btns { margin-left: auto; display: flex; gap: 8px; }

/* toast */
#toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--raised); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 10px 18px; font-size: 13px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s; z-index: 200;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- form controls (themed for every page, incl. those without style.css) ---------- */
input, select, textarea {
  background: var(--panel-solid); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 11px; font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); }
input::placeholder, textarea::placeholder { color: var(--faint); }

/* ---------- narrow / high-DPI laptops (<= 1080px) ---------- */
/* Collapse the sidebar to a drawer here, not only on phones. A 16in laptop at default Windows
   scaling lands near ~960px CSS width, where the 232px sidebar squeezes the calendar month and
   the pipeline board below the width they need (the calendar needs ~700 + sidebar 232 + padding).
   This reclaims the full width for the content. Phone-only cosmetics (touch targets, icon-only
   palette, stacked dialogs) stay in the <=820 block below.
   ponytail: the drawer rules are repeated in the <=820 block; identical declarations in a nested
   range are harmless, and duplicating ~8 lines is safer than reshuffling the phone block blind. */
@media (max-width: 1080px) {
  html { overflow-x: hidden; }
  body { overflow-x: hidden; max-width: 100vw; }
  .shell { max-width: 100vw; overflow-x: hidden; }
  .main { max-width: 100vw; overflow-x: hidden; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 250px; max-width: 84vw;
    transform: translateX(-100%); transition: transform 0.22s ease; z-index: 60;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 30px 0 80px rgba(0,0,0,0.6); }
  .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 55; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .sidebar.open ~ .sb-backdrop { opacity: 1; pointer-events: auto; }
  .hamburger { display: inline-block; }
}

/* ---------- mobile / phone (<= 820px) ---------- */
@media (max-width: 820px) {
  html { overflow-x: hidden; }
  body { overflow-x: hidden; overflow-y: auto; max-width: 100vw; }
  .shell { height: auto; min-height: 100vh; max-width: 100vw; overflow-x: hidden; }
  .main { max-width: 100vw; overflow-x: hidden; }

  /* sidebar becomes an off-canvas drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 250px; max-width: 84vw;
    transform: translateX(-100%); transition: transform 0.22s ease; z-index: 60;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 30px 0 80px rgba(0,0,0,0.6); }
  .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 55; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .sidebar.open ~ .sb-backdrop { opacity: 1; pointer-events: auto; }

  .main { min-height: 100vh; }
  .hamburger { display: inline-block; }
  .topbar { position: sticky; top: 0; padding: 10px 14px; gap: 10px; }
  .palette-hint .ph-text { display: none; }       /* icons only on small screens */
  .palette-hint kbd { display: none; }            /* no keyboard shortcuts on a phone */
  .palette-hint { padding: 6px 10px; }
  #open-palette::before { content: "⌕"; font-size: 15px; }
  .health-pill #health-word { display: none; }    /* keep just the status dot */
  .health-pill { padding: 0; }
  .crumb { font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 38vw; }
  .topbar { overflow: hidden; }

  .content { overflow: visible; }
  .content.page { padding: 14px 14px 80px; overflow-y: visible; overflow-x: hidden; }
  .page-tools { gap: 8px; }

  /* anything laid out as a multi-column grid collapses to one column */
  .statgrid { grid-template-columns: repeat(3, 1fr); }   /* keep the 3 stat tiles */

  #intern-panel, #palette { width: 100vw; max-width: 100vw; }
  #intern-panel { right: -100vw; }
  #intern-panel { height: 100dvh; }            /* at-rest fallback; JS sizes to the visible viewport when the keyboard is up */
  #intern-panel .ip-input { flex: none; }      /* input row keeps its height; .ip-log absorbs the rest as the panel shrinks */
  #intern-panel .ip-input textarea { min-height: 60px; line-height: 1.4; } /* a few readable lines so you can see what you type */
  #palette-overlay { padding-top: 8vh; }

  /* --- global touch ergonomics (apply on every page) --- */

  /* 16px inputs stop iOS Safari from auto-zooming the layout on focus */
  input, select, textarea { font-size: 16px; }

  /* real tap targets: ~40px minimum on every button/select/link-button/chip */
  button, .os, select, input[type=search], input[type=text], input[type=email], input[type=time], input[type=date] { min-height: 40px; }
  button.os, button { padding: 9px 14px; }

  /* topbar entry points are the only navigation on a phone, make them hittable */
  .hamburger { padding: 8px 13px; min-height: 42px; font-size: 17px; }
  .palette-hint { min-height: 42px; display: inline-flex; align-items: center; }
  #open-intern { font-size: 18px; }

  /* glass-card headers wrap so a long right-hint never crushes the title */
  .glass .hd { flex-wrap: wrap; }
  .glass .hd .right { margin-left: auto; }

  /* dialogs live in the top layer and ignore the page overflow clamp, so they
     must cap their own width AND carry the dark theme (some pages don't load
     style.css). Fields stack and grow for touch. */
  dialog {
    width: min(460px, 94vw); max-width: 94vw; max-height: 90vh; overflow: auto;
    background: var(--panel-solid); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: 14px; padding: 18px;
  }
  dialog::backdrop { background: rgba(3, 5, 8, 0.62); }
  dialog .row { flex-direction: column; gap: 0; }
  dialog input, dialog select, dialog textarea { min-height: 42px; font-size: 16px; width: 100%; }
  dialog form[style*="min-width"] { min-width: 0 !important; width: 100%; }

  /* The Intern panel: bigger close target + tap-anywhere-outside to dismiss */
  #intern-panel .ip-head button { padding: 9px 14px; min-height: 40px; font-size: 15px; }
  #intern-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 89; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  #intern-panel.open ~ #intern-backdrop { opacity: 1; pointer-events: auto; }

  /* keyboard-only hints are noise on a phone */
  #palette .foot { display: none; }
}