/* Shared look for every page: a near-white ground, white working surface,
   one indigo accent kept for the single action that matters on a screen, and
   butter-yellow for "this is the line it came from". Status colours carry the rest. 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: "Geist Mono";
  src: url(/fonts/geist-mono.woff2) format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Paper and marker: a near-white ground, near-black ink, one indigo for the
     next thing to press and for Kaki itself, and four marker colours that each
     mean one thing (waiting on you, someone else's call, money or missing, done). */
  --bg: #fbfbfa;
  --panel: #ffffff;
  --panel-2: #fafaf8;
  --ink: #1c1b22;
  --ink-2: #44424d;
  --muted: #7a7885;
  --faint: #a9a7b3;
  --line: #e7e6e2;
  --line-2: #f0f0ed;
  --hover: #f4f4f1;
  --accent: #4b3fd1;
  --accent-strong: #3d32b8;
  --accent-soft: #eeedfb;
  --neutral-soft: #f0f0eb;
  --butter: #ffe79a;
  --butter-soft: #fff6d2;
  --lavender: #e4ddf8;
  --peach: #ffd2b5;
  --peach-soft: #fff0e4;
  --mint: #f0f0ed;      /* done: a quiet neutral, not a second accent */
  --hl: #ffe79a;
  --hl-row: #fff6d2;
  --hl-edge: #e3b400;
  --warn: #8a5d00;
  --warn-bg: #fff6d2;
  --esc: #4f43b8;
  --esc-bg: #e4ddf8;
  --alert: #b4501c;
  --alert-bg: #fff0e4;
  --good: #44424d;
  --good-bg: #f0f0ed;
  --rec: #e5484d;
  --error-text: #b42318;
  --error-bg: #fdecea;
  --f-ui: "Figtree", "PingFang SC", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* One family everywhere: headings are Figtree too, set heavier. */
  --f-display: "Figtree", "PingFang SC", "Hiragino Sans GB", system-ui, 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 12px 32px -16px rgba(75, 63, 209, 0.28), 0 1px 2px rgba(28, 27, 34, 0.05);
  --shadow-soft: 0 1px 2px rgba(28, 26, 51, 0.07);
  --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: #d6d5de;
  --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; }