/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
DEVELOP — chrome lifted from Selfless verbatim, plus
Develop-specific dashboard / current / library styles.
The tokens, .cosmos, .stage, .panel, .panel-card,
.section-head, and .pnav rules are intentionally
identical to selfless.css so the two pages share an
indistinguishable visual identity.
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
/* ── Reset + tokens (copied from selfless.css) ─────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
/* Surfaces */
--cosmic: #0d0a14;
--cosmic-2: #100c18;
/* Brand */
--gold: #f5d87a;
--gold-soft: #d4a843;
--purple: #8b5cf6;
--purple-deep: #6d28d9;
--amber: #f5b840;
--rose: #db2777;
--green: #4ade80;
/* Text */
--t1: rgba(255,255,255,0.95);
--t2: rgba(255,255,255,0.72);
--t3: rgba(255,255,255,0.50);--lc-text-t3: rgba(255,255,255,0.56);
--t4: rgba(255,255,255,0.32);--lc-text-t4: rgba(255,255,255,0.56);
/* Borders */
--b1: rgba(255,255,255,0.06);
--b2: rgba(255,255,255,0.10);
--b-gold: rgba(245,216,122,0.20);
/* Card */
--card-bg: rgba(255,255,255,0.035);
--card-border: rgba(255,255,255,0.08);
--card-radius: 18px;
/* Layout */
--topbar-h: 72px;
--pnav-h: 56px;
/* Fonts */
--f-display: 'Bebas Neue', sans-serif;
--f-serif: 'Cormorant Garamond', Georgia, serif;
--f-mono: 'IBM Plex Mono', ui-monospace, monospace;
--f-ui: 'Inter', system-ui, sans-serif;
}
html, body {
height: 100%;
overflow: hidden;
background: #1a0f1f;
color: var(--t1);
font-family: var(--f-ui);
font-size: var(--lc-3, 16px);
-webkit-font-smoothing: antialiased;
}
/* ── Ambient cosmos bg (copied from selfless.css) ──────────── */
.cosmos {
position: fixed; inset: 0;
background:
linear-gradient(225deg,
#1a0f1f 0%,
#2a1635 22%,
transparent 45%,
transparent 55%,
#2a1635 78%,
#1a0f1f 100%),
linear-gradient(225deg,
#1a0f1f 0%,
#2a1635 30%,
#3d2050 50%,
#2a1635 70%,
#1a0f1f 100%);
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.cosmos canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.55;
mix-blend-mode: screen;
}
/* ── Stage + panel + panel-card (copied from selfless.css) ── */
.stage {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
overflow-y: scroll;
scroll-snap-type: y mandatory;
z-index: 5;
}
.stage::-webkit-scrollbar { width: 0; }
.panel {
width: 100%;
height: 100vh;
scroll-snap-align: start;
position: relative;
/* Same 236px left padding as Selfless so the panel-card sits a clean
32px from the pnav rail. Top padding matches Selfless's
var(--topbar-h) so the panel-card top edge intersects with the
small underline below the active top-nav icon. */
padding: var(--topbar-h) 32px 24px 236px;
display: flex; flex-direction: column;
}
.panel-card {
flex: 1;
width: 100%;
margin: 0 auto;
background:
radial-gradient(ellipse 60% 60% at 100% 0%,
rgba(255, 255, 255, 0.07) 0%,
transparent 65%),
radial-gradient(ellipse 60% 60% at 0% 100%,
rgba(255, 255, 255, 0.07) 0%,
transparent 65%),
radial-gradient(ellipse 110% 80% at 50% 0%,
rgba(139, 92, 246, 0.16) 0%,
rgba(109, 40, 217, 0.08) 45%,
rgba(109, 40, 217, 0.03) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
padding: 36px 44px;
display: flex; flex-direction: column;
overflow: hidden;
}
/* ── Paused panel (Current) — removed from the scroll flow entirely ── */
.panel.is-hidden { display: none; }
/* ── "Coming soon" placeholder (Dashboard, Library) ─────────────────
The real content stays mounted underneath, faded + non-interactive,
with a centered badge. Reversible: drop .coming-soon + the overlay. */
.panel-card.coming-soon { position: relative; }
.panel-card.coming-soon > *:not(.panel-soon) {
opacity: 0.16;
filter: blur(1.5px);
pointer-events: none;
user-select: none;
}
.panel-soon {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.panel-soon-badge {
font-family: var(--f-serif);
font-size: var(--lc-4, 20px);
font-weight: 400;
letter-spacing: 1px;
color: var(--gold);
padding: 14px 28px;
border: 1px solid var(--b-gold);
border-radius: 999px;
background: rgba(26, 15, 31, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
/* ── Section header (copied from selfless.css) ─────────────── */
.section-head {
text-align: left;
margin-bottom: 24px;
width: 100%;
}
.section-title {
font-family: var(--f-serif);
font-size: var(--lc-7, 48px);
font-weight: 300;
letter-spacing: -1px;
color: var(--t1);
line-height: 1;
margin-bottom: 10px;
}
.section-sub {
font-family: var(--f-serif);
font-size: var(--lc-3, 16px);
font-style: italic;
color: var(--lc-text-t3, var(--t3));
font-weight: 300;
}
/* ── Practice CTA (entry point to /practice — KAF Phase B) ──── */
.dev-practice-cta {
display: flex;
align-items: center;
gap: 16px;
text-decoration: none;
border: 1px solid var(--b-gold);
background: linear-gradient(
90deg,
rgba(245, 216, 122, 0.07) 0%,
rgba(255, 255, 255, 0.025) 60%
);
border-radius: 14px;
padding: 16px 18px;
margin-bottom: 24px;
transition: border-color 0.15s, transform 0.06s;
}
.dev-practice-cta:hover {
border-color: var(--gold-soft);
}
.dev-practice-cta:active {
transform: translateY(1px);
}
.dev-practice-cta-icon {
flex: none;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 11px;
background: rgba(245, 216, 122, 0.12);
color: var(--gold);
}
.dev-practice-cta-icon svg {
width: 22px;
height: 22px;
}
.dev-practice-cta-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.dev-practice-cta-title {
font-family: var(--f-serif);
font-size: var(--lc-4, 20px);
font-weight: 500;
color: var(--t1);
}
.dev-practice-cta-sub {
font-size: var(--lc-2, 14px);
color: var(--lc-text-t3, var(--t3));
line-height: 1.45;
}
.dev-practice-cta-arrow {
flex: none;
margin-left: auto;
color: var(--gold);
font-size: 20px;
}
@media (max-width: 560px) {
.dev-practice-cta-arrow {
display: none;
}
}
/* ── Pnav rail (copied from selfless.css) ──────────────────── */
.pnav {
position: fixed;
left: 18px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 6px;
padding: 6px;
z-index: 40;
}
.pnav-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 16px;
border-radius: 5px;
cursor: pointer;
color: var(--t2);
transition: color 0.2s, background 0.2s, box-shadow 0.2s;
border: 1px solid rgba(255,255,255,0.08);
font-family: inherit;
position: relative;
justify-content: flex-start;
min-width: 180px;
background: linear-gradient(180deg,
rgba(255,255,255,0.05) 0%,
rgba(255,255,255,0.02) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 2px 6px rgba(0,0,0,0.18);
}
.pnav-item:hover {
color: var(--t1);
background: linear-gradient(180deg,
rgba(255,255,255,0.08) 0%,
rgba(255,255,255,0.03) 100%);
border-color: rgba(255,255,255,0.14);
}
.pnav-item.active {
color: #86EFAC;
background: linear-gradient(180deg,
rgba(134,239,172,0.18) 0%,
rgba(134,239,172,0.05) 100%);
border-color: rgba(134,239,172,0.28);
box-shadow:
inset 0 1px 0 rgba(134,239,172,0.20),
0 4px 14px rgba(0,0,0,0.25);
}
.pnav-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
opacity: 0.85;
}
.pnav-item.active .pnav-icon {
opacity: 1;
filter: drop-shadow(0 0 8px rgba(134,239,172,0.45));
}
.pnav-label {
font-family: var(--f-mono);
font-size: var(--lc-1, 12px);
letter-spacing: 2.2px;
text-transform: uppercase;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
DASHBOARD — integrity ring (left) + metric groups (right)
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.dev-dashboard-body {
flex: 1;
display: grid;
grid-template-columns: minmax(260px, 0.8fr) 1.2fr;
gap: 36px;
align-items: center;
min-height: 0;
overflow: hidden;
}
/* Hero ring */
.dev-hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.dev-ring {
width: 100%;
max-width: 280px;
height: auto;
transform: rotate(-90deg); /* Start the fill at 12 o'clock */
filter: drop-shadow(0 0 24px rgba(245, 216, 122, 0.18));
}
.dev-ring-track {
fill: none;
stroke: rgba(255, 255, 255, 0.08);
stroke-width: 4;
}
.dev-ring-fill {
fill: none;
stroke: url(#ringGradient);
stroke-width: 6;
stroke-linecap: round;
/* Circumference of r=86 ≈ 540.35. JS sets stroke-dashoffset to
540 * (1 - pct/100). The transition is what makes the ring
"sweep" up to its value on data load. */
stroke-dasharray: 540;
stroke-dashoffset: 540;
transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dev-hero-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
pointer-events: none;
}
.dev-hero-num {
font-family: var(--f-serif);
font-size: var(--lc-7, 48px);
font-weight: 300;
color: var(--gold);
line-height: 0.95;
letter-spacing: -2px;
text-shadow: 0 6px 30px rgba(245, 216, 122, 0.3);
}
.dev-hero-pct {
font-family: var(--f-serif);
font-size: var(--lc-5, 26px);
font-weight: 300;
color: var(--gold-soft);
margin-top: -4px;
letter-spacing: 0.5px;
}
.dev-hero-label {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
font-weight: 400;
color: var(--lc-text-t3, var(--t3));
letter-spacing: 2.4px;
text-transform: uppercase;
margin-top: 10px;
}
/* Right column — metric groups + activity strip */
.dev-dashboard-right {
display: flex;
flex-direction: column;
gap: 14px;
min-height: 0;
overflow: hidden;
}
.dev-metric-group {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Eyebrow — same shape as selfless's .panel-eyebrow but scoped here so
developmental.css doesn't depend on selfless.css being loaded. */
.dev-metric-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 3px;
color: rgba(245, 216, 122, 0.72);
text-transform: uppercase;
}
.dev-metric-eyebrow .dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 10px rgba(245, 216, 122, 0.8);
}
.dev-metric-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.dev-metric-row-3 { grid-template-columns: repeat(3, 1fr); }
.dev-metric {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 10px 12px;
text-align: left;
transition: border-color 0.2s, background 0.2s;
}
.dev-metric:hover {
border-color: rgba(245, 216, 122, 0.18);
background: rgba(255, 255, 255, 0.05);
}
.dev-metric-num {
font-family: var(--f-serif);
font-size: var(--lc-5, 26px);
font-weight: 300;
color: var(--t1);
line-height: 1;
letter-spacing: -0.5px;
}
.dev-metric-label {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
color: var(--lc-text-t3, var(--t3));
letter-spacing: 1.6px;
text-transform: uppercase;
margin-top: 4px;
}
/* Activity strip */
.dev-activity {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: auto;
padding-top: 8px;
}
.dev-activity-strip {
display: grid;
grid-template-columns: repeat(30, 1fr);
gap: 3px;
min-height: 18px;
}
.dev-activity-cell {
aspect-ratio: 1 / 1;
border-radius: 4px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.06);
transition: transform 0.18s, box-shadow 0.18s;
}
.dev-activity-cell.completed {
background: rgba(74, 222, 128, 0.42);
border-color: rgba(74, 222, 128, 0.55);
}
.dev-activity-cell.recognized {
background: var(--gold);
border-color: rgba(245, 216, 122, 0.85);
box-shadow: 0 0 8px rgba(245, 216, 122, 0.5);
}
.dev-activity-cell.gap {
background: rgba(239, 68, 68, 0.18);
border-color: rgba(239, 68, 68, 0.32);
}
.dev-activity-cell:hover {
transform: scale(1.18);
}
.dev-activity-legend {
display: flex;
gap: 16px;
flex-wrap: wrap;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
color: var(--lc-text-t3, var(--t3));
letter-spacing: 1px;
}
.dev-activity-legend span {
display: inline-flex;
align-items: center;
gap: 8px;
}
.dev-mark {
display: inline-block;
width: 10px; height: 10px;
border-radius: 3px;
}
.dev-mark-completed { background: rgba(74, 222, 128, 0.42); }
.dev-mark-recognized { background: var(--gold); box-shadow: 0 0 6px rgba(245, 216, 122, 0.5); }
.dev-mark-gap { background: rgba(239, 68, 68, 0.32); }
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
LIBRARY CARDS (completed + catalog)
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.dev-lib-card {
display: block;
position: relative;
aspect-ratio: 4 / 5;
border-radius: 14px;
overflow: hidden;
background-color: #1a0f1f;
background-image: linear-gradient(160deg, #2a1635 0%, #1a0f1f 100%);
background-size: cover;
background-position: center;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
color: inherit;
text-decoration: none;
transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.dev-lib-card:hover {
transform: translateY(-4px);
border-color: rgba(245, 216, 122, 0.32);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}
.dev-lib-locked {
opacity: 0.55;
filter: grayscale(0.4);
}
.dev-lib-locked:hover {
transform: none;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
}
.dev-lib-overlay {
position: absolute;
inset: 0;
padding: 16px 18px 14px;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.92) 0%,
rgba(0, 0, 0, 0.55) 45%,
rgba(0, 0, 0, 0.15) 75%,
rgba(0, 0, 0, 0) 100%
);
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 6px;
}
.dev-lib-title {
font-family: var(--f-serif);
font-size: var(--lc-4, 20px);
font-weight: 400;
margin: 0;
color: #fff;
line-height: 1.2;
}
.dev-lib-theme {
font-family: var(--f-serif);
font-size: var(--lc-2, 14px);
font-style: italic;
color: rgba(255, 255, 255, 0.7);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dev-lib-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6px;
}
.dev-lib-meta {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.5px;
color: rgba(255, 255, 255, 0.56);
text-transform: uppercase;
}
.dev-lib-badge {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.5px;
color: var(--gold);
background: rgba(245, 216, 122, 0.14);
border: 1px solid rgba(245, 216, 122, 0.32);
padding: 3px 8px;
border-radius: 999px;
text-transform: uppercase;
}
.dev-lib-begin {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
font-weight: 500;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--gold);
background: rgba(245, 216, 122, 0.12);
border: 1px solid rgba(245, 216, 122, 0.4);
border-radius: 999px;
padding: 6px 14px;
cursor: pointer;
text-decoration: none;
transition: background 0.18s, color 0.18s;
}
.dev-lib-begin:hover {
background: rgba(245, 216, 122, 0.22);
color: #fff;
}
.dev-lib-begin:disabled { opacity: 0.6; cursor: wait; }
/* Media-card actions stay over a dark photo scrim in either theme. */
html[data-theme="light"] .dev-lib-card { --gold: #f5d87a; }
/* Lock icon centered in the card */
.dev-lib-lock {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 44px; height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.85);
z-index: 2;
}
.dev-lib-lock svg { width: 22px; height: 22px; }
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
LIBRARY
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.dev-library-section + .dev-library-section { margin-top: 22px; }
.dev-library-section .dev-metric-eyebrow { margin-bottom: 14px; }
.dev-library-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 22px;
}
.dev-empty {
font-family: var(--f-serif);
font-style: italic;
font-weight: 300;
font-size: var(--lc-3, 16px);
color: var(--lc-text-t3, var(--t3));
grid-column: 1 / -1;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
TABLET (≤1100px)
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
@media (max-width: 1100px) {
.panel { padding: calc(var(--topbar-h) + 18px) 24px 24px 224px; }
.panel-card { padding: 30px 32px; }
.section-title { font-size: var(--lc-6, 34px); }
.dev-dashboard-body { gap: 36px; }
.dev-hero-num { font-size: var(--lc-7, 48px); }
.dev-hero-pct { font-size: var(--lc-5, 26px); }
.dev-metric-num { font-size: var(--lc-5, 26px); }
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
MOBILE (≤900px) — pnav becomes bottom pill row,
stage scrolls naturally on body, panel layout stacks.
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
@media (max-width: 900px) {
html, body {
font-size: var(--lc-3, 16px);
height: auto;
overflow-x: hidden;
overflow-y: auto;
scroll-snap-type: y proximity;
scroll-behavior: smooth;
}
.stage {
position: static;
overflow-y: visible;
scroll-snap-type: none;
height: auto;
}
.panel {
position: relative;
height: auto;
min-height: 100vh;
min-height: 100svh;
scroll-snap-align: start;
scroll-snap-stop: always;
padding: 52px 18px 88px;
}
.panel-card {
padding: 24px 18px;
border-radius: 16px;
}
.section-title { font-size: var(--lc-5, 26px); }
.section-sub { font-size: var(--lc-2, 14px); }
.dev-dashboard-body {
grid-template-columns: 1fr;
gap: 28px;
}
.dev-hero { max-height: 60vw; }
.dev-ring { max-width: 70vw; }
.dev-hero-num { font-size: var(--lc-7, 48px); }
.dev-hero-pct { font-size: var(--lc-5, 26px); }
.dev-metric-num { font-size: var(--lc-5, 26px); }
.dev-metric-row, .dev-metric-row-3 { grid-template-columns: repeat(2, 1fr); }
.dev-library-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 14px;
}
/* The bottom section bar + viewport fade are owned by panel-shell.css
(body[data-shell="panel"] .pnav). The old per-page floating pill row
was removed here so it can't fight the shared bar. */
/* Re-show each panel's two-line header on mobile. panel-shell hides
.section-title/.section-sub globally (desktop names panels via the
spine, which is hidden on mobile) — so without this the panels would
have no visible title. Out-specifies panel-shell's display:none. */
body[data-shell="panel"] .section-head .section-title,
body[data-shell="panel"] .section-head .section-sub { display: block; }
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
PHONE (≤480px) — collapse the activity strip to 2 rows
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
@media (max-width: 480px) {
.dev-activity-strip {
grid-template-columns: repeat(15, 1fr);
}
.dev-activity-legend { font-size: var(--lc-2, 14px); gap: 12px; }
.dev-hero-num { font-size: var(--lc-7, 48px); }
.dev-hero-pct { font-size: var(--lc-4, 20px); }
}
/* ════════════════════════════════════════════════
MOBILE FILL — live panels' scroll region fills the full-height card;
the coming-soon blurred backdrop spans the height so the centered badge
doesn't float over an empty lower half.
═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
#protocols .panel-card { display: flex; flex-direction: column; }
#protocols .proto-head { flex: none; margin-bottom: 12px; }
/* overflow-x hidden is load-bearing: overflow-y:auto alone coerces the
computed overflow-x from visible to auto, so any accidental child
overflow turns this into a horizontal scroller — which both looks
broken and makes initSwipeNav (nav.js) yield the domain swipe to it. */
#protocols .proto-scroll { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#dashboard .panel-card { display: flex; flex-direction: column; }
#dashboard .section-head { flex: none; }
#dashboard .dev-dashboard-body { flex: 1 1 auto; min-height: 0; align-content: center; }
#library .panel-card { display: flex; flex-direction: column; }
#library .section-head { flex: none; }
#library .dev-library-section:last-of-type { flex: 1 1 auto; min-height: 0; }
}
/* ══ LIGHT MODE ═══════════════════════════════════════════════════════
The page is built from white washes at 2–6% inside 6–8% white borders.
All of it lifts off a near-black page and none of it survives the flip,
so the stat tiles, day cards, past-day rows and the recording stage all
lose their surfaces at once.
Surfaces use the same ladder as the state and partnership domains:
0.58 for tiles and cards, 0.35 for secondary rows, gold on hover.
Deliberately NOT converted: .dev-lib-card and the .dev-lib-title /
.dev-lib-theme text inside it. That is a media tile — a cover image, or a
purple-to-black gradient without one — and its white text is correct on
either. Same call as the bloc cards. */
/* Panels, rail and cards */
html[data-theme="light"] .panel-card,
html[data-theme="light"] .pnav-item {
border-color: var(--card-border);
}
html[data-theme="light"] .pnav-item:hover { border-color: var(--surface-border); }
html[data-theme="light"] .dev-metric {
background: rgba(255, 255, 255, 0.58);
border-color: var(--card-border);
}
html[data-theme="light"] .dev-metric:hover {
background: rgba(255, 255, 255, 0.72);
border-color: rgba(161, 98, 7, 0.35);
}
/* Section label — a 70%-alpha pale gold, and a dot whose glow is a
dark-page effect. */
html[data-theme="light"] .dev-metric-eyebrow { color: var(--gold); }
html[data-theme="light"] .dev-metric-eyebrow .dot { box-shadow: none; }
/* Activity grid. The completed cell is a 42% bright green built to glow on
black; the recognised cell adds a gold halo that only fuzzes its edge
here. Both take their light counterparts. */
html[data-theme="light"] .dev-activity-cell {
background: rgba(255, 255, 255, 0.55);
border-color: var(--card-border);
}
html[data-theme="light"] .dev-activity-cell.completed,
html[data-theme="light"] .dev-mark-completed {
background: rgba(21, 128, 61, 0.55);
border-color: rgba(21, 128, 61, 0.70);
}
html[data-theme="light"] .dev-activity-cell.recognized {
border-color: rgba(161, 98, 7, 0.80);
box-shadow: none;
}
html[data-theme="light"] .dev-mark-recognized { box-shadow: none; }
/* Buttons */
html[data-theme="light"] .dev-practice-cta-icon {
background: rgba(161, 98, 7, 0.12);
}
html[data-theme="light"] .panel-soon-badge {
box-shadow: 0 8px 28px rgba(17, 17, 27, 0.12);
}
/* ══════════════════════════════════════════════════════════════
HOME PANEL — the domain home (docs/DOMAIN_HOME_PANELS.md §10, D19).
Shell order: stats readout · hairline · "Do this next".
The trajectory VISUAL is intentionally absent while it's being
re-imagined; #devHomeViz is a reserved empty slot, so nothing here
assumes its height. Per D21 no extra backdrop-blur is added — the
inherited .panel-card blur is the whole budget, because a large
frosted pane over the live cosmos tanks the GPU.
Per D2 the stats are a READOUT, not a menu: no hover, no cursor,
nothing clickable.
══════════════════════════════════════════════════════════════ */
.dev-home {
display: flex;
flex-direction: column;
gap: 26px;
}
.dev-home-viz:not([hidden]) { display: block; min-height: 220px; }
.dev-home-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: end;
}
.dev-hs { padding: 0 18px; text-align: center; }
.dev-hs + .dev-hs { border-left: 1px solid var(--b1); }
.dev-hs-n {
font-family: var(--f-serif);
font-size: var(--lc-6, 34px);
font-weight: 300;
line-height: 1;
letter-spacing: -0.5px;
color: var(--green);
font-variant-numeric: tabular-nums;
}
.dev-hs-u { font-size: var(--lc-2, 14px); color: var(--lc-text-t3, var(--t3)); margin-left: 1px; }
.dev-hs-l {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--lc-text-t3, var(--t3));
margin-top: 9px;
}
/* The quiet seam: mirror above (what you've done), coach below (the act). */
.dev-home-rule {
height: 1px;
background: linear-gradient(
to right, transparent, var(--b2) 18%, var(--b2) 82%, transparent
);
}
/* "Do this next" — a hair more present than the shell so it lifts forward
as the thing you actually act on (D19's mirror/coach hierarchy). */
.dev-next-card {
border: 1px solid rgba(74, 222, 128, 0.22);
background: linear-gradient(
180deg, rgba(74, 222, 128, 0.07), rgba(74, 222, 128, 0.02)
);
border-radius: 14px;
padding: 18px 20px;
}
.dev-next-eyebrow {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 2.4px;
text-transform: uppercase;
color: rgba(134, 239, 172, 0.85);
}
.dev-next-title {
font-family: var(--f-serif);
font-size: var(--lc-4, 20px);
font-weight: 400;
line-height: 1.25;
color: var(--t1);
margin-top: 8px;
}
.dev-next-body {
margin-top: 7px;
font-size: var(--lc-3, 16px);
line-height: 1.55;
color: var(--t2);
max-width: 56ch;
}
.dev-next-row {
display: flex;
align-items: center;
gap: 16px;
margin-top: 15px;
flex-wrap: wrap;
}
.dev-next-btn {
font-family: var(--f-ui, 'Inter', system-ui, sans-serif);
font-size: var(--lc-2, 14px);
font-weight: 500;
color: #0d1f14;
background: linear-gradient(135deg, #86efac, #4ade80);
border: none;
border-radius: 10px;
padding: 10px 18px;
cursor: pointer;
transition: transform 0.18s, box-shadow 0.18s;
}
.dev-next-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 26px -10px rgba(74, 222, 128, 0.8);
}
.dev-next-count {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--lc-text-t3, var(--t3));
}
/* Empty / error states stay quiet — no accent edge, nothing to act on. */
.dev-next-quiet {
border-color: var(--b1);
background: rgba(255, 255, 255, 0.02);
}
.dev-next-quiet .dev-next-body { margin-top: 7px; }
/* Desktop-only Developmental attention. Measurements mirror the approved
Quiet-secondary preview: 10px stack gaps, 14px primary cards, and 999px
quiet rows. The ≤900px panel-home keeps the existing .dev-next-* surface. */
@media (min-width: 901px) {
.dev-home-next,
.dev-attention,
.dev-attention-primary-list,
.dev-attention-secondary-list {
min-width: 0;
}
.dev-attention-head,
.dev-attention-secondary-head,
.dev-attention-item-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--lc-text-t3, var(--t3));
}
.dev-attention-head {
margin-bottom: 10px;
}
.dev-attention-primary-list,
.dev-attention-secondary-list {
display: grid;
gap: 10px;
}
.dev-attention-item {
position: relative;
min-width: 0;
overflow: hidden;
}
.dev-attention-primary {
padding: 15px 16px;
border: 1px solid var(--b2);
border-radius: 14px;
background: rgba(255, 255, 255, 0.025);
}
.dev-attention-primary::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--t3);
}
.dev-attention-primary[data-attention-class="commitment_action"] {
border-color: rgba(74, 222, 128, 0.34);
background: linear-gradient(
105deg,
rgba(74, 222, 128, 0.09),
rgba(255, 255, 255, 0.025)
);
}
.dev-attention-primary[data-attention-class="commitment_action"]::before {
background: var(--green);
}
.dev-attention-primary[data-attention-class="commitment_request"] {
border-color: rgba(245, 158, 11, 0.28);
background: linear-gradient(
105deg,
rgba(245, 158, 11, 0.08),
rgba(255, 255, 255, 0.025)
);
}
.dev-attention-primary[data-attention-class="commitment_request"]::before {
background: #f59e0b;
}
.dev-attention-kicker {
color: var(--lc-text-t3, var(--t3));
}
.dev-attention-primary[data-attention-class="commitment_action"]
.dev-attention-kicker {
color: rgba(134, 239, 172, 0.9);
}
.dev-attention-primary[data-attention-class="commitment_request"]
.dev-attention-kicker {
color: #fbbf24;
}
.dev-attention-title {
margin-top: 7px;
font-family: var(--f-serif);
font-size: var(--lc-3, 16px);
font-weight: 400;
line-height: 1.25;
color: var(--t1);
overflow-wrap: anywhere;
}
.dev-attention-body {
max-width: 58ch;
margin-top: 4px;
font-size: var(--lc-3, 16px);
line-height: 1.5;
color: var(--t2);
overflow-wrap: anywhere;
}
.dev-attention-controls {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.dev-attention-control {
border: 1px solid var(--b2);
border-radius: 999px;
padding: 7px 11px;
background: transparent;
color: var(--t2);
font: inherit;
font-size: var(--lc-2, 14px);
line-height: 1;
cursor: pointer;
transition:
border-color 0.16s,
background 0.16s,
color 0.16s,
transform 0.16s;
}
.dev-attention-control:hover {
border-color: var(--b3);
color: var(--t1);
transform: translateY(-1px);
}
.dev-attention-control:disabled {
cursor: wait;
opacity: 0.55;
transform: none;
}
.dev-attention-primary[data-attention-class="commitment_action"]
.dev-attention-open {
border-color: var(--green);
background: var(--green);
color: #0d1f14;
}
.dev-attention-secondary-lane {
margin-top: 10px;
}
.dev-attention-secondary-head {
margin-bottom: 8px;
padding: 0 2px;
opacity: 0.72;
}
.dev-attention-secondary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 12px;
padding: 10px 13px;
border: 1px solid var(--b1);
border-radius: 999px;
background: transparent;
color: var(--lc-text-t3, var(--t3));
}
.dev-attention-secondary .dev-attention-item-top,
.dev-attention-secondary .dev-attention-title,
.dev-attention-secondary .dev-attention-body {
grid-column: 1;
}
.dev-attention-secondary .dev-attention-item-top {
justify-content: flex-start;
}
.dev-attention-secondary .dev-attention-urgency {
display: none;
}
.dev-attention-secondary .dev-attention-title {
margin-top: 3px;
font-family: var(--f-ui);
font-size: var(--lc-2, 14px);
line-height: 1.35;
color: var(--t1);
}
.dev-attention-secondary .dev-attention-body {
margin-top: 2px;
font-size: var(--lc-3, 16px);
line-height: 1.35;
color: var(--lc-text-t3, var(--t3));
}
.dev-attention-secondary .dev-attention-controls {
grid-column: 2;
grid-row: 1 / span 3;
justify-content: flex-end;
margin-top: 0;
}
.dev-attention-secondary .dev-attention-control {
padding: 6px 9px;
border-color: transparent;
color: var(--lc-text-t3, var(--t3));
}
.dev-attention-secondary .dev-attention-open {
color: var(--t2);
}
.dev-attention-empty {
display: grid;
align-content: center;
min-height: 122px;
padding: 18px 2px;
border-top: 1px solid var(--b1);
border-bottom: 1px solid var(--b1);
color: var(--lc-text-t3, var(--t3));
}
.dev-attention-empty strong {
margin-bottom: 6px;
font-family: var(--f-serif);
font-size: var(--lc-4, 20px);
font-weight: 400;
color: var(--t1);
}
.dev-attention-empty span,
.dev-attention-status-copy {
font-size: var(--lc-2, 14px);
line-height: 1.5;
color: var(--lc-text-t3, var(--t3));
}
.dev-attention-principle {
margin-top: 22px;
}
.dev-attention-principle > span {
display: block;
width: 46px;
height: 1px;
background: var(--green);
}
.dev-attention-principle p {
max-width: 34ch;
margin-top: 10px;
font-size: var(--lc-3, 16px);
line-height: 1.5;
color: var(--lc-text-t3, var(--t3));
}
.dev-attention-loading {
display: grid;
gap: 10px;
}
.dev-attention-loading span {
display: block;
height: 72px;
border: 1px solid var(--b1);
border-radius: 14px;
background: linear-gradient(
100deg,
rgba(255, 255, 255, 0.02) 30%,
rgba(255, 255, 255, 0.07) 50%,
rgba(255, 255, 255, 0.02) 70%
);
background-size: 240% 100%;
animation: dev-attention-pulse 1.4s ease-in-out infinite;
}
.dev-attention-status-copy {
margin-top: 10px;
}
html[data-theme="light"] .dev-attention-primary {
background: rgba(17, 17, 27, 0.025);
}
html[data-theme="light"]
.dev-attention-primary[data-attention-class="commitment_action"] {
border-color: rgba(21, 128, 61, 0.28);
background: linear-gradient(
105deg,
rgba(21, 128, 61, 0.08),
rgba(17, 17, 27, 0.025)
);
}
html[data-theme="light"]
.dev-attention-primary[data-attention-class="commitment_request"] {
border-color: rgba(161, 98, 7, 0.26);
background: linear-gradient(
105deg,
rgba(161, 98, 7, 0.07),
rgba(17, 17, 27, 0.025)
);
}
html[data-theme="light"] .dev-attention-secondary {
background: rgba(17, 17, 27, 0.012);
}
}
@keyframes dev-attention-pulse {
0% { background-position: 120% 0; }
100% { background-position: -120% 0; }
}
@media (max-width: 640px) {
.dev-home-stats { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
/* With two columns the 3rd cell starts a new row — its left border would
read as a stray vertical tick, so re-cut the dividers per row. */
.dev-hs:nth-child(odd) { border-left: none; }
.dev-hs-n { font-size: var(--lc-5, 26px); }
}
/* ── Light theme ── */
html[data-theme="light"] .dev-hs-n { color: #15803d; }
html[data-theme="light"] .dev-next-card {
border-color: rgba(21, 128, 61, 0.28);
background: linear-gradient(
180deg, rgba(21, 128, 61, 0.09), rgba(21, 128, 61, 0.03)
);
}
html[data-theme="light"] .dev-next-eyebrow { color: #15803d; }
html[data-theme="light"] .dev-next-btn {
color: #f4fdf7;
background: linear-gradient(135deg, #15803d, #166534);
}
html[data-theme="light"] .dev-next-quiet {
border-color: var(--b1);
background: rgba(17, 17, 27, 0.03);
}
/* ══════════════════════════════════════════════════════════════
THIS WEEK — the acceptance screen (spec §3.7, Phase 2 step 4;
replaced the old day-entry surface 2026-08-02). Reading content
(the study text, the Engagement Days) rides the cream reading
paper — same treatment as the deck and the apply flow's reading
mode, deliberately theme-stable. The commit UI (count, cost,
buttons) is glass-side and token-routed, so theme-light flips it.
═══════════════════════════════════════════════════════════════ */
.aw-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
/* explicit: overflow-y:auto alone coerces overflow-x to auto — the
swipe-dead-zone bug class */
overflow-x: hidden;
max-width: 100%;
padding-right: 10px;
margin-right: -10px;
}
#week .panel-card { display: flex; flex-direction: column; }
#week .section-head { flex: none; }
.aw-loading {
padding: 60px 0;
text-align: center;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--lc-text-t3, var(--t3));
}
/* Cream reading paper (deck.css tokens; theme-stable by design) */
.aw-paper {
background: #f8f6f2;
color: #2a2a2a;
border-radius: 16px;
padding: 28px 32px;
max-width: 780px;
box-shadow:
0 18px 44px -18px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.aw-paper.aw-slim { max-width: 560px; }
/* Sacred Sunday is a deliberate weekly choice, not an enrollment selector.
The cards name the available host States; the selected summary then becomes
a quiet waiting state until attendance is witnessed. */
.aw-sunday-panel {
max-width: 900px;
padding: clamp(24px, 4vw, 42px);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
background:
radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.12), transparent 40%),
var(--card-bg);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.aw-sunday-panel .aw-eyebrow { color: var(--gold); }
.aw-sunday-panel .aw-set-title {
max-width: 680px;
color: var(--t1);
font-size: clamp(var(--lc-6, 34px), 4vw, var(--lc-7, 48px));
font-weight: 500;
}
.aw-sunday-panel .aw-study {
max-width: 680px;
color: var(--t2);
}
.aw-sunday-state-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 190px));
gap: 16px;
margin-top: 28px;
}
.aw-sunday-state {
position: relative;
display: flex;
overflow: hidden;
flex-direction: column;
width: 100%;
min-height: 286px;
padding: 0;
border: 1px solid var(--card-border);
border-radius: 14px;
background: rgba(13, 10, 20, 0.7);
color: var(--t1);
text-align: left;
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}
.aw-sunday-state:hover:not(:disabled) {
border-color: rgba(245, 216, 122, 0.4);
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
}
.aw-sunday-state:disabled { cursor: default; }
.aw-sunday-state.is-selected {
border-color: rgba(74, 222, 128, 0.42);
box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.2), 0 0 26px rgba(74, 222, 128, 0.12);
}
.aw-sunday-state.is-saving { opacity: 0.58; }
.aw-sunday-state img,
.aw-sunday-state-mark {
display: block;
width: 100%;
min-height: 286px;
flex: 1 1 286px;
object-fit: cover;
background-position: center;
background-size: cover;
background:
radial-gradient(circle at 50% 30%, rgba(245, 216, 122, 0.26), transparent 30%),
linear-gradient(145deg, rgba(139, 92, 246, 0.25), rgba(13, 10, 20, 0.74));
}
.aw-sunday-state > span:last-child {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: grid;
gap: 5px;
padding: 58px 15px 15px;
background: linear-gradient(transparent, rgba(13, 10, 20, 0.94) 68%);
}
.aw-sunday-state strong {
font-size: var(--lc-3, 16px);
font-weight: 550;
line-height: 1.3;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72);
}
.aw-sunday-state small {
color: var(--gold);
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 0.1em;
text-transform: uppercase;
}
html[data-theme="light"] .aw-sunday-state {
--gold: #f5d87a;
color: #ffffff;
}
.aw-sunday-selection {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--card-border);
}
.aw-sunday-selection-status {
display: flex;
align-items: center;
gap: 8px;
color: var(--t2);
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.aw-sunday-selection-status i {
width: 8px;
height: 8px;
border-radius: 50%;
background: #a08545;
box-shadow: 0 0 0 4px rgba(160, 133, 69, 0.12);
}
.aw-sunday-selection .aw-quiet {
color: var(--gold);
}
@media (max-width: 520px) {
.aw-sunday-panel { padding: 20px 16px 24px; }
.aw-sunday-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aw-sunday-state { min-height: 238px; }
.aw-sunday-state img,
.aw-sunday-state-mark { min-height: 238px; flex-basis: 238px; }
}
/* The state a week is committed to. Sits above BOTH stages: the state
is part of the commitment, so it is never left to a subtitle. */
.aw-statebar {
max-width: 780px;
margin-bottom: 14px;
padding: 10px 16px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 0.6px;
color: rgba(255, 255, 255, 0.66);
}
.aw-statebar strong { color: rgba(255, 255, 255, 0.92); font-weight: 500; }
.aw-state-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aw-state-pick select {
font: inherit;
color: rgba(255, 255, 255, 0.92);
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 5px 9px;
}
html[data-theme="light"] .aw-statebar {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.12);
color: rgba(0, 0, 0, 0.66);
}
html[data-theme="light"] .aw-statebar strong { color: rgba(0, 0, 0, 0.86); }
html[data-theme="light"] .aw-state-pick select {
color: rgba(0, 0, 0, 0.86);
background: rgba(255, 255, 255, 0.8);
border-color: rgba(0, 0, 0, 0.18);
}
.aw-eyebrow {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 3px;
text-transform: uppercase;
color: #a08545;
margin-bottom: 12px;
}
.aw-set-title {
font-family: var(--f-serif);
font-size: clamp(var(--lc-5, 26px), 3.5vw, var(--lc-6, 34px));
line-height: 1.16;
font-weight: 600;
color: #2a2a2a;
text-wrap: balance;
margin-bottom: 14px;
}
.aw-study {
font-family: var(--f-serif);
font-size: var(--lc-4, 20px);
line-height: 1.64;
color: #2a2a2a;
}
.aw-study p + p { margin-top: 0.85em; }
/* The Engagement Days — cream cards, every component readable */
.aw-day {
background: #f8f6f2;
color: #2a2a2a;
border-radius: 16px;
padding: 22px 26px;
max-width: 780px;
margin-top: 14px;
box-shadow:
0 18px 44px -18px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -1px 0 rgba(0, 0, 0, 0.05);
transition: opacity 0.2s, filter 0.2s;
}
.aw-day-head {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.aw-day-name {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 500;
color: #2a2a2a;
}
.aw-day-date {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 0.5px;
color: #5a5a5a;
}
.aw-day-out {
display: none;
margin-left: auto;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.5px;
text-transform: uppercase;
color: #9a9488;
}
/* An excluded engagement dims its CONTENT, never the card itself.
`opacity` on the card would create a stacking context its children
cannot escape — a child rule of `opacity: 1` is powerless inside a
0.42 parent — which would drag the "Add back" toggle down with it and
make the only way to restore the engagement the hardest thing to see.
So the dimming is applied to the readable parts only. */
.aw-day.is-out .aw-day-name,
.aw-day.is-out .aw-day-date,
.aw-day.is-out .aw-beat { opacity: 0.42; filter: saturate(0.6); }
.aw-day.is-out { border-style: dashed; }
.aw-day.is-out .aw-day-out { display: inline; }
.aw-beat + .aw-beat { margin-top: 14px; }
.aw-beat-label {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 2px;
text-transform: uppercase;
color: #a08545;
margin-bottom: 4px;
}
.aw-beat-text {
font-family: var(--f-serif);
font-size: var(--lc-3, 16px);
line-height: 1.56;
color: #2a2a2a;
}
.aw-beat-text p + p { margin-top: 0.7em; }
/* Commit block — glass-side, token-routed */
.aw-gap { margin-top: 30px; }
.aw-commitbox { max-width: 780px; margin-top: 30px; }
.aw-subhead {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 500;
color: var(--gold-soft);
margin-bottom: 12px;
}
.aw-note {
font-size: var(--lc-3, 16px);
line-height: 1.6;
color: var(--t2);
margin-bottom: 16px;
}
.aw-count { display: flex; gap: 10px; max-width: 420px; }
.aw-count-btn {
flex: 1;
padding: 13px 0;
font-family: var(--f-mono);
font-size: var(--lc-3, 16px);
font-weight: 500;
color: var(--t2);
background: linear-gradient(180deg,
rgba(255,255,255,0.05) 0%,
rgba(255,255,255,0.02) 100%);
border: 1px solid var(--b2);
border-radius: 12px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.aw-count-btn:active { transform: scale(0.97); }
.aw-count-btn.is-on {
color: #2a1a05;
background: linear-gradient(180deg, var(--gold), var(--gold-soft));
border-color: transparent;
box-shadow: 0 8px 18px -10px rgba(212, 168, 67, 0.8);
}
.aw-cost {
margin-top: 28px;
border: 1px solid var(--b-gold);
background: rgba(245, 216, 122, 0.05);
border-radius: 14px;
padding: 20px 22px;
}
.aw-cost .aw-subhead { margin-bottom: 10px; }
.aw-cost-line {
font-size: var(--lc-3, 16px);
line-height: 1.6;
color: var(--t2);
}
.aw-cost-line + .aw-cost-line { margin-top: 0.7em; }
.aw-cost-line strong { color: var(--t1); font-weight: 600; }
.aw-stack {
margin-top: 22px;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 420px;
}
.aw-primary {
width: 100%;
padding: 15px 18px;
border: none;
border-radius: 12px;
background: linear-gradient(180deg, var(--gold), var(--gold-soft));
color: #2a1a05;
font-family: var(--f-ui);
font-size: var(--lc-2, 14px);
font-weight: 600;
cursor: pointer;
box-shadow: 0 10px 24px -12px rgba(212, 168, 67, 0.7);
transition: transform 0.12s, filter 0.15s;
}
.aw-primary:active { transform: scale(0.985); filter: brightness(1.04); }
.aw-primary:disabled {
color: var(--t3);
background: rgba(255, 255, 255, 0.06);
box-shadow: none;
cursor: default;
}
/* decline: real, and deliberately unceremonious (§3.4) — a quiet text
affordance, never a peer of Accept */
.aw-quiet {
background: none;
border: none;
padding: 8px;
font-family: var(--f-ui);
font-size: var(--lc-2, 14px);
color: var(--lc-text-t3, var(--t3));
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.aw-quiet:hover { color: var(--t1); }
.aw-field-error {
font-size: var(--lc-2, 14px);
line-height: 1.5;
color: #f0716b;
}
html[data-theme="light"] .aw-field-error { color: #b4413c; }
/* Facts (running / success — inside the cream paper) */
.aw-facts { display: flex; gap: 26px; margin: 20px 0 14px; }
.aw-fact { display: flex; flex-direction: column; gap: 4px; }
.aw-fact-n {
font-family: var(--f-serif);
font-size: var(--lc-6, 34px);
line-height: 1;
font-weight: 600;
color: #2a2a2a;
}
.aw-fact-label {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.5px;
text-transform: uppercase;
color: #5a5a5a;
}
.aw-week-span {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 0.5px;
color: #5a5a5a;
margin-bottom: 12px;
}
/* Timezone gate (inside the cream paper) */
.aw-tz-detected { margin: 20px 0 4px; display: flex; flex-direction: column; gap: 4px; }
.aw-tz-zone {
font-family: var(--f-serif);
font-size: var(--lc-5, 26px);
font-weight: 600;
color: #2a2a2a;
}
.aw-tz-note {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.5px;
text-transform: uppercase;
color: #5a5a5a;
}
.aw-label {
display: block;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1px;
color: #5a5a5a;
margin: 16px 0 8px;
}
.aw-input {
width: 100%;
padding: 13px 14px;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.18);
background: rgba(255, 255, 255, 0.7);
font-family: var(--f-mono);
font-size: var(--lc-3, 16px);
color: #2a2a2a;
}
.aw-input:focus { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
/* on cream, the paper's own palette wins over the glass tokens */
.aw-paper .aw-field-error { color: #b4413c; margin-top: 8px; }
.aw-paper .aw-quiet { color: #5a5a5a; }
.aw-paper .aw-quiet:hover { color: #2a2a2a; }
.aw-paper .aw-stack { max-width: none; }
@media (max-width: 900px) {
/* natural page flow on mobile — the card grows with the document */
.aw-scroll { overflow-y: visible; padding-right: 0; margin-right: 0; }
.aw-paper { padding: 22px 20px; }
.aw-day { padding: 18px 16px; }
}
@media (max-width: 480px) {
.aw-facts { gap: 20px; }
.aw-count { gap: 8px; }
}
/* ── Saturday reflection: per-prompt answering (spec §5.1) ── */
.aw-reflect-item { margin-top: 14px; }
.aw-reflect-item .aw-beat-label { margin-bottom: 6px; }
.aw-rec-status {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 0.5px;
color: #5a5a5a;
min-height: 1em;
}
/* ── Reflection Day recorder ──────────────────────────────────────
The application's voice recorder (public/start.css, .recorder / .rec-*)
brought over so the two surfaces are one design. Two deliberate
differences from that copy:
- Everything is scoped under .aw-reflect-item. The application owns its
whole page and can hold these class names globally; this page loads
six stylesheets, and .recorder / .btn-ghost are names worth not
claiming.
- It aligns to the start of the card, not centred. The application
shows one question on a centred card; Reflection Day is a left-
aligned two-column list, and a centred pill under left-aligned text
reads as a mistake.
Dark values are the application's, unchanged (converted to HSL). Light
mode takes the week surface's green rather than the application's
amber — on this page green is what "active" already means. */
.aw-reflect-item .aw-rec { margin-top: 14px; }
.aw-reflect-item .recorder {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.aw-reflect-item .recorder.hidden { display: none; }
/* Record button — pill-shaped translucent gold gradient */
.aw-reflect-item .rec-record-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 34px;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
font-weight: 500;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--gold);
border: 1px solid var(--b-gold);
border-radius: 999px;
background: linear-gradient(
135deg,
hsla(46, 86%, 72%, 0.08) 0%,
hsla(46, 86%, 72%, 0.16) 50%,
hsla(46, 86%, 72%, 0.06) 100%
);
cursor: pointer;
transition: all 0.18s ease;
box-shadow:
inset 0 1px 0 hsla(0, 0%, 100%, 0.06),
0 8px 24px hsla(0, 0%, 0%, 0.25);
}
.aw-reflect-item .rec-record-btn:hover {
background: linear-gradient(
135deg,
hsla(46, 86%, 72%, 0.14) 0%,
hsla(46, 86%, 72%, 0.24) 50%,
hsla(46, 86%, 72%, 0.1) 100%
);
border-color: var(--gold);
color: hsl(46, 100%, 82%);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 hsla(0, 0%, 100%, 0.1),
0 12px 32px hsla(46, 86%, 72%, 0.18);
}
.aw-reflect-item .rec-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--rose);
flex-shrink: 0;
box-shadow: 0 0 8px hsla(333.33, 71.43%, 50.59%, 0.6);
}
.aw-reflect-item .rec-hint {
margin-top: 4px;
font-family: var(--f-serif);
font-size: var(--lc-2, 14px);
font-style: italic;
color: var(--lc-text-t4, var(--t4));
max-width: 380px;
line-height: 1.55;
}
/* Live recording pill — same frosted shell as .rec-player below, so
recording and playback share a visual language. */
.aw-reflect-item .rec-live-player,
.aw-reflect-item .rec-player {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: 380px;
padding: 14px 18px;
background: hsla(0, 0%, 100%, 0.025);
border: 1px solid hsla(0, 0%, 100%, 0.08);
border-radius: 999px;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.aw-reflect-item .rec-player { gap: 14px; }
.aw-reflect-item .rec-pulse {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--rose);
box-shadow: 0 0 10px hsla(333.33, 71.43%, 50.59%, 0.7);
animation: aw-rec-pulse 1.2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes aw-rec-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}
.aw-reflect-item .rec-timer,
.aw-reflect-item .rec-duration {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
font-weight: 400;
color: var(--lc-text-t3, var(--t3));
letter-spacing: 1px;
flex-shrink: 0;
}
/* Live DAW-style waveform — fills the middle of the pill. Its bars are
painted in JS (awVizBarColor), because canvas takes no CSS. */
.aw-reflect-item .rec-visualizer {
display: block;
flex: 1;
height: 32px;
min-width: 0;
}
.aw-reflect-item .rec-stop-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 30px;
background: linear-gradient(
135deg,
hsla(333.33, 71.43%, 50.59%, 0.1) 0%,
hsla(333.33, 71.43%, 50.59%, 0.18) 50%,
hsla(333.33, 71.43%, 50.59%, 0.08) 100%
);
border: 1px solid hsla(333.33, 71.43%, 50.59%, 0.3);
border-radius: 999px;
color: hsl(352.58, 95.7%, 81.76%);
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
font-weight: 500;
letter-spacing: 2.2px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.18s ease;
box-shadow:
inset 0 1px 0 hsla(0, 0%, 100%, 0.04),
0 8px 24px hsla(0, 0%, 0%, 0.25);
}
.aw-reflect-item .rec-stop-btn:hover:not(:disabled) {
background: linear-gradient(
135deg,
hsla(333.33, 71.43%, 50.59%, 0.18) 0%,
hsla(333.33, 71.43%, 50.59%, 0.28) 50%,
hsla(333.33, 71.43%, 50.59%, 0.14) 100%
);
border-color: hsla(333.33, 71.43%, 50.59%, 0.55);
transform: translateY(-1px);
}
.aw-reflect-item .rec-stop-btn:disabled { opacity: 0.5; cursor: default; }
.aw-reflect-item .rec-stop-icon {
width: 11px;
height: 11px;
border-radius: 2px;
background: hsl(352.58, 95.7%, 81.76%);
flex-shrink: 0;
}
.aw-reflect-item .rec-play-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(
135deg,
hsla(46, 86%, 72%, 0.1) 0%,
hsla(46, 86%, 72%, 0.2) 100%
);
border: 1px solid var(--b-gold);
border-radius: 50%;
color: var(--gold);
cursor: pointer;
flex-shrink: 0;
transition: all 0.18s ease;
}
.aw-reflect-item .rec-play-btn:hover {
background: linear-gradient(
135deg,
hsla(46, 86%, 72%, 0.18) 0%,
hsla(46, 86%, 72%, 0.32) 100%
);
border-color: var(--gold);
color: hsl(46, 100%, 82%);
}
.aw-reflect-item .play-icon.hidden { display: none; }
.aw-reflect-item .rec-waveform-wrap {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.aw-reflect-item .rec-scrub-track {
flex: 1;
height: 4px;
background: hsla(0, 0%, 100%, 0.1);
border-radius: 2px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.aw-reflect-item .rec-scrub-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0%;
background: var(--gold);
border-radius: 2px;
transition: width 0.1s linear;
}
.aw-reflect-item .rec-actions {
display: flex;
gap: 12px;
align-items: center;
margin-top: 8px;
}
.aw-reflect-item .btn-ghost {
padding: 11px 26px;
background: transparent;
color: var(--lc-text-t3, var(--t3));
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
font-weight: 500;
letter-spacing: 1.8px;
text-transform: uppercase;
border: 1px solid hsla(0, 0%, 100%, 0.14);
border-radius: 999px;
cursor: pointer;
transition: all 0.18s ease;
}
.aw-reflect-item .btn-ghost:hover {
color: var(--t1);
border-color: hsla(0, 0%, 100%, 0.28);
background: hsla(0, 0%, 100%, 0.03);
}
/* "Saved" is a statement of fact, not a button: the take is already on
the server by the time this state is reachable. */
.aw-reflect-item .aw-rec-saved {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--lc-text-t4, var(--t4));
}
.aw-reflect-item .upload-status {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
color: var(--lc-text-t3, var(--t3));
margin-top: 16px;
}
.aw-reflect-item .upload-status.hidden { display: none; }
.aw-reflect-item .upload-spinner {
width: 16px;
height: 16px;
border: 2px solid hsla(0, 0%, 100%, 0.08);
border-top-color: var(--gold);
border-radius: 50%;
animation: aw-rec-spin 0.7s linear infinite;
}
@keyframes aw-rec-spin { to { transform: rotate(360deg); } }
.aw-reflect-item .aw-rec-status:empty { display: none; }
.aw-reflect-item .aw-rec-status { margin-top: 10px; }
/* ── Recorder in light mode ──
The application's light rules put gold ink on white; this surface
speaks green (#15803d / hsl(142,72%,29%)) for everything active, so the
recorder joins that rather than importing a second accent. The glass
pills become real white — a translucent white on a pale page is not a
surface, it is a smudge. */
html[data-theme="light"] .aw-reflect-item .rec-record-btn {
color: hsl(0, 0%, 100%);
background: linear-gradient(135deg, hsl(142, 71%, 45%) 0%, hsl(142, 72%, 29%) 100%);
border-color: hsla(142, 72%, 29%, 0.58);
box-shadow: 0 6px 18px hsla(142, 72%, 29%, 0.22);
}
html[data-theme="light"] .aw-reflect-item .rec-record-btn:hover {
background: linear-gradient(135deg, hsl(142, 71%, 40%) 0%, hsl(142, 72%, 24%) 100%);
border-color: hsl(142, 72%, 24%);
color: hsl(0, 0%, 100%);
box-shadow: 0 10px 24px hsla(142, 72%, 29%, 0.28);
}
/* On the green pill the deep rose dot muddies; white reads as the
record light it is meant to be. */
html[data-theme="light"] .aw-reflect-item .rec-dot {
background: hsl(0, 0%, 100%);
box-shadow: 0 0 8px hsla(0, 0%, 100%, 0.75);
}
html[data-theme="light"] .aw-reflect-item .rec-live-player,
html[data-theme="light"] .aw-reflect-item .rec-player {
background: hsla(0, 0%, 100%, 0.96);
border-color: hsla(0, 0%, 0%, 0.12);
}
/* hsl(333,71%,51%) is 3.0:1 on white — too faint for 11px uppercase.
The stop action deepens to carry small type. */
html[data-theme="light"] .aw-reflect-item .rec-stop-btn {
color: hsl(333, 74%, 33%);
background: hsl(0, 0%, 100%);
border-color: hsla(333, 74%, 33%, 0.42);
box-shadow: 0 6px 18px hsla(0, 0%, 0%, 0.06);
}
html[data-theme="light"] .aw-reflect-item .rec-stop-btn:hover:not(:disabled) {
background: hsl(340, 60%, 98%);
border-color: hsl(333, 74%, 33%);
}
html[data-theme="light"] .aw-reflect-item .rec-stop-icon {
background: hsl(333, 74%, 33%);
}
html[data-theme="light"] .aw-reflect-item .rec-pulse {
background: hsl(333, 74%, 40%);
box-shadow: 0 0 10px hsla(333, 74%, 40%, 0.45);
}
html[data-theme="light"] .aw-reflect-item .rec-play-btn {
color: hsl(142, 72%, 29%);
background: hsl(0, 0%, 100%);
border-color: hsla(142, 72%, 29%, 0.42);
}
html[data-theme="light"] .aw-reflect-item .rec-play-btn:hover {
background: hsl(140, 40%, 97%);
border-color: hsl(142, 72%, 29%);
color: hsl(142, 72%, 24%);
}
html[data-theme="light"] .aw-reflect-item .rec-scrub-track {
background: hsla(0, 0%, 0%, 0.12);
}
html[data-theme="light"] .aw-reflect-item .rec-scrub-fill {
background: hsl(142, 72%, 29%);
}
html[data-theme="light"] .aw-reflect-item .btn-ghost {
color: hsla(240, 22.73%, 8.63%, 0.68);
border-color: hsla(0, 0%, 0%, 0.18);
}
html[data-theme="light"] .aw-reflect-item .btn-ghost:hover {
color: hsla(240, 22.73%, 8.63%, 0.94);
border-color: hsla(0, 0%, 0%, 0.34);
background: hsla(0, 0%, 0%, 0.03);
}
html[data-theme="light"] .aw-reflect-item .upload-spinner {
border-color: hsla(0, 0%, 0%, 0.1);
border-top-color: hsl(142, 72%, 29%);
}
html[data-theme="light"] .aw-reflect-item .aw-rec-saved,
html[data-theme="light"] .aw-reflect-item .rec-hint {
color: hsla(240, 22.73%, 8.63%, 0.68);
}
/* The application tightens the pills and stacks the actions on a phone
(start.css @600px). Same tightening, on THIS page's own phone
breakpoint — the reflection grid has already collapsed to one column
by here, so the pill is full-width and the padding is what gives. */
@media (max-width: 620px) {
.aw-reflect-item .rec-live-player,
.aw-reflect-item .rec-player {
padding: 12px 14px;
}
.aw-reflect-item .rec-actions {
flex-direction: column;
width: 100%;
}
.aw-reflect-item .rec-actions .btn-ghost {
width: 100%;
text-align: center;
}
}
/* ── Two-stage acceptance: the day toggle (spec §3.7 stage 2) ── */
.aw-day-toggle {
margin-left: auto;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.16);
background: transparent;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.5px;
text-transform: uppercase;
color: #5a5a5a;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.aw-day-toggle.is-on {
color: #2a1a05;
background: linear-gradient(180deg, var(--gold), var(--gold-soft));
border-color: transparent;
}
/* The toggle needs no un-dim rule: the dimming is applied to the card's
CONTENT, not the card, precisely so this stays at full strength.
(An earlier `.aw-day.is-out .aw-day-toggle { opacity: 1 }` here did
nothing — a child cannot exceed its parent's opacity.) */
.aw-day.is-out .aw-day-out { display: inline; }
/* Light: white on a solid gold fill. --gold is the ink gold here, so #2a1a05
on it measures 3.77:1 (under AA) where white measures 4.92:1. Same rule as
the session primaries; applies only to solid fills, not the gold washes. */
html[data-theme="light"] .aw-primary,
html[data-theme="light"] .aw-count-btn.is-on,
html[data-theme="light"] .aw-day-toggle.is-on {
color: #ffffff;
}
/* ── Light: the "Coming soon" badge ───────────────────────────────────
The half-flip: colour is var(--gold), which becomes the INK gold on light,
over a hardcoded rgba(26,15,31,0.55) plate that does not move. Dark gold on
a dark plate, which is the muddiness.
Worth being clear about the ground. The panel behind it is deliberately
faded — .panel-card.coming-soon drops its own children to opacity 0.16 and
blurs them — so that wash is intentional, not a conversion gap. The badge
is the one thing on the panel meant to be read.
In dark the plate sits DARKER than its dark ground, reading as a recessed
chip with gold type. The faithful light translation is the same
relationship on a pale ground: a near-white plate carrying the ink gold,
which measures 4.92:1. The border firms from --b-gold's 0.22 because this
is a focal chip rather than an incidental edge, and the plate is opaque
enough to stand without the 6px blur that light drops sitewide.
Its 0.28 black shadow moves onto the elevation scale. */
html[data-theme="light"] .panel-soon-badge {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(161, 98, 7, 0.40);
box-shadow: var(--elev-2);
}
/* Week-panel refinements: keep the committed scrollbar and gold action
language consistent with the rest of the application. */
.aw-scroll::-webkit-scrollbar {
width: 18px;
height: 18px;
background: transparent;
}
.aw-scroll::-webkit-scrollbar-track { background: transparent; }
.aw-scroll::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.22);
border-left: 4px solid transparent;
border-right: 1px solid transparent;
background-clip: padding-box;
border-radius: 0;
}
.aw-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.3); }
.aw-scroll::-webkit-scrollbar-button {
display: none;
width: 0;
height: 0;
}
.aw-scroll::-webkit-scrollbar-corner { background: transparent; }
.aw-primary {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
border: 1px solid rgba(245, 216, 122, 0.72);
}
.aw-primary:hover:not(:disabled) { filter: brightness(1.06); }
.aw-ask-gate,
.aw-size-choice { max-width: 780px; }
.aw-checklist { display: grid; gap: 10px; }
.aw-check-row {
display: flex;
align-items: flex-start;
gap: 13px;
padding: 15px 16px;
border: 1px solid var(--b2);
border-radius: 12px;
background: rgba(255, 255, 255, 0.035);
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.aw-check-row:has(.aw-check:checked) {
border-color: var(--b-gold);
background: rgba(245, 216, 122, 0.07);
}
.aw-check {
width: 18px;
height: 18px;
flex: 0 0 auto;
margin-top: 2px;
accent-color: var(--gold-soft);
}
.aw-check-copy {
display: grid;
gap: 4px;
font-size: var(--lc-3, 16px);
line-height: 1.45;
color: var(--t2);
}
.aw-check-copy strong {
color: var(--t1);
font-weight: 600;
}
.aw-check-note {
margin-top: 14px;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 0.6px;
color: var(--lc-text-t3, var(--t3));
}
/* Week decision — one quiet reading surface and one explicit choice surface.
Green carries the Developmental identity; gold remains the site-wide action. */
.aw-decision-layout {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(340px, 0.9fr);
min-height: 100%;
overflow: hidden;
border: 1px solid var(--b2);
border-radius: 18px;
background:
radial-gradient(circle at 10% 0%, rgba(134, 239, 172, 0.08), transparent 34%),
rgba(255, 255, 255, 0.025);
}
.aw-decision-context {
min-width: 0;
padding: clamp(28px, 3.5vw, 44px);
}
.aw-decision-context .aw-statebar {
max-width: none;
margin-bottom: 26px;
}
.aw-decision-kicker,
.aw-decision-label {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
font-weight: 500;
letter-spacing: 2.3px;
text-transform: uppercase;
color: #86efac;
}
.aw-decision-kicker {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 12px;
}
.aw-decision-kicker::before {
content: "";
width: 7px;
height: 7px;
flex: 0 0 auto;
border-radius: 50%;
background: #86efac;
box-shadow: 0 0 16px rgba(134, 239, 172, 0.75);
}
.aw-decision-title {
max-width: 760px;
margin: 0;
font-family: var(--f-serif);
font-size: clamp(var(--lc-6, 34px), 4vw, var(--lc-7, 48px));
font-weight: 500;
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--t1);
text-wrap: balance;
}
.aw-decision-study {
max-width: 720px;
margin-top: 22px;
font-family: var(--f-serif);
font-size: clamp(var(--lc-3, 16px), 1.35vw, var(--lc-4, 20px));
line-height: 1.68;
color: var(--t2);
}
.aw-decision-study p + p { margin-top: 0.85em; }
.aw-decision-shape { margin-top: clamp(30px, 4.5vw, 52px); }
.aw-decision-label { margin-bottom: 13px; }
.aw-decision-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.aw-decision-fact {
display: grid;
gap: 5px;
min-width: 0;
padding: 13px 15px;
border: 1px solid var(--b1);
border-radius: 11px;
background: rgba(255, 255, 255, 0.025);
}
.aw-decision-fact span {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.3px;
text-transform: uppercase;
color: var(--lc-text-t3, var(--t3));
}
.aw-decision-fact strong {
font-size: var(--lc-2, 14px);
line-height: 1.35;
font-weight: 550;
color: var(--t1);
}
.aw-decision-choice {
display: flex;
min-width: 0;
flex-direction: column;
padding: clamp(28px, 3vw, 40px);
border-left: 1px solid var(--b2);
background: rgba(0, 0, 0, 0.16);
}
.aw-decision-choice-title {
margin: 0;
font-family: var(--f-serif);
font-size: var(--lc-5, 26px);
line-height: 1.2;
font-weight: 550;
color: var(--t1);
}
.aw-decision-choice-intro {
margin: 10px 0 22px;
font-size: var(--lc-2, 14px);
line-height: 1.55;
color: var(--t2);
}
.aw-decision-choice .aw-checklist { gap: 9px; }
.aw-decision-choice .aw-check-row {
padding: 14px;
background: rgba(255, 255, 255, 0.025);
}
.aw-decision-choice .aw-check-row.is-locked {
opacity: 0.36;
cursor: default;
filter: saturate(0.45);
}
.aw-decision-choice .aw-check-row:has(.aw-check:checked) {
border-color: rgba(134, 239, 172, 0.52);
background: rgba(134, 239, 172, 0.08);
}
.aw-decision-choice .aw-check { accent-color: #86efac; }
.aw-decision-choice .aw-check-copy {
gap: 3px;
font-size: var(--lc-2, 14px);
}
.aw-decision-actions {
display: flex;
flex-direction: column;
gap: 9px;
margin-top: auto;
padding-top: 28px;
}
.aw-decision-actions .aw-check-note {
order: -1;
min-height: 1em;
margin: 0 0 2px;
}
.aw-decision-actions .aw-quiet { align-self: center; }
html[data-theme="light"] .aw-decision-layout {
background:
radial-gradient(circle at 10% 0%, rgba(22, 163, 74, 0.08), transparent 34%),
rgba(255, 255, 255, 0.54);
}
html[data-theme="light"] .aw-decision-kicker,
html[data-theme="light"] .aw-decision-label { color: #15803d; }
html[data-theme="light"] .aw-decision-kicker::before {
background: #22c55e;
box-shadow: 0 0 12px rgba(34, 197, 94, 0.38);
}
html[data-theme="light"] .aw-decision-choice { background: rgba(255, 255, 255, 0.38); }
html[data-theme="light"] .aw-decision-choice .aw-check-row:has(.aw-check:checked) {
border-color: rgba(21, 128, 61, 0.36);
background: rgba(34, 197, 94, 0.08);
}
@media (max-width: 900px) {
.aw-decision-layout { grid-template-columns: minmax(0, 1fr); }
.aw-decision-choice {
border-top: 1px solid var(--b2);
border-left: 0;
}
.aw-decision-actions { margin-top: 0; }
}
@media (max-width: 560px) {
.aw-decision-context,
.aw-decision-choice { padding: 24px 20px; }
.aw-decision-facts { grid-template-columns: minmax(0, 1fr); }
}
.aw-engagement-choices { max-width: 780px; }
.aw-choice-empty {
margin-top: 14px;
padding: 24px 22px;
border: 1px dashed var(--b2);
border-radius: 14px;
color: var(--lc-text-t3, var(--t3));
line-height: 1.55;
}
.aw-day-choice {
border: 1px solid var(--b2);
}
.aw-day-choice.is-selected {
border-color: var(--b-gold);
box-shadow: 0 12px 28px -22px rgba(245, 216, 122, 0.75);
}
.aw-day-preview {
padding-top: 8px;
font-size: var(--lc-3, 16px);
line-height: 1.55;
color: #777268;
}
.aw-count-btn {
min-width: 54px;
}
.aw-count-btn.is-on {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
}
/* ── Week flow: Developmental green is the action language ─────────── */
#week .aw-primary {
color: #102719;
background: linear-gradient(135deg, #a7f3d0 0%, #4ade80 100%);
border-color: rgba(167, 243, 208, 0.72);
box-shadow: 0 12px 26px -14px rgba(74, 222, 128, 0.82);
}
#week .aw-primary:disabled {
color: var(--t3);
background: rgba(255, 255, 255, 0.055);
border-color: var(--b1);
box-shadow: none;
}
#week .aw-subhead,
#week .aw-beat-label { color: #86efac; }
#week .aw-cost {
border-color: rgba(134, 239, 172, 0.28);
background: rgba(134, 239, 172, 0.055);
}
.aw-flow-kicker,
.aw-build-label {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
font-weight: 500;
letter-spacing: 2.2px;
text-transform: uppercase;
color: #86efac;
}
/* Step 2: choose a size and the specific engagements, with the review
staying visible beside the choices instead of appearing after them. */
.aw-build-layout {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(340px, 0.84fr);
min-height: 100%;
overflow: hidden;
border: 1px solid var(--b2);
border-radius: 18px;
background:
radial-gradient(circle at 8% 0%, rgba(134, 239, 172, 0.075), transparent 31%),
rgba(255, 255, 255, 0.02);
}
.aw-build-main {
min-width: 0;
padding: clamp(28px, 3.5vw, 44px);
}
.aw-build-main .aw-statebar {
max-width: none;
margin-bottom: 26px;
}
.aw-build-title {
max-width: 720px;
margin: 9px 0 0;
font-family: var(--f-serif);
font-size: clamp(var(--lc-6, 34px), 3.4vw, var(--lc-7, 48px));
line-height: 1.06;
font-weight: 500;
color: var(--t1);
text-wrap: balance;
}
.aw-build-intro {
max-width: 680px;
margin: 16px 0 30px;
font-size: var(--lc-3, 16px);
line-height: 1.62;
color: var(--t2);
}
.aw-size-choice {
padding: 22px;
border: 1px solid var(--b2);
border-radius: 14px;
background: rgba(255, 255, 255, 0.025);
}
.aw-size-choice > p,
.aw-choice-head p {
margin-top: 6px;
font-size: var(--lc-3, 16px);
line-height: 1.5;
color: var(--t2);
}
.aw-size-choice .aw-count {
max-width: 520px;
margin-top: 16px;
}
#week .aw-count-btn {
min-width: 48px;
color: var(--t2);
background: rgba(0, 0, 0, 0.13);
border-color: var(--b2);
}
#week .aw-count-btn.is-on {
color: #102719;
background: linear-gradient(135deg, #a7f3d0 0%, #4ade80 100%);
border-color: rgba(167, 243, 208, 0.8);
box-shadow: 0 9px 20px -12px rgba(74, 222, 128, 0.9);
}
.aw-engagement-choices {
max-width: none;
margin-top: 34px;
}
.aw-choice-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 20px;
margin-bottom: 12px;
}
.aw-choice-head > strong {
flex: 0 0 auto;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
font-weight: 500;
letter-spacing: 1.2px;
color: #86efac;
}
.aw-build-layout .aw-choice-empty {
margin-top: 0;
background: rgba(255, 255, 255, 0.018);
}
.aw-build-layout .aw-day {
max-width: none;
margin-top: 10px;
padding: 20px 21px;
color: var(--t1);
background: rgba(255, 255, 255, 0.026);
border-color: var(--b2);
border-radius: 13px;
box-shadow: none;
}
.aw-build-layout .aw-day.is-selected {
border-color: rgba(134, 239, 172, 0.48);
background: rgba(134, 239, 172, 0.065);
box-shadow: 0 16px 34px -28px rgba(74, 222, 128, 0.82);
}
.aw-build-layout .aw-day-name { color: var(--t1); }
.aw-build-layout .aw-day-date { color: var(--lc-text-t3, var(--t3)); }
.aw-build-layout .aw-beat-text {
font-size: var(--lc-3, 16px);
line-height: 1.55;
color: var(--t2);
}
.aw-build-layout .aw-day-toggle {
min-width: 92px;
padding: 8px 13px;
border: 1px solid rgba(134, 239, 172, 0.38);
border-radius: 9px;
color: #86efac;
background: rgba(134, 239, 172, 0.035);
font-size: var(--lc-2, 14px);
font-weight: 500;
}
.aw-build-layout .aw-day-toggle:hover {
background: rgba(134, 239, 172, 0.09);
border-color: rgba(134, 239, 172, 0.6);
}
.aw-build-layout .aw-day-toggle.is-on {
color: #102719;
background: linear-gradient(135deg, #a7f3d0 0%, #4ade80 100%);
border-color: rgba(167, 243, 208, 0.8);
}
.aw-build-review {
min-width: 0;
border-left: 1px solid var(--b2);
background: rgba(0, 0, 0, 0.15);
}
.aw-build-review-inner {
position: sticky;
top: 0;
padding: clamp(28px, 3vw, 40px);
}
.aw-review-title {
margin: 9px 0 24px;
font-family: var(--f-serif);
font-size: var(--lc-5, 26px);
line-height: 1.16;
font-weight: 550;
color: var(--t1);
}
.aw-review-steps {
display: grid;
gap: 4px;
}
.aw-review-step {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: 11px;
padding: 13px 0;
border-bottom: 1px solid var(--b1);
}
.aw-review-step > span,
.aw-week-step-n {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border: 1px solid rgba(134, 239, 172, 0.36);
border-radius: 50%;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
color: #86efac;
}
.aw-review-step strong,
.aw-week-step strong {
font-size: var(--lc-2, 14px);
font-weight: 600;
color: var(--t1);
}
.aw-review-step p,
.aw-week-step p {
margin-top: 3px;
font-size: var(--lc-3, 16px);
line-height: 1.46;
color: var(--lc-text-t3, var(--t3));
}
.aw-review-step b { color: #86efac; font-weight: 550; }
.aw-reflection-review {
margin-top: 18px;
border: 1px solid var(--b2);
border-radius: 12px;
background: rgba(255, 255, 255, 0.022);
}
.aw-reflection-review summary {
padding: 13px 15px;
cursor: pointer;
font-size: var(--lc-2, 14px);
font-weight: 550;
color: var(--t1);
}
.aw-reflection-review > div {
padding: 0 15px 14px;
}
.aw-reflection-question {
padding-top: 11px;
border-top: 1px solid var(--b1);
}
.aw-reflection-question + .aw-reflection-question { margin-top: 11px; }
.aw-reflection-question span {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.4px;
text-transform: uppercase;
color: #86efac;
}
.aw-reflection-question p {
margin-top: 4px;
font-family: var(--f-serif);
font-size: var(--lc-3, 16px);
line-height: 1.42;
color: var(--t2);
}
.aw-build-review .aw-cost {
margin-top: 20px;
padding: 16px;
}
.aw-build-review .aw-cost > strong {
font-size: var(--lc-2, 14px);
color: var(--t1);
}
.aw-build-review .aw-cost p {
margin-top: 7px;
font-size: var(--lc-3, 16px);
line-height: 1.48;
color: var(--t2);
}
.aw-build-actions {
display: flex;
flex-direction: column;
gap: 9px;
margin-top: 20px;
}
.aw-build-actions .aw-quiet { align-self: center; }
/* Active week: the post-acceptance result is also the durable weekly home. */
.aw-week-layout {
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
height: 100%;
min-height: 100%;
overflow: hidden;
border: 1px solid var(--b2);
border-radius: 18px;
background:
radial-gradient(circle at 8% 0%, rgba(134, 239, 172, 0.08), transparent 34%),
rgba(255, 255, 255, 0.02);
}
.aw-week-commitment {
display: flex;
flex-direction: column;
min-width: 0;
padding: clamp(28px, 3.5vw, 44px);
border-right: 1px solid var(--b2);
background: rgba(0, 0, 0, 0.12);
}
.aw-live-card {
display: flex;
flex: 1;
flex-direction: column;
min-height: 320px;
margin-top: 17px;
padding: clamp(22px, 2.7vw, 30px);
border: 1px solid rgba(134, 239, 172, 0.27);
border-radius: 16px;
background:
radial-gradient(circle at 10% 0%, rgba(134, 239, 172, 0.09), transparent 38%),
rgba(255, 255, 255, 0.025);
box-shadow: 0 24px 48px -38px rgba(74, 222, 128, 0.5);
}
.aw-live-card-state {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.3px;
text-transform: uppercase;
color: var(--lc-text-t3, var(--t3));
}
.aw-live-card-state i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--t3);
}
.aw-live-card-state.is-open,
.aw-live-card-state.is-reflection { color: #86efac; }
.aw-live-card-state.is-open i,
.aw-live-card-state.is-reflection i {
background: #4ade80;
box-shadow: 0 0 12px rgba(74, 222, 128, 0.52);
}
.aw-live-card h3 {
margin-top: 17px;
font-family: var(--f-serif);
font-size: clamp(var(--lc-5, 26px), 2.4vw, var(--lc-6, 34px));
line-height: 1.12;
font-weight: 530;
color: var(--t1);
}
.aw-live-card > p,
.aw-live-card-copy {
margin-top: 13px;
font-size: var(--lc-3, 16px);
line-height: 1.58;
color: var(--t2);
}
.aw-live-card-copy {
flex: 1;
min-height: 0;
overflow-y: auto;
padding-bottom: 48px;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 48px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 48px), transparent 100%);
}
.aw-live-card-copy p + p { margin-top: 10px; }
.aw-live-card-meta {
margin-top: 14px;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
line-height: 1.45;
color: var(--lc-text-t3, var(--t3));
}
/* Holds the notifications opt-in, and only when there is one to hold —
the quiet button below keeps its margin-top:auto and stays at the foot
of the card either way. */
#awEveningPushAction:not(:empty) { margin-top: 12px; }
#week .aw-live-open {
width: 100%;
min-height: 48px;
margin-top: auto;
padding-top: 12px;
padding-bottom: 12px;
border-radius: 999px;
}
/* The resting button: same slot and geometry as the green one, deliberately
not the same weight. Three four-hour windows leave roughly half of every
day with nothing open, and a filled green pill across that stretch teaches
citizens that green does not mean go. It only ever opens the log. */
#week .aw-live-rest {
border: 1px solid var(--b2);
background: transparent;
color: var(--t2);
font-family: var(--f-ui);
font-size: var(--lc-2, 14px);
font-weight: 500;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
#week .aw-live-rest:hover {
color: var(--t1);
border-color: hsla(141, 74%, 73%, 0.38);
}
.aw-week-information {
min-width: 0;
overflow-y: auto;
padding: clamp(28px, 3.5vw, 44px);
}
.aw-week-status {
padding-bottom: 20px;
border-bottom: 1px solid var(--b2);
}
.aw-week-status-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 24px;
}
.aw-week-title {
max-width: 680px;
margin: 6px 0 0;
font-family: var(--f-serif);
font-size: clamp(var(--lc-6, 34px), 3.3vw, var(--lc-7, 48px));
line-height: 1.04;
font-weight: 500;
color: var(--t1);
}
.aw-week-dates {
margin-top: 13px;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1px;
color: var(--lc-text-t3, var(--t3));
}
.aw-week-progress-compact {
display: grid;
grid-template-columns: auto auto;
align-items: end;
gap: 3px 7px;
min-width: 86px;
}
.aw-week-progress-compact strong {
font-family: var(--f-serif);
font-size: var(--lc-6, 34px);
line-height: 0.9;
font-weight: 540;
color: #86efac;
}
.aw-week-progress-compact strong span {
font-size: var(--lc-3, 16px);
color: var(--t2);
}
.aw-week-progress-compact small {
padding-bottom: 2px;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1px;
text-transform: uppercase;
color: var(--lc-text-t3, var(--t3));
}
.aw-week-progress-compact > i {
grid-column: 1 / -1;
display: block;
width: 100%;
height: 2px;
overflow: hidden;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
}
.aw-week-progress-compact > i > b {
display: block;
height: 100%;
border-radius: inherit;
background: #4ade80;
box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}
.aw-week-current {
display: grid;
grid-template-columns: 30px 7px auto minmax(0, 1fr);
align-items: center;
gap: 10px;
margin-top: 19px;
color: var(--t2);
}
.aw-week-current > i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 11px rgba(74, 222, 128, 0.48);
}
.aw-week-current > span {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.1px;
text-transform: uppercase;
color: #86efac;
}
.aw-week-current > strong {
min-width: 0;
font-size: var(--lc-2, 14px);
line-height: 1.42;
font-weight: 560;
color: var(--t1);
}
.aw-week-state-mark {
display: grid;
width: 30px;
height: 30px;
overflow: hidden;
place-items: center;
border: 1px solid var(--b2);
border-radius: 50%;
color: var(--t2);
background: rgba(255, 255, 255, 0.025);
}
.aw-week-state-mark svg {
width: 15px;
height: 15px;
}
.aw-week-state-mark img {
width: 100%;
height: 100%;
object-fit: cover;
}
.aw-week-reflection-surface {
margin-top: 8px;
}
.aw-week-reflection-surface #awReflection {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 24px;
}
.aw-week-reflection-surface .aw-reflection-card {
margin-top: 0;
padding: 19px 0;
border: 0;
border-bottom: 1px solid var(--b1);
border-radius: 0;
background: transparent;
}
.aw-week-latest {
display: grid;
grid-template-columns: 70px minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
margin-top: 4px;
padding-top: 18px;
}
.aw-week-latest-copy {
display: grid;
gap: 3px;
}
.aw-week-latest-copy strong {
font-size: var(--lc-2, 14px);
font-weight: 590;
color: var(--t1);
}
.aw-week-latest-copy span {
font-size: var(--lc-2, 14px);
line-height: 1.42;
color: var(--lc-text-t3, var(--t3));
}
.aw-week-log-open {
padding: 8px 13px;
border: 1px solid var(--b2);
border-radius: 999px;
font-size: var(--lc-2, 14px);
color: var(--t2);
background: transparent;
cursor: pointer;
}
.aw-week-log-open:hover {
color: var(--t1);
border-color: rgba(134, 239, 172, 0.38);
}
.aw-week-log-dialog {
width: min(440px, calc(100vw - 32px));
padding: 26px;
border: 1px solid var(--b2);
border-radius: 18px;
color: var(--t1);
background: rgba(22, 12, 32, 0.97);
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
}
.aw-week-log-dialog::backdrop {
background: rgba(5, 2, 9, 0.68);
backdrop-filter: blur(8px);
}
.aw-week-log-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 24px;
}
.aw-week-log-head h3 {
margin-top: 5px;
font-family: var(--f-serif);
font-size: var(--lc-5, 26px);
font-weight: 520;
}
.aw-week-log-head button {
width: 32px;
height: 32px;
border: 1px solid var(--b2);
border-radius: 50%;
color: var(--t2);
background: transparent;
cursor: pointer;
}
.aw-week-log-list {
margin-top: 22px;
border-top: 1px solid var(--b2);
}
.aw-week-log-list > div {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 14px 0;
border-bottom: 1px solid var(--b1);
}
.aw-week-log-list span {
font-size: var(--lc-2, 14px);
color: var(--t2);
}
.aw-week-log-list strong {
font-size: var(--lc-2, 14px);
font-weight: 580;
color: var(--t1);
}
.aw-week-log-dialog > p {
margin-top: 18px;
font-size: var(--lc-3, 16px);
line-height: 1.45;
color: var(--lc-text-t3, var(--t3));
}
.aw-reflection-loading {
margin-top: 18px;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
color: var(--lc-text-t3, var(--t3));
}
.aw-reflection-card {
margin-top: 0;
padding: 18px 0;
border: 0;
border-bottom: 1px solid var(--b1);
border-radius: 0;
background: transparent;
}
.aw-reflection-card .aw-beat-text {
font-size: var(--lc-3, 16px);
color: var(--t2);
}
.aw-reflection-card .aw-rec-status { color: var(--lc-text-t3, var(--t3)); }
html[data-theme="light"] #week .aw-primary,
html[data-theme="light"] #week .aw-count-btn.is-on,
html[data-theme="light"] .aw-build-layout .aw-day-toggle.is-on {
color: #ffffff;
background: linear-gradient(135deg, #15803d 0%, #166534 100%);
border-color: rgba(21, 128, 61, 0.58);
}
html[data-theme="light"] #week .aw-subhead,
html[data-theme="light"] #week .aw-beat-label,
html[data-theme="light"] .aw-live-card-state.is-open,
html[data-theme="light"] .aw-live-card-state.is-reflection { color: #166534; }
html[data-theme="light"] .aw-flow-kicker,
html[data-theme="light"] .aw-build-label,
html[data-theme="light"] .aw-choice-head > strong,
html[data-theme="light"] .aw-review-step b,
html[data-theme="light"] .aw-reflection-question span { color: #15803d; }
html[data-theme="light"] .aw-build-layout,
html[data-theme="light"] .aw-week-layout {
background:
radial-gradient(circle at 8% 0%, rgba(22, 163, 74, 0.08), transparent 31%),
rgba(255, 255, 255, 0.52);
}
html[data-theme="light"] .aw-build-review,
html[data-theme="light"] .aw-week-commitment { background: rgba(255, 255, 255, 0.36); }
html[data-theme="light"] .aw-build-layout .aw-day,
html[data-theme="light"] .aw-size-choice,
html[data-theme="light"] .aw-reflection-review,
html[data-theme="light"] .aw-live-card,
html[data-theme="light"] .aw-week-log-dialog { background: rgba(255, 255, 255, 0.96); }
html[data-theme="light"] .aw-build-layout .aw-day.is-selected,
html[data-theme="light"] .aw-week-state-mark { background: rgba(34, 197, 94, 0.055); }
html[data-theme="light"] .aw-build-layout .aw-day-toggle {
color: #15803d;
border-color: rgba(21, 128, 61, 0.34);
background: rgba(34, 197, 94, 0.04);
}
html[data-theme="light"] .aw-week-progress-compact strong { color: #15803d; }
@media (max-width: 1000px) {
.aw-build-layout,
.aw-week-layout {
grid-template-columns: minmax(0, 1fr);
height: auto;
min-height: 0;
overflow: visible;
}
.aw-build-review {
border-top: 1px solid var(--b2);
border-left: 0;
}
.aw-week-commitment {
border-right: 0;
border-bottom: 1px solid var(--b2);
}
.aw-live-card { min-height: 0; }
.aw-week-information { overflow: visible; }
.aw-build-review-inner { position: static; }
}
@media (max-width: 620px) {
.aw-build-main,
.aw-build-review-inner { padding: 24px 20px; }
.aw-week-commitment,
.aw-week-information { padding: 22px 20px; }
.aw-live-card {
margin-top: 12px;
padding: 20px;
}
.aw-live-card h3 {
margin-top: 12px;
font-size: var(--lc-5, 26px);
}
.aw-live-card > p,
.aw-live-card-copy {
margin-top: 10px;
font-size: var(--lc-3, 16px);
}
#week .aw-live-open { margin-top: 20px; }
.aw-count { gap: 7px; }
#week .aw-count-btn { min-width: 0; }
.aw-day-head { align-items: center; }
.aw-build-layout .aw-day-toggle {
width: 100%;
margin: 8px 0 0;
}
.aw-week-title { font-size: var(--lc-5, 26px); }
.aw-week-status-row { gap: 16px; }
.aw-week-progress-compact { min-width: 72px; }
.aw-week-progress-compact strong { font-size: var(--lc-5, 26px); }
.aw-week-current {
display: flex;
gap: 8px;
}
.aw-week-state-mark { flex: 0 0 30px; }
.aw-week-current > span:not(.aw-week-state-mark) { display: none; }
.aw-week-current > strong {
flex: 1;
font-size: var(--lc-2, 14px);
}
.aw-week-reflection-surface #awReflection { grid-template-columns: minmax(0, 1fr); }
.aw-week-latest {
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px 14px;
}
.aw-week-latest > .aw-flow-kicker {
grid-column: 1 / -1;
}
.aw-week-log-open {
padding-inline: 11px;
font-size: var(--lc-2, 14px);
}
}
/* The panel is already the container. Let every Week state meet its edges
so the two-column surface does not read as a second card inside it. */
#week .aw-scroll {
max-width: none;
margin-right: -44px;
margin-bottom: -36px;
margin-left: -44px;
margin-top: -36px;
padding-right: 0;
}
.aw-decision-layout,
.aw-build-layout,
.aw-week-layout,
html[data-theme="light"] .aw-decision-layout,
html[data-theme="light"] .aw-build-layout,
html[data-theme="light"] .aw-week-layout {
border: 0;
border-radius: 0;
background: transparent;
}
@media (min-width: 901px) and (max-width: 1100px) {
#week .aw-scroll {
margin: -30px -32px;
}
}
@media (max-width: 900px) {
#week .aw-scroll {
margin-top: 0;
margin-right: -18px;
margin-bottom: -24px;
margin-left: -18px;
}
}
/* Count first, then shape each created engagement one at a time. */
#week .aw-choose-engagements {
border-radius: 999px;
color: #d1fae5;
background: linear-gradient(135deg, rgba(167, 243, 208, 0.28), rgba(74, 222, 128, 0.38));
border-color: rgba(167, 243, 208, 0.54);
box-shadow: 0 12px 28px -18px rgba(74, 222, 128, 0.72);
backdrop-filter: blur(8px);
}
.aw-picker-main .aw-build-title {
margin-top: 0;
font-size: clamp(var(--lc-6, 34px), 3vw, var(--lc-7, 48px));
}
.aw-picker-layout { height: 100%; }
.aw-picker-main {
display: flex;
flex-direction: column;
min-height: 0;
}
/* The left column is the nested scroll container: everything in it — title,
week size, tabs, the card — scrolls together under one scrollbar, while the
review column on the right stays put. Desktop only; below 901px the layout
stacks and the page scrolls normally. */
@media (min-width: 901px) {
.aw-picker-main {
overflow-y: auto;
/* explicit: overflow-y:auto alone coerces overflow-x to auto */
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(134, 239, 172, 0.22) transparent;
}
}
/* ── The delivery time, above the count (owner, 2026-08-13) ──────
Shares .aw-count-step's rhythm below it — label left, control right —
so the two read as a pair of dials on one decision rather than a form
stacked on a picker. Only a border-top here: the count step carries
its own, so one line separates them, not two. */
.aw-time-step {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(180px, 324px);
align-items: center;
gap: 10px;
padding: 11px 0;
border-top: 1px solid var(--b1);
}
.aw-time-step > strong {
font-size: var(--lc-3, 16px);
font-weight: 580;
color: var(--t1);
}
.aw-time-fields {
display: grid;
min-width: 0;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
/* The midday only exists on weeks that carry one, so the row is two or
three across depending on the week — never a permanent empty slot. */
.aw-time-fields.has-midday { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.aw-time-field {
display: flex;
min-width: 0;
flex-direction: column;
gap: 5px;
}
.aw-time-field > span {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.7px;
text-transform: uppercase;
color: var(--lc-text-t3, var(--t3));
}
/* A native : typed on a desktop, an OS hour/minute
wheel on a phone — the same control the States screen chose, so its
styling lessons carry. color-scheme is what keeps the browser's own
AM/PM stepper legible; without it a dark field opens a white popup. */
.aw-time-input {
min-width: 0;
min-height: 40px;
padding: 8px 10px;
border: 1px solid var(--b2);
border-radius: 10px;
background: hsl(0 0% 0% / 0.13);
box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.025);
color: var(--t1);
color-scheme: dark;
font-family: var(--f-mono);
font-size: var(--lc-3, 16px);
}
.aw-time-input:focus { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.aw-time-input::-webkit-date-and-time-value { min-width: 0; text-align: left; }
.aw-time-note,
.aw-time-need,
.aw-time-actions { grid-column: 1 / -1; }
.aw-time-note {
margin: 0;
font-size: var(--lc-2, 14px);
line-height: 1.5;
color: var(--lc-text-t3, var(--t3));
}
/* The only thing standing between the citizen and Continue — so it is
said in the same affirming green this screen uses for "next", not in
an error red. Nothing has gone wrong; something is simply unset. */
.aw-time-need {
margin: 0;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.7px;
text-transform: uppercase;
color: hsl(142 77% 73%);
}
.aw-time-actions { display: flex; justify-content: flex-end; }
/* Shrinking the week past something written. Amber, not the error red:
nothing has failed and nothing is lost — the writing is held, and this
sentence is the pause before the citizen confirms they meant it. Spans
the count step's three columns, under the button it qualifies. */
.aw-count-drop {
grid-column: 1 / -1;
margin: 0;
font-size: var(--lc-2, 14px);
line-height: 1.55;
color: var(--amber);
}
.aw-count-step {
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(180px, 210px) 104px;
align-items: center;
gap: 10px;
padding: 11px 0;
border-top: 1px solid var(--b1);
border-bottom: 1px solid var(--b1);
}
.aw-count-summary span,
.aw-editor-head span {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.7px;
text-transform: uppercase;
color: #86efac;
}
.aw-count-step > strong {
font-size: var(--lc-3, 16px);
font-weight: 580;
color: var(--t1);
}
.aw-count-slider {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
min-height: 40px;
overflow: hidden;
border: 1px solid var(--b2);
border-radius: 999px;
background: rgba(0, 0, 0, 0.13);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.aw-count-slider::before {
position: absolute;
z-index: 0;
top: 3px;
bottom: 3px;
left: calc(var(--aw-count-left) + 3px);
width: calc(20% - 6px);
border-radius: 999px;
content: "";
opacity: 0;
background: linear-gradient(135deg, rgba(167, 243, 208, 0.76), rgba(74, 222, 128, 0.62));
box-shadow: 0 8px 18px -12px rgba(74, 222, 128, 0.9);
transition: left 0.2s ease, opacity 0.15s ease;
}
.aw-count-slider.has-value::before { opacity: 1; }
.aw-count-option {
position: relative;
z-index: 1;
min-width: 0;
padding: 7px 3px;
border: 0;
border-left: 1px solid var(--b1);
font-size: var(--lc-2, 14px);
color: var(--t2);
background: transparent;
cursor: pointer;
}
.aw-count-option:first-of-type { border-left: 0; }
.aw-count-option.is-on { color: #102719; font-weight: 650; }
#week .aw-confirm-count {
min-height: 40px;
padding: 9px 15px;
border-radius: 999px;
}
.aw-count-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 14px 0;
border-top: 1px solid var(--b1);
}
.aw-count-summary > div {
display: grid;
gap: 3px;
}
.aw-count-summary strong {
font-family: var(--f-serif);
font-size: var(--lc-4, 20px);
font-weight: 550;
color: var(--t1);
}
.aw-count-summary .aw-quiet {
width: auto;
padding: 7px 12px;
border: 1px solid var(--b2);
border-radius: 999px;
}
.aw-build-divider {
height: 1px;
margin: 8px 0 18px;
background: linear-gradient(90deg, rgba(134, 239, 172, 0.34), var(--b1) 55%, transparent);
}
.aw-day-tabs {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 8px;
margin-bottom: 14px;
}
.aw-day-tab-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* A date, not a numeral: two lines, sized like the activation-day picker
it now replaces. The square that held a single digit is gone. */
.aw-day-tab {
display: grid;
gap: 3px;
place-items: center;
min-width: 76px;
padding: 9px 13px;
border: 1px solid var(--b2);
border-radius: 12px;
color: var(--t2);
background: rgba(255, 255, 255, 0.025);
cursor: pointer;
}
.aw-day-tab strong {
font-size: var(--lc-2, 14px);
font-weight: 620;
}
.aw-day-tab span {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
color: var(--lc-text-t3, var(--t3));
}
.aw-day-tab.is-on span { color: #86efac; }
.aw-day-tab:hover {
border-color: rgba(134, 239, 172, 0.4);
background: rgba(134, 239, 172, 0.045);
}
.aw-day-tab.is-on {
color: #d1fae5;
border-color: rgba(134, 239, 172, 0.54);
background: rgba(134, 239, 172, 0.1);
box-shadow: 0 10px 24px -18px rgba(74, 222, 128, 0.9);
}
.aw-reflection-tab {
min-width: 142px;
padding: 8px 17px;
border: 1px solid var(--b2);
border-radius: 12px;
font-size: var(--lc-2, 14px);
font-weight: 600;
color: var(--t2);
background: rgba(255, 255, 255, 0.025);
cursor: pointer;
}
.aw-reflection-tab:hover {
border-color: rgba(134, 239, 172, 0.4);
background: rgba(134, 239, 172, 0.045);
}
.aw-reflection-tab.is-on {
color: #d1fae5;
border-color: rgba(134, 239, 172, 0.54);
background: rgba(134, 239, 172, 0.1);
}
/* ── The column shape (narrow screens) ─────────────────────────
The same days as the strip, one per row, and the open one carries its
own body — a card sitting apart from the row you tapped reads as a
different screen on a phone. One open at a time, exactly like the strip:
opening a row is selecting a day, so there is no closed-everything
state to represent. */
.aw-build-rows {
display: grid;
gap: 10px;
}
.aw-build-row {
border: 1px solid var(--b2);
border-radius: 15px;
background: rgba(255, 255, 255, 0.024);
}
.aw-build-row.is-open {
border-color: rgba(134, 239, 172, 0.34);
background: rgba(134, 239, 172, 0.028);
}
.aw-build-row-head {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 15px 17px;
border: 0;
border-radius: 15px;
text-align: left;
background: none;
cursor: pointer;
}
.aw-build-row-when {
margin-right: auto;
font-family: var(--f-serif);
font-size: var(--lc-4, 20px);
font-weight: 520;
color: var(--t1);
}
.aw-build-row-state {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.7px;
text-transform: uppercase;
color: var(--lc-text-t3, var(--t3));
}
.aw-build-row-state.is-written { color: #86efac; }
/* The caret is the only thing saying "this opens", so it turns. */
.aw-build-row-head::after {
content: "";
width: 7px;
height: 7px;
margin-bottom: 3px;
border-right: 1.5px solid var(--t3);
border-bottom: 1.5px solid var(--t3);
transform: rotate(45deg);
transition: transform 0.18s ease;
}
.aw-build-row.is-open .aw-build-row-head::after {
margin: 3px 0 0;
transform: rotate(-135deg);
}
.aw-build-row-body { padding: 0 17px 18px; }
.aw-build-row-edit {
display: flex;
justify-content: flex-end;
margin-bottom: 14px;
}
.aw-build-row-edit > strong {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.7px;
text-transform: uppercase;
color: #86efac;
}
.aw-engagement-card {
display: flex;
flex: none;
flex-direction: column;
width: 100%;
max-width: none;
padding: clamp(21px, 3vw, 29px);
border: 1px solid var(--b2);
border-radius: 15px;
background: rgba(255, 255, 255, 0.024);
}
.aw-engagement-card.is-editing {
border-color: rgba(134, 239, 172, 0.3);
background: rgba(134, 239, 172, 0.025);
}
.aw-card-scroll {
flex: none;
}
.aw-editor-head {
display: flex;
align-items: start;
justify-content: space-between;
gap: 20px;
margin-bottom: 23px;
}
.aw-editor-head h4 {
margin-top: 5px;
font-family: var(--f-serif);
font-size: clamp(var(--lc-5, 26px), 2.5vw, var(--lc-6, 34px));
line-height: 1.1;
font-weight: 520;
color: var(--t1);
}
.aw-editor-head > strong {
flex: 0 0 auto;
padding: 7px 11px;
border: 1px solid rgba(134, 239, 172, 0.28);
border-radius: 999px;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 0.6px;
color: #86efac;
background: rgba(134, 239, 172, 0.055);
}
.aw-edit-card {
flex: 0 0 auto;
padding: 7px 13px;
border: 1px solid rgba(134, 239, 172, 0.34);
border-radius: 999px;
font-size: var(--lc-2, 14px);
font-weight: 600;
color: #86efac;
background: rgba(134, 239, 172, 0.045);
cursor: pointer;
}
.aw-edit-card:hover { background: rgba(134, 239, 172, 0.1); }
.aw-card-section {
padding: 16px 0;
border-top: 1px solid var(--b1);
}
.aw-card-section > span {
display: block;
margin-bottom: 7px;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.5px;
text-transform: uppercase;
color: #86efac;
}
.aw-card-section p {
font-size: var(--lc-3, 16px);
line-height: 1.56;
color: var(--t2);
}
.aw-card-section p + p { margin-top: 9px; }
.aw-reflection-day-intro {
margin-bottom: 14px;
font-size: var(--lc-2, 14px);
line-height: 1.52;
color: var(--t2);
}
.aw-reflection-day-question:first-of-type { border-top: 0; }
.aw-reflection-ready {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 0.7px;
color: #86efac;
}
.aw-editor-field + .aw-editor-field { margin-top: 18px; }
.aw-editor-field > label {
display: block;
margin-bottom: 7px;
font-size: var(--lc-2, 14px);
font-weight: 620;
color: var(--t1);
}
.aw-editor-field > label span {
margin-left: 5px;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1px;
text-transform: uppercase;
color: var(--lc-text-t3, var(--t3));
}
.aw-editor-field > p {
margin: -1px 0 11px;
font-size: var(--lc-3, 16px);
line-height: 1.45;
color: var(--lc-text-t3, var(--t3));
}
/* The reflection prompt, shown but not editable — it is answered by voice
in the evening. Set as a quotation rather than a disabled textarea: a
greyed-out box invites clicking and then refuses, which reads as broken
rather than as deliberate. */
.aw-editor-quote {
padding: 2px 0 2px 13px;
border-left: 2px solid var(--b2);
font-size: var(--lc-3, 16px);
line-height: 1.55;
color: var(--t2);
}
.aw-editor-quote p { margin: 0 0 8px; }
.aw-editor-quote p:last-child { margin-bottom: 0; }
/* An engagement whose activation has not been written yet. Said in the
same affirming green the rest of this flow uses for "your move next",
not in an error colour — nothing has gone wrong. */
/* A part this engagement simply does not have. Deliberately NOT the green
of .aw-card-unwritten: that one says "your move next", and an empty
midday is a finished answer rather than an outstanding one. */
.aw-card-none {
margin: 0;
font-size: var(--lc-2, 14px);
color: var(--lc-text-t3, var(--t3));
}
.aw-card-unwritten {
margin: 0;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
color: hsl(142 77% 73%);
}
.aw-activation-days {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 7px;
}
.aw-activation-day {
display: grid;
gap: 3px;
min-height: 52px;
padding: 7px;
border: 1px solid var(--b2);
border-radius: 11px;
color: var(--t2);
background: rgba(255, 255, 255, 0.025);
cursor: pointer;
}
.aw-activation-day strong {
font-size: var(--lc-2, 14px);
font-weight: 620;
}
.aw-activation-day span {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
color: var(--lc-text-t3, var(--t3));
}
.aw-activation-day:hover:not(:disabled) {
border-color: rgba(134, 239, 172, 0.42);
background: rgba(134, 239, 172, 0.05);
}
.aw-activation-day.is-on {
color: #d1fae5;
border-color: rgba(134, 239, 172, 0.55);
background: rgba(134, 239, 172, 0.1);
box-shadow: 0 9px 22px -17px rgba(74, 222, 128, 0.9);
}
.aw-activation-day.is-on span { color: #86efac; }
.aw-activation-day:disabled {
opacity: 0.27;
cursor: not-allowed;
}
.aw-editor-field textarea {
display: block;
width: 100%;
resize: vertical;
padding: 13px 14px;
border: 1px solid var(--b2);
border-radius: 12px;
outline: 0;
font: inherit;
font-size: var(--lc-3, 16px);
line-height: 1.52;
color: var(--t1);
background: rgba(0, 0, 0, 0.13);
transition: border-color 0.15s, box-shadow 0.15s;
}
.aw-editor-field textarea:focus {
border-color: rgba(134, 239, 172, 0.48);
box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.07);
}
.aw-edit-actions {
display: flex;
justify-content: flex-end;
margin-top: 21px;
padding-top: 18px;
border-top: 1px solid var(--b1);
}
#week .aw-edit-actions .aw-primary {
width: auto;
min-width: 150px;
border-radius: 999px;
}
.aw-editor-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 23px;
padding-top: 18px;
border-top: 1px solid var(--b1);
}
.aw-editor-nav .aw-quiet {
width: auto;
padding-inline: 0;
}
#week .aw-editor-next {
width: auto;
min-width: 190px;
border-radius: 999px;
}
.aw-picker-review .aw-statebar {
max-width: none;
margin-bottom: 22px;
}
.aw-week-shape-note {
margin: -10px 0 18px;
font-size: var(--lc-2, 14px);
line-height: 1.55;
color: var(--t2);
}
.aw-accept-note {
margin: 15px 0 0;
font-size: var(--lc-2, 14px);
line-height: 1.45;
text-align: center;
color: var(--lc-text-t3, var(--t3));
}
#week .aw-final-accept {
width: 100%;
margin-top: 16px;
border-radius: 999px;
}
.aw-build-back {
display: block;
margin: 16px auto 0;
}
html[data-theme="light"] #week .aw-choose-engagements {
color: #14532d;
background: linear-gradient(135deg, rgba(134, 239, 172, 0.38), rgba(34, 197, 94, 0.28));
border-color: rgba(21, 128, 61, 0.36);
}
html[data-theme="light"] .aw-activation-day,
html[data-theme="light"] .aw-build-row,
html[data-theme="light"] .aw-day-tab,
html[data-theme="light"] .aw-reflection-tab,
html[data-theme="light"] .aw-engagement-card,
html[data-theme="light"] .aw-editor-field textarea {
background: rgba(255, 255, 255, 0.44);
}
html[data-theme="light"] .aw-activation-day.is-on,
html[data-theme="light"] .aw-day-tab.is-on,
html[data-theme="light"] .aw-reflection-tab.is-on {
color: #15803d;
border-color: rgba(21, 128, 61, 0.4);
background: rgba(34, 197, 94, 0.09);
}
html[data-theme="light"] .aw-time-input {
border-color: hsl(0 0% 0% / 0.18);
background: hsl(0 0% 100% / 0.7);
color: hsl(0 0% 16%);
color-scheme: light;
}
html[data-theme="light"] .aw-time-need,
html[data-theme="light"] .aw-card-unwritten { color: hsl(142 72% 29%); }
/* The dark amber is far too pale to read on the light surface. */
html[data-theme="light"] .aw-count-drop { color: hsl(30 74% 32%); }
html[data-theme="light"] .aw-count-summary span,
html[data-theme="light"] .aw-editor-head span,
html[data-theme="light"] .aw-editor-head > strong,
html[data-theme="light"] .aw-build-row-state.is-written,
html[data-theme="light"] .aw-build-row-edit > strong,
html[data-theme="light"] .aw-day-tab.is-on span,
html[data-theme="light"] .aw-activation-day.is-on span { color: #15803d; }
html[data-theme="light"] .aw-build-row.is-open {
border-color: hsl(142 45% 38% / 0.42);
background: hsl(142 58% 45% / 0.08);
}
@media (max-width: 500px) {
.aw-count-step,
.aw-time-step {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
/* Three time fields will not sit side by side on a phone. */
.aw-time-fields.has-midday { grid-template-columns: 1fr 1fr; }
.aw-count-slider { max-width: 330px; }
#week .aw-confirm-count { width: 100%; }
}
@media (max-width: 420px) {
.aw-editor-head {
flex-direction: column;
gap: 10px;
}
}
@media (max-width: 720px) {
.aw-editor-nav { align-items: stretch; }
#week .aw-editor-next { min-width: 0; }
}
/* ══════════════════════════════════════════════════════════
THE ACTIVITY LOG (#awHistory)
══════════════════════════════════════════════════════════
A sibling of #awBody, so it outlives every week state. #awBody carries
margin-bottom:-36px to let the week layout meet the panel's edges, so
the top margin here cancels that first and then opens the real gap. */
.aw-log {
margin-top: 60px;
padding-top: 26px;
border-top: 1px solid var(--b2);
}
.aw-log:empty {
margin: 0;
padding: 0;
border: 0;
}
.aw-log-head p {
margin-top: 6px;
font-size: var(--lc-3, 16px);
line-height: 1.45;
color: var(--lc-text-t3, var(--t3));
}
/* Internal scroll on desktop — seven entries a week, without bound.
Released on narrow screens below: a scroll container inside the
panel's own scroller traps the finger on touch. */
.aw-log-weeks {
max-height: 460px;
margin-top: 16px;
overflow-y: auto;
overscroll-behavior: contain;
}
.aw-log-week {
border-bottom: 1px solid var(--b1);
}
.aw-log-week-open {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
padding: 15px 4px;
border: 0;
text-align: left;
color: inherit;
background: transparent;
cursor: pointer;
}
.aw-log-week-open:hover .aw-log-week-dates {
color: hsl(142, 77%, 73%);
}
.aw-log-week-main {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
flex: 1;
}
.aw-log-week-dates {
font-size: var(--lc-2, 14px);
font-weight: 580;
color: var(--t1);
}
.aw-log-week-summary {
font-size: var(--lc-2, 14px);
color: var(--lc-text-t3, var(--t3));
}
.aw-log-week-count {
display: flex;
flex-direction: column;
align-items: center;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
color: var(--t2);
}
.aw-log-week-count small {
font-size: var(--lc-2, 14px);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--lc-text-t3, var(--t3));
}
.aw-log-chevron {
width: 8px;
height: 8px;
border-right: 1.5px solid var(--t3);
border-bottom: 1.5px solid var(--t3);
transform: rotate(45deg);
transition: transform 0.18s ease;
}
.aw-log-week.is-open .aw-log-chevron {
transform: rotate(-135deg);
}
.aw-log-entries {
padding: 4px 4px 20px;
}
.aw-log-loading,
.aw-log-none {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
color: var(--lc-text-t3, var(--t3));
}
.aw-log-none {
padding: 4px 0;
}
/* One entry. The three kinds are visually distinct on purpose: a week
headed "3 engagements" opens to five entries, and that only reads as
correct if the sacred day and Reflection Day are plainly not
engagements. */
/* ══════════════════════════════════════════════════════════
THIS WEEK'S ENGAGEMENTS — the record's markup, at writing size
══════════════════════════════════════════════════════════
Same entries as the Record panel, one step up the scale everywhere,
because these rows are read while deciding what to change rather than
skimmed. Every number is an existing value from that scale, not a new
one: the kind takes the 0.95rem the serif sacred/reflection rows
already use, the date takes the 0.78rem the kind vacates, and the row
padding moves 14px → 20px, the next 4px-grid step that clears a
textarea. Colours are the theme's tokens throughout, so this follows
whichever light system the panel is on. */
.aw-week-days { margin-top: 28px; }
.aw-week-day {
padding: 20px 0;
border-top: 1px solid var(--b1);
}
.aw-week-day:first-child { border-top: 0; }
.aw-week-day header {
display: flex;
align-items: baseline;
gap: 12px;
}
.aw-week-day .aw-log-kind { font-size: var(--lc-3, 16px); }
.aw-week-day .aw-log-date { font-size: var(--lc-2, 14px); }
.aw-week-day .aw-card-section p { font-size: var(--lc-3, 16px); }
/* Edit sits at the end of the header rather than beside the day, so the
row reads as "Day 2, Saturday" before it reads as something to act on. */
.aw-week-day-edit {
margin-left: auto;
padding: 6px 14px;
border: 1px solid var(--b2);
border-radius: 999px;
background: transparent;
font-family: var(--f-ui);
font-size: var(--lc-2, 14px);
color: var(--t2);
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.aw-week-day-edit:hover {
color: var(--t1);
border-color: hsla(141, 74%, 73%, 0.38);
}
/* A locked or missed engagement says so in words and offers nothing. No
disabled button: there is nothing to press, and a greyed control invites
pressing it to find out why. */
.aw-week-day-fixed {
margin-left: auto;
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
letter-spacing: 1.3px;
text-transform: uppercase;
color: var(--t3);
}
.aw-week-day.is-editing { padding-bottom: 8px; }
/* Reflection Day's questions — each one its own revisable block, so the
Edit sits with the question it changes rather than with the day. */
.aw-week-prompt {
padding: 14px 0;
border-top: 1px solid var(--b1);
}
.aw-week-prompt:first-child {
padding-top: 0;
border-top: 0;
}
.aw-week-prompt-head {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 8px;
}
.aw-week-prompt-text {
font-size: var(--lc-3, 16px);
line-height: 1.56;
color: var(--t2);
}
.aw-week-day-error {
margin-top: 12px;
font-size: var(--lc-2, 14px);
color: hsl(11, 88%, 74%);
}
.aw-log-entry {
padding: 14px 0;
border-top: 1px solid var(--b1);
}
.aw-log-entry:first-child {
border-top: 0;
}
.aw-log-entry header {
display: flex;
align-items: baseline;
gap: 10px;
}
.aw-log-kind {
font-size: var(--lc-2, 14px);
font-weight: 590;
color: var(--t1);
}
.aw-log-date {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
color: var(--lc-text-t3, var(--t3));
}
.aw-log-entry.is-sacred .aw-log-kind,
.aw-log-entry.is-reflection .aw-log-kind {
font-family: var(--f-serif);
font-size: var(--lc-3, 16px);
font-weight: 520;
}
/* A missed day is shown at full weight, with no colour of its own. The
dialog already reports a missed COUNT; dimming the rows it refers to
would turn a record into a verdict. */
.aw-log-said {
margin-top: 9px;
font-size: var(--lc-2, 14px);
line-height: 1.5;
color: var(--t2);
}
.aw-log-said p + p {
margin-top: 7px;
}
.aw-log-chips {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 10px;
}
.aw-log-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid hsla(0, 0%, 100%, 0.13);
border-radius: 999px;
font-size: var(--lc-2, 14px);
color: var(--t2);
}
.aw-log-chip i {
font-style: normal;
font-size: var(--lc-2, 14px);
letter-spacing: 0.04em;
color: var(--lc-text-t3, var(--t3));
}
/* The window, on the beat it governs. Sits between the name and the state
and carries more weight than the state does — the state is a fact about
the past, this is the thing you can still act on. Mono because it is a
clock time, matching every other time in the panel. */
.aw-log-chip b {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
font-weight: 400;
letter-spacing: 0.02em;
color: var(--t2);
}
.aw-log-chip.is-complete {
border-color: hsla(142, 71%, 62%, 0.34);
background: hsla(142, 71%, 45%, 0.10);
}
.aw-log-chip.is-complete i {
color: hsl(142, 77%, 73%);
}
.aw-log-chip.is-not_yet {
border-style: dashed;
}
a.aw-log-chip.is-open {
box-sizing: border-box;
min-height: 44px;
padding: 8px 12px;
color: var(--t1);
text-decoration: none;
border-color: hsla(142, 71%, 62%, 0.5);
background: hsla(142, 71%, 45%, 0.10);
}
a.aw-log-chip.is-open:focus-visible {
outline: 2px solid #86efac;
outline-offset: 3px;
}
@media (max-width: 600px) {
a.aw-log-chip.is-open { width: 100%; }
}
/* Reflection Day — a recording per prompt, every take kept. */
.aw-log-prompt {
margin-top: 12px;
padding-left: 12px;
border-left: 1px solid var(--b2);
}
.aw-log-prompt-text {
font-family: var(--f-serif);
font-size: var(--lc-2, 14px);
line-height: 1.45;
color: var(--t2);
}
.aw-log-transcript {
margin-top: 6px;
font-size: var(--lc-2, 14px);
line-height: 1.5;
color: var(--lc-text-t3, var(--t3));
}
/* Audio stays a button until pressed: the signed URL is fetched on play,
so it can never expire under a list nobody opened. */
.aw-log-audio {
margin-top: 10px;
}
.aw-log-play {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 14px 7px 11px;
border: 1px solid hsla(142, 71%, 62%, 0.30);
border-radius: 999px;
font-size: var(--lc-2, 14px);
color: var(--t1);
background: hsla(142, 71%, 45%, 0.08);
cursor: pointer;
}
.aw-log-play:hover {
border-color: hsla(142, 71%, 62%, 0.52);
}
.aw-log-play[disabled] {
opacity: 0.55;
cursor: default;
}
.aw-log-play i {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid hsl(142, 77%, 73%);
}
.aw-log-play small {
font-family: var(--f-mono);
font-size: var(--lc-2, 14px);
color: var(--lc-text-t3, var(--t3));
}
.aw-log-audio-el {
width: 100%;
max-width: 420px;
height: 36px;
}
html[data-theme="light"] .aw-log-week-open:hover .aw-log-week-dates,
html[data-theme="light"] .aw-log-chip.is-complete i { color: hsl(142, 72%, 29%); }
html[data-theme="light"] .aw-log-chip { border-color: hsla(0, 0%, 0%, 0.14); }
html[data-theme="light"] .aw-log-chip.is-complete {
border-color: hsla(142, 72%, 29%, 0.32);
background: hsla(142, 72%, 40%, 0.07);
}
html[data-theme="light"] .aw-log-play {
border-color: hsla(142, 72%, 29%, 0.30);
background: hsla(142, 72%, 40%, 0.06);
}
html[data-theme="light"] .aw-log-play i { border-left-color: hsl(142, 72%, 29%); }
/* Mobile: the inner scroll is REMOVED, not shrunk. #awBody is already
inside the panel's scroller, so a second scrolling box means a finger
resting on the log scrolls the log while the page stays put — and at
its end the page does not take over cleanly. The list flows instead,
and one-week-open-at-a-time keeps it short. */
@media (max-width: 720px) {
.aw-log {
margin-top: 52px;
padding-top: 22px;
}
.aw-log-weeks {
max-height: none;
overflow-y: visible;
}
.aw-log-week-open {
gap: 12px;
padding: 14px 2px;
}
.aw-log-week-count { display: none; }
.aw-log-audio-el { max-width: none; }
}
/* A modal