/* Marketing Desk — layout only. Every colour, radius, shadow and step is a token;
   nothing here re-declares a design decision.

   THE SHELL, in one paragraph. The window is one tinted plane (--sidebar) and
   that tint is the app background. The sidebar sits directly on it with no
   surface, no border and nothing boxing it in. The content lives in one rounded
   pane inset from all four edges on the plain page colour (--background), with a
   single hairline edge and no shadow. The insets are deliberately uneven —
   10px top, 8px left and right, 14px bottom — so the pane reads as seated rather
   than mis-measured. The pane is the only scroll owner; the tint and the sidebar
   never move.

   Inside the pane there is no second inset and no card-in-card. Regions are
   full-bleed bands divided by hairline rules that run the whole width, so they
   have no corners of their own — the pane owns the only rounded corners in the
   chrome, and rounding elsewhere belongs to controls (buttons, badges, chips,
   meters, avatars), never to a box drawn around content. Content groups are
   separated by the rule and the gutter; never by a bordered card and never by
   elevation, because the frame has already spent both of those axes.

   Breakpoints, declared once for the whole shell: 1280 sidebar at 240px · 1024
   icon rail at 60px · 768 drawer over the pane · below 768 the pane drops its
   inset and its radius and goes flush. Whenever the sidebar collapses its track
   leaves the grid entirely, so the pane always takes the full remaining width. */

.md-shell{--gutter-page:var(--space-6);--pane-top:10px;--pane-side:8px;--pane-bottom:14px;display:grid;height:100dvh;overflow:hidden;grid-template-columns:240px minmax(0,1fr);grid-template-rows:minmax(0,1fr);background:var(--sidebar);color:var(--foreground)}
.md-shell[data-mode=rail]{grid-template-columns:60px minmax(0,1fr)}
.md-shell[data-mode=drawer]{grid-template-columns:minmax(0,1fr)}

/* The sidebar sits on the tint: no plane of its own, no dividing border. */
.md-shell .md-nav{width:100%;background:transparent;border-inline-end:0}
.md-shell[data-mode=rail] .md-nav .o-sidebar__button{justify-content:center;padding-inline:0}
.md-shell[data-mode=rail] .md-nav .o-sidebar__group,.md-shell[data-mode=rail] .md-nav .o-sidebar__header,.md-shell[data-mode=rail] .md-nav .o-sidebar__footer{padding-inline:var(--space-2)}
/* The one place the sidebar takes a surface: as a drawer it floats over the pane
   and needs to read as a layer. */
.md-shell[data-mode=drawer] .md-nav{position:fixed;inset-block:0;inset-inline-start:0;z-index:60;width:17rem;background:var(--sidebar);box-shadow:var(--shadow-lg)}
.md-drawer-scrim{position:fixed;inset:0;z-index:55;background:rgb(0 0 0/32%)}

/* The pane: inset, rounded, one hairline, no shadow, and the only thing that
   scrolls. */
/* width:auto matters — the design system's .o-sidebar-inset is width:100%, and a
   percentage width leaves the inline margins nothing to take from, so the pane
   would hang its right edge past the window and the tint gap would only appear
   on three sides. */
.md-shell .md-pane{width:auto;min-width:0;margin:var(--pane-top) var(--pane-side) var(--pane-bottom);overflow-y:auto;overflow-x:hidden;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--background);box-shadow:none;overscroll-behavior:contain}
@media(max-width:767px){.md-shell .md-pane{margin:0;border:0;border-radius:0}}

/* ── Sidebar contents ─────────────────────────────────────────────────────── */
.md-nav__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.md-brand{display:flex;min-width:0;align-items:center;gap:var(--space-2);padding:var(--space-1)}
.md-brand__mark{display:inline-flex;width:28px;height:28px;flex:none;align-items:center;justify-content:center;border-radius:var(--radius-lg);background:var(--foreground);color:var(--background);font-family:var(--font-heading);font-weight:var(--font-weight-bold);font-size:var(--text-sm)}
.md-brand__text{display:flex;min-width:0;flex-direction:column}
.md-brand__name{font-family:var(--font-heading);font-weight:var(--font-weight-semibold);font-size:var(--text-sm);line-height:1.2}
.md-brand__workspace{font-size:var(--text-xs);color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-nav .fd-floating-anchor{width:100%}
.md-rail-dot{pointer-events:none;position:absolute;inset-inline-end:10px;top:8px;width:6px;height:6px;border-radius:var(--radius-full);background:var(--warning);box-shadow:0 0 0 2px var(--sidebar)}
.md-account{display:flex;width:100%;align-items:center;gap:var(--space-2);border:0;border-radius:var(--radius-lg);background:transparent;padding:var(--space-1-5);text-align:left;font:inherit;color:inherit;cursor:pointer}
.md-account:hover{background:var(--sidebar-accent)}
.md-account--rail{justify-content:center}
.md-account__text{display:flex;min-width:0;flex-direction:column}
.md-account__name{font-size:var(--text-sm);font-weight:var(--font-weight-medium);line-height:1.2}
.md-account__role{font-size:var(--text-xs);color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-account .fd-icon{margin-inline-start:auto;color:var(--muted-foreground)}

/* ── Pane header: utility only, sticky inside the pane's own scroll ───────── */
.md-pane-head{position:sticky;top:0;z-index:40;display:flex;height:var(--header-height);align-items:center;gap:var(--space-2);border-bottom:1px solid var(--border);background:var(--background);padding-inline:var(--gutter-page)}
.md-search{flex:1;max-width:22rem;min-width:0}
.md-search input{cursor:pointer}
.md-search-btn{display:none}
.md-pane-head__utility{margin-inline-start:auto;display:flex;align-items:center;gap:var(--space-1)}
.md-utility{position:relative;display:inline-flex}
.md-badge-dot{pointer-events:none;position:absolute;inset-inline-end:-2px;top:-2px;display:flex;height:16px;min-width:16px;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--destructive);padding-inline:4px;font-size:10px;font-weight:var(--font-weight-medium);color:var(--color-white);box-shadow:0 0 0 2px var(--background)}
.md-notify{padding:var(--space-2)}
.md-notify__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-1) var(--space-2) var(--space-2)}
.md-notify__list{display:flex;flex-direction:column;gap:2px}
.md-notify__item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--space-3);border:0;border-radius:var(--radius-lg);background:transparent;padding:var(--space-2);text-align:left;font:inherit;color:inherit;cursor:pointer}
.md-notify__item:hover{background:var(--accent)}
.md-notify__title{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.md-notify__body{grid-column:1;font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.md-notify__time{grid-row:1;grid-column:2;font-size:var(--text-xs);color:var(--muted-foreground)}

/* ── Bands: the pane's only structural device ─────────────────────────────── */
.md-page-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-6) var(--gutter-page)}
.md-page-header>div:first-child{min-width:0}
/* A trail belongs on one line: wrapping it mid-trail beside a title reads as a
   layout accident, so it truncates instead. */
.md-page-header .o-breadcrumb__list{flex-wrap:nowrap;min-width:0;overflow:hidden;white-space:nowrap}
.md-page-header .o-breadcrumb__item{min-width:0}
.md-page-header .o-breadcrumb__page{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-page-title{margin:var(--space-1) 0 0;font-family:var(--font-heading);font-weight:var(--font-weight-semibold);font-size:var(--text-3xl);line-height:1.1;letter-spacing:var(--tracking-tight)}
.md-page-header__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
/* A band IS a card. The pane keeps its single hairline and no shadow; every group
   of content inside it sits on the card surface with the smallest shadow in the
   system — the same treatment the tile grid uses, so a record screen and a tiled
   screen read as one product. Full-bleed children (tables, filter bars, bulk
   bars) keep their own gutters, which is why a flush band drops its inline
   padding rather than nesting a second one. */
.md-band{--gutter-page:var(--space-5);margin:var(--space-4) var(--space-6);border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);box-shadow:var(--shadow-xs);padding:var(--space-5)}
.md-band--flush{padding-inline:0;overflow:hidden}
.md-band--tight{padding-block:var(--space-4)}
/* A card with corners needs its square children clipped, or a hover row paints
   over the radius. */
.md-band--fill{display:flex;min-height:0;flex-direction:column;padding:0;overflow:hidden}
/* Inside a card the page gutter is too wide for a full-bleed child: the card has
   already spent it on its own margin, so flush children take the card gutter. */
.md-band--flush .md-band__head,.md-band--flush .md-filters,.md-band--flush .md-bulk,.md-band--flush .md-tablefoot{padding-inline:var(--space-5)}
.md-band--flush .md-tablewrap .o-table th:first-child,.md-band--flush .md-tablewrap .o-table td:first-child{padding-inline-start:var(--space-5)}
.md-band--flush .md-tablewrap .o-table th:last-child,.md-band--flush .md-tablewrap .o-table td:last-child{padding-inline-end:var(--space-5)}
.md-band--flush .md-figures>*{padding-inline:var(--space-5)}
.md-band__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-4)}
.md-band--flush .md-band__head{padding-inline:var(--gutter-page)}
.md-band__title{margin:0;font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight)}
.md-band__note{margin:0;font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}

/* Figures: divided by the rule, never boxed. Always rendered four to a row (or
   three where the record has three), so the row resets are known. */
.md-figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.md-band .md-figures>*{padding-block:var(--space-2)}
.md-figures--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.md-figures>*{display:flex;min-width:0;flex-direction:column;gap:var(--space-1);border-inline-start:1px solid var(--border);padding:var(--space-5) var(--gutter-page)}
.md-figures>*:first-child{border-inline-start:0}
.md-pane>.md-figures{--gutter-page:var(--space-5);margin:var(--space-4) var(--space-6);border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);box-shadow:var(--shadow-xs);padding-block:var(--space-2)}
.md-figure__label{font-size:var(--text-sm);color:var(--muted-foreground)}
.md-figure{font-family:var(--font-heading);font-weight:var(--font-weight-semibold);font-size:var(--text-3xl);line-height:1.1;letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums}
.md-figure__qualifier{font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.md-scope{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);padding:var(--space-4) var(--gutter-page)}
.md-scope__control{display:flex;align-items:center;gap:var(--space-2)}
.md-scope__label{font-size:var(--text-sm);color:var(--muted-foreground)}
.md-scope__note{margin:0;font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}
.md-scope__select{display:block;width:11rem}

/* ── The day chart ────────────────────────────────────────────────────────── */
.md-chartbox{display:flex;flex-direction:column;gap:var(--space-2)}
.md-chart{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:stretch;gap:3px;height:11rem;border-bottom:1px solid var(--border);padding-bottom:2px}
.md-chart>.fd-floating-anchor{height:100%;min-width:0}
.md-chart__col{display:flex;height:100%;width:100%;min-width:0;flex-direction:column;justify-content:flex-end;gap:1px}
.md-chart__seg{display:block;width:100%;border-radius:var(--radius-xs) var(--radius-xs) 0 0;background:var(--foreground)}
.md-chart__seg--soft{background:var(--muted-foreground);opacity:.55}
.md-chart__seg--warn{background:var(--warning)}
.md-chart__seg--empty{height:2px;background:var(--muted)}
.md-chart__axis{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;overflow:hidden;font-size:var(--text-2xs);color:var(--muted-foreground);text-align:center}
.md-chart__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-4)}
.md-legend{display:flex;flex-wrap:wrap;gap:var(--space-3);font-size:var(--text-xs);color:var(--muted-foreground)}
.md-legend__item{display:inline-flex;align-items:center;gap:var(--space-1-5)}
.md-legend__swatch{display:inline-block;width:10px;height:10px;flex:none;border-radius:3px;background:var(--foreground)}
.md-legend__swatch--soft{background:var(--muted-foreground);opacity:.55}
.md-tipgrid{display:grid;grid-template-columns:auto auto;gap:2px var(--space-3);font-variant-numeric:tabular-nums}
.md-tipgrid dt{opacity:.7}
.md-tipgrid dd{margin:0;text-align:right}

/* ── Two-up regions: divided by the rule that runs between them ──────────── */
.md-pair{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.md-pair>*{min-width:0;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);box-shadow:var(--shadow-xs);padding:var(--space-5)}
@media(max-width:900px){.md-pair{grid-template-columns:minmax(0,1fr)}}
.md-cols{display:grid;align-items:start;gap:var(--space-4);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.md-cols>*{min-width:0}
@media(max-width:900px){.md-cols{grid-template-columns:minmax(0,1fr)}}

/* ── Lists ────────────────────────────────────────────────────────────────── */
.md-list{display:flex;flex-direction:column}
.md-list__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2) var(--space-4);border-bottom:1px solid var(--border);padding-block:var(--space-4)}
.md-list__row:first-child{padding-top:0}
.md-list__row:last-child{border-bottom:0;padding-bottom:0}
.md-list__main{display:flex;min-width:0;flex-direction:column;gap:2px}
.md-list__side{display:flex;flex-direction:column;gap:2px;text-align:right}
.md-list__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.md-empty{margin:0;font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}

/* ── Tables: hairline rows, gutters on the outer cells ───────────────────── */
/* A ten-column table only overflows because the system's cells are nowrap; the
   long ones here are prose (a name, an audience, a template), and prose wraps.
   Numbers, clocks, badges and the action column keep nowrap — a wrapped figure
   or a two-line status is harder to read than a narrow column. So the table fits
   its card on desktop, and the scroller stays for the widths where even wrapped
   columns cannot. */
.md-tablewrap{min-width:0;overflow-x:auto}
.md-tablewrap .o-table{min-width:100%;table-layout:auto}
.md-tablewrap .o-table th,.md-tablewrap .o-table td{white-space:normal;overflow-wrap:anywhere;padding-inline:var(--space-3)}
.md-tablewrap .o-table th.md-num,.md-tablewrap .o-table td.md-num,.md-tablewrap .o-table th.md-actions-head,.md-tablewrap .o-table td.md-actions{white-space:nowrap;overflow-wrap:normal}
.md-tablewrap .o-table td .o-badge,.md-tablewrap .o-table td .md-clock,.md-tablewrap .o-table td .md-chip{white-space:nowrap}
.md-tablewrap .o-table th:first-child,.md-tablewrap .o-table td:first-child{padding-inline-start:var(--gutter-page)}
.md-tablewrap .o-table th:last-child,.md-tablewrap .o-table td:last-child{padding-inline-end:var(--gutter-page)}
.md-record{display:flex;flex-direction:column;gap:1px}
.md-record__name{font-weight:var(--font-weight-medium)}
.md-record__meta{font-size:var(--text-xs);color:var(--muted-foreground)}
.md-record__meta code{font-family:var(--font-mono)}
.md-num,.md-actions,.md-actions-head{text-align:right}
.md-amount{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium)}
.md-muted{color:var(--muted-foreground)}
.md-sub{display:block;font-size:var(--text-xs);color:var(--muted-foreground)}
.md-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1-5)}
.md-actions__row{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2)}
.md-footnote{font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.md-tablefoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-4);border-top:1px solid var(--border);padding:var(--space-4) var(--gutter-page)}
.md-row--recessed{background:var(--muted);color:var(--muted-foreground)}
.md-row--recessed .md-record__name{font-weight:var(--font-weight-normal);color:var(--muted-foreground)}
.md-clock{font-size:var(--text-xs)}
.md-clock--warning{color:var(--warning-foreground)}
.md-clock--danger{color:var(--destructive-foreground)}

/* ── Filters and bulk bar ────────────────────────────────────────────────── */
.md-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--gutter-page)}
.md-filters__text{flex:1;min-width:11rem;max-width:20rem}
.md-filters__select{display:block;width:12rem;flex:none}
.md-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);border-top:1px solid var(--border);background:var(--accent);padding:var(--space-3) var(--gutter-page)}
.md-bulk__count{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.md-bulk__actions{margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* ── Journeys: list-detail, divided by one vertical rule ─────────────────── */
.md-split{display:grid;min-height:0;grid-template-columns:22rem minmax(0,1fr)}
.md-split>*{min-width:0}
.md-split__detail{border-inline-start:1px solid var(--border)}
.md-picklist{display:flex;flex-direction:column}
.md-pick{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--space-3);border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;padding:var(--space-4) var(--gutter-page);text-align:left;font:inherit;color:inherit;cursor:pointer}
.md-pick:hover{background:var(--accent)}
.md-pick--on{background:var(--accent)}
.md-pick--recessed{background:var(--muted);color:var(--muted-foreground)}
.md-pick__name{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.md-pick__meta{grid-column:1;font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.md-pick__side{grid-row:1;grid-column:2;display:flex;align-items:center;gap:var(--space-2)}
.md-facts{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);margin:0;padding:var(--space-4) var(--gutter-page);border-top:1px solid var(--border);font-size:var(--text-sm)}
.md-facts>div{display:flex;min-width:0;flex-direction:column;gap:1px}
.md-facts dt{font-size:var(--text-xs);color:var(--muted-foreground)}
.md-facts dd{margin:0}

/* The step ladder: the journey drawn as the sequence it is. The rail is one
   line, not a box, and each step's drop-off is a meter rather than a cell. */
.md-ladder{display:flex;flex-direction:column}
.md-step{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--space-2) var(--space-4);padding:var(--space-4) var(--gutter-page) var(--space-4) var(--space-5)}
.md-step+.md-step{border-top:1px solid var(--border)}
.md-step__rail{position:relative;display:flex;justify-content:center}
.md-step__dot{position:relative;z-index:1;display:inline-flex;width:28px;height:28px;flex:none;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius-full);background:var(--background);color:var(--muted-foreground)}
.md-step__line{position:absolute;inset-block:-1rem;inset-inline-start:calc(50% - .5px);width:1px;background:var(--border)}
.md-step:first-child .md-step__line{inset-block-start:50%}
.md-step:last-child .md-step__line{inset-block-end:50%}
.md-step__body{display:flex;min-width:0;flex-direction:column;gap:var(--space-2)}
.md-step__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-2)}
.md-step__label{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.md-step__kind{font-size:var(--text-xs);color:var(--muted-foreground)}
.md-step__side{display:flex;flex-direction:column;gap:1px;text-align:right}
.md-step--recessed .md-step__label{color:var(--muted-foreground);font-weight:var(--font-weight-normal)}
.md-meter{display:flex;flex-direction:column;gap:var(--space-1)}
.md-bar{position:relative;display:flex;height:6px;width:100%;overflow:hidden;border-radius:var(--radius-full);background:var(--muted)}
.md-bar__fill{display:block;height:100%;background:var(--foreground)}
.md-bar__fill--soft{background:var(--muted-foreground);opacity:.5}
.md-bar__fill--warn{background:var(--warning)}
.md-bar__fill--danger{background:var(--destructive)}

/* ── Audiences ───────────────────────────────────────────────────────────── */
.md-aud{display:flex;flex-direction:column;gap:var(--space-3);border-bottom:1px solid var(--border);padding:var(--space-6) var(--gutter-page)}
.md-aud:last-child{border-bottom:0}
.md-aud__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-4)}
.md-aud__name{margin:0;font-family:var(--font-heading);font-size:var(--text-base);font-weight:var(--font-weight-semibold)}
.md-aud__size{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:var(--font-weight-semibold);line-height:1;letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums}
.md-rule{margin:0;font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}
.md-sample{display:flex;flex-direction:column;gap:var(--space-1-5);margin:0;padding:0;list-style:none}
.md-sample li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-2);font-size:var(--text-sm)}
.md-sample__email{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted-foreground)}
.md-sample__note{font-size:var(--text-xs);color:var(--muted-foreground)}
.md-chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1-5)}

/* ── Small shared bits ──────────────────────────────────────────────────── */
.md-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.md-spread{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
/* ui-runtime's own classes — the shared render helpers emit these, and lib/ is
   byte-identical across the templates here, so the selectors keep its prefix. */
.fd-icon{display:inline-flex;flex:none;align-items:center;justify-content:center}
.fd-floating-anchor{display:inline-flex}
.fd-command{max-width:36rem;overflow:hidden}
.md-link{border:0;background:transparent;padding:0;font:inherit;color:inherit;text-align:left;text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:3px;cursor:pointer}
.md-link:hover{text-decoration-color:var(--foreground)}
a{color:var(--foreground);text-decoration-color:var(--border);text-underline-offset:3px}
a:hover{color:var(--foreground);text-decoration-color:var(--foreground)}
.md-checks{display:flex;flex-direction:column;gap:var(--space-2)}
.md-check{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--text-sm)}
.md-check__text{display:flex;flex-direction:column;gap:1px}
.md-fields{display:flex;flex-direction:column;gap:var(--space-5)}

/* Auth: its own shell, no navigation owner. One layout variant — centred card
   on the tint, so it reads as the same product with the pane taken away. Every
   screen in the set goes through the same frame, which is what keeps them
   visibly siblings. */
.md-auth{display:flex;min-height:100dvh;align-items:center;justify-content:center;background:var(--sidebar);padding:var(--space-6)}
.md-auth__col{display:flex;width:100%;max-width:23rem;flex-direction:column;gap:var(--space-5)}
/* Stacked rather than the sidebar's row: with nothing beside it, a centred
   column gives the mark the whole width of the card to sit over. */
.md-auth__mark{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.md-auth__mark .md-brand__text{flex:none;align-items:center;text-align:center}
.md-auth__mark .md-brand__workspace{font-size:var(--text-xs)}
.md-auth__pane{display:flex;flex-direction:column;gap:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--background);padding:var(--space-6)}
.md-auth__title{margin:0;font-family:var(--font-heading);font-size:var(--text-xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight)}
.md-auth__lead{margin:var(--space-1) 0 0;font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}
.md-auth__labelrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.md-auth__labelrow .md-link{font-size:var(--text-xs);color:var(--muted-foreground)}
.md-auth__back{align-self:center;font-size:var(--text-sm);color:var(--muted-foreground)}
.md-auth__foot{margin:0;text-align:center;font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
/* The live requirement checklist. Met is the foreground; unmet is recessed —
   never a red list on first paint. */
.md-checklist{display:flex;flex-direction:column;gap:var(--space-1-5);margin:0;padding:0;list-style:none;font-size:var(--text-xs)}
.md-checklist li{display:flex;align-items:center;gap:var(--space-2);color:var(--muted-foreground)}
.md-checklist li[data-met=true]{color:var(--foreground)}
.md-checklist li[data-met=true] .fd-icon{color:var(--success-foreground)}

/* ── Deliverability: the domain matrix ───────────────────────────────────
   A matrix, not cards: one row per domain, one column per DNS check. It declares
   its own horizontal scroll rather than reflowing into something that is no
   longer a matrix. */
.md-matrix{display:grid;min-width:38rem;grid-template-columns:minmax(0,1fr) repeat(3,6.5rem) 9rem}
.md-matrix>*{display:flex;min-width:0;align-items:center;gap:var(--space-2);border-block-end:1px solid var(--border);padding:var(--space-4) var(--space-3)}
.md-matrix>*:nth-child(5n+1){flex-direction:column;align-items:flex-start;gap:2px;padding-inline-start:var(--gutter-page)}
.md-matrix>*:nth-child(5n){justify-content:flex-end;padding-inline-end:var(--gutter-page)}
.md-matrix>*:nth-last-child(-n+5){border-block-end:0}
.md-matrix__head{font-size:var(--text-xs);font-weight:var(--font-weight-medium);color:var(--muted-foreground)}
.md-matrix__domain{font-family:var(--font-mono);font-size:var(--text-sm)}

/* ── The send funnel ─────────────────────────────────────────────────────
   Each row's meter is drawn against the number at the top of the funnel, so the
   shape is the funnel; the qualifier states the rate against the row above. */
.md-funnel{display:flex;flex-direction:column}
.md-funnel__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2) var(--space-4);border-block-start:1px solid var(--border);padding:var(--space-4) var(--gutter-page)}
.md-funnel__row:first-child{border-block-start:0}
.md-funnel__label{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.md-funnel__value{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:var(--font-weight-semibold);line-height:1;font-variant-numeric:tabular-nums}
.md-funnel__bar{grid-column:1/-1}

/* ── Staged settings ─────────────────────────────────────────────────────── */
.md-form{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));padding:var(--space-6) var(--gutter-page)}
.md-form--one{max-width:36rem;grid-template-columns:minmax(0,1fr)}
/* The trailing padding leaves the template harness's floating button room: it
   sits bottom-right, and the save button is the one control it would cover. */
.md-formbar{position:sticky;bottom:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-3);border-block-start:1px solid var(--border);background:var(--background);padding:var(--space-4) calc(var(--gutter-page) + 3.5rem) var(--space-4) var(--gutter-page)}
.md-formbar__note{margin-inline-end:auto;font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}
.md-cell-control{display:block;width:11rem;max-width:100%}
.md-person{display:flex;min-width:0;align-items:center;gap:var(--space-2-5)}
.md-person__text{display:flex;min-width:0;flex-direction:column;gap:1px}

/* ── Builders ─────────────────────────────────────────────────────────────
   The step editor is the ladder with controls in it: the same rail and dot, so a
   draft you are editing and a live journey you are reading are recognisably the
   same object. */
.md-editor{display:flex;flex-direction:column}
.md-editor__row{display:grid;align-items:center;gap:var(--space-2) var(--space-4);grid-template-columns:32px minmax(0,1fr) auto;padding:var(--space-4) var(--gutter-page)}
.md-editor__row+.md-editor__row{border-block-start:1px solid var(--border)}
.md-editor__body{display:flex;min-width:0;flex-direction:column;gap:var(--space-1-5)}
.md-editor__control{display:block;width:100%;max-width:24rem}
.md-editor__tools{display:inline-flex;gap:var(--space-1)}
.md-editor__add{display:flex;flex-wrap:wrap;gap:var(--space-2);border-block-start:1px solid var(--border);padding:var(--space-4) var(--gutter-page)}
.md-editor__empty{padding:var(--space-6) var(--gutter-page)}
.md-rules{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));padding:var(--space-6) var(--gutter-page)}
.md-chipset{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.md-chip{border:1px solid var(--border);border-radius:var(--radius-full);background:transparent;padding:var(--space-1) var(--space-3);font:inherit;font-size:var(--text-sm);color:inherit;cursor:pointer}
.md-chip:hover{background:var(--accent)}
.md-chip[aria-pressed=true]{border-color:var(--foreground);background:var(--foreground);color:var(--background)}
.md-chip:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* A sortable column header is a control, so it looks like one only on hover and
   when it is the one doing the sorting. */
.md-sort{display:inline-flex;align-items:center;gap:var(--space-1);border:0;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer}
.md-sort .fd-icon{opacity:.35}
.md-sort:hover .fd-icon{opacity:.7}
.md-sort[data-on=true]{color:var(--foreground)}
.md-sort[data-on=true] .fd-icon{opacity:1}

/* ── Responsive: content follows, nothing is lost ────────────────────────── */
/* Above 1440px the pane has width to spare, so the page gutter and the bands'
   own inset both step up — one rule, product-wide, so no screen gets a bespoke
   measure. */
@media(min-width:1441px){
  .md-shell{--gutter-page:var(--space-8)}
  .md-shell .md-band,.md-shell .md-pane>.md-figures{margin-inline:var(--space-8)}
  .md-shell .md-band,.md-shell .md-pane>.md-figures{--gutter-page:var(--space-6)}
}
@media(max-width:1280px){.md-split{grid-template-columns:19rem minmax(0,1fr)}}
/* Figures reflow four → two → one. A wrapped row needs a rule of its own: the
   vertical dividers separate cells side by side and say nothing about the row
   above. */
@media(max-width:1180px){
  .md-figures,.md-figures--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md-figures>*:nth-child(2n+1){border-inline-start:0}
  .md-figures>*:nth-child(n+3){border-block-start:1px solid var(--border)}
  .md-drop-lg{display:none}
}
@media(max-width:900px){
  .md-search{display:none}
  .md-search-btn{display:inline-flex}
  .md-drop-md{display:none}
}
@media(max-width:640px){
  .md-figures,.md-figures--3{grid-template-columns:minmax(0,1fr)}
  .md-figures>*{border-inline-start:0}
  .md-figures>*+*{border-block-start:1px solid var(--border)}
  .md-step{grid-template-columns:32px minmax(0,1fr);padding-inline:var(--space-4)}
  .md-step__side{grid-column:2;flex-direction:row;gap:var(--space-3);text-align:left}
}
@media(max-width:767px){
  .md-shell{--gutter-page:var(--space-4)}
  .md-page-title{font-size:var(--text-2xl)}
  .md-chart{height:8rem}
  .md-pane-head .o-btn,.md-actions .o-btn,.md-page-header__actions .o-btn,.md-formbar .o-btn{min-height:44px;min-width:44px}
}

/* ══ The card layer ═══════════════════════════════════════════════════════
   Inside the pane, content is tiles. The pane keeps its own single hairline and
   no shadow; tiles take the card surface, a hairline and the smallest shadow the
   system has, which is the one axis of depth this product spends. Spans are
   uneven on purpose (7/5, 8/4, 5/4/3) so no grid line runs the page, and every
   tile drops to full width below 900px. */
.md-tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-4);padding:var(--gutter-page);align-items:stretch}
.md-tiles + .md-tiles{padding-block-start:0}
.md-tile{--gutter-card:var(--space-5);grid-column:span 12;display:flex;min-width:0;flex-direction:column;gap:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);color:var(--card-foreground);box-shadow:var(--shadow-xs);padding:var(--gutter-card)}
.md-tile--flush{padding:0}
.md-tile--flush .md-tile__head{padding:var(--gutter-card) var(--gutter-card) 0}
.md-tile--flush .md-tile__foot{padding:0 var(--gutter-card) var(--gutter-card)}
.md-tile--3{grid-column:span 3}.md-tile--4{grid-column:span 4}.md-tile--5{grid-column:span 5}
.md-tile--6{grid-column:span 6}.md-tile--7{grid-column:span 7}.md-tile--8{grid-column:span 8}
.md-tile--9{grid-column:span 9}.md-tile--12{grid-column:span 12}
.md-tile--muted{background:var(--muted);box-shadow:none}
/* Two distributions for a tile that is taller than its content: spread pushes the
   blocks apart, bottom seats them against the foot. */
/* Tiles fill their row by default. A tile whose neighbour is an open-ended list
   opts out instead of being stretched to a length its own content cannot fill. */
.md-tile--fit{align-self:start}
.md-tile--spread>.md-tile__body{justify-content:space-between;gap:var(--space-5)}
.md-tile--bottom>.md-tile__body{justify-content:flex-end}
.md-tile--hero{background:linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,var(--sidebar)),var(--card));border-radius:var(--radius-2xl)}
.md-tile__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.md-tile__heading{display:flex;min-width:0;flex-direction:column;gap:var(--space-1)}
.md-tile__title{margin:0;font-family:var(--font-heading);font-size:var(--text-base);font-weight:var(--font-weight-semibold);line-height:1.25}
.md-tile__note{margin:0;max-width:56ch;color:var(--muted-foreground);font-size:var(--text-xs);line-height:1.5;text-wrap:pretty}
.md-tile__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.md-tile__body{display:flex;min-width:0;flex:1;flex-direction:column;gap:var(--space-4)}
.md-tile__media{margin:calc(var(--gutter-card)*-1) calc(var(--gutter-card)*-1) 0;border-radius:var(--radius-xl) var(--radius-xl) 0 0;overflow:hidden}
.md-tile__body>.md-tile__foot{margin-block-start:auto}
.md-tile__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);border-block-start:1px solid var(--border);padding-block-start:var(--space-3);color:var(--muted-foreground);font-size:var(--text-xs)}
/* Two cards that answer the same question stack in one column of the grid; the
   stack is a grid child like a tile, so it takes a span and stretches with the
   row. */
.md-tilestack{display:flex;min-width:0;flex-direction:column;gap:var(--space-4);grid-column:span 12}
.md-tilestack--4{grid-column:span 4}.md-tilestack--5{grid-column:span 5}.md-tilestack--6{grid-column:span 6}
.md-tilestack>.md-tile{flex:1}
@media(max-width:900px){.md-tiles{gap:var(--space-3)}.md-tile,.md-tilestack{grid-column:span 12!important}}

/* Equal-weight figures may auto-fit — the one exception to column stacks. */
.md-statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--space-4)}
.md-stat{display:flex;min-width:0;flex-direction:column;gap:var(--space-1);border:0;background:transparent;padding:0;text-align:left;font:inherit;color:inherit}
.md-stat--link{cursor:pointer;border-radius:var(--radius-lg)}
.md-stat--link:hover .md-stat__value{text-decoration:underline;text-underline-offset:3px}
.md-stat__label{color:var(--muted-foreground);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.06em}
.md-stat__value{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:var(--font-weight-semibold);line-height:1.1;font-variant-numeric:tabular-nums}
.md-stat__value--warning{color:var(--warning-foreground)}
.md-stat__value--danger{color:var(--destructive-foreground)}
.md-stat__value--success{color:var(--success-foreground)}
.md-stat__spark{display:block;margin-block:var(--space-1)}
.md-stat__qualifier{color:var(--muted-foreground);font-size:var(--text-xs);line-height:1.45;text-wrap:pretty}

/* ── Curves ──────────────────────────────────────────────────────────────── */
.md-donut{position:relative;flex:none;display:grid;place-items:center}
.md-donut svg{display:block}
.md-donut__centre{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.md-donut__value{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--font-weight-semibold);line-height:1.15;font-variant-numeric:tabular-nums}
.md-donut__label{max-width:8ch;color:var(--muted-foreground);font-size:var(--text-xs);line-height:1.2}
.md-key{display:flex;min-width:0;flex:1;flex-direction:column;gap:var(--space-2);margin:0;padding:0;list-style:none}
.md-key__row{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:start;gap:var(--space-2);font-size:var(--text-xs)}
.md-key__swatch{width:10px;height:10px;margin-block-start:3px;border-radius:var(--radius-full)}
/* Two lines rather than an ellipsis: the key is the only place a slice is named,
   and a clipped name cannot be recovered from a ring. */
.md-key__label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted-foreground);line-height:1.3;overflow-wrap:anywhere}
.md-key__value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium);white-space:nowrap}
/* Donut beside its key needs room for both; under about 26rem of tile the pair
   stacks so neither is squeezed. */
.md-donutrow{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center}
/* Stacked, every child takes the full column — the readings beside a ring are a
   key or a key-value list, and both align to the card edge or neither does. */
@container (max-width:26rem){.md-donutrow{flex-direction:column;align-items:stretch}.md-donutrow>*{width:100%;flex:none}.md-donutrow>.md-donut,.md-donutrow>.md-gauge{width:auto;align-self:flex-start}}
.md-tile{container-type:inline-size}
.md-gauge{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}
.md-gauge svg{display:block;overflow:visible}
.md-gauge__text{position:absolute;top:38%;display:flex;flex-direction:column;align-items:center;text-align:center}
.md-gauge__value{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:var(--font-weight-semibold);line-height:1.15;font-variant-numeric:tabular-nums}
.md-gauge__label{color:var(--muted-foreground);font-size:var(--text-xs)}
.md-gauge__note{max-width:22ch;color:var(--muted-foreground);font-size:var(--text-xs);text-align:center;text-wrap:pretty}
.md-spark{display:block;overflow:visible}
.md-pillmeter{display:flex;flex-direction:column;gap:var(--space-1-5)}
.md-pillmeter__label{color:var(--muted-foreground);font-size:var(--text-xs)}
.md-pillmeter__track{display:flex;overflow:hidden;height:10px;border-radius:var(--radius-full);background:var(--muted)}
.md-pillmeter__fill{background:var(--chart-1)}
.md-pillmeter__fill--soft{background:color-mix(in srgb,var(--chart-1) 42%,var(--card))}
.md-pillmeter__fill--success{background:var(--success)}
.md-pillmeter__fill--warning{background:var(--warning)}
.md-pillmeter__fill--danger{background:var(--destructive)}

/* ── Faces, notes, chips ─────────────────────────────────────────────────── */
.md-faces{display:flex;align-items:center}
.md-faces>*+*{margin-inline-start:-8px}
.md-face{display:inline-flex;border-radius:var(--radius-full)}
.md-faces .md-face{box-shadow:0 0 0 2px var(--card)}
.md-faces__more{display:inline-flex;height:26px;min-width:26px;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--muted);box-shadow:0 0 0 2px var(--card);color:var(--muted-foreground);font-size:var(--text-xs);font-weight:var(--font-weight-medium)}
.md-notes{display:flex;flex-direction:column;gap:var(--space-4)}
.md-notes>div{display:flex;flex-direction:column;gap:var(--space-1-5);align-items:flex-start}
.md-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3)}
.md-note__body{display:flex;min-width:0;flex-direction:column;gap:var(--space-1-5);border-radius:var(--radius-lg) var(--radius-xl) var(--radius-xl) var(--radius-xl);background:var(--muted);padding:var(--space-3) var(--space-4)}
.md-note__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2)}
.md-note__who{font-size:var(--text-sm);font-weight:var(--font-weight-semibold)}
.md-note__role{color:var(--muted-foreground);font-size:var(--text-xs)}
.md-note__when{margin-inline-start:auto;color:var(--muted-foreground);font-size:var(--text-xs)}
.md-note__text{margin:0;font-size:var(--text-sm);line-height:1.55;text-wrap:pretty}
.md-note__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.md-note__owed{display:inline-flex;align-items:center;gap:4px;border-radius:var(--radius-full);background:color-mix(in srgb,var(--warning) 18%,var(--card));padding:2px var(--space-2);color:var(--warning-foreground);font-size:var(--text-xs)}
.md-mention{border-radius:var(--radius-full);background:color-mix(in srgb,var(--chart-1) 16%,var(--card));padding:1px 6px;font-weight:var(--font-weight-medium);white-space:nowrap}
.md-react{display:inline-flex;align-items:center;gap:4px;min-height:24px;border:1px solid var(--border);border-radius:var(--radius-full);background:var(--card);padding:0 var(--space-2);color:var(--muted-foreground);font:inherit;font-size:var(--text-xs);cursor:pointer}
.md-react:hover{color:var(--foreground)}
.md-react--on{border-color:color-mix(in srgb,var(--chart-1) 45%,var(--border));background:color-mix(in srgb,var(--chart-1) 12%,var(--card));color:var(--foreground)}
.md-composer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3)}
.md-composer__body{display:flex;min-width:0;flex-direction:column;gap:var(--space-2)}
.md-composer__mentions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.md-composer__mentions .md-react:disabled{cursor:default;opacity:0.7}
.md-composer__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2)}
.md-chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:var(--radius-full);padding:2px var(--space-2);color:var(--muted-foreground);font-size:var(--text-xs);white-space:nowrap}
.md-chip--accent{border-color:color-mix(in srgb,var(--chart-1) 40%,var(--border));color:var(--foreground)}
.md-chip--warning{border-color:color-mix(in srgb,var(--warning) 40%,var(--border));color:var(--warning-foreground)}
.md-chip--danger{border-color:color-mix(in srgb,var(--destructive) 40%,var(--border));color:var(--destructive-foreground)}
.md-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.md-kv{display:flex;flex-direction:column;gap:var(--space-2-5);margin:0}
.md-kv__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--space-3);font-size:var(--text-sm)}
.md-kv__row dt{color:var(--muted-foreground);font-size:var(--text-xs)}
.md-kv__row dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}

/* ── Person cards, contact cards, thread cards ───────────────────────────── */
.md-person{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);align-items:center}
.md-person__text{display:flex;min-width:0;flex-direction:column;gap:2px}
.md-person__name{font-size:var(--text-sm);font-weight:var(--font-weight-semibold);line-height:1.2}
.md-person__role{color:var(--muted-foreground);font-size:var(--text-xs)}
.md-persontile{cursor:pointer;text-align:left;font:inherit;color:inherit}
.md-persontile:hover{border-color:color-mix(in srgb,var(--foreground) 22%,var(--border))}
.md-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-5);align-items:center}
.md-hero__text{display:flex;min-width:0;flex-direction:column;gap:var(--space-2)}
.md-hero__name{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:var(--font-weight-semibold);line-height:1.15}
.md-hero__line{color:var(--muted-foreground);font-size:var(--text-sm);line-height:1.5;max-width:62ch;text-wrap:pretty}
.md-hero__avatar{border-radius:var(--radius-full);box-shadow:0 0 0 4px color-mix(in srgb,var(--chart-1) 14%,var(--card))}
@media(max-width:640px){.md-hero{grid-template-columns:1fr}}

/* ── The calendar ────────────────────────────────────────────────────────── */
.md-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-2)}
.md-cal__dow{padding-block-end:var(--space-1);color:var(--muted-foreground);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.06em}
.md-cal__cell{display:flex;min-width:0;min-height:6.5rem;flex-direction:column;gap:var(--space-1-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);padding:var(--space-2)}
.md-cal__cell--empty{border-color:transparent;background:transparent}
.md-cal__cell--today{border-color:color-mix(in srgb,var(--chart-1) 55%,var(--border));background:color-mix(in srgb,var(--chart-1) 7%,var(--card))}
.md-cal__day{display:flex;align-items:center;justify-content:space-between;color:var(--muted-foreground);font-size:var(--text-xs);font-variant-numeric:tabular-nums}
.md-cal__entry{display:flex;min-width:0;flex-direction:column;gap:2px;border:0;border-radius:var(--radius-md);background:var(--muted);padding:var(--space-1-5);text-align:left;font:inherit;font-size:var(--text-xs);color:inherit;cursor:pointer}
.md-cal__entry:hover{background:var(--accent)}
/* Two lines in a month cell, one in the week ladder where there is room. A
   clipped chip is never the only copy of the name — the cell chip carries a
   tooltip with the audience, the size and the clock. */
.md-cal__entry-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:var(--font-weight-medium);line-height:1.25;overflow-wrap:anywhere}
.md-cal__entry--wide .md-cal__entry-name{display:block;-webkit-line-clamp:none;white-space:nowrap;text-overflow:ellipsis}
.md-cal__entry-when{color:var(--muted-foreground)}
.md-cal__week{display:flex;flex-direction:column;gap:var(--space-2)}
.md-cal__wrow{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--space-3);align-items:start;border-block-start:1px solid var(--border);padding-block:var(--space-3)}
.md-cal__wrow:first-child{border-block-start:0;padding-block-start:0}
.md-cal__wday{display:flex;flex-direction:column;font-size:var(--text-sm)}
.md-cal__wday span{color:var(--muted-foreground);font-size:var(--text-xs)}
@media(max-width:767px){.md-cal{grid-template-columns:repeat(7,minmax(2.5rem,1fr));overflow-x:auto}.md-cal__cell{min-height:4.5rem}}

/* ── Feeds and queues ───────────────────────────────────────────────────── */
.md-feed{display:flex;flex-direction:column;gap:var(--space-4)}
.md-feed__day{display:flex;flex-direction:column;gap:var(--space-3)}
.md-feed__date{position:sticky;top:0;z-index:1;background:var(--card);color:var(--muted-foreground);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.06em}
.md-feed__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:start}
.md-feed__text{display:flex;min-width:0;flex-direction:column;gap:2px;font-size:var(--text-sm);line-height:1.45}
.md-feed__note{color:var(--muted-foreground);font-size:var(--text-xs)}
.md-feed__when{color:var(--muted-foreground);font-size:var(--text-xs);white-space:nowrap;font-variant-numeric:tabular-nums}
.md-queue{display:flex;flex-direction:column;gap:var(--space-3)}
.md-queue__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);padding:var(--space-3) var(--space-4)}
.md-queue__main{display:flex;min-width:12rem;flex:1;flex-direction:column;gap:2px}
.md-queue__side{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}

/* The brand mark replaces the letter tile; the logo is a flat SVG that reads on
   both themes, so it takes no surface of its own. */
.md-brand__logo{display:block;width:28px;height:28px;flex:none;border-radius:var(--radius-lg)}
.md-feed__icon{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--muted);color:var(--muted-foreground)}


/* List-detail inside a card: the dividing rule stops being the only separator
   once the card has corners, so below 1100px the two panes stack rather than
   squeezing the detail to an unreadable width. */
@media(max-width:1100px){
  .md-split{grid-template-columns:minmax(0,1fr)}
  .md-split__detail{border-inline-start:0;border-block-start:1px solid var(--border)}
}

/* The photo control sits ON the avatar, because the avatar is the thing being
   changed; the buttons beside it are for people who will not find a badge. */
.md-photo{position:relative;display:inline-flex;flex:none}
.md-photo__btn{position:absolute;inset-block-end:-2px;inset-inline-end:-2px;display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius-full);background:var(--card);box-shadow:var(--shadow-xs);color:var(--muted-foreground);cursor:pointer}
.md-photo__btn:hover{color:var(--foreground);border-color:color-mix(in srgb,var(--foreground) 22%,var(--border))}
.md-error{color:var(--destructive-foreground);font-size:var(--text-xs);line-height:1.45}
