/* LCG Foods Design System, version 2. Interface. Link materials.css before this file.
   The software layer: everything a web page, the Gibson app or any future application needs to take
   input and show state. Link after foundations.css and components.css.
   Evidence behind each choice is in SOFTWARE-REFERENCES.md; the rules a designer meets are in guide.html, Interface.

   Three control heights, one per density:
     small 32   dense tables and toolbars in the app
     medium 40  the default everywhere
     large 48   the main action on a web page, and anything used on a phone
   Every target is at least 24 × 24 (WCAG 2.2, 2.5.8). Every control shows a focus ring when reached
   by keyboard, and only then. */

:root {
  --control-small: 32px;
  --control: 40px;
  --control-large: 48px;
  --control-padding: 14px;
  --control-border: var(--stone-200);
  --control-border-hover: var(--stone-400);
  --control-ground: var(--white);
  --control-disabled: var(--stone-50);
  --error: var(--status-stop);
  --error-tint: var(--status-stop-tint);
  --selected: var(--ink);
  --overlay: rgba(10,10,10,0.48);
  --menu-shadow: 0 1px 2px rgba(10,10,10,0.08), 0 12px 32px -8px rgba(10,10,10,0.22);
}

.lcg ::selection { background: rgba(178,210,53,0.55); color: var(--ink); }
.lcg :focus { outline: none; }
.lcg :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lcg--ink :focus-visible { outline-color: var(--lime); }
.lcg td :focus-visible, .lcg-menu :focus-visible { outline-offset: -2px; }

/* Skip link: the first thing a keyboard reaches on every page. */
.lcg-skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: var(--corner); background: var(--ink); color: var(--on-ink); font: 700 14px/1 var(--font-text); text-decoration: none; }
.lcg-skip:focus-visible { top: 12px; }

/* ─────────────────────────────── BUTTONS ───────────────────────────────
   One primary per view. Ink is the primary on light grounds; lime is the primary that sells
   (order, book, sign up) and appears once per screen at most. Verb first, two to four words.
   Flat (decision 97): a solid fill and, for the secondary, a fine edge; pressed sinks to 97%. */

.lcg-btn {
  --h: var(--control);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); min-width: 64px; padding: 0 calc(var(--h) * 0.42);
  border: 0; border-radius: var(--corner-large);   /* a squared button on a square system (decision 98) */
  font: var(--weight-strong) 14px/1 var(--font-text); letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  color: var(--on-ink); background: var(--ink); box-shadow: none;
  transition: transform var(--motion-press) var(--ease-out), background var(--motion-quick) var(--ease-out), box-shadow var(--motion-quick) var(--ease-out), color var(--motion-quick) var(--ease-out);
}
/* Flat, the modern way (decision 97): one solid fill, no gradient, no highlight, no drop shadow.
   Life comes from the response instead: the fill shifts on hover, the button sinks to 97% when
   pressed, and a clear ring shows keyboard focus. */
.lcg-btn:hover { background: var(--stone-800); }
.lcg-btn:active { transform: scale(0.97); }
.lcg-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.lcg-btn--small { --h: var(--control-small); font-size: 13px; }
.lcg-btn--large { --h: var(--control-large); font-size: 15px; }
.lcg-btn--lime { color: var(--ink); background: var(--lime); }
.lcg-btn--lime:hover { background: #A6C62B; }
.lcg-btn--secondary { color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 1px var(--edge-strong); }
.lcg-btn--secondary:hover { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.lcg-btn--quiet { color: var(--ink); background: transparent; }
.lcg-btn--quiet:hover { background: rgba(10,10,10,0.06); }
.lcg-btn--quiet:active { background: rgba(10,10,10,0.10); }
.lcg-btn--danger { color: var(--white); background: #B32A20; }
.lcg-btn--danger:hover { background: #9A2219; }
.lcg-btn--icon { padding: 0; width: var(--h); min-width: 0; }
.lcg-btn--icon svg, .lcg-btn svg { width: 16px; height: 16px; flex: none; }
.lcg-btn:disabled, .lcg-btn[aria-disabled="true"] { color: var(--stone-400); background: var(--stone-50); box-shadow: inset 0 0 0 1px var(--edge); cursor: not-allowed; transform: none; }
/* Loading keeps its label, so the person still knows what they pressed. */
.lcg-btn[aria-busy="true"] { pointer-events: none; }
.lcg-btn[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: lcg-spin 0.7s linear infinite; }
.lcg--ink .lcg-btn:not(.lcg-btn--lime):not(.lcg-btn--secondary):not(.lcg-btn--quiet) { color: var(--ink); background: var(--white); }
.lcg--ink .lcg-btn:not(.lcg-btn--lime):not(.lcg-btn--secondary):not(.lcg-btn--quiet):hover { background: var(--paper); }
.lcg--ink .lcg-btn--lime:focus-visible { outline-color: var(--lime); }
.lcg--ink .lcg-btn--secondary { color: var(--on-ink); background: transparent; box-shadow: inset 0 0 0 1px var(--edge-on-ink); }
.lcg--ink .lcg-btn--secondary:hover { background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1.5px var(--on-ink); }
.lcg--ink .lcg-btn--quiet { color: var(--on-ink); }
@keyframes lcg-spin { to { transform: rotate(360deg); } }

.lcg-btn-group { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.lcg-link { color: var(--green); font-weight: var(--weight-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lcg-link:hover { text-decoration-thickness: 2px; }
.lcg--ink .lcg-link { color: var(--lime); }

/* ─────────────────────────────── FIELDS ───────────────────────────────
   One column. Label above the control, always visible, never a placeholder standing in for it.
   Hint under the label. Mark the optional fields, not the required ones. An error says what to do. */

.lcg-form { display: grid; gap: var(--space-5); max-width: 640px; }

/* Error summary: at the top of a form after a failed submit, each error a link to its field. */
.lcg-error-summary { padding: var(--space-4) var(--space-5); border-radius: var(--corner); box-shadow: inset 0 0 0 2px var(--error); background: var(--white); display: grid; gap: 8px; }
.lcg-error-summary b { font-size: 16px; }
.lcg-error-summary a { color: var(--error); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.lcg-field { display: grid; gap: 6px; }
.lcg-field__label { font: 650 14px/1.3 var(--font-text); color: var(--ink); letter-spacing: -0.003em; }
.lcg-field__label small { font-weight: 500; color: var(--stone-600); font-size: 14px; margin-left: 4px; }
.lcg-field__hint { font-size: 13px; line-height: 1.4; color: var(--stone-600); margin-top: -2px; }
.lcg-field__error { display: flex; gap: 6px; align-items: flex-start; font: var(--weight-strong) 13px/1.4 var(--font-text); color: var(--error); }
.lcg-field__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--error); color: var(--white); font-size: 11px; font-weight: 800; }
.lcg-field--error .lcg-input, .lcg-field--error .lcg-select, .lcg-field--error .lcg-textarea { box-shadow: 0 0 0 1.5px var(--error), var(--halo-error); }
.lcg-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.lcg-fieldset legend { padding: 0; margin-bottom: var(--space-2); font: var(--weight-strong) 14px/1.3 var(--font-text); }

.lcg-input, .lcg-select, .lcg-textarea {
  width: 100%; height: 44px; padding: 0 var(--control-padding);
  border: 0; border-radius: var(--radius-control);
  background: var(--white); color: var(--ink);
  box-shadow: 0 0 0 1px var(--edge-strong), inset 0 1px 2px rgba(10,10,10,0.05);
  font: 500 16px/1.4 var(--font-text);  /* 16, so a phone does not zoom in on focus */
  transition: box-shadow var(--motion-quick) var(--ease-out), background var(--motion-quick) var(--ease-out);
  -webkit-appearance: none; appearance: none;
}
.lcg-input::placeholder, .lcg-textarea::placeholder { color: var(--stone-400); }
.lcg-input:hover, .lcg-select:hover, .lcg-textarea:hover { box-shadow: 0 0 0 1px rgba(10,10,10,0.28), inset 0 1px 2px rgba(10,10,10,0.05); }
/* Focus: an ink edge and a soft lime halo. The ink carries the contrast; the lime carries the brand. */
.lcg-input:focus, .lcg-select:focus, .lcg-textarea:focus, .lcg-input:focus-visible, .lcg-select:focus-visible, .lcg-textarea:focus-visible { outline: none; box-shadow: 0 0 0 1.5px var(--ink), var(--halo-lime); }
.lcg-input:disabled, .lcg-select:disabled, .lcg-textarea:disabled { background: var(--stone-50); color: var(--stone-400); box-shadow: 0 0 0 1px var(--edge); cursor: not-allowed; }
.lcg-input--large { height: var(--control-large); font-size: 16px; }
.lcg-input--small { height: var(--control-small); font-size: 14px; padding: 0 10px; }
.lcg-textarea { height: auto; min-height: 112px; padding: 12px var(--control-padding); resize: vertical; line-height: 1.5; }
.lcg-select { padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230A0A0A' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }

/* Widths follow the answer: a postal code field is as wide as a postal code. */
.lcg-width-4 { max-width: 7ch; } .lcg-width-10 { max-width: 15ch; } .lcg-width-20 { max-width: 28ch; }

/* An input with a fixed unit or prefix. */
.lcg-affix { display: flex; align-items: stretch; height: 44px; border-radius: var(--radius-control); box-shadow: 0 0 0 1px var(--edge-strong), inset 0 1px 2px rgba(10,10,10,0.05); background: var(--white); overflow: hidden; }
.lcg-affix > span { display: grid; place-items: center; padding: 0 14px; font-size: 15px; color: var(--stone-600); background: var(--stone-50); box-shadow: 1px 0 0 var(--edge); }

.lcg-affix .lcg-input { box-shadow: none !important; background: transparent; height: 100%; border-radius: 0; }
.lcg-affix:focus-within { box-shadow: 0 0 0 1.5px var(--ink), var(--halo-lime); }

/* Search: an input with its icon, and the shortcut that opens it. */
.lcg-searchbox { position: relative; }
.lcg-searchbox .lcg-input { padding-left: 38px; }
.lcg-searchbox::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background: var(--stone-600); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1a6 6 0 104.47 10.03l3.25 3.25 1.06-1.06-3.25-3.25A6 6 0 007 1zm0 1.5a4.5 4.5 0 110 9 4.5 4.5 0 010-9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1a6 6 0 104.47 10.03l3.25 3.25 1.06-1.06-3.25-3.25A6 6 0 007 1zm0 1.5a4.5 4.5 0 110 9 4.5 4.5 0 010-9z'/%3E%3C/svg%3E") center / contain no-repeat; }
.lcg-kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--stone-200), 0 1px 0 var(--stone-200); background: var(--white); font: 600 11px/1 var(--font-text); color: var(--stone-600); }
.lcg-searchbox .lcg-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

/* Date: three boxes, day, month, year. Faster and less error-prone than a picker for a known date. */
.lcg-date { display: flex; gap: var(--space-3); }
.lcg-date .lcg-field__label { font-weight: 500; font-size: 13px; color: var(--stone-600); }

/* ─────────────────────────────── CHOICES ───────────────────────────────
   Checkbox and radio: 20 px box, the whole row is the target, label to the right. A switch is for a
   setting that takes effect at once; in a form that is submitted, use a checkbox. */

.lcg-choice { display: grid; grid-template-columns: 20px 1fr; gap: 4px 12px; align-items: start; cursor: pointer; padding: 6px 0; font-size: 15px; line-height: 20px; }
.lcg-choice input { -webkit-appearance: none; appearance: none; margin: 0; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(10,10,10,0.3), inset 0 1px 2px rgba(10,10,10,0.06); background: var(--white); cursor: pointer; display: grid; place-items: center; transition: background var(--motion-quick) var(--ease-out), box-shadow var(--motion-quick) var(--ease-out), transform var(--motion-press) var(--ease-out); }
.lcg-choice input:active { transform: scale(0.9); }
.lcg-choice input:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.lcg-choice input:checked { background: var(--ink); box-shadow: none; }
.lcg-choice input[type="checkbox"]::after { content: ""; width: 11px; height: 6px; border: solid var(--lime); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0.4); opacity: 0; transition: transform var(--motion) var(--ease-spring), opacity var(--motion-quick) var(--ease-out); }
.lcg-choice input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); opacity: 1; }
.lcg-choice input[type="checkbox"]:indeterminate { background: var(--ink); box-shadow: none; }
.lcg-choice input[type="checkbox"]:indeterminate::after { content: ""; width: 10px; height: 2px; background: var(--lime); }
.lcg-choice input[type="radio"] { border-radius: 50%; }
.lcg-choice input[type="radio"]:checked { background: var(--lime); box-shadow: inset 0 0 0 6px var(--ink), 0 1px 2px rgba(10,10,10,0.25); transition: box-shadow var(--motion) var(--ease-spring); }
.lcg-choice input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lcg-choice input:disabled { background: var(--stone-50); box-shadow: inset 0 0 0 1.5px var(--stone-200); cursor: not-allowed; }
.lcg-choice small { grid-column: 2; font-size: 13px; color: var(--stone-600); line-height: 1.4; }
.lcg-choices--tiles { display: grid; gap: var(--space-2); }
.lcg-choices--tiles .lcg-choice { padding: 14px 16px; border-radius: var(--radius-control); box-shadow: 0 0 0 1px var(--edge-strong); background: var(--white); transition: box-shadow var(--motion-quick) var(--ease-out), background var(--motion-quick) var(--ease-out); }
.lcg-choices--tiles .lcg-choice:hover { box-shadow: 0 0 0 1px rgba(10,10,10,0.28), var(--elevation-1); }
.lcg-choices--tiles .lcg-choice:has(input:checked) { box-shadow: 0 0 0 1.5px var(--ink), var(--halo-lime); background: #FCFEF6; }

.lcg-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; }
.lcg-switch input { -webkit-appearance: none; appearance: none; margin: 0; position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--stone-200); box-shadow: inset 0 1px 3px rgba(10,10,10,0.18); cursor: pointer; transition: background var(--motion) var(--ease-out); flex: none; }
.lcg-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform var(--motion) var(--ease-spring), width var(--motion-quick) var(--ease-out); }
.lcg-switch input:active::after { width: 24px; }
.lcg-switch input:checked { background: var(--green); box-shadow: inset 0 1px 3px rgba(20,30,5,0.35); }  /* deep green: lime fails as a track on white */
.lcg-switch input:checked::after { transform: translateX(18px); }
.lcg-switch input:checked:active::after { transform: translateX(14px); }
.lcg-switch input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Segmented control: two to five views of the same thing. */
.lcg-segmented { --count: 3; --active: 0; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 999px; background: rgba(10,10,10,0.05); box-shadow: inset 0 1px 2px rgba(10,10,10,0.06); isolation: isolate; }
.lcg-segmented::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--count)); border-radius: 999px; background: var(--white); box-shadow: 0 0 0 0.5px var(--edge), var(--elevation-1); transform: translateX(calc(100% * var(--active))); transition: transform var(--motion) var(--ease-spring); }
.lcg-segmented button { height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font: 600 13px/1 var(--font-text); color: var(--stone-600); cursor: pointer; transition: color var(--motion-quick) var(--ease-out); }
.lcg-segmented button[aria-pressed="true"] { color: var(--ink); }

/* File upload: a drop zone that is also a button. */
.lcg-drop { display: grid; justify-items: center; gap: 8px; min-height: 140px; align-content: center; padding: var(--space-6); border: 1.5px dashed rgba(10,10,10,0.18); border-radius: var(--radius-card); background: var(--white); text-align: center; font-size: 14px; color: var(--stone-600); cursor: pointer; transition: border-color var(--duration-quick) var(--ease), background var(--duration-quick) var(--ease); }
.lcg-drop:hover, .lcg-drop[data-over] { border-color: var(--ink); background: var(--stone-50); }
.lcg-drop b { color: var(--ink); }
.lcg-file { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: var(--rule); font-size: 14px; }
.lcg-file__type { width: 32px; height: 40px; border-radius: 3px; background: var(--stone-50); box-shadow: inset 0 0 0 1px var(--stone-200); display: grid; place-items: end center; padding-bottom: 5px; font: 800 8px/1 var(--font-text); letter-spacing: 0.04em; color: var(--stone-600); }

/* ─────────────────────────────── NAVIGATION ─────────────────────────────── */

.lcg-tabs { display: flex; gap: var(--space-5); border-bottom: var(--rule); }
.lcg-tabs a, .lcg-tabs button { position: relative; padding: 12px 0 13px; border: 0; background: none; font: 600 14px/1 var(--font-text); color: var(--stone-600); text-decoration: none; cursor: pointer; }
.lcg-tabs a:hover, .lcg-tabs button:hover { color: var(--ink); }
.lcg-tabs [aria-selected="true"], .lcg-tabs [aria-current] { color: var(--ink); }
.lcg-tabs [aria-selected="true"]::after, .lcg-tabs [aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.lcg-tabs .lcg-count { margin-left: 6px; }

.lcg-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--stone-50); font: 700 11px/1 var(--font-text); color: var(--stone-600); font-variant-numeric: tabular-nums; }

.lcg-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--stone-600); }
.lcg-breadcrumbs a { color: var(--stone-600); text-decoration: none; }
.lcg-breadcrumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lcg-breadcrumbs > * + *::before { content: "/"; margin-right: 8px; color: var(--stone-200); }
.lcg-breadcrumbs [aria-current] { color: var(--ink); font-weight: 600; }

.lcg-pagination { display: flex; gap: 4px; align-items: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.lcg-pagination a, .lcg-pagination span { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--corner); color: var(--ink); text-decoration: none; font-weight: 600; }
.lcg-pagination a:hover { background: var(--stone-50); }
.lcg-pagination [aria-current] { background: var(--ink); color: var(--on-ink); }
.lcg-pagination .is-gap { color: var(--stone-400); min-width: 20px; }

.lcg-sidenav { display: grid; gap: 2px; }
.lcg-sidenav__title { padding: 16px 12px 6px; font: 700 11px/1 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-400); }
.lcg-sidenav a { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: var(--radius-control); transition: background var(--motion-quick) var(--ease-out); font: 600 14px/1 var(--font-text); color: var(--stone-800); text-decoration: none; }
.lcg-sidenav a:hover { background: var(--stone-50); }
.lcg-sidenav a[aria-current] { background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--edge), var(--elevation-1); }
.lcg-sidenav a[aria-current]::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 8px rgba(178,210,53,0.8); margin-left: -6px; }
.lcg-sidenav .lcg-count { margin-left: auto; }

.lcg-steps { display: flex; gap: var(--space-2); counter-reset: step; }
.lcg-steps > li { list-style: none; flex: 1; display: grid; gap: 8px; counter-increment: step; font-size: 13px; color: var(--stone-600); }
.lcg-steps > li::before { content: ""; height: 3px; border-radius: 2px; background: var(--stone-100); }
.lcg-steps > li b { font-weight: 700; color: inherit; }
.lcg-steps > li b::before { content: counter(step) ". "; font-variant-numeric: tabular-nums; }
.lcg-steps > li.is-done::before { background: var(--green); }
.lcg-steps > li.is-current { color: var(--ink); }
.lcg-steps > li.is-current::before { background: var(--ink); }

/* ─────────────────────────────── OVERLAYS ─────────────────────────────── */

.lcg-menu { min-width: 220px; padding: 6px; border-radius: var(--radius-panel); background: var(--white); box-shadow: 0 0 0 1px var(--edge), var(--elevation-3); display: grid; }
.lcg-menu__item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14px; color: var(--ink); cursor: pointer; }
.lcg-menu__item:hover, .lcg-menu__item[data-active] { background: var(--stone-50); }
.lcg-menu__item .lcg-kbd { margin-left: auto; }
.lcg-menu__item--danger { color: var(--status-stop); }
.lcg-menu__rule { height: 1px; margin: 6px -6px; background: var(--stone-100); }
.lcg-menu__title { padding: 8px 10px 4px; font: 700 11px/1 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-400); }

.lcg-tooltip { display: inline-block; max-width: 240px; padding: 6px 10px; border-radius: var(--corner); background: var(--ink); color: var(--on-ink); font: 500 12.5px/1.4 var(--font-text); }

.lcg-dialog { width: min(520px, calc(100vw - 32px)); border-radius: var(--radius-panel); background: var(--white); box-shadow: 0 0 0 1px var(--edge), var(--elevation-4); display: grid; overflow: hidden; }
.lcg-dialog__head { display: flex; align-items: flex-start; gap: 16px; padding: 24px 24px 0; }
.lcg-dialog__title { font: 900 22px/1.15 var(--font-display); letter-spacing: -0.02em; letter-spacing: -0.01em; text-wrap: balance; }
.lcg-dialog__body { padding: 12px 24px 24px; font-size: 15px; color: var(--stone-800); line-height: 1.5; }
.lcg-dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: 16px 24px; border-top: var(--rule); background: var(--paper); }
.lcg-dialog__head .lcg-btn--icon { margin-left: auto; margin-top: -6px; margin-right: -8px; }
.lcg-scrim { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; }

.lcg-drawer { width: 420px; height: 100%; background: var(--white); box-shadow: -24px 0 64px -24px rgba(10,10,10,0.35); display: grid; grid-template-rows: auto 1fr auto; }

.lcg-toast { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 360px; max-width: calc(100vw - 32px); padding: 12px 12px 12px 16px; border-radius: var(--radius-panel); background: var(--stone-800); color: var(--on-ink); font-size: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(0,0,0,0.5), var(--elevation-3); }
.lcg-toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(178,210,53,0.18), 0 0 12px rgba(178,210,53,0.7); }
.lcg-toast .lcg-btn { --h: 28px; background: transparent; color: var(--lime); font-size: 13px; padding: 0 8px; }
.lcg-toast .lcg-btn:hover { background: rgba(255,255,255,0.08); }

/* A banner, in the system's own grammar (decision 101): a ruled row, not a tinted card. A strong rule
   on top in the status colour, the status as a word in capitals (the word carries the meaning, the
   colour backs it up), the message, the action at the right edge. Square, no fill, no side stripe. */
.lcg-banner { --tone: var(--status-info); display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-5); row-gap: 6px; align-items: baseline; padding: var(--space-3) 0 var(--space-4); border-top: 2px solid var(--tone); box-shadow: inset 0 calc(var(--hairline) * -1) 0 var(--stone-200); font-size: 14px; line-height: 1.45; color: var(--ink); }
.lcg-banner__status { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--tone); white-space: nowrap; }
.lcg-banner__status::before { content: ""; width: 6px; height: 6px; background: var(--tone); }
.lcg-banner b { display: block; margin-bottom: 1px; font-weight: 700; }
.lcg-banner > div { color: var(--stone-600); }
.lcg-banner > div b { color: var(--ink); }
.lcg-banner .lcg-link { color: var(--ink); font-weight: 700; }
.lcg-banner--good { --tone: var(--status-good); }
.lcg-banner--wait { --tone: var(--status-wait); }
.lcg-banner--stop { --tone: var(--status-stop); }

/* ─────────────────────────────── DATA ─────────────────────────────── */

.lcg-datatable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums lining-nums; }
.lcg-datatable th { position: sticky; top: 0; z-index: 1; height: 40px; padding: 0 12px; text-align: left; background: var(--paper); border-bottom: var(--rule-strong); font: 700 11px/1 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone-600); white-space: nowrap; }
.lcg-datatable th[aria-sort] { cursor: pointer; color: var(--ink); }
.lcg-datatable th[aria-sort]::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; vertical-align: middle; }
.lcg-datatable th[aria-sort="ascending"]::after { border-bottom-color: currentColor; margin-top: -4px; }
.lcg-datatable th[aria-sort="descending"]::after { border-top-color: currentColor; margin-top: 4px; }
.lcg-datatable td { height: 48px; padding: 0 12px; border-bottom: var(--rule); vertical-align: middle; white-space: nowrap; }   /* one line a row: a table scrolls sideways before it wraps */
.lcg-datatable td .lcg-row { flex-wrap: nowrap; }
.lcg-datatable--medium td { height: 40px; }
.lcg-datatable--dense td { height: 32px; }
.lcg-datatable tbody tr:hover td { background: var(--stone-50); }
.lcg-datatable tbody tr[aria-selected="true"] td { background: #F7FAEC; }
.lcg-datatable tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--lime); }
.lcg-datatable .is-number { text-align: right; }
.lcg-datatable td:first-child, .lcg-datatable th:first-child { padding-left: 16px; }
.lcg-datatable .is-check { width: 44px; padding-right: 0; }
.lcg-datatable .is-check .lcg-choice { padding: 0; }

.lcg-avatar { --size: 32px; display: inline-grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%; overflow: hidden; background: var(--stone-100); color: var(--stone-800); font: 700 calc(var(--size) * 0.38)/1 var(--font-text); flex: none; }
.lcg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lcg-avatar--brand { border-radius: var(--corner); background: var(--white); box-shadow: inset 0 0 0 1px var(--stone-100); }  /* people are circles, brands are squares */
.lcg-avatars { display: flex; } .lcg-avatars > * + * { margin-left: -8px; box-shadow: 0 0 0 2px var(--white); }

.lcg-skeleton { display: block; border-radius: var(--corner); background: linear-gradient(90deg, var(--stone-50) 0%, var(--stone-100) 50%, var(--stone-50) 100%) 0 0 / 200% 100%; animation: lcg-shimmer 1.4s linear infinite; }
@keyframes lcg-shimmer { to { background-position: -200% 0; } }

.lcg-progress { height: 6px; border-radius: 999px; background: var(--stone-100); overflow: hidden; }
.lcg-progress > i { display: block; height: 100%; width: var(--value, 40%); background: var(--ink); border-radius: inherit; transition: width var(--duration-slow) var(--ease); }
.lcg--ink .lcg-progress { background: var(--on-ink-rule); }
.lcg--ink .lcg-progress > i { background: var(--lime); }   /* on ink the fill is lime: ink on ink does not show */
.lcg-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--stone-100); border-top-color: var(--ink); animation: lcg-spin 0.7s linear infinite; }

/* Command palette: the fastest way around the app, opened with the shortcut. */
.lcg-palette { width: min(640px, calc(100vw - 32px)); border-radius: var(--radius-panel); background: var(--white); box-shadow: 0 0 0 1px var(--edge), var(--elevation-4); overflow: hidden; }
.lcg-palette__input { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; border-bottom: var(--rule); font-size: 16px; color: var(--stone-400); }
.lcg-palette__list { padding: 8px; display: grid; }
.lcg-palette__foot { display: flex; gap: 16px; padding: 10px 16px; border-top: var(--rule); background: var(--paper); font-size: 12px; color: var(--stone-600); }

@media (prefers-reduced-motion: reduce) {
  .lcg *, .lcg *::before, .lcg *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}