/* Marque Talent Desk — layout only. Every colour, radius, shadow and step comes
   from the Reckon tokens; nothing here re-declares a design decision. Tints are
   the documented 6–10% washes of a semantic hue, never a new colour.

   Chosen once for the whole product:
     Density        editorial at the top of a page (48px display type, 32px
                    gutters, air above the fold) against dense ledgers where the
                    work happens (32px rows, 14px type, hairlines).
     Separation     the page plane is --background; bands and ledgers are marked
                    by hairlines and by full-bleed --sidebar washes. Cards are
                    used only where a thing is genuinely liftable off the page
                    (the deal sheet). Never a grid of equal cards.
     Active state   foreground token + a filled --accent pill.
     Type signature an uppercase, wide-tracked mono eyebrow above every figure
                    and every section; names set large in the heading face.
     Signature devices
                    the booking bar (a 90-day availability track, one geometry
                    everywhere), the fit ledger (three axes, one row), the week
                    ladder, the promise wall, and the facing ledgers.
     Breakpoints    1280 full bar · 1120 splits stack · 900 destinations collapse
                    into a menu · 767 and below, 44px targets. */

.mq-shell{--gutter-page:var(--space-8);--gutter-card:var(--space-6);display:flex;min-height:100vh;flex-direction:column;background:var(--background);color:var(--foreground)}

/* ── Top-nav shell. The bar is the only navigation owner. ─────────────── */
.mq-bar{position:sticky;top:0;z-index:40;display:flex;height:var(--header-height);align-items:center;gap:var(--space-5);padding-inline:var(--gutter-page);border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--background) 86%,transparent);backdrop-filter:blur(6px)}
.mq-brand{display:flex;min-width:0;align-items:center;gap:var(--space-2);border:0;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.mq-brand__name{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;white-space:nowrap}
.mq-brand__desk{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-foreground);white-space:nowrap}
.mq-brand__mark{display:block;width:22px;height:22px;flex:none}
/* The agency owns the mark, the desk owns the destinations — a hairline keeps the
   two from reading as one run of labels, and it goes on whichever side the nav is
   actually on (after the brand at full width, before it in menu mode). */
.mq-brand:has(+ .mq-dests)::after{content:"";width:1px;height:20px;margin-inline-start:var(--space-3);background:var(--border)}
.mq-bar>.mq-brand:not(:first-child)::before{content:"";width:1px;height:20px;margin-inline-end:var(--space-3);background:var(--border)}
.mq-dests{display:flex;align-items:center;gap:var(--space-1)}
.mq-dest{position:relative;display:flex;align-items:center;gap:var(--space-2);border:0;border-radius:var(--radius-md);background:transparent;padding:var(--space-1-5) var(--space-3);font:inherit;font-size:var(--text-sm);color:var(--muted-foreground);cursor:pointer;white-space:nowrap}
.mq-dest:hover{color:var(--foreground);background:var(--accent)}
.mq-dest[aria-current=page]{background:var(--accent);color:var(--foreground);font-weight:var(--font-weight-medium)}
.mq-dest__count{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--text-2xs);color:var(--muted-foreground)}
.mq-dest[aria-current=page] .mq-dest__count{color:var(--foreground)}
.mq-bar__end{margin-inline-start:auto;display:flex;align-items:center;gap:var(--space-2)}
.mq-search{width:min(20rem,28vw);min-width:0}
.mq-search input{cursor:pointer}
.mq-utility{position:relative;display:inline-flex}
.mq-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:999px;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)}
.mq-account{display:flex;align-items:center;gap:var(--space-2);border:0;border-radius:var(--radius-md);background:transparent;padding:var(--space-1);font:inherit;color:inherit;cursor:pointer}
.mq-account:hover{background:var(--accent)}
.mq-account__text{display:none;flex-direction:column;text-align:left}
.mq-account__name{font-size:var(--text-sm);font-weight:var(--font-weight-medium);line-height:1.2}
.mq-account__role{font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-foreground);white-space:nowrap}
.mq-shell[data-mode=full] .mq-account__text{display:flex}
.mq-notify{padding:var(--space-2)}
.mq-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)}
.mq-notify__list{display:flex;flex-direction:column;gap:2px}
.mq-notify__item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--space-3);border:0;border-radius:var(--radius-md);background:transparent;padding:var(--space-2);text-align:left;font:inherit;color:inherit;cursor:pointer}
.mq-notify__item:hover{background:var(--accent)}
.mq-notify__title{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.mq-notify__body{grid-column:1;font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.mq-notify__time{grid-row:1;grid-column:2;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--muted-foreground)}
.mq-notify__foot{display:flex;justify-content:flex-end;border-top:1px solid var(--border);margin-top:var(--space-2);padding:var(--space-2)}

/* ── Page frame ──────────────────────────────────────────────────────── */
.mq-main{min-width:0;flex:1}
.mq-page{display:flex;max-width:100rem;flex-direction:column;gap:var(--space-8);margin-inline:auto;padding:var(--gutter-page) var(--gutter-page) var(--space-12)}
.mq-page--tight{gap:var(--space-6)}
.mq-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--space-4) var(--space-8);border-bottom:1px solid var(--border);padding-bottom:var(--space-4)}
.mq-head__text{display:flex;min-width:0;flex-direction:column;gap:var(--space-2)}
.mq-head:has(.mq-head__media){grid-template-columns:auto minmax(0,1fr) auto}
.mq-head__media{align-self:start}
.mq-head__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-2)}
.mq-title{margin:0;font-family:var(--font-heading);font-size:var(--text-5xl);font-weight:var(--font-weight-semibold);line-height:var(--leading-none);letter-spacing:var(--tracking-tight)}
.mq-title--sm{font-size:var(--text-4xl)}
.mq-lede{margin:0;max-width:44rem;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--muted-foreground);text-wrap:pretty}
.mq-eyebrow{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-foreground)}
.mq-h2{margin:0;font-family:var(--font-heading);font-size:var(--text-xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight)}
.mq-h3{margin:0;font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.mq-note{margin:0;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted-foreground);text-wrap:pretty}
.mq-section{display:flex;min-width:0;flex-direction:column;gap:var(--space-4)}
.mq-section__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-6);border-bottom:1px solid var(--border);padding-bottom:var(--space-2)}
/* A band bleeds along the page's horizontal axis and re-adds the gutter itself.
   It stacks: a figure row and its caption are the same size and colour, so the
   scale has to keep them apart or they read as one paragraph. */
.mq-bleed{display:flex;flex-direction:column;gap:var(--space-6);margin-inline:calc(var(--gutter-page) * -1);border-block:1px solid var(--border);background:var(--sidebar);padding:var(--space-8) var(--gutter-page)}
.mq-split{display:grid;align-items:start;gap:var(--space-8);grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.mq-split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mq-split--rail{grid-template-columns:19rem minmax(0,1fr)}
.mq-col{display:flex;min-width:0;flex-direction:column;gap:var(--space-6)}
.mq-col--tight{gap:var(--space-3)}
.mq-stack{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}

/* ── Figures ─────────────────────────────────────────────────────────── */
.mq-figure{display:flex;min-width:0;flex-direction:column;gap:var(--space-2)}
.mq-figure__value{font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:var(--font-weight-semibold);line-height:var(--leading-none);letter-spacing:var(--tracking-tight);font-variant-numeric:tabular-nums}
.mq-figure--xl .mq-figure__value{font-size:var(--text-5xl)}
.mq-figure--sm .mq-figure__value{font-size:var(--text-xl)}
.mq-figure__note{font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.mq-figures{display:flex;flex-wrap:wrap;gap:var(--space-6) var(--space-12)}
.mq-figures>*{min-width:8rem;max-width:22rem}
.mq-mono{font-family:var(--font-mono);font-size:var(--text-xs)}
.mq-amount{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium)}
.mq-muted{color:var(--muted-foreground)}
.mq-warn{color:var(--warning-foreground)}
.mq-bad{color:var(--destructive-foreground)}
.mq-good{color:var(--success-foreground)}
.mq-num{text-align:right;font-variant-numeric:tabular-nums}
.mq-actions{text-align:right}
.mq-actions__row{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2)}

/* ── Portraits. Squared, not circular: the roster is a book, not a contacts
      list. One geometry wherever a creator appears. ───────────────────── */
/* The design system's stylesheets land after this file, so anything that
   retones one of its classes is written at two classes deep on purpose. */
.o-avatar.mq-portrait,.o-avatar.mq-portrait img,.o-avatar.mq-portrait .o-avatar__fallback{border-radius:var(--radius-sm)}
.o-avatar.mq-portrait{background:var(--muted)}
.mq-who{display:flex;min-width:0;align-items:center;gap:var(--space-3)}
.mq-who__text{display:flex;min-width:0;flex-direction:column;gap:1px}
.mq-who__name{font-weight:var(--font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-who__meta{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--muted-foreground);white-space:nowrap}
.mq-link{border:0;background:none;padding:0;font:inherit;font-weight:var(--font-weight-medium);color:inherit;text-align:left;cursor:pointer}
.mq-link:hover{text-decoration:underline}
a{color:var(--foreground)}
a:hover{color:var(--muted-foreground)}

/* ── The booking bar: 90 days from today, one geometry everywhere. ───── */
.mq-bookbar{position:relative;height:8px;overflow:hidden;border-radius:2px;background:var(--muted)}
.mq-bookbar__fill{position:absolute;inset-block:0;inset-inline-start:0;background:var(--info)}
.mq-bookbar--free .mq-bookbar__fill{background:var(--success)}
.mq-bookbar--soon .mq-bookbar__fill{background:var(--warning)}
.mq-bookbar--paused .mq-bookbar__fill{background:var(--muted-foreground)}
.mq-bookbar__ends{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--muted-foreground)}

/* ── Roster: full-width creator bands, hairline-divided. ─────────────── */
.mq-roster{display:flex;flex-direction:column}
.mq-cband{display:grid;grid-template-columns:104px minmax(14rem,1.3fr) minmax(0,1.1fr) 13rem;align-items:start;gap:var(--space-6);border-bottom:1px solid var(--border);padding-block:var(--space-6)}
.mq-cband:last-child{border-bottom:0}
.mq-cband--recessed{color:var(--muted-foreground)}
.mq-cband--recessed .mq-cband__name{color:var(--muted-foreground)}
.mq-cband__id{display:flex;min-width:0;flex-direction:column;gap:var(--space-2)}
.mq-cband__name{margin:0;font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:var(--font-weight-semibold);line-height:var(--leading-none);letter-spacing:var(--tracking-tight);border:0;background:none;padding:0;text-align:left;color:inherit;cursor:pointer}
button.mq-cband__name:hover{text-decoration:underline}
.mq-cband__note{font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted-foreground);text-wrap:pretty}
.mq-plat{display:flex;flex-direction:column;gap:var(--space-1-5)}
.mq-plat__row{display:grid;grid-template-columns:5.5rem 1fr auto;align-items:baseline;gap:var(--space-3);font-size:var(--text-xs)}
.mq-plat__label{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-foreground)}
.mq-plat__n{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium)}
.mq-plat__e{font-variant-numeric:tabular-nums;color:var(--muted-foreground);text-align:right}
.mq-cband__avail{display:flex;flex-direction:column;gap:var(--space-2)}
.mq-excl{display:flex;flex-direction:column;gap:var(--space-1);border-inline-start:2px solid var(--destructive);padding-inline-start:var(--space-3)}

/* ── Triage deck: an inbound brief, rendered at the size of the decision. ── */
.mq-triage{display:flex;flex-direction:column;gap:var(--space-6)}
.mq-brief{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(15rem,1fr);gap:var(--space-6) var(--space-10);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);padding:var(--space-8)}
.mq-brief__head{display:flex;flex-direction:column;gap:var(--space-2)}
.mq-brief__brand{margin:0;font-family:var(--font-heading);font-size:var(--text-4xl);font-weight:var(--font-weight-semibold);line-height:var(--leading-none);letter-spacing:var(--tracking-tight)}
.mq-brief__ask{margin:0;max-width:34rem;font-size:var(--text-base);line-height:var(--leading-relaxed);text-wrap:pretty}
.mq-brief__side{display:flex;flex-direction:column;gap:var(--space-5)}
.mq-brief__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);border-top:1px solid var(--border);padding-top:var(--space-5)}
.mq-specs{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--space-2) var(--space-4);margin:0;font-size:var(--text-sm)}
.mq-specs dt{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-foreground);padding-top:2px}
.mq-specs dd{margin:0;text-wrap:pretty}
.mq-kinds{display:flex;flex-wrap:wrap;gap:var(--space-1-5)}

/* ── The fit ledger: three axes, one row, on the match screen. ───────── */
.mq-fitrow{display:grid;grid-template-columns:56px minmax(10rem,1.4fr) auto minmax(8.5rem,auto) 2.5rem;align-items:center;gap:var(--space-4);border-bottom:1px solid var(--border);padding-block:var(--space-4)}
.mq-fitrow:last-child{border-bottom:0}
.mq-fitrow--blocked{background:color-mix(in srgb,var(--destructive) 6%,transparent);border-inline-start:2px solid var(--destructive);padding-inline:var(--space-4);margin-inline:calc(var(--space-4) * -1);border-bottom-color:transparent}
.mq-fitrow--off{color:var(--muted-foreground)}
.mq-axes{display:flex;gap:var(--space-4)}
.mq-axis{display:flex;flex-direction:column;gap:2px;min-width:4.75rem}
.mq-fitrow__quote{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;white-space:nowrap}
.mq-axis__label{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-foreground)}
.mq-axis__mark{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);font-variant-numeric:tabular-nums}
.mq-axis__mark[data-ok=yes]{color:var(--success-foreground)}
.mq-axis__mark[data-ok=no]{color:var(--muted-foreground)}
.mq-pitchbar{position:sticky;bottom:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);margin-inline:calc(var(--gutter-page) * -1);border-top:1px solid var(--border);background:color-mix(in srgb,var(--background) 92%,transparent);backdrop-filter:blur(6px);padding:var(--space-4) var(--gutter-page)}
.mq-pitchbar__text{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-4);font-size:var(--text-sm)}
.mq-rail{position:sticky;top:calc(var(--header-height) + var(--space-6));display:flex;flex-direction:column;gap:var(--space-5)}

/* ── The deal sheet: the generous end of the density range. ──────────── */
.mq-sheet{display:flex;flex-direction:column;gap:var(--space-6);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);padding:var(--space-8)}
.mq-sheet--tight{padding:var(--space-6);gap:var(--space-4)}
.mq-lg{display:flex;flex-direction:column}
.mq-lg__row{display:grid;grid-template-columns:minmax(0,1fr) 11rem;align-items:baseline;gap:var(--space-4);padding-block:var(--space-3);border-bottom:1px solid var(--border)}
.mq-lg__row:last-child{border-bottom:0}
.mq-lg__label{display:flex;min-width:0;flex-direction:column;gap:2px;font-size:var(--text-sm)}
.mq-lg__hint{font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.mq-lg__value{text-align:right;font-variant-numeric:tabular-nums;font-size:var(--text-sm)}
.mq-lg__row--sub{border-top:1px solid var(--border);font-weight:var(--font-weight-medium)}
/* The net row carries a range, not a single figure, so its value track sizes to
   the number and the label gives the width back — a wrapped range reads as two
   numbers instead of one span. */
.mq-lg__row--net{margin-top:var(--space-4);border:0;border-radius:var(--radius-lg);background:var(--muted);padding:var(--space-4) var(--space-5);grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
.mq-lg__row--net .mq-lg__value{order:-1;text-align:left;font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-none);white-space:nowrap}

/* The contract rail: three stages, the current one filled. */
.mq-steps{display:flex;gap:2px}
.mq-step{display:flex;min-width:0;flex:1;flex-direction:column;gap:var(--space-1);background:var(--muted);padding:var(--space-3) var(--space-4)}
.mq-step:first-child{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md)}
.mq-step:last-child{border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md)}
.mq-step[data-state=done]{background:color-mix(in srgb,var(--success) 14%,var(--muted))}
.mq-step[data-state=current]{background:color-mix(in srgb,var(--warning) 18%,var(--muted))}
.mq-step__when{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-step__label{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}

/* The deliverable timeline on the deal sheet. */
.mq-tl{display:flex;flex-direction:column}
.mq-tl__item{display:grid;grid-template-columns:6.5rem minmax(0,1fr) auto;align-items:start;gap:var(--space-2) var(--space-4);border-inline-start:1px solid var(--border);padding:var(--space-4) 0 var(--space-4) var(--space-5);position:relative}
.mq-tl__item::before{content:"";position:absolute;inset-inline-start:-3px;top:calc(var(--space-4) + 6px);width:5px;height:5px;border-radius:999px;background:var(--muted-foreground)}
.mq-tl__item[data-live=yes]::before{background:var(--success)}
.mq-tl__item[data-attention=yes]::before{background:var(--warning)}
.mq-tl__when{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.mq-tl__main{display:flex;min-width:0;flex-direction:column;gap:var(--space-1)}
.mq-tl__title{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.mq-tl__side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2)}
.mq-quote{border-inline-start:2px solid var(--warning);padding-inline-start:var(--space-3);font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--muted-foreground);text-wrap:pretty}

/* ── The week ladder: three weeks on one axis, deliverables placed by due
      date. The only calendar in the product. ─────────────────────────── */
.mq-week{display:grid;grid-template-columns:repeat(21,minmax(0,1fr));border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--card)}
.mq-week__day{display:flex;min-height:7.5rem;flex-direction:column;gap:var(--space-1);border-inline-end:1px solid var(--border);padding:var(--space-2)}
.mq-week__day:last-child{border-inline-end:0}
.mq-week__day[data-past=yes]{background:var(--muted)}
.mq-week__day[data-today=yes]{background:color-mix(in srgb,var(--warning) 8%,var(--card))}
.mq-week__date{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-foreground)}
.mq-week__day[data-today=yes] .mq-week__date{color:var(--warning-foreground)}
.mq-chip{display:flex;flex-direction:column;gap:1px;border:0;border-radius:var(--radius-xs);background:var(--muted);padding:4px 6px;text-align:left;font:inherit;cursor:pointer;color:var(--foreground);min-width:0}
.mq-chip:hover{outline:2px solid var(--ring);outline-offset:1px}
.mq-chip[data-tone=warning]{background:color-mix(in srgb,var(--warning) 20%,var(--muted))}
.mq-chip[data-tone=danger]{background:color-mix(in srgb,var(--destructive) 18%,var(--muted))}
.mq-chip[data-tone=success]{background:color-mix(in srgb,var(--success) 18%,var(--muted))}
.mq-chip[data-tone=info]{background:color-mix(in srgb,var(--info) 16%,var(--muted))}
.mq-chip__who{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-chip__what{font-size:var(--text-2xs);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mq-weekhead{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-bottom:var(--space-2)}
.mq-weekhead>span{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-foreground)}

/* ── Grouped work rows (deliverables, money). ────────────────────────── */
.mq-rows{display:flex;flex-direction:column}
.mq-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-2) var(--space-4);border-bottom:1px solid var(--border);padding-block:var(--space-3)}
.mq-row:last-child{border-bottom:0}
.mq-row--recessed{background:var(--muted);color:var(--muted-foreground);padding-inline:var(--space-3);margin-inline:calc(var(--space-3) * -1)}
.mq-row__main{display:flex;min-width:0;flex-direction:column;gap:var(--space-1)}
.mq-row__title{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.mq-row__meta{font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.mq-row__side{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);text-align:right}
.mq-row__wide{grid-column:1/-1}

/* ── The promise wall: actual reach against what we promised. ────────── */
.mq-promise{display:flex;flex-direction:column;gap:var(--space-5)}
.mq-prow{display:grid;grid-template-columns:minmax(11rem,1fr) minmax(0,2.4fr) 9rem;align-items:center;gap:var(--space-5)}
.mq-ptrack{position:relative;height:2.25rem;background:var(--muted);border-radius:var(--radius-xs)}
.mq-ptrack__fill{position:absolute;inset-block:0;inset-inline-start:0;border-radius:var(--radius-xs);background:color-mix(in srgb,var(--success) 55%,var(--muted))}
.mq-ptrack__fill[data-under=yes]{background:color-mix(in srgb,var(--warning) 55%,var(--muted))}
.mq-ptrack__fill[data-flight=yes]{background:color-mix(in srgb,var(--info) 40%,var(--muted))}
.mq-ptrack__wall{position:absolute;inset-block:-6px;width:2px;background:var(--foreground)}
.mq-ptrack__walllabel{position:absolute;top:-1.25rem;transform:translateX(-50%);font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--muted-foreground);white-space:nowrap}
.mq-pindex{text-align:right;font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight);line-height:var(--leading-none)}
.mq-posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--space-4)}
.mq-post{display:flex;flex-direction:column;gap:var(--space-2);border-top:1px solid var(--border);padding-top:var(--space-3)}
.mq-post__metrics{display:flex;gap:var(--space-4)}

/* ── The facing ledgers: money in on the left, money out on the right. ─ */
.mq-facing{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:var(--space-8)}
.mq-spine{background:var(--border)}
.mq-ledgerhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3);border-bottom:1px solid var(--border);padding-bottom:var(--space-3)}

/* ── Tables, filters, footers ────────────────────────────────────────── */
.mq-table-wrap{min-width:0;overflow-x:auto}
.mq-table-wrap table{min-width:100%}
.mq-tbl th,.mq-tbl td{padding-inline:var(--space-3)}
.mq-tbl th:first-child,.mq-tbl td:first-child{padding-inline-start:0}
.mq-tbl th:last-child,.mq-tbl td:last-child{padding-inline-end:0}
.mq-tbl td{padding-block:var(--space-2)}
/* A two-line cell: the value and the line that qualifies it. They are different
   sizes and colours, so they need the smallest step of the scale between them —
   set on the stack rather than typed inline per table. */
.mq-cellstack{display:flex;min-width:0;flex-direction:column;gap:var(--space-1)}
.mq-cellstack--end{align-items:flex-end;text-align:right}
.mq-tbl th{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase}
.mq-row-recessed{background:var(--muted);color:var(--muted-foreground)}
.mq-filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}
.mq-filters__text{width:min(18rem,100%)}
.mq-tab-count{margin-inline-start:var(--space-1-5);font-family:var(--font-mono);color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.mq-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);border-top:1px solid var(--border);padding-top:var(--space-3);font-size:var(--text-xs);color:var(--muted-foreground)}
.mq-command{max-width:36rem;overflow:hidden}
.fd-icon{display:inline-flex;flex:none;align-items:center;justify-content:center}
.fd-floating-anchor{display:inline-flex}

/* ── Responsive. Declared once, identical on every screen. ───────────── */
/* The portrait column never narrows: the Avatar carries its size inline, so a
   narrower track would only let it overflow into the name. */
@media(max-width:1280px){.mq-search{width:auto}.mq-cband{grid-template-columns:104px minmax(11rem,1.2fr) minmax(0,1fr) 12rem;gap:var(--space-5)}}
@media(max-width:1120px){
  /* With a portrait in the row there is no width left for a name at display size
     beside a full action row, so the actions drop to their own line early. */
  .mq-head:has(.mq-head__media){grid-template-columns:auto minmax(0,1fr)}
  .mq-head:has(.mq-head__media) .mq-head__actions{grid-column:1/-1;justify-content:flex-start}
  .mq-split,.mq-split--even,.mq-split--rail{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .mq-rail{position:static}
  .mq-facing{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .mq-spine{display:none}
  .mq-brief{grid-template-columns:minmax(0,1fr);padding:var(--space-6)}
  .mq-fitrow{grid-template-columns:48px minmax(9rem,1fr) auto;row-gap:var(--space-3)}
  .mq-axes{grid-column:2/-1}
  .mq-fitrow__quote{grid-column:2/-1;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-3);text-align:left}
  .mq-week{grid-template-columns:repeat(7,minmax(0,1fr))}
  .mq-weekhead{display:none}
}
@media(max-width:1000px){
  .mq-cband{grid-template-columns:104px minmax(0,1fr);row-gap:var(--space-4)}
  .mq-cband__plat,.mq-cband__avail{grid-column:2}
  .mq-prow{grid-template-columns:minmax(0,1fr) 6rem;row-gap:var(--space-2)}
  .mq-prow__track{grid-column:1/-1}
  .mq-drop-lg{display:none}
}
@media(max-width:900px){.mq-drop-md{display:none}.mq-sheet{padding:var(--space-6)}}
@media(max-width:767px){
  .mq-shell{--gutter-page:var(--space-4);--gutter-card:var(--space-4)}
  .mq-title{font-size:var(--text-3xl)}
  .mq-title--sm{font-size:var(--text-2xl)}
  .mq-figure--xl .mq-figure__value{font-size:var(--text-3xl)}
  .mq-cband__name{font-size:var(--text-2xl)}
  .mq-brief__brand{font-size:var(--text-3xl)}
  .mq-head,.mq-head:has(.mq-head__media){grid-template-columns:minmax(0,1fr);align-items:start}
  .mq-bar .o-btn,.mq-actions .o-btn{min-height:44px;min-width:44px}
  .mq-dest{min-height:44px}
  .mq-steps{flex-direction:column}
  .mq-step{border-radius:var(--radius-md)}
  .mq-specs{grid-template-columns:minmax(0,1fr)}
  .mq-repeat,.mq-repeat--pair{grid-template-columns:minmax(0,1fr)}
  .mq-repeat__head{display:none}
  .mq-week{grid-template-columns:minmax(0,1fr)}
  .mq-week__day{min-height:0;border-inline-end:0;border-bottom:1px solid var(--border)}
  .mq-week__day[data-work=no]{display:none}
  .mq-row{grid-template-columns:auto minmax(0,1fr)}
  .mq-row__side{grid-column:1/-1;justify-content:flex-start}
  .mq-tl__item{grid-template-columns:minmax(0,1fr)}
}

/* Control density, chosen once for the product. "compact" is the sm scale the
   screens author; "medium" lifts the input family — filter fields, the shell
   search and the Select triggers — to the default 32px control height and its
   roomier inline padding, leaving buttons, tabs and badges on sm. */
.mq-shell[data-controls=medium] .o-input--sm{--control-h-sm:var(--control-h)}
.mq-shell[data-controls=medium] .o-input--sm .o-input__control{padding-inline:calc(var(--space-3) - 1px)}
.mq-shell[data-controls=medium] .o-select--sm{--control-h-sm:var(--control-h);padding-inline:calc(var(--space-3) - 1px)}

/* Account and auth, added when the account menu got screens behind it.
   Layout only; every value is a token. */
/* A repeater row inside a form: one track definition, so the header eyebrows
   and every row resolve from the same columns (AGENTS §5.1). The trailing `auto`
   holds the remove control, which is why a row with nothing to remove still
   lines up with one that has it. */
.mq-repeat{display:grid;grid-template-columns:minmax(0,1fr) 9rem 7rem auto;align-items:center;gap:var(--space-2) var(--space-3)}
.mq-repeat--pair{grid-template-columns:minmax(0,1fr) 7rem auto}
.mq-repeat__head{padding-bottom:var(--space-1)}
.mq-repeat__head span{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-foreground)}
.mq-fields{display:flex;flex-direction:column;gap:var(--space-5)}
/* Label and its trailing link on one baseline — "Forgot password?" sits at the
   password field's trailing label edge (AGENTS §7.5). */
.mq-fieldrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.mq-checks{display:flex;flex-direction:column;gap:var(--space-2)}
.mq-check{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--text-sm)}
.mq-check__text{display:flex;flex-direction:column;gap:1px}
.mq-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-top:1px solid var(--border);background:color-mix(in srgb,var(--background) 88%,transparent);backdrop-filter:blur(4px);padding-block:var(--space-4)}
.mq-formbar__note{margin-inline-end:auto;font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}
/* Auth: its own shell, no navigation owner. One layout variant — centred card. */
.mq-auth{display:flex;min-height:100vh;align-items:center;justify-content:center;background:var(--sidebar);padding:var(--space-6)}
.mq-auth__col{display:flex;width:100%;max-width:24rem;flex-direction:column;gap:var(--space-5)}
/* The mark carries the brand here as it does in the bar; the desk sits under the
   name because there is no navigation to hand it to. */
.mq-auth__mark{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.mq-auth__logo{display:block;width:32px;height:32px}
.mq-auth__words{display:flex;flex-direction:column;align-items:center;gap:2px}
.mq-auth__foot{margin:0;text-align:center;font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
@media(max-width:767px){.mq-formbar .o-btn{min-height:44px}}

.mq-kv{display:flex;flex-direction:column;gap:var(--space-2);margin:0;font-size:var(--text-sm)}
.mq-kv>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.mq-kv dt{color:var(--muted-foreground)}
.mq-kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.mq-card-footer{justify-content:space-between;gap:var(--space-4);padding-top:var(--space-4)}

/* The delivered-against-promised bar on a creator's file. Drawn only where the
   index exists, so it never implies a judgement on a campaign still running. */
.mq-meter{display:block;height:6px;width:100%;max-width:14rem;overflow:hidden;border-radius:999px;background:var(--muted)}
.mq-meter__fill{display:block;height:100%;border-radius:999px;background:var(--foreground)}
.mq-meter__fill[data-tone=warn]{background:var(--warning)}
.mq-cband__name .mq-link{font:inherit;color:inherit}
.mq-mark{display:block;width:auto;flex:none}
.mq-mark__row{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.mq-photo{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.mq-photo__acts{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
