/* ============================================================
   PRACTOS — shared theme tokens.
   Every tool module (tools/<id>/tool.js + its CSS) should reuse
   these custom properties instead of redefining its own palette,
   so the whole app — shell and every mounted tool — stays visually
   in sync automatically. See app/README.md.

   Two themes. Dark is the default and is what every tool was built on;
   light is per person (the sidebar toggle sets data-theme="light" on <html>)
   and only redefines the colors below. A tool that hasn't been checked in
   light yet mounts inside .theme-dark, which puts the dark colors back for
   just that tool — so it stays whole and dark rather than half-converted.
   ============================================================ */
:root, .theme-dark {
  color-scheme: dark;
  --color-bg: #000000;
  --color-surface: #121214;
  --color-surface-2: #1a1a1d;
  --color-surface-3: #202024;
  --color-text: #f2f4f7;
  --color-divider: rgba(255, 255, 255, 0.12);
  --color-accent: #3d8bfd;
  --color-accent-700: #8dbdff;
  --color-accent-wash: color-mix(in srgb, var(--color-accent) 14%, transparent);
  --color-muted: color-mix(in srgb, var(--color-text) 55%, transparent);
  --color-muted-2: color-mix(in srgb, var(--color-text) 70%, transparent);
  --focus: #7da0ff;
  --amber: #f4b942;
  --amber-ink: #2a1c00;
  --amber-bg: color-mix(in srgb, var(--amber) 18%, transparent);
  --danger: #e28b8b;
  --planner-mine: #ffffff;
  --planner-team: #8dbdff;
  /* For tools: success green, the gridded stage behind document previews,
     and faint washes for striped rows and hover — each has a light twin. */
  --color-good: #6ee7b7;
  --stage-bg: #0a0a0c;
  --stage-grid: rgba(255, 255, 255, .035);
  --wash: rgba(255, 255, 255, .08);
  --wash-faint: rgba(255, 255, 255, .025);

  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);
}
/* Light: a soft gray page with white panels, so cards still read as cards.
   Accent, amber and danger are deeper than their dark-theme versions because
   they also have to work as text on white. Personal Job Planner cards can't be
   white on white, so "mine" becomes near-black. */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #eef0f3;
  --color-surface: #ffffff;
  --color-surface-2: #f3f4f7;
  --color-surface-3: #e6e8ed;
  --color-text: #161a21;
  --color-divider: rgba(15, 23, 42, 0.14);
  --color-accent: #2563eb;
  --color-accent-700: #1d4ed8;
  --color-muted: color-mix(in srgb, var(--color-text) 62%, transparent);
  --color-muted-2: color-mix(in srgb, var(--color-text) 76%, transparent);
  --focus: #2563eb;
  --amber: #b45309;
  --amber-ink: #ffffff;
  --danger: #c62828;
  --planner-mine: #1f2937;
  --planner-team: #2563eb;
  --color-good: #047857;
  --stage-bg: #e4e7ec;
  --stage-grid: rgba(15, 23, 42, .05);
  --wash: rgba(15, 23, 42, .06);
  --wash-faint: rgba(15, 23, 42, .025);
  --ink-strength: 100%; /* card outlines at full color: 62% of a pastel on white is barely there */
}
.theme-dark { background: var(--color-bg); color: var(--color-text); }
:root[data-theme="light"] .tool-mount.theme-dark { border-radius: var(--radius-lg); padding: var(--space-4); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-divider); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); font-weight: 600; }

/* ---- shared form controls (shell + tools) ---- */
.field { display: grid; gap: 6px; }
.field label {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.input, select.input, textarea.input {
  width: 100%;
  padding: 10px 12px;
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
}
.input:focus { border-color: var(--color-accent); outline: none; }
textarea.input { resize: vertical; min-height: 70px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 9px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  background: transparent;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, filter 150ms ease, transform 150ms ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { cursor: not-allowed; opacity: 0.45; transform: none; }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn-block { width: 100%; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.btn-secondary { background: transparent; border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent-700); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-muted); }
.btn-ghost:hover:not(:disabled) { color: var(--color-text); background: var(--color-surface-2); }
.btn-icon { width: 30px; height: 30px; padding: 0; border-radius: var(--radius-sm); min-height: 0; }

.tag {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
}
.tag-accent { background: var(--color-accent-wash); color: var(--color-accent-700); }
.tag-neutral { background: var(--color-surface-3); color: var(--color-muted); }
.tag-outline { background: transparent; border: 1px solid var(--color-divider); color: var(--color-muted); }

.card-meta { font-size: 12px; color: var(--color-muted); margin-top: 2px; }

/* ============================================================
   App shell
   ============================================================ */
#app { min-height: 100vh; }

.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--color-bg); color: var(--color-text); padding: var(--space-4);
}
.login-card {
  width: min(360px, 100%); padding: var(--space-6);
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl); box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.login-logo {
  margin: 0 auto var(--space-6); width: 100%; max-width: 190px; text-align: center;
}
.login-logo img { width: 100%; display: block; }
.login-logo .fallback { color: var(--color-text); font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.login-card h4 { text-align: center; margin: 0 0 var(--space-4); }
.login-error { color: var(--danger); font-size: 12px; margin: -4px 0 var(--space-3); }
.login-hint { margin-top: var(--space-4); font-size: 11px; color: var(--color-muted); line-height: 1.6; }

.shell { display: flex; min-height: 100vh; background: var(--color-bg); color: var(--color-text); }

.sidebar {
  width: 236px; flex: none; background: var(--color-surface); border-right: 1px solid var(--color-divider);
  display: flex; flex-direction: column; padding: var(--space-4); position: sticky; top: 0; height: 100vh;
}
.sidebar-icon { display: flex; justify-content: center; margin: 0 0 var(--space-6); }
.sidebar-icon img { height: 60px; width: auto; display: block; }
.sidebar-icon .fallback { color: var(--color-text); font-weight: 800; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; max-width: 100px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius);
  font-size: 14px; text-decoration: none; color: var(--color-text); font-weight: 400; cursor: pointer; border: 0; background: none; text-align: left; width: 100%;
}
.nav-link svg { width: 17px; height: 17px; flex: none; }
.nav-link.active { background: var(--color-accent-wash); color: var(--color-accent-700); font-weight: 600; }
.nav-divider { height: 1px; background: var(--color-divider); margin: var(--space-3) 0; }
.nav-section-label {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted);
  padding: 0 var(--space-2) 4px;
}
/* A second group label straight after a run of links ("Shared with you" under
   the departments) needs the breathing room the divider gives the first one. */
.nav-link + .nav-section-label { margin-top: 14px; }
.sidebar-footer { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
/* Light/dark switch, just above "Signed in as". */
.theme-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: var(--space-3); padding: 7px 10px;
  font: inherit; font-size: 13px; color: var(--color-muted-2); background: var(--color-surface-2);
  border: 1px solid var(--color-divider); border-radius: var(--radius); cursor: pointer; text-align: left;
}
.theme-toggle:hover { color: var(--color-text); border-color: var(--color-accent); }
.theme-toggle svg { flex: none; }
.signed-in-as { font-size: 12px; color: var(--color-muted-2); margin-bottom: 6px; }
.signed-in-as strong { color: var(--color-text); }

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

/* ---------- Mobile hamburger nav ----------
   Desktop: the sidebar is always visible (position: sticky, part of the flex
   row) and .mobile-topbar/.sidebar-backdrop/.hamburger-btn stay hidden.
   Below the breakpoint, the sidebar becomes an off-canvas panel (fixed,
   slid out via transform) toggled by the hamburger button in a slim mobile
   topbar that's always present (dashboard has no route topbar of its own,
   so this is the one place a toggle can always live). */
.mobile-topbar { display: none; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); background: var(--color-surface); position: sticky; top: 0; z-index: 30; }
.mobile-topbar-brand { font-family: var(--font-heading); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; color: var(--color-text); }
.hamburger-btn {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--color-divider);
  background: var(--color-surface-2); color: var(--color-text); cursor: pointer;
}
.hamburger-btn:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.sidebar-backdrop { display: none; }

@media (max-width: 860px) {
  .mobile-topbar { display: flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 260px; max-width: 82vw;
    transform: translateX(-100%); transition: transform .22s ease; z-index: 70;
  }
  .shell.sidebar-open .sidebar { transform: translateX(0); box-shadow: 12px 0 32px rgba(0,0,0,.5); }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 60; }
}

.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-divider); background: var(--color-bg);
}
.topbar h6 { margin: 0; color: var(--color-accent-700); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.topbar h3 { margin: 2px 0 0; font-size: 20px; }
/* flex-wrap above + these two together: on a narrow screen the fixed-width
   search box + Add button no longer fit next to the title, so the whole
   actions group drops to its own row instead of forcing the topbar (and
   the whole page) wider than the viewport — a real overflow bug caught by
   actually testing at mobile width, not just assumed fine. */
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.search-wrap { position: relative; width: 240px; max-width: 100%; flex: 1 1 160px; }
.search-wrap svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); opacity: .55; width: 15px; height: 15px; }
.search-wrap input { padding-left: 30px; }

.content { flex: 1; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); min-height: 0; }

.hero { margin: auto; width: 100%; max-width: 1180px; display: flex; flex-direction: column; align-items: center; }
.hero-wordmark { text-align: center; padding: var(--space-6) 0 var(--space-8); }
.hero-icon { height: 130px; width: auto; display: block; margin: 0 auto var(--space-4); }
/* The PRACTOS wordmark: PRACT in the accent, OS muted, so the "OS" reads.
   All caps wants a little tracking rather than the tight spacing a mixed-case
   word gets. clamp() shrinks it smoothly on narrow screens instead of letting
   it wrap or clip (min 32px, 9% of viewport width, capped at 64px). */
.hero-wordmark .brand { font-family: var(--font-heading); font-weight: 700; font-size: clamp(32px, 9vw, 64px); letter-spacing: 0.06em; line-height: 1; white-space: nowrap; }
.hero-wordmark .brand b { color: var(--color-accent); font-weight: 700; }
.hero-wordmark .brand span { color: var(--color-muted); }

.card-grid { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
@media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }

.dept-card, .tool-card {
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  padding: var(--space-4); cursor: pointer; position: relative; text-align: left;
}
.dept-card svg, .tool-card > svg { color: var(--color-accent); width: 20px; height: 20px; }
.dept-card h4, .tool-card h4 { margin: var(--space-3) 0 2px; font-size: 15px; }
.tool-card-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; }

.section-label { margin: 0 0 var(--space-3); color: var(--color-muted-2); font-size: 15px; font-weight: 600; }


.empty-state {
  border: 1px dashed var(--color-divider); border-radius: var(--radius-lg); padding: var(--space-8);
  text-align: center; color: var(--color-muted);
}

/* ---------- Users (admin-only account management) ---------- */
.users-group { margin-bottom: var(--space-6); }
.users-list { display: flex; flex-direction: column; gap: 8px; }
.user-row.is-disabled { opacity: .58; }
.section-access { margin-bottom: 32px; }
.section-access > p { color: var(--color-muted); }
.section-access-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 16px; }
.section-access-card { padding: 20px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.section-access-card h5 { margin: 0 0 14px; }
.section-access-card label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; cursor: pointer; }
.section-access-card input { accent-color: var(--color-accent); }
.section-access-card p, .section-access-status { font-size: 12px; color: var(--color-muted); }
.section-access-status { display: block; margin-top: 10px; }
.dashboard-scope { margin: 8px 0 26px; }
.dashboard-scope h3 { margin: 0 0 6px; }
.dashboard-scope p { margin: 0; color: var(--color-muted); }
.account-panel {
  width: 100%; max-width: 480px; padding: clamp(20px, 5vw, 32px);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-xl);
}
.password-screen { padding: 32px 16px; }
.password-card {
  width: 100%; max-width: 460px; padding: clamp(20px, 5vw, 32px);
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl); box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.password-card .account-panel { padding: 0; border: 0; background: transparent; }
.password-card .login-logo { max-width: 160px; margin-bottom: 28px; }
.password-heading { margin-bottom: 20px; }
.password-eyebrow { display: block; color: var(--color-accent-700); font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.password-heading h2 { font-size: clamp(23px, 5vw, 28px); letter-spacing: -.025em; line-height: 1.2; }
.password-heading p { margin: 10px 0 0; color: var(--color-muted-2); font-size: 14px; line-height: 1.6; }
.password-identity { display: grid; gap: 4px; padding: 14px 16px; margin-bottom: 24px; background: var(--color-surface-2); border-radius: var(--radius); overflow-wrap: anywhere; }
.password-identity strong { font-size: 14px; }
.password-identity span { color: var(--color-muted); font-size: 12px; }
.password-form { display: grid; gap: 20px; }
.password-form .field { gap: 8px; }
.password-form label { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--color-text); }
.password-form .input, .password-form > .btn { min-height: 44px; }
.password-form .input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.password-help { margin: 0; color: var(--color-muted); font-size: 12px; line-height: 1.5; }
.password-session-note { text-align: center; }
.password-message { margin: 0; padding: 12px; background: var(--color-surface-2); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; }
.password-message:empty { display: none; }
.password-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; border-top: 1px solid var(--color-divider); margin-top: 24px; padding-top: 16px; color: var(--color-muted); font-size: 12px; }
.password-footer .btn { font-size: 12px; }
.user-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  padding: 10px var(--space-4);
}
.user-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-row-main strong { font-size: 14px; }
.user-row-meta { font-size: 12px; color: var(--color-muted); }
.user-row-meta code { background: var(--color-surface-2); border-radius: 4px; padding: 1px 6px; font-size: 11.5px; color: var(--color-accent-700); }
.user-row-actions { display: flex; gap: 2px; flex: none; }

.dialog-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center;
  z-index: 30; padding: var(--space-4);
}
.dialog {
  width: min(480px, 100%); max-height: 90vh; overflow: auto;
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,.55); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4);
}
.dialog-title { font-size: 18px; font-weight: 600; margin-bottom: var(--space-2); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); }
.seg { display: flex; border: 1px solid var(--color-divider); border-radius: var(--radius); overflow: hidden; }
.seg-opt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 0; font-size: 13px; cursor: pointer; }
.seg-opt:not(:last-child) { border-right: 1px solid var(--color-divider); }
.seg-opt input { accent-color: var(--color-accent); }
.type-toggle { display: flex; gap: var(--space-3); }
.type-toggle label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.type-toggle input { accent-color: var(--color-accent); }

/* ---- native tool view (mounted inline — no iframe, no reload) ---- */
.tool-view { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--color-bg); }
.tool-view-crumb {
  display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4);
}
.tool-view-crumb button {
  display: flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--color-muted);
  font-size: 13px; cursor: pointer; padding: 4px 0;
}
.tool-view-crumb button:hover { color: var(--color-accent-700); }
.tool-mount { flex: 1; min-height: 0; display: flex; }

/* ---- external tool viewer overlay (iframe, for links we don't own) ---- */
.viewer-overlay { position: fixed; inset: 0; z-index: 20; background: var(--color-bg); display: flex; flex-direction: column; }
.viewer-bar {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider); background: var(--color-surface);
}
.viewer-bar strong { font-size: 14px; }
.viewer-frame { flex: 1; border: 0; width: 100%; background: var(--color-bg); }
.viewer-fallback {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
  color: var(--color-muted-2); text-align: center; padding: var(--space-6);
}
.viewer-fallback p { max-width: 420px; margin: 0; }

/* ============================================================
   Team pages (#/team/<id>): a team's shared board and its tools
   ============================================================ */
.team-page { width: 100%; }
.team-tools { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.team-tool-card {
  position: relative; min-width: 320px; max-width: 520px;
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
}
.team-tool-card:hover { border-color: var(--color-accent); }
/* The whole card is the button; admin's Edit/Delete sit on top of it, which is
   why they cannot be nested inside it. */
.team-tool-open {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-4); padding-right: var(--space-8); font: inherit; text-align: left; cursor: pointer;
  color: var(--color-text); background: none; border: 0; border-radius: inherit;
}

.team-tool-icon { display: flex; color: var(--color-accent); }
.team-tool-text { display: flex; flex-direction: column; gap: 2px; }
.team-tool-text strong { font-size: 15px; font-weight: 600; }
.team-tool-text small { font-size: 12.5px; color: var(--color-muted); }
/* The board is this page's main content, not a section hung off the bottom of
   a dashboard, so it does not need the full dashboard-sized gap above it. */
.team-page .planner { margin-top: var(--space-6); }

/* ============================================================
   Dashboard job planner (Trello-style board)
   ============================================================ */
.planner { width: 100%; margin-top: var(--space-8); }
.planner-head { margin-bottom: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.planner-head .section-label { margin: 0; }
.planner-board-switch { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-muted); }
.planner-board-switch select.input { width: auto; min-width: 180px; padding: 6px 10px; font-size: 12.5px; }
.planner-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .planner-columns { grid-template-columns: 1fr; } }

.planner-col {
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  padding: var(--space-3); display: flex; flex-direction: column; gap: 8px; min-height: 110px;
}
.planner-col-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 6px; }
.planner-col-title { font-size: 13px; font-weight: 700; color: var(--color-text); text-transform: uppercase; letter-spacing: .03em; }
.planner-col-count { font-size: 11px; color: var(--color-muted); background: var(--color-surface-2); border-radius: 999px; padding: 1px 9px; }
.planner-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 44px; }
.planner-col-body.drag-over { outline: 1.5px dashed var(--color-divider); outline-offset: 4px; border-radius: var(--radius); }

.planner-card {
  position: relative; background: var(--color-surface-2); border-radius: var(--radius);
  /* --card-ink is set per card in renderPlanner: white for your own cards,
     the author's assigned color for anyone else's. Held back from full
     strength so a column of cards reads as a list, not a set of warning
     labels; hover brings the real color forward. */
  border: 1px solid color-mix(in srgb, var(--card-ink, var(--color-divider)) var(--ink-strength, 62%), transparent);
  padding: 10px 30px 10px 12px; font-size: 13px; line-height: 1.45; color: var(--color-text); cursor: grab;
  overflow-wrap: anywhere; touch-action: none; user-select: none;
  transition: border-color .15s;
}
.planner-card:hover { border-color: var(--card-ink, var(--color-divider)); }
/* A personal to-do: full white, never held back, so it reads as private at a
   glance. */
.planner-card.is-personal { border-color: var(--planner-mine); }
.planner-card:active { cursor: grabbing; }
.planner-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; margin-top: 6px; }
.planner-card-meta:empty { display: none; }
.planner-card-from {
  font-size: 11px; letter-spacing: .01em;
  color: color-mix(in srgb, var(--card-ink, var(--color-muted)) 78%, var(--color-muted));
}
/* A Practically 90 team to-do: the same card, also visible to that team. */
.planner-card-team {
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; border-radius: 999px; padding: 1px 7px;
  background: var(--color-accent-wash); color: var(--color-accent-700);
}
/* Leadership board: who the card is for, in their color; click to reassign. */
.planner-card-owner {
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .01em; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 999px; padding: 0 6px; margin-left: -6px;
  color: var(--card-ink, var(--color-muted));
}
.planner-card-owner:hover, .planner-card-owner:focus-visible { border-color: var(--color-divider); }
.planner-board-note { font-size: 12px; color: var(--color-muted); }
/* Handed to you since you last opened this board. */
.planner-card.is-new { border-color: var(--card-ink, var(--color-divider)); }
.planner-card-new {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-bg); background: var(--card-ink, var(--color-accent));
  border-radius: 999px; padding: 1px 7px;
}

/* ---- due dates ----
   A chip on the card, and the same chip read-only in the sent list. Urgency is
   worked out client-side against the reader's own today (see dueMeta) — the
   colour only ever reflects what that returned. */
.planner-due {
  font: inherit; font-size: 11px; line-height: 1.4; cursor: pointer;
  background: var(--color-surface-3); color: var(--color-muted-2);
  border: 1px solid transparent; border-radius: 999px; padding: 1px 8px;
}
button.planner-due:hover { border-color: var(--color-divider); color: var(--color-text); }
.planner-due.is-unset { opacity: 0; transition: opacity .15s; }
.planner-card:hover .planner-due.is-unset, .planner-due.is-unset:focus-visible { opacity: 1; }
/* Hover is how you find the empty chip on a desktop; on a touch screen there
   is no hover, so it has to be there all the time or a date can never be added
   to a card from a phone. */
@media (hover: none) { .planner-due.is-unset { opacity: 1; } }
.planner-due.is-soon { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.planner-due.is-today { background: color-mix(in srgb, var(--amber) 26%, transparent); color: var(--amber); font-weight: 600; }
.planner-due.is-overdue { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); font-weight: 600; }
.planner-due.is-met { background: transparent; color: var(--color-muted); text-decoration: line-through; }
/* A repeating card: finishing it puts the next one in To Do. Hover-only when
   unset, like the due chip, and always there on touch screens. */
.planner-repeat {
  font: inherit; font-size: 11px; line-height: 1.4; cursor: pointer;
  background: var(--color-accent-wash); color: var(--color-accent-700);
  border: 1px solid transparent; border-radius: 999px; padding: 1px 8px;
}
button.planner-repeat:hover { border-color: var(--color-divider); }
.planner-repeat.is-unset { background: var(--color-surface-3); color: var(--color-muted-2); opacity: 0; transition: opacity .15s; }
.planner-card:hover .planner-repeat.is-unset, .planner-repeat.is-unset:focus-visible { opacity: 1; }
@media (hover: none) { .planner-repeat.is-unset { opacity: 1; } }
.planner-card.is-done .planner-repeat.is-unset { display: none; }
.planner-due-picker { width: auto; padding: 2px 6px; font-size: 11.5px; min-height: 0; }
.planner-due-field { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-muted); }
.planner-due-field input { width: auto; padding: 5px 8px; font-size: 12.5px; }

/* ---- what you have sent ---- */
.planner-sent-toggle {
  background: none; border: 0; padding: 0; cursor: pointer; font-size: 12px;
  color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px;
}
.planner-sent-toggle:hover { color: var(--color-text); }
.planner-sent {
  display: flex; flex-direction: column; gap: 1px; margin: 0 0 var(--space-3);
  background: var(--color-divider); border: 1px solid var(--color-divider);
  border-radius: var(--radius); overflow: hidden;
}
.planner-sent-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  background: var(--color-surface); padding: 8px 12px; font-size: 12.5px;
}
.planner-sent-who { font-weight: 600; color: var(--card-ink, var(--color-text)); min-width: 110px; }
.planner-sent-text { flex: 1; min-width: 160px; color: var(--color-text); overflow-wrap: anywhere; }
.planner-sent-state {
  font-size: 11px; border-radius: 999px; padding: 1px 9px;
  background: var(--color-surface-3); color: var(--color-muted-2);
}
.planner-sent-state.is-doing { background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent-700); }
.planner-sent-state.is-done { background: color-mix(in srgb, #4ade80 18%, transparent); color: #86efac; }
:root[data-theme="light"] .planner-sent-state.is-done { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.planner-sent-seen { font-size: 11px; color: var(--color-muted); min-width: 92px; text-align: right; }
.planner-card.is-done .planner-card-text { color: var(--color-muted); }
.planner-card.dragging { opacity: .35; }
.planner-card-check { color: #6ee7b7; margin-right: 5px; display: inline-flex; vertical-align: -2px; }
:root[data-theme="light"] .planner-card-check { color: #059669; }
/* People's board colors are picked to glow on black; as text on white, the
   yellows and limes wash out, so text in a person's color is deepened. */
:root[data-theme="light"] .planner-card-from,
:root[data-theme="light"] .planner-card-owner,
:root[data-theme="light"] .planner-sent-who { color: color-mix(in srgb, var(--card-ink) 55%, #111); }
:root[data-theme="light"] .planner-card-new { color: #111; }
.planner-card-text[contenteditable="true"] {
  user-select: text; cursor: text; outline: 1px dashed var(--color-accent); outline-offset: 2px; border-radius: 2px;
}
.planner-card-remove {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; padding: 0; border: 0; background: transparent;
  color: var(--color-muted); cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, background .15s, color .15s;
}
.planner-card:hover .planner-card-remove { opacity: 1; }
.planner-card-remove:hover { background: var(--color-surface-3); color: var(--color-text); }

.planner-add-trigger {
  display: flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--color-muted); font-size: 13px;
  padding: 8px 6px; cursor: pointer; border-radius: var(--radius); text-align: left; width: 100%; justify-content: flex-start;
}
.planner-add-trigger:hover { background: var(--color-surface-2); color: var(--color-text); }
.planner-add-form { display: flex; flex-direction: column; gap: 6px; }
.planner-add-input { min-height: 60px; font-size: 13px; resize: vertical; }
.planner-add-actions { display: flex; align-items: center; gap: 8px; }
.planner-add-actions .btn { width: auto; min-height: 32px; padding: 6px 12px; font-size: 12.5px; }
.planner-send { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 var(--space-3); }
.planner-send .btn { width: auto; min-height: 32px; padding: 6px 12px; font-size: 12.5px; }
.planner-send.is-open {
  flex-direction: column; align-items: stretch; gap: 8px; max-width: 420px;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: var(--space-3);
}
.planner-send-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-muted); }
.planner-send-row select.input { width: auto; flex: 1; padding: 6px 10px; font-size: 12.5px; }
.planner-send-input { min-height: 60px; font-size: 13px; resize: vertical; }
.planner-send-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.planner-send-note, .planner-send-status { font-size: 11.5px; color: var(--color-muted); }
.planner-send-note { flex: 1 1 100%; }
.nav-badge {
  margin-left: auto; font-size: 10.5px; font-weight: 700; line-height: 1.6;
  min-width: 18px; text-align: center; border-radius: 999px; padding: 0 6px;
  background: var(--danger); color: var(--color-bg);
}
.planner-note, .planner-error { margin: 0 0 var(--space-3); font-size: 12.5px; color: var(--color-muted); }
.planner-error { color: var(--danger); }
.planner-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 var(--space-3); font-size: 12px; color: var(--color-muted); }
.planner-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.planner-legend-item i, .user-row-swatch {
  width: 10px; height: 10px; border-radius: 3px; flex: none;
  border: 1.5px solid var(--card-ink, var(--color-divider));
}
.user-row-swatch { display: inline-block; margin-right: 7px; vertical-align: 0; }
.check-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; cursor: pointer; }
.check-row input { margin: 2px 0 0; flex: none; }
/* .field label is the small uppercase caption style; a checkbox row is content,
   not a caption, and tool names in all caps are hard to scan. */
.field label.check-row { text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 400; color: var(--color-text); }

/* Per-person tool grants in the Edit User dialog. Capped and scrollable so a
   long catalog can't push the Save button off the bottom of the dialog. */
.grant-groups {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 18px;
  max-height: 240px; overflow-y: auto; padding: 10px 12px; margin-top: 6px;
  border: 1px solid var(--color-divider); border-radius: var(--radius); background: var(--color-surface-2);
}
.grant-group { display: flex; flex-direction: column; gap: 6px; }
.grant-group-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.grant-count {
  margin-left: 6px; font-size: 10.5px; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--color-accent-700); background: var(--color-accent-wash); border-radius: 999px; padding: 1px 8px;
}
.check-row input:disabled + *, .check-row:has(input:disabled) { cursor: default; color: var(--color-muted); }

/* ---- printing from inside a mounted tool (window.print()) ----
   A native tool may call window.print() to let someone "save as PDF"
   whatever it renders. Without this, the shell's own sidebar/topbar/crumb
   would print alongside it. Any tool that wants a clean print should scope
   its own print rules under its wrapper class as normal (see
   tools/txt-to-pdf/tool.js for an example) — this just clears the shell
   chrome out of the way so the tool's own print CSS is what shows. */
@media print {
  .sidebar, .topbar, .tool-view-crumb, .mobile-topbar, .sidebar-backdrop { display: none !important; }
  body, .shell, .main, .content, .tool-view, .tool-mount { display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: #fff !important; }
}

/* Personal tool-card ordering. Handles work with mouse, touch, or arrow keys. */
.card-drag-handle { cursor:grab; touch-action:none; user-select:none; border:0; background:transparent; color:var(--color-muted); padding:6px; font-size:22px; line-height:1; border-radius:5px; }
.card-drag-handle:hover,.card-drag-handle:focus-visible { color:var(--color-text); background:var(--color-surface-2); outline:2px solid var(--color-accent-700); }
.tool-card > .card-drag-handle { position:absolute; left:5px; top:5px; }
.tool-card[data-tool-order] { padding-top:38px; }
.team-tool-card > .card-drag-handle { align-self:center; flex-shrink:0; margin-left:6px; }
.card-reordering { opacity:.65; outline:2px solid var(--color-accent-700); }
.card-order-saving .card-drag-handle { pointer-events:none; opacity:.4; }
.card-order-message { display:block; color:var(--color-muted); font-size:12px; min-height:18px; margin:6px 0; }