/* Waymark Owner Command Center V2 · additions on top of app.css (shared with V1):
   Lumen appearance, capability badges, sub-navigation, account/case layouts, reminders, help, phone states. */
:root[data-look="lumen"] {
  --bg: #F2F3F9; --surface: #FFFFFF; --sunken: #E8EAF4; --raised: #FFFFFF; --hairline: #DDE0EE; --border: #C4C8DC;
  --text: #0F1228; --text-2: #555B7A; --text-3: #7C819E;
  --primary: #4A44DB; --on-primary: #FFFFFF; --primary-soft: #E6E5FC; --primary-ink: #3730B8; --primary-line: #CAC7F7;
  --sidebar: #0F1228; --sidebar-2: #1B1F3B; --sidebar-text: #E4E6F5; --sidebar-muted: #9CA1C4; --sidebar-active: #2E2A8F;
  --chart-1: #4A44DB; --chart-2: #E08A00; --chart-3: #0E9C76; --chart-4: #B71C30; --chart-5: #7357D9; --chart-grid: #E3E5F0; --focus: #3730B8;
}
:root[data-look="lumen"][data-theme="dark"] {
  --bg: #0A0B17; --surface: #141628; --sunken: #1D2036; --raised: #191B30; --hairline: #262A44; --border: #3A3F63;
  --text: #EDEEF8; --text-2: #A6AAC8; --text-3: #7F84A6;
  --primary: #8E88FF; --on-primary: #0A0B17; --primary-soft: #24224A; --primary-ink: #C3C0FF; --primary-line: #3B3878;
  --sidebar: #06070F; --sidebar-2: #12142A; --sidebar-active: #24224A;
  --chart-1: #8E88FF; --chart-2: #F2A11F; --chart-3: #5CC9A8; --chart-4: #F28B9A; --chart-5: #B3A2F5; --chart-grid: #22253D; --focus: #C3C0FF;
}

/* Sidebar: seven items, a little more air than V1 */
.nav-link { padding: 9px 10px; font-size: 14px; }
.nav-group { margin-top: 14px; }

.cap { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 1px 8px 1px 2px; border-radius: 99px; border: 1px solid var(--hairline); color: var(--text-2); background: var(--surface); white-space: nowrap; }
.cap b { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font-size: 10.5px; color: #fff; }
.cap-A b { background: #2F7D57; } .cap-B b { background: #4F5FE8; } .cap-C b { background: #8F4A00; } .cap-D b { background: #6A4FD0; } .cap-E b { background: #6B756F; }
.ready { font-size: 11px; font-weight: 600; color: var(--text-2); border: 1px dashed var(--border); border-radius: 99px; padding: 1px 8px; white-space: nowrap; display: inline-block; margin: 1px 0; }
.ready.EXISTS { border-style: solid; color: var(--success-ink); background: var(--success-soft); border-color: transparent; }

.subnav { display: flex; gap: 2px; border-bottom: 1px solid var(--hairline); margin: 14px 0 18px; overflow-x: auto; scrollbar-width: thin; }
.subnav a { padding: 9px 14px; font-weight: 600; font-size: 13.5px; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav a:hover { color: var(--text); }
.subnav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--primary); }
.page-intro { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.page-intro h1 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 28px; margin: 0; letter-spacing: -.01em; }
.page-intro p { margin: 4px 0 0; color: var(--text-2); max-width: 720px; }
.page-intro .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cap-panel { margin: 0 0 16px; }
.cap-panel > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2); display: inline-flex; gap: 6px; align-items: center; padding: 4px 0; }
.cap-panel[open] > summary { color: var(--text); }
.cap-panel .table-wrap { margin-top: 8px; }

.help-i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; padding: 0; flex: none; }
.help-i svg { width: 13px; height: 13px; }
.help-i:hover { color: var(--primary-ink); border-color: var(--primary-line); }

.kpi-sub { font-size: 12px; color: var(--text-2); }
.kpi .value.na { font-size: 15px; color: var(--text-2); font-weight: 600; }
.attn { list-style: none; margin: 0; padding: 0; }
.attn li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.attn li:last-child { border-bottom: 0; }
.attn .ai { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.attn .ai.bad { background: var(--danger-soft); color: var(--danger); } .attn .ai.warn { background: var(--warning-soft); color: var(--warning-ink); } .attn .ai.info { background: var(--info-soft); color: var(--info-ink); }
.attn .t1 { font-weight: 600; font-size: 13.5px; } .attn .t2 { color: var(--text-2); font-size: 12px; }

.acct-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.avatar { width: 46px; height: 46px; border-radius: 14px; background: var(--primary-soft); color: var(--primary-ink); display: grid; place-items: center; font-weight: 700; font-size: 17px; flex: none; }
.acct-head h1 { font-size: 24px; margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 600; }
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none; margin-bottom: 10px; }
.back-link:hover { color: var(--text); }

.thread { display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 78%; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.bubble small { display: block; color: var(--text-2); font-size: 11.5px; margin-bottom: 3px; }
.bubble.user { background: var(--sunken); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.owner { background: var(--primary-soft); align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble.note { background: var(--warning-soft); align-self: stretch; max-width: none; border: 1px dashed color-mix(in srgb, var(--warning) 50%, transparent); }

.due-group { margin-bottom: 16px; }
.due-group h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-2); margin: 0 0 6px; font-weight: 650; }
.due-group.overdue h3 { color: var(--danger); }
.rem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); margin-bottom: 6px; }
.rem.done { opacity: .62; } .rem.done .t1 { text-decoration: line-through; }
.rem .t1 { font-weight: 600; font-size: 13.5px; } .rem .t2 { font-size: 12px; color: var(--text-2); }
.svc-card { display: flex; flex-direction: column; gap: 8px; }
.svc-card h3 { margin: 0; font-size: 15px; }
.ext-link { display: inline-flex; gap: 5px; align-items: center; font-weight: 600; font-size: 13px; }

.dict-card { border: 1px solid var(--hairline); border-radius: 14px; padding: 14px 16px; background: var(--surface); }
.dict-card h3 { margin: 0 0 4px; font-size: 15px; }
.dict-card dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 5px 12px; font-size: 12.5px; margin: 10px 0 0; }
.dict-card dt { color: var(--text-2); font-weight: 600; }
.dict-card dd { margin: 0; overflow-wrap: anywhere; }

.pl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 14px; font-size: 14px; }
.pl .lbl { color: var(--text-2); } .pl .val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl .total { border-top: 1px solid var(--hairline); padding-top: 8px; font-weight: 700; color: var(--text); }
.verdict { font-size: 15px; line-height: 1.5; padding: 12px 14px; border-radius: 12px; background: var(--sunken); }

.phone .p-banner { background: var(--p-sunken); color: var(--p-text); border-radius: 12px; padding: 8px 10px; font-size: 12px; display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.phone .p-banner.err { background: #FCE9E8; color: #8E1C1C; }
.phone.dark .p-banner.err { background: #3D1D1D; color: #F7A3A3; }
.phone .p-banner svg { width: 15px; height: 15px; flex: none; }
.phone-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 12px; font-size: 12px; }
.phone-tools .field { font-size: 12px; }
.legend-caps { display: grid; gap: 8px; }
.legend-caps div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; }

@media (max-width: 860px) { .dict-card dl { grid-template-columns: 1fr; } .bubble { max-width: 92%; } .legend-caps div { grid-template-columns: 1fr; } }