/* ============================================================================
   Defcon PM kit — component library
   Transcribed from the Figma file (dfdwOp0lLu7qX12wAZXMAL), 2026-09-08.
   Every number here was read out of the design, not invented. Figma is not
   needed to use this file.
   Load tokens/tokens.css first, or paste the :root block from it above this.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

body.dfc {
  margin: 0;
  font: var(--font-text-md-regular);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

/* ── 1. App shell ─────────────────────────────────────────────────────────
   1440×900 desktop. 280px fixed sidebar + fluid body.                      */
.dfc-app      { display: flex; height: 100vh; overflow: hidden; }
.dfc-body     { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; background: var(--bg-primary); }
.dfc-content  { flex: 1 1 0; min-height: 0; overflow: auto; }

/* ── 2. Sidebar ───────────────────────────────────────────────────────── */
.dfc-sidebar {
  width: var(--sidebar-width); flex: 0 0 var(--sidebar-width);
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  padding: 10px 8px;
  background: var(--bg-tertiary);
  border-right: 1px solid var(--border-primary);
  overflow: auto;
}
.dfc-sidebar__header    { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.dfc-workspace          { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-md); }
.dfc-workspace__name    { font: var(--font-text-md-medium); color: var(--text-primary); }
.dfc-sidebar__menu      { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.dfc-sidebar__group     { display: flex; flex-direction: column; gap: 1px; width: 100%; }

.dfc-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 12px; border-radius: var(--radius-md);
  font: var(--font-text-md-regular); color: var(--text-primary);
  background: var(--bg-tertiary); cursor: pointer;
}
.dfc-menu-item:hover      { background: var(--bg-tertiary_hover); }
.dfc-menu-item > svg      { width: 14px; height: 14px; flex: none; color: var(--icon-primary); }

.dfc-sidebar-section-header {
  display: flex; align-items: center; width: 100%; height: 30px;
  padding: 6px 8px; border-radius: var(--radius-md);
  font: var(--font-text-sm-medium); color: var(--text-tertiary);
}

.dfc-teamspace {
  display: flex; align-items: center; gap: 4px; width: 100%; height: 32px;
  padding: 6px 6px 6px 4px; border-radius: var(--radius-sm); cursor: pointer;
}
.dfc-teamspace__caret { width: 20px; height: 20px; border-radius: var(--radius-xs); flex: none;
                        display: grid; place-items: center; color: var(--icon-primary); }
.dfc-teamspace__mark  { width: 20px; height: 20px; flex: none; border-radius: var(--radius-xs);
                        background: var(--bg-secondary); border: 1px solid var(--border-primary);
                        display: grid; place-items: center;
                        font: 500 14px/20px var(--font-family); color: var(--text-secondary); }
.dfc-teamspace__name  { flex: 1 1 0; min-width: 0; font: var(--font-text-md-medium);
                        color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dfc-project {
  display: flex; align-items: center; width: 100%; height: 32px;
  padding: 6px 10px 6px 54px; border-radius: var(--radius-md);
  font: var(--font-text-md-regular); color: var(--text-primary);
  background: var(--bg-tertiary); cursor: pointer;
}
.dfc-project:hover, .dfc-project[aria-current="page"] { background: var(--bg-tertiary_hover); }

/* ── 3. Page header (56px) ────────────────────────────────────────────── */
.dfc-page-header {
  height: var(--page-header-height); flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px; background: var(--bg-primary);
}
.dfc-page-header__title { display: flex; align-items: center; gap: 8px; }
.dfc-page-header__title h1 { margin: 0; font: var(--font-header-h4); color: var(--text-primary); }
.dfc-page-header__controls { display: flex; align-items: center; gap: 16px; }

/* The description band. THE-BRAIN doctrine: every board and grid page opens
   title → description (emoji, and a link out to the walkthrough) → filters.
   It is what makes a set of pages read as one system. Never omit it. */
.dfc-page-desc {
  padding: 0 32px 12px; background: var(--bg-primary);
  font: var(--font-text-md-regular); font-style: italic; color: var(--text-tertiary);
}
.dfc-page-desc a { color: var(--text-brand); }

/* ── 4. Toolbar (36px, view tabs + filters) ───────────────────────────── */
.dfc-toolbar {
  height: var(--toolbar-height); flex: none;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 0 32px 0 24px;
  background: var(--bg-primary); border-bottom: 1px solid var(--border-primary);
}
.dfc-tabs      { display: flex; align-items: flex-start; gap: 6px; height: 36px; }
.dfc-tab       { display: flex; flex-direction: column; padding-bottom: 8px; border-bottom: 2px solid transparent; cursor: pointer; }
.dfc-tab[aria-selected="true"] { border-bottom-color: var(--border-quartiary); }
.dfc-tab__inner{ display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radius-sm);
                 font: var(--font-text-md-medium); color: var(--text-tertiary); }
.dfc-tab[aria-selected="true"] .dfc-tab__inner { color: var(--text-primary); }
.dfc-tab__inner > svg { width: 16px; height: 16px; flex: none; }

.dfc-filters   { display: flex; align-items: center; justify-content: flex-end; gap: 6px; height: 28px; }
.dfc-filter    { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radius-sm);
                 font: var(--font-text-md-medium); color: var(--text-tertiary); cursor: pointer; }
.dfc-filter:hover { background: var(--bg-primary_hover); }
.dfc-filter[aria-pressed="true"] { color: var(--text-primary); }
.dfc-filter > svg { width: 16px; height: 16px; flex: none; }

/* ── 5. Buttons ───────────────────────────────────────────────────────── */
.dfc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 80px; padding: 7px 16px; border-radius: var(--radius-sm);
  font: var(--font-text-md-medium); text-align: center;
  border: 1px solid transparent; cursor: pointer;
}
.dfc-btn--sm  { min-width: 0; padding: 3px 8px; gap: 4px; font: var(--font-text-13-medium); }
.dfc-btn--primary   { background: var(--button-primary-bg); border-color: var(--button-primary-border); color: var(--text-white); }
.dfc-btn--primary:hover  { background: #6287e6; border-color: #6287e6; }
.dfc-btn--primary:active { background: #5b75d2; border-color: #5b75d2; }
.dfc-btn--secondary { background: var(--button-secondary-bg); border-color: var(--button-secondary-border); color: var(--text-primary); }
.dfc-btn--secondary:hover  { border-color: var(--border-primary_hover); }
.dfc-btn--ghost     { background: transparent; border-color: transparent; color: var(--text-primary); }
.dfc-btn--ghost:hover { background: var(--bg-primary_hover); }
.dfc-btn > svg { width: 14px; height: 14px; flex: none; }
/* Disabled. Same 45% the disabled in-cell button uses (section 18b), so the two
   read as one state rather than two. Dimmed, never hidden -- an action that is
   not available yet should be visible as not available yet. */
.dfc-btn:disabled, .dfc-btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.dfc-btn:disabled:hover { background: var(--button-secondary-bg); }

/* Square icon buttons. 24 is the page/table/modal default, 28 the sidebar collapse. */
.dfc-icon-btn { width: 24px; height: 24px; flex: none; border: 0; background: transparent;
                border-radius: var(--radius-xs); display: grid; place-items: center; cursor: pointer; color: var(--icon-primary); }
.dfc-icon-btn:hover  { background: var(--bg-tertiary_hover); }
.dfc-icon-btn > svg  { width: 18px; height: 18px; }
.dfc-icon-btn--28    { width: 28px; height: 28px; border-radius: var(--radius-sm); }
.dfc-icon-btn--20    { width: 20px; height: 20px; }
.dfc-icon-btn--r4    { border-radius: var(--radius-sm); }

/* ── 6. Form controls ─────────────────────────────────────────────────── */
.dfc-field       { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.dfc-field__label{ font: var(--font-text-sm-medium); color: var(--text-tertiary); }
.dfc-field__hint { font: var(--font-text-sm-regular); color: var(--text-tertiary); }
.dfc-field__error{ font: var(--font-text-sm-regular); color: var(--text-error); }

.dfc-input {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 36px;
  padding: 7px 13px; border-radius: var(--radius-sm);
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  font: var(--font-text-md-regular); color: var(--text-primary);
}
.dfc-input::placeholder { color: var(--text-tertiary); }
.dfc-input:hover  { border-color: var(--border-primary_hover); }
.dfc-input:focus, .dfc-input:focus-visible { outline: 0; border-color: var(--border-focus); }
.dfc-input[aria-invalid="true"] { border-color: var(--border-error); }
.dfc-textarea { min-height: 80px; height: auto; align-items: flex-start; resize: vertical; }

/* Dropdown trigger — 1px asymmetric padding (13 left / 9 right) is intentional:
   it optically centres the 14px chevron. Don't "tidy" it to 12/12. */
.dfc-select {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px 7px 13px; border-radius: var(--radius-sm);
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  font: var(--font-text-md-regular); color: var(--text-primary); cursor: pointer;
}
.dfc-select:hover { border-color: var(--border-primary_hover); }
.dfc-select--borderless { border-color: transparent; }   /* task-details fields */
.dfc-select__value  { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px;
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfc-select__value:empty::before,
.dfc-select__placeholder { color: var(--text-tertiary); }
.dfc-select > svg   { width: 14px; height: 14px; flex: none; color: var(--icon-primary); }

/* ── 7. Popovers / menus / dropdown lists ─────────────────────────────── */
.dfc-popover {
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: var(--radius-md); padding: 4px 0;
  box-shadow: 0 0 3px rgba(0,0,0,0.1);
  display: flex; flex-direction: column; align-items: stretch;
}
.dfc-popover__item {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  font: var(--font-text-md-regular); color: var(--text-primary);
  background: var(--bg-primary); cursor: pointer;
}
.dfc-popover__item:hover        { background: var(--bg-primary_hover); }
.dfc-popover__item--member      { padding: 6px 12px; }
.dfc-popover__item--search      { color: var(--text-tertiary); }
.dfc-popover__item--empty       { color: var(--text-tertiary); }
.dfc-popover__item > svg.check  { width: 14px; height: 14px; margin-left: auto; flex: none; }
.dfc-popover__separator         { height: 1px; background: var(--border-secondary); margin: 4px 0; }

/* ── 8. Tags, badges, status dots, avatars ────────────────────────────── */
.dfc-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; border-radius: var(--radius-xs);
  font: var(--font-text-sm-regular); white-space: nowrap;
}
.dfc-tag--blue   { background: var(--color-blue-50);   color: var(--color-blue-900); }
.dfc-tag--green  { background: var(--color-green-50);  color: var(--color-green-900); }
.dfc-tag--red    { background: var(--color-red-50);    color: var(--color-red-900); }
.dfc-tag--orange { background: var(--color-orange-50); color: var(--color-orange-900); }
.dfc-tag--teal   { background: var(--color-teal-50);   color: var(--color-teal-600); }
.dfc-tag--grey   { background: var(--color-grey-100);  color: var(--text-secondary); }
/* Medium/High priority pills use the 100 step, not 50 — deliberate, keeps them louder. */
.dfc-tag--orange-strong { background: var(--color-orange-100); color: var(--color-orange-900); }
.dfc-tag--red-strong    { background: var(--color-red-100);    color: var(--color-red-900); }

.dfc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 1px 8px; border-radius: var(--radius-badge);
  font: var(--font-text-sm-regular);
}
.dfc-badge--green { background: var(--color-green-50); color: var(--color-green-900); }
.dfc-badge--blue  { background: var(--color-blue-50);  color: var(--color-blue-900); }
.dfc-badge--red   { background: var(--color-red-50);   color: var(--color-red-900); }

.dfc-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; display: inline-block; }
.dfc-dot--grey { background: var(--color-grey-600); }
.dfc-dot--blue { background: var(--color-blue-500); }
.dfc-dot--green{ background: var(--color-green-400); }
.dfc-dot--red  { background: var(--color-red-400); }
.dfc-dot--orange{background: var(--color-orange-500); }

.dfc-ava      { width: 24px; height: 24px; border-radius: var(--radius-pill); flex: none; object-fit: cover;
                display: grid; place-items: center; font: var(--font-text-sm-medium); }
.dfc-ava--20  { width: 20px; height: 20px; }
.dfc-ava--32  { width: 32px; height: 32px; }
.dfc-ava-stack{ display: flex; align-items: center; }
.dfc-ava-stack > * { margin-right: -4px; }
.dfc-ava-stack > *:last-child { margin-right: 0; }

/* ── 9. Board (kanban) ────────────────────────────────────────────────── */
.dfc-board          { display: flex; align-items: flex-start; gap: 112px; padding: 24px 32px; }
.dfc-board__column  { width: var(--board-column-width); flex: none; display: flex; flex-direction: column; gap: 16px; }
.dfc-board__header  { height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.dfc-board__header h2 { margin: 0; font: var(--font-text-lg-medium); color: var(--text-primary); }
.dfc-board__count   { font: var(--font-text-13-medium); color: var(--text-tertiary); }
.dfc-board__tasks   { display: flex; flex-direction: column; gap: 12px; }
.dfc-board__label   { font: var(--font-text-lg-medium); color: var(--text-primary); }

/* The 112px gutter is what the Figma draws at 1440 -- with three columns on the
   artboard. A board built to the column rule (every stage on the ladder gets a
   column) runs 7-10 columns, where 112 puts 40% of the board's width into dead
   space and pushes the last stage 4,000px off-screen. --dense drops the gutter
   to the kit's own standard 16 and is the correct default past four columns. */
.dfc-board--dense   { gap: 16px; }

/* Collapsed column -- 48px vertical strip, one click to reopen. components.md
   section 9 has always specified it; this is the CSS for it. Terminal off-ladder
   stages (Blocked / Rejected / Paused) arrive in this state. */
.dfc-board__column--collapsed {
  width: 48px; align-items: center; gap: 8px; padding: 8px 0;
  border-radius: var(--radius-sm); background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary); cursor: pointer;
}
.dfc-board__column--collapsed .dfc-board__label {
  writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap;
}

/* Numbered exception stages (9 -, 19 -, 29 -) stay open and read red. They are
   ON the ladder and they are what the board exists to surface. */
.dfc-board__header--exception .dfc-board__label,
.dfc-board__header--exception .dfc-board__count { color: var(--text-error); }

/* Drag states. A card in flight goes translucent; the column under the pointer
   shows where it would land. */
.dfc-card--dragging { opacity: .4; }
.dfc-board__column--over .dfc-board__tasks {
  outline: 1px dashed var(--border-brand); outline-offset: 4px; border-radius: var(--radius-sm);
}

.dfc-card {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  cursor: pointer;
}
.dfc-card:hover      { border-color: var(--border-primary_hover); }
.dfc-card__title     { font: var(--font-text-md-medium); color: var(--text-primary); }
.dfc-card__tags      { display: flex; gap: 6px; flex-wrap: wrap; }
.dfc-card__footer    { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.dfc-card__assignee  { display: flex; align-items: center; gap: 6px; font: var(--font-text-sm-regular); color: var(--text-primary); }
.dfc-card__meta      { display: flex; align-items: center; justify-content: flex-end; gap: 12px;
                       flex: 1 1 0; min-height: 20px; font: var(--font-text-sm-regular); color: var(--text-primary); }
.dfc-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.dfc-card__meta svg  { width: 14px; height: 14px; color: var(--icon-primary); }

.dfc-add-new {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 12px; border-radius: var(--radius-sm);
  font: var(--font-text-md-medium); color: var(--text-tertiary);
  background: transparent; border: 0; cursor: pointer;
}
.dfc-add-new:hover { background: var(--bg-tertiary); }
.dfc-add-new > svg { width: 16px; height: 16px; flex: none; }

/* ── 10. Table view ───────────────────────────────────────────────────── */
.dfc-table__section-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: var(--bg-primary);
}
.dfc-table__section-header h2 { margin: 0; font: var(--font-text-lg-medium); color: var(--text-primary); }
.dfc-table__section-count     { font: var(--font-text-13-medium); color: var(--text-tertiary); }
.dfc-table__section-controls  { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-left: auto; }

.dfc-table__header {
  display: flex; align-items: stretch; height: 34px; padding: 0 24px;
  background: var(--color-grey-50); border-bottom: 1px solid var(--border-primary);
}
.dfc-table__hcell {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  font: var(--font-text-sm-medium); color: var(--text-tertiary); white-space: nowrap;
}
.dfc-table__row   { display: flex; align-items: center; height: 42px; padding: 0 24px; }
.dfc-table__row:hover .dfc-table__cell { background: var(--bg-primary_hover); }
.dfc-table__cell  {
  display: flex; align-items: center; height: 42px; padding: 9px 13px 9px 12px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-secondary);
  border-bottom: 1px solid var(--border-secondary);
  border-right: 1px solid var(--border-secondary);
  font: var(--font-text-sm-regular); color: var(--text-primary);
}
.dfc-table__cell--name { flex: 1 1 0; min-width: 0; padding-right: 9px; gap: 8px;
                         font: var(--font-text-md-medium); }
.dfc-table__cell--name > svg { width: 16px; height: 16px; flex: none; color: var(--icon-primary); }
.dfc-table__cell--last { border-right: 0; }
/* Column widths as drawn: name = fluid, then 136 / 120 / 240 / 32. */
.dfc-table__cell--assignee { width: 136px; flex: none; gap: 6px; }
.dfc-table__cell--date     { width: 120px; flex: none; }
.dfc-table__cell--label    { width: 240px; flex: none; gap: 6px; }
.dfc-table__cell--tail     { width: 32px;  flex: none; padding: 9px 12px; }

.dfc-table__add { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 36px;
                  font: var(--font-text-md-medium); color: var(--text-tertiary); cursor: pointer; }

/* ── 11. Record detail (sidebar 680px, or full page) ──────────────────── */
/* Doctrine: the panel opens from the RIGHT at about one third of the page.
   480 of 1440 = 33%. The kit's own 680 is the wide/full-page variant. */
.dfc-detail            { width: var(--detail-width); display: flex; flex-direction: column;
                         background: var(--bg-primary); border-left: 1px solid var(--border-primary); }
.dfc-detail--wide      { width: 680px; }
/* The 'page' variant is the SAME 680 panel, centred in the body — verified against
   Task details [page] (3199:25885): a 680 column at x=240 inside the 1160 body,
   32px inner padding, so content is 616 wide. It is not a full-bleed layout. */
.dfc-detail--page      { width: 100%; max-width: 680px; margin: 16px auto; }
/* --dock is the doctrine case: the panel SLIDES IN FROM THE RIGHT over the view
   that opened it, so the board stays visible behind it. --scrim closes it. */
.dfc-detail--dock {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--bg-primary); border-left: 1px solid var(--border-primary);
  box-shadow: var(--shadow-xl);
}
.dfc-detail__scrim { position: fixed; inset: 0; z-index: 39; border: 0; padding: 0;
                     background: rgba(0,0,0,.45); cursor: pointer; }
.dfc-detail__header    { height: 48px; flex: none; display: flex; align-items: center;
                         padding: 0 16px 0 24px; border-bottom: 1px solid var(--border-secondary); }
.dfc-detail__nav       { display: flex; align-items: center; gap: 12px; }
.dfc-detail__actions   { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-left: auto; }
.dfc-detail__divider   { width: 1px; height: 18px; background: var(--border-secondary); flex: none; }
.dfc-detail__body      { flex: 1 1 0; min-height: 0; overflow: auto; padding: 24px 32px; }
/* Use --flow when the panel sits in normal page flow (embedded, printed, or a full
   page view). Without it the body is a scroll container and collapses to 0 height
   inside a parent that has no height of its own. */
.dfc-detail--flow, .dfc-detail--flow .dfc-detail__body { height: auto; overflow: visible; flex: none; }
.dfc-detail__title     { margin: 0 0 16px; font: var(--font-header-h3); color: var(--text-primary); }

.dfc-detail__fields    { display: flex; flex-direction: column; gap: 8px; }

/* Sections, not a flat field list. Each leads with its title, then an italic
   description, and carries a button at the top — a Modal script against this
   record, or delete. Actions live next to the fields they act on: that is what
   turns a reading surface into a control surface. */
.dfc-detail__section      { display: flex; flex-direction: column; gap: 8px; padding: 16px 0;
                            border-bottom: 1px solid var(--border-secondary); }
.dfc-detail__section:last-child { border-bottom: 0; }
.dfc-detail__section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dfc-detail__section-head h2 { margin: 0; font: var(--font-text-lg-medium); color: var(--text-primary); }
.dfc-detail__section-desc { margin: 0; font: var(--font-text-sm-regular); font-style: italic;
                            color: var(--text-tertiary); }
.dfc-detail__field-desc   { display: block; font: var(--font-text-sm-regular); font-style: italic;
                            color: var(--text-tertiary); }
.dfc-detail__field     { display: flex; align-items: center; gap: 8px; height: 36px; padding-right: 40px; }
/* A field that carries its own description cannot live in a 36px row -- the
   description is a block under the label. Same row, allowed to grow. */
.dfc-detail__field--desc { height: auto; min-height: 36px; align-items: flex-start;
                           padding-top: 8px; padding-bottom: 8px; }
.dfc-detail__label     { width: 120px; flex: none; font: var(--font-text-13-medium); color: var(--text-tertiary); }
.dfc-detail__value     { flex: 1 1 0; min-width: 0; }

.dfc-comment           { display: flex; align-items: flex-start; gap: 8px; }
.dfc-comment__body     { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.dfc-comment__head     { display: flex; align-items: baseline; gap: 4px; }
.dfc-comment__author   { font: var(--font-text-md-medium); color: var(--text-primary); }
.dfc-comment__time     { font: var(--font-text-sm-regular); color: var(--text-tertiary); }
.dfc-comment__text     { margin: 0; font: var(--font-text-md-regular); color: var(--text-primary); }
.dfc-mention           { color: var(--text-brand); }

/* ── 12. Modal ────────────────────────────────────────────────────────── */
.dfc-overlay { position: fixed; inset: 0; background: rgba(37,39,45,0.32);
               display: grid; place-items: center; z-index: 100; }
.dfc-modal   { width: 480px; max-height: 84vh; display: flex; flex-direction: column;
               background: var(--bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; }
.dfc-modal__header {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px 16px 32px;
  background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary);
}
.dfc-modal__header h2 { margin: 0; font: var(--font-text-lg-medium); color: var(--text-primary); }
.dfc-modal__body   { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 24px 32px;
                     display: flex; flex-direction: column; gap: 16px; }
.dfc-modal__footer { flex: none; display: flex; align-items: center; gap: 12px;
                     padding: 24px 32px; background: var(--bg-primary);
                     border-top: 1px solid var(--border-secondary); }
.dfc-modal__footnote { font: var(--font-text-sm-regular); color: var(--text-tertiary); }
.dfc-modal__member { display: flex; align-items: center; gap: 12px; height: 56px; }

/* ── 13. Notifications ────────────────────────────────────────────────── */
.dfc-notification {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 16px 24px; background: var(--bg-primary);
  border-bottom: 0.5px solid var(--border-secondary);
}
.dfc-notification__user { display: flex; align-items: center; gap: 12px; width: 100%; }
.dfc-notification__text { font: var(--font-text-md-regular); color: var(--text-primary); }
.dfc-notification__text strong { font-weight: 500; }
.dfc-notification__meta { display: flex; gap: 4px; font: var(--font-text-sm-regular); color: var(--text-tertiary); }
.dfc-notification__controls { display: flex; align-items: center; gap: 8px; padding-left: 40px; }
.dfc-notification__unread { position: absolute; top: 16px; right: 16px; }

/* ── 14. Dashboard ────────────────────────────────────────────────────── */
/* 4 across x 2 down. Doctrine: 4-8 scorecards — 8 fills the grid, 4 fills row
   one, anything between leaves a gap that reads as an omission. */
.dfc-dash        { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 24px 32px; }
.dfc-dash-charts { display: grid; gap: 16px; padding: 0 32px 24px; }   /* 1-4 graphs */
.dfc-dash-tables { padding: 0 0 24px; }                                 /* then tables */
.dfc-stat {
  position: relative; height: 95px; padding: 15px;
  background: var(--bg-primary); border: 0.5px solid var(--border-primary);
  border-radius: var(--radius-lg); overflow: hidden;
}
.dfc-stat__label { font: var(--font-text-sm-medium); color: var(--text-tertiary); }
.dfc-stat__value { margin-top: 12px; font: var(--font-header-h3); color: var(--text-primary); }
.dfc-stat__spark { position: absolute; top: 17px; right: 14px; width: 71px; height: 27px; }
.dfc-stat__delta { position: absolute; right: 17px; bottom: 13px;
                   display: flex; align-items: center; gap: 8px;
                   font: var(--font-text-sm-medium); color: var(--text-brand); }
.dfc-stat__delta--down { color: var(--text-error); }
/* Thresholds are set up front, not reasoned about afterwards. A number without
   a threshold is trivia; coloured, it becomes an instruction. */
.dfc-stat--good .dfc-stat__value { color: var(--text-success); }
.dfc-stat--warn .dfc-stat__value { color: var(--color-orange-800); }
.dfc-stat--bad  .dfc-stat__value { color: var(--text-error); }

.dfc-panel        { background: var(--bg-primary); border: 0.5px solid var(--border-primary); border-radius: var(--radius-lg); overflow: hidden; }
.dfc-panel__header{ display: flex; align-items: center; justify-content: space-between;
                    height: 48px; padding: 0 16px; border-bottom: 1px solid var(--border-secondary); }
.dfc-panel__header h3 { margin: 0; font: var(--font-text-lg-medium); color: var(--text-primary); }

/* ── 15. Search ───────────────────────────────────────────────────────── */
.dfc-search        { width: 712px; background: var(--bg-primary); border-radius: var(--radius-lg);
                     box-shadow: var(--shadow-xl); overflow: hidden; }
.dfc-search__header{ height: 34px; display: flex; align-items: center; padding: 0 16px;
                     font: var(--font-text-sm-medium); color: var(--text-tertiary); }
.dfc-search__line  { display: flex; align-items: flex-start; gap: 8px; padding: 10px 16px; cursor: pointer; }
.dfc-search__line:hover { background: var(--bg-primary_hover); }
.dfc-search__body  { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dfc-search__title { font: var(--font-text-md-medium); color: var(--text-primary); }
.dfc-search__meta  { display: flex; gap: 4px; font: var(--font-text-sm-medium); color: var(--text-tertiary); }
.dfc-search__footer{ display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 16px;
                     border-top: 1px solid var(--border-secondary);
                     font: var(--font-text-sm-regular); color: var(--text-tertiary); }

/* ── 16. Documents (freeform wiki page) ───────────────────────────────── */
.dfc-doc         { width: 720px; margin: 0 auto; padding: 88px 0 120px; }
.dfc-doc h1      { margin: 0 0 40px; font: var(--font-header-h1); color: var(--text-primary); }
.dfc-doc h2      { margin: 32px 0 16px; font: var(--font-header-h3); color: var(--text-primary); }
.dfc-doc p       { margin: 0 0 12px; font: var(--font-text-md-regular); color: var(--text-primary); }
.dfc-doc ul, .dfc-doc ol { margin: 0 0 12px; padding-left: 20px; font: var(--font-text-md-regular); }
.dfc-note        { display: flex; align-items: flex-start; gap: 10px; padding: 16px;
                   background: var(--bg-tertiary); border-radius: var(--radius-sm);
                   font: var(--font-text-md-regular); color: var(--text-primary); }
.dfc-note__icon  { width: 20px; flex: none; text-align: center; font-size: 18px; line-height: 20px; }
.dfc-note__body  { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.dfc-check       { display: flex; align-items: center; gap: 8px; height: 24px;
                   font: var(--font-text-md-regular); color: var(--text-primary); }
.dfc-check input { width: 16px; height: 16px; accent-color: var(--button-primary-bg); }

/* ── 17. Onboarding / auth ────────────────────────────────────────────── */
.dfc-onb        { min-height: 100vh; display: flex; flex-direction: column; align-items: center;
                  background: var(--bg-primary); }
.dfc-onb__logo  { margin: 48px 0 0; }
.dfc-onb__panel { width: 320px; margin: auto 0; display: flex; flex-direction: column; gap: 24px; }
.dfc-onb__title { margin: 0; font: var(--font-header-h3); color: var(--text-primary); text-align: center; }
.dfc-onb__sub   { margin: 0; font: var(--font-text-md-regular); color: var(--text-tertiary); text-align: center; }
.dfc-onb__dots  { display: flex; gap: 8px; justify-content: center; }
.dfc-onb__dot   { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-grey-400); }
.dfc-onb__dot[aria-current="step"] { background: var(--button-primary-bg); }
.dfc-onb__footer{ display: flex; gap: 16px; padding: 32px 0;
                  font: var(--font-text-sm-regular); color: var(--text-tertiary); }

/* ── 18. Empty states ─────────────────────────────────────────────────── */
.dfc-empty       { display: flex; flex-direction: column; align-items: center; gap: 8px;
                   padding: 80px 0; text-align: center; }
.dfc-empty__title{ font: var(--font-text-lg-medium); color: var(--text-primary); }
.dfc-empty__body { font: var(--font-text-md-regular); color: var(--text-tertiary); max-width: 420px; }

/* ── 18. Additions the template doesn't have ─────────────────────────────
   Both come from how Sheni's clients actually use Airtable, not from the Figma. */

/* 18a. Loom embed at the top of a record page (SOP / documentation tables).
        16:9, full content width, sits above the title. */
.dfc-detail__embed        { width: 100%; aspect-ratio: 16 / 9; margin-bottom: 24px;
                            border-radius: var(--radius-lg); overflow: hidden;
                            background: var(--bg-tertiary); border: 1px solid var(--border-primary); }
.dfc-detail__embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* 18b. Action buttons inside a table cell ("Read SOP", "Watch SOP").
        Filled, small, and greyed — not hidden — when the underlying URL is empty. */
.dfc-cell-actions         { display: flex; align-items: center; gap: 8px; }
.dfc-btn-cell {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 10px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font: var(--font-text-sm-medium); color: var(--text-white);
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.dfc-btn-cell[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* Give each action its own hue so a row reads at a glance. 600 fill, white label. */
.dfc-btn-cell--blue   { background: var(--color-blue-600); }
.dfc-btn-cell--violet { background: #7e57c2; }
.dfc-btn-cell--green  { background: var(--color-green-600); }
.dfc-btn-cell--grey   { background: var(--color-grey-600); }

/* ── 19. Utility ──────────────────────────────────────────────────────── */
.dfc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
               overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }