/* ============================================================================
   SA Mgmt Dashboard — design system ported from the Lumen/Alkira portal
   (lumen-tools static/style.css + portal.css) so the two sites read as one
   family: navy app-header with the co-branded logos, parchment canvas,
   Montserrat body + Source Serif 4 headings, soft-elevation cards.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@400;500&family=Ubuntu+Mono&family=Source+Serif+4:wght@400;500;600&display=swap');

:root {
  /* Alkira brand */
  --green-130: #2dbd8f;
  --green-120: #57e5b2;
  --green-140: #1f8a68;
  --navy-100: #2b56f0;
  --navy-80: #5a7ff5;
  --navy-0: #f4f7fd;
  --navy-10: #dbe4fd;
  --orange-90: #f16822;
  --rose-90: #cd4556;

  /* Cool editorial surfaces */
  --parchment: #f4f7fd;
  --ivory: #fbfcfe;
  --border-cream: #e3e9f4;
  --border-warm: #ccd6ea;
  --text-warm: #0f1e3d;
  --text-olive: #3a4a6b;
  --text-stone: #6c7a96;

  /* Semantic */
  --bg: var(--parchment);
  --surface-raised: #ffffff;
  --border: var(--border-cream);
  --text: var(--text-warm);
  --text-secondary: var(--text-olive);
  --text-tertiary: var(--text-stone);
  --primary: var(--navy-100);
  --primary-dark: #1d3fc7;
  --accent: var(--green-130);
  --err: #cd4556;
  --ok: var(--green-140);

  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Ubuntu Mono', ui-monospace, monospace;

  --shadow-sm: 0 1px 0 0 rgba(20, 20, 19, .04), 0 0 0 1px var(--border-cream);
  --shadow-md: rgba(0, 0, 0, .05) 0 4px 24px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-serif); letter-spacing: -.01em; }

/* ── co-branded app header ─────────────────────────────────────────────── */
.app-header {
  background: var(--navy-100);
  height: 64px;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.lt-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.lt-brand img { display: block; }
.lt-logo-al { height: 22px; }
.lt-logo-lm { height: 20px; position: relative; top: 1px; }
.lt-brand-div { width: 2px; height: 26px; background: rgba(255, 255, 255, .35); border-radius: 1px; }
.app-header-title {
  font-family: var(--font-serif);
  font-size: 19px; font-weight: 600; color: #fff;
  letter-spacing: -.02em; white-space: nowrap;
}
.app-header-home { text-decoration: none; }
.app-header-right { display: flex; align-items: center; gap: 18px; }

/* ── account menu (avatar → email + sign out) ── */
.user-menu { position: relative; }
.user-avatar {
  width: 34px; height: 34px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; display: grid; place-items: center;
  transition: background .15s, border-color .15s;
}
.user-avatar:hover { background: rgba(255, 255, 255, .28); }
.user-avatar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.user-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 200;
  min-width: 230px; padding: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--border-cream); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 30, 61, .18);
}
.user-dropdown[hidden] { display: none; }
.user-dropdown-email {
  padding: 10px 12px 11px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border-cream);
  font-size: 12.5px; color: var(--text-secondary);
  word-break: break-all;
}
.user-dropdown-signout {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--text-warm); text-decoration: none;
}
.user-dropdown-signout:hover { background: var(--navy-0); color: var(--primary); }

/* ── shell + sidebar ───────────────────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 64px);
  max-width: 1600px;
  margin: 0 auto;
}
.app-sidebar { background: transparent; border-right: 1px solid var(--border-cream); }
.app-sidebar-nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 28px 16px; position: sticky; top: 64px;
}
.app-sidebar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 8px;
  color: var(--text-secondary); text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  transition: background .15s, color .15s;
}
.app-sidebar-item:hover { background: var(--navy-0); color: var(--text-warm); }
.app-sidebar-item.is-active { background: var(--primary); color: #fff; font-weight: 600; }
.app-sidebar-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border-warm); flex-shrink: 0;
}
.app-sidebar-item.is-active .app-sidebar-dot { background: rgba(255, 255, 255, .8); }

.app-main { padding: 32px 40px 64px; min-width: 0; }

/* ── page furniture ────────────────────────────────────────────────────── */
.page-head { margin-bottom: 24px; }
.page-head h1 { margin: 0 0 4px; font-size: 28px; font-weight: 600; }
.page-head .blurb { margin: 0; color: var(--text-secondary); font-size: 14px; }

.back-link {
  display: inline-block; margin-bottom: 16px;
  font-size: 13px; font-weight: 600;
  color: var(--primary); text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

.empty {
  background: var(--surface-raised); border: 1px solid var(--border-cream);
  border-radius: 14px; padding: 44px; text-align: center; box-shadow: var(--shadow-sm);
}
.empty h2 { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
.empty p { margin: 0 auto 8px; max-width: 520px; color: var(--text-secondary); }
.empty code {
  font-family: var(--font-mono); background: var(--navy-0);
  border-radius: 4px; padding: 1px 6px; font-size: 13px;
}
.empty .pending {
  margin-top: 18px; display: inline-block;
  background: #fff7ed; color: #9a3412;
  border: 1px solid #fed7aa; border-radius: 999px;
  padding: 5px 14px; font-size: 12.5px; font-weight: 500;
}

/* Row count / freshness line above a data table. */
.table-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 10px; font-size: 12px; color: var(--text-tertiary);
}
/* Wide tables scroll inside their own box — the page never scrolls sideways. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-cream); border-radius: 12px;
  box-shadow: var(--shadow-sm); background: var(--surface-raised);
}
.table-scroll table { border: 0; border-radius: 0; box-shadow: none; }
.table-scroll td { white-space: nowrap; }
.cell-empty { color: var(--text-tertiary); }

table {
  width: 100%; border-collapse: collapse;
  background: var(--surface-raised); border: 1px solid var(--border-cream);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);
}
th, td { padding: 11px 15px; text-align: left; border-bottom: 1px solid var(--border-cream); }
th {
  background: var(--navy-0); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary);
}
tr:last-child td { border-bottom: 0; }

.foot {
  padding: 22px 40px; text-align: center;
  color: var(--text-tertiary); font-size: 12px;
  border-top: 1px solid var(--border-cream);
}

/* ── login ─────────────────────────────────────────────────────────────── */
.login-body {
  display: grid; place-items: center; min-height: 100vh; padding: 24px;
  background: linear-gradient(160deg, #1d3fc7 0%, var(--navy-100) 45%, #4a70f3 100%);
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--surface-raised); border-radius: 16px; padding: 36px;
  box-shadow: 0 18px 48px rgba(15, 30, 61, .22);
}
/* Logos are white PNGs, so they sit on a navy strip rather than the white card. */
.login-brand {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  margin-bottom: 28px; padding: 15px 18px;
  background: var(--navy-100); border-radius: 12px;
}
.login-brand img { display: block; }
.login-brand .lt-logo-al { height: 22px; }
.login-brand .lt-logo-lm { height: 20px; position: relative; top: 1px; }
.login-brand .lt-brand-div { width: 2px; height: 26px; background: rgba(255, 255, 255, .35); border-radius: 1px; }
.login-card h1 { margin: 0 0 6px; font-size: 23px; font-weight: 600; }
.login-card .sub { margin: 0 0 24px; color: var(--text-secondary); font-size: 13.5px; }
.login-card label {
  display: block; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary);
}
.login-card input {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--border-warm); border-radius: 9px;
  font-size: 14.5px; font-family: inherit; color: var(--text);
}
.login-card input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(43, 86, 240, .15);
}
#code { letter-spacing: 8px; text-align: center; font-size: 22px; font-weight: 600; }
.login-card button {
  width: 100%; margin-top: 16px; padding: 12px;
  background: var(--primary); color: #fff;
  border: 0; border-radius: 9px;
  font-size: 14.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background .15s;
}
.login-card button:hover:not(:disabled) { background: var(--primary-dark); }
.login-card button:disabled { opacity: .6; cursor: default; }
.login-card .hint { margin: 16px 0 0; color: var(--text-tertiary); font-size: 12px; }
.login-card .hint a { color: var(--primary); }
.msg { margin: 14px 0 0; font-size: 13px; min-height: 1.2em; }
.msg.err { color: var(--err); }
.msg.ok  { color: var(--ok); }

/* ── onboarding ────────────────────────────────────────────────────────── */
.ob-cards {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.ob-card {
  display: block; padding: 24px;
  background: var(--surface-raised); border: 1px solid var(--border-cream);
  border-radius: 14px; text-decoration: none; color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.ob-card:hover {
  border-color: var(--primary); transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(43, 86, 240, .10);
}
.ob-card h2 { margin: 0 0 7px; font-size: 19px; font-weight: 600; }
.ob-card p  { margin: 0 0 16px; font-size: 13.5px; color: var(--text-secondary); }
.ob-card-cta { font-size: 13px; font-weight: 600; color: var(--primary); }
/* Access caveat — e.g. a card that needs the corp VPN. */
.ob-card-note {
  display: block; margin-top: 12px;
  font-size: 11.5px; color: var(--text-tertiary);
}

.ob-guide {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; margin-bottom: 24px;
  background: var(--surface-raised); border: 1px solid var(--border-cream);
  border-radius: 14px; text-decoration: none; color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}
.ob-guide:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(43, 86, 240, .1); }
.ob-guide-title { display: block; font-size: 15px; font-weight: 600; }
.ob-guide-desc  { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-secondary); }

.ob-layout { display: grid; grid-template-columns: 230px 1fr; gap: 24px; align-items: start; }
.ob-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 12px; }

.ob-progress {
  background: var(--surface-raised); border: 1px solid var(--border-cream);
  border-radius: 14px; padding: 18px; box-shadow: var(--shadow-sm);
}
.ob-progress-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--primary); margin-bottom: 7px;
}
.ob-progress-value {
  font-family: var(--font-serif); font-size: 24px; font-weight: 600;
  line-height: 1; margin-bottom: 10px;
}
.ob-progress-track { height: 6px; background: var(--border-cream); border-radius: 999px; overflow: hidden; }
.ob-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--navy-100) 0%, var(--green-120) 100%);
  border-radius: 999px; transition: width .35s ease;
}
.ob-progress-meta { margin-top: 9px; font-size: 11.5px; color: var(--text-secondary); }

.ob-views {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface-raised); border: 1px solid var(--border-cream);
  border-radius: 10px; box-shadow: var(--shadow-sm);
}
.ob-view {
  flex: 1; padding: 7px 6px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-secondary);
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.ob-view:hover { color: var(--text-warm); }
.ob-view.is-active { background: var(--primary); color: #fff; }

.ob-reset {
  padding: 9px; border: 1px solid var(--border-cream); border-radius: 9px;
  background: var(--surface-raised); color: var(--text-tertiary);
  font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}
.ob-reset:hover { color: var(--err); border-color: #f0c2c8; }

.ob-checklist-card {
  background: var(--surface-raised); border: 1px solid var(--border-cream);
  border-radius: 14px; padding: 24px; box-shadow: var(--shadow-sm);
}
.ob-checklist-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-bottom: 15px; margin-bottom: 20px;
  border-bottom: 1px solid var(--border-cream);
}
.ob-checklist-head h2 { margin: 0; font-size: 19px; font-weight: 600; }
.ob-checklist-count { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
.ob-checklist-card .ob-group + .ob-group { margin-top: 24px; }

.ob-group-head { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.ob-group-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.ob-group-head p  { margin: 1px 0 0; font-size: 12px; color: var(--text-secondary); }
.ob-group-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy-100) 0%, var(--navy-80) 100%);
}
.ob-icon-vpn       { background: linear-gradient(135deg, #0e7490, #22d3ee); }
.ob-icon-slack     { background: linear-gradient(135deg, #4a154b, #9333ea); }
.ob-icon-vault     { background: linear-gradient(135deg, #0f1e3d, #3a4a6b); }
.ob-icon-jira      { background: linear-gradient(135deg, #5a3ac7, #9b7ef0); }
.ob-icon-training  { background: linear-gradient(135deg, #d68904, #f5c451); }
.ob-icon-resources { background: linear-gradient(135deg, var(--green-140), var(--green-120)); }

/* Section-level hint, e.g. "your manager can get you added". */
.ob-group-note {
  margin: 0 0 10px; padding: 8px 12px;
  background: var(--navy-0); border-left: 3px solid var(--navy-80);
  border-radius: 6px;
  font-size: 12px; color: var(--text-secondary);
}

.ob-list { display: flex; flex-direction: column; gap: 6px; }
.ob-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--surface-raised); border: 1px solid var(--border-cream);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.ob-row:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(43, 86, 240, .08); }
.ob-row.is-hidden { display: none; }
.ob-row.is-done { opacity: .55; }
.ob-row.is-done .ob-name { text-decoration: line-through; }

.ob-box {
  width: 19px; height: 19px; flex-shrink: 0; padding: 0;
  border: 1.5px solid var(--border-warm); border-radius: 5px; background: #fff;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.ob-box:hover { border-color: var(--primary); }
.ob-box::after {
  content: ""; width: 5px; height: 9px; margin-bottom: 2px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transition: transform .15s ease;
}
.ob-row.is-done .ob-box { background: var(--green-130); border-color: var(--green-130); }
.ob-row.is-done .ob-box::after { transform: rotate(45deg) scale(1); }

.ob-info {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0; text-decoration: none; color: inherit;
}
.ob-name { font-size: 13.5px; font-weight: 600; }
.ob-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.ob-desc code {
  font-family: var(--font-mono); background: var(--navy-0);
  border-radius: 4px; padding: 1px 6px; font-size: 12px; word-break: break-all;
}
.ob-action { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--primary); }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-sidebar { border-right: 0; border-bottom: 1px solid var(--border-cream); }
  .app-sidebar-nav { flex-direction: row; overflow-x: auto; padding: 12px 16px; position: static; }
  .app-main { padding: 24px 20px 48px; }
  .ob-layout { grid-template-columns: 1fr; }
  .ob-side { position: static; }
}
@media (max-width: 620px) {
  .app-header { padding: 0 16px; }
  .app-header-title { font-size: 15px; }
  .app-header-right { gap: 12px; }
  .lt-logo-al { height: 18px; }
  .lt-logo-lm { height: 16px; }
}

/* ── stat row + ticket table ────────────────────────────────────────────── */
.stat-row {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.stat {
  background: var(--surface-raised); border: 1px solid var(--border-cream);
  border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.stat-label {
  display: block; margin-bottom: 6px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-tertiary);
}
.stat-value {
  font-family: var(--font-serif); font-size: 26px; font-weight: 600;
  line-height: 1; color: var(--text-warm);
}
.stat-value.is-warn { color: var(--orange-90); }
.stat-unit { font-size: 15px; font-weight: 500; color: var(--text-tertiary); margin-left: 1px; }

.tk-controls {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.tk-views {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface-raised); border: 1px solid var(--border-cream);
  border-radius: 10px;
}
.tk-view {
  padding: 6px 16px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-secondary);
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.tk-view:hover { color: var(--text-warm); }
.tk-view.is-active { background: var(--primary); color: #fff; }
.tk-search {
  flex: 1; min-width: 220px; padding: 8px 12px;
  border: 1px solid var(--border-warm); border-radius: 9px;
  font-family: inherit; font-size: 13px; color: var(--text);
}
.tk-search:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(43, 86, 240, .13);
}
.tk-count { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }

.tk-table td { vertical-align: middle; }
/* max-width on a <td> is ignored in auto table layout, so the clamp goes on an
   inner block — otherwise long subjects spill into the next column. */
.tk-subject span {
  display: block; max-width: 440px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-type { color: var(--text-secondary); font-size: 12.5px; }
.tk-none { padding: 26px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.tk-foot { margin-top: 12px; font-size: 11.5px; color: var(--text-tertiary); }

.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.badge-open { background: #e8f2fe; color: var(--primary-dark); }
.badge-done { background: var(--navy-0); color: var(--text-tertiary); }
.prio-p1 { background: #fdeaec; color: #a3283a; }
.prio-p2 { background: #fff2e6; color: #9a4310; }
.prio-p3 { background: var(--navy-0); color: var(--text-olive); }
.prio-p4 { background: var(--navy-0); color: var(--text-tertiary); }
.prio-na { background: var(--navy-0); color: var(--text-tertiary); }

/* Sidebar section label — separates mounted apps from this portal's own tabs. */
.app-sidebar-group {
  margin: 18px 0 6px; padding: 0 14px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-tertiary);
}

/* An integration that needs attention — distinct from "nothing to show". */
.notice {
  background: var(--surface-raised); border: 1px solid var(--border-cream);
  border-left: 4px solid var(--orange-90);
  border-radius: 14px; padding: 26px 28px; box-shadow: var(--shadow-sm);
}
.notice h2 { margin: 0 0 10px; font-size: 19px; font-weight: 600; }
.notice-detail {
  margin: 0 0 10px; font-family: var(--font-mono); font-size: 13px;
  color: var(--text-warm); background: var(--navy-0);
  padding: 9px 12px; border-radius: 8px; word-break: break-word;
}
.notice-hint { margin: 0; font-size: 13px; color: var(--text-secondary); }

/* A team-dashboard page framed inside our chrome. Sized to the viewport below
   the header; the framed app scrolls internally. */
.embed-frame {
  display: block; width: 100%; height: calc(100vh - 210px); min-height: 520px;
  border: 1px solid var(--border-cream); border-radius: 14px;
  background: var(--surface-raised); box-shadow: var(--shadow-sm);
}

/* ── Support Tickets: filters, charts, export ─────────────────────────────── */
/* The portal is a committed light design — no theme toggle and no
   prefers-color-scheme anywhere — so the charts are drawn for the light
   surface (#ffffff) rather than inverting on a parchment page. The series
   hues are the validated categorical set, applied inline by the renderer in
   fixed slot order; only the chrome lives here. */

.fd-select {
  height: 30px; padding: 0 26px 0 9px;
  border: 1px solid var(--border-cream); border-radius: 6px;
  background: var(--surface-raised) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%236c7a96' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center;
  background-size: 11px; -webkit-appearance: none; appearance: none;
  font: inherit; font-size: 13px; color: var(--text);
  max-width: 190px; text-overflow: ellipsis;
}
.fd-select:focus-visible { outline: 2px solid var(--navy-60); outline-offset: 1px; }

.btn-export {
  height: 30px; display: inline-flex; align-items: center; gap: 5px;
  padding: 0 11px; border: 1px solid var(--border-cream); border-radius: 6px;
  background: var(--surface-raised); color: var(--text-secondary);
  font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.btn-export:hover { background: var(--navy-0); color: var(--text); }

/* Same segmented control as .tk-views, sized down: it sits over the charts
   rather than heading the page, so it should read as a chart control. */
.fd-zoom { display: flex; align-items: center; gap: 4px; margin: 4px 0 10px; }
.fd-zoom-label {
  margin-right: 4px; font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
}
.fd-zoom-opt {
  padding: 4px 11px; border-radius: 7px; text-decoration: none;
  color: var(--text-secondary); font-size: 12.5px; font-weight: 600;
}
.fd-zoom-opt:hover { background: var(--surface-raised); color: var(--text-warm); }
.fd-zoom-opt.is-on { background: var(--primary); color: #fff; }

.fd-charts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px; margin: 4px 0 20px;
}
.fd-chart {
  margin: 0; padding: 14px 16px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border-cream); border-radius: 10px;
}
.fd-chart figcaption { margin-bottom: 8px; }
.fd-chart h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.fd-chart-sub { margin: 2px 0 0; font-size: 12px; color: var(--text-tertiary); }
.fd-plot { min-height: 210px; }
.fd-nodata {
  margin: 0; padding: 78px 0; text-align: center;
  font-size: 13px; font-style: italic; color: var(--text-tertiary);
}

/* Recessive grid and axes: the marks carry the meaning, the frame shouldn't
   compete with them. */
.fd-svg   { display: block; overflow: visible; }
.fd-grid  { stroke: #e6e9f0; stroke-width: 1; }
.fd-ytick { fill: var(--text-tertiary); font-size: 10px; text-anchor: end; }
.fd-xtick { fill: var(--text-secondary); font-size: 10px; text-anchor: middle; }
.fd-total { fill: var(--text); font-size: 10px; font-weight: 600; text-anchor: middle; }
.fd-seg   { transition: opacity .12s ease; }
.fd-seg:hover, .fd-seg:focus-visible { opacity: .78; outline: none; }

/* Legend is always present, and always carries the count — three of the six
   hues sit under 3:1 on white, so identity must not rest on colour alone. */
.fd-legend { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.fd-key { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.fd-key i {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 2px; margin-right: 5px; vertical-align: 0;
}
.fd-key b { color: var(--text); font-weight: 600; }

.fd-tip {
  position: absolute; z-index: 50; pointer-events: none;
  padding: 5px 9px; border-radius: 6px;
  background: var(--text-warm); color: #fff;
  font-size: 12px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(15, 30, 61, .22);
}
.fd-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* Open P1/P2 — the act-on-it panel, above the figures. */
.fd-urgent {
  margin: 4px 0 20px; padding: 14px 16px 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border-cream);
  border-left: 3px solid var(--orange-90, #c2410c);
  border-radius: 10px;
}
.fd-urgent.is-clear { border-left-color: var(--border-cream); }
.fd-urgent h2 {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--text);
  display: flex; align-items: baseline; gap: 7px;
}
.fd-urgent-count {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  background: var(--navy-0); border-radius: 10px; padding: 1px 8px;
}
.fd-urgent-sub { margin: 2px 0 10px; font-size: 12px; color: var(--text-tertiary); }
.fd-urgent-list { list-style: none; margin: 0; padding: 0; }
.fd-urgent-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0; border-top: 1px solid var(--border-cream);
  font-size: 13px;
}
.fd-urgent-item:first-child { border-top: 0; }
.fd-urgent-subject {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.fd-urgent-meta {
  flex: 0 1 auto; min-width: 0; max-width: 42%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--text-tertiary);
}
/* Age is the story on these — a fortnight-old P2 is a different conversation
   from yesterday's. */
.fd-urgent-age {
  flex: 0 0 auto; font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--text-secondary);
}
.fd-urgent-age.is-stale { color: var(--orange-90, #c2410c); font-weight: 600; }
.fd-urgent-none {
  margin: 8px 0 2px; font-size: 13px; color: var(--text-tertiary); font-style: italic;
}

/* `hidden` must beat a class that sets display. .fd-urgent-item is display:flex,
   which outranks the attribute's default display:none — so filtered-out rows
   stayed on screen while the count beside them read 0. */
.fd-urgent-item[hidden],
.fd-row[hidden],
.cap-row[hidden],
.tk-row[hidden] { display: none !important; }

/* ── Documents tab ────────────────────────────────────────────────────────── */
.doc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; margin-top: 18px;
}
.doc-card {
  padding: 18px 20px 16px; background: var(--surface-raised);
  border: 1px solid var(--border-cream); border-radius: 10px;
  display: flex; flex-direction: column;
}
.doc-card h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--text); }
.doc-blurb { margin: 0 0 10px; font-size: 13.5px; color: var(--text-secondary); }
.doc-output {
  margin: 0 0 14px; font-size: 12px; color: var(--text-tertiary);
  padding-top: 10px; border-top: 1px solid var(--border-cream);
}
.doc-cta {
  margin-top: auto; align-self: flex-start;
  padding: 7px 14px; border-radius: 6px;
  background: var(--navy-60, #2b56f0); color: #fff;
  font-size: 13px; font-weight: 500; text-decoration: none;
}
.doc-cta:hover { filter: brightness(1.08); }
/* A type still being built stays on the page, visibly waiting, so nobody
   wonders whether it was forgotten. */
.doc-card.is-pending { background: transparent; border-style: dashed; }
.doc-card.is-pending h2 { color: var(--text-secondary); }
.doc-pending {
  margin: auto 0 0; font-size: 12.5px; font-style: italic; color: var(--text-tertiary);
}

.doc-form { max-width: 1180px; margin-top: 18px; padding-bottom: 12px; }
.doc-form fieldset {
  margin: 0 0 18px; padding: 16px 18px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border-cream); border-radius: 10px;
}
.doc-form legend {
  padding: 0 6px; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary);
}
.doc-form label { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 500; color: var(--text); }
.doc-form input, .doc-form textarea, .doc-form select {
  display: block; width: 100%; margin-top: 5px; padding: 7px 9px;
  font: inherit; font-size: 13px; color: var(--text);
  background: #fff; border: 1px solid var(--border-cream); border-radius: 6px;
}
.doc-form textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.doc-form input:focus-visible, .doc-form textarea:focus-visible, .doc-form select:focus-visible {
  outline: 2px solid var(--navy-60); outline-offset: 1px;
}
.doc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
/* Four phases stacked is a long scroll past content that is mostly already
   right. Two up, so the whole plan is on screen at once. */
.doc-phases {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
}
.doc-phase {
  position: relative; padding: 26px 14px 2px;
  border: 1px solid var(--border-cream); border-radius: 8px;
  background: var(--bg);
}
.doc-phase-n {
  position: absolute; top: 8px; left: 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--primary);
}
.doc-form .hint { display: block; margin: 4px 0 10px; font-size: 12px; font-weight: 400; color: var(--text-tertiary); }
.doc-form .req { font-size: 11px; font-weight: 600; color: var(--orange-90, #c2410c); text-transform: uppercase; letter-spacing: .04em; }
.doc-form code { background: var(--navy-0); padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.doc-actions { display: flex; align-items: center; gap: 14px; }
.doc-submit {
  padding: 9px 18px; border: 0; border-radius: 6px;
  background: var(--navy-60, #2b56f0); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.doc-submit:hover { filter: brightness(1.08); }

/* Informational counterpart to .notice-warn — same shape, not an alarm. */
.notice-info { border-left: 3px solid var(--navy-60, #2b56f0); }
.notice-info h2 { color: var(--text); }

/* The QBR picks its customer first, so the figures are live before typing. */
.doc-pick { margin-bottom: 4px; }
.doc-pick fieldset { border: 0; padding: 0; }

/* High-priority activity by customer — the ranking, not the ticket list. */
.fd-hipri {
  margin: 4px 0 20px; padding: 14px 16px 8px;
  background: var(--surface-raised);
  border: 1px solid var(--border-cream); border-radius: 10px;
}
.fd-hipri h2 {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--text);
  display: flex; align-items: baseline; gap: 8px;
}
.fd-hipri-sub { margin: 3px 0 10px; font-size: 12px; color: var(--text-tertiary); }
.fd-hipri .fd-num { font-variant-numeric: tabular-nums; text-align: right; }
.fd-hipri .is-p1 { color: var(--orange-90, #c2410c); font-weight: 600; }
.fd-open-p1 { font-size: 11px; font-weight: 500; }
.fd-hipri-row[hidden] { display: none !important; }

/* View switch on a tab that carries more than one. Links, not buttons — a
   view is a URL, so it survives a bookmark and the back button. */
.tab-views {
  display: flex; gap: 2px; margin: -4px 0 18px;
  padding: 3px; border-radius: 8px;
  background: var(--navy-0); width: fit-content;
}
.tab-view {
  padding: 6px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 500; text-decoration: none;
  color: var(--text-secondary);
}
.tab-view:hover { color: var(--text); }
.tab-view.is-active {
  background: var(--surface-raised); color: var(--text); font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 30, 61, .08);
}

/* At-a-glance strip above the landing page. Stat tiles, not a chart: five
   single numbers have no shape to plot, and a sparkline nobody can read the
   axis of is decoration. Each tile is a link into the tab that computes it. */
.summary {
  display: grid; gap: 10px; margin: -4px 0 20px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.summary-tile {
  display: flex; flex-direction: column; gap: 1px;
  padding: 14px 16px; border-radius: 12px; text-decoration: none;
  background: var(--surface-raised);
  border: 1px solid var(--border-cream);
  border-left: 3px solid var(--border-warm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.summary-tile:hover {
  border-color: var(--navy-10); border-left-color: var(--primary);
  box-shadow: var(--shadow-sm);
}
/* Reserved for the tiles that are asking for work. The label already says
   which those are, so the colour is a second cue rather than the only one. */
.summary-tile.is-emphasis { border-left-color: var(--orange-90); }
.summary-tile.is-emphasis:hover { border-left-color: var(--orange-90); }
.summary-value {
  font-family: var(--font-serif); font-size: 30px; font-weight: 600;
  line-height: 1.1; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.summary-label {
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.summary-detail { font-size: 12px; color: var(--text-tertiary); }
.summary-note {
  margin-top: 4px; font-size: 11px; font-weight: 600;
  color: var(--orange-90); text-transform: uppercase; letter-spacing: .03em;
}
.summary-caveat {
  margin: -12px 0 20px; font-size: 12px; color: var(--text-tertiary);
}

/* Overview tab: the tile strip above, then the attention set grouped two ways.
   Two columns on a wide screen, stacked below — the panels are independent
   reads, so neither depends on sitting beside the other. */
.ov-cols {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.ov-panel {
  background: var(--surface-raised);
  border: 1px solid var(--border-cream); border-radius: 12px;
  padding: 18px 20px 20px;
}
.ov-panel h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.ov-note {
  margin: 0 0 14px; font-size: 12px; line-height: 1.5;
  color: var(--text-tertiary);
}
.ov-note a { color: var(--text-secondary); }

.ov-cats, .ov-kinds, .ov-accounts { list-style: none; margin: 0; padding: 0; }
.ov-cat { padding: 10px 0; border-top: 1px solid var(--border-cream); }
.ov-cat:first-child { border-top: 0; padding-top: 0; }
.ov-cat-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
}
.ov-cat-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ov-cat-accounts {
  font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap;
}
/* A collapsed category is itself the link, so the header gets the same hit
   target and hover as the rows it replaced. */
.ov-cat-link {
  display: flex; text-decoration: none;
  padding: 3px 6px; margin: 0 -6px; border-radius: 5px;
}
.ov-cat-link .ov-cat-name { color: var(--primary); }
.ov-cat-link:hover { background: var(--navy-0); }
.ov-cat-link:hover .ov-cat-name { text-decoration: underline; }
.ov-cat-summary {
  margin: 1px 0 0; padding-left: 6px;
  font-size: 12px; color: var(--text-tertiary);
}
.ov-kinds { margin-top: 4px; }
/* Each count is a link into that filter, so the whole row is the hit target
   rather than the few characters of the number. */
.ov-kind {
  display: block; padding: 3px 6px; margin-left: -6px; border-radius: 5px;
  font-size: 12.5px; color: var(--primary); text-decoration: none;
}
.ov-kind:hover { background: var(--navy-0); text-decoration: underline; }
.ov-kind-n {
  display: inline-block; min-width: 22px;
  font-weight: 700; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.ov-accounts li { border-top: 1px solid var(--border-cream); }
.ov-accounts li:first-child { border-top: 0; }
.ov-account {
  display: block; padding: 10px 8px; margin: 0 -8px; border-radius: 6px;
  text-decoration: none;
}
.ov-account:hover { background: var(--navy-0); }
.ov-account-top {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.ov-account-name {
  font-size: 13.5px; font-weight: 600; color: var(--primary);
}
.ov-account:hover .ov-account-name { text-decoration: underline; }
/* Reserved for accounts carrying a high-grade signal. The count beside it says
   so in words, so the colour is a second cue rather than the only one. */
.ov-flag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--orange-90);
  border: 1px solid var(--orange-90); border-radius: 4px; padding: 0 5px;
}
.ov-account-n { font-size: 11.5px; color: var(--text-tertiary); margin-left: auto; }
.ov-account-worst {
  display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-secondary);
  line-height: 1.45;
}
.ov-mag { color: var(--text-tertiary); }
.ov-account-sa { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-tertiary); }

.ov-stamp {
  margin: 18px 0 0; font-size: 11.5px; color: var(--text-tertiary);
}

/* Enablement candidates — a ranked list, so the number leads and the name
   follows it. Full width: it is the one panel people work down. */
.ov-panel-wide { margin-top: 16px; }
.ov-cands { list-style: none; margin: 0; padding: 0; }
.ov-cands li { border-top: 1px solid var(--border-cream); }
.ov-cands li:first-child { border-top: 0; }
.ov-cand {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px; margin: 0 -8px; border-radius: 6px; text-decoration: none;
}
.ov-cand:hover { background: var(--navy-0); }
.ov-cand-n {
  min-width: 34px; text-align: right;
  font-family: var(--font-serif); font-size: 19px; font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.ov-cand-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ov-cand-name { font-size: 13.5px; font-weight: 600; color: var(--primary); }
.ov-cand:hover .ov-cand-name { text-decoration: underline; }
.ov-cand-split { font-size: 11.5px; color: var(--text-tertiary); }
.ov-cand-sa {
  font-size: 11.5px; color: var(--text-tertiary);
  white-space: nowrap; text-align: right;
}

/* A highlighted ticket row — arrived at from an enablement candidate, where
   the point is which of this customer's tickets were preventable. A tinted
   row plus a left rule, so it survives both a colourblind reader and a
   printout where the tint may drop out. */
.fd-row.is-hl > td { background: #fff6ef; }
.fd-row.is-hl > td:first-child { box-shadow: inset 3px 0 0 0 var(--orange-90); }
.tk-legend {
  font-size: 12px; font-weight: 600; color: var(--orange-90);
  white-space: nowrap;
}

/* Lead paragraph on a tab view that opens with an explanation rather than a
   table. Same voice as .ov-note, more room to breathe. */
.ov-note-lead { max-width: 68ch; margin-bottom: 16px; font-size: 13px; }

/* "No SA" is not the same as "we could not find the account" — say which. */
.ov-cand-nosa { display: block; font-style: italic; color: var(--text-tertiary); }

/* Customer pack picker on the Overview tab. A table rather than cards: this is
   scanned for one name, and 66 cards is a scroll. */
.cust-filter { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cust-filter .tk-search { flex: 1; max-width: 340px; }
/* Deliberately almost empty: the base `table` rule already gives every table
   in the dashboard its card, its navy header band and its padding, and this
   one had been flattened to a bare grid — which is what made the customer
   pack read as a different product from the tab it sits on. */
.cust-table td { font-size: 13px; }
.cust-table th.n, .cust-table td.n { text-align: right;
                                     font-variant-numeric: tabular-nums; }

/* The picker declares its columns, so the counts sit at the right edge under
   their headings instead of floating in the middle of a very wide table. */
.cust-picker { table-layout: fixed; }
.cust-picker .c-sa { width: 22%; }
.cust-picker .c-n { width: 10%; }
.cust-picker .cust-name { overflow: hidden; text-overflow: ellipsis; }
.cust-none {
  margin-left: 8px; font-size: 12px; color: var(--text-tertiary);
  font-weight: 400; white-space: nowrap;
}
.cust-name { font-weight: 600; }
.cust-table .muted { color: var(--text-tertiary); }
.cust-row[hidden] { display: none !important; }

/* One customer, read on screen before anything is downloaded. */
.cust-back { margin: -4px 0 14px; font-size: 13px; }
.cust-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.cust-title { margin: 0; font-size: 22px; font-weight: 600; }
.cust-sub { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); }
.cust-actions { display: flex; gap: 8px; white-space: nowrap; }
/* Not a card. Every other tab lays out heading, stat row, charts and table
   directly on the page and lets the table and the charts be the cards; a
   section card wrapping them put a card inside a card and forced the table
   flat to compensate. */
.cust-section { margin-bottom: 28px; }
/* Three or four sections stack on this page where other tabs have one, so
   they need a boundary — a hairline rule rather than the card that was there,
   which is what the rest of the dashboard uses to separate bands. */
.cust-section + .cust-section {
  padding-top: 24px; border-top: 1px solid var(--border-cream);
}
.cust-section > h3 {
  margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--text);
}
.cust-section .stat-row { margin-bottom: 14px; }
.cust-name a { color: var(--primary); text-decoration: none; font-weight: 600; }
.cust-name a:hover { text-decoration: underline; }

/* Feature matrix. Yes/No/— rather than ticks and crosses: a glyph reads as
   decoration at a glance and this table is scanned for the Nos. */
/* The base `table` rule gives this its card; what it needs on top is the
   hierarchy the sheet keeps in its indentation, because a flat list of 69 rows
   where thirteen names repeat is a spreadsheet dump, not a reference. */
.fm-table { table-layout: fixed; }
.fm-table th.fm-feature-head { width: auto; }
.fm-table th.fm-cloud, .fm-table td.fm-mark { text-align: center; width: 104px; }
.fm-table td { padding: 5px 15px; font-size: 13px; }

/* Section as a band across the table, not a repeated trailing column. */
.fm-section-row th {
  padding: 9px 15px; background: var(--navy-0);
  border-top: 1px solid var(--border-cream);
  border-bottom: 1px solid var(--border-cream);
}
.fm-group:first-of-type .fm-section-row th { border-top: 0; }
.fm-section-name {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-warm);
}
.fm-section-count {
  margin-left: 8px; font-size: 11px; font-weight: 600;
  color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}

.fm-name { font-weight: 600; }
/* A child is a property of the connector above it — an encapsulation, a
   bandwidth — so it is indented under it and carries a branch mark. The
   parent's name rides along at the end, greyed: it is what tells this
   "Encapsulation: GRE" apart from the one under the next connector, and
   without it the row is ambiguous the moment anyone filters. */
.fm-row.is-child .fm-name { font-weight: 400; padding-left: 30px; position: relative; }
.fm-branch {
  position: absolute; left: 15px; top: 50%; width: 8px; height: 1px;
  background: var(--border-warm);
}
.fm-row.is-child .fm-branch::before {
  content: ''; position: absolute; left: 0; bottom: 0; width: 1px; height: 14px;
  background: var(--border-warm);
}
.fm-of {
  margin-left: 8px; font-size: 11px; color: var(--text-tertiary);
  font-weight: 400;
}
.fm-row.is-child td { border-bottom-color: var(--bg); }

/* Colour is a second cue only — the cell says Yes, No or a dash in words. */
.fm-mark.is-yes { color: var(--ok); font-weight: 600; }
.fm-mark.is-no  { color: var(--err); font-weight: 700; }
.fm-mark.is-na  { color: var(--text-tertiary); }
.fm-row[hidden], .fm-group[hidden] { display: none !important; }
.cust-filter .fd-select { margin-right: 8px; }

/* Each pack section continues on the tab that owns it. */
.cust-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.cust-section-head h3 { margin: 0; }
.cust-more {
  font-size: 12px; font-weight: 600; color: var(--primary);
  text-decoration: none; white-space: nowrap;
}
.cust-more:hover { text-decoration: underline; }
.cust-section-note { margin: 0 0 10px; font-size: 11.5px; color: var(--text-tertiary); }

/* PS proposal: a form that arrives written, not blank. */
.doc-form .doc-wide textarea { min-height: 9.5em; }
/* Long fields grow to their content in JS; this is the ceiling and the
   scrollbar of last resort. */
.doc-form textarea[data-grow] { max-height: 620px; overflow-y: auto; }
.doc-count {
  display: block; margin-top: 3px; font-size: 11px; font-weight: 500;
  color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
/* The submit follows you down a form this long. */
.doc-actions.is-sticky {
  position: sticky; bottom: 0; z-index: 2;
  margin: 18px -4px 0; padding: 12px 4px;
  background: linear-gradient(to top, var(--bg) 72%, transparent);
}

/* Key contacts: four fixed roles rather than a free-text block. */
.doc-contact {
  display: grid; grid-template-columns: 200px repeat(3, minmax(0, 1fr));
  gap: 0 14px; align-items: end; margin-bottom: 10px;
}
.doc-contact-role {
  padding-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text);
}
@media (max-width: 760px) {
  .doc-contact { grid-template-columns: 1fr; }
  .doc-contact-role { padding-bottom: 0; }
}

/* Choose what goes in the pack, and see it being built. */
.pack-build {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 18px;
  margin: 0 0 18px; padding: 12px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--border-cream); border-radius: 10px;
}
.pack-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pack-label {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-tertiary); margin-right: 4px;
}
/* A chip that looks selected when it is — a bare checkbox in a row of three
   reads as a form, and this is a choice about one document. */
.pack-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  border: 1px solid var(--border-cream); background: var(--bg);
  font-size: 12.5px; cursor: pointer; user-select: none;
}
.pack-chip:hover { border-color: var(--navy-10); }
.pack-chip:has(input:checked) {
  border-color: var(--primary); background: var(--navy-0); color: var(--text);
  font-weight: 600;
}
.pack-chip input { accent-color: var(--primary); margin: 0; }
.pack-chip:focus-within { outline: 2px solid var(--navy-60, #2b56f0); outline-offset: 1px; }
.pack-go { display: flex; align-items: center; gap: 10px; }
.pack-go .btn-export[disabled] { opacity: .5; cursor: not-allowed; }
.pack-status { font-size: 12px; color: var(--text-secondary); }
/* Clicking a customer is a page load; say so rather than sitting there. */
.cust-row.is-loading { opacity: .55; }
.cust-row.is-loading .cust-name a::after {
  content: ' …'; color: var(--text-tertiary);
}

/* The matrix is read-only; the cell-editing styles that lived here went
   with the endpoint. Values are coloured by .fm-mark.is-* above. */
.fm-undo {
  border: 0; background: none; padding: 0; font: inherit; font-size: 12px;
  font-weight: 600; color: var(--primary); text-decoration: underline;
  cursor: pointer;
}
.fm-undo:hover { color: var(--primary-dark); }
.fm-undo:focus-visible { outline: 2px solid var(--navy-60, #2b56f0); outline-offset: 2px; }

/* PS proposal: the short path first.

   The document is written before you arrive; the only thing that always has
   to be typed is the customer. So that field and a Generate button sit
   together at the top, and the four prefilled sections fold away — a page
   that opens with eight textareas of draft reads as a form to complete, which
   is exactly the feedback this answers.

   Fields inside a closed <details> are still submitted: they are in the DOM,
   only undisplayed. The defaults travel whether or not anyone opens them. */
.doc-start {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
}
.doc-start > label { flex: 1; min-width: 280px; }
.doc-submit-top { flex-shrink: 0; }

.doc-more {
  border: 1px solid var(--border-cream); border-radius: 10px;
  background: var(--surface-raised); margin-bottom: 12px;
}
.doc-more > summary {
  padding: 11px 16px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 600; color: var(--text-secondary);
}
.doc-more > summary::-webkit-details-marker { display: none; }
.doc-more > summary::before {
  content: '\203A'; display: inline-block; width: 14px;
  color: var(--text-tertiary); font-weight: 700;
  transition: transform .15s;
}
.doc-more[open] > summary::before { transform: rotate(90deg); }
.doc-more > summary:hover { color: var(--text-warm); background: var(--navy-0); }
.doc-more[open] > summary { border-bottom: 1px solid var(--border-cream); }
.doc-more > fieldset { border: 0; margin: 0; padding: 14px 16px 16px; }
.doc-more > fieldset > legend { display: none; }

/* The five questions sit with the customer name, not behind a summary: they
   are what turns the prefilled draft into this engagement's draft, so they
   have to be visible to someone who reads nothing else on the page. */
.doc-ask .hint { margin-bottom: 2px; }
.doc-clouds {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px;
  margin-bottom: 14px;
}
.doc-clouds legend { float: left; width: 100%; }
.doc-form .doc-clouds label {
  display: flex; align-items: center; gap: 6px; margin-bottom: 0;
  font-weight: 400;
}
.doc-form .doc-clouds input[type="checkbox"] {
  width: auto; margin: 0; accent-color: var(--blue-60, #2563eb);
}
.doc-form .doc-clouds .hint { margin: 0; flex: 1 1 100%; }

/* ── Releases: one estate, one strip ────────────────────────────────────────
   The tab opened with five bordered cards above three charts, and the cards
   are not five things — they are one set of counts about one backlog. As
   separate objects they cost a row of cards' worth of height before the first
   number and read as five unrelated figures. One strip, divided rather than
   boxed. `is-strip` only: every other tab's stat row is unchanged. */
.stat-row.is-strip {
  display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 14px;
  background: var(--surface-raised); border: 1px solid var(--border-cream);
  border-radius: 10px; overflow: hidden;
}
.stat-row.is-strip .stat {
  flex: 1 1 140px; background: none; border: 0; border-radius: 0;
  box-shadow: none; padding: 11px 18px;
  border-left: 1px solid var(--border-cream);
}
.stat-row.is-strip .stat:first-child { border-left: 0; }
.stat-row.is-strip .stat-label { margin-bottom: 3px; font-size: 10px; }
.stat-row.is-strip .stat-value { font-size: 22px; }
/* "54" and "of 58" are one reading, and with a 1px margin they ran together
   as "54of 58" wherever the line did not happen to break. */
.stat-row.is-strip .stat-unit { font-size: 13px; margin-left: 4px; }
@media (max-width: 720px) {
  .stat-row.is-strip .stat { flex-basis: 50%; border-top: 1px solid var(--border-cream); }
  .stat-row.is-strip .stat:nth-child(-n+2) { border-top: 0; }
  .stat-row.is-strip .stat:nth-child(odd) { border-left: 0; }
}

/* The framed page below is the tab's content, not a card sitting on it. */
.embed-frame { border-radius: 10px; box-shadow: none; }

/* ── Feature matrix: keep the clouds in view ────────────────────────────────
   69 features over five clouds is well past a screen, and the column headings
   scrolled away with the first section — leaving five columns of Yes and No
   with nothing to say which cloud each belonged to. */
.fm-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-raised);
  box-shadow: inset 0 -1px 0 var(--border-cream);
}
/* Section headings stick under the column row, so the group a row belongs to
   is answerable without scrolling back up to find it. */
.fm-section-row th {
  position: sticky; top: var(--fm-head-h, 41px); z-index: 1;
}
.fm-scroll { max-height: calc(100vh - 330px); min-height: 420px; overflow: auto; }

/* A table inside .table-scroll has no clipping to do — the wrapper carries the
   border and the radius. Its `overflow: hidden` (set on `table` for the
   rounded corners it no longer draws here) made the table its own scroll
   container, which is what a sticky header resolves against: the header pinned
   to a box that never scrolls, so it scrolled away with the rows. */
.table-scroll table { overflow: visible; }
/* Separate borders for the same reason of caution: collapsed borders and
   sticky cells have a long history of disagreeing. Only bottom borders are
   drawn here, so nothing doubles up. */
.fm-table { border-collapse: separate; border-spacing: 0; }

/* ── Tools ──────────────────────────────────────────────────────────────────
   One card per tool. Deliberately not the framed SE/SA Tools section, which
   arrived with its own header and sidebar inside ours. */
.tool-grid {
  display: grid; gap: 14px; margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.tool-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 20px 14px; text-decoration: none;
  background: var(--surface-raised); border: 1px solid var(--border-cream);
  border-radius: 12px; box-shadow: var(--shadow-sm);
}
.tool-card:hover { border-color: var(--primary); }
.tool-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tool-name { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--text-warm); }
.tool-flag {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-tertiary); background: var(--navy-0);
  padding: 2px 7px; border-radius: 100px; white-space: nowrap;
}
.tool-blurb { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); flex: 1; }
.tool-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 4px; padding-top: 11px; border-top: 1px solid var(--border-cream);
  font-size: 12px; color: var(--text-tertiary);
}
.tool-go { font-size: 13px; font-weight: 600; color: var(--primary); }