/* Shared look for every page: lavender ground, white working surface, one
   violet accent, sunflower for "this is the line it came from". Each page's
   own stylesheet builds on these tokens. Fonts are served from this origin
   because the content security policy blocks font CDNs. */

@font-face {
  font-family: "Figtree";
  src: url(/fonts/figtree.woff2) format("woff2");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url(/fonts/bricolage-grotesque.woff2) format("woff2");
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url(/fonts/geist-mono.woff2) format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f1f0fa;
  --panel: #ffffff;
  --panel-2: #fcfcfe;
  --ink: #1c1a33;
  --ink-2: #3a3754;
  --muted: #6a6784;
  --faint: #9b98b3;
  --line: #e3e0f2;
  --line-2: #efedf8;
  --hover: #f5f4fc;
  --accent: #4b3fd1;
  --accent-strong: #3e33b8;
  --accent-soft: #eeecfa;
  --hl: #ffe79a;
  --hl-row: #fff7d6;
  --hl-edge: #e3b400;
  --warn: #8a5d00;
  --warn-bg: #fff1cf;
  --esc: #9d2a6b;
  --esc-bg: #fce7f3;
  --alert: #c2410c;
  --alert-bg: #fff3ea;
  --good: #1d6b45;
  --good-bg: #e6f4ec;
  --rec: #e5484d;
  --error-text: #b42318;
  --error-bg: #fdecea;
  --f-ui: "Figtree", "PingFang SC", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Bricolage Grotesque", "Figtree", "PingFang SC", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius-pill: 999px;
  --radius-control: 10px;
  --radius-surface: 14px;
  --radius-float: 16px;
  --shadow-float: 0 16px 36px -16px rgba(40, 30, 120, 0.3), 0 1px 2px rgba(40, 30, 120, 0.05);
  --shadow-soft: 0 1px 2px rgba(40, 30, 120, 0.06);
  --side-w: 248px;
}

/* ------------------------------------------------------------ the shell
   One geometry for every page, so switching apps moves nothing: the sidebar
   width and padding, the workspace row, the app links and the white sheet
   beside them are all set here and nowhere else. */

.shell-side {
  box-sizing: border-box; width: var(--side-w); min-width: 0; flex: none;
  padding: 14px 10px; display: flex; flex-direction: column;
}
.shell-top { display: flex; align-items: center; gap: 8px; height: 32px; margin: 0 0 10px; padding: 0 0 0 8px; }
.shell-top .workspace { flex: 1; min-width: 0; }
.shell-side .app-nav { margin: 0 0 6px; }
.shell-main {
  box-sizing: border-box; min-width: 0; min-height: 0;
  margin: 8px 8px 8px 0; height: calc(100vh - 16px);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-surface); overflow: hidden;
}

/* The signed-in person, at the foot of every sidebar. */
.shell-user {
  margin: auto -10px 0; padding: 10px 12px 12px 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.shell-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 600 13px/1 var(--f-ui);
}
.shell-who { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.shell-name { font: 600 13px/1.3 var(--f-ui); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-role { font: 400 11.5px/1.3 var(--f-ui); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-out {
  flex: none; border: 0; background: none; color: var(--muted); padding: 6px; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center;
}
.shell-out:hover { background: var(--hover); color: var(--ink); }

/* ------------------------------------------------------------ app switcher */

.app-nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.app-nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px; border-radius: var(--radius-pill);
  color: var(--ink-2); text-decoration: none; font: 500 13.5px/1.4 var(--f-ui);
}
.app-nav a:hover { background: var(--hover); color: var(--ink); }
.app-nav a[aria-current="page"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-soft); }
.app-nav svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.workspace { display: flex; align-items: center; gap: 9px; font: 600 14px/1.2 var(--f-ui); color: var(--ink); }
.workspace .logo {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 12px;
}

.side-label { margin: 0; padding: 14px 10px 4px; color: var(--faint); font: 500 11.5px/1.4 var(--f-ui); }

.sobo { width: 22px; height: 22px; flex: none; }

/* A lighter touch on phones: the switcher runs across the top. */
@media (max-width: 760px) {
  .app-nav { grid-auto-flow: column; justify-content: start; overflow-x: auto; }
}

/* ------------------------------------------------------------ Shoelace
   The component library, dressed in this theme: the violet accent, the UI
   font, pill-shaped small controls, the lavender hover. */
:root {
  --sl-font-sans: var(--f-ui);
  --sl-font-mono: var(--f-mono);
  --sl-color-primary-50: #f5f4fc;
  --sl-color-primary-100: #eeecfa;
  --sl-color-primary-200: #dcd8fb;
  --sl-color-primary-300: #c9c3f3;
  --sl-color-primary-400: #8f86e6;
  --sl-color-primary-500: #6d62dc;
  --sl-color-primary-600: #4b3fd1;
  --sl-color-primary-700: #3e33b8;
  --sl-color-primary-800: #332a96;
  --sl-color-primary-900: #272075;
  --sl-color-primary-950: #1c1a33;
  --sl-input-border-color: var(--line);
  --sl-input-border-color-hover: #c9c3f3;
  --sl-input-border-color-focus: var(--accent);
  --sl-input-color: var(--ink-2);
  --sl-input-placeholder-color: var(--faint);
  --sl-input-height-small: 28px;
  --sl-input-font-size-small: 12.5px;
  --sl-input-border-radius-small: var(--radius-pill);
  --sl-input-spacing-small: 10px;
  --sl-focus-ring: 0 0 0 3px rgba(75, 63, 209, 0.18);
  --sl-panel-border-color: var(--line);
  --sl-panel-background-color: var(--panel);
  --sl-shadow-large: var(--shadow-float);
  --sl-border-radius-medium: 10px;
  --sl-font-size-medium: 13px;
}
sl-select::part(listbox) { padding: 4px; border-radius: 12px; }
sl-option::part(base) { border-radius: 8px; padding: 6px 8px; font-size: 13px; }
sl-option::part(checked-icon) { color: var(--accent); }
sl-option:not([aria-selected="true"])::part(base):hover { background: var(--hover); color: var(--ink); }
/* The list opens wider than a narrow trigger, so long names stay on one line. */
sl-select::part(listbox) { min-width: 240px; width: max-content !important; max-width: 360px; }
sl-option::part(label) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }