/* ============================================================================
   LeadLift OS — this build only.

   Load order: tokens.css → brand.css → defcon.css → THIS.

   The kit owns structure and brand.css owns the skin, so what is left here is
   only what one product needs and no other build would: the ink discipline
   LeadLift's brand asks for, the handful of pieces the kit has no component
   for (the charts, the onboarding ladder, the reason toggles), and the
   responsive behaviour.

   If you find yourself changing a padding, a height or a column width in this
   file, stop: that is structural and belongs in the kit's components.md.
   ========================================================================= */

/* ── Ground ──────────────────────────────────────────────────────────── */

html, body { height: 100%; }
body {
  margin: 0; background: var(--bg-secondary);
  font: var(--font-text-md-regular); color: var(--text-tertiary);
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

#root.boot {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--text-tertiary);
}

/* ── Ink discipline ───────────────────────────────────────────────────
   LeadLift's brand: most text is #99A1AF and white is reserved for headings,
   names and the one number a screen exists to show. The kit paints body text
   with --text-primary, which on a dark ground would put white everywhere. The
   rules below are the only place that is corrected — colour is skin, so this
   is a brand decision, not a structural one. */

.dfc-table__cell            { color: var(--text-tertiary); }
.dfc-table__cell--name      { color: var(--text-primary); }
.dfc-card__assignee,
.dfc-card__meta             { color: var(--text-tertiary); }
.dfc-detail__value          { color: var(--text-secondary); }
.dfc-menu-item              { color: var(--text-tertiary); }
.dfc-menu-item[aria-current="page"] { color: var(--text-primary); }

/* Status tones. Orange is never one of them. */
.ll-good  { color: var(--good); }
.ll-warn  { color: var(--warn); }
.ll-bad   { color: var(--bad); }
.ll-mute  { color: var(--text-placeholder); }
.dfc-stat--warn .dfc-stat__value { color: var(--warn); }

.ll-tag--good  { background: var(--tint-good); color: var(--good); }
.ll-tag--warn  { background: var(--tint-warn); color: var(--warn); }
.ll-tag--bad   { background: var(--tint-bad);  color: var(--bad); }
.ll-tag--mute,
.ll-tag--grey  { background: var(--bg-primary_hover); color: var(--text-tertiary); }
.ll-dot--good  { background: var(--good); }
.ll-dot--warn  { background: var(--warn); }
.ll-dot--bad   { background: var(--bad); }
.ll-dot--grey  { background: var(--text-placeholder); }

/* ── Shell ───────────────────────────────────────────────────────────── */

/* The kit puts content and cards on the same surface — white on white, told
   apart by a border. LeadLift's brand has a ground (#050505) under its panels
   (#0A0A0A), so the body takes the ground and every card, column, table row and
   record panel reads as raised. Colour only; nothing moves. */
.dfc-body { background: var(--bg-secondary); }

.dfc-sidebar { position: relative; }
.ll-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; border-radius: var(--radius-xs);
  background: var(--button-primary-bg); color: var(--text-white);
  font: var(--font-text-sm-medium);
}
.ll-navhead { background: transparent; border: 0; cursor: pointer; width: 100%;
              display: flex; align-items: center; justify-content: space-between; }
.ll-navhead > i, .ll-navhead > svg { width: 14px; height: 14px; }
.ll-navitem { background: transparent; border: 0; cursor: pointer; width: 100%; text-align: left; }
.ll-navitem__label { flex: 1 1 0; min-width: 0; }
.ll-navitem__count { font: var(--font-text-sm-medium); color: var(--text-placeholder); }
.dfc-menu-item[aria-current="page"] { background: var(--bg-tertiary_hover); }

.ll-rail__foot {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 8px 4px; font: var(--font-text-sm-regular); color: var(--text-placeholder);
  border-top: 1px solid var(--border-secondary);
}
.ll-live { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none;
           background: var(--text-placeholder); }
.ll-live--live      { background: var(--good); }
.ll-live--connecting{ background: var(--warn); }
.ll-live--retrying  { background: var(--warn); }
.ll-live--error     { background: var(--bad); }
.ll-rail__warn { margin: 0; width: 100%; font: var(--font-text-sm-regular); color: var(--warn); }

.ll-head h1 { font: var(--font-header-h4); color: var(--text-primary); }
.ll-saving { font: var(--font-text-sm-medium); color: var(--text-tertiary); }

/* The description band. Same on every page — that sameness is what makes eight
   pages read as one product rather than eight tools. */
.dfc-page-desc { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.ll-desc__emoji { font-size: 14px; }
.ll-desc__link {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--text-brand); font: inherit; text-decoration: underline;
  text-underline-offset: 2px;
}

/* The kit's toolbar is space-between with tabs on the left and filters on the
   right. Nothing had tabs until the boards got their flat view, so this pushed
   the filters over on its own; now it only does that when there are no tabs. */
.ll-toolbar { justify-content: flex-end; }
.ll-toolbar:has(.ll-tabs) { justify-content: space-between; }
.ll-tabs .dfc-tab { background: transparent; border-top: 0; border-left: 0; border-right: 0; }
.ll-filter  { position: relative; }
.ll-filter .dfc-filter { background: transparent; border: 0; cursor: pointer; }
.ll-filter .dfc-filter strong { color: var(--text-primary); font-weight: 500; }
.ll-popover {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 200px; max-height: 320px; overflow: auto;
}
.ll-popover .dfc-popover__item { width: 100%; background: transparent; border: 0;
                                 cursor: pointer; text-align: left; color: var(--text-tertiary); }
.ll-popover .dfc-popover__item[aria-pressed="true"] { color: var(--text-primary); }

.ll-note {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 8px 32px; font: var(--font-text-md-regular); color: var(--text-secondary);
  border-bottom: 1px solid var(--border-secondary);
}
.ll-note--good { color: var(--good); }
.ll-note--bad  { color: var(--bad); }
.ll-note__x { margin-left: auto; background: transparent; border: 0; cursor: pointer;
              color: inherit; display: inline-flex; }
.ll-notice { padding: 24px 32px; max-width: 640px; color: var(--text-tertiary); }
.ll-notice code { color: var(--text-primary); }

/* ── Board ───────────────────────────────────────────────────────────── */
/* Each column scrolls on its own, so a stage holding forty cards scrolls
   deeper than its neighbours instead of stretching the page. */

.ll-boardpage, .ll-tablepage { display: flex; flex-direction: column; height: 100%; }
.ll-boardpage .dfc-board { flex: 1 1 0; min-height: 0; align-items: stretch; overflow-x: auto; }
.dfc-board__column { max-height: 100%; min-height: 0; }
.dfc-board__tasks  { overflow-y: auto; min-height: 0; padding-bottom: 8px; }
.dfc-board__header { background: var(--bg-primary); }
.ll-board__toggle  { background: transparent; border: 0; padding: 0; cursor: pointer;
                     color: inherit; font: inherit; flex: 1 1 0; text-align: left; }
.dfc-board__column--collapsed .dfc-board__count { writing-mode: horizontal-tb; }
.ll-column-empty   { padding: 12px 4px; font: var(--font-text-sm-regular);
                     color: var(--text-placeholder); }
.dfc-card { width: 100%; text-align: left; }
.dfc-card__meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.ll-ava {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-primary_hover); color: var(--text-secondary);
  font: var(--font-text-sm-medium); border: 1px solid var(--border-secondary);
}

/* ── Table ───────────────────────────────────────────────────────────── */

.ll-tablepage .ll-table { flex: 1 1 0; min-height: 0; overflow: auto; }
.ll-table { width: 100%; }
.dfc-table__header { position: sticky; top: 0; z-index: 5; background: var(--bg-secondary); }
.ll-row { cursor: pointer; border: 0; background: transparent; width: 100%; }
.ll-row--bad  .dfc-table__cell--name { box-shadow: inset 2px 0 0 var(--bad); }
.ll-row--warn .dfc-table__cell--name { box-shadow: inset 2px 0 0 var(--warn); }
.ll-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-cell--name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ll-cell--name > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.dfc-table__section-header { position: sticky; top: 0; z-index: 6; }

/* ── Record ──────────────────────────────────────────────────────────── */

.dfc-detail--page { background: var(--bg-primary); border: 1px solid var(--border-secondary);
                    border-radius: var(--radius-lg); }
.ll-detail__sub { margin: -8px 0 16px; font: var(--font-text-md-regular);
                  color: var(--text-tertiary); }
.ll-value { overflow-wrap: anywhere; }
.ll-value--link { background: transparent; border: 0; padding: 0; cursor: pointer;
                  color: var(--text-brand); font: inherit; text-align: left;
                  text-decoration: underline; text-underline-offset: 2px; }
.ll-value--history { display: flex; align-items: center; gap: 8px; }
.ll-value--actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ll-value--history i, .ll-value--history svg { width: 14px; height: 14px; flex: none; }
.ll-value--compare { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ll-longtext { white-space: pre-wrap; color: var(--text-secondary); }
.ll-check { cursor: pointer; }
.ll-check input { accent-color: var(--button-primary-bg); }
.ll-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.ll-reason {
  padding: 3px 10px; border-radius: var(--radius-pill); cursor: pointer;
  background: transparent; border: 1px solid var(--border-primary);
  font: var(--font-text-sm-medium); color: var(--text-tertiary);
}
.ll-reason[aria-pressed="true"] { border-color: var(--bad); color: var(--bad);
                                  background: var(--tint-bad); }

/* A field row you can type into. The box is the kit's .dfc-input and keeps all
   of its geometry; the only thing decided here is ink. At rest it is invisible,
   so a record still reads as a record rather than as a form, and the border
   arrives the moment somebody reaches for it. */
.ll-edit { border-color: transparent; background: transparent; }
.ll-edit:hover  { border-color: var(--border-primary); background: var(--bg-primary); }
.ll-edit:focus, .ll-edit:focus-visible {
  border-color: var(--border-focus); background: var(--bg-primary);
}
.ll-edit::placeholder { color: var(--text-placeholder); }
.ll-edit--long { width: 100%; }
/* A native picker paints its own list, and it is the only part of the page the
   page does not draw. Give it the same ground so it is not a white flash. */
.ll-edit option { background: var(--bg-primary); color: var(--text-primary); }
/* A box with somewhere to go beside it: the link fields, and the walkthrough's
   client. The button is the kit's; only the row around it is ours. */
.ll-value--linkedit { display: flex; align-items: center; gap: 4px; }
.ll-value--linkedit .dfc-input { flex: 1 1 0; min-width: 0; }

.ll-ladder { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.ll-ladder__step { display: flex; align-items: center; gap: 8px;
                   font: var(--font-text-sm-regular); color: var(--text-placeholder); }
.ll-ladder__dot { width: 8px; height: 8px; border-radius: var(--radius-pill);
                  background: var(--border-primary); flex: none; }
.ll-ladder__step--done { color: var(--text-tertiary); }
.ll-ladder__step--done .ll-ladder__dot { background: var(--text-tertiary); }
.ll-ladder__step--here { color: var(--text-primary); }
.ll-ladder__step--here .ll-ladder__dot { background: var(--good); }
.ll-embed--none { display: flex; align-items: center; justify-content: center;
                  color: var(--text-placeholder); }
.dfc-detail__section-head h2 { font: var(--font-text-lg-medium); }

/* ── Dashboard ───────────────────────────────────────────────────────── */

.ll-dash { padding-bottom: 24px; }
.ll-stat__note { color: var(--text-placeholder); right: 15px; bottom: 12px; max-width: 66%;
                 text-align: right; line-height: 14px; }
.ll-section-title { padding: 0 32px 12px; font: var(--font-text-lg-medium);
                    color: var(--text-primary); }
.ll-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* One client, one colour, in every bar of every chart on the page — that is
   what lets the eye follow one client across the whole distribution. None of
   these ten is the brand orange, and none is a status colour. */
.ll-c1  { background: #6696F5; }
.ll-c2  { background: #7E57C2; }
.ll-c3  { background: #26A69A; }
.ll-c4  { background: #5C6BC0; }
.ll-c5  { background: #26C6DA; }
.ll-c6  { background: #AB47BC; }
.ll-c7  { background: #42A5F5; }
.ll-c8  { background: #7986CB; }
.ll-c9  { background: #4DB6AC; }
.ll-c10 { background: #9575CD; }

.ll-chart__sub { font: var(--font-text-sm-regular); color: var(--text-placeholder); }
.ll-chart__plot { display: flex; align-items: flex-end; gap: 12px; padding: 16px;
                  min-height: 200px; overflow-x: auto; }
.ll-chart__col { flex: 1 1 0; min-width: 56px; display: flex; flex-direction: column;
                 align-items: center; gap: 4px; }
.ll-chart__stack { width: 100%; height: 140px; display: flex; align-items: stretch; }
/* column-reverse stacks the segments up from the baseline; the bar has to own
   the full height of the plot or a percentage segment resolves against zero. */
.ll-chart__bar { width: 100%; height: 100%; display: flex; flex-direction: column-reverse;
                 justify-content: flex-start; border-radius: var(--radius-xs);
                 overflow: hidden; }
.ll-chart__seg { width: 100%; min-height: 4px; border: 0; padding: 0; cursor: pointer; }
.ll-chart__seg:hover { filter: brightness(1.25); }
.ll-chart__n { font: var(--font-text-sm-medium); color: var(--text-primary); }
.ll-chart__x { font: var(--font-text-sm-regular); color: var(--text-placeholder);
               text-align: center; line-height: 14px; }
.ll-chart__key { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 16px 16px;
                 font: var(--font-text-sm-regular); color: var(--text-tertiary); }
.ll-chart__keyitem { display: inline-flex; align-items: center; gap: 6px; }
.ll-chart__swatch { width: 10px; height: 10px; border-radius: var(--radius-xs); }

.ll-foot { margin: 0; padding: 16px 32px 24px; max-width: 780px;
           font: var(--font-text-sm-regular); color: var(--text-placeholder); }

/* ── The way in ──────────────────────────────────────────────────────── */

/* The one thing on the page until the page knows who is asking. Everything in
   the card is the kit's; what is decided here is that it sits alone, centred,
   on the same ground every other screen uses. */
.ll-gate { display: flex; align-items: center; justify-content: center;
           min-height: 100vh; padding: 24px; background: var(--bg-secondary); }
.ll-gate__card { width: 100%; max-width: 420px; }
.ll-gate__card .dfc-modal__header { gap: 8px; }
.ll-gate__note { margin: 0; font: var(--font-text-sm-regular); color: var(--text-tertiary); }
.ll-gate__said { margin: 0; font: var(--font-text-md-regular); color: var(--text-primary); }
.ll-gate__err  { margin: 0; font: var(--font-text-sm-regular); color: var(--bad); }
.ll-gate__open { display: flex; flex-direction: column; gap: 8px; padding-top: 8px;
                 border-top: 1px solid var(--border-secondary); }

.ll-rail__who { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ll-rail__me  { margin: 0; font: var(--font-text-sm-regular); color: var(--text-tertiary); }
.ll-signout   { background: transparent; border: 0; padding: 0; cursor: pointer;
                color: var(--text-brand); font: var(--font-text-sm-medium);
                text-decoration: underline; text-underline-offset: 2px; }

/* ── Modal ───────────────────────────────────────────────────────────── */

.dfc-overlay { z-index: 60; }
.ll-select { appearance: none; background-image: none; }
.dfc-modal__body { display: flex; flex-direction: column; gap: 16px; }

/* ── Small screens ───────────────────────────────────────────────────── */

.ll-topbar { display: none; }
.ll-scrim  { display: none; }

@media (max-width: 1000px) {
  .ll-topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 16px; border-bottom: 1px solid var(--border-primary);
  }
  .ll-topbar__where { font: var(--font-text-md-medium); color: var(--text-primary); }
  .dfc-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 50;
    transform: translateX(-100%); transition: transform .18s ease;
  }
  .ll-app--nav-open .dfc-sidebar { transform: none; }
  .ll-app--nav-open .ll-scrim {
    display: block; position: fixed; inset: 0; z-index: 45; border: 0;
    background: rgba(0,0,0,.5);
  }
  .dfc-page-header, .dfc-page-desc, .ll-note, .ll-foot, .ll-section-title,
  .dfc-dash, .dfc-dash-charts { padding-left: 16px; padding-right: 16px; }
  .ll-charts { grid-template-columns: minmax(0, 1fr); }
  .dfc-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dfc-detail--dock { width: 100%; }
}
@media (max-width: 620px) {
  .dfc-dash { grid-template-columns: minmax(0, 1fr); }
}