/* AIEFA — FLR experience tokens (A744, survey §33).
   Palette reused directly from the FLR prototype's brand sheet (flr-secure
   app/globals.css) — tokens are the contract, behavior is recreated, never
   copied. Scoped under .flr-shell so the generic AIEfa surfaces stay untouched
   and reachable side-by-side (survey §33 exit criterion). */
.flr-shell {
  --flr-bg:        #14110C;
  --flr-surf:      #1B160E;
  --flr-surf-2:    #1F1A12;
  --flr-raise:     #221A0C;
  --flr-line:      #3A3327;
  --flr-line-soft: #2C2619;
  --flr-gold:      #D4B373;
  --flr-gold-2:    #C9A668;
  --flr-gold-hi:   #CBA75C;
  --flr-cream:     #ECE7DB;
  --flr-muted:     #ABA08A;
  --flr-faint:     #948871;
  --flr-green:     #9DC183;
  --flr-red:       #D98A6A;
  --flr-serif: 'Cormorant Garamond', Georgia, serif;
  --flr-sans: 'Inter', system-ui, sans-serif;

  background: var(--flr-bg);
  color: var(--flr-cream);
  font-family: var(--flr-sans);
  min-height: 100vh;
  margin: -1.5rem;            /* escape the generic page padding */
  padding: 1.5rem;
}

.flr-shell .flr-brand {
  font-family: var(--flr-serif);
  color: var(--flr-gold);
  letter-spacing: .18em;
  font-weight: 500;
  font-size: 1.5rem;
  text-transform: uppercase;
}

.flr-shell .flr-strip {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--flr-line);
  padding-bottom: .75rem; margin-bottom: 1.25rem;
}
.flr-shell .flr-account { color: var(--flr-muted); font-size: .85rem; }

.flr-shell .flr-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem; align-items: start;
}
.flr-shell .flr-col {
  background: var(--flr-surf); border: 1px solid var(--flr-line-soft);
  border-radius: .5rem; padding: .75rem; min-height: 6rem;
}
.flr-shell .flr-col h2 {
  font-family: var(--flr-serif); color: var(--flr-gold-2);
  font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 .6rem 0; display: flex; justify-content: space-between;
}
.flr-shell .flr-col h2 .flr-count { color: var(--flr-faint); font-family: var(--flr-sans); }

/* A948: .flr-card is an <a>, so it needs the anchor styling reset and — the reason the
   element changed at all — a focus ring, since it is now reachable by Tab. */
.flr-shell .flr-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--flr-surf-2); border: 1px solid var(--flr-line-soft);
  border-radius: .4rem; padding: .6rem .7rem; margin-bottom: .6rem;
}
.flr-shell .flr-card:focus-visible {
  outline: 2px solid var(--flr-gold-hi); outline-offset: 2px;
}
.flr-shell .flr-card.attention { border-color: var(--flr-gold-hi); }
.flr-shell .flr-card .flr-vin { color: var(--flr-gold); font-weight: 600; letter-spacing: .06em; }
.flr-shell .flr-card .flr-desc { color: var(--flr-cream); font-size: .9rem; }
.flr-shell .flr-card .flr-consignor { color: var(--flr-faint); font-size: .78rem; }
.flr-shell .flr-card .flr-attention { color: var(--flr-gold-2); font-size: .8rem; margin-top: .35rem; }
.flr-shell .flr-card .flr-blocker { color: var(--flr-red); font-size: .8rem; margin-top: .35rem; }
.flr-shell .flr-card .flr-action { color: var(--flr-gold-2); font-size: .8rem; margin-top: .2rem; }
.flr-shell .flr-partner-h {
  font-family: var(--flr-serif); color: var(--flr-cream);
  font-size: 1.2rem; margin: 1.4rem 0 .6rem 0;
}
/* A948: --flr-dim is defined nowhere, so this always fell through to the #6E6552 fallback:
   3.12:1 on --flr-bg, below the 4.5:1 minimum, at .85rem. .flr-empty is every loading and
   empty state on the operator surfaces ("Reading the book…", "No inventory to show."), so
   it is the first text on screen on every page load. --flr-faint is the palette's dim tone
   and holds 4.93:1 even against --flr-raise, the lightest surface it lands on. */
.flr-shell .flr-empty { color: var(--flr-faint); font-size: .85rem; }
.flr-shell .flr-note { color: var(--flr-muted); font-size: .85rem; margin-top: 1rem; }

.flr-shell .flr-lenses {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.flr-shell .flr-search {
  background: var(--flr-surf-2); border: 1px solid var(--flr-line);
  color: var(--flr-cream); border-radius: .35rem; padding: .4rem .6rem;
  min-width: 240px; font-family: var(--flr-sans);
}
.flr-shell .flr-lens-toggle { color: var(--flr-muted); font-size: .85rem; display: flex; gap: .35rem; align-items: center; }
.flr-shell .flr-card { cursor: pointer; }
/* A1005 — superseded by the `.flr-shell.flr-detail` block below. These four selectors never
   matched (see the note there); they are removed rather than left in place, because dead CSS
   that looks live is what let the vehicle page ship unstyled without anyone noticing. */
.flr-shell .flr-total { color: var(--flr-gold); font-weight: 600; }
.flr-shell .flr-back { color: var(--flr-gold-2); text-decoration: none; font-size: .85rem; }

/* A971 — the FLR shell's own navigation, replacing the generic AIEfa nav FlrLayout drops. */
.flr-shell .flr-nav {
  display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;
}
.flr-shell .flr-nav a:hover { color: var(--flr-gold); text-decoration: underline; }

/* A1005 — these four rules were dead for the whole life of the page.
   `FlrVehicle.razor:14` is `<div class="flr-shell flr-detail">` — both classes on ONE
   element — while the selectors below used a descendant combinator, which requires
   `.flr-detail` to be *inside* `.flr-shell`. It never is, so the vehicle page's summary list
   and both of its tables rendered as raw unstyled HTML: no cell padding, no row separators,
   no muted term colour, no two-column grid. That is the bulk of "very unfriendly-looking"
   (Josh, 2026-08-27T20:11) and it is a compound-selector fix, not a redesign.
   Written as `.flr-shell.flr-detail` so it keeps working if the classes are ever split onto
   nested elements — a compound selector on one element is the accurate description of the
   markup as it actually stands. */
.flr-shell.flr-detail dl {
  display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem;
  align-items: baseline; margin: .6rem 0 1.4rem 0;
}
.flr-shell.flr-detail dt { color: var(--flr-muted); font-size: .85rem; }
.flr-shell.flr-detail dd { margin: 0; }
.flr-shell.flr-detail table {
  width: 100%; color: var(--flr-cream); font-size: .9rem; border-collapse: collapse;
  margin-bottom: 1.2rem;
}
.flr-shell.flr-detail td, .flr-shell.flr-detail th {
  border-bottom: 1px solid var(--flr-line-soft); padding: .4rem .55rem; text-align: left;
}
.flr-shell.flr-detail th {
  color: var(--flr-gold-2); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.flr-shell.flr-detail tbody tr:last-child td { border-bottom: none; }

/* A1005 — the detail page's controls were unstyled browser defaults: white boxes and grey
   OS buttons punched through a dark theme. Only `.flr-paste` (textareas) and `.flr-search`
   ever got treatment, and none of this page's inputs or buttons carry either class, so every
   control on the busiest FLR screen rendered as raw chrome. Found by screenshotting the
   running portal rather than by reading the sheet — the markup gave no hint, because the
   omission is a rule that was never written. `color-scheme: dark` is what makes the native
   date-picker glyph and the number spinners legible; without it they stay dark-on-dark. */
.flr-shell.flr-detail { color-scheme: dark; }
.flr-shell.flr-detail .flr-action-row input {
  background: var(--flr-surf-2); border: 1px solid var(--flr-line);
  color: var(--flr-cream); border-radius: .3rem; padding: .35rem .5rem;
  font-family: var(--flr-sans); font-size: .88rem;
}
.flr-shell.flr-detail .flr-action-row input:focus-visible {
  outline: 2px solid var(--flr-gold-hi); outline-offset: 1px; border-color: var(--flr-gold-2);
}
.flr-shell.flr-detail .flr-action-row input::placeholder { color: var(--flr-faint); }
.flr-shell.flr-detail .flr-action-row input:disabled { opacity: .55; }
.flr-shell.flr-detail .flr-action-row button {
  background: var(--flr-gold); color: var(--flr-bg); border: 0; border-radius: .3rem;
  padding: .45rem .95rem; font-weight: 600; font-family: var(--flr-sans);
  font-size: .85rem; cursor: pointer;
}
.flr-shell.flr-detail .flr-action-row button:hover:not(:disabled) { background: var(--flr-gold-2); }
.flr-shell.flr-detail .flr-action-row button:focus-visible {
  outline: 2px solid var(--flr-gold-hi); outline-offset: 2px;
}
.flr-shell.flr-detail .flr-action-row button:disabled { opacity: .5; cursor: default; }

/* A1005 — rank the page without touching its markup. "What you can do now" is the reason a
   consignor opened it; Costs and Timeline are reference. Everything rendered at identical
   weight, so the reader had to read all four sections to find the one that wanted something
   from them. Two levers, both available on the existing DOM: the vehicle's name becomes
   clearly the page title, section headings become quieter labels with a rule under them, and
   the interactive rows get a surface so the zone that *does* something is visibly distinct
   from the two tables that only report. No new class is introduced, because a rule that
   depends on markup nobody writes is precisely the dead CSS removed above. */
.flr-shell.flr-detail h2.flr-partner-h {
  font-size: 1.45rem; color: var(--flr-cream); margin: .2rem 0 .2rem 0;
}
.flr-shell.flr-detail h3.flr-partner-h {
  font-family: var(--flr-sans); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--flr-muted);
  border-bottom: 1px solid var(--flr-line-soft); padding-bottom: .35rem;
  margin: 1.8rem 0 .7rem 0;
}
.flr-shell.flr-detail .flr-action-row {
  background: var(--flr-surf); border-color: var(--flr-line-soft);
  border-radius: .45rem; padding: .7rem .9rem; margin: .5rem 0;
}
.flr-shell.flr-detail .flr-action-row.flr-highlight { border-color: var(--flr-gold-hi); }

/* A1005 — the partner book was thirteen `flex: 0 1 10rem` boxes wrapping in one row, with no
   grouping and a ragged edge that changed shape with the viewport. A grid over the existing
   flat label/input sequence gives two stable field columns and costs no markup change, so the
   lanes holding `FlrVehicle.razor` are unaffected. The note spans the remaining columns
   because it is prose, and the button spans the row because it commits all of them. */
.flr-shell.flr-detail .flr-action-row.flr-partner-record {
  display: grid;
  grid-template-columns: max-content minmax(6rem, 1fr) max-content minmax(6rem, 1fr);
  gap: .5rem .85rem; align-items: center;
  background: var(--flr-surf); border: 1px solid var(--flr-line-soft);
  border-radius: .45rem; padding: 1rem;
}
.flr-shell.flr-detail .flr-action-row.flr-partner-record label {
  min-width: 0; justify-self: end; text-align: right;
  color: var(--flr-muted); font-size: .8rem;
}
.flr-shell.flr-detail .flr-action-row.flr-partner-record input { width: 100%; min-width: 0; }
.flr-shell.flr-detail .flr-action-row.flr-partner-record input#pb-note { grid-column: 2 / -1; }
.flr-shell.flr-detail .flr-action-row.flr-partner-record button {
  grid-column: 1 / -1; justify-self: start;
}

/* One field pair per row once two no longer fit; the labels stop being right-aligned at that
   width because a right-aligned label above a full-width box reads as detached from it. */
@media (max-width: 40rem) {
  .flr-shell.flr-detail .flr-action-row.flr-partner-record {
    grid-template-columns: max-content minmax(0, 1fr);
  }
  .flr-shell.flr-detail .flr-action-row.flr-partner-record input#pb-note { grid-column: 2; }
}

/* The FLR experience frame (FlrLayout): a Front Line Ready user's own shell,
   without the generic AIEfa topbar whose links are all tenant-scoped and so
   unreachable for a workspace account. Padding matches .workspace so the
   .flr-shell negative margin escapes it exactly as it did when nested. */
.flr-app {
  position: relative;
  min-height: 100vh;
  background: #14110C;
  padding: 34px 28px 56px;
}
.flr-app-inner { width: min(1240px, 100%); margin: 0 auto; }
.flr-app .flr-signout {
  position: absolute; top: 14px; right: 28px;
  color: #ABA08A; font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem; text-decoration: none;
}
.flr-app .flr-signout:hover { color: #D4B373; text-decoration: underline; }

.flr-shell .flr-paste {
  width: 100%; max-width: 42rem; background: var(--flr-surf-2);
  border: 1px solid var(--flr-line); color: var(--flr-cream);
  border-radius: .35rem; padding: .5rem .6rem; font-family: var(--flr-sans);
}
.flr-shell .flr-button {
  background: var(--flr-gold); color: var(--flr-bg); border: 0; border-radius: .3rem;
  padding: .4rem .9rem; font-weight: 600; cursor: pointer; margin-top: .5rem;
}
.flr-shell .flr-share {
  background: var(--flr-surf); border: 1px solid var(--flr-line-soft);
  border-radius: .4rem; padding: .8rem; color: var(--flr-cream);
  max-width: 42rem; white-space: pre-wrap; word-break: break-all; font-size: .85rem;
}
.flr-shell .flr-links-table { width: 100%; max-width: 60rem; border-collapse: collapse;
  color: var(--flr-cream); font-size: .88rem; margin-top: .5rem; }
.flr-shell .flr-links-table td, .flr-shell .flr-links-table th {
  border-bottom: 1px solid var(--flr-line-soft); padding: .35rem .5rem; text-align: left; }
.flr-shell .flr-directory-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  color: var(--flr-muted); font-size: .85rem; margin: .8rem 0;
}

/* A808(d) — "everything you did today" prefill and sidebar. A prefilled field must
   never look like a saved one (DAILY-ACTIONS.md rule 2), and a highlighted row must be
   easy to spot without a screen reader relying on color alone (the border, not just
   the tint, carries the meaning). */
.flr-shell .flr-action-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .5rem .6rem; margin: .4rem 0; border: 1px solid transparent; border-radius: .35rem;
}
.flr-shell .flr-action-row.flr-highlight {
  border-color: var(--flr-gold-hi);
  background: color-mix(in srgb, var(--flr-gold-hi) 12%, transparent);
}
.flr-shell input.flr-prefilled {
  border: 1px dashed var(--flr-gold-2) !important;
  background: color-mix(in srgb, var(--flr-gold-2) 10%, var(--flr-surf-2)) !important;
}
.flr-shell .flr-prefill-banner {
  color: var(--flr-gold-2); border-left: 3px solid var(--flr-gold-2); padding-left: .6rem;
}

/* A835 — the partner-book section has 12 fields plus a note, far more than the
   registration/title/price rows above; give each label+input pair its own compact
   column instead of letting the whole flex row squeeze everything onto one baseline. */
.flr-shell .flr-action-row.flr-partner-record label {
  flex: 0 0 auto; min-width: 6.5rem;
}
.flr-shell .flr-action-row.flr-partner-record input {
  flex: 0 1 10rem;
}
.flr-shell .flr-action-row.flr-partner-record input#pb-note {
  flex-basis: 16rem;
}

.flr-shell .flr-daily-actions {
  background: var(--flr-surf); border: 1px solid var(--flr-line-soft);
  border-radius: .4rem; padding: .8rem; margin-bottom: 1rem;
}
.flr-shell .flr-daily-actions h3 { margin: 0 0 .5rem 0; }
.flr-shell .flr-daily-actions ul { list-style: none; margin: 0; padding: 0; }
.flr-shell .flr-daily-actions li {
  padding: .3rem 0; border-bottom: 1px solid var(--flr-line-soft); font-size: .85rem;
}
.flr-shell .flr-daily-actions li:last-child { border-bottom: none; }
.flr-shell .flr-daily-actions a { color: var(--flr-cream); text-decoration: none; }
.flr-shell .flr-daily-actions a:hover { color: var(--flr-gold-2); text-decoration: underline; }
.flr-shell .flr-daily-actions .flr-review { color: var(--flr-red); font-size: .75rem; margin-left: .4rem; }

/* A1022 — the operator's New Vehicle form.
   `color-scheme: dark` and explicit control rules are not optional here: A1005 found the
   detail page rendering white boxes and grey OS buttons through the dark theme because
   only .flr-paste and .flr-search had ever been styled. This page is almost entirely
   controls, so it would have been the worst instance of exactly that. */
.flr-shell.flr-intake { color-scheme: dark; }

.flr-shell .flr-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem 1rem; max-width: 52rem; margin: .5rem 0 1rem 0;
}
.flr-shell .flr-field { display: flex; flex-direction: column; gap: .25rem; }
.flr-shell .flr-field label {
  color: var(--flr-muted); font-size: .74rem; letter-spacing: .07em;
  text-transform: uppercase;
}
.flr-shell .flr-field input, .flr-shell .flr-field select {
  background: var(--flr-surf-2); border: 1px solid var(--flr-line);
  color: var(--flr-cream); border-radius: .3rem; padding: .4rem .55rem;
  font-family: var(--flr-sans); font-size: .9rem; width: 100%;
}
.flr-shell .flr-field input:focus-visible, .flr-shell .flr-field select:focus-visible {
  outline: 2px solid var(--flr-gold-hi); outline-offset: 1px; border-color: var(--flr-gold-2);
}
.flr-shell .flr-field input::placeholder { color: var(--flr-faint); }
.flr-shell .flr-field input:disabled, .flr-shell .flr-field select:disabled { opacity: .55; }
.flr-shell .flr-field.flr-wide { grid-column: 1 / -1; }

/* A prefilled value must never look like a confirmed one — the same rule DAILY-ACTIONS.md
   rule 2 states for the daily-actions prefill, and the reason the parser "proposes". */
.flr-shell .flr-field input.flr-from-paste {
  border-color: var(--flr-gold-2); background: var(--flr-raise);
}
.flr-shell .flr-field .flr-field-note { color: var(--flr-gold); font-size: .74rem; }

.flr-shell .flr-notice {
  border-left: 3px solid var(--flr-gold); background: var(--flr-surf);
  padding: .5rem .7rem; margin: .35rem 0; color: var(--flr-cream); font-size: .85rem;
  max-width: 52rem;
}
.flr-shell .flr-success {
  border: 1px solid var(--flr-green); border-radius: .4rem; padding: 1rem;
  max-width: 52rem; margin: 1rem 0;
}
.flr-shell .flr-warn {
  border: 1px solid var(--flr-red); border-radius: .4rem; padding: .8rem;
  max-width: 52rem; margin: .75rem 0;
}
.flr-shell .flr-checkline {
  display: flex; align-items: center; gap: .45rem; color: var(--flr-cream);
  font-size: .88rem; margin: .5rem 0;
}
.flr-shell .flr-button.flr-secondary {
  background: transparent; color: var(--flr-gold);
  border: 1px solid var(--flr-line); margin-left: .5rem;
}