/* ============================================================================
Markdown — design system. The single source of truth for every surface.
Flat privacy glass · Schibsted Grotesk · dark-default with a light swap.
Tokens drive everything — restyle by editing the :root variables only.
============================================================================ */
/* ============================================================================
MARKDOWN — privacy glass theme (portable export)
----------------------------------------------------------------------------
The Markdown system design language, packaged as one
drop-in stylesheet. Dark is the default; daylight is a single attribute swap.
HOW TO USE
1. Link this file (or paste it) into your project.
2. Put a theme attribute on the root: (or "light")
3. Toggle in JS:
document.documentElement.setAttribute('data-theme',
document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light');
4. Wrap content in a calm column:
...or full-width dashboard:
5. Use the components: .glass .btn(.solid/.ghost/.sm/.icon/.danger) .field
.eyebrow/.h1/.h2/.body/.meta/.dim .section-header .mc-badge .mc-card
.sx-section / .sx-row / .sx-card / .sx-details
Everything is token-driven — restyle by editing the :root variables only.
Self-contained except the Google Fonts import below (degrades to system-ui).
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&display=swap');
/* ---------------- DARK (default) ---------------- */
:root,
[data-theme='dark'] {
--bg0: #000;
--scene: radial-gradient(120% 110% at 50% 32%, #0a0a0d 0%, #050506 46%, #000 100%);
/* glass fill + highlights */
--g-top: rgba(255, 255, 255, 0.066);
--g-bot: rgba(255, 255, 255, 0.052);
--g-hi: rgba(255, 255, 255, 0.05);
--g-lo: rgba(0, 0, 0, 0.3);
--btn-top: rgba(255, 255, 255, 0.16);
--btn-bot: rgba(255, 255, 255, 0.05);
/* ink (text) */
--ink: #f8f5ef;
--ink-soft: #ece9e2;
--ink-dim: #c6c2b9;
--ink-faint: #5a574f;
/* signal colours */
--sig-standby: #e6b450; /* amber — pending / warning */
--sig-partial: #6fb3ff; /* blue — info / focus ring */
--sig-live: #5bd6a0; /* green — ok / connected */
--risk: #e5675c; /* red — destructive / error */
--shadow: rgba(0, 0, 0, 0.8);
--sep: rgba(255, 255, 255, 0.08);
--sep-hi: rgba(255, 255, 255, 0.18);
/* category accents (identity hues) */
--cat-property: #6fe0b0;
--cat-meeting: #7fb2ff;
--cat-contract: #f2c25b;
--cat-email: #c9a6ff;
--cat-research: #5fd6d0;
/* overlays */
--color-bg-overlay: rgba(255, 255, 255, 0.05);
--color-bg-hover: rgba(255, 255, 255, 0.08);
/* type */
--sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* radii */
--radius: 18px;
--radius-md: 14px;
--radius-sm: 13px;
/* spacing rhythm — one source of truth */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 22px;
--sp-6: 30px;
--sp-8: 34px;
/* motion — one timing vocabulary (every transition/animation reads these) */
--ease: cubic-bezier(0.22, 1, 0.36, 1); /* premium ease-out */
--dur-fast: 0.18s;
--dur: 0.32s;
--dur-slow: 0.6s;
}
/* ---------------- LIGHT (soft daylight) ---------------- */
[data-theme='light'] {
--bg0: #edebe5;
--scene: radial-gradient(120% 110% at 50% 24%, #fdfcf9 0%, #efece6 54%, #e1ded7 100%);
--g-top: rgba(255, 255, 255, 0.56);
--g-bot: rgba(255, 255, 255, 0.5);
--g-hi: rgba(255, 255, 255, 0.38);
--g-lo: rgba(40, 38, 34, 0.06);
--btn-top: rgba(255, 255, 255, 0.9);
--btn-bot: rgba(255, 255, 255, 0.62);
--ink: #201e1a;
--ink-soft: #3b3832;
--ink-dim: #6a665d;
--ink-faint: #bdb8ad;
--sig-standby: #b9791a;
--sig-partial: #2e7fd6;
--sig-live: #1f9e68;
--risk: #c0453f;
--shadow: rgba(60, 56, 50, 0.22);
--sep: rgba(40, 38, 34, 0.1);
--sep-hi: rgba(40, 38, 34, 0.2);
--color-bg-overlay: rgba(40, 38, 34, 0.05);
--color-bg-hover: rgba(40, 38, 34, 0.08);
}
/* ---------------- base ---------------- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--sans);
letter-spacing: -0.01em;
color: var(--ink);
background: var(--bg0);
-webkit-font-smoothing: antialiased;
min-height: 100%;
}
/* premium film grain over everything (optional — remove if you prefer flat) */
body::after {
content: '';
position: fixed;
inset: 0;
z-index: 999;
pointer-events: none;
opacity: 0.04;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* atmosphere — drop these two divs at the top of for the full backdrop:
*/
.mc-scene {
position: fixed;
inset: 0;
z-index: 0;
background: var(--scene);
}
.mc-vig {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(120% 120% at 50% 50%, transparent 62%, var(--g-lo) 100%);
}
/* faint starfield (dark only) — add after .mc-scene */
.mc-stars {
position: fixed;
inset: 0;
z-index: 0;
opacity: 0.5;
pointer-events: none;
background-repeat: no-repeat;
background-image: radial-gradient(1px 1px at 20% 30%, rgba(255, 253, 247, 0.55), transparent),
radial-gradient(1px 1px at 70% 60%, rgba(255, 253, 247, 0.45), transparent),
radial-gradient(1px 1px at 40% 80%, rgba(255, 253, 247, 0.4), transparent),
radial-gradient(1px 1px at 85% 25%, rgba(255, 253, 247, 0.45), transparent),
radial-gradient(1px 1px at 55% 15%, rgba(255, 253, 247, 0.4), transparent),
radial-gradient(1px 1px at 12% 65%, rgba(255, 253, 247, 0.4), transparent),
radial-gradient(1px 1px at 92% 72%, rgba(255, 253, 247, 0.4), transparent),
radial-gradient(1px 1px at 33% 48%, rgba(255, 253, 247, 0.35), transparent);
}
[data-theme='light'] .mc-stars {
display: none;
}
/* ============================================================
GLASS — the core surface. No borders. Gradient fill + heavy
blur + soft inner glow + layered float shadow.
============================================================ */
.glass,
.mc-panel {
background: linear-gradient(168deg, var(--g-top), var(--g-bot));
backdrop-filter: blur(34px) saturate(1.3) brightness(1.04);
-webkit-backdrop-filter: blur(34px) saturate(1.3) brightness(1.04);
border: none;
border-radius: 18px;
box-shadow:
0 24px 64px -26px var(--shadow),
0 4px 18px -10px var(--shadow),
inset 0 0 140px -96px var(--g-hi);
}
.pill {
background: linear-gradient(165deg, var(--g-top), var(--g-bot));
backdrop-filter: blur(26px) saturate(1.3);
-webkit-backdrop-filter: blur(26px) saturate(1.3);
border: none;
border-radius: 999px;
box-shadow: 0 14px 38px -24px var(--shadow), inset 0 0 70px -52px var(--g-hi);
}
/* ============================================================
BUTTONS — every clickable thing is a .btn. The label always
sits fully inside (border-box, inline-flex centred, min-height
+ padding, ~1.1 line-height, nowrap). Variants stack on the base.
.btn quiet glass default
.btn.solid primary — high-contrast ink fill
.btn.ghost quietest — transparent until hover
.btn.sm compact
.btn.icon square icon-only
.btn.danger destructive tint (pairs with any of the above)
============================================================ */
.btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
width: auto;
background: linear-gradient(158deg, var(--btn-top), var(--btn-bot));
color: var(--ink);
border: none;
outline: none;
appearance: none;
-webkit-appearance: none;
border-radius: 13px;
padding: 10px 15px;
min-height: 36px;
font: 500 13px/1.1 var(--sans);
letter-spacing: -0.01em;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 6px 18px -12px var(--shadow);
transition: transform 0.18s, filter 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s;
}
.btn:hover {
transform: translateY(-1px);
filter: brightness(1.12);
}
.btn:active {
transform: translateY(0);
filter: brightness(0.96);
}
.btn:focus-visible {
outline: 2px solid var(--sig-partial);
outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled='true'] {
opacity: 0.45;
cursor: not-allowed;
transform: none;
filter: none;
}
.btn.solid {
background: var(--ink);
color: var(--bg0);
box-shadow: 0 12px 30px -16px var(--shadow);
}
.btn.solid:active {
filter: brightness(0.94);
}
.btn.ghost {
background: transparent;
color: var(--ink-dim);
box-shadow: none;
}
.btn.ghost:hover {
color: var(--ink);
background: var(--color-bg-hover);
transform: translateY(-1px);
filter: none;
}
.btn.sm {
min-height: 28px;
padding: 6px 11px;
border-radius: 10px;
font-size: 12px;
gap: 6px;
}
.btn.icon {
width: 36px;
height: 36px;
min-height: 0;
padding: 0;
border-radius: 11px;
gap: 0;
}
.btn.icon.sm {
width: 28px;
height: 28px;
border-radius: 9px;
}
.btn.danger {
color: var(--risk);
}
.btn.solid.danger {
background: var(--risk);
color: var(--bg0);
}
/* ============================================================
FIELDS — one canonical input (text / textarea / select).
============================================================ */
.field {
box-sizing: border-box;
width: 100%;
display: block;
background: var(--color-bg-overlay);
color: var(--ink);
border: 1px solid var(--sep);
border-radius: var(--radius-sm);
outline: none;
padding: 9px 12px;
min-height: 36px;
font: 400 13px/1.4 var(--sans);
letter-spacing: -0.01em;
transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
appearance: none;
-webkit-appearance: none;
}
textarea.field {
min-height: 84px;
resize: vertical;
line-height: 1.55;
}
select.field {
cursor: pointer;
padding-right: 30px;
background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
background-position: calc(100% - 15px) center, calc(100% - 10px) center;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.field::placeholder {
color: var(--ink-dim);
}
.field:hover {
border-color: var(--sep-hi);
}
.field:focus,
.field:focus-visible {
border-color: var(--sig-partial);
background: var(--color-bg-hover);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig-partial) 16%, transparent);
}
.field:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ============================================================
TYPE SCALE — one named vocabulary. Sizes/weights are fixed.
============================================================ */
.eyebrow {
font-size: 10px;
font-weight: 500;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-dim);
}
.h1,
.title {
font-size: 23px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--ink);
}
.h2 {
font-size: 16px;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--ink);
}
.body {
font-size: 13px;
font-weight: 400;
line-height: 1.6;
color: var(--ink);
}
.meta {
font-size: 11px;
font-weight: 400;
line-height: 1.5;
color: var(--ink-dim);
}
.dim {
color: var(--ink-dim);
}
/* ============================================================
SECTION HEADER — every page opens with this.
eyebrow + title + optional sub on the left; actions on the right.
============================================================ */
.section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-6);
padding-bottom: var(--sp-4);
margin-bottom: var(--sp-6);
border-bottom: 1px solid var(--sep);
}
.section-header__text {
display: flex;
flex-direction: column;
gap: var(--sp-2);
min-width: 0;
}
.section-header__title {
margin: 0;
font-size: 23px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--ink);
}
.section-header__desc {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--ink-dim);
max-width: 640px;
}
.section-header__actions {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-shrink: 0;
}
/* ============================================================
BADGES — status truth. Soft fill, no border.
============================================================ */
.mc-badge {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
line-height: 1.1;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
padding: 3px 8px;
border-radius: 999px;
font-weight: 600;
color: var(--ink-dim);
background: var(--g-top);
}
.mc-badge.ok,
.mc-badge.active,
.mc-badge.online {
color: var(--sig-live);
background: color-mix(in srgb, var(--sig-live) 14%, transparent);
}
.mc-badge.warn,
.mc-badge.pending,
.mc-badge.due {
color: var(--sig-standby);
background: color-mix(in srgb, var(--sig-standby) 14%, transparent);
}
.mc-badge.error,
.mc-badge.risk,
.mc-badge.blocked {
color: var(--risk);
background: color-mix(in srgb, var(--risk) 14%, transparent);
}
/* ============================================================
STAT / METRIC CARDS — glass tiles with a big number.
============================================================ */
.mc-grid {
display: grid;
grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
gap: 14px;
}
.mc-card {
padding: 16px;
border-radius: 18px;
border: none;
transition: 0.16s;
background: linear-gradient(165deg, var(--g-top), var(--g-bot));
backdrop-filter: blur(30px) saturate(1.4) brightness(1.08);
-webkit-backdrop-filter: blur(30px) saturate(1.4) brightness(1.08);
box-shadow: 0 24px 64px -30px var(--shadow), inset 0 0 100px -64px var(--g-hi);
}
.mc-card .lbl {
font-size: 10px;
font-weight: 600;
color: var(--ink-dim);
display: flex;
align-items: center;
justify-content: space-between;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.mc-card .lbl .sd {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ink-faint);
}
.mc-card.ok .lbl .sd {
background: var(--sig-live);
box-shadow: 0 0 9px var(--sig-live);
}
.mc-card.warn .lbl .sd {
background: var(--sig-standby);
box-shadow: 0 0 9px var(--sig-standby);
}
.mc-card .big {
font-size: 25px;
font-weight: 600;
letter-spacing: -0.02em;
margin-top: 13px;
color: var(--ink);
}
.mc-card.ok .big {
color: var(--sig-live);
}
.mc-card.warn .big {
color: var(--sig-standby);
}
.mc-card .sub {
font-size: 10.5px;
color: var(--ink-faint);
margin-top: 6px;
}
/* ============================================================
CLEAN LAYOUT — the calm column / dashboard the app pages use.
widths: --cozy 560 · --comfortable 620 (default reading) · --roomy 680
--full 1360 (full-width dashboard, left-aligned header)
============================================================ */
.sx {
width: 100%;
}
.sx__page {
width: 100%;
margin: 0 auto;
padding: var(--sp-2) 0 var(--sp-8);
}
.sx__page--cozy {
max-width: 560px;
}
.sx__page--comfortable {
max-width: 620px;
}
.sx__page--roomy {
max-width: 680px;
}
.sx__page--full {
max-width: 1360px;
padding-left: var(--sp-4);
padding-right: var(--sp-4);
}
/* reading columns centre their header; the full dashboard left-aligns it */
.sx__page:not(.sx__page--full) .section-header {
text-align: center;
align-items: center;
border-bottom: none;
margin-bottom: var(--sp-8);
}
.sx__page:not(.sx__page--full) .section-header__text {
align-items: center;
}
.sx__page:not(.sx__page--full) .section-header__desc {
max-width: 460px;
margin-inline: auto;
}
.sx__body {
display: flex;
flex-direction: column;
gap: var(--sp-8);
}
/* SECTION — plain header + a list/grid of rows or cards */
.sx-section {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.sx-section__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-4);
padding: 0 var(--sp-2);
}
.sx-section__title {
margin: 0;
}
.sx-section__sub {
margin: 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-dim);
}
.sx-section__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.sx-section__grid {
display: grid;
grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
gap: var(--sp-4);
}
/* ROW — logo/icon · (name + one dim line) · one trailing action */
.sx-row {
display: grid;
grid-template-columns:40px minmax(0,1fr) auto;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-4) var(--sp-2);
border-top: 1px solid var(--sep);
transition: background 0.18s;
text-align: left;
}
.sx-row:first-child {
border-top: none;
}
.sx-row:hover {
background: var(--color-bg-overlay);
border-radius: var(--radius-md);
}
.sx-row.no-lead {
grid-template-columns:minmax(0,1fr) auto;
}
.sx-row__lead {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex: 0 0 auto;
color: var(--ink-dim);
}
.sx-row__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.sx-row__name {
font-size: 14px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--ink);
}
.sx-row__blurb {
font-size: 12.5px;
line-height: 1.45;
color: var(--ink-dim);
overflow-wrap: anywhere;
}
.sx-row__action {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sp-2);
flex: 0 0 auto;
}
/* CARD — a calm glass card for content that isn't a row */
.sx-card {
padding: var(--sp-5);
border-radius: var(--radius);
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.sx-card.is-flat {
background: var(--color-bg-overlay);
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.sx-card__title {
margin: 0;
}
.sx-card__body {
font-size: 13px;
line-height: 1.6;
color: var(--ink);
}
/* DETAILS — a quiet disclosure for technical detail (collapsed by default) */
.sx-details {
margin-top: var(--sp-6);
padding-top: var(--sp-5);
border-top: 1px solid var(--sep);
}
/* narrow surfaces — row stacks its action under the text */
@media (max-width: 440px) {
.sx-row {
grid-template-columns:36px minmax(0,1fr);
grid-template-areas:
'lead text'
'. action';
row-gap: var(--sp-3);
}
.sx-row.no-lead {
grid-template-columns:minmax(0,1fr);
grid-template-areas: 'text' 'action';
}
.sx-row__lead {
grid-area: lead;
}
.sx-row__text {
grid-area: text;
}
.sx-row__action {
grid-area: action;
justify-content: flex-start;
}
.sx-row__blurb {
white-space: normal;
}
}
/* ============================================================
MOTION & ANIMATION — the unified vocabulary. Every animated
surface in the app reads these. Keep new motion on this set so
the whole system breathes the same way.
NOTE on the big visuals: the ambient core visuals and the
cerebral map are Canvas/WebGL (programmatic, not CSS) — they are
NOT in this file, but they paint from the SAME tokens (--ink,
--sig-live/-partial/-standby, --g-top/--g-hi, --bg0) and breathe
on the same cadence (see .mc-glow below), so a port stays unified.
============================================================ */
/* live status dot — the signature "system is alive" pulse */
@keyframes mc-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
/* calm breathing glow — the core's resting cadence, in CSS */
@keyframes mc-breathe {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.04); }
}
@keyframes mc-spin { to { transform: rotate(360deg); } }
@keyframes mc-shimmer { 0% { background-position: -160% 0; } 100% { background-position: 160% 0; } }
@keyframes mc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mc-fade { from { opacity: 0; } to { opacity: 1; } }
/* live indicator — Live */
.mc-live {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
color: var(--sig-live);
}
.mc-live .dot,
.live-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex: 0 0 auto;
background: var(--sig-live);
box-shadow: 0 0 9px 1px currentColor;
animation: mc-pulse 2s ease-in-out infinite;
}
.mc-live.warn { color: var(--sig-standby); }
.mc-live.warn .dot { background: var(--sig-standby); }
.mc-live.info { color: var(--sig-partial); }
.mc-live.info .dot { background: var(--sig-partial); }
/* spinner — (inherits ink colour) */
.spinner {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: -3px;
border-radius: 50%;
border: 2px solid var(--sep-hi);
border-top-color: var(--ink);
animation: mc-spin 0.7s linear infinite;
}
/* skeleton loader — */
.skeleton {
border-radius: var(--radius-sm);
min-height: 14px;
background: linear-gradient(
100deg,
var(--color-bg-overlay) 30%,
var(--color-bg-hover) 50%,
var(--color-bg-overlay) 70%
);
background-size: 220% 100%;
animation: mc-shimmer 1.4s ease-in-out infinite;
}
/* breathing glow — wrap a status element to give it the core's resting pulse */
.mc-glow { animation: mc-breathe 4s ease-in-out infinite; }
/* entrance — add to a panel/section as it mounts */
.rise { animation: mc-rise var(--dur) var(--ease) both; }
.fade-in { animation: mc-fade var(--dur) var(--ease) both; }
/* stagger children: set style="--i:0" ... on each child */
.rise-stagger > * {
animation: mc-rise var(--dur) var(--ease) both;
animation-delay: calc(var(--i, 0) * 0.05s);
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
/* ===================== MARKDOWN shell ===================== */
html,body{height:100%}
.stage{position:relative;z-index:2}
/* =====================================================================
ONE GLASS SYSTEM — clean privacy glass. No borders. No shadows. No lines.
Each pane is defined ONLY by its own milky translucent fill: a soft,
NON-linear radial bloom — lighter near one corner, settling darker toward
the opposite — so it reads as natural frosted glass, not a flat band.
The pane simply sits on the scene. Nothing is drawn around it.
===================================================================== */
:root, [data-theme='dark']{
--pg-flat:rgba(255,255,255,.075);
--pg-foc:rgba(255,255,255,.12);
}
[data-theme='light']{
--pg-flat:rgba(255,255,255,.62);
--pg-foc:rgba(255,255,255,.85);
}
/* GLASS — a flat dark-grey translucent pane + blur. No gradient. No shadow. No border. */
.frost, .card, .gate, .preview-note, .glass, .mc-panel,
.field, .chip, .seg{
background:var(--pg-flat) !important;
backdrop-filter:blur(34px) saturate(1.3);
-webkit-backdrop-filter:blur(34px) saturate(1.3);
border:none !important;
box-shadow:none !important;
}
.card, .frost{ border-radius:var(--radius); }
.field:focus, .field:focus-visible{ background:var(--pg-foc) !important; box-shadow:none !important; }
.btn{ border:none; box-shadow:none !important; }
/* every signal marker uses the one site font — no custom or extra faces anywhere */
.mc-badge, .stat-n, .eyebrow, .hub-h, .area-nm, .j-nm, .gate-head, .meta, .seg button{
font-family:var(--sans) !important;
}
/* no all-caps anywhere — proper capitalisation, normal letter-spacing */
.eyebrow{ text-transform:none !important; letter-spacing:.01em; }
.mc-badge{ text-transform:none !important; letter-spacing:0; }
/* clean surface — no visible scrollbar line running down the panes */
.screen{ scrollbar-width:none; -ms-overflow-style:none; }
.screen::-webkit-scrollbar{ display:none; }
/* screen router — full-viewport cross-fade, only the active one is interactive */
.screen{
position:fixed; inset:0; z-index:2;
display:flex; align-items:center; justify-content:center;
padding:28px; overflow:auto;
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.screen.is-active{ opacity:1; visibility:visible; pointer-events:auto; }
.screen--top{ align-items:flex-start; }
.screen--top > .sx{ width:100%; }
/* preview-mode pill — frosted, no outline (same glass as everything else) */
.preview-note{
position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:60;
font-size:11px; color:var(--ink-dim);
padding:7px 14px; border-radius:999px;
}
/* ===================== SIGN IN ===================== */
.signin{ width:100%; max-width:352px; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); }
.markdown-mark{ width:212px; max-width:74%; height:auto; color:var(--ink); margin-bottom:var(--sp-5); }
.markdown-mark svg{ width:100%; height:auto; display:block; }
.signin-hi{ font-size:27px; font-weight:600; letter-spacing:-.02em; color:var(--ink); margin:0; }
.signin-sub{ font-size:13px; line-height:1.5; color:var(--ink-dim); margin:0; }
.signin-field{ display:flex; gap:var(--sp-2); width:100%; margin-top:var(--sp-4); }
.signin-field .field{ text-align:center; letter-spacing:.2em; }
.signin .btn.icon{ flex:0 0 auto; }
/* ===================== HUB ===================== */
.hub{ width:100%; max-width:560px; }
.hub-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4);
margin-bottom:var(--sp-8); }
.hub-h{ font-size:30px; font-weight:600; letter-spacing:-.025em; color:var(--ink); margin:6px 0 0; }
.hub-actions{ display:flex; align-items:center; gap:var(--sp-3); flex-shrink:0; }
/* areas: open rows. No dividers. Hover lifts a frosted glass highlight. */
.hub-grid{ display:flex; flex-direction:column; gap:var(--sp-2); }
.area{
appearance:none; -webkit-appearance:none; cursor:pointer; text-align:left;
display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:var(--sp-4);
padding:var(--sp-5) var(--sp-4); background:transparent; border:none; box-shadow:none; color:inherit;
border-radius:var(--radius); transition:background var(--dur-fast) var(--ease);
}
.area:hover{ background:var(--color-bg-overlay); }
.area:focus-visible{ outline:2px solid var(--sig-partial); outline-offset:2px; }
.area-ic{ width:54px; height:54px; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); }
.area-ic svg{ width:30px; height:30px; }
.area-tx{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.area-nm{ font-size:19px; font-weight:600; letter-spacing:-.015em; color:var(--ink); }
.area-bl{ font-size:13px; color:var(--ink-dim); overflow-wrap:anywhere; }
.hub-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:var(--sp-8);
padding-top:var(--sp-4); }
/* ===================== DASHBOARD (text-forward) ===================== */
.bar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-6); }
.dash-head{ margin-bottom:var(--sp-8); max-width:760px; }
.dash-title{ font-size:clamp(28px,4vw,40px); font-weight:600; letter-spacing:-.03em; line-height:1.08;
color:var(--ink); margin:var(--sp-3) 0 var(--sp-4); }
.dash-lede{ font-size:15px; line-height:1.6; color:var(--ink-dim); max-width:620px; margin:0; }
/* stat line — plain big numerals + thin typographic rule + label. (Not a box.) */
.statline{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:var(--sp-6) var(--sp-8); margin:var(--sp-8) 0; }
.stat{ display:flex; flex-direction:column; gap:var(--sp-3); }
.stat-n{ font-size:46px; font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--ink); }
.stat-n.accent{ color:var(--sig-standby); }
.stat-rule{ height:1px; background:var(--sep-hi); width:100%; }
.stat-l{ font-size:13px; color:var(--ink-dim); line-height:1.4; }
.block-h{ display:flex; align-items:baseline; justify-content:space-between; margin:var(--sp-8) 0 var(--sp-4); }
.block-h .eyebrow{ font-size:11px; }
/* live-sites — frosted glass panel, no border, items separated by space only */
.dash-list{ padding:var(--sp-3) var(--sp-5); }
.j-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-4); align-items:center;
padding:var(--sp-4) 0; }
.j-nm{ font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.j-meta{ font-size:12.5px; color:var(--ink-dim); margin-top:3px; }
/* attention callout — flat glass, structured: heading, space, short line, CTA */
.gate{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-4);
margin-top:var(--sp-6); padding:var(--sp-6); border-radius:var(--radius); }
.gate-head{ display:flex; align-items:center; gap:var(--sp-3);
font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--sig-standby); }
.gate-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto;
background:var(--sig-standby); box-shadow:none; }
.gate-body{ margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-soft); max-width:560px; }
.gate-cta{ margin-top:var(--sp-2); }
.ro{ font-size:11.5px; color:var(--ink-faint); margin-top:var(--sp-8);
display:inline-flex; align-items:center; gap:7px; }
.empty{ max-width:420px; margin:14vh auto 0; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); }
.empty-ic{ width:64px; height:64px; color:var(--ink-faint); }
.empty-ic svg{ width:100%; height:100%; }
/* ===================== SETTINGS ===================== */
.set-group{ margin-bottom:var(--sp-8); }
.set-group > .eyebrow{ margin-bottom:var(--sp-4); display:block; }
.set-area{ padding:var(--sp-5); border-radius:var(--radius); margin-bottom:var(--sp-4); }
.set-area-top{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.set-area-ic{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); }
.set-area-ic svg{ width:24px; height:24px; }
.set-lbl{ font-size:11px; text-transform:none; letter-spacing:.01em; color:var(--ink-dim);
margin:var(--sp-4) 0 var(--sp-2); display:block; }
.chips{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.chip{ cursor:pointer; appearance:none; color:var(--ink-dim);
width:40px; height:40px; border-radius:var(--radius-sm);
display:inline-flex; align-items:center; justify-content:center; transition:.16s; }
.chip svg{ width:21px; height:21px; }
.chip:hover{ color:var(--ink); }
.chip.is-on{ background:var(--ink) !important; color:var(--bg0); box-shadow:none; }
.swatch{ width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; position:relative; transition:.16s; }
.swatch:hover{ transform:scale(1.08); }
.swatch.is-on::after{ content:'\2713'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-size:15px; font-weight:700; color:rgba(0,0,0,.72); }
.seg{ display:inline-flex; gap:4px; padding:4px; border-radius:var(--radius-sm); }
.seg button{ appearance:none; border:none; cursor:pointer; background:transparent; color:var(--ink-dim);
font:500 13px/1 var(--sans); padding:8px 16px; border-radius:10px; transition:.16s; }
.seg button.is-on{ background:var(--ink); color:var(--bg0); }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.set-pin{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:var(--sp-3); align-items:center; padding:var(--sp-3) 0; }
.set-pin + .set-pin{ border-top:1px solid var(--sep); }
@media (max-width:480px){ .set-pin{ grid-template-columns:minmax(0,1fr) auto; } }
/* ============================================================================
APP COMPONENTS — built on the same tokens. Flat privacy glass throughout:
no borders/shadows/gradients; hairline --sep only where the shell uses it.
============================================================================ */
/* ---- sign-in: numeric keypad + role hint (phone-first) ---- */
.pin-dots{ display:flex; gap:12px; justify-content:center; height:14px; margin-top:var(--sp-2); }
.pin-dot{ width:11px; height:11px; border-radius:50%; background:var(--ink-faint); transition:background var(--dur-fast) var(--ease); }
.pin-dot.on{ background:var(--ink); }
.pin-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); width:100%; max-width:264px; margin-top:var(--sp-2); }
.pin-key{ appearance:none; border:none; cursor:pointer; background:var(--pg-flat); color:var(--ink);
font:500 21px/1 var(--sans); height:58px; border-radius:var(--radius-md); transition:background var(--dur-fast) var(--ease); }
.pin-key:hover{ background:var(--pg-foc); }
.pin-key.ghost{ background:transparent; color:var(--ink-dim); font-size:13px; }
.pin-key.ghost:hover{ background:var(--color-bg-overlay); color:var(--ink); }
.signin-err{ color:var(--risk); font-size:12.5px; min-height:17px; margin:0; }
/* ---- clickable site row + cash strip + feasibility tiles ---- */
.j-row.link{ cursor:pointer; border-radius:var(--radius-md); padding:var(--sp-5) var(--sp-3); margin:0 calc(-1 * var(--sp-3)); transition:background var(--dur-fast) var(--ease); }
.j-row.link:hover{ background:var(--color-bg-overlay); }
.cash-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-5); padding:var(--sp-5); }
.cash-item{ display:flex; flex-direction:column; gap:5px; }
.cash-n{ font-size:23px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.cash-l{ font-size:12px; line-height:1.4; color:var(--ink-dim); }
.cash-item.warn .cash-n{ color:var(--sig-standby); }
.tile-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(244px,1fr)); gap:var(--sp-4); }
.tile{ padding:var(--sp-5); border-radius:var(--radius); cursor:pointer; display:flex; flex-direction:column; gap:var(--sp-2); transition:background var(--dur-fast) var(--ease); }
.tile:hover{ background:var(--pg-foc); }
.tile-nm{ font-size:14.5px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
.tile-meta{ font-size:12px; line-height:1.5; color:var(--ink-dim); }
/* ---- project detail ---- */
.pd-grid{ display:grid; grid-template-columns:1.45fr minmax(0,1fr); gap:var(--sp-8); align-items:start; }
@media(max-width:880px){ .pd-grid{ grid-template-columns:minmax(0,1fr); gap:var(--sp-6); } }
.detail-block{ display:flex; flex-direction:column; gap:var(--sp-4); }
.dl-row{ display:grid; grid-template-columns:132px minmax(0,1fr); gap:var(--sp-4); padding:var(--sp-3) 0; align-items:baseline; }
.dl-row + .dl-row{ border-top:1px solid var(--sep); }
.dl-k{ font-size:12px; color:var(--ink-dim); }
.dl-v{ font-size:13.5px; line-height:1.5; color:var(--ink); }
.trade-tags{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.tag{ font-size:11.5px; color:var(--ink-dim); background:var(--pg-flat); padding:4px 10px; border-radius:999px; }
.dec{ display:grid; grid-template-columns:16px minmax(0,1fr) auto; gap:var(--sp-3); align-items:start; padding:var(--sp-4) 0; }
.dec + .dec{ border-top:1px solid var(--sep); }
.dec-dot{ width:8px; height:8px; border-radius:50%; background:var(--sig-standby); margin-top:5px; }
.dec-nm{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35; }
.dec-meta{ font-size:12px; color:var(--ink-dim); margin-top:3px; line-height:1.45; }
/* ---- budget widget (nested) ---- */
.budget{ padding:var(--sp-5); border-radius:var(--radius); display:flex; flex-direction:column; gap:var(--sp-4); }
.budget-top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); }
.budget-tot{ font-size:12.5px; color:var(--ink-dim); }
.budget-bar{ height:8px; border-radius:999px; background:var(--color-bg-overlay); overflow:hidden; }
.budget-fill{ height:100%; border-radius:999px; background:var(--sig-live); transition:width var(--dur) var(--ease); }
.budget-fill.over{ background:var(--risk); }
.budget-line{ display:grid; grid-template-columns:minmax(0,1fr) auto auto 38px; gap:var(--sp-3); align-items:center; padding:var(--sp-3) 0; font-size:12.5px; }
.budget-line + .budget-line{ border-top:1px solid var(--sep); }
.bl-nm{ color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.bl-a{ color:var(--ink-dim); text-align:right; }
.bl-a.over{ color:var(--risk); }
/* toggle (client-visible) */
.toggle{ position:relative; width:34px; height:20px; border-radius:999px; background:var(--color-bg-overlay); cursor:pointer; transition:background var(--dur-fast) var(--ease); flex:0 0 auto; }
.toggle.on{ background:var(--sig-live); }
.toggle::after{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--ink); transition:transform var(--dur-fast) var(--ease); }
.toggle.on::after{ transform:translateX(14px); background:var(--bg0); }
/* ---- routine ---- */
.routine-top{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-8); align-items:center; }
@media(max-width:680px){ .routine-top{ grid-template-columns:minmax(0,1fr); gap:var(--sp-5); justify-items:start; } }
.ring{ width:124px; height:124px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
background:conic-gradient(var(--sig-live) calc(var(--p,0) * 1%), var(--color-bg-overlay) 0); }
.ring-in{ width:98px; height:98px; border-radius:50%; background:var(--bg0); display:flex; align-items:center; justify-content:center; flex-direction:column; }
.ring-n{ font-size:27px; font-weight:600; color:var(--ink); line-height:1; }
.ring-l{ font-size:10px; color:var(--ink-dim); margin-top:2px; }
.habit{ display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:var(--sp-3); align-items:center; padding:var(--sp-4) 0; }
.habit + .habit{ border-top:1px solid var(--sep); }
.check{ width:22px; height:22px; border-radius:7px; background:var(--color-bg-overlay); display:grid; place-items:center; cursor:pointer; color:transparent; transition:.16s; }
.check.on{ background:var(--sig-live); color:var(--bg0); }
.check svg{ width:14px; height:14px; }
/* touch devices — expand the tap zone of the small toggles to ~44px without changing their look */
@media (pointer:coarse){
.toggle, .check, .pa-check{ position:relative; }
.toggle::before, .check::before, .pa-check::before{ content:''; position:absolute; inset:-11px; border-radius:inherit; }
}
.habit-nm{ font-size:13.5px; color:var(--ink); }
.habit-meta{ font-size:11.5px; color:var(--ink-dim); }
.outcome{ display:grid; grid-template-columns:26px minmax(0,1fr); gap:var(--sp-3); padding:var(--sp-4) 0; align-items:start; }
.outcome + .outcome{ border-top:1px solid var(--sep); }
.outcome-n{ font-size:15px; font-weight:600; color:var(--ink-dim); line-height:1.3; }
.outcome-nm{ font-size:14px; font-weight:600; color:var(--ink); line-height:1.35; }
.outcome-do{ font-size:12.5px; color:var(--ink-dim); margin-top:3px; line-height:1.45; }
.bar-track{ height:8px; border-radius:999px; background:var(--color-bg-overlay); overflow:hidden; }
.bar-val{ height:100%; background:var(--sig-partial); border-radius:999px; transition:width var(--dur) var(--ease); }
.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-h{ font-size:10px; color:var(--ink-faint); text-align:center; padding-bottom:4px; }
.cal-d{ aspect-ratio:1; display:grid; place-items:center; font-size:12px; color:var(--ink-dim); border-radius:9px; }
.cal-d.today{ background:var(--ink); color:var(--bg0); font-weight:600; }
.cal-d.dim{ color:var(--ink-faint); }
.mood{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
.checkin{ font-size:12.5px; color:var(--ink-dim); display:flex; align-items:center; gap:8px; }
/* ---- ventures board ---- */
.board{ display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:var(--sp-4); align-items:start; }
.lane{ display:flex; flex-direction:column; gap:var(--sp-3); }
.lane-h{ display:flex; align-items:center; gap:var(--sp-2); padding:0 var(--sp-2); }
.lane-t{ font-size:13px; font-weight:600; color:var(--ink); }
.lane-c{ font-size:11px; color:var(--ink-dim); }
.idea{ padding:var(--sp-4); border-radius:var(--radius-md); display:flex; flex-direction:column; gap:6px; cursor:pointer; transition:background var(--dur-fast) var(--ease); }
.idea:hover{ background:var(--pg-foc); }
.idea-nm{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.3; }
.idea-bl{ font-size:11.5px; color:var(--ink-dim); line-height:1.45; }
.idea-stall{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--sig-standby); margin-top:2px; }
.idea-stall .dot{ width:6px; height:6px; border-radius:50%; background:var(--sig-standby); }
/* ---- idea capture (8 questions + gate) ---- */
.q{ display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-5); }
.q-l{ font-size:13.5px; font-weight:600; color:var(--ink); }
.q-h{ font-size:11.5px; color:var(--ink-dim); line-height:1.4; }
/* ---- overseer ---- */
.tok-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:var(--sp-3); }
.tok{ display:flex; flex-direction:column; gap:6px; }
.tok-sw{ height:40px; border-radius:var(--radius-sm); }
.tok-n{ font-size:11px; color:var(--ink-dim); }
.tok-h{ font-size:10.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.feat{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-3); padding:var(--sp-4) 0; align-items:center; }
.feat + .feat{ border-top:1px solid var(--sep); }
.feat-nm{ font-size:13.5px; color:var(--ink); }
.conn{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:var(--sp-3); align-items:center; padding:var(--sp-4) 0; }
.conn + .conn{ border-top:1px solid var(--sep); }
.conn-ic{ color:var(--ink-dim); display:inline-flex; }
.conn-nm{ font-size:13.5px; color:var(--ink); }
/* ---- danger zone (factory reset) ---- */
.danger-zone{ padding:var(--sp-5); border-radius:var(--radius); display:flex; flex-direction:column; gap:var(--sp-3); }
.danger-zone .h2{ color:var(--risk); margin:0; }
/* ---- command palette ---- */
.cmd-fab{ position:fixed; right:18px; bottom:18px; z-index:50; }
.cmd-overlay{ position:fixed; inset:0; z-index:80; display:none; align-items:flex-start; justify-content:center;
padding:14vh var(--sp-4) 0; background:rgba(0,0,0,.42); }
.cmd-overlay.on{ display:flex; animation:mc-fade var(--dur-fast) var(--ease); }
.cmd{ width:100%; max-width:560px; border-radius:var(--radius); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); }
.cmd-in{ font:500 16px/1.4 var(--sans) !important; }
.cmd-hint{ font-size:12px; color:var(--ink-dim); display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }
.cmd-res{ display:flex; flex-direction:column; gap:4px; max-height:42vh; overflow:auto; }
.cmd-r{ padding:var(--sp-3); border-radius:var(--radius-sm); font-size:13px; color:var(--ink); cursor:pointer; line-height:1.45; }
.cmd-r:hover{ background:var(--color-bg-overlay); }
.cmd-r .dim{ font-size:12px; }
.kbd{ font:500 11px/1 var(--sans); padding:3px 6px; border-radius:6px; background:var(--color-bg-overlay); color:var(--ink-dim); }
/* ---- toast ---- */
.toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); z-index:90;
padding:10px 18px; border-radius:999px; font-size:13px; color:var(--ink); background:var(--pg-foc);
backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); opacity:0;
transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events:none; }
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
/* ---- segmented filter ---- */
.filter{ display:inline-flex; gap:4px; padding:4px; border-radius:var(--radius-sm); }
.filter button{ appearance:none; border:none; cursor:pointer; background:transparent; color:var(--ink-dim);
font:500 12.5px/1 var(--sans); padding:7px 13px; border-radius:9px; transition:.16s; }
.filter button.on{ background:var(--ink); color:var(--bg0); }
/* ---- animated brand logo (.markdown|) ---- */
.md-logo{ display:inline-block; line-height:0; color:var(--ink); }
.md-logo svg{ height:100%; width:auto; display:block; }
.md-logo.blink .mdcaret{ animation:md-blink 1.06s step-end infinite; }
@keyframes md-blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .md-logo .mdcaret{ animation:none !important; } }
.md-logo--signin{ height:54px; margin-bottom:var(--sp-5); cursor:pointer; }
@media(max-width:440px){ .md-logo--signin{ height:42px; } }
.md-logo--head{ height:18px; opacity:.9; }
.md-logo--foot{ height:14px; vertical-align:-2px; }
.outcome-n.done{ color:var(--sig-live); }
.outcome-n svg{ width:18px; height:18px; }
/* ---- keep detail content inside the glass (no overflow past the rounded edge) ---- */
.detail-block{ min-width:0; }
.dl-v{ min-width:0; overflow-wrap:anywhere; }
.dec > div{ min-width:0; }
.dec-nm, .dec-meta{ overflow-wrap:anywhere; }
.budget-line{ min-width:0; }
.frost.card, .frost.budget{ overflow:hidden; }
/* ---- property photos + site data (feasibility / project detail) ---- */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:var(--sp-3); }
.gallery a{ display:block; line-height:0; border-radius:var(--radius-md); overflow:hidden; }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--color-bg-overlay);
transition:transform var(--dur) var(--ease); }
.gallery a:hover img{ transform:scale(1.04); }
.site-link{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--sig-partial);
margin-top:var(--sp-2); cursor:pointer; }
.site-link svg{ width:14px; height:14px; }
/* ---- smooth animated ring (conic sweep ramps instead of jumping) ---- */
@property --p { syntax:''; initial-value:0; inherits:false; }
.ring{ transition: --p var(--dur-slow) var(--ease); }
/* ---- left sidebar navigation ---- */
:root{ --nav-w:236px; }
.sidebar{ position:fixed; left:0; top:0; bottom:0; width:var(--nav-w); z-index:45;
display:flex; flex-direction:column; gap:3px; padding:var(--sp-5) var(--sp-4);
background:var(--pg-flat); backdrop-filter:blur(34px) saturate(1.3); -webkit-backdrop-filter:blur(34px) saturate(1.3); }
.sidebar-logo{ height:19px; margin:var(--sp-2) var(--sp-2) var(--sp-6); cursor:pointer; }
.nav-item{ appearance:none; border:none; background:transparent; cursor:pointer; text-align:left; width:100%;
display:grid; grid-template-columns:22px minmax(0,1fr); align-items:center; gap:var(--sp-3);
padding:10px var(--sp-3); border-radius:var(--radius-md); color:var(--ink-dim);
font:500 13.5px/1.1 var(--sans); transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.nav-item:hover{ background:var(--color-bg-overlay); color:var(--ink); }
.nav-item.on{ background:var(--color-bg-hover); color:var(--ink); }
.nav-ic{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-faint); }
.nav-item:hover .nav-ic, .nav-item.on .nav-ic{ color:var(--accent, var(--ink)); }
.nav-ic svg{ width:19px; height:19px; }
.nav-sep{ height:1px; background:var(--sep); margin:var(--sp-3) var(--sp-2); }
.nav-back{ color:var(--ink-dim); font-size:12.5px; margin-bottom:2px; }
.nav-back .nav-ic svg{ width:16px; height:16px; }
.nav-folder{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3) var(--sp-4); font:600 15px/1.15 var(--sans); letter-spacing:-.01em; color:var(--ink); }
.nav-folder .nav-ic{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; color:var(--accent, var(--ink)); }
.nav-folder .nav-ic svg{ width:20px; height:20px; }
.nav-label{ font-size:10px; letter-spacing:.04em; color:var(--ink-faint); padding:var(--sp-2) var(--sp-3) 4px; }
.nav-sec.on .nav-ic, .nav-sec:hover .nav-ic{ color:var(--accent, var(--ink)); }
.nav-new{ color:var(--ink); } .nav-new .nav-ic{ color:var(--sig-live); }
.nav-pin .nav-ic{ color:var(--cat-research); }
.pd-titlebar{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); }
.nav-spacer{ flex:1; }
.nav-toggle{ position:fixed; top:14px; left:14px; z-index:47; display:none; }
.sidebar-scrim{ position:fixed; inset:0; z-index:44; background:rgba(0,0,0,.45); display:none; }
.sidebar-scrim.on{ display:block; }
/* offset the screens to clear the sidebar (never on sign-in) */
body:not([data-screen='signin']) .screen{ left:var(--nav-w); }
body[data-screen='signin'] .sidebar, body[data-screen='signin'] .nav-toggle, body[data-screen='signin'] .sidebar-scrim{ display:none !important; }
@media(max-width:900px){
.sidebar{ width:280px; transform:translateX(-100%); transition:transform var(--dur) var(--ease); }
.sidebar.open{ transform:none; }
body:not([data-screen='signin']) .screen{ left:0; padding-top:60px; }
body:not([data-screen='signin']) .nav-toggle{ display:inline-flex; }
.sidebar.open ~ .nav-toggle{ display:none; }
}
.cash-cta{ margin-top:9px; align-self:flex-start; gap:5px; }
.cash-cta svg{ width:13px; height:13px; }
/* ---- sign-in screen ---- */
.signin{ max-width:380px; gap:var(--sp-4); }
.md-logo--signin{ height:60px; margin-bottom:var(--sp-8); cursor:default; }
@media(max-width:440px){ .md-logo--signin{ height:46px; margin-bottom:var(--sp-6); } }
.signin-hi{ font-size:19px; font-weight:500; letter-spacing:-.01em; color:var(--ink); margin:0; }
.signin-sub{ font-size:13px; line-height:1.5; color:var(--ink-dim); margin:2px 0 0; }
.signin-input{ width:220px; max-width:100%; text-align:center; letter-spacing:.5em; font-size:17px;
padding:11px 12px 11px calc(12px + .5em); margin-top:var(--sp-4); }
.signin-input::placeholder{ letter-spacing:normal; color:var(--ink-faint); }
.signin-input.checking{ animation:pin-pulse 1s ease-in-out infinite; }
@keyframes pin-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
.signin-help{ margin-top:var(--sp-6); max-width:320px; }
.signin-home{ position:fixed; top:22px; left:26px; z-index:6; line-height:0; color:var(--ink); opacity:.85;
transition:opacity var(--dur-fast) var(--ease); }
.signin-home:hover{ opacity:1; }
.signin-home .md-logo{ height:18px; display:block; }
/* ---- overseer: compact token legend + wrap fixes ---- */
.tok-list{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); }
.tok{ display:inline-flex; align-items:center; gap:8px; min-width:0; }
.tok-dot{ width:15px; height:15px; border-radius:5px; flex:0 0 auto; }
.tok-n{ font-size:12.5px; color:var(--ink); }
.tok-h{ font-size:11px; color:var(--ink-faint); }
.conn-nm{ min-width:0; overflow-wrap:anywhere; }
.feat-nm{ min-width:0; overflow-wrap:anywhere; }
/* ============================================================================
NO-CLIP SYSTEM — authoritative. Keeps content inside every glass panel and
never lets it get cut off, on any surface present OR future. Four guarantees,
written at low specificity (:where / single class) so a component can still
override intentionally:
SHRINK grid + flex items may shrink below their intrinsic width
WRAP text reflows, including long unbroken strings/URLs
HOLD interactive controls keep their content size (never squashed)
CONTAIN glass panels clip any stray pixel to their rounded shape
This replaces the old one-off patches — fix the class of bug, not each case.
============================================================================ */
/* SHRINK — the default min-width:auto on grid/flex children is what pushes
siblings out of a box. Zero it everywhere inside a page or the sidebar. */
:where(.sx__page, .sidebar) :where(div, p, span, a, h1, h2, h3, label, input, textarea, select, ul, li) { min-width: 0; }
/* WRAP — text anywhere in a page (or the editor modal) wraps rather than
overflowing, long unbroken strings/URLs included. nowrap controls are
unaffected — overflow-wrap only acts where wrapping is allowed. */
:where(.sx__page, .editor, .cmd) :where(p, span, div, a, h1, h2, h3, li, strong, em, label, button) { overflow-wrap: anywhere; }
/* text-style buttons (task names) and dense meta rows shrink + wrap */
.pa-task-name, .pa-task-meta, .pa-task-meta > * { min-width: 0; white-space: normal; }
/* any inline-styled flex button row wraps instead of overflowing on narrow screens */
[style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap; }
/* HOLD — controls keep their intrinsic size and never wrap mid-label, so they
can't be squashed by the SHRINK rule above. */
.btn, .mc-badge, .tag, .chip, .swatch, .toggle, .check, .pa-check, .seg, .seg button,
.filter, .filter button, .pin-key, .cash-cta, .pa-cat, .pa-new, .dec-dot, .gate-dot, .tok-dot,
.nav-ic, .ring, .check svg { flex: 0 0 auto; }
.btn, .seg button, .filter button, .nav-item { white-space: nowrap; }
/* CONTAIN — glass panels clip stray content to their rounded box. Scrollable
surfaces (the editor modal, the command results) keep their own scroll. */
.frost, .card, .glass, .mc-card, .mc-panel, .pa-card, .budget, .gate, .tile, .pill { overflow: hidden; }
.editor, .cmd-res { overflow: auto; }