/* Unison shell styles — extracted from index.html (visual-parity Task 1).
Loaded after tokens.css. */
/* Unison U1 shell — Today + check-in (docs/unison/SPEC.md §5 U1).
Layout deliberately minimal: one column, big type, ≥44px targets.
Later slices add navigation; U1 is a single caring page. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--font-base); }
body {
font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--ink);
min-height: 100vh; line-height: 1.55;
}
body[data-size="lg"] .shell, body[data-size="lg"] .a11y-bar, body[data-size="lg"] .mob-drawer, body[data-size="lg"] .mob-menu-btn { zoom: 1.14; }
body[data-size="xl"] .shell, body[data-size="xl"] .a11y-bar, body[data-size="xl"] .mob-drawer, body[data-size="xl"] .mob-menu-btn { zoom: 1.3; }
/* pre-auth (no shell): zoom the centered card container */
body:not(.signed-in)[data-size="lg"] .main { zoom: 1.14; }
body:not(.signed-in)[data-size="xl"] .main { zoom: 1.3; }
.a11y-bar {
display: flex; align-items: center; justify-content: flex-end; gap: 8px;
padding: 8px 16px; background: var(--card); border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.a11y-bar .keyless { margin-right: auto; font-size: 13px; color: var(--ink-soft); }
.a11y-btn {
display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 14px;
border: 1.5px solid var(--line); background: var(--card); border-radius: 10px;
font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.a11y-btn:hover { border-color: var(--teal); background: var(--teal-light); }
.a11y-btn.on { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
main { max-width: 640px; margin: 0 auto; padding: 28px 18px 70px; }
.brand { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.brand-mark {
width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
background: linear-gradient(135deg, var(--teal-bright), var(--teal-dark));
display: flex; align-items: center; justify-content: center;
}
.brand-name { font-weight: 800; font-size: 16px; }
.brand-name span { color: var(--teal); }
.brand-sub { font-size: 12px; color: var(--ink-soft); }
.card {
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 18px;
}
.card + .card { margin-top: 16px; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
.sub { font-size: 14.5px; color: var(--ink-soft); margin-top: 5px; }
h2 { font-size: 16px; font-weight: 700; }
label { display: block; font-size: 14.5px; font-weight: 600; margin: 16px 0 6px; }
input[type="email"], input[type="text"], input[type="password"] {
width: 100%; min-height: 48px; font-family: inherit; font-size: 16px; color: var(--ink);
padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--card);
}
input[type="email"]:focus, input[type="text"]:focus, input[type="password"]:focus { border-color: var(--teal); outline: none; }
.pw-fallback { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 6px; }
.linklike {
background: none; border: none; color: var(--teal-dark); font-family: inherit; font-size: 14.5px;
font-weight: 600; text-decoration: underline; cursor: pointer; padding: 10px 0; min-height: var(--tap-min);
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: var(--tap-min); padding: 10px 22px; margin-top: 14px;
border: none; border-radius: 12px; background: var(--teal-dark); color: #fff;
font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer; width: 100%;
}
.btn:hover { background: var(--teal-darker); }
.note { margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); }
.callout {
margin-top: 14px; padding: 13px 15px; background: var(--teal-light); border-radius: 11px;
font-size: 15px; color: var(--teal-dark); font-weight: 600;
}
.callout.err { background: var(--red-light); color: var(--red); }
.checkin-btns { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.checkin-btn {
flex: 1; min-width: 130px; min-height: 58px; border: 2px solid var(--line); border-radius: 14px;
background: var(--card); font-family: inherit; cursor: pointer; padding: 8px;
font-size: 15px; font-weight: 700; color: var(--ink);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.checkin-btn small { font-weight: 500; font-size: 12.5px; color: var(--ink-soft); }
.checkin-btn:hover { border-color: var(--teal); }
.checkin-btn.picked { border-color: var(--teal-dark); background: var(--teal-light); }
.checkin-btn:disabled { opacity: .55; cursor: default; }
.hist-item {
display: flex; align-items: center; gap: 10px; padding: 11px 2px;
border-bottom: 1px solid var(--line); font-size: 15px;
}
.hist-item:last-child { border-bottom: none; }
.hist-item .lvl { font-weight: 700; flex: 1; }
.hist-item .d { font-size: 13px; color: var(--ink-soft); }
.dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.dot.full { background: var(--teal); } .dot.steady { background: #b7861f; } .dot.low { background: var(--red); }
.empty { color: var(--ink-soft); font-size: 15px; padding: 10px 0; }
/* ── care board (U2) ── */
.pair-row {
display: flex; align-items: center; gap: 12px; padding: 12px 2px;
border-bottom: 1px solid var(--line); font-size: 15px; flex-wrap: wrap;
}
.pair-row:last-child { border-bottom: none; }
.pair-row .who { flex: 1; min-width: 150px; font-weight: 600; }
.pair-row .who small { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-soft); }
.chip {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
font-size: 13px; font-weight: 600; background: var(--teal-light); color: var(--teal-dark); white-space: nowrap;
}
.chip.due { background: var(--amber-light); color: var(--amber); }
.chip.overdue { background: var(--red-light); color: var(--red); }
.mini-btn {
border: 1.5px solid var(--line); background: var(--card); border-radius: 999px;
min-height: var(--tap-min); padding: 6px 16px; font-family: inherit; font-size: 14px;
font-weight: 600; color: var(--teal-dark); cursor: pointer;
}
.mini-btn:hover { background: var(--teal-light); border-color: var(--teal); }
.mini-btn.did { background: var(--teal-dark); color: #fff; border-color: var(--teal-dark); }
/* ── prayer wall (U2) ── */
textarea {
width: 100%; min-height: 74px; font-family: inherit; font-size: 16px; color: var(--ink);
padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--card);
resize: vertical; margin-top: 12px;
}
textarea:focus { border-color: var(--teal); outline: none; }
.pray-item { padding: 13px 15px; background: var(--bg); border-radius: 11px; font-size: 15px; line-height: 1.55; margin-top: 10px; }
.pray-item .by { font-size: 13px; color: var(--ink-soft); margin-top: 7px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.family-line { text-align: center; margin-top: 34px; font-size: 12px; color: var(--ink-soft); }
/* ── nav tabs (U3) ── */
.tabs { display: flex; gap: 10px; margin-bottom: 20px; }
.tab {
flex: 1; min-height: var(--tap-min); padding: 12px 16px; border: 2px solid var(--line);
border-radius: 14px; background: var(--card); font-family: inherit; font-size: 16px;
font-weight: 700; color: var(--ink-soft); cursor: pointer;
}
.tab:hover { border-color: var(--teal); }
.tab.on { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
/* ── handbook (U3) ── */
.chapter {
display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
padding: 16px 4px; border: none; border-bottom: 1px solid var(--line);
background: none; font-family: inherit; cursor: pointer; color: var(--ink);
}
.chapter:last-child { border-bottom: none; }
.chapter .num {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--teal-light);
color: var(--teal-dark); font-weight: 800; font-size: 16px;
display: flex; align-items: center; justify-content: center;
}
.chapter .meta { flex: 1; }
.chapter .ct { font-size: 15.5px; font-weight: 700; }
.chapter .cs { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
.readchip {
flex-shrink: 0; align-self: center; font-size: 12px; font-weight: 600; color: var(--ink-soft);
background: var(--bg); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.plainbox {
background: var(--teal-light); border-radius: 12px; padding: 16px 18px; margin-top: 6px;
}
.plainbox .pl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--teal-dark); }
.plainbox .pw { font-size: 16px; color: var(--ink); margin-top: 6px; line-height: 1.55; }
.hb-body { margin-top: 20px; font-size: 16px; line-height: 1.7; }
.hb-body h1 { font-size: 19px; margin: 22px 0 8px; }
.hb-body h2 { font-size: 16.5px; margin: 20px 0 7px; }
.hb-body h3 { font-size: 15.5px; margin: 16px 0 6px; }
.hb-body p { margin: 10px 0; }
.hb-body ul { margin: 10px 0 10px 20px; }
.hb-body li { margin: 4px 0; }
.hb-amends { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.hb-amends h2 { font-size: 15px; }
.amend { font-size: 14px; color: var(--ink-soft); padding: 7px 0; }
.amend b { color: var(--teal-dark); }
/* ── decisions (U4) ── */
.dec-week { font-size: 14px; color: var(--ink-soft); margin: 2px 0 4px; }
.meter { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; margin: 12px 0 4px; }
.meter.ok { background: var(--teal-light); color: var(--teal-dark); }
.meter.warm { background: var(--amber-light); color: var(--amber); }
.meter.hot { background: var(--red-light); color: var(--red); }
.dec-card {
display: block; width: 100%; text-align: left; padding: 15px 4px; border: none;
border-bottom: 1px solid var(--line); background: none; font-family: inherit; cursor: pointer; color: var(--ink);
}
.dec-card:last-child { border-bottom: none; }
.dec-card .dt { font-size: 15.5px; font-weight: 700; }
.dec-card .da { font-size: 14px; color: var(--ink-soft); margin: 3px 0; }
.dec-card .drow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.state {
display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
font-size: 12.5px; font-weight: 600; background: var(--bg); color: var(--ink-soft); white-space: nowrap;
}
.state.ready { background: var(--teal-light); color: var(--teal-dark); }
.state.talk-requested { background: var(--amber-light); color: var(--amber); }
.state.closed-no-quorum { background: var(--red-light); color: var(--red); }
.askbox { background: var(--teal-light); border-radius: 12px; padding: 16px 18px; margin-top: 12px; }
.askbox .pl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--teal-dark); }
.askbox .pw { font-size: 16px; color: var(--ink); margin-top: 6px; line-height: 1.55; }
.dec-meta { font-size: 14px; color: var(--ink-soft); margin-top: 12px; }
.quorum { font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 16px 0 4px; }
.voices { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.voice-btn {
flex: 1; min-width: 130px; min-height: 60px; border: 2px solid var(--line); border-radius: 14px;
background: var(--card); font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.voice-btn:hover { border-color: var(--teal); }
.voice-btn.picked { border-color: var(--teal-dark); background: var(--teal-light); color: var(--teal-dark); }
.layer { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--bg); }
.layer .pl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.layer .lv { font-size: 15.5px; margin-top: 5px; line-height: 1.55; }
.layer.locked { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 8px, var(--card) 8px, var(--card) 16px); }
/* ── health pulse (U5) ── */
.hrow { display: flex; align-items: center; gap: 12px; padding: 9px 2px; flex-wrap: wrap; }
.hlabel { flex: 1; min-width: 150px; font-size: 15px; font-weight: 600; }
.hdots { display: inline-flex; gap: 8px; }
.hdot { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); cursor: pointer; padding: 0; }
.hdot.v1 { border-color: #d04545; } .hdot.v2 { border-color: #b7861f; } .hdot.v3 { border-color: var(--teal); }
.hdot.v1.on { background: #d04545; } .hdot.v2.on { background: #b7861f; } .hdot.v3.on { background: var(--teal); }
.hdot:hover { transform: scale(1.06); }
.hagg-title { font-size: 14px; font-weight: 700; color: var(--ink-soft); margin: 14px 0 6px; }
.trow { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--line); }
.trow:last-child { border-bottom: none; }
.tdot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.tdot.red { background: #d04545; } .tdot.amber { background: #b7861f; } .tdot.green { background: var(--teal); }
.tarrow { font-weight: 700; color: var(--ink-soft); min-width: 18px; }
/* ── advisory circle (U6, board-side) ── */
.scope-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-size: 15px; }
.scope-row input { width: 22px; height: 22px; }
.adv-link { word-break: break-all; font-size: 13.5px; background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; margin: 8px 0; }
.adv-row { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.adv-row:last-child { border-bottom: none; }
.adv-row .an { flex: 1; min-width: 140px; font-weight: 600; }
.adv-row .an small { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-soft); }
.adv-badge { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--teal-light); color: var(--teal-dark); }
.adv-badge.off { background: var(--red-light); color: var(--red); }
.hidden { display: none !important; }
/* ============================================================
Visual-parity T2 — mockup shell: sidebar + topbar + screens.
Ported from unison-church-mockup.html. Layout + shell only;
screen-internal component skinning follows in later tasks.
============================================================ */
/* Full-height app shell (matches the WhiteBoard app): the page itself never
scrolls — the nav and the main content each scroll inside their own region,
so the sidebar footer is always visible without scrolling. */
body.signed-in { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
/* Signed in, the three reading controls live in the topbar's Reading-settings
menu — the bar only shows pre-auth (sign-in card), giving the app the room. */
body.signed-in .a11y-bar { display: none; }
.shell { display: flex; }
body.signed-in .shell { flex: 1; min-height: 0; }
.sidebar {
width: 236px; flex-shrink: 0; background: var(--card); border-right: 1px solid var(--line);
display: flex; flex-direction: column;
}
.sidebar-header { padding: 18px 16px 14px; border-bottom: 1px solid var(--line); }
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0; }
.sidebar-user { font-size: 12px; color: var(--ink-soft); padding: 12px 2px 0; }
.sidebar-user strong { color: var(--ink); font-weight: 600; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; padding: 10px 8px; }
.nav button {
display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 10px 12px;
border: none; background: none; border-radius: 10px; cursor: pointer;
font-family: inherit; font-size: 15px; font-weight: 500; color: var(--ink-soft); text-align: left; width: 100%;
}
.nav button:hover { background: var(--bg); color: var(--ink); }
.nav button.active { background: var(--teal-light); color: var(--teal-dark); font-weight: 600; }
.nav button.active svg { stroke: var(--teal-dark); }
.nav svg { width: 19px; height: 19px; stroke: var(--ink-soft); flex-shrink: 0; }
.nav button:hover svg { stroke: var(--ink); }
.nav .waiting-pill {
margin-left: auto; font-size: 11.5px; font-weight: 700; background: var(--teal-light);
color: var(--teal-dark); border-radius: 999px; padding: 2px 9px;
}
.nav button.active .waiting-pill { background: var(--teal); color: #fff; }
.sidebar-foot { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); line-height: 1.55; flex-shrink: 0; }
.sidebar-foot b { color: var(--teal-dark); }
.sidebar-foot .family-line { margin-top: 8px; font-size: 11px; color: var(--ink-soft); text-align: left; }
.main { flex: 1; min-width: 0; overflow-y: auto; padding: 22px 30px 44px; max-width: 1120px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; }
.page-title h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.3px; }
.page-title p { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; max-width: 620px; }
.screen { display: none; }
.screen.active { display: block; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.grid-2 > * { min-width: 0; }
.mt { margin-top: 16px; }
.readtime { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.voice-note { text-align: center; padding: 22px 20px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.voice-note b { color: var(--teal-dark); display: block; font-size: 16.5px; margin-bottom: 4px; }
.btn.ghost { background: none; border: 1.5px solid var(--line); color: var(--teal-dark); }
.btn.ghost:hover { border-color: var(--teal); background: var(--teal-light); }
/* pre-auth: no chrome, just the centered card */
body:not(.signed-in) .sidebar,
body:not(.signed-in) .topbar,
body:not(.signed-in) .mob-menu-btn,
body:not(.signed-in) .mob-scrim,
body:not(.signed-in) .mob-drawer { display: none; }
body:not(.signed-in) .main { max-width: 560px; margin: 0 auto; }
/* ---- Mobile navigation: hamburger + slide-up drawer — identical structure to
the other apps (app/planner/maintain). Desktop keeps the sidebar (>940px). */
.mob-menu-btn, .mob-scrim, .mob-drawer { display: none; }
@media (max-width: 940px) {
.grid-2 { grid-template-columns: 1fr; }
.sidebar { display: none; }
.main { padding: 18px 16px 96px; }
body.signed-in .mob-menu-btn {
display: flex; position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
width: 52px; height: 52px; border-radius: 50%; background: var(--teal-dark); color: #fff;
align-items: center; justify-content: center; border: none; cursor: pointer;
box-shadow: 0 4px 18px rgba(34,48,42,.28); z-index: 200;
}
.mob-menu-btn.open { display: none !important; }
.mob-scrim { position: fixed; inset: 0; z-index: 190; background: rgba(34,48,42,.35); }
.mob-scrim.open { display: block; }
.mob-drawer {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 195; background: var(--card);
border-radius: 20px 20px 0 0; padding: 12px 12px calc(24px + env(safe-area-inset-bottom));
box-shadow: 0 -8px 40px rgba(34,48,42,.16); max-height: 88vh; overflow-y: auto;
}
.mob-drawer.open { display: block; animation: drawerUp 0.28s cubic-bezier(0.32,0.72,0,1); }
@keyframes drawerUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.mob-drawer-handle { display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; gap: 10px; cursor: pointer; }
.mob-drawer-handle::before { content: ''; display: block; width: 36px; height: 4px; background: var(--line); border-radius: 4px; }
.mob-drawer-close { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.mob-drawer-user { font-size: 12px; color: var(--ink-soft); padding: 8px 8px 6px; }
.mob-drawer-user strong { color: var(--ink); }
.mob-drawer .mob-nav-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 10px; border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 500; color: var(--ink); text-align: left; min-height: 46px; }
.mob-drawer .mob-nav-btn svg { width: 18px; height: 18px; stroke: var(--ink-soft); flex-shrink: 0; }
.mob-drawer .mob-nav-btn:hover, .mob-drawer .mob-nav-btn.active { background: var(--teal-light); color: var(--teal-dark); }
.mob-drawer .mob-nav-btn.active svg { stroke: var(--teal-dark); }
.mob-drawer .mob-nav2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mob-drawer .mob-nav2 .mob-nav-btn { font-size: 13.5px; padding: 10px; min-width: 0; min-height: 44px; }
.mob-drawer .mob-nav2 .mob-nav-btn svg { width: 16px; height: 16px; }
.mob-drawer-account { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mob-drawer-account .mob-nav-btn { font-size: 13.5px; padding: 10px; }
.mob-drawer .mob-signout, .mob-drawer .mob-signout svg { color: #c62828; stroke: #c62828; }
.mob-drawer-fb { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 16px); margin: 10px 8px 2px; padding: 11px; border-radius: 999px; border: 1.5px solid var(--teal); background: var(--card); color: var(--teal-dark); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.mob-drawer-fb svg { width: 16px; height: 16px; stroke: var(--teal); }
/* App-switcher carousel at the top of the drawer — current app lit, others greyed */
.mob-appsw { display: flex; gap: 8px; overflow-x: auto; padding: 2px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.mob-appsw::-webkit-scrollbar { display: none; }
.mas-chip { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); cursor: pointer; font-family: inherit; scroll-snap-align: start; }
.mas-chip.cur { border-width: 2px; }
.mas-tile { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mas-tile svg { width: 20px; height: 20px; stroke: #fff; }
.mas-nm { font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
/* Leadership-style chip (same as the other apps) */
.mob-style-badge:empty { display: none; }
.mob-style-badge { padding: 0 0 4px; }
/* Profile icon + app-switcher button leave the top bar on mobile — the menu carries both */
body.signed-in #user-avatar, body.signed-in #appsw-btn { display: none; }
}
/* ============================================================
Visual-parity T3 — Today + Decisions components (from mockup)
============================================================ */
.card h2 { display: flex; align-items: center; gap: 9px; }
.card h2 svg { width: 19px; height: 19px; stroke: var(--teal); flex-shrink: 0; }
/* ---- Today: waiting-on-you + time respect ---- */
.wait-item {
display: flex; align-items: center; gap: 14px; padding: 15px 16px; border: 1.5px solid var(--line);
border-radius: 12px; margin-top: 10px; background: var(--card); flex-wrap: wrap;
}
.wait-item .ic {
width: 40px; height: 40px; border-radius: 11px; background: var(--teal-light);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wait-item .ic svg { width: 19px; height: 19px; stroke: var(--teal-dark); }
.wait-item .tx { flex: 1; min-width: 160px; }
.wait-item .tx b { font-size: 15.5px; font-weight: 600; display: block; }
.wait-item .tx span { font-size: 13px; color: var(--ink-soft); }
.time-respect {
margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--ink-soft);
border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px;
}
.time-respect b { color: var(--teal-dark); }
/* ---- Decisions: brief anatomy ---- */
.brief-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.brief-head h1, .brief-head h3 { font-size: 18px; font-weight: 700; flex: 1; min-width: 200px; letter-spacing: -0.3px; }
.plain-box { background: var(--teal-light); border-radius: 12px; padding: 14px 16px; margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.plain-box .pl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--teal-dark); margin-bottom: 4px; }
.discern { margin-top: 14px; padding: 12px 15px; border-left: 3px solid var(--teal); background: var(--teal-light); border-radius: 0 10px 10px 0; font-size: 14px; line-height: 1.55; }
.discern .pl { font-weight: 700; color: var(--teal-dark); }
.voices { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.voice-btn {
flex: 1; min-width: 150px; min-height: 58px; border: 2px solid var(--line); border-radius: 14px;
background: var(--card); font-family: inherit; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--ink);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px;
}
.voice-btn small { font-weight: 500; font-size: 12px; color: var(--ink-soft); }
.voice-btn:hover { border-color: var(--teal); }
.voice-btn.picked { border-color: var(--teal-dark); background: var(--teal-light); }
.voice-btn.picked small { color: var(--teal-dark); }
.quorum { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; background: var(--bg); border-radius: 12px; font-size: 13.5px; flex-wrap: wrap; }
.quorum .qbar { flex: 1; min-width: 120px; height: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.quorum .qfill { height: 100%; background: linear-gradient(90deg, var(--teal-bright), var(--teal-dark)); border-radius: 99px; }
.layer { border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; overflow: hidden; }
.layer-head { display: flex; align-items: center; gap: 9px; padding: 10px 15px; background: var(--bg); font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-soft); }
.layer-body { padding: 14px 16px; font-size: 14.5px; line-height: 1.6; }
.layer.board .layer-head { background: var(--teal-light); color: var(--teal-dark); }
.layer.locked .layer-body { color: var(--ink-soft); font-style: italic; background: repeating-linear-gradient(-45deg, #fafaf7, #fafaf7 8px, #f4f3ee 8px, #f4f3ee 16px); }
.chip.amber { background: var(--amber-light); color: var(--amber); }
.chip.ghost { background: var(--bg); color: var(--ink-soft); }
/* ============================================================
Top-right chrome — search · app-switcher · profile (uniform
with the platform), + the ⌘K search palette.
============================================================ */
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tr-search {
display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 12px;
border: 1.5px solid var(--line); background: var(--card); border-radius: 11px; cursor: pointer;
font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
}
.tr-search:hover { border-color: var(--teal); }
.tr-search svg { width: 16px; height: 16px; stroke: var(--ink-soft); }
.tr-search kbd { font-family: inherit; font-size: 11px; font-weight: 700; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink-soft); }
/* Trigger is a bare icon everywhere (2026-07-09) — it expands to the ⌘K overlay
on click. The "Search" label + kbd hint stay in the DOM (aria) but hidden. */
.tr-search span, .tr-search kbd { display: none; }
.tr-search { gap: 0; padding: 9px; }
.tr-icon {
width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
border: 1.5px solid var(--line); background: var(--card); border-radius: 11px; cursor: pointer;
}
.tr-icon:hover { border-color: var(--teal); background: var(--teal-light); }
.tr-icon svg { width: 19px; height: 19px; stroke: var(--ink-soft); }
.tr-icon:hover svg { stroke: var(--teal-dark); }
.tr-avatar {
width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
background: linear-gradient(135deg, var(--teal-bright), var(--teal-dark)); color: #fff;
font-family: inherit; font-size: 15px; font-weight: 700;
}
.appsw-wrap, .avatar-wrap, .set-wrap { position: relative; }
.appsw-menu, .avatar-menu, .set-menu {
position: absolute; top: 48px; right: 0; z-index: 50; background: var(--card);
border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 30px rgba(34,48,42,.16);
padding: 8px; min-width: 260px;
}
/* Platform-standard switcher rows (identical structure to app / planner /
maintain): 40px gradient tile + name + chip + tagline, "You're here" pill
on the current app, no arrows. Tile gradients are each product's own mark. */
.appsw-menu { min-width: 340px; }
.appsw-head {
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink-soft); padding: 8px 10px 4px;
}
.appsw-row {
display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px;
background: none; border: none; border-radius: 9px; cursor: pointer;
font-family: inherit; text-align: left; text-decoration: none; color: var(--ink);
}
.appsw-row:hover { background: var(--bg); }
.appsw-row.current { cursor: default; }
.appsw-tile {
width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
/* Parent-brand teal on the WhiteBoard tile is a product mark, not a
surface accent — same ruling as on the Maintain surface. */
background: linear-gradient(135deg, #0ecab6, #007a6e);
}
.appsw-tile.steel { background: linear-gradient(135deg, #4d87b5, #2a5480); }
.appsw-tile.purple { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.appsw-tile.green { background: linear-gradient(135deg, #43a47c, #1f5a40); }
.appsw-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.appsw-line1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.appsw-name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.appsw-suffix { font-weight: 700; }
.appsw-tag { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appsw-chip {
font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px;
padding: 2px 8px; flex-shrink: 0;
}
.appsw-here {
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
color: var(--teal-dark); background: var(--teal-light); border-radius: 20px;
padding: 2px 8px; flex-shrink: 0;
}
/* Phone: present the switcher as a bottom sheet — slide-up, grabber,
full-width, safe-area padding, scrim via a spread box-shadow (taps fall
through to the existing closePopovers handler, which dismisses it). */
@media (max-width: 600px) {
.appsw-menu:not(.hidden) {
position: fixed; left: 0; right: 0; bottom: 0; top: auto;
min-width: 0; max-width: none; border-radius: 18px 18px 0 0;
padding: 8px 10px calc(14px + env(safe-area-inset-bottom));
max-height: 82vh; overflow-y: auto;
box-shadow: 0 -10px 44px rgba(34,48,42,.22), 0 0 0 100vmax rgba(34,48,42,.40);
animation: appsw-sheet-up 0.28s cubic-bezier(0.32,0.72,0,1);
}
.appsw-menu:not(.hidden)::before {
content: ''; display: block; width: 40px; height: 5px; border-radius: 99px;
background: var(--line); margin: 2px auto 8px;
}
.appsw-row { padding: 13px 10px; }
}
@keyframes appsw-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.avatar-name { font-weight: 700; font-size: 14.5px; padding: 8px 10px 0; }
.avatar-email { font-size: 12.5px; color: var(--ink-soft); padding: 0 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.avatar-item { display: flex; width: 100%; text-align: left; padding: 10px 10px; border: none; background: none; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink); }
.avatar-item:hover { background: var(--bg); }
/* Reading-settings menu items (text size · contrast · read aloud) */
.set-item {
display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
min-height: 44px; text-align: left; padding: 10px 12px; border: none; background: none;
border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
}
.set-item:hover { background: var(--bg); }
.set-item .set-val {
font-size: 12px; font-weight: 700; white-space: nowrap; border-radius: 999px; padding: 3px 10px;
background: var(--bg); color: var(--ink-soft);
}
.set-item[aria-pressed="true"] .set-val, #m-size .set-val { background: var(--teal-light); color: var(--teal-dark); }
.set-item[aria-pressed="true"] { color: var(--teal-dark); }
.gs-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(34,48,42,.28); display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.gs-overlay.open { display: flex; }
.gs-panel { width: 100%; max-width: 580px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 60px rgba(34,48,42,.28); display: flex; flex-direction: column; max-height: 70vh; overflow: hidden; }
.gs-input-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.gs-input-row svg { color: var(--ink-soft); flex-shrink: 0; }
.gs-input { flex: 1; border: none; outline: none; background: none; font-family: inherit; font-size: 16px; color: var(--ink); }
.gs-input::placeholder { color: var(--ink-soft); }
.gs-results { overflow-y: auto; padding: 6px 0 10px; }
.gs-section-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); padding: 10px 18px 4px; }
.gs-row { display: flex; flex-direction: column; gap: 1px; padding: 8px 18px; cursor: pointer; }
.gs-row.active, .gs-row:hover { background: var(--teal-light); }
.gs-row-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.gs-row-label mark { background: transparent; color: var(--teal-dark); font-weight: 800; }
.gs-row-sub { font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-empty { padding: 22px 18px; font-size: 13.5px; color: var(--ink-soft); text-align: center; }
.gs-hint { display: flex; gap: 14px; padding: 8px 18px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-soft); }
@media (max-width: 940px) {
.tr-search span, .tr-search kbd { display: none; }
.topbar-right { gap: 8px; margin-left: auto; } /* hug the right edge even if the greeting wraps */
#tr-search-btn { order: 2; } /* search is the right-most control */
.set-wrap { order: 1; }
}
/* Handbook chapter footnote (Beltway §6 — bylaw refs / small print) */
.hb-footnote { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12.5px; font-style: italic; color: var(--ink-soft); line-height: 1.55; }
/* Handbook escalation ladder (Beltway §2) */
.hb-escalation { margin-top: 18px; padding: 14px 16px; background: var(--teal-light); border-radius: 12px; }
.hb-escalation .pl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--teal-dark); margin-bottom: 8px; }
.hb-escalation ol { margin: 0; padding-left: 22px; }
.hb-escalation li { font-size: 15px; line-height: 1.5; margin: 5px 0; }
/* ============================================================
Visual-parity T3/T4 — Care · Health · Circle · Handbook skins
============================================================ */
/* ---- avatars (Care) ---- */
.avatar {
width: 34px; height: 34px; border-radius: 50%; background: var(--teal-dark); color: #fff;
font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); flex-shrink: 0;
}
.avatar.soft { background: var(--teal-bright); }
.pair-row .avatar { margin-right: 2px; }
/* ---- Team & settings — member roster (card rows, matches the platform) ---- */
#screen-team .sub { margin-bottom: 2px; }
.team-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.team-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.team-who { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.team-ident { display: flex; flex-direction: column; min-width: 0; }
.team-name { font-size: 15px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.team-you { font-size: 10.5px; font-weight: 700; color: var(--teal-dark); background: var(--teal-light); border-radius: 20px; padding: 1px 8px; }
.team-email { font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-role { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font-family: inherit; font-size: 14px; background: var(--card); color: var(--ink); flex-shrink: 0; cursor: pointer; }
.team-tag { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 20px; background: var(--bg); color: var(--ink-soft); flex-shrink: 0; white-space: nowrap; }
.team-tag.role-elder, .team-tag.role-lead { background: var(--teal-light); color: var(--teal-dark); }
.team-pending { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.team-pending-head { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.team-invite { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.team-invite label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.team-invite-row { display: flex; gap: 8px; }
.team-invite-row input { flex: 1; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font-family: inherit; font-size: 16px; background: var(--card); color: var(--ink); }
.team-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
/* ---- Health dim-cards ---- */
.dim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.dim-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.dim-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dim-head h4 { font-size: 13.5px; font-weight: 700; }
.dim-delta { font-size: 12.5px; font-weight: 700; }
.dim-delta.up { color: var(--teal-dark); } .dim-delta.down { color: var(--red); } .dim-delta.flat { color: var(--ink-soft); }
.dim-foot { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; color: var(--ink-soft); }
.dim-foot .sdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dim-foot .sdot.green { background: var(--teal); } .dim-foot .sdot.amber { background: #b7861f; } .dim-foot .sdot.red { background: #d04545; }
/* ---- Circle advisor cards + timeline ---- */
.adv-card2 { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-top: 12px; }
.adv-card2 .h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adv-card2 h3 { font-size: 15.5px; font-weight: 700; flex: 1; min-width: 120px; }
.adv-card2 .role { font-size: 13px; color: var(--ink-soft); margin: 2px 0 10px; }
.scope-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tl-item { display: flex; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tl-item:last-child { border-bottom: none; }
.tl-date { min-width: 64px; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; padding-top: 2px; }
.tl-item .what b { font-weight: 600; }
.tl-item .what p { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
/* ---- Handbook two-column (desktop) / swap (mobile) ---- */
.hb-grid.hidden { display: none; }
.hb-reader-ph { text-align: center; color: var(--ink-soft); }
@media (min-width: 900px) {
.hb-grid { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
#hb-back { display: none; }
}
@media (max-width: 899px) {
#screen-handbook:not(.reading) #hb-reader-view { display: none; }
#screen-handbook.reading #hb-list-view { display: none; }
}
/* ---- Reconcile — Silent Hurt Inventory (Ring 1) ---- */
.hurt-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 10px; }
.hurt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hurt-head b { font-size: 15px; margin-right: 2px; }
.hurt-due { font-size: 12.5px; color: var(--ink-soft); }
.hurt-what { font-size: 14px; color: var(--ink-soft); margin-top: 6px; line-height: 1.55; }
.hurt-next { font-size: 14px; margin-top: 6px; line-height: 1.5; }
.hurt-next span { font-weight: 700; color: var(--teal-dark); }
.hurt-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* "Are we ok?" ping (Ring 2, R2-1) — quiet inbox + waiting lines */
.ping-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.ping-item:first-child { margin-top: 4px; }
.ping-msg { font-size: 14.5px; line-height: 1.5; }
.ping-waiting { font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; }
/* Conversation prep sheet (Ring 2, R2-2) — mockup style-cards + prep-rows */
.prep-panel { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 14px; }
.prep-panel label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.prep-panel select, .prep-panel textarea { width: 100%; }
.style-pair { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.style-card { flex: 1; min-width: 200px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; }
.style-card b { display: block; font-size: 14px; }
.style-card small { color: var(--ink-soft); line-height: 1.5; }
.prep-row { border-left: 3px solid var(--teal); background: var(--teal-light); border-radius: 0 10px 10px 0; padding: 11px 14px; margin-top: 10px; font-size: 14px; line-height: 1.55; }
.prep-row .pl { font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--teal-dark); display: block; margin-bottom: 3px; }
/* Walk-with-me invite (Ring 2, R2-3) — Today inbox items */
.walk-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.walk-item:first-child { margin-top: 4px; }
.walk-msg { font-size: 14.5px; line-height: 1.5; }
.walk-note { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--teal); }
.walk-item .hurt-actions { margin-top: 12px; }
/* Reconciliation across the room (Ring 2, R2-4) — anonymous board aggregate */
.rbc-tiles { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.rbc-tile { flex: 1; min-width: 150px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.rbc-tile b { font-size: 22px; font-weight: 700; display: block; }
.rbc-tile small { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.rbc-tile.overdue b { color: var(--danger, #c0392b); }
.rbc-liturgy { margin-top: 16px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); font-style: italic; }
/* Third party — Matthew 18 step 2 (Ring 3, R3-1) */
.rr-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.rr-item:first-child { margin-top: 4px; }
.rr-msg { font-size: 14.5px; line-height: 1.5; }
.rr-line { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--teal); }
.rr-step3 { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 12px; }
.trusted-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.trusted-row:last-child { border-bottom: none; }
.trusted-row span { font-size: 14px; }
/* Health — detected comment themes (nightly clustering, UD-6 comments-only) */
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.theme-row:last-child { border-bottom: none; }
.theme-row .tsum { font-size: 14.5px; font-weight: 600; }
/* ── Grow — assessment front door (G1-0/1/2) ── */
.grow-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.grow-tab {
flex: 1; min-height: var(--tap-min); padding: 10px 14px; border-radius: 999px;
border: 1.5px solid var(--line); background: var(--card); color: var(--ink-soft);
font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.grow-tab.active { background: var(--teal-dark); color: #fff; border-color: var(--teal-dark); }
.grow-status { min-height: 0; color: var(--teal-dark); font-size: 14px; font-weight: 600; }
.grow-status:empty { display: none; }
.grow-panel { display: block; }
.grow-panel.hidden { display: none; }
.grow-link {
display: inline-block; margin: 4px 0 14px; color: var(--teal-dark);
font-weight: 600; text-decoration: underline; min-height: var(--tap-min); line-height: var(--tap-min);
}
.grow-code-label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.grow-code {
width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 10px;
padding: 10px 12px; font-family: inherit; font-size: var(--font-base); resize: vertical; margin-bottom: 10px;
}
.grow-style-head { display: flex; align-items: center; gap: 14px; }
.grow-style-icon { font-size: 40px; line-height: 1; }
.grow-style-name { font-size: 20px; font-weight: 700; color: var(--ink); }
.grow-style-sec { font-size: 14px; color: var(--ink-soft); }
.grow-style-tag { margin-top: 8px; }
.grow-share { margin-top: 14px; }
.grow-share-row {
display: flex; align-items: center; gap: 12px; padding: 9px 0;
border-bottom: 1px solid var(--line); min-height: var(--tap-min); cursor: pointer; font-size: 15.5px;
}
.grow-share-row:last-child { border-bottom: none; }
.grow-share-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--teal-dark); flex: none; }
.grow-team-row { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.grow-team-row:last-child { border-bottom: none; }
.grow-team-icon { font-size: 30px; line-height: 1.1; flex: none; }
.grow-team-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.grow-team-style { font-size: 14px; color: var(--ink-soft); margin-top: 1px; }
.grow-team-note { font-size: 14px; color: var(--ink); margin-top: 5px; }
.grow-match {
display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
background: var(--teal-light); color: var(--teal-dark); font-size: 12px; font-weight: 700; vertical-align: middle;
}
/* Grow — callings (G1-3a) + span (G1-3b) */
.grow-select {
width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 10px;
padding: 10px 12px; font-family: inherit; font-size: var(--font-base); background: var(--card);
color: var(--ink); margin-bottom: 10px; min-height: var(--tap-min);
}
.grow-kind { display: flex; gap: 10px; margin: 4px 0 6px; }
.grow-kind-opt {
display: flex; align-items: center; gap: 7px; flex: 1; padding: 9px 12px; border: 1.5px solid var(--line);
border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 600; min-height: var(--tap-min); box-sizing: border-box;
}
.grow-kind-opt input { accent-color: var(--teal-dark); width: 18px; height: 18px; }
.grow-kind-hint { margin: 0 0 8px; }
.grow-empower-fields.hidden { display: none; }
.grow-compose { margin-bottom: 14px; }
.grow-call-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.grow-call-row:last-child { border-bottom: none; }
.grow-call-from { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.grow-call-kind { font-size: 13px; font-weight: 700; color: var(--teal-dark); margin-top: 3px; }
.grow-call-scope { color: var(--ink-soft); font-weight: 600; }
.grow-call-text { font-size: 15.5px; color: var(--ink); margin: 3px 0 8px; }
.grow-call-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.grow-call-statuschip {
display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
background: var(--line); color: var(--ink-soft); vertical-align: middle;
}
.grow-call-statuschip.s-yes { background: var(--teal-light); color: var(--teal-dark); }
.grow-call-statuschip.s-expired, .grow-call-statuschip.s-no { background: var(--amber-light); color: var(--amber); }
.grow-journal { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.grow-journal-entry { font-size: 14.5px; color: var(--ink); padding: 4px 0; }
.grow-journal-prompt { font-weight: 700; color: var(--teal-dark); }
.grow-span-count { font-size: 15px; color: var(--ink-soft); margin: 6px 0; }
.grow-span-count.over .grow-span-n { color: var(--amber); }
.grow-span-n { font-size: 32px; font-weight: 800; color: var(--teal-dark); }
.grow-span-over { color: var(--amber); }
/* Grow — Rhythm reflection (G1-3 F5) */
.grow-rhythm-q { font-size: 18px; font-weight: 800; color: var(--ink); }
.grow-rhythm-move { margin-top: 12px; }
.grow-rhythm-label { display: block; font-size: 15px; font-weight: 700; color: var(--teal-dark); }
.grow-rhythm-prompt { font-size: 14px; color: var(--ink-soft); margin: 2px 0 6px; }
.grow-rhythm-past { margin-top: 14px; }
.grow-rhythm-pastrow {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 0; border-bottom: 1px solid var(--line);
}
.grow-rhythm-pastrow:last-child { border-bottom: none; }
.grow-rhythm-pastq { font-size: 15px; font-weight: 600; color: var(--ink); }
/* Affirmation (G2) — reuses grow-rhythm-* for prompts; adds the vitality
level row + the person-owned privacy line. */
.grow-aff-title { font-size: 19px; font-weight: 700; margin: 0 0 2px; color: var(--ink); }
.grow-aff-lock {
display: inline-flex; align-items: center; gap: 7px;
background: var(--teal-light); color: var(--teal-dark);
border-radius: 10px; padding: 8px 11px; font-size: 13px; font-weight: 600;
margin: 6px 0 4px;
}
.grow-aff-prompt { margin-top: 14px; }
.aff-levels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.aff-dot {
min-height: var(--tap-min); padding: 8px 14px;
border: 1px solid var(--teal); border-radius: 999px;
background: var(--card); color: var(--teal-dark);
font-size: 14px; font-weight: 600; cursor: pointer;
}
.aff-dot.sel { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
/* ── Decisions: quorum policy (U4.1, admin-only) ─────────────────── */
.qp-card { margin-top: 22px; }
.qp-title { font-size: 17px; margin: 0; }
.qp-modes { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.qp-mode {
display: flex; align-items: flex-start; gap: 12px;
width: 100%; min-height: var(--tap-min); padding: 12px 14px;
background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
text-align: left; cursor: pointer; font-family: inherit; color: var(--ink);
transition: border-color .12s, background .12s;
}
.qp-mode:hover { border-color: var(--teal); }
.qp-mode.sel { border-color: var(--teal); background: var(--teal-light); }
.qp-dot {
flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
border: 2px solid var(--line); background: var(--card); position: relative;
}
.qp-mode.sel .qp-dot { border-color: var(--teal-dark); }
.qp-mode.sel .qp-dot::after {
content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--teal-dark);
}
.qp-opt { display: flex; flex-direction: column; gap: 2px; }
.qp-label { font-weight: 600; font-size: 15.5px; }
.qp-note { margin: 0; }
.qp-custom { margin-top: 14px; }
.qp-custom input { max-width: 110px; }
#quorum-policy .btn { margin-top: 16px; }
#qp-saved { margin-left: 10px; }
/* ── Grow: My Style visibility toggle (living team-visible) ───────── */
.grow-vis { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
.grow-vis-opt {
display: flex; align-items: flex-start; gap: 12px;
width: 100%; min-height: var(--tap-min); padding: 12px 14px;
background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
text-align: left; cursor: pointer; font-family: inherit; color: var(--ink);
transition: border-color .12s, background .12s;
}
.grow-vis-opt:hover { border-color: var(--teal); }
.grow-vis-opt.sel { border-color: var(--teal); background: var(--teal-light); }
.grow-vis-opt.sel .qp-dot { border-color: var(--teal-dark); }
.grow-vis-opt.sel .qp-dot::after {
content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--teal-dark);
}
.grow-share-pick { display: flex; flex-direction: column; gap: 6px; }
/* ── Care: staff "you're looked after" message ───────────────────── */
.care-staff-msg {
margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--ink);
background: var(--teal-light); border-radius: var(--radius); padding: 14px 16px;
}
/* ── Documents: new / import row ──────────────────────────────────── */
.hb-newrow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hb-import-note { margin: 0 0 14px; }
/* ── Meeting notes (rich-text on the docket) ─────────────────────── */
.mn-notes { border-top: 1px solid var(--line); padding-top: 16px; }
.mn-h { font-size: 15px; margin: 0 0 8px; }
.mn-toolbar { display: flex; gap: 6px; margin-bottom: 8px; }
.mn-tool {
min-width: 36px; height: 36px; border: 1px solid var(--line); background: var(--card);
border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--ink); font-family: inherit;
}
.mn-tool:hover { border-color: var(--teal); }
.mn-editor {
min-height: 120px; border: 1.5px solid var(--line); border-radius: var(--radius);
padding: 12px 14px; background: var(--card); font-size: 15.5px; line-height: 1.6;
color: var(--ink); outline: none;
}
.mn-editor:focus { border-color: var(--teal); }
.mn-editor h1, .mn-editor h2, .mn-editor h3 { margin: 8px 0 4px; font-size: 16px; }
.mn-editor ul { margin: 4px 0; padding-left: 20px; }
.mn-editor p { margin: 4px 0; }
.mn-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.mn-status { font-size: 13.5px; color: var(--ink-soft); }
.mn-status.err { color: var(--red); }
.mn-proposed { margin-top: 16px; }
.mn-prop {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-top: 8px;
}
.mn-prop-body { flex: 1; min-width: 160px; }
.mn-prop-title { font-weight: 600; }
.mn-prop-mins { font-size: 12.5px; }
/* per-submit AI consent modal */
.mn-consent-scrim {
position: fixed; inset: 0; background: rgba(34, 48, 42, .45); z-index: 60;
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.mn-consent-scrim.hidden { display: none; }
.mn-consent-box {
background: var(--card); border-radius: var(--radius); padding: 22px;
max-width: 420px; box-shadow: var(--shadow);
}
.mn-consent-box h3 { margin: 0 0 8px; }
.mn-consent-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
/* ── Decisions lifecycle: date-aware zones (2026-07-10) ─────────────────── */
/* Meeting anchor — the one loud element on a calm page; the date the zones orbit */
.dec-anchor {
display: flex; align-items: center; gap: 13px; margin-top: 18px;
background: linear-gradient(135deg, var(--teal-bright), var(--teal-dark));
color: #fff; border-radius: var(--radius); padding: 15px 16px;
}
.dec-anchor.hidden { display: none; }
.dec-anchor .da-fork { flex-shrink: 0; }
.dec-anchor .da-text { min-width: 0; }
.dec-anchor .da-kicker { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.dec-anchor .da-date { font-size: 18px; font-weight: 700; margin-top: 1px; }
.dec-anchor .da-sub { font-size: 13px; opacity: .92; margin-top: 3px; }
.dec-anchor .da-cd {
margin-left: auto; flex-shrink: 0; text-align: center;
background: rgba(255, 255, 255, .16); border-radius: 11px; padding: 8px 12px;
}
.dec-anchor .da-cd b { display: block; font-size: 19px; font-weight: 800; line-height: 1; }
.dec-anchor .da-cd span { font-size: 11px; opacity: .9; }
/* Zones stack in a flex column; phase-* on the wrap sets paint order + emphasis */
.udz-wrap { display: flex; flex-direction: column; }
.udz { margin-top: 16px; }
.udz.hidden { display: none; }
.udz-head { display: flex; align-items: center; gap: 10px; padding: 4px 2px 8px; }
.udz-ph {
font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--teal-dark); background: var(--teal-light); padding: 4px 9px; border-radius: 6px;
}
.udz-t { font-size: 16px; font-weight: 700; }
.udz-s { font-size: 13px; color: var(--ink-soft); margin-left: auto; text-align: right; }
/* Paint order: the leading zone first, the others follow (flex order) */
.phase-planning #udz-before { order: 0; } .phase-planning #udz-during { order: 1; } .phase-planning #udz-after { order: 2; }
.phase-today #udz-during { order: 0; } .phase-today #udz-before { order: 1; } .phase-today #udz-after { order: 2; }
.phase-after #udz-after { order: 0; } .phase-after #udz-before { order: 1; } .phase-after #udz-during { order: 2; }
/* Inactive-for-this-phase zones collapse to a dimmed header, one tap away.
The docket agenda lives in Before, so Before stays OPEN during & after too
(you walk it in the room, and stock the next one after) — only the genuinely
not-yet/not-now zones collapse: During before there's a meeting, After until
there's a record. */
.phase-planning #udz-during, .phase-planning #udz-after,
.phase-today #udz-after,
.phase-after #udz-during { opacity: .6; }
.phase-planning #udz-during .udz-body, .phase-planning #udz-after .udz-body,
.phase-today #udz-after .udz-body,
.phase-after #udz-during .udz-body { display: none; }
.phase-planning #udz-during .udz-ph, .phase-planning #udz-after .udz-ph,
.phase-today #udz-after .udz-ph,
.phase-after #udz-during .udz-ph { background: var(--bg); color: var(--ink-soft); }
/* A collapsed zone's header is the tap target to glance at it */
.udz-head { cursor: default; }
/* Split → attach (slice 4): a note routed to a decision already on the docket */
.mn-attached.hidden { display: none; }
.mn-att-to {
font-size: 12.5px; font-weight: 700; color: var(--teal-dark);
background: var(--teal-light); border-radius: 999px; padding: 3px 10px;
display: inline-block; margin-bottom: 5px;
}
/* The one-tap nudge card (slice 3) — in-app twin of the Monday email */
.dec-nudge {
display: flex; align-items: center; gap: 11px; margin-top: 16px;
background: var(--teal-light); border-radius: 12px; padding: 13px 15px;
}
.dec-nudge.hidden { display: none; }
.dec-nudge svg { flex-shrink: 0; }
.dec-nudge .dn-text { min-width: 0; }
.dec-nudge .dn-t { font-size: 14px; font-weight: 700; color: var(--teal-darker); }
.dec-nudge .dn-s { font-size: 12.5px; color: var(--teal-dark); margin-top: 1px; }
.dec-nudge .mini-btn {
margin-left: auto; flex-shrink: 0; background: var(--teal-dark);
border-color: var(--teal-dark); color: #fff;
}
/* Weekly-nudge preference card (Team & settings) */
.np-card.hidden { display: none; }
.np-row {
display: flex; align-items: center; gap: 11px; margin-top: 14px;
min-height: 44px; font-size: 16px; cursor: pointer;
}
.np-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--teal-dark); flex-shrink: 0; }
/* After zone — meeting summary record */
.dec-sum { background: var(--bg); border-radius: 12px; padding: 14px 15px; }
.dec-sum .ds-t { font-size: 14.5px; font-weight: 700; }
.dec-sum .ds-row { display: flex; gap: 18px; margin-top: 9px; }
.dec-sum .ds-row b { display: block; font-size: 19px; font-weight: 800; color: var(--teal-dark); }
.dec-sum .ds-row span { font-size: 11.5px; color: var(--ink-soft); }
.ds-continue { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin: 14px 0 2px; }