/* HMP OS look, lifted from John's build: same tokens, same shell. */
:root {
  --bg: #f7faf9;
  --ink: #18212f;
  --navy: #243954;
  --teal: #0f766e;
  --gold: #b7791f;
  --mist: #eef4f2;
  --line: #d9e2df;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --amber-bg: #fffbeb;
  --amber-line: #fde68a;
  --amber-ink: #78350f;
  --green: #15803d;
  --yellow: #b45309;
  --red: #b91c1c;
  --shadow-soft: 0 18px 45px rgba(24, 33, 47, 0.08);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--bg); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

/* Shell */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 288px; flex: none; background: #fff; border-right: 1px solid var(--line); }
.sidebar-brand { padding: 16px; border-bottom: 1px solid var(--line); }
.brandbox { background: #061425; border-radius: 6px; padding: 12px; }
.brandbox img { display: block; margin: 0 auto; height: 64px; width: 100%; object-fit: contain; }
.programs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.programs2 div { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 6px; display: flex; align-items: center; justify-content: center; height: 64px; }
.programs2 img { max-width: 100%; max-height: 100%; object-fit: contain; }
.quick4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.quick4 .q { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: #fff; }
.quick4 .q .t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-500); }
.quick4 .q .b { margin-top: 4px; font-weight: 600; }
.quick4 .q .m { color: var(--slate-500); font-size: 13px; }
.why { display: grid; gap: 12px; margin-top: 8px; }
.why .w { border-top: 1px solid var(--line); padding-top: 10px; }
.why .w b { display: block; }
.why .w .k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-500); margin-top: 6px; }
.item { padding: 10px 0; border-top: 1px solid var(--line); }
.item .sub { color: var(--slate-500); font-size: 13px; }
.mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; }
.mini .s { border: 1px solid var(--line); border-radius: 6px; padding: 10px; background: #fff; }
.mini .s .v { font-size: 20px; font-weight: 700; }
.mini .s .k { font-size: 12px; color: var(--slate-500); }
.sidebar-brand .app { margin-top: 16px; font-size: 18px; font-weight: 600; }
.sidebar-brand .org { font-size: 12px; font-weight: 500; text-transform: uppercase; color: var(--slate-500); }
.nav { padding: 12px; }
.nav-hint { padding: 0 12px 8px; font-size: 12px; font-weight: 500; color: var(--slate-500); }
.nav-section { border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 8px; }
.nav-section > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; color: var(--slate-700); }
.nav-section > summary::-webkit-details-marker { display: none; }
.nav-section[open] > summary, .nav-section.active > summary { background: var(--mist); color: var(--ink); }
.nav-section .label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-500); }
.nav-section .count { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--slate-500); }
.nav-section .chev { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--slate-500); }
.nav-section[open] .chev { transform: rotate(180deg); }
.nav-items { border-top: 1px solid var(--line); padding: 8px; display: grid; gap: 4px; }
.nav-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; font-weight: 500; color: var(--slate-600); }
.nav-item:hover { background: var(--mist); color: var(--ink); }
.nav-item.active { background: var(--navy); color: #fff; }
.badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--slate-500); }
.badge.ready { border-color: #bbf7d0; background: #f0fdf4; color: var(--green); }
.badge.soon { border-color: var(--line); background: var(--mist); }

.main-col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.topbar { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; min-height: 64px; padding: 12px 32px; }
.topbar .title { font-weight: 600; }
.topbar .sub { font-size: 12px; color: var(--slate-500); }
.pill { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--line); background: #fff; font-size: 12px; font-weight: 600; color: var(--ink); }
.pill.mist { background: var(--mist); font-weight: 500; }
.pill:hover { background: var(--mist); }
.pill.dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.pill.dark:hover { background: #1c2d43; }

.cmdbar { background: #fff; border-bottom: 1px solid var(--line); padding: 12px 32px; display: grid; gap: 10px; }
.cmdrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cmdrow .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-500); margin-right: 4px; }
.kbd { margin-left: 8px; font-weight: 600; color: var(--slate-500); }

.tabs { background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px; display: flex; gap: 8px; overflow-x: auto; }
.tab { white-space: nowrap; padding: 12px 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 16px; color: var(--slate-700); }
.tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }

main { flex: 1; padding: 24px 32px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 24px; box-shadow: var(--shadow-soft); }
.card + .card { margin-top: 16px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-500); }
h1 { margin: 8px 0 0; font-size: 32px; line-height: 1.15; font-weight: 700; }
h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.lede { margin: 12px 0 0; font-size: 16px; color: var(--slate-700); }
.muted { color: var(--slate-500); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.between { justify-content: space-between; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 16px; }
.stat { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: #fff; }
.stat .v { font-size: 22px; font-weight: 700; }
.stat .k { font-size: 12px; color: var(--slate-500); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }
.section { border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: #fff; }
.section h3 { margin: 0; font-size: 14px; font-weight: 600; }
.status { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.status.healthy { color: var(--green); } .status.watch { color: var(--yellow); } .status.attention { color: var(--red); } .status.tracking { color: var(--slate-500); }
.empty { padding: 12px 0; color: var(--slate-500); }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 8px; border: 1px solid var(--navy); background: var(--navy); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
.btn:hover { background: #1c2d43; }
.btn.secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { background: var(--mist); }
.btn.small { padding: 8px 12px; font-size: 13px; border-radius: 6px; }

.filters { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 20px; }
.filter .eyebrow { display: block; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 13px; font-weight: 500; color: var(--slate-700); }
.chip.active { background: var(--navy); border-color: var(--navy); color: #fff; }

table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-500); padding: 10px 8px; border-bottom: 1px solid var(--line); }
td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:hover td { background: #fbfdfc; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.dot.GREEN { background: var(--green); } .dot.YELLOW { background: #f59e0b; } .dot.RED { background: var(--red); }

.notice { margin-top: 20px; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--amber-line); background: var(--amber-bg); color: var(--amber-ink); }
.ok { margin-top: 20px; padding: 8px 12px; border-radius: 6px; border: 1px solid #bbf7d0; background: #f0fdf4; color: var(--green); }

form.form { display: grid; gap: 14px; margin-top: 20px; max-width: 760px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: 13px; }
label span.help { font-weight: 400; color: var(--slate-500); font-size: 12px; }
.field { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 10px 12px; font-size: 14px; color: var(--ink); outline: none; }
.field:focus { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
textarea.field { min-height: 90px; resize: vertical; }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.login-grid { width: 100%; max-width: 1040px; display: grid; gap: 20px; grid-template-columns: minmax(0,1fr) 380px; }
.brand-band { background: #0b1220; border-radius: 8px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-band img.logo { height: 56px; width: auto; }
.brand-band .programs { display: flex; gap: 16px; }
.brand-band .programs div { background: #fff; border-radius: 6px; width: 220px; height: 160px; display: flex; align-items: center; justify-content: center; padding: 12px; }
.brand-band .programs img { max-width: 100%; max-height: 100%; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.seg a, .seg button { padding: 14px; border-radius: 8px; border: 1px solid var(--line); background: #fff; text-align: center; font-weight: 700; color: var(--ink); }
.seg .active { background: var(--navy); border-color: var(--navy); color: #fff; }
.help-box { background: #f1f5f4; border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; font-weight: 700; }
.help-steps { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 16px; }
.link-teal { color: var(--teal); font-weight: 600; }
.link-teal:hover { color: var(--ink); }

@media (max-width: 1023px) {
  .sidebar { display: none; }
  .login-grid { grid-template-columns: 1fr; }
  main, .topbar-inner, .cmdbar { padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 1024px) { .tabs { display: none; } }

/* Record screens (John's other areas) */
.kvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 24px; margin-top: 18px; }
.kv .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-500); }
.kv .v { margin-top: 4px; font-size: 14px; word-break: break-word; }
.kv .v .prose { white-space: pre-wrap; line-height: 1.5; }
.json { background: #0b1f36; color: #dbe7f5; border-radius: 10px; padding: 10px 12px; font-size: 12px; max-height: 280px; overflow: auto; white-space: pre-wrap; margin: 0; }
.form.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.form.grid2 label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.notice.attention { border-color: #f0b4b4; background: #fff3f3; color: #8a1c1c; }
@media (max-width: 800px) { .form.grid2 { grid-template-columns: 1fr; } }

/* ===== Parity pass: his exact tones, pills, dots, tabs, buttons (sampled from the live site 2026-09-23) ===== */
:root { --em-50:#ecfdf5; --em-200:#a7f3d0; --em-500:#10b981; --em-800:#065f46; --am-50:#fffbeb; --am-200:#fde68a; --am-400:#fbbf24; --am-800:#92400e; --rd-50:#fef2f2; --rd-200:#fecaca; --rd-500:#ef4444; --rd-800:#991b1b; --sl-50:#f8fafc; --sl-200:#e2e8f0; --sl-300:#cbd5e1; }
.status { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:9999px; border:1px solid var(--sl-200); background:var(--sl-50); color:var(--slate-700); font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; line-height:18px; white-space:nowrap; }
.status.healthy { background:var(--em-50); border-color:var(--em-200); color:var(--em-800); }
.status.watch { background:var(--am-50); border-color:var(--am-200); color:var(--am-800); }
.status.attention { background:var(--rd-50); border-color:var(--rd-200); color:var(--rd-800); }
.status.tracking { background:var(--sl-50); border-color:var(--sl-200); color:var(--slate-700); }
.dot { display:inline-block; width:8px; height:8px; border-radius:9999px; background:var(--sl-300); margin-right:8px; vertical-align:middle; }
.dot.GREEN, .dot.healthy { background:var(--em-500); } .dot.YELLOW, .dot.watch { background:var(--am-400); } .dot.RED, .dot.attention { background:var(--rd-500); } .dot.tracking { background:var(--sl-300); }
.metrics { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-top:16px; }
.metric { border:1px solid var(--line); border-radius:8px; background:#fff; padding:12px 14px; }
.metric .k { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); font-weight:600; }
.metric .v { font-size:22px; font-weight:700; color:var(--ink); margin-top:6px; }
.metric .row { align-items:flex-end; justify-content:space-between; }
.cpills { display:flex; flex-wrap:wrap; gap:8px; }
.cpill { display:inline-flex; align-items:center; padding:4px 10px; border-radius:9999px; border:1px solid var(--sl-200); background:var(--sl-50); color:var(--slate-700); font-size:12px; font-weight:600; white-space:nowrap; }
.cpill.red { background:var(--rd-50); border-color:var(--rd-200); color:var(--rd-800); } .cpill.yellow { background:var(--am-50); border-color:var(--am-200); color:var(--am-800); } .cpill.green { background:var(--em-50); border-color:var(--em-200); color:var(--em-800); }
.tabs { padding:12px 32px; } .tab { font-size:14px; padding:8px 12px; border-radius:6px; color:var(--slate-700); }
.btn { font-size:14px; font-weight:600; padding:0 16px; height:36px; display:inline-flex; align-items:center; border-radius:6px; }
.btn.small { height:30px; padding:0 12px; font-size:13px; }
main { padding:24px 32px; }
table th { padding:12px 16px; font-size:14px; font-weight:600; color:var(--slate-600); text-transform:none; letter-spacing:0; border-bottom:1px solid var(--line); text-align:left; }
table td { padding:16px; font-size:14px; color:var(--ink); border-bottom:1px solid var(--line); vertical-align:top; }
.eyebrow { font-size:12px; letter-spacing:.3px; text-transform:uppercase; color:var(--slate-500); font-weight:600; }
.rcards { display:grid; gap:12px; margin-top:16px; }
.rcard { border:1px solid var(--line); border-left:4px solid var(--sl-300); border-radius:8px; background:#fff; padding:16px; }
.rcard.green { border-left-color:var(--em-500); } .rcard.yellow { border-left-color:var(--am-400); } .rcard.red { border-left-color:var(--rd-500); }
.rcard h2 { margin:0; font-size:15px; font-weight:600; } .rcard p { margin:8px 0 0; font-size:14px; line-height:1.5; color:var(--slate-600); }
.rcard .meta { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--slate-600); }
.filters { display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:16px; align-items:flex-end; }
.filters label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--slate-500); font-weight:600; }
.filters select { min-width:150px; font-size:14px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); }
.dcard { border:1px solid var(--line); border-radius:8px; background:#fff; padding:16px; }
.dcard h3 { margin:0; font-size:15px; font-weight:600; } .dcard .sub { margin-top:4px; font-size:12px; color:var(--slate-500); display:flex; align-items:center; gap:6px; }
.dgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; margin-top:16px; }
.dcard .item { border:1px solid var(--line); border-left:4px solid var(--sl-300); border-radius:8px; padding:10px 12px; margin-top:10px; }
.dcard .item.green { border-left-color:var(--em-500); } .dcard .item.yellow { border-left-color:var(--am-400); } .dcard .item.red { border-left-color:var(--rd-500); }
.dcard .empty { margin-top:10px; padding:14px; border:1px dashed var(--line); border-radius:8px; background:var(--sl-50); color:var(--slate-600); font-size:14px; }
.notice { font-size:13px; } .notice.attention { border-color:var(--rd-200); background:var(--rd-50); color:var(--rd-800); }
.note { margin-top:8px; font-size:12px; color:var(--slate-500); }
.kvgrid { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }

/* ---------- HMP Today, John's Team Brief markup (captured 2026-09-23) ---------- */
.td { display: flex; flex-direction: column; gap: 24px; }
.td h1, .td h2, .td h3 { margin: 0; }
.td a { color: inherit; text-decoration: none; }
.td-dot { display: inline-block; width: 10px; height: 10px; border-radius: 9999px; flex: none; }
.td-row > .td-dot, .td-qhead > .td-dot { margin-top: 4px; }
.td-red { background: #ef4444; } .td-amber { background: #fbbf24; } .td-green { background: #10b981; } .td-slate { background: #cbd5e1; }
.td-bl-red { border-left-color: #ef4444 !important; } .td-bl-amber { border-left-color: #fbbf24 !important; } .td-bl-green { border-left-color: #10b981 !important; } .td-bl-slate { border-left-color: #cbd5e1 !important; }
.td-pill { display: inline-flex; border: 1px solid; border-radius: 9999px; padding: 4px 10px; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; flex: none; }
.td-pill-amber { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.td-pill-green { border-color: #a7f3d0; background: #ecfdf5; color: #065f46; }
.td-pill-red { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.td-pill-slate { border-color: #e2e8f0; background: #f8fafc; color: #334155; }
.td-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.td-min { min-width: 0; }
.td-meta { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: #64748b; line-height: 16px; }
.td-meta .act { font-weight: 600; color: var(--teal); }
.td-empty { border: 1px dashed var(--line); border-radius: 6px; background: #f8fafc; padding: 12px; font-size: 14px; color: #64748b; }
.td-empty.tight { padding: 16px 12px; }
.td-note { margin: 10px 0 0; font-size: 12px; color: #64748b; }
.td-list { display: flex; flex-direction: column; gap: 12px; }
/* hero */
.td-hero { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 20px; box-shadow: var(--shadow-soft); }
.td-herorow { display: flex; flex-direction: column; gap: 20px; }
.td-eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: #64748b; }
.td-hero h1 { margin-top: 8px; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--ink); }
.td-hero .q1 { margin: 8px 0 0; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); }
.td-hero .q2 { margin: 8px 0 0; font-size: 14px; line-height: 24px; color: #475569; }
.td-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.td-btn { display: inline-flex; height: 40px; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--line); background: #fff; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--ink) !important; }
.td-btn:hover { background: var(--mist); }
.td-btn.dark { background: var(--ink); border-color: var(--ink); color: #fff !important; }
.td-btn.dark:hover { background: #1e293b; }
/* score tiles and kpi tiles */
.td-metrics { display: grid; gap: 12px; }
.td-kpi { display: block; border: 1px solid #e5e7eb; border-left: 4px solid #cbd5e1; border-radius: 6px; background: #fff; padding: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.td-kpi.big { padding: 16px; }
.td-kpi:hover { background: #f8fafc; }
.td-kpi .v { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--ink); }
.td-kpi.big .v { font-size: 24px; line-height: 32px; }
.td-kpi .l { margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: #475569; }
/* quick boxes */
.td-quick { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.td-qhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.td-qhead h2 { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.td-quick .td-empty { margin-top: 12px; }
.td-qcard { margin-top: 12px; display: block; border: 1px solid #e5e7eb; border-left: 4px solid #cbd5e1; border-radius: 6px; background: #fbfdfc; padding: 12px; }
.td-qcard:hover { background: #f8fafc; }
.td-qcard .t { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.td-qcard .s { margin-top: 4px; font-size: 14px; line-height: 20px; color: #475569; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.td-qcard .a { margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--teal); }
/* sections */
.td-sec { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.05); min-width: 0; }
.td-sec h2 { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); }
.td-status { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: #64748b; }
.td-body { margin-top: 16px; }
.td-item { display: block; border: 1px solid #e5e7eb; border-left: 4px solid #cbd5e1; border-radius: 6px; background: #fff; }
.td-item.p4 { padding: 16px; } .td-item.p3 { padding: 12px; }
.td-item:hover { background: #f8fafc; }
.td-item .t { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-item .s { margin-top: 4px; font-size: 14px; line-height: 20px; color: #475569; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.td-item .s2 { margin-top: 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: #64748b; }
.td-ul { margin: 12px 0 0; padding-left: 20px; font-size: 14px; line-height: 20px; color: #475569; }
.td-ul li + li { margin-top: 4px; }
.td-why { display: block; border: 1px solid #e5e7eb; border-left: 4px solid #cbd5e1; border-radius: 6px; background: #fff; padding: 16px; }
.td-why:hover { background: #f8fafc; }
.td-why .t { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.td-why .v { margin-top: 4px; font-size: 20px; line-height: 28px; font-weight: 600; color: #1e293b; }
.td-why .k { margin-top: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: #64748b; }
.td-why .td-ul { margin-top: 8px; }
.td-stat { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 12px; }
.td-stat:hover { background: #f8fafc; }
.td-stat .t { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.td-stat .v { margin-top: 4px; font-size: 18px; line-height: 28px; font-weight: 600; color: #334155; }
.td-cap { border: 1px solid var(--line); border-radius: 6px; padding: 12px; background: #fff; }
.td-cap .t { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.td-cap .r { margin-top: 4px; font-size: 12px; line-height: 16px; color: #64748b; text-transform: uppercase; }
.td-grid3 { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 12px; color: #475569; }
.td-kinds { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #475569; }
.td-kinds .muted2 { color: #94a3b8; }
.td-subcard { border: 1px solid var(--line); border-radius: 6px; background: #fbfdfc; padding: 16px; }
.td-subcard h3 { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.td-ai { display: flex; flex-direction: column; gap: 16px; font-size: 14px; line-height: 24px; color: #475569; }
.td-ai p { margin: 12px 0 0; }
.td-notebox { border: 1px solid var(--line); border-radius: 6px; background: #f8fafc; padding: 12px; }
.td-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.td-chips span { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 4px 10px; font-size: 12px; line-height: 16px; font-weight: 500; color: #334155; }
.td-btngrid { margin-top: 16px; display: grid; gap: 8px; }
.td-btngrid .td-btn { padding: 0 12px; }
/* grids, same breakpoints as John's Tailwind classes */
.td-g4, .td-g3, .td-g1109, .td-g0911, .td-g11, .td-g2, .td-g4b { display: grid; gap: 16px; }
.td-g2, .td-g4b { gap: 12px; }
@media (min-width: 640px) { .td-g2:not(.lg) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .td-btngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .td-hero h1 { font-size: 30px; line-height: 36px; } }
@media (min-width: 768px) { .td-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .td-g2.lg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .td-g4b { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) {
  .td-herorow { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .td-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .td-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .td-g4b { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .td-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .td-g1109 { grid-template-columns: 1.1fr 0.9fr; }
  .td-g0911 { grid-template-columns: 0.9fr 1.1fr; }
  .td-g11 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Personal workspace and the four answers ---------- */
.ws-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: none; }
.ws-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; object-fit: cover; object-position: 50% 22%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(24,33,47,.12); background: var(--mist); color: var(--navy); font-weight: 700; }
.ws-note { display: block; margin-top: 16px; border: 1px solid #e5e7eb; border-left: 4px solid var(--teal); border-radius: 6px; background: #f6fbfa; padding: 14px 16px; color: inherit; text-decoration: none; }
a.ws-note:hover { background: #eef7f5; }
.ws-note-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--teal); }
.ws-note-body { margin-top: 6px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); }
.ws-note-body.psalm { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; font-size: 17px; }
.ws-note-meta { margin-top: 6px; font-size: 12px; color: #64748b; }
.td-brief { margin-top: 16px; display: grid; gap: 12px; }
@media (min-width: 768px) { .td-brief { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .td-brief { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.td-ans { display: block; border: 1px solid #e5e7eb; border-left: 4px solid #cbd5e1; border-radius: 6px; background: #fff; padding: 12px 14px; color: inherit; text-decoration: none; min-width: 0; }
a.td-ans:hover { background: #f8fafc; }
.td-ans .k { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: #64748b; }
.td-ans .t { margin-top: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.td-ans .s { margin-top: 4px; font-size: 13px; line-height: 18px; color: #475569; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.td-strip { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.td-strip > * { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 6px 10px; font-size: 12px; color: #475569; text-decoration: none; }
.td-strip > a:hover { background: var(--mist); }
.td-strip b { color: var(--ink); }
.td-ans a.t { display: block; color: var(--ink); text-decoration: none; }
.td-ans a.t:hover { text-decoration: underline; }
.td-acts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.td-actf { display: inline-flex; gap: 6px; margin: 0; }
.td-act { display: inline-flex; align-items: center; height: 30px; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; font-family: inherit; }
.td-act:hover { background: var(--mist); }
.td-act.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.td-act.dark:hover { background: #1e293b; }
.td-act.done { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; cursor: default; }

/* ---------- Wins: a little celebration ---------- */
.td-celebrate { position: relative; overflow: hidden; border-color: #fde68a; background: linear-gradient(180deg, #fffdf5 0, #fff 140px); }
.td-celebrate > div, .td-celebrate .td-body { position: relative; z-index: 1; }
.td-confetti { position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; z-index: 0; }
.td-confetti i { position: absolute; top: -12px; width: 7px; height: 12px; border-radius: 2px; opacity: 0; animation: td-fall 1.8s ease-out forwards; }
@keyframes td-fall { 0% { opacity: 0; transform: translateY(-10px) rotate(0); } 15% { opacity: .95; } 100% { opacity: .55; transform: translateY(96px) rotate(260deg); } }
.td-win { display: flex; gap: 12px; align-items: flex-start; border: 1px solid #fde68a; border-left: 4px solid #f59e0b; border-radius: 8px; background: linear-gradient(90deg, #fffbeb 0, #fff 55%); padding: 12px 14px; color: inherit; text-decoration: none; }
.td-win:hover { background: linear-gradient(90deg, #fef3c7 0, #fff 55%); }
.td-win .t { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.td-win .s { margin-top: 4px; font-size: 13px; line-height: 19px; color: #475569; }
.td-win .td-meta { margin-top: 8px; }
.td-star { flex: none; color: #f59e0b; font-size: 20px; line-height: 20px; animation: td-pop .7s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes td-pop { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: scale(1) rotate(0); } }
.td-chip { display: inline-flex; border-radius: 9999px; background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; padding: 1px 8px; font-weight: 600; }
.td-av { flex: none; display: inline-flex; }
.td-av .ws-avatar { border-width: 2px; box-shadow: 0 0 0 1px #fde68a; }
.td-pill-gold { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.td-cap-win { border-color: #fde68a; background: #fffdf5; }
@media (prefers-reduced-motion: reduce) { .td-confetti { display: none; } .td-star { animation: none; } }

/* ---------- Projects with progress, and design touch-ups ---------- */
.td-projs { margin-top: 12px; display: grid; gap: 12px; }
.td-proj { border: 1px solid #e5e7eb; border-left: 4px solid #10b981; border-radius: 8px; background: #fff; padding: 12px 14px; }
.td-proj .k { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: #64748b; }
.td-proj a.t { display: block; margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; }
.td-proj a.t:hover { text-decoration: underline; }
.td-projdue { text-align: right; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.td-projdue .muted2 { font-size: 12px; font-weight: 500; color: #64748b; }
.td-bar { margin-top: 10px; height: 8px; border-radius: 9999px; background: #eef2f1; overflow: hidden; }
.td-bar span { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #10b981, #34d399); }
.td-projmeta { margin-top: 6px; font-size: 13px; color: #475569; }
.td-help { font-size: 12px; font-weight: 600; color: var(--teal); margin-right: 2px; }
.td-faces { display: inline-flex; flex: none; }
.td-faces .td-av + .td-av { margin-left: -14px; }
/* the four answers get their own tinted surface; empty states shrink to one quiet line */
.td-brief { background: #f4faf8; border: 1px solid #d9ece6; border-radius: 10px; padding: 12px; }
.td-ans .t { font-size: 15px; line-height: 21px; }
.td-empty { padding: 8px 10px; font-size: 13px; background: transparent; }

/* ---------- One clean header: search bar, menus, one tab row, Ctrl+K palette ---------- */
.hdr { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.hdr-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 32px; min-height: 56px; }
.hdr-search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; color: #64748b; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.hdr-search:hover { background: #fff; border-color: #c7d6d1; }
.hdr-search span { flex: 1; }
.hdr-search kbd, .cmdk kbd { font: 600 11px/1 Arial, sans-serif; color: #64748b; border: 1px solid var(--line); border-radius: 4px; padding: 3px 5px; background: #fff; }
.hdr-right { display: flex; align-items: center; gap: 8px; }
.hdr-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #64748b; margin-right: 6px; white-space: nowrap; }
.hdr-menu { position: relative; }
.hdr-menu > summary { list-style: none; cursor: pointer; }
.hdr-menu > summary::-webkit-details-marker { display: none; }
.hdr-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 600; color: var(--ink); }
.hdr-btn:hover { background: var(--mist); }
.hdr-btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.hdr-btn.primary:hover { background: #1e293b; }
.hdr-me { display: inline-flex; border-radius: 9999px; }
.hdr-me .ws-avatar { border-width: 2px; box-shadow: 0 0 0 1px var(--line); }
.hdr-pop { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(24,33,47,.14); padding: 6px; z-index: 30; }
.hdr-pop.right, .hdr-menu:last-child .hdr-pop { left: auto; right: 0; }
.hdr-pop a, .hdr-pop button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 14px; color: var(--ink); text-decoration: none; cursor: pointer; }
.hdr-pop a:hover, .hdr-pop button:hover { background: var(--mist); }
.hdr-pop form { margin: 0; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.hdr-who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: grid; }
.hdr-who span { font-size: 12px; color: #64748b; }
.hdr-empty { display: block; padding: 8px 10px; font-size: 13px; color: #64748b; }
.hdr-tabs { display: flex; gap: 4px; padding: 0 24px; overflow-x: auto; scrollbar-width: none; }
.hdr-tabs a { padding: 10px 12px 11px; font-size: 14px; font-weight: 600; color: #64748b; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.hdr-tabs a:hover { color: var(--ink); }
.hdr-tabs a.on { color: var(--ink); border-bottom-color: var(--ink); }
.cmdk { width: min(640px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 64px rgba(24,33,47,.25); margin-top: 12vh; }
.cmdk::backdrop { background: rgba(24,33,47,.35); }
.cmdk-in { margin: 0; border-bottom: 1px solid var(--line); }
.cmdk-in input { width: 100%; box-sizing: border-box; border: 0; outline: 0; padding: 16px 18px; font-size: 16px; font-family: inherit; }
.cmdk-list { max-height: 50vh; overflow: auto; padding: 6px; }
.cmdk-list a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; }
.cmdk-list a:hover, .cmdk-list a:focus { background: var(--mist); outline: 0; }
.cmdk-list em { font-style: normal; font-size: 12px; color: #64748b; }
.cmdk-foot { border-top: 1px solid var(--line); padding: 8px 14px; font-size: 12px; color: #64748b; }
@media (max-width: 720px) { .hdr-bar { padding: 8px 16px; } .hdr-badge { display: none; } .hdr-tabs { padding: 0 8px; } .hdr-search span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } }

/* ---------- Role commitments (Mission Critical and "Your commitments this week") ---------- */
.cad-wrap { margin-top: 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; padding: 12px; }
.cad-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; color: #64748b; }
.cad-count { font-size: 13px; font-weight: 600; color: #475569; white-space: nowrap; }
.cad { margin-top: 10px; border: 1px solid #e5e7eb; border-left: 4px solid #cbd5e1; border-radius: 8px; background: #fff; padding: 12px 14px; }
.cad .t { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink); }
.cad .s { margin-top: 3px; font-size: 13px; line-height: 18px; color: #64748b; }
.cad-prog { margin-top: 8px; display: grid; gap: 4px; }
.cad-prog .td-bar { margin-top: 0; height: 6px; }
.cad-line { font-size: 13px; font-weight: 600; color: #334155; }
.cad-items { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: #475569; }
.cad-items a { color: #334155; }
.cad-acts { margin-top: 10px; display: grid; gap: 8px; }
.cad-acts > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cad-who { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #64748b; min-width: 96px; }
.cad-help { font-size: 13px; color: #334155; margin-right: 4px; }
.mc-person { padding-top: 16px; }
.req { margin-top: 10px; border: 1px solid #e5e7eb; border-left: 4px solid #6366f1; border-radius: 8px; padding: 10px 12px; background: #fafaff; }
.req .t { font-size: 14px; font-weight: 700; color: var(--ink); }
.req .s { margin-top: 3px; font-size: 12px; color: #64748b; }

/* ---------- Client Command Center: one compact card per client ---------- */
.cl-list { margin-top: 12px; display: grid; gap: 12px; }
.cl { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.cl:hover { border-color: #cfded9; }
.cl-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cl-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.cl-name { font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; }
.cl-name:hover { text-decoration: underline; }
.cl-ind { font-size: 13px; color: #64748b; margin-right: 4px; }
.cl-side { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13px; color: #334155; }
.cl-owner { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.cl-owner .ws-avatar { border-width: 1px; }
.cl-grid { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef2f1; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cl-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.cl-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #64748b; }
.cl-v { margin-top: 4px; font-size: 14px; color: var(--ink); }
.cl-sub { display: block; margin-top: 2px; font-size: 12px; color: #64748b; }
.cl-setup { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.cl-setup .td-bar { flex: 1; margin-top: 0; height: 6px; }
.cl-setup b { font-size: 13px; }
.cl-chips { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.cl-chips span { font-size: 11px; font-weight: 600; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 9999px; padding: 1px 7px; }

/* ---------- Your plan for today ---------- */
.plan { margin-top: 18px; border: 1px solid #d9ece6; border-radius: 12px; background: linear-gradient(180deg, #f6fbfa, #fff 70%); padding: 14px 16px; }
.plan-h { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.plan-mix { font-size: 12px; font-weight: 600; color: #64748b; }
.plan-i { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; border: 1px solid #e5e7eb; border-left: 4px solid #cbd5e1; border-radius: 8px; background: #fff; padding: 12px 14px; }
.plan-n { flex: none; width: 24px; height: 24px; border-radius: 9999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.plan-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plan-t a { font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; }
.plan-t a:hover { text-decoration: underline; }
.plan-k { font-size: 11px; font-weight: 700; border-radius: 9999px; padding: 2px 8px; border: 1px solid; }
.plan-k.pro { color: #3730a3; background: #eef2ff; border-color: #c7d2fe; }
.plan-k.re { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.plan-w { margin-top: 3px; font-size: 13px; line-height: 18px; color: #475569; }

/* ---------- View as someone ---------- */
.pv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid #fcd34d; border-radius: 10px; background: #fffbeb; color: #78350f; font-size: 14px; }
.pv-sub { font-size: 12px; color: #92400e; }
.pv-sw { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pv-sw a { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid #fcd34d; border-radius: 9999px; background: #fff; color: #78350f; font-size: 12px; font-weight: 700; text-decoration: none; }
.pv-sw a:hover { background: #fef3c7; }
.pv-sw a.pv-exit { background: #78350f; border-color: #78350f; color: #fff; }
.pv-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.pv-card { display: flex; align-items: center; gap: 14px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; padding: 14px 16px; color: inherit; text-decoration: none; }
.pv-card:hover { border-color: #cfded9; background: #fbfdfc; }
.pv-card .td-min { flex: 1; }
.pv-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.pv-card .pv-sub { color: #64748b; }
.td-src { color: #94a3b8; }

/* ---------- Agent heartbeat ---------- */
.ah { margin-top: 12px; }
.ah-head, .ah-row { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(200px, 2fr) minmax(140px, 1fr); gap: 16px; align-items: center; }
.ah-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #64748b; padding: 0 4px 6px; border-bottom: 1px solid #eef2f1; }
.ah-row { padding: 12px 4px; border-bottom: 1px solid #f1f5f4; }
.ah-name { display: flex; gap: 10px; align-items: flex-start; }
.ah-name b { font-size: 14px; color: var(--ink); }
.ah-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; margin-top: 5px; }
.ah-sub { margin-top: 2px; font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 4px; }
.ah-spark { width: 100%; height: 44px; display: block; }
.ah-axis { display: flex; justify-content: space-between; font-size: 11px; color: #94a3b8; margin-top: 2px; }
.ah-bar { display: flex; align-items: center; gap: 8px; }
.ah-track { flex: 1; height: 12px; border-radius: 9999px; background: #f1f5f4; overflow: hidden; }
.ah-track span { display: block; height: 100%; border-radius: 9999px; }
.ah-bar b { min-width: 28px; text-align: right; font-size: 14px; color: var(--ink); }
.ah-note { margin: 10px 0 0; font-size: 12px; color: #64748b; }
@media (max-width: 720px) { .ah-head { display: none; } .ah-row { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Every list table: no clipping, compact cells ---------- */
.tbl-wrap { width: 100%; overflow-x: auto; margin-top: 8px; }
table.list { width: 100%; border-collapse: collapse; }
table.list th { white-space: nowrap; font-size: 12px; padding: 10px 12px; }
table.list td { font-size: 13.5px; padding: 10px 12px; vertical-align: top; }
table.list td:first-child { min-width: 200px; max-width: 320px; }
table.list td:not(:first-child) { white-space: nowrap; }
table.list td .muted { font-size: 12px; white-space: normal; }
.cl-sub.late { color: #b91c1c; font-weight: 600; }
.cl-fits { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.cl-fits span { font-size: 11px; font-weight: 600; color: #065f46; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 9999px; padding: 1px 7px; }
.td-lede { margin: 6px 0 0; color: #475569; font-size: 15px; }
.td-hero .ws-side .td-btns { justify-content: flex-end; }
.td-hero .td-herorow { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 20px; }
.td-hero .td-herorow > div:first-child { flex: 1 1 auto; }
@media (max-width: 720px) { .td-hero .td-herorow { flex-direction: column; } .td-hero .ws-side { align-items: flex-start; } }

/* Role commitment playbook: how to do it, ideas, prompts to copy */
.pb-top { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.pb-top h1 { margin: 4px 0 0; }
.pb-proposed { margin: 8px 0 0; font-size: 12px; color: var(--slate-600); }
.pb-prog { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; background: #fbfdfc; }
.pb-prog .td-bar { margin-top: 8px; }
.pb-prog .td-acts { margin-top: 10px; }
.pb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.pb-grid .card + .card { margin-top: 0; }
.pb-grid + .card { margin-top: 16px; }
.pb-h { margin: 0; font-size: 17px; }
.pb-steps, .pb-ideas { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.pb-steps li::marker { font-weight: 700; color: var(--teal); }
.pb-prompt { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: #fff; }
.pb-prompt .td-row { align-items: center; gap: 12px; }
.pb-pre { margin: 10px 0 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13px; line-height: 1.55; color: var(--slate-700); background: var(--mist); border-radius: 6px; padding: 10px 12px; max-height: 320px; overflow: auto; }
.pb-agent p { margin: 8px 0 0; }
.pb-agent .td-acts { margin-top: 10px; }
.pb-details { margin-top: 16px; }
.pb-details > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--slate-600); padding: 8px 2px; }
.pb-details > .card { margin-top: 8px; }
@media (max-width: 720px) { .pb-grid { grid-template-columns: 1fr; } .pb-top .td-av { display: none; } }
.pb-ideas li, .pb-steps li { white-space: pre-line; }
.login-grid.solo { grid-template-columns: 1fr; max-width: 560px; }

/* Agent picks: what an agent found for a person, decided with yes or no */
.sg-wrap { margin-top: 18px; }
.sg-group { margin-top: 12px; }
.sg-gh { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-500); margin: 0 0 6px; }
.sg { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-top: 8px; }
.sg.sg-decided { background: #fbfdfc; }
.sg-date { flex: none; width: 58px; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 0; background: var(--mist); line-height: 1.15; }
.sg-date span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--slate-600); }
.sg-date b { display: block; font-size: 22px; color: var(--ink); }
.sg-kind { flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--teal); background: #ecfdf5; border-radius: 6px; padding: 4px 8px; margin-top: 2px; }
.sg-t { font-size: 15px; font-weight: 700; color: var(--ink); }
.sg-meta { margin-top: 2px; font-size: 13px; color: var(--slate-700); }
.sg-why { margin-top: 6px; font-size: 13px; color: var(--ink); }
.sg-detail { margin-top: 6px; font-size: 13px; color: var(--slate-700); white-space: pre-line; }
.sg-quote { margin: 8px 0 0; padding: 6px 10px; border-left: 3px solid var(--teal); background: var(--mist); font-size: 13px; color: var(--slate-700); }
.sg-src { margin-top: 6px; font-size: 12px; color: var(--slate-500); }
.sg-link { color: var(--teal); text-decoration: underline; }
.sg-acts { margin-top: 10px; align-items: center; }
.sg-state { font-size: 12px; color: var(--slate-600); }
.sg-state.ok { font-weight: 700; color: var(--green); }
.sg-no { display: inline-block; }
.sg-no > summary { list-style: none; }
.sg-no > summary::-webkit-details-marker { display: none; }
.sg-no[open] > summary { background: var(--mist); }
.sg-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
@media (max-width: 720px) { .sg { flex-direction: column; } .sg-date { width: auto; display: flex; gap: 6px; padding: 4px 8px; align-items: baseline; } .sg-date b { font-size: 15px; } }

/* Today plan: critical now, then proactive; every item names the outcome it moves */
.plan-lede { margin: 4px 0 0; font-size: 12px; color: var(--slate-600); }
.plan-g { margin-top: 12px; }
.plan-gh { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: -2px; }
.plan-gh span { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--slate-500); margin-left: 4px; }
.plan-gh.crit { color: #b91c1c; }
.plan-gh.pro { color: #0f766e; }
.plan-clear { margin-top: 8px; font-size: 13px; color: var(--green); font-weight: 600; }
.plan-o { font-size: 11px; font-weight: 700; border-radius: 9999px; padding: 2px 8px; border: 1px solid; }
.plan-o.grow { color: #0f766e; background: #ecfdf5; border-color: #a7f3d0; }
.plan-o.deliver { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.plan-o.ops { color: #92400e; background: #fffbeb; border-color: #fde68a; }
/* Get a W in today: light, warm and motivating */
.plan-win { margin-top: 14px; padding: 14px 16px; border-radius: 10px; background: linear-gradient(135deg, #fffbeb 0%, #fef9c3 55%, #ecfdf5 100%); border: 1px solid #fde68a; }
.plan-win.done { background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 60%, #fffbeb 100%); border-color: #a7f3d0; }
.plan-win .pw-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #92400e; }
.plan-win.done .pw-h { color: #065f46; }
.plan-win .pw-t { margin-top: 4px; font-size: 16px; font-weight: 700; color: var(--ink); }
.plan-win .pw-s { margin-top: 4px; font-size: 13px; color: var(--slate-700); }
.plan-win .td-acts { margin-top: 10px; }

/* Project workspace: links to the work, blocker, steps, ideas */
.pj-due { margin-top: 8px; font-size: 13px; color: var(--slate-700); border-left: 4px solid var(--line); padding-left: 8px; }
.pj-due.td-bl-red { border-left-color: #ef4444; } .pj-due.td-bl-amber { border-left-color: #f59e0b; } .pj-due.td-bl-green { border-left-color: #10b981; }
.pj-next { margin-top: 8px; font-size: 14px; }
.pj-next a { color: var(--ink); }
.pj-links { display: grid; gap: 8px; margin-top: 12px; }
.pj-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-decoration: none; color: var(--ink); }
.pj-link:hover { background: var(--mist); border-color: #bcd3cd; }
.pj-ic { flex: none; font-size: 22px; width: 32px; text-align: center; }
.pj-link b { display: block; font-size: 14px; }
.pj-note { display: block; font-size: 12px; color: var(--slate-600); margin-top: 1px; }
.pj-open { margin-left: auto; flex: none; font-size: 12px; font-weight: 700; color: var(--teal); }
.pj-block { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--amber-line); background: var(--amber-bg); color: var(--amber-ink); border-radius: 8px; font-size: 13px; }
.pj-step { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #eef2f1; }
.pj-step:last-child { border-bottom: 0; }
.pj-check { flex: none; width: 20px; text-align: center; font-size: 14px; color: var(--teal); margin-top: 1px; }
.pj-step.done .pj-st { color: var(--slate-500); text-decoration: line-through; }
.pj-st { font-size: 14px; font-weight: 600; color: var(--ink); }
.pj-sm { margin-top: 2px; font-size: 12px; color: var(--slate-500); }
.pj-tag { font-weight: 700; color: var(--slate-600); }
.pj-tag.ok { color: var(--green); } .pj-tag.go { color: #b45309; }
.pj-late { color: var(--red); font-weight: 700; }
.pj-win { padding: 8px 0; border-bottom: 1px solid #eef2f1; font-size: 14px; }
.pj-win:last-child { border-bottom: 0; }
.pj-notes { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--slate-700); white-space: pre-wrap; }

/* This week: key meetings with what to do before each, a brief on request, and a reminder */
.wk-m { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid #cbd5e1; border-radius: 10px; background: #fff; }
.wk-m.crit { border-left-color: var(--teal); }
.wk-when { font-size: 12px; font-weight: 700; color: var(--slate-600); text-transform: uppercase; letter-spacing: .03em; }
.wk-t { margin-top: 2px; font-size: 16px; font-weight: 700; color: var(--ink); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wk-who { margin-top: 2px; font-size: 13px; color: var(--slate-700); }
.wk-why { margin-top: 6px; font-size: 13px; color: var(--ink); }
.wk-prep { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; }
.wk-ph { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #0f766e; }
.wk-prep ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.wk-prep a { color: var(--ink); text-decoration: underline; text-decoration-color: #cbd5e1; }
.wk-m .td-acts { margin-top: 10px; }
.wk-brief { flex-basis: 100%; }
.wk-brief > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--teal); }
.wk-brief-body { margin-top: 8px; white-space: pre-wrap; font-size: 13px; line-height: 1.55; background: var(--mist); border-radius: 6px; padding: 10px 12px; }
.wk-brief-q { margin-top: 8px; font-size: 13px; }
.wk-sub { margin-top: 18px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-500); }
.wk-empty { margin-top: 12px; padding: 14px; border: 1px dashed #cbd5e1; border-radius: 10px; font-size: 13px; color: var(--slate-700); }
.wk-empty p { margin: 0 0 10px; }
.wk-due { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.wk-due li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.wk-due a { font-weight: 600; color: var(--ink); }
.wk-day { min-width: 88px; font-size: 12px; font-weight: 700; color: var(--slate-600); }
.wk-tag { font-size: 11px; color: var(--slate-600); background: #f1f5f9; border-radius: 9999px; padding: 1px 8px; }
.wk-tag.late { color: #991b1b; background: #fef2f2; }