/* Meridian dashboard — layout only. Every colour, radius, shadow and step comes
   from the Reckon tokens; nothing here re-declares a design decision.
   Breakpoints are declared once, for the whole shell: 1280 expanded · 1024 rail
   · below that a drawer. Table column drops are declared once, per table. */

/* Viewport-height shell: the sidebar fills the screen and never scrolls with the
   content, so the account menu in its footer is always reachable. The single row is
   explicitly bounded — with columns only it would size to the nav's content and
   overflow:hidden would clip the footer instead of scrolling the nav. The scroll
   lives on .fd-inset (SidebarInset owns that in the design system). */
.fd-shell{--gutter-page:var(--space-6);--gutter-card:var(--space-6);display:grid;height:100dvh;overflow:hidden;grid-template-columns:var(--sidebar-width) minmax(0,1fr);grid-template-rows:minmax(0,1fr);background:var(--sidebar)}
.fd-shell[data-mode=rail]{grid-template-columns:4rem minmax(0,1fr)}
.fd-shell[data-mode=drawer]{grid-template-columns:minmax(0,1fr)}
.fd-shell[data-mode=rail] .fd-nav{width:4rem}
.fd-shell[data-mode=rail] .o-sidebar__button{justify-content:center;padding-inline:0}
.fd-shell[data-mode=drawer] .fd-nav{position:fixed;inset-block:0;inset-inline-start:0;z-index:60;width:17rem;box-shadow:var(--shadow-lg)}
.fd-drawer-scrim{position:fixed;inset:0;z-index:55;background:rgb(0 0 0/32%)}
.fd-inset{min-width:0}

.fd-nav__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.fd-brand{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1)}
.fd-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)}
.fd-brand__text{display:flex;min-width:0;flex-direction:column}
.fd-brand__logo{display:block;width:28px;height:28px;flex:none}
.fd-brand__name{font-family:var(--font-heading);font-weight:var(--font-weight-semibold);font-size:var(--text-sm);line-height:1.2}
.fd-brand__workspace{font-size:var(--text-xs);color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-nav .fd-floating-anchor{width:100%}
.fd-rail-dot{pointer-events:none;position:absolute;inset-inline-end:8px;top:8px;width:6px;height:6px;border-radius:999px;background:var(--warning);box-shadow:0 0 0 2px var(--sidebar)}

.fd-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}
.fd-account:hover{background:var(--sidebar-accent)}
.fd-account--rail{justify-content:center}
.fd-account__text{display:flex;min-width:0;flex-direction:column}
.fd-account__name{font-size:var(--text-sm);font-weight:var(--font-weight-medium);line-height:1.2}
.fd-account__role{font-size:var(--text-xs);color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-account .fd-icon{margin-inline-start:auto;color:var(--muted-foreground)}

.fd-toolbar{position:sticky;top:0;z-index:40;display:flex;height:var(--header-height);align-items:center;gap:var(--space-2);padding-inline:var(--gutter-page);background:color-mix(in srgb,var(--background) 82%,transparent);backdrop-filter:blur(4px);border-bottom:1px solid var(--border)}
.fd-search{flex:1;max-width:24rem;min-width:0}
.fd-search input{cursor:pointer}
.fd-toolbar__utility{margin-inline-start:auto;display:flex;align-items:center;gap:var(--space-1)}
.fd-utility{position:relative;display:inline-flex}
.fd-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)}

.fd-notify{padding:var(--space-2)}
.fd-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)}
.fd-notify__list{display:flex;flex-direction:column;gap:2px}
.fd-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}
.fd-notify__item:hover{background:var(--accent)}
.fd-notify__title{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.fd-notify__body{grid-column:1;font-size:var(--text-xs);color:var(--muted-foreground)}
.fd-notify__time{grid-row:1;grid-column:2;font-size:var(--text-xs);color:var(--muted-foreground)}

.fd-content{min-width:0;padding:var(--gutter-page);background:var(--background)}
.fd-page{display:flex;max-width:96rem;flex-direction:column;gap:var(--space-6);margin-inline:auto}
.fd-page-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}
.fd-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)}
.fd-page-header__actions{display:flex;align-items:center;gap:var(--space-2)}

.fd-scope{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)}
.fd-scope__control{display:flex;align-items:center;gap:var(--space-2)}
.fd-scope__label{font-size:var(--text-sm);color:var(--muted-foreground)}
.fd-scope__note{margin:0;font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}

.fd-metrics{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.fd-tile{position:relative}
.fd-tile__body{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-5)}
.fd-tile--icon .fd-tile__body{padding-right:calc(var(--space-5) + 2.75rem)}
/* 8px inset inside a --radius-2xl (16px) card, so the chip radius is 16 − 8. */
.fd-tile__icon{position:absolute;top:var(--space-2);right:var(--space-2);display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--background);color:var(--muted-foreground)}
.fd-tile__label{font-size:var(--text-sm);color:var(--muted-foreground)}
.fd-tile__value{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}
.fd-tile__qualifier{font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}

.fd-columns{display:grid;align-items:start;gap:var(--space-6);grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.fd-col{display:flex;min-width:0;flex-direction:column;gap:var(--space-6)}
.fd-card{width:100%}
.fd-card--table .o-card__header{padding-bottom:var(--space-4)}
.fd-card-tabs{padding-inline:var(--gutter-card)}
.fd-card-table{min-width:0;overflow-x:auto}
.fd-card-table table{min-width:100%}
.fd-card-table th,.fd-card-table td{padding-inline:var(--space-3)}
.fd-card-table th:first-child,.fd-card-table td:first-child{padding-inline-start:var(--gutter-card)}
.fd-card-table th:last-child,.fd-card-table td:last-child{padding-inline-end:var(--gutter-card)}
.fd-card-footer{justify-content:space-between;gap:var(--space-4);padding-top:var(--space-4)}
.fd-footnote{font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}

.fd-record{display:flex;flex-direction:column;gap:1px}
.fd-record__name{font-weight:var(--font-weight-medium)}
.fd-record__meta{font-size:var(--text-xs);color:var(--muted-foreground)}
.fd-record__meta code{font-family:var(--font-mono)}
.fd-num,.fd-actions,.fd-actions-head{text-align:right}
.fd-amount{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-medium)}
.fd-muted{color:var(--muted-foreground)}
.fd-sub{display:block;font-size:var(--text-xs);color:var(--muted-foreground)}
.fd-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1-5)}
.fd-actions__row{display:inline-flex;justify-content:flex-end;gap:var(--space-2)}
.fd-waiting{font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.fd-row--recessed{background:var(--muted);color:var(--muted-foreground)}
.fd-row--recessed .fd-record__name{font-weight:var(--font-weight-normal);color:var(--muted-foreground)}
.fd-tab-count{margin-inline-start:var(--space-1-5);color:var(--muted-foreground);font-variant-numeric:tabular-nums}

.fd-stack{display:flex;flex-direction:column;gap:var(--space-4)}
.fd-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}
.fd-figure__label{font-size:var(--text-sm);color:var(--muted-foreground)}
.fd-defs{display:flex;flex-direction:column;gap:var(--space-2);margin:0;font-size:var(--text-sm)}
.fd-defs>div{display:flex;justify-content:space-between;gap:var(--space-4)}
.fd-defs dt{color:var(--muted-foreground)}
.fd-defs dd{margin:0;font-variant-numeric:tabular-nums}
.fd-defs__total{border-top:1px solid var(--border);padding-top:var(--space-2);font-weight:var(--font-weight-medium)}
.fd-defs__total dt{color:var(--foreground)}

.fd-list{display:flex;flex-direction:column}
.fd-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)}
.fd-list__row:first-child{padding-top:0}
.fd-list__row:last-child{border-bottom:0;padding-bottom:0}
.fd-list__main{display:flex;min-width:0;flex-direction:column;gap:1px}
.fd-list__side{display:flex;flex-direction:column;gap:1px;text-align:right}
.fd-list__row .o-btn{grid-column:1/-1;justify-self:start}
.fd-clock{font-size:var(--text-xs)}
.fd-clock--warning{color:var(--warning-foreground)}
.fd-clock--danger{color:var(--destructive-foreground)}

.fd-mix{display:flex;flex-direction:column;gap:var(--space-2)}
.fd-mix__head{display:flex;justify-content:space-between;gap:var(--space-4);font-size:var(--text-sm)}
.fd-mix__count{margin-inline-start:var(--space-2);color:var(--muted-foreground);font-variant-numeric:tabular-nums}

.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}

/* Column drops — declared once, per table. The identifier, the amount, the
   clock and the action never drop. */
@media(max-width:1200px){.fd-drop-lg{display:none}}
@media(max-width:1400px){.fd-columns{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
@media(max-width:1100px){.fd-columns{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){.fd-drop-md{display:none}}
@media(max-width:767px){
  .fd-shell{--gutter-page:var(--space-4);--gutter-card:var(--space-4)}
  .fd-page-title{font-size:var(--text-2xl)}
  .fd-toolbar .o-btn,.fd-actions .o-btn{min-height:44px;min-width:44px}
  .fd-actions__row{flex-wrap:wrap}
}

/* ── Added when the product grew from one screen to eight: the list-screen
   furniture, the staged-form furniture, the proportion bar and the auth shell.
   Layout only; every value is a token. ────────────────────────────────────── */
.fd-filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.fd-filters__text{flex:1;min-width:12rem;max-width:22rem}
.fd-filters__select{display:block;width:13rem;flex:none}
.fd-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--accent);padding:var(--space-2) var(--space-3)}
.fd-bulk__count{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.fd-bulk__actions{margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.fd-fields{display:flex;flex-direction:column;gap:var(--space-5)}
.fd-checks{display:flex;flex-direction:column;gap:var(--space-2)}
.fd-check{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--text-sm)}
.fd-check__text{display:flex;flex-direction:column;gap:1px}
.fd-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)}
.fd-formbar__note{margin-inline-end:auto;font-size:var(--text-sm);color:var(--muted-foreground);text-wrap:pretty}
.fd-spread{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.fd-part{display:flex;flex-direction:column;gap:var(--space-2)}
.fd-bar{position:relative;display:block;height:8px;width:100%;overflow:hidden;border-radius:999px;background:var(--muted)}
.fd-bar__fill{display:block;height:100%;border-radius:999px;background:var(--foreground)}
.fd-bar--soft .fd-bar__fill{background:var(--muted-foreground)}
.fd-bar--warn .fd-bar__fill{background:var(--warning)}
.fd-columns--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fd-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}
.fd-link:hover{text-decoration-color:var(--foreground)}
.fd-picklist{display:flex;flex-direction:column}
.fd-pick{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-4);border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;padding:var(--space-3) var(--space-2);text-align:left;font:inherit;color:inherit;cursor:pointer}
.fd-pick:last-child{border-bottom:0}
.fd-pick:hover{background:var(--accent)}
.fd-pick--on{background:var(--accent)}
.fd-pick__foot{grid-column:1/-1;display:flex;gap:var(--space-2)}
/* The photo control on the profile form: one drop zone, the real preview beside
   it. The file input is present and functional, just not the visible surface. */
.fd-photo{display:grid;width:100%;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);align-items:start;padding:var(--space-4);border:1px dashed var(--border);border-radius:var(--radius-xl);background:var(--background)}
.fd-photo--over{border-color:var(--ring);background:var(--muted)}
.fd-photo__body{display:grid;gap:var(--space-2);min-width:0}
.fd-photo__note{font-size:var(--text-sm);text-wrap:pretty}
.fd-photo__actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.fd-photo__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:767px){.fd-photo{grid-template-columns:minmax(0,1fr)}}

/* Auth: its own shell, no navigation owner. TWO panels — the form on the left
   where reading starts, the brand plane on the right in --primary. Below 900px
   the brand panel is gone rather than stacked: on a phone the form is the
   screen. */
.fd-auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;background:var(--sidebar)}
.fd-auth__form{display:flex;align-items:center;justify-content:center;padding:var(--space-6)}
.fd-auth__col{display:flex;width:100%;max-width:26rem;flex-direction:column;gap:var(--space-5)}
.fd-auth__mark{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}
.fd-auth__logo{display:block;width:32px;height:32px;flex:none}
.fd-auth__switch{margin:0;text-align:center;font-size:var(--text-sm);color:var(--muted-foreground)}
.fd-auth__who{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0}
.fd-auth__foot{margin:0;text-align:center;font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}
.fd-auth__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2)}

/* The brand plane. The dots are one radial-gradient tiled at 18px, faded out
   towards the bottom-left by a mask so the type sits on clear ground — no
   second colour, and nothing drawn per dot. */
.fd-auth__brand{position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:var(--space-8);background:var(--primary);color:var(--primary-foreground)}
.fd-auth__dots{position:absolute;inset:0;background-image:radial-gradient(currentColor 1.5px,transparent 1.5px);background-size:18px 18px;opacity:.28;-webkit-mask-image:radial-gradient(120% 90% at 100% 0%,#000 10%,transparent 72%);mask-image:radial-gradient(120% 90% at 100% 0%,#000 10%,transparent 72%);pointer-events:none}
.fd-auth__brandcol{position:relative;display:grid;gap:var(--space-3);max-width:30rem}
.fd-auth__eyebrow{margin:0;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;opacity:.7}
.fd-auth__title{margin:0;font-family:var(--font-heading);font-weight:var(--font-weight-semibold);font-size:var(--text-3xl);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);text-wrap:pretty}
.fd-auth__text{margin:0;font-size:var(--text-base);line-height:var(--leading-relaxed);opacity:.82;text-wrap:pretty}
.fd-auth__note{margin:0;padding-top:var(--space-3);border-top:1px solid rgb(255 255 255/16%);font-size:var(--text-xs);opacity:.66;text-wrap:pretty}

/* Password requirements, shown as they are met. */
.fd-rules{display:grid;gap:var(--space-1);padding-top:var(--space-1)}
.fd-rule{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--muted-foreground)}
.fd-rule--met{color:var(--success-foreground)}
@media(max-width:899px){.fd-auth{grid-template-columns:minmax(0,1fr)}.fd-auth__brand{display:none}}
@media(max-width:767px){.fd-formbar .o-btn{min-height:44px}}

/* ── Added when expenses, cards and reports joined the product: the day chart,
   the card grid and the team form. Layout only. ──────────────────────────── */
/* The day chart. Every bar is a figure and carries its own tooltip; the
   tooltip anchor — not the column — is the grid item, so it has to stretch or
   every percentage height inside it resolves against a content-sized box. */
.fd-chartbox{display:flex;flex-direction:column;gap:var(--space-2)}
.fd-chart{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:stretch;gap:3px;height:8rem;border-bottom:1px solid var(--border);padding-bottom:2px}
.fd-chart--tall{height:12rem}
.fd-chart>.fd-floating-anchor{height:100%;min-width:0}
.fd-chart__col{display:flex;height:100%;width:100%;align-items:flex-end;justify-content:center;gap:2px;min-width:0}
.fd-chart__bar{display:block;width:100%;min-height:2px;border-radius:var(--radius-xs) var(--radius-xs) 0 0;background:var(--foreground)}
.fd-chart__bar--soft{background:var(--muted-foreground)}
.fd-chart__bar--warn{background:var(--warning)}
.fd-chart__bar--empty{height:2px;min-height:2px;background:var(--muted)}
.fd-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}
.fd-chart__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-4)}
.fd-legend{display:flex;flex-wrap:wrap;gap:var(--space-3);font-size:var(--text-xs);color:var(--muted-foreground)}
.fd-legend__item{display:inline-flex;align-items:center;gap:var(--space-1-5)}
.fd-legend__swatch{display:inline-block;width:10px;height:10px;flex:none;border-radius:3px;background:var(--foreground)}

/* Cards: equal-weight tiles, so this grid may auto-fit. */
.fd-cardgrid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.fd-cardgrid>.o-card{height:100%;display:flex;flex-direction:column}
.fd-cardgrid .fd-card-footer{margin-top:auto}
.fd-cardhead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.fd-pan{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.1em}
.fd-holder{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}
.fd-meta{display:flex;flex-wrap:wrap;gap:2px var(--space-3);font-size:var(--text-xs);color:var(--muted-foreground)}
.fd-cell-control{display:block;width:11rem;max-width:100%}
.fd-check--inline{align-items:center}

/* Notes and faces. Layout only: every colour is a token, and the overlap ring
   is the card's own background so a stack reads as one object on any surface. */
.fd-faces{display:flex;align-items:center}
.fd-faces>*+*{margin-left:calc(var(--space-2) * -1)}
/* A single face carries no ring: the timeline rail runs behind the circle and
   the avatar itself masks it. The ring exists only to separate faces that
   OVERLAP in a stack, so only a stack gets one. */
.fd-face{display:inline-flex;border-radius:999px}
.fd-faces .fd-face{box-shadow:0 0 0 2px var(--face-ring,var(--card))}
.fd-faces__more{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 var(--space-1);border-radius:999px;background:var(--muted);box-shadow:0 0 0 2px var(--card);font-size:var(--text-2xs);color:var(--muted-foreground)}
.fd-thread{display:grid;gap:var(--space-4)}
.fd-note,.fd-reply{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);align-items:start}
.fd-reply{grid-template-columns:auto minmax(0,1fr) auto}
.fd-note__body{display:grid;gap:2px;min-width:0}
.fd-note__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.fd-note__who{font-size:var(--text-sm);font-weight:var(--font-weight-medium)}
.fd-note__when,.fd-note__on{font-size:var(--text-xs);color:var(--muted-foreground)}
.fd-note__text{margin:0;font-size:var(--text-sm);line-height:var(--leading-normal);text-wrap:pretty}
.fd-mention{font-weight:var(--font-weight-medium);background:var(--muted);border-radius:var(--radius-sm);padding:0 3px}
.fd-replies{display:grid;gap:var(--space-4)}
.fd-composer{display:grid;gap:var(--space-2)}
.fd-composer__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.fd-composer__spacer{flex:1 1 var(--space-4)}
/* Activity feed. One centred column on a timeline rail: a note is a post with
   weight, everything the platform did is a quiet line on the same rail. The
   rail is a single pseudo-element behind the rows, so nothing is drawn per row
   and the spacing survives any row being removed. */
/* The feed is the primary content, so it gets a floor and the rail gets a cap:
   the rail can never grow wider than the column it sits beside. */
.fd-feedlayout{display:grid;grid-template-columns:minmax(26rem,1fr) minmax(17rem,22rem);gap:var(--space-5);align-items:start}
/* The rows inside reflow against the COLUMN, not the viewport — the column is
   what actually constrains them once a rail is beside it. */
.fd-feedwrap{display:grid;gap:var(--space-4);width:100%;min-width:0;container-type:inline-size}
.fd-aside{display:grid;gap:var(--space-4);align-content:start}
.fd-rank{display:grid}
.fd-rank__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border:0;border-bottom:1px solid var(--border);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.fd-rank__row:last-child{border-bottom:0}
.fd-rank__row:hover .fd-record__name{text-decoration:underline;text-underline-offset:3px}
.fd-rank__count{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--muted-foreground);font-variant-numeric:tabular-nums}
@media(max-width:899px){.fd-feedlayout{grid-template-columns:minmax(0,1fr)}.fd-aside{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}}
.fd-feedhead{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0;background:var(--background)}
.fd-feedcall{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--muted)}
.fd-feedcall__text{margin:0;font-size:var(--text-sm);line-height:var(--leading-normal);text-wrap:pretty}
.fd-feedcall__faces{display:flex;flex:none}
.fd-timeline{display:grid;gap:var(--space-8)}
.fd-timeline__day{display:grid;gap:var(--space-4)}
.fd-timeline__label{margin:0;display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-foreground);font-weight:var(--font-weight-medium)}
.fd-timeline__label::after{content:"";flex:1;border-top:1px solid var(--border)}
.fd-timeline__rows{position:relative;display:grid;gap:var(--space-4)}
/* The rail is drawn INSIDE each row, in its own avatar gutter, so it threads
   through the faces instead of being painted over by the opaque post cards.
   left is 2rem: the row's own 12px padding plus half the 2.5rem face column.
   Each segment reaches into the 8px gap below it, and the last row has none, so
   the line ends on the last face rather than running off the group. */
.fd-timeline__rows>*{position:relative}
/* Both row types pad by --space-4, so a face center sits at 16 + 20 = 36px and
   one rail offset serves both. */
.fd-timeline__rows>*::before{content:"";position:absolute;left:2.25rem;top:0;bottom:calc(var(--space-4) * -1);border-left:1px solid var(--border)}
.fd-timeline__rows>*:last-child::before{display:none}
.fd-timeline__rows>.fd-post::before{top:var(--space-4)}
.fd-timeline__end{margin:0;padding-left:3.5rem;font-size:var(--text-xs);color:var(--muted-foreground);text-wrap:pretty}

.fd-post{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:var(--space-3);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card)}
.fd-post--owed{background:var(--muted)}
.fd-post__face{display:flex;flex:none;position:relative}
.fd-post__body{display:grid;gap:var(--space-1-5);min-width:0}
.fd-post__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1-5);min-height:1.5rem}
.fd-post__who{font-size:var(--text-sm);font-weight:var(--font-weight-semibold)}
.fd-post__dot,.fd-line__dot{color:var(--muted-foreground)}
.fd-post__when{font-size:var(--text-xs);color:var(--muted-foreground)}
.fd-post__on{display:inline-flex;align-items:center;gap:var(--space-1);margin-left:auto;padding:2px var(--space-2);border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--muted-foreground);font:inherit;font-size:var(--text-2xs);cursor:pointer}
.fd-post__on:hover{color:var(--foreground);border-color:var(--foreground)}
.fd-post__text{margin:0;font-size:var(--text-base);line-height:var(--leading-relaxed);text-wrap:pretty}
.fd-post__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-0-5)}
.fd-post__people{display:flex}
.fd-post__spacer{flex:1 1 var(--space-4)}

.fd-line{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;align-items:baseline;gap:var(--space-3);padding:var(--space-2) var(--space-4)}
.fd-line__face,.fd-line__mark{align-self:start;justify-self:center;display:inline-flex;align-items:center;justify-content:center;position:relative}
.fd-line__mark{width:1.5rem;height:1.5rem;border-radius:999px;background:var(--muted);color:var(--muted-foreground);box-shadow:0 0 0 3px var(--background)}
.fd-line__text{margin:0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--muted-foreground);text-wrap:pretty}
.fd-line__who{color:var(--foreground);font-weight:var(--font-weight-medium)}
.fd-line__when{font-size:var(--text-xs);color:var(--muted-foreground);white-space:nowrap}
@media(max-width:899px){.fd-feedlayout{grid-template-columns:minmax(0,1fr)}.fd-aside{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}}
@container (max-width:32rem){.fd-feedcall{grid-template-columns:auto minmax(0,1fr)}.fd-feedcall>*:last-child{grid-column:1/-1;justify-self:start}.fd-post__on{margin-left:0}.fd-line{grid-template-columns:2.5rem minmax(0,1fr)}.fd-line__when{grid-column:2}}
@media(max-width:767px){.fd-reply{grid-template-columns:auto minmax(0,1fr)}.fd-reply>*:last-child{grid-column:2;justify-self:start}}
@media(max-width:767px){.fd-chart{height:6.5rem}.fd-chart--tall{height:9rem}}
