/* Work module -- S0 scaffold styles (calm visual language).
 *
 * Folds the approved calm mockup (_mockups/work-system/mk-calm.css +
 * my-day-calm.html) into module-scoped CSS. Everything uses PLATFORM CSS
 * custom properties via the var() function; the mockup's proposed Work palette
 * (--wk-* -- cyan Captured, violet Waiting, etc.) is defined here, scoped to
 * the module, for BOTH themes (dark default + [data-theme="light"]). No
 * hardcoded UI colors outside those token definitions. ASCII only.
 *
 * SCOPING: index.css is loaded globally (a shell <link>), so every container
 * rule is prefixed with [data-module="work"] (the attribute the platform sets
 * on the active module container) so nothing bleeds onto unrelated .work-*
 * DOM elsewhere. Only the --wk-* token definitions are attached to bare
 * .work-root -- they define nothing that paints.
 *
 * S0 renders the shell (left subnav rail + lens body) and calm stub
 * placeholders. The lens list / row styles the tokens support land with the
 * lens slices (S2-S5).
 */

/* ------------------------------------------------------------------ *
 *  Work reason + lifecycle palette (mockup proposal) -- module-scoped
 *  token definitions so they never leak into :root. Dark is the default.
 *  (Token-only blocks; kept on bare .work-root by design.)
 * ------------------------------------------------------------------ */
.work-root {
  --wk-planned: #667eea;                 /* indigo -- planned for today */
  --wk-planned-soft: rgba(102, 126, 234, 0.15);
  --wk-due: #fbbf24;                      /* amber -- due today */
  --wk-due-soft: rgba(251, 191, 36, 0.14);
  --wk-overdue: #f87171;                  /* red -- past due */
  --wk-overdue-soft: rgba(248, 113, 113, 0.14);
  --wk-captured: #22d3ee;                 /* cyan -- captured today (triage) */
  --wk-captured-soft: rgba(34, 211, 238, 0.13);
  --wk-captured-line: rgba(34, 211, 238, 0.32);
  --wk-waiting: #a78bfa;                  /* violet -- blocked / waiting-on */
  --wk-waiting-soft: rgba(167, 139, 250, 0.15);
  --wk-done: #34d399;                     /* green -- done */
  --wk-done-soft: rgba(52, 211, 153, 0.13);
  --wk-dropped: #6b7280;                  /* grey -- dropped */
  --wk-dropped-soft: rgba(107, 114, 128, 0.14);
  --wk-overhead: #7f9cf5;                 /* steel -- off-gen / overhead */
  --wk-overhead-soft: rgba(127, 156, 245, 0.13);
  --wk-overhead-line: rgba(127, 156, 245, 0.30);
}

[data-theme="light"] .work-root {
  --wk-planned: #4f6ce5;
  --wk-planned-soft: rgba(79, 108, 229, 0.12);
  --wk-due: #d97706;
  --wk-due-soft: rgba(217, 119, 6, 0.14);
  --wk-overdue: #dc2626;
  --wk-overdue-soft: rgba(220, 38, 38, 0.12);
  --wk-captured: #0891b2;
  --wk-captured-soft: rgba(8, 145, 178, 0.12);
  --wk-captured-line: rgba(8, 145, 178, 0.30);
  --wk-waiting: #7c3aed;
  --wk-waiting-soft: rgba(124, 58, 237, 0.12);
  --wk-done: #059669;
  --wk-done-soft: rgba(5, 150, 105, 0.12);
  --wk-dropped: #9ca3af;
  --wk-dropped-soft: rgba(156, 163, 175, 0.16);
  --wk-overhead: #5b74d1;
  --wk-overhead-soft: rgba(91, 116, 209, 0.11);
  --wk-overhead-line: rgba(91, 116, 209, 0.28);
}

/* ------------------------------------------------------------------ *
 *  Shell -- left subnav rail + lens content (mirrors the calm mockup
 *  rail chrome, adapted to sit inside the platform module frame).
 *  All container rules are scoped under [data-module="work"].
 * ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ *
 *  Full-bleed shell: the platform sidebar owns MODULES; the horizontal
 *  tab strip below owns LENSES. No nested vertical rail, no card frame
 *  (fullBleed drops the platform's module padding) -- so Work no longer
 *  reads as "a module within a module". Mirrors studio-overview's
 *  horizontal so-toggle convention.
 * ------------------------------------------------------------------ */
[data-module="work"] .work-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  background: var(--bg);
}

[data-module="work"] .work-topbar {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 12px 30px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  overflow-x: auto;
}

[data-module="work"] .work-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
}

[data-module="work"] .work-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  border-radius: calc(var(--button-radius) - 2px);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  min-height: 32px;
}

[data-module="work"] .work-tab-ic {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  flex: 0 0 auto;
}

[data-module="work"] .work-tab-label { white-space: nowrap; }

[data-module="work"] .work-tab:hover {
  background: var(--row-hover);
  color: var(--text-primary);
}

[data-module="work"] .work-tab.is-active {
  background: var(--panel);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

[data-module="work"] .work-tab.is-active .work-tab-ic { opacity: 1; }

[data-module="work"] .work-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[data-module="work"] .work-tab.is-disabled {
  color: var(--text-tertiary);
  cursor: default;
  opacity: 0.7;
}

[data-module="work"] .work-tab.is-disabled:hover { background: transparent; color: var(--text-tertiary); }

[data-module="work"] .work-tab-soon {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 800;
  color: var(--text-tertiary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 6px;
  flex: 0 0 auto;
}

[data-module="work"] .work-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* ------------------------------------------------------------------ *
 *  Lens header -- quiet, calm (My Day mockup .calm-head).
 * ------------------------------------------------------------------ */
[data-module="work"] .work-head {
  padding: 22px 30px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}

[data-module="work"] .work-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

[data-module="work"] .work-title {
  font-family: var(--font-display, inherit);
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

[data-module="work"] .work-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 5px;
}

/* ------------------------------------------------------------------ *
 *  Calm placeholder (S0 stub body).
 * ------------------------------------------------------------------ */
[data-module="work"] .work-body-inner {
  flex: 1 1 auto;
  padding: 30px;
}

[data-module="work"] .work-placeholder {
  max-width: 560px;
  padding: 26px 26px 28px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--panel-radius);
  background: var(--panel);
}

[data-module="work"] .work-ph-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 14px;
}

[data-module="work"] .work-ph-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------ *
 *  Responsive -- collapse the rail to a horizontal scroller at phone
 *  width so the lens body gets the room.
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
  [data-module="work"] .work-root { min-height: 0; }

  /* Phone: the tab strip scrolls horizontally so "Projects + Overhead" never
     wraps or truncates; tighter gutters. */
  [data-module="work"] .work-topbar {
    padding: 10px 16px;
  }

  [data-module="work"] .work-tab {
    padding: 8px 12px;
    min-height: 40px;
  }

  [data-module="work"] .wp-modal-in,
  .strata-modal .wp-modal-in {
    font-size: 16px;
  }

  [data-module="work"] .work-head { padding: 18px 18px 14px; }
  [data-module="work"] .work-body-inner { padding: 18px; }
}