@charset "UTF-8";
/* 00: Runtime CSS variables first */
/* App chrome / layout knobs (runtime CSS variables) */
:root {
  /* Forms */
  --date-input-width: 12rem;
  /* Header */
  --app-header-height: 4rem;
  /* Main Content */
  --main-content-width-when-dock-open: 48vw;
  --main-content-width-when-dock-closed: 100%;
  /* Sales chrome */
  --sales-menu-width: 20vw;
  /* Dock sizing */
  --dock-transition-duration: 500ms;
  --dock-transition-ease: ease;
  --dock-width-closed: 48vw; /* when menu is CLOSED */
  --dock-width-open: 28vw; /* when menu is OPEN   */
  /* Computed offsets */
  --dock-offset-when-menu-open: calc(-1 * var(--sales-menu-width));
  /* Notification dock */
  --notif-dock-width: 28vw;
  /* Z-index scale (single source of truth) */
  --z-modal: 1200;
  --z-header: 1100;
  --z-menu: 1002;
  --z-dock: 1001;
}
@media (min-width: 1280px) {
  :root :root {
    --dock-width-closed: 48vw;
  }
}

:root {
  /* Brand swatches, straight from the guideline's Colors page */
  --color-forest-blue: #105151;
  --color-flora-green: #1c723b;
  --color-growth-green: #caf35b;
  --color-fir-cone-red-light: #d56856;
  --color-fir-cone-red-dark: #5d091f;
  --color-cream: #fff5e0;
  /* Core palette */
  --color-bg: #faf7ee;
  --color-bg-light: #fffdf7;
  --color-bg-dark: #ece5d3;
  --color-text-dark: #1f3d3d;
  --color-text-light: #ffffff;
  --color-text-faint: #527070;
  --color-border: #e3dccb;
  --color-primary: #105151;
  --color-primary-bright: #166b6b;
  --color-accent: #caf35b;
  --color-accent-light: rgb(215.25, 246, 132);
  --color-success: #1c723b;
  --color-warning: #ca8a04;
  --color-warning-light: #e5c786;
  --color-warning-deep: rgb(151.5, 103.5, 3);
  --color-danger: rgb(177, 75.5, 69.5);
  --color-danger-bright: #d56856;
  --color-danger-dark: #5d091f;
  --color-danger-light: rgb(240.3, 202.15, 195.85);
  --color-blue-highlight: #c6e2ff;
  --color-menu-bg: #0a5454;
  --color-menu-bg-light: rgb(19.7361702128, 165.7838297872, 165.7838297872);
  --color-menu-bg-trans: rgba(10, 84, 84, 0.97);
  /* Inputs */
  --input-bg: #fff;
  --input-border: #e3dccb;
  --input-focus-border: #105151;
  --input-focus-ring: rgba(16, 81, 81, 0.22);
  /* Buttons (mirror your semantic Sass tokens) */
  --btn-radius: 8px;
  --btn-primary-bg: #105151;
  --btn-primary-text: #ffffff;
  --btn-primary-border: #105151;
  --btn-primary-bg-hover: rgb(18.7249484536, 94.7950515464, 94.7950515464);
  --btn-primary-bg-hover-on-dark: #166b6b;
  --btn-secondary-bg: #fff;
  --btn-secondary-text: #1f3d3d;
  --btn-secondary-border: #e3dccb;
  --btn-secondary-bg-hover: #fffdf7;
}

/* 01: Sass design tokens & mixins */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/work-sans-latin-1c0ad417.woff2") format("woff2");
}
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/albert-sans-latin-c08eb95b.woff2") format("woff2");
}
:root {
  --font-heading: "Work Sans", system-ui, sans-serif;
  --font-body: "Albert Sans", system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.Wordmark {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* 02: Global styles */
.flash {
  position: fixed;
  top: calc(var(--app-header-height) + 0.5rem);
  left: 50%;
  background-color: rgb(215.25, 246, 132);
  padding: 0.75rem 1.25rem;
  border-left: 4px solid #105151;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 2000;
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  animation: flashFade 5s ease-out forwards;
}

.notice--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* A refusal, in the two keys the app spells it with. Colour only — the
   position, the fade and the spacing are the base `.flash`'s, which this used
   to fight with a stack of margins from before the banner was fixed. */
.flash--alert,
.flash--error {
  background-color: rgb(177, 75.5, 69.5);
  color: white;
  border-left-color: rgb(140.3793103448, 59.8793103448, 55.1206896552);
}

@keyframes flashFade {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  10%, 90% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
table th, table td {
  border: 1px solid #e3dccb;
  padding: 0.5rem;
  text-align: left;
}
table th.description, table td.description {
  width: 70%;
}
table th {
  background-color: rgb(231.1, 237.6, 237.6);
  color: #1f3d3d;
  border-bottom: 2px solid rgba(16, 81, 81, 0.35);
}

.FlashedRow {
  animation: flashRowHighlight 1.5s ease-out;
}

@keyframes flashRowHighlight {
  0% {
    background-color: #c6e2ff;
  }
  100% {
    background-color: transparent;
  }
}
.field_with_errors input,
.field_with_errors select,
.field_with_errors textarea {
  border-color: rgb(177, 75.5, 69.5);
  background-color: rgb(240.3, 202.15, 195.85);
}

.field_with_errors input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(176, 73, 73, 0.2);
}

.FieldErrorMessage {
  color: rgb(177, 75.5, 69.5);
  font-size: 0.9em;
  margin-top: 0.25rem;
}

/* ============================================
   ROW & COLUMN HIGHLIGHTING
   ============================================ */
/* CSS Variables — hover highlights use the Growth Green accent at low
   strength so tables tie into the brand instead of bootstrap amber/blue */
.HighlightRows,
.HighlightColumns {
  --row-highlight-color: rgb(239.1, 251.4, 205.8);
  --col-highlight-color: rgba(16, 81, 81, 0.1);
  --cell-highlight-color: rgb(223.2, 247.8, 156.6);
}

/* Row Highlighting */
.HighlightRows tbody tr:hover td:not(.NoHighlight),
.HighlightRows tbody tr:hover th:not(.NoHighlight) {
  background-color: var(--row-highlight-color) !important;
  cursor: pointer;
}

/* Column Highlighting */
.HighlightColumns td:not(.NoHighlight):hover::after,
.HighlightColumns th:not(.NoHighlight):hover::after {
  content: "";
  position: absolute;
  top: -5000px;
  left: 0;
  width: 100%;
  height: 10000px;
  background-color: var(--col-highlight-color);
  pointer-events: none;
  z-index: -1;
}

.HighlightColumns td:not(.NoHighlight),
.HighlightColumns th:not(.NoHighlight) {
  position: relative;
}

/* Cell Intersection (Both Row & Column) */
.HighlightRows.HighlightColumns tbody tr:hover td:not(.NoHighlight):hover {
  background-color: var(--cell-highlight-color) !important;
}

.TableActions {
  white-space: nowrap;
  text-align: right;
  width: 1%;
}

.DisabledAction {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Locked Row Highlighting */
.HighlightRows tbody tr.LockedRow td:not(.NoHighlight),
.HighlightRows tbody tr.LockedRow th:not(.NoHighlight) {
  background-color: var(--row-highlight-color) !important;
}

.HighlightRows tbody tr.LockedRow {
  outline: 2px solid #ca8a04;
  outline-offset: -1px;
}

label {
  display: block;
  font-weight: bold;
}

/* Text-entry baseline. The button-ish input types are excluded, not just
   checkbox: this rule is 0,1,1, which outranks a component class like .Button
   (0,1,0), so a <input type="submit" class="Button"> was taking its fill and
   ink from here — white background, $text-dark text — and never looked primary
   at rest. Hover then made it unreadable, because .Button:hover (0,2,0) is
   specific enough to repaint the background while the text color stayed behind.
   Excluded via a :not() selector LIST rather than chained :not()s so the rule
   keeps its 0,1,1 specificity and the cascade for real text inputs is unchanged. */
input:not([type=checkbox], [type=submit], [type=button], [type=reset]), select, textarea {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #e3dccb;
  border-radius: 4px;
  background: #fff;
  color: #1f3d3d;
  outline: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
input:not([type=checkbox], [type=submit], [type=button], [type=reset]):focus, select:focus, textarea:focus {
  border-color: #105151;
  box-shadow: 0 0 0 3px rgba(16, 81, 81, 0.22);
}

/* The field a refusal was about. The message itself goes to the flash — this is
   only the pointer back to where it landed, so it has to outrank the baseline
   above (0,1,1): hence the doubled class on the .FormControl selector. */
.FormControl.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: rgb(177, 75.5, 69.5);
  background-color: rgb(240.3, 202.15, 195.85);
}
.FormControl.is-invalid:focus,
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
  border-color: rgb(177, 75.5, 69.5);
  box-shadow: 0 0 0 3px rgba(176, 73, 73, 0.2);
}

/* Fields you cannot type in.

   There was no baseline for this at all, so a disabled <select> or <input> got
   only the browser's own treatment — on a white field that is a barely visible
   shift of the text, and the locked Stock Type / Species selects on a saved sale
   line read as perfectly live controls that simply refused to open. State that
   cannot be changed has to look like it before it is clicked, not after.

   Placed after .is-invalid deliberately: the two can coincide (SaleItem's
   immutable-identity validation refuses a changed species, and that field is
   also the disabled one), and "you cannot edit this" is the more useful of the
   two facts — the red is what you get for editing it, and you can't.

   readonly rides along with disabled. It is a different mechanism (a readonly
   field still posts, which is why price-lock uses it) but the same promise to
   the reader, and the pair should never look like two different things. */
input:not([type=checkbox], [type=submit], [type=button], [type=reset]):disabled,
input:not([type=checkbox], [type=submit], [type=button], [type=reset])[readonly],
select:disabled,
textarea:disabled,
textarea[readonly] {
  background: rgba(82, 112, 112, 0.1);
  border-color: rgba(82, 112, 112, 0.25);
  color: #527070;
  cursor: not-allowed;
  /* iOS Safari fades disabled controls on its own, on top of whatever we set —
     which would take the value below AA. Both of these are needed to stop it. */
  opacity: 1;
  -webkit-text-fill-color: #527070;
}

/* The baseline's focus ring is the app's "you may type here" signal, in the
   primary teal — on an uneditable field it undoes everything above. A disabled
   field cannot be focused at all, so its ring is simply dropped; a readonly one
   can be (tab into a locked price and copy it), so it keeps an indicator, in the
   same faint ink as the rest of the field rather than the live colour. */
input:not([type=checkbox], [type=submit], [type=button], [type=reset]):disabled:focus,
select:disabled:focus,
textarea:disabled:focus {
  border-color: rgba(82, 112, 112, 0.25);
  box-shadow: none;
}

input:not([type=checkbox], [type=submit], [type=button], [type=reset])[readonly]:focus,
textarea[readonly]:focus {
  border-color: #527070;
  box-shadow: 0 0 0 3px rgba(82, 112, 112, 0.18);
}

/* The native dropdown arrow does not take `color`, so a disabled select kept a
   full-strength black chevron over a greyed-out field — the one part of it still
   advertising a menu that will not open. Swapping in our own is the only way to
   fade it, and `appearance: none` is scoped to :disabled so every live select in
   the app keeps the platform control untouched. The chevron is $text-faint,
   URL-encoded (a raw # ends the data URI). */
select:disabled {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23527070' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.6rem;
}

/* Checkboxes and radios are excluded from the text-entry baseline above, so they
   need saying separately. Nothing to grey out but the control itself. */
input:where([type=checkbox], [type=radio]):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The label belongs to the same fact as the field. Without this a full-strength
   bold "Stock Type" sits over an obviously dead select, and the pair argues with
   itself about whether the row is editable — visibly so on a saved sale line,
   where the greyed Stock Type label used to sit two fields away from a bold
   "Per ($)" over an equally grey locked price. */
.Field:has(> select:disabled) > label,
.Field:has(> input:disabled) > label,
.Field:has(> input[readonly]) > label,
.Field:has(> textarea:disabled) > label,
.Field:has(> textarea[readonly]) > label,
.Field:has(> input:where([type=checkbox], [type=radio]):disabled) label {
  color: #527070;
  cursor: not-allowed;
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

input[type=color] {
  width: 2rem;
  height: 2rem;
  padding: 0.2rem;
}

/* Primary button baseline (submit + generic buttons).

   Wrapped in :where() so the whole block carries zero specificity — it is a
   default, not a competitor. Unwrapped it was 0,1,1, high enough to beat any
   component class (0,1,0) and paint transparent icon buttons with the primary
   fill on hover; the chevron in the sales list and the notification
   "mark unread" button both vanished into it, and a dozen other buttons carry a
   defensive hover background whose only job was to cancel this rule. At zero
   specificity any class- or id-level background wins automatically, so bare
   <button> still gets the primary look and styled buttons keep their own.

   The zero specificity has one casualty, handled by the rule below: it loses to
   the base reset. Everything colour-related here is safe, because the reset
   declares only box-sizing/margin/padding. */
:where(input[type=submit], button) {
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background-color: #105151;
  color: #ffffff;
  border: 1px solid #105151;
}
:where(input[type=submit], button):hover {
  background-color: rgb(18.7249484536, 94.7950515464, 94.7950515464);
}

/* Button padding, carried at element specificity (0,0,1) rather than in the
   :where() block above.

   `* { margin: 0; padding: 0 }` in application.scss is emitted after every @use,
   so a zero-specificity padding ties it and loses on source order — which is why
   every bare <button> (the .VoggleToggle "Add User" / "New Task" toggles and
   friends) had its label pressed against the border. 0,0,1 clears the reset and
   still loses to any component class, so .RowExpand and .NotifMarkUnreadBtn keep
   their own tighter padding.

   Padding only. Do NOT fold the colour declarations in here: this selector's
   generated :hover would land at 0,1,1 and repaint transparent icon buttons that
   declare a resting background but no hover one. */
button, input:where([type=submit], [type=button], [type=reset]) {
  padding: 0.5rem 1rem;
}

/* Press feedback for every button in the app — the depress is feedback about the
   click itself, not a signal about a button's importance, so it is not reserved
   for the big customer-facing CTAs.

   Deliberately untransitioned: a real button snaps down and snaps back. The
   :active outside the :where() puts this at 0,1,0, and nothing else in the app
   sets transform on a button, so no component rule can strand it in the pressed
   position. Disabled buttons never match :active, and .Button.is-disabled kills
   pointer-events, so neither depresses. */
:where(input[type=submit], button):active {
  transform: translateY(1px);
}

/* Buttons with a real surface additionally press *into* that surface: a soft
   shadow cast down-and-right from the top and left edges (positive offsets on an
   inset shadow land the shadow along those two edges), over a flat tint that
   deepens the whole face. The second shadow's huge spread collapses its inner
   hole so it fills the padding box edge to edge, which is what makes the tint
   work on any fill — green primary, white secondary, red danger alike.

   Scoped to the .Button family on purpose. This is NOT in the :where() base with
   the transform above: a 1px nudge is background-agnostic, but a dark inset on a
   transparent button paints a smudge across the glyph instead of a press, and the
   app has ~18 ghost buttons (.RowExpand, .CancelEditButton, .Button--link, the
   .Notif*Btn set, .SegmentButton …) that reset the base fill. Those keep the
   nudge alone. Anything that @extends .Button — .ConfirmButton, .CheckoutButton,
   .SubmitButton, .BackButton — is folded into these selectors by Sass and needs
   no rule of its own; a new ghost button needs no opt-out.

   Untransitioned to match the transform, and safe to state unconditionally: no
   button anywhere else in the app declares box-shadow, and focus rings here are
   drawn with outline, so a focused button keeps its ring while pressed. */
.Button:active, .BackButton:active, .SubmitButton:active, .CheckoutButton:active, .ConfirmButton:active,
.Button--secondary:active,
.Button--danger:active,
.ButtonSecondary:active,
.ButtonSuccess:active,
.ButtonDanger:active {
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3), inset 0 0 0 100vmax rgba(0, 0, 0, 0.06);
}

.InputWithSuffix {
  position: relative;
  display: inline-block;
}

.InputWithSuffix input[type=number] {
  padding-right: 3.25em; /* default; JS will tighten this */
}

.InputWithSuffix .Suffix {
  position: absolute;
  right: 0.5rem;
  top: 58%;
  transform: translateY(-50%);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0.7; /* “placeholder-ish” */
  font-variant-numeric: tabular-nums;
}

/* The suffix is a sibling of the input, not inside it, so it does not inherit
   the greyed-out ink when the field goes uneditable — the locked quantity on a
   sale line sat under a full-strength "qts". */
.InputWithSuffix:has(> input:disabled) .Suffix,
.InputWithSuffix:has(> input[readonly]) .Suffix {
  color: #527070;
}

/* Aliases for semantic button classes you can use anywhere */
.Button, .BackButton, .SubmitButton, .CheckoutButton, .ConfirmButton {
  background-color: #105151;
  color: #ffffff;
  border: 1px solid #105151;
  padding: 0.5rem 0.9rem;
  border-radius: var(--btn-radius);
  cursor: pointer;
  white-space: nowrap;
}
.Button:hover, .BackButton:hover, .SubmitButton:hover, .CheckoutButton:hover, .ConfirmButton:hover {
  background-color: rgb(18.7249484536, 94.7950515464, 94.7950515464);
}

.Button--secondary, .BackButton {
  background-color: #fff;
  color: #1f3d3d;
  border: 1px solid #e3dccb;
  padding: 0.5rem 0.9rem;
  border-radius: var(--btn-radius);
}
.Button--secondary:hover, .BackButton:hover {
  background-color: #fffdf7;
}

.Button--danger {
  background-color: rgb(177, 75.5, 69.5);
  color: #ffffff;
  border: 1px solid rgb(177, 75.5, 69.5);
  padding: 0.5rem 0.9rem;
  border-radius: var(--btn-radius);
}
.Button--danger:hover {
  background-color: rgb(185.0206896552, 82.8206896552, 76.7793103448);
}

.Button:hover, .BackButton:hover, .SubmitButton:hover, .CheckoutButton:hover, .ConfirmButton:hover, .Button--secondary:hover, .Button--danger:hover {
  text-decoration: none;
}

/* Button size modifiers */
.ButtonSmall {
  font-size: 0.875rem;
  padding: 0.3rem 0.6rem;
}

/* The standard box for a button whose whole label is one glyph — ✏️, 💬, 🗑️.
   Every one of these in the app should be this tall, so a row of them lines up
   no matter which component each came from (the task row's edit button and its
   comments button were 4px apart before this existed).

   Height is fixed and width is not: min-width holds the square, and anything
   that needs more room — the comments button's unread count, a two-glyph label —
   widens on its own rather than being clipped or squashed. --icon-btn-size is
   the escape hatch for a spot that genuinely needs a bigger hit target; set it
   on the instance, don't re-declare height.

   Size only. Pair it with a color modifier for the surface (.Button.ButtonIcon,
   .ButtonDanger.ButtonIcon), or with a component class that brings its own
   (.btn-comments). Don't combine it with .ButtonSmall — both set font-size and
   padding, and which one wins depends on source order. */
.ButtonIcon {
  --icon-btn-size: 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--icon-btn-size);
  min-width: var(--icon-btn-size);
  padding: 0 0.35rem;
  /* Emoji ignore font-weight and most inherited text styling, so the glyph's
     own size is the only lever on how big it reads. 1rem sits between the two
     sizes this replaced (0.875rem and 1.4rem). */
  font-size: 1rem;
  line-height: 1;
}

/* The round check-off button. Tasks own the pattern — mark complete, click
   again to reopen — and pull lists reuse it for Pull All and for pulling a
   single item, so one glyph in one place means the same thing app-wide.

   The ✓ is transparent at rest: the empty circle is the affordance, and the
   check inks in on hover (a preview of what the tap does) or once the thing is
   actually done. Done-and-hovered goes $danger, because the next tap undoes it.

   $danger ink on a $danger-light fill is only 3.50:1, and this glyph is 0.7rem
   bold. $danger-dark is the pairing the rest of the app already uses on
   $danger-light and clears AA at 9.17:1. */
.CompleteToggleBtn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #e3dccb;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: transparent;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.CompleteToggleBtn:hover {
  border-color: #1c723b;
  color: rgb(152.85, 191.55, 166.8);
}
.CompleteToggleBtn.is-complete {
  border-color: #1c723b;
  background: #1c723b;
  color: #ffffff;
}
.CompleteToggleBtn.is-complete:hover {
  border-color: rgb(177, 75.5, 69.5);
  background: rgb(240.3, 202.15, 195.85);
  color: #5d091f;
}

/* Nobody may flip every one of these: a floor hand on a list with nothing left
   to pull, a cancelled row. The state still has to read, so the same circle
   renders as a plain span with the interaction stripped rather than vanishing
   and letting the column lose its left edge. */
.CompleteToggleBtn.is-static {
  cursor: default;
}
.CompleteToggleBtn.is-static:hover {
  border-color: #e3dccb;
  color: transparent;
}
.CompleteToggleBtn.is-static.is-complete:hover {
  border-color: #1c723b;
  background: #1c723b;
  color: #ffffff;
}

/* `button_to` wraps its button in a form, and that form — not the button — is
   the flex item in a row. Without this the circle takes a line of its own. */
.CompleteToggleForm {
  display: flex;
}

/* Button color modifiers (composable with .Button) */
.ButtonPrimary { /* inherits from .Button — green by default */ }

.ButtonSecondary {
  background-color: #fff;
  color: #1f3d3d;
  border: 1px solid #e3dccb;
}
.ButtonSecondary:hover {
  background-color: #fffdf7;
}

.ButtonSuccess {
  background-color: #105151;
  color: #ffffff;
  border: 1px solid #105151;
}
.ButtonSuccess:hover {
  background-color: rgb(18.7249484536, 94.7950515464, 94.7950515464);
}

.ButtonDanger {
  background-color: rgb(177, 75.5, 69.5);
  color: #ffffff;
  border: 1px solid rgb(177, 75.5, 69.5);
}
.ButtonDanger:hover {
  background-color: rgb(185.0206896552, 82.8206896552, 76.7793103448);
}

.ButtonBlock {
  display: block;
  width: 100%;
  text-align: center;
}

/* A heading's controls are chrome, not headline — they get a control's size back
   rather than the <h1>'s. Link buttons need this most: a real <button> ignores
   inherited font-size by default, but an <a class="Button"> takes the full
   headline scale and renders roughly twice the size of the <button> beside it
   (the pricing page's "Import from season"). inline-flex gives the anchor a box
   that can honour min-height and centres its label the way a button does, and
   align-self stops it stretching to the row's height as a flex item. */
h1 input[type=submit], h1 button, h1 a.Button, h1 a.BackButton, h1 a.SubmitButton, h1 a.CheckoutButton, h1 a.ConfirmButton {
  min-height: 3em;
  font-size: 0.85rem;
}

h1 a.Button, h1 a.BackButton, h1 a.SubmitButton, h1 a.CheckoutButton, h1 a.ConfirmButton {
  display: inline-flex;
  align-items: center;
  align-self: center;
}

.FilterForm {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: self-end;
  margin-bottom: 1rem;
}
.FilterForm input, .FilterForm select {
  flex: 1 1 140px;
  min-width: 0;
  max-width: 200px;
  padding: 0.3rem;
  font-size: 0.9rem;
}
.FilterForm button {
  padding: 0.3rem 0.75rem;
  font-size: 0.9rem;
  white-space: nowrap;
  background-color: #1f3d3d;
  color: #ffffff;
  border: 1px solid #1f3d3d;
  border-radius: 6px;
}
.FilterForm button:hover {
  background-color: rgb(17.252173913, 33.947826087, 33.947826087);
}
.FilterForm .DateSelect {
  max-width: 120px;
}

.FilterToggleCheckbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.FilterToggleLabel {
  cursor: pointer;
  padding: 0.3rem 0.4rem;
  border: 1px solid #e3dccb;
  border-radius: 4px;
  display: flex;
  align-items: center;
  color: #527070;
  flex-shrink: 0;
}
.FilterToggleLabel:has(.FilterToggleCheckbox:checked) {
  color: rgb(161.9922330097, 110.667961165, 3.2077669903);
  border-color: #ca8a04;
  background: rgb(248.64, 240.96, 224.88);
}

.FormCompact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* was -1.5rem; negative gaps can be glitchy */
}
.FormCompact fieldset {
  border: none;
  padding: 0;
}
.FormCompact fieldset legend {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.FormCompact fieldset div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.FormCompact fieldset div input {
  flex: 1 1 150px;
  padding: 0.5rem;
  font-size: 0.95rem;
}
.FormCompact .CheckboxGroup {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /* Box and text are separate flex items so a label that wraps (narrow
     screens, long names like "View Aggregates") keeps its second line
     under the text rather than centred beneath the checkbox. */
}
.FormCompact .CheckboxGroup label {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  text-align: left;
  line-height: 1.2;
  /* .FormCompact fieldset div input above would otherwise stretch the
     box to 150px now that the label is a flex container. */
}
.FormCompact .CheckboxGroup label input[type=checkbox] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0.1rem 0 0;
  padding: 0;
}
.FormCompact .CheckboxGroup.Vertical {
  flex-direction: column;
  gap: 0.5rem;
  justify-content: flex-start;
}
.FormCompact .CheckboxGroup.TwoColumn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
  justify-items: start;
}
@media (max-width: 767px) {
  .FormCompact .CheckboxGroup.TwoColumn {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}
.FormCompact .SubmitRow {
  display: flex;
  justify-content: flex-end;
}
.FormCompact .UserForm-avatar {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: none;
  padding: 0;
}
.FormCompact .UserForm-avatarPreview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.FormCompact .UserForm-avatarPreview--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--user-color);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}
.FormCompact .UserForm-avatarField {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}
.FormCompact .UserForm-avatarField input {
  max-height: 2.5rem;
}
.FormCompact .UserForm-avatarField label {
  font-weight: 600;
  font-size: 0.85rem;
}
.FormCompact .UserForm-colorField {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.FormCompact .UserForm-colorField label {
  font-weight: 600;
  font-size: 0.85rem;
}
.FormCompact .UserForm-colorField input[type=color] {
  width: 40px;
  height: 40px;
  max-height: 40px;
  padding: 2px;
  border: 1px solid #e3dccb;
  border-radius: 6px;
  cursor: pointer;
  background: none;
}

.InlineForm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Inline row for fields that should share a line (e.g., Customer + Wanted date) */
.FormRow {
  display: flex;
  align-items: end; /* aligns inputs along their bottoms */
  gap: 0.75rem;
  flex-wrap: wrap; /* wrap on small screens */
}

.FormRow.Spaced {
  align-items: center;
  place-content: space-between;
}

/* Default field flex behavior inside a FormRow */
.FormRow > .Field {
  flex: 1 1 220px; /* grow, shrink, reasonable min */
}

/* Narrow date field */
.Field--date {
  flex: 0 0 var(--date-input-width, 12rem); /* fixed basis, no grow */
  max-width: 100%;
}

/* You can also tag the input directly if you prefer */
.Input--date {
  inline-size: var(--date-input-width, 12rem);
  max-width: 100%;
}

/* Small nicety: date digits align better */
input[type=date] {
  font-variant-numeric: tabular-nums;
}

/* Keep the remote user picker dropdown positioned correctly */
.RemoteUserPicker {
  position: relative;
}

.RemoteUserPicker .DropdownResults {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1100;
  background: #fff;
  border: 1px solid #e3dccb;
  border-radius: 8px;
  max-height: 240px;
  overflow: auto;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* Two names for one thing: the older forms say .ErrorSummary, the newer ones
   .ErrorMessages, and an error block that inherited no styling at all read as
   ordinary prose above a long form — exactly where a reader skims past it. */
.ErrorSummary,
.ErrorMessages {
  border: 1px solid rgb(177, 75.5, 69.5);
  background: rgb(240.3, 202.15, 195.85);
  color: #1f3d3d;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.ErrorSummary h3,
.ErrorMessages h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.ErrorSummary li,
.ErrorMessages li {
  margin-left: 1rem;
}

.ErrorMessage {
  margin-top: 0.25rem;
  font-size: 12px;
  color: rgb(177, 75.5, 69.5);
}

/* Segmented group (row 1) */
.SegmentGroup {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 9999px; /* rounded ends */
  overflow: hidden; /* hide child corners */
  background: #fff; /* was var(--bg-color, #fff) — that var is never defined */
}

/* Each segment looks like a button, touches neighbors */
.SegmentButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.7rem;
  text-decoration: none;
  border: 0;
  background: transparent;
  color: var(--color-text-dark);
  line-height: 1.2;
  white-space: nowrap;
}

/* faint separators between segments */
.SegmentGroup > .SegmentButton + .SegmentButton {
  border-radius: 0px;
  border-left: 1px solid color-mix(in srgb, var(--color-border, #ddd) 70%, transparent);
}

/* hover / focus */
.SegmentButton:hover,
.SegmentButton:focus {
  background: color-mix(in srgb, var(--color-border, #ddd) 15%, transparent);
  outline: none;
}

/* active (already stamped) */
.SegmentButton.is-active {
  background: color-mix(in srgb, var(--color-border, #ddd) 25%, transparent);
  font-weight: 600;
}

/* disabled look (for helper’s span fallback or disabled links) */
.SegmentButton.is-disabled,
.Button.is-disabled,
.is-disabled.BackButton,
.is-disabled.SubmitButton,
.is-disabled.CheckoutButton,
.is-disabled.ConfirmButton {
  opacity: 0.5;
  pointer-events: none;
}

/* A natively disabled button is the same fact as .is-disabled and has to look
   like it. Without this a blocked "Cancel" renders full-strength danger red and
   reads as live — the pull list page had two of them. `cursor` rather than
   `pointer-events: none`, so the `title` explaining *why* still shows. */
button.Button:disabled, button.BackButton:disabled, button.SubmitButton:disabled, button.CheckoutButton:disabled, button.ConfirmButton:disabled,
input[type=submit].Button:disabled,
input[type=submit].BackButton:disabled,
input[type=submit].SubmitButton:disabled,
input[type=submit].CheckoutButton:disabled,
input[type=submit].ConfirmButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.Button--pill {
  border-radius: 9999px;
}

.Button--sm {
  font-size: 0.9rem;
  padding: 0.35rem 0.6rem;
}

/* ── Account settings form ───────────────────────────────────────────────── */
.AccountForm {
  max-width: 860px;
}
.AccountForm__section {
  margin-bottom: 2rem;
}
.AccountForm__section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #527070;
  border-bottom: 1px solid #e3dccb;
  padding-bottom: 0.35rem;
  margin: 0 0 1rem;
}
.AccountForm__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.AccountForm__field {
  display: flex;
  flex-direction: column;
}
.AccountForm__field label {
  margin-bottom: 0.2rem;
}
.AccountForm__field--full {
  grid-column: 1/-1;
}
.AccountForm__field--wide {
  grid-column: span 2;
}
.AccountForm__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.AccountForm__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
  cursor: pointer;
}
.AccountForm__check input[type=checkbox] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin: 0;
}
.AccountForm__tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #527070;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: bold;
  cursor: help;
  vertical-align: middle;
  margin-left: 0.25rem;
}
.AccountForm__actions {
  margin-top: 0.5rem;
}

.AppDialog {
  border: none;
  padding: 0;
  background: #fff;
  max-height: 80vh;
  overflow: hidden;
  margin: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  white-space: normal;
  font-style: normal;
}
.AppDialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.AppDialog[open] {
  display: flex;
  flex-direction: column;
}

.AppDialog-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
}

/* 03: Components */
#Navbar {
  position: fixed;
  top: 0;
  left: 0;
  height: var(--app-header-height);
  width: 100%;
  background: #0a5454;
  z-index: 1010;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  color: #ffffff;
}
#Navbar a {
  color: #ffffff;
}
#Navbar.DemoMode {
  border-bottom: 4px solid var(--color-warning);
}

.NavbarLeft,
.NavbarCenter,
.NavbarRight {
  display: flex;
  padding-right: 1rem;
}

#NavbarTitle {
  line-height: 1.5rem;
  margin: 0;
  color: #ffffff;
}

.NavbarAvatarImg {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

#NavbarProfileLink {
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: inherit;
}
#NavbarProfileLink a:hover {
  text-decoration: none;
}
#NavbarProfileLink:hover {
  background-color: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

@media (max-width: 767px) {
  .NavbarProfileName {
    display: none;
  }
  .NavbarCenter {
    width: min-content;
    padding-right: 1rem;
  }
}
#LeftMenuToggle {
  background: none;
  border: none;
  font-size: 1.5rem;
  margin-right: 1rem;
  cursor: pointer;
  color: #ffffff;
  padding: 0;
}

#LeftMenu {
  font-size: 1.2rem;
  width: 200px;
  position: fixed;
  top: 0;
  left: -250px;
  transition: left 0.3s ease;
  height: 100%;
  background: rgba(10, 84, 84, 0.97);
  color: white;
  z-index: 1003;
  padding-top: 4rem;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
#LeftMenu.open {
  left: 0;
}
#LeftMenu ul {
  list-style: none;
  padding: 0;
}
#LeftMenu ul li {
  padding: 0.8rem 1rem;
}
#LeftMenu a {
  color: white;
}
#LeftMenu .LeftMenuGroup {
  padding: 0;
}
#LeftMenu .LeftMenuGroup > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#LeftMenu .LeftMenuGroup > ul li {
  padding: 0.4rem 1rem 0.4rem 2rem;
  font-size: 1rem;
}
#LeftMenu .LeftMenuGroupToggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.8rem 1rem;
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  text-align: left;
}
#LeftMenu .LeftMenuGroupToggle:hover {
  background: rgba(255, 255, 255, 0.08);
}
#LeftMenu .LeftMenuGroupToggle:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}
#LeftMenu .LeftMenuChevron {
  font-size: 0.7em;
  transition: transform 0.2s ease;
  display: inline-block;
}
#LeftMenu .LeftMenuChevron.is-open {
  transform: rotate(90deg);
}

.HeaderButton {
  display: inline-flex;
  align-items: center;
  height: 34px;
  background: #0a5454;
  color: #ffffff;
  border: 1px solid rgba(15.4255319149, 129.5744680851, 129.5744680851, 0.97);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s, border 0.2s;
}
.HeaderButton:hover {
  background: rgba(12.7127659574, 106.7872340426, 106.7872340426, 0.97);
  border-color: rgb(33.4008510638, 228.6191489362, 228.6191489362);
}
.HeaderButton:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  text-decoration: none;
}

.HeaderRecentSales {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.RecentSaleButton {
  gap: 0.35rem;
  max-width: 14rem;
  overflow: hidden;
  white-space: nowrap;
  flex: 0 0 auto;
}
.RecentSaleButton .SaleDockGlyph {
  flex: 0 0 auto;
  font-size: 0.9em;
  line-height: 1;
}
.RecentSaleButton .RecentSaleNumber {
  flex: 0 0 auto;
}
.RecentSaleButton .RecentSaleNumber:not(:only-child)::after {
  content: "•";
  margin-left: 0.35rem;
  opacity: 0.6;
}
.RecentSaleButton .RecentSaleCustomer {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: normal;
}

@media (max-width: 1399px) {
  .RecentSaleButton {
    max-width: 10rem;
  }
}
@media (max-width: 1199px) {
  .RecentSaleButton {
    max-width: none;
  }
  .RecentSaleButton .RecentSaleCustomer {
    display: none;
  }
  .RecentSaleButton .RecentSaleNumber:not(:only-child)::after {
    content: none;
  }
}
.LoginPage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #faf7ee;
}

.LoginBox {
  width: 100%;
  max-width: 400px;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  box-sizing: border-box;
  color: #1f3d3d;
  text-align: center;
}

.LoginTitle {
  font-size: 1.8rem;
  color: #105151;
  margin-bottom: 0.5rem;
}

.LoginBox .Logo,
.LoginBox .LoginTitle {
  display: inline-block;
  margin-bottom: 1rem;
}

.LoginSubtitle {
  font-size: 1rem;
  color: #527070;
  margin-bottom: 1rem;
}

.LoginBox .DemoText {
  margin-bottom: 1rem;
}

.LoginBox label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: #1f3d3d;
}

.LoginBox input[type=email],
.LoginBox input[type=password] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1.25rem;
  border: 1px solid #e3dccb;
  border-radius: 0.375rem;
  background-color: #fffdf7;
  box-sizing: border-box;
  font-size: 1rem;
}

.LoginBox input[type=submit] {
  width: 100%;
  padding: 0.75rem;
  background-color: #105151;
  color: #ffffff;
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
.LoginBox input[type=submit]:hover {
  background-color: rgb(11.793814433, 59.706185567, 59.706185567);
}

.FormGroup {
  margin-bottom: 1rem;
  text-align: left;
}
.FormGroup label {
  margin-bottom: 0.25rem;
}

.HeaderFilterFlexContainer {
  display: flex;
  align-items: unset;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.HeaderFilterFlexContainer select {
  background-color: #faf7ee;
  color: #105151;
  font-size: 1.6rem;
  padding: 0.25rem;
}

.HeaderFilterYearLabel {
  font-weight: 500;
  white-space: nowrap;
}

.HeaderFilterYearSelect {
  min-width: 10rem;
  max-width: 11rem;
}

.HeaderFilterStockTypeSelect {
  min-width: 16rem;
  max-width: 16rem;
}

.HeaderFilterSalesFilterSelect {
  min-width: 15rem;
  max-width: 15rem;
}

.HeaderFilterSalesSortSelect {
  min-width: 20rem;
  max-width: 20rem;
}

.HeaderFilterSpeciesDropdown {
  position: relative;
}

.HeaderFilterSpeciesButton {
  min-height: unset;
  font-size: 1.6rem;
  font-family: inherit;
  font-weight: normal;
  border-radius: 4px;
  background-color: #faf7ee;
  color: #105151;
  padding: 0 0.5rem;
  margin-top: 0.5rem;
  border: 1px solid #e3dccb;
  cursor: default;
  min-width: 26rem;
  max-width: 26rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.HeaderFilterSpeciesButton::after {
  content: "↓";
  flex-shrink: 0;
}
.HeaderFilterSpeciesButton:hover {
  background-color: initial;
}

.HeaderFilterSpeciesPanel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid #e3dccb;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  max-height: 28rem;
  min-width: 26rem;
  overflow-y: auto;
  padding: 0.4rem 0;
}

.HeaderFilterSpeciesOption {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  font-size: 1.4rem;
  cursor: default;
  white-space: nowrap;
}
.HeaderFilterSpeciesOption:hover {
  background-color: #faf7ee;
}
.HeaderFilterSpeciesOption input[type=checkbox] {
  cursor: pointer;
}

.SpeciesTableWrapper {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.SpeciesTable {
  min-width: 28rem;
}
.SpeciesTable .SpeciesColumn {
  min-width: 8rem;
}
@media (max-width: 767px) {
  .SpeciesTable {
    min-width: 0;
  }
}

.EditColumn .SpeciesInfoBtn-trigger {
  font-size: 1.15rem;
}

.SpeciesTable__letterAnchor {
  scroll-margin-top: calc(var(--app-header-height) + 0.5rem);
}
.SpeciesTable__letterAnchor td {
  padding: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border: none;
}

.SpeciesShow {
  max-width: 70rem;
  margin: 0 auto;
  padding: 1rem;
}

.SpeciesShow-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.SpeciesShow-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.SpeciesShow-latin {
  font-style: italic;
  margin-left: 0.5rem;
}

.SpeciesShow-section {
  margin-top: 1.5rem;
}

.SpeciesGallery {
  margin-top: 0.5rem;
}

.SpeciesGallery-empty {
  padding: 1rem 0;
}

.SpeciesGallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.SpeciesGallery-card {
  border: 1px solid #e3dccb;
  border-radius: 6px;
  padding: 0.5rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.SpeciesGallery-card.is-primary {
  border-color: #ca8a04;
  box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.2);
}

.SpeciesGallery-thumbWrap {
  position: relative;
  aspect-ratio: 1/1;
  background: #fffdf7;
  border-radius: 4px;
  overflow: hidden;
}
.SpeciesGallery-thumbWrap--clickable {
  cursor: zoom-in;
}
.SpeciesGallery-thumbWrap--clickable:hover .SpeciesGallery-thumb {
  opacity: 0.88;
}

.SpeciesGallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.SpeciesGallery-thumb--missing {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #527070;
  font-size: 0.85rem;
}

.SpeciesGallery-primaryBadge {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  background: rgba(151.5, 103.5, 3, 0.95);
  color: #fff;
  font-size: 0.85rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

.SpeciesGallery-descForm {
  margin: 0;
}

.SpeciesGallery-descInput {
  width: 100%;
  font-size: 0.85rem;
  resize: vertical;
}

.SpeciesGallery-cardActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.SpeciesGallery-cardActions form {
  margin: 0;
}

.SpeciesGallery-actionBtn {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}

.SpeciesGallery-meta {
  font-size: 0.7rem;
  color: #527070;
  text-align: center;
}

.SpeciesGallery-deleteLink {
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  opacity: 0.6;
}
.SpeciesGallery-deleteLink:hover {
  opacity: 1;
}

.SpeciesGallery-caption {
  font-size: 0.85rem;
  margin: 0;
  color: #1f3d3d;
}

.SpeciesUploader {
  margin-bottom: 1rem;
}

.SpeciesUploader-form {
  margin: 0;
}

input.SpeciesUploader-hiddenFile {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.SpeciesUploader-dropzone {
  border: 2px dashed #e3dccb;
  border-radius: 6px;
  padding: 1rem;
  text-align: center;
  background: #fffdf7;
  transition: background 0.15s, border-color 0.15s;
}
.SpeciesUploader-dropzone.is-dragging {
  background: rgba(16, 81, 81, 0.06);
  border-color: #105151;
}

.SpeciesUploader-prompt {
  margin: 0 0 0.5rem;
  color: #527070;
  font-size: 0.9rem;
}

.SpeciesUploader-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (hover: hover) and (pointer: fine) {
  .SpeciesUploader-cameraBtn {
    display: none;
  }
}

.SpeciesUploader-status {
  margin: 0.5rem 0 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: #1f3d3d;
}
.SpeciesUploader-status.is-error {
  color: rgb(177, 75.5, 69.5);
}

.SpeciesUploader-cropDialog {
  border: none;
  border-radius: 8px;
  padding: 0;
  max-width: 95vw;
  width: 40rem;
  max-height: 95vh;
}
.SpeciesUploader-cropDialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.SpeciesUploader-cropBody {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.SpeciesUploader-cropContainer {
  max-height: 70vh;
  overflow: hidden;
}
.SpeciesUploader-cropContainer img {
  display: block;
  max-width: 100%;
}

.SpeciesUploader-cropActions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.PhotoHub-uploaderSpecies {
  margin-bottom: 0.75rem;
}
.PhotoHub-uploaderSpecies label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: #1f3d3d;
}

.PhotoHub-uploaderSpeciesSelect {
  max-width: 24rem;
}

.PhotoHub-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.PhotoHub-filter select {
  min-width: 0;
}

.PhotoHub-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.PhotoHub-clear {
  font-size: 0.85rem;
}

.PhotoCard.is-unassigned {
  border-style: dashed;
  border-color: #527070;
}

.PhotoCard-needsSpecies {
  position: absolute;
  bottom: 0.25rem;
  left: 0.25rem;
  background: rgba(40, 40, 40, 0.8);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

.PhotoCard-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.PhotoCard-assignForm {
  margin: 0;
}

.PhotoCard-speciesSelect {
  width: 100%;
  font-size: 0.85rem;
}

.PhotoCard-species {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1f3d3d;
}

.Pagination {
  margin-top: 1.5rem;
}

#SpeciesPhotosLink {
  justify-content: center;
  padding: 0 0.6rem;
  font-size: 1.4rem;
  line-height: 1;
}

.LotForm {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 100%;
  justify-content: end;
}
@media (min-width: 520px) {
  .LotForm {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

.LotForm__inputs {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.LotForm__field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

.LotForm__label {
  font-size: 0.72rem;
  color: #527070;
  line-height: 1;
}

.LotForm__notesRow {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}
@media (min-width: 700px) {
  .LotForm__notesRow {
    flex-direction: row;
    gap: 0.5rem;
  }
  .LotForm__notesRow .LotForm__notesLabel {
    flex: 1;
    min-width: 0;
  }
}

.LotForm__notesLabel {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
}

.LotForm__footer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.LotField {
  font-size: 0.9rem;
}

.LotInput {
  width: 100%;
  text-align: right;
}
@media (min-width: 520px) {
  .LotInput {
    width: 7rem;
  }
}

.LotNotes {
  width: 100%;
  resize: vertical;
}
@media (min-width: 520px) {
  .LotNotes {
    flex: 1;
    min-width: 6rem;
    width: auto;
  }
}

.LotSubmit {
  width: 4rem;
  padding: 0.25rem 0.5rem;
}

.LotsPageLayout {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.AlphaBar {
  position: sticky;
  top: var(--app-header-height);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 1.4rem;
  max-height: calc(100vh - var(--app-header-height));
  overflow-y: auto;
  scrollbar-width: none;
}
.AlphaBar::-webkit-scrollbar {
  display: none;
}

.AlphaBar__letter {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.65;
  border-radius: 3px;
  text-decoration: none;
  color: #527070;
}
.AlphaBar__letter:not(.AlphaBar__letter--missing):hover {
  background-color: #105151;
  color: white;
}
.AlphaBar__letter--missing {
  color: #e3dccb;
  cursor: default;
}

.LotsGrid__letterAnchor {
  scroll-margin-top: calc(var(--app-header-height) + 0.5rem);
}

.LotsGrid {
  flex: 1;
  min-width: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #e3dccb;
}

.LotsGrid__hint {
  font-size: 0.75rem;
  color: #527070;
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid #e3dccb;
  background-color: rgba(255, 255, 255, 0.4);
}

.LotsRow {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #e3dccb;
}
.LotsRow:last-child {
  border-bottom: none;
}
.LotsRow:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.03);
}

.LotsRow__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.LotsRow__species {
  font-size: 0.9rem;
  font-weight: 600;
}

.LotNewLink {
  font-size: 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.LotsRow__lots {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.LotAccessionGroup {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.LotAccessionGroup--grouped {
  background-color: #ece5d3;
  border-radius: 5px;
  padding: 0.4rem;
  gap: 0.3rem;
}

.LotGroupHeader {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  border-left-width: 3px;
  border-left-style: solid;
  background-color: var(--color-bg-light);
  font-size: 0.85rem;
}

.LotGroupHeader__label {
  font-size: 0.72rem;
  color: #527070;
  font-style: italic;
  margin-right: 0.25rem;
}

.LotGroupHeader__counts {
  display: flex;
  gap: 0.75rem;
}

.LotBox__footer {
  display: flex;
  align-items: center;
  margin-top: 0.3rem;
}

.LotBox__lastCounted {
  font-size: 0.75rem;
  color: #527070;
  margin-left: auto;
}

.LotBox__addCountToggle {
  margin-left: 0.5rem;
}

.LotImportedBadge {
  margin-left: 0.5rem;
  font-size: 0.72rem;
  color: #527070;
  font-style: italic;
}

.LotsRow__form {
  min-width: 0;
  width: 100%;
}

.LotBox {
  border-radius: 3px;
  padding: 0.3rem 0.5rem;
}

.LotBoxSummary {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.25rem;
}
@media (min-width: 520px) {
  .LotBoxSummary {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.8em;
  }
}

.LotBoxRow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.LotBoxRow--header {
  justify-content: space-between;
}

.LotBoxRow--counts {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
}

.LotBoxDate {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.85rem;
}

.LotBoxHeaderMain {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.LotNoPriceFlag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  color: #fff;
  background-color: rgb(177, 75.5, 69.5);
  border-radius: 3px;
  text-decoration: none;
}
.LotNoPriceFlag:hover {
  background-color: rgb(147.7034482759, 63.0034482759, 57.9965517241);
}

.LotBoxCounts {
  white-space: nowrap;
  font-size: 0.85rem;
}
@media (min-width: 520px) {
  .LotBoxCounts {
    padding-left: 0.5rem;
    border-left: 1px dashed #e3dccb;
    min-width: 9rem;
  }
}

.LotCountLabel {
  color: #527070;
  margin-right: 0.15rem;
}

.LotCountAvail {
  color: #527070;
}

.LotBoxActions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex-shrink: 0;
}

.LotBoxNotes {
  width: 100%;
  font-size: 0.8rem;
  color: #527070;
  font-style: italic;
  word-break: break-word;
  white-space: pre-wrap;
}

.LotEditToggle {
  font-size: 0.9rem;
  line-height: 1;
}

.LotDropdownToggle {
  font-size: 0.78rem;
  padding: 0.1rem 0.35rem;
  background: none;
  border: 1px solid #e3dccb;
  border-radius: 3px;
  cursor: pointer;
  color: #527070;
  line-height: 1.4;
  white-space: nowrap;
}
.LotDropdownToggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #1f3d3d;
}

.LotFinalBadge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgb(9.2701030928, 46.9298969072, 46.9298969072);
  background-color: rgb(158.4346391753, 235.9253608247, 235.9253608247);
  border: 1px solid rgb(39.8432989691, 201.7067010309, 201.7067010309);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  white-space: nowrap;
}

.LotUnmarkFinal {
  font-size: 0.72rem;
  padding: 0.05rem 0.3rem;
  background: none;
  border: 1px solid #e3dccb;
  border-radius: 3px;
  cursor: pointer;
  color: #527070;
  line-height: 1.4;
}
.LotUnmarkFinal:hover {
  background-color: rgb(240.3, 202.15, 195.85);
  border-color: rgb(177, 75.5, 69.5);
  color: #5d091f;
}

.LotFinalLabel {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  color: #527070;
}

.LotFinalCheckbox {
  cursor: pointer;
}

.LotCountHistory {
  border-radius: 4px;
  border: 1px solid #e3dccb;
  overflow: hidden;
}

.LotCountHistoryRow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.3rem 0.75rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid #e3dccb;
  font-size: 0.9rem;
}
.LotCountHistoryRow:last-child {
  border-bottom: none;
}
.LotCountHistoryRow:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.03);
}

.LotCountHistoryRow__meta {
  white-space: nowrap;
  color: #527070;
  font-size: 0.85rem;
  flex: 1;
}

.LotCountHistoryRow__counts {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 7rem;
}

.LotCountHistoryRow__notes {
  flex-basis: 100%;
  font-size: 0.85rem;
}
.LotCountHistoryRow__notes p {
  margin: 0;
}

.LotCountHistoryRow__editForm {
  width: 100%;
  padding-top: 0.4rem;
}

.SaleItemRow.lot-count-final {
  background-color: rgb(186.024742268, 241.375257732, 241.375257732);
}

.LotFinalNote {
  display: block;
  font-size: 0.7rem;
  color: rgb(11.793814433, 59.706185567, 59.706185567);
}

.LotSalesNotes {
  display: block;
  font-size: 0.75rem;
  color: #1f3d3d;
  margin-top: 0.1rem;
}

.LotPrivateBadge {
  font-size: 0.78rem;
  font-style: italic;
}

.LotShowHeader {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.LotShowHeader h1 {
  margin-bottom: 0;
}

.LotShowHeader__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.LotEditLink {
  font-size: 0.85rem;
  white-space: nowrap;
}

.StockTypeNameInput, .StockTypeIntervalsInput {
  width: 12rem;
}

.StockTypeUnitLabelInput, .StockTypeUnitsPerLabelInput {
  width: 6rem;
}

.StockTypeSubmitButton {
  width: auto;
  padding-inline: 1rem;
}

/* Stacked label + input cells inside the inline stock type editor form. */
.InlineForm .StockTypeEditorField {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.InlineForm .StockTypeEditorField > label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.7;
}
.InlineForm .StockTypeEditorField > textarea {
  width: 21rem;
}
.InlineForm .StockTypeEditorField > input[type=color] {
  height: 3rem;
}

/* Full-width separator that forces a flex line break and draws a subtle rule between field groups. */
.InlineForm .StockTypeEditorSeparator {
  flex-basis: 100%;
}

/* The "Lots bound by season" checkbox keeps its inline label styling. */
.InlineForm .StockTypeEditorField--checkbox {
  justify-content: flex-end;
}
.InlineForm .StockTypeEditorField--checkbox > label {
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
}

.StockTypeList {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem;
  list-style: none;
  border-radius: 0.5rem;
  background-color: #ece5d3;
  cursor: default;
}

/* Per-stock-type sizes, edited inline with the stock type they belong to. */
.InlineForm .StockTypeSizes {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.StockTypeSizes__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

.StockTypeSizes__hint {
  margin: 0;
  max-width: 46rem;
  font-size: 0.8rem;
  color: #527070;
}

.StockTypeSizeRow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid #e3dccb;
  border-radius: 0.35rem;
}
.StockTypeSizeRow--new {
  border-style: dashed;
}

.StockTypeSizeRow__field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.StockTypeSizeRow__field input {
  width: 10rem;
}
.StockTypeSizeRow__field--narrow input {
  width: 4.5rem;
}

.StockTypeSizeRow__caption {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

.StockTypeSizeRow__toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-bottom: 0.3rem;
  font-size: 0.85rem;
  white-space: nowrap;
}
.StockTypeSizeRow__toggle--destroy {
  color: rgb(177, 75.5, 69.5);
}

.StockTypeSizeRow__locked {
  color: #527070;
  font-style: italic;
  cursor: help;
}

/* Phones: one field per line rather than a squeezed single row. */
@media (max-width: 600px) {
  .StockTypeSizeRow__field input {
    width: 100%;
  }
  .StockTypeSizeRow__field {
    flex: 1 1 100%;
  }
  .StockTypeSizeRow__field--narrow {
    flex: 0 0 6rem;
  }
  .StockTypeSizeRow__field--narrow input {
    width: 100%;
  }
}
/* Stock Type Category Form */
.InlineForm .StockTypeCategoryStockTypeInput,
.InlineForm .StockTypeCategoryNameInput {
  display: inline-block;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.InlineForm .StockTypeCategoryStockTypeInput {
  width: 140px;
}

.InlineForm .StockTypeCategoryNameInput {
  width: 180px;
}

.InlineForm .DateRangeGroup {
  display: inline-block;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  white-space: nowrap;
}

.InlineForm .StockTypeCategoryMonthInput {
  width: 100px;
  margin-right: 0.25rem;
}

.InlineForm .StockTypeCategoryDayInput {
  width: 60px;
  margin-right: 0.25rem;
}

.InlineForm .DateRangeGroup > span {
  margin: 0 0.25rem;
}

.InlineForm .StockTypeCategoryDescriptionInput {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  min-height: 60px;
}

.InlineForm .StockTypeCategorySubmitButton {
  margin-right: 0.5rem;
}

/* Stock Type Category List */
.StockTypeCategoryList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.StockTypeCategoryList li {
  margin-bottom: 0.5rem;
  padding: 0.75rem;
  display: flex;
  align-items: center;
}

.StockTypeCategoryList .AvailabilityRanges {
  margin-left: auto;
  margin-right: 1rem;
  white-space: nowrap;
}

.StockTypeCategoryList strong {
  font-weight: 600;
}

/* Base shell both lists can share. minmax(0, 1fr) rather than the default auto
   column: an auto column is sized by its max-content, so one long row would
   widen the whole list and spill it out of its container. */
.SalesList, .PullListsIndex {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

/* Muted aside inside a list heading (e.g. how the list is sorted) */
.SalesListHint {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  opacity: 0.65;
  white-space: nowrap;
}

/* The per-row skeleton that both lists can reuse */
.SalesRow, .PullListRow, .SalesMenuListItem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.SalesRowHeader, .SalesMenuListItem .SalesMenuListItemHeader {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 0.5rem;
}

.SaleNumber {
  font-weight: 700;
}

/* A sale number that opens the dock. It reads as part of the line until you
   approach it, then shows its edges — an affordance without a second accent
   colour on a row already dense with badges, and without a glyph that every
   row would wear alike. The negative margin cancels the padding, so the chip
   costs no layout and the number stays on the row's text grid.

   Qualified with `a` so the hover rule ties `.SalesRow a:hover` on specificity
   and wins on source order: this chip is not underlined, it fills in. */
a.SaleNumberLink {
  display: inline-flex;
  align-items: baseline;
  padding: 0.1em 0.4em;
  margin: -0.1em -0.4em;
  border: 1px solid transparent;
  border-radius: 5px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.12s ease-in-out, border-color 0.12s ease-in-out;
}
a.SaleNumberLink:hover, a.SaleNumberLink:focus-visible {
  background: var(--color-bg-light);
  border-color: var(--color-border);
  text-decoration: none;
}

.SaleSummary {
  font-weight: 500;
}

.SaleDate {
  opacity: 0.75;
}

.SaleUser {
  font-size: 0.9rem;
  color: rgb(27.9, 54.9, 54.9);
}

.SaleStatus {
  font-size: 0.85rem;
  color: rgb(23.25, 45.75, 45.75);
}

/* The top line is two parts that never trade places: `.RowContent`, which wraps
   as freely as it needs to, and `.RowActions`, which does not. Splitting them is
   what keeps the comment button and the chevron in the row's top-right corner
   however many lines the content takes — as flat children of a wrapping flex row
   the pair dropped onto a line of its own the moment a total, a customer name or
   a badge grew.

   `align-items` stays at its `stretch` default so a one-line row still reads
   centred: the content group fills the row height (set by the taller action
   buttons) and centres its single line inside it. */
.RowMain, .PullListRow .RowMain {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}
.RowMain span, .PullListRow .RowMain span {
  white-space: nowrap;
}

.RowContent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* Comments and the chevron, pinned to the row's top-right corner — the one spot
   that does not move as a row's name, totals, status or badges change length,
   and the only one a reader can aim at without looking. */
.RowActions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
  margin-left: auto;
  align-self: flex-start;
}

/* Flex/grid children default to min-width:auto, which lets a long customer or
   company name push past the row and collide with its neighbours. Let them
   shrink, and truncate the name rather than overflow. */
.RowMain > *, .PullListRow .RowMain > *,
.RowContent > *,
.SalesRowHeader,
.SalesMenuListItem .SalesMenuListItemHeader,
.SalesRowHeader > *,
.SalesMenuListItem .SalesMenuListItemHeader > * {
  min-width: 0;
}

.SaleUser {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The chevron. `.RowActions` places it; this is only its surface.

   color: inherit is load-bearing: it resolves to $text-dark on the index variant
   and $text-light on the menu variant, so one chevron serves both. The hover
   fill is therefore derived from currentColor rather than being its own token —
   a 12% tint of the glyph color can never collide with the glyph itself, in
   either variant, however the variant colors move later. */
.RowExpand, .PullListRow .RowExpand {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 0.25rem;
  line-height: 0;
  cursor: pointer;
  color: inherit;
  border-radius: 999px;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.RowExpand:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.RowExpand.is-open {
  transform: rotate(180deg);
}

/* A menu row has no chevron and no `.RowActions` cluster — the comment button
   is a flat child there, so it carries the auto margin to the right edge
   itself. Everywhere else `.RowActions` does that job for the pair. */
.SalesRow > .CommentsButtonWrap, .PullListRow > .CommentsButtonWrap, .SalesMenuListItem > .CommentsButtonWrap {
  margin-left: auto;
  flex: 0 0 auto;
}

/* Narrow screens: let the header stack instead of squeezing everything onto one
   line, and allow the summary/status text to wrap. */
@media (max-width: 640px) {
  .SalesRow, .PullListRow, .SalesMenuListItem {
    position: relative;
    padding: 0.5rem 0.75rem;
  }
  /* The number/customer group keeps its single line and truncates the name (the
     expanded panel has the full contact details); the money summary and status
     wrap instead of running off the row. The nested spans need it too — the
     per-stock-type counts are their own spans and inherit .RowMain's nowrap. */
  .SaleSummary,
  .SaleSummary span,
  .SaleStatus,
  .SaleStatus span {
    white-space: normal;
  }
}
/* Details span full row width beneath. Single column: the items table needs the
   whole width, since line totals can run to hundreds of thousands of dollars. */
.SaleRowDetails, .PullListDetails {
  display: grid;
  gap: 0.5rem 1rem;
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: 0.5rem;
}

.SaleRowDetails[hidden], [hidden].PullListDetails {
  display: none !important;
}

/* Customer contact, above the items */
.SaleRowCustomer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  font-size: 0.85rem;
}

.SaleRowCustomerBlock {
  min-width: 0;
  overflow-wrap: anywhere;
}

.SaleRowMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.25rem;
  font-size: 0.85rem;
}

.SaleRowMetaItem {
  white-space: nowrap;
}

.SaleRowMetaLabel {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin-right: 0.15rem;
}

.SaleRowNotes {
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.SaleRowNote {
  overflow-wrap: anywhere;
}

.SaleRowNoteLabel {
  font-weight: 600;
  opacity: 0.7;
  margin-right: 0.25rem;
}
.SaleRowNoteLabel::after {
  content: ":";
}

/* Sale items */
.SaleItemsTable {
  margin-top: 0px;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.SaleItemsTable th, .SaleItemsTable td {
  padding: 0.2rem 0.4rem;
}

.SaleItemsTable thead th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  opacity: 0.7;
}

.SaleItemsTable .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Percentage widths under table-layout: fixed spill their contents into the next
   column — a six-figure line total or "0.25 qt" simply overflowed. The name
   column absorbs the slack instead and everything else sizes to its content
   (width: 1% is the shrink-to-fit idiom for an auto table). */
/* The item name is the only column allowed to wrap, so it gives up width first */
.SaleItemsTable .col-name {
  min-width: 6rem;
  overflow-wrap: anywhere;
}

.SaleItemAccession {
  display: block;
  font-size: 0.8em;
  opacity: 0.6;
  overflow-wrap: anywhere;
}

.SaleItemsTable .col-type {
  width: 1%;
  white-space: nowrap;
}

.SaleItemsTable .col-size {
  width: 1%;
  white-space: nowrap;
  opacity: 0.75;
}

.SaleItemsTable .col-qty {
  width: 1%;
}

.SaleItemsTable .col-unit {
  width: 1%;
}

.SaleItemsTable .col-total {
  width: 1%;
  font-weight: 600;
}

/* Spans the unit and total columns on an unpriced row */
.SaleItemsTable .col-no-pricing {
  width: 1%;
  white-space: nowrap;
}

/* Optional light row stripes. Unpriced rows sit this out: the stripe is a
   background shorthand, and would otherwise wipe out their warning tint. */
.SaleItemsTable tbody tr:nth-child(odd):not(.needs-pricing) {
  background: rgba(0, 0, 0, 0.02);
}

/* Small screens: hide the header and give each item two lines — what identifies
   it (type, size, name, accession) above what it costs (qty, unit, total) */
@media (max-width: 640px) {
  .SaleItemsTable thead {
    display: none;
  }
  .SaleItemsTable, .SaleItemsTable tbody, .SaleItemsTable tr, .SaleItemsTable td {
    display: block;
  }
  .SaleItemsTable tr {
    padding: 0.35rem 0;
  }
  .SaleItemsTable tr + tr {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  .SaleItemsTable td {
    width: auto;
    min-width: 0;
    padding: 0 0.4rem;
  }
  /* Line 1. Inline rather than block so the three cells share a line and wrap
     only when they have to; the accession gives up its own line here. */
  .SaleItemsTable .col-name {
    display: inline;
    font-weight: 600;
  }
  .SaleItemsTable .col-name .SaleItemAccession {
    display: inline;
  }
  .SaleItemsTable .col-type,
  .SaleItemsTable .col-size {
    display: inline;
  }
  /* A table row has nothing to wrap the two groups in, so the break between
     them is a preserved newline after the last cell of line 1 (which has to
     stay inline for the newline to break the row's line rather than its own).
     That last cell is the item name now that type and size lead the row. */
  .SaleItemsTable .col-name::after {
    content: "\a";
    white-space: pre;
  }
  /* Line 2 */
  .SaleItemsTable .col-qty,
  .SaleItemsTable .col-unit,
  .SaleItemsTable .col-total,
  .SaleItemsTable .col-no-pricing {
    display: inline-block;
    width: auto;
    margin-right: 0.5rem;
    text-align: left;
  }
  /* QTY/UNIT/TOTAL prefixes stood in for the hidden header, but they cost more
     width than the figures themselves and pushed the total onto a third line.
     The figures carry their own meaning as a receipt line instead:
     "4.00 qts @ $131.24  $524.96" (the quantity keeps its unit label, and the
     line total is the bold one). */
  .SaleItemsTable .col-unit::before {
    content: "@ ";
    opacity: 0.55;
  }
}
/* Right side: info at top, totals pinned bottom */
.RowDetailsSide {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.RowDetailsTop {
  text-align: right;
}

/* Right-aligned contact info reads as a mistake once it is no longer a column */
@media (max-width: 720px) {
  .RowDetailsTop {
    text-align: left;
  }
}
.RowDetailsLeft {
  text-align: left;
  display: flex;
  flex-direction: column;
  /* Last-resort escape hatch: if even the wrapped name column cannot give up
     enough width, the table scrolls instead of pushing the page sideways. */
  overflow-x: auto;
}

/* ===== Variants ===== */
/* Right-side menu variant */
.SalesList--menu {
  background: rgba(10, 84, 84, 0.97);
  color: #ffffff;
}

.SalesList--menu .SalesRow, .SalesList--menu .PullListRow, .SalesList--menu .SalesMenuListItem {
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.SalesList--menu .SaleUser,
.SalesList--menu .SaleStatus {
  color: rgb(178.5, 178.5, 178.5);
}

/* Index page variant (light/neutral) */
.SalesList--index, .PullListsIndex {
  color: #1f3d3d;
}

.SalesList--index .SalesRow, .PullListsIndex .SalesRow, .SalesList--index .PullListRow, .PullListsIndex .PullListRow, .SalesList--index .SalesMenuListItem, .PullListsIndex .SalesMenuListItem {
  border-color: rgba(0, 0, 0, 0.06);
  background-color: var(--color-bg-dark);
}

.SalesList--index .SaleUser, .PullListsIndex .SaleUser,
.SalesList--index .SaleStatus,
.PullListsIndex .SaleStatus {
  color: rgb(21.7, 42.7, 42.7);
}

/* ===== Compatibility layer (so you don't have to rename markup today) ===== */
/* A tiny component you can reuse anywhere */
.ChipGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}

.Chip {
  --chip-border: rgba(0,0,0,.18);
  --chip-accent: #527070;
  --chip-active-bg: color-mix(in srgb, var(--chip-accent) 16%, transparent);
  --chip-focus: color-mix(in srgb, var(--chip-accent) 35%, transparent);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 2px solid var(--chip-border);
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.Chip input[type=checkbox],
.Chip input[type=radio] {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: inherit;
}
.Chip span {
  pointer-events: none;
}
.Chip.StockTypeChip {
  border-color: color-mix(in srgb, var(--stock-color) 35%, transparent);
  color: rgb(178.5, 178.5, 178.5);
}
.Chip.StockTypeChip:has(input:checked) {
  color: var(--color-text-light);
  border-color: var(--stock-color);
  background: color-mix(in srgb, var(--stock-color) 16%, transparent);
}
.Chip.StockTypeChip:not(:has(input:checked)) {
  opacity: 0.5;
  background: transparent;
}

.Chip:hover {
  border-color: rgba(0, 0, 0, 0.34);
}

.Chip:has(input:focus-visible) {
  box-shadow: 0 0 0 2px var(--chip-focus);
}

.Chip:has(input:checked) {
  border-color: var(--chip-accent);
  background: var(--chip-active-bg);
  color: #1f3d3d;
}

#SalesMenu,
#SaleDock {
  top: var(--app-header-height);
  height: calc(100vh - var(--app-header-height));
  position: fixed;
  right: 0;
}

#SalesMenu {
  z-index: var(--z-menu);
  width: var(--sales-menu-width);
  transform: translateX(100%);
  transition: transform var(--dock-transition-duration) var(--dock-transition-ease);
  will-change: transform;
  background: rgba(10, 84, 84, 0.97);
  color: #ffffff;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}
#SalesMenu ul {
  list-style: none;
  padding: 0;
}
#SalesMenu li {
  padding: 1rem;
}
#SalesMenu a {
  color: #ffffff;
}

html.sales-menu-open #SalesMenu {
  transform: translateX(0);
}

.SalesMenuHeader {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.NewSaleButton {
  background-color: #105151;
  color: #ffffff;
  border: 1px solid #105151;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-weight: 700;
}
.NewSaleButton:hover {
  background-color: #166b6b;
}

.FiltersRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.5rem;
}

/* ensure controls fill their grid cell */
.FiltersRow input,
.FiltersRow select {
  width: 100%;
}

/* Use the Chip component here */
#SalesFilterForm .StockTypeFilters {
  margin-top: 0rem;
  padding: 0.25rem 0.25rem 0.5rem;
}

#SalesFilterForm .StockTypeFilters label.Checkbox {
  margin-top: 0rem;
}

/* turbo-frame is an inline element by default, so it needs to be told to behave as
   the flex child that owns the remaining column height. */
#SalesMenu turbo-frame#sales_menu_list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.SalesMenuMeta {
  padding: 0.35rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgb(191.25, 191.25, 191.25);
}

.SalesMenuScroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#SalesMenuList {
  padding: 0.5rem;
  /* The panel already paints the menu surface. The list used to paint its own
     translucent layer on top of it, which left a visible seam wherever a short list
     ended — the doubled background stopped and the page underneath started showing
     through the panel's single layer. */
  background: transparent;
}

/* Loading placeholder and "nothing matched" message */
.SalesMenuNotice {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0.5rem;
  text-align: center;
  color: #cccccc;
}

/* Legacy names kept; the visuals now come from shared .SalesRow* */
.SalesMenuListItem {
  color: #ffffff;
}

.SalesMenuListItem .SaleUser,
.SalesMenuListItem .SaleStatus {
  color: rgb(178.5, 178.5, 178.5);
}

/* The sale number's chip lifts off whatever surface it sits on. Out on the
   light canvas that is the cream wash `.SaleNumberLink` ships with; here the
   chrome is dark and the text is $text-light, so cream-on-white would swallow
   the number on hover. Same move .NewSaleButton makes above — go brighter than
   the surface rather than lighter than the page — in the translucent white
   this panel already borders itself with. */
#SalesMenu a.SaleNumberLink:hover, #SalesMenu a.SaleNumberLink:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

.SalesStatsBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.2rem;
  padding: 0.45rem 0.75rem;
  margin-bottom: 0.5rem;
  background: #ece5d3;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #527070;
}
.SalesStatsBar__group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.SalesStatsBar__label {
  font-weight: 600;
  color: #1f3d3d;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.SalesStatsBar__value {
  font-weight: 700;
  color: #105151;
  font-size: 0.92rem;
}
.SalesStatsBar__sub {
  color: #527070;
  font-size: 0.75rem;
}
.SalesStatsBar__states {
  gap: 0.25rem;
}
.SalesStatsBar__state {
  color: #1f3d3d;
  font-size: 0.8rem;
}
.SalesStatsBar__dot {
  color: #527070;
  font-size: 0.7rem;
  padding: 0 0.1rem;
}
.SalesStatsBar .StockTypeStats {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.SalesStatsBar .StockTypeStat {
  font-size: 0.82rem;
  font-weight: 600;
}

/* ===== Sale Dock (snaps to menu) ===== */
#SaleDock {
  z-index: var(--z-dock);
  width: var(--dock-width-closed);
  transform: translateX(100%);
  will-change: transform;
  transition: transform var(--dock-transition-duration) var(--dock-transition-ease), width var(--dock-transition-duration) var(--dock-transition-ease);
  background: #fff;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}

#SaleDock.Open {
  transform: translateX(0);
}

html.sales-menu-open #SaleDock {
  width: var(--dock-width-open);
}

html.sales-menu-open #SaleDock.Open {
  transform: translateX(var(--dock-offset-when-menu-open));
}

/* ===== Header ===== */
#SaleDock .SaleDockHeader {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  gap: 0.5rem;
  background: #fff;
  color: #1f3d3d;
  border-bottom: 1px solid #e3dccb;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

/* Header grouping */
#SaleDock .SaleDockHeader .Left,
#SaleDock .SaleDockHeader .Right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Prevent long titles from crowding right side */
#SaleDock .SaleDockHeader .Left {
  flex: 1;
  min-width: 0;
}

/* NEW: Wrapper for dynamic header content */
#SaleDock .SaleDockTitleWrapper {
  flex: 1;
  min-width: 0;
}

/* Legacy title (used as fallback) */
#SaleDock .SaleDockHeader .Title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* NEW: Rich header content */
#SaleDock .SaleDockHeaderContent {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

#SaleDock .SaleDockTitle {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#SaleDock .SaleDockMeta {
  display: flex;
  flex-wrap: wrap;
  /* Tight row gap: on a narrow dock the items wrap onto their own lines, and a
     .75rem gap between them reads as a paragraph break at this font size. */
  gap: 0.15rem 0.75rem;
  font-size: 0.75rem;
  color: rgb(88.7086956522, 170.4913043478, 170.4913043478);
  line-height: 1.2;
}

#SaleDock .MetaItem {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Responsive: stack metadata on narrow docks */
@media (max-width: 400px) {
  #SaleDock .SaleDockMeta {
    flex-direction: column;
    gap: 0.25rem;
  }
}
/* Header buttons */
#SaleDock .SaleDockHeader .CloseButton {
  line-height: 1;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.25rem;
}
#SaleDock .SaleDockHeader .CloseButton:hover {
  background: var(--color-accent);
}

#SaleDock .SaleDockHeader .PrintLink {
  text-decoration: none;
  font-size: 1.25rem;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
#SaleDock .SaleDockHeader .PrintLink:hover {
  opacity: 1;
}

/* Status badge */
#SaleDock .StatusBadge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid rgb(209.95, 244.8, 115.6);
  background: rgb(220.55, 247.2, 148.4);
  color: #1f3d3d;
}
#SaleDock .StatusBadge.is-confirmed {
  border-color: rgb(77.738028169, 211.461971831, 125.9408450704);
  background: rgb(190.003943662, 239.036056338, 207.6783098592);
  color: #1f3d3d;
}
#SaleDock .StatusBadge.is-cancelled {
  border-color: rgb(184.4215517241, 81.3465517241, 75.2534482759);
  background: rgb(240.3, 202.15, 195.85);
  color: #5d091f;
}

/* ===== Body wrapper (wraps the turbo-frame) ===== */
#SaleDock .SaleDockBody {
  flex: 1;
  overflow: auto;
  padding: 0.75rem;
  background: #fffdf7;
  border-left: 1px solid #e3dccb;
}

/* ===== Form-in-dock ===== */
#SaleDock .SaleForm {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 14px;
  line-height: 1.3;
  color: #1f3d3d;
  background: #fff;
  padding-bottom: 0.5rem;
}

#SaleDock .SaleForm h3 {
  margin: 0.25rem 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(73.2543478261, 144.1456521739, 144.1456521739);
}

#SaleDock .FormGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 520px) {
  #SaleDock .FormGrid {
    grid-template-columns: 1fr;
  }
}
/* Field styling */
#SaleDock .Field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#SaleDock .Field > label {
  font-size: 12px;
  font-weight: 600;
  color: rgb(45.0847826087, 88.7152173913, 88.7152173913);
}

/* Inputs */
#SaleDock .Field input[type=text],
#SaleDock .Field input[type=number],
#SaleDock .Field input[type=date],
#SaleDock .Field select,
#SaleDock .Field textarea {
  border-radius: 8px;
}

#SaleDock select {
  min-height: 36px;
}

#SaleDock input[type=number] {
  text-align: right;
}

/* ===== Remote user search dropdown ===== */
#SaleDock .RemoteUserPicker {
  position: relative;
}

#SaleDock .RemoteUserPicker .DropdownResults {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: #fff;
  border: 1px solid #e3dccb;
  border-radius: 8px;
  max-height: 240px;
  overflow: auto;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

#SaleDock .RemoteUserPicker .ResultItem {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background-color 0.15s ease;
}
#SaleDock .RemoteUserPicker .ResultItem:last-child {
  border-bottom: none;
}
#SaleDock .RemoteUserPicker .ResultItem:hover {
  background: #fffdf7;
}

/* NEW: Rich result item structure */
#SaleDock .RemoteUserPicker .ResultItem__primary {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #1f3d3d;
  margin-bottom: 0.25rem;
}
#SaleDock .RemoteUserPicker .ResultItem__primary strong {
  font-weight: 600;
}

#SaleDock .RemoteUserPicker .ResultItem__secondary {
  font-size: 0.85rem;
  line-height: 1.3;
  color: rgb(88.7086956522, 170.4913043478, 170.4913043478);
}

/* ===== Sale Items list ===== */
#SaleDock .SaleItems {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Row layout. The row is a column of [summary head, fields]; the fields keep
   the flex-row layout they always had (docs/pull_lists_architecture.md §15.2). */
#SaleDock .SaleItemRow {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid transparent;
  border-image: repeating-linear-gradient(to right, var(--color-bg-dark) 0 20px, transparent 20px 40px) 100% 1;
}

#SaleDock .SaleItemRow__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
  width: 100%;
}

/* No flex-grow: a growing field eats the slack the price cluster needs to reach
   the right edge, which left it floating in the middle of the row. The fields
   take the width they ask for, in order, and .PriceGroup's margin-left: auto
   collects everything that is left. */
#SaleDock .SaleItemRow__fields > .Field {
  flex: 0 1 auto;
  min-width: 4rem;
  max-width: 12rem;
}

/* Remove moved out of the head and into the panel, so it is only on screen for
   a line someone deliberately opened. It rides at the end of the field line,
   directly after the price cluster.

   Deliberately no `margin-left: auto` of its own: two auto margins on one flex
   line *split* the free space between them, which is what left the price
   cluster stranded in the middle of the row instead of against the right edge.
   .PriceGroup owns the auto margin now and this follows it. */
#SaleDock .SaleItemRow__fields > .col--actions {
  flex: 0 0 auto;
  align-self: center;
}

#SaleDock .SaleItemRow__fields > .col--actions .IconButton {
  top: 0;
}

/* Screen reader only labels */
.sr-only, #SaleDock .SaleItemRow .Field > label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

/* Field-specific widths */
#SaleDock .SaleItemRow .SpeciesField {
  min-width: 8rem;
  max-width: 12rem;
}

#SaleDock .SaleItemRow .StockTypeField {
  max-width: 10rem;
}

#SaleDock .SaleItemRow .SizeField {
  max-width: 6rem;
}

/* Accession and lot: a link that becomes a select (see sale_item#openAccession
   and #openLot). Both states occupy the same slot in the field order, so
   revealing one does not reshuffle the row around it. */
#SaleDock .SaleItemRow .FieldPicker {
  flex: 0 1 auto;
  align-self: center;
  min-width: 0;
}

#SaleDock .SaleItemRow .FieldPicker .Field {
  margin: 0;
  max-width: 10rem;
}

.FieldRevealLink {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--color-primary);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

/* Price group */
#SaleDock .PriceGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: baseline;
  margin-left: auto; /* right-align cluster */
}

#SaleDock .PriceGroup input {
  width: auto;
  max-width: none;
  text-align: right;
}

#SaleDock .QuantityField input {
  width: 11ch;
}

#SaleDock .UnitPriceField input {
  width: 10ch;
}

#SaleDock .TotalPriceField input {
  width: 10ch;
}

/* Availability chip */
#SaleDock .SaleItemRow .Availability {
  align-self: center;
}

#SaleDock .SaleItemRow .Availability small {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 12px;
  border-radius: 999px;
  background: #c6e2ff;
  color: rgb(14.72, 74.52, 74.52);
  border: 1px solid rgb(143.64, 198.3431578947, 255);
}

/* Meta footer — spans full width, always below the field row */
#SaleDock .SaleItemRow .SaleItemMeta {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  font-size: 0.75rem;
}

/* Row buttons. .FieldRevealLink is deliberately a link, not a button-looking
   thing — it opens a field, it does not do anything. */
#SaleDock .SaleItemRow button[type=button]:not(.IconButton):not(.FieldRevealLink) {
  background-color: #fff;
  color: #1f3d3d;
  border: 1px solid #e3dccb;
  padding: 0.4rem 0.6rem;
  border-radius: var(--btn-radius);
  white-space: nowrap;
}
#SaleDock .SaleItemRow button[type=button]:not(.IconButton):not(.FieldRevealLink):hover {
  background-color: #fffdf7;
}

/* The stock type's colour (set inline as --st-row-tint), laid on as an image
   rather than a background-color so a row that colours itself for its own state
   keeps both signals. Unscoped: the dock and the full-page sale form render the
   same row. */
.SaleItemRow {
  padding-inline: 0.4rem;
  border-radius: 6px;
  background-image: linear-gradient(var(--st-row-tint, transparent), var(--st-row-tint, transparent));
}

/* Collapsed line summaries (§15.2) */
.SaleItemRow__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.SaleItemRow__summary {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.2rem 0.3rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.SaleItemRow__summaryText {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.9em;
}

/* The pull-floor signals take the whole second line of the summary.
   `min-width: 0` and the wrapping below are what keep them *inside* that line:
   a flex item defaults to min-width:auto, so a sale on three pull lists grew
   the line to its content and ran out past the dock's edge. */
.SaleItemRow__pullSummary {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}

/* The span renders on every persisted line whether or not there is anything to
   say, because it is the target the pull side streams into (§15.4) and a target
   that only appeared once the line was already on a list could never catch the
   first commitment. Claiming the whole second line while empty is what has to
   be suppressed — `:empty` cannot do it, since ERB leaves whitespace inside. */
.SaleItemRow__pullSummary.is-empty {
  display: none;
}

.SaleItemRow__pull {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Quantity and money, right-aligned against the chevron. */
.SaleItemRow__amounts {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.9em;
  white-space: nowrap;
}

.SaleItemRow__total,
.SaleItemRow__name {
  font-weight: 600;
}

.SaleItemRow__type,
.SaleItemRow__pull {
  opacity: 0.8;
  font-size: 0.9em;
}

/* Wraps rather than holding one line: the badge names a quantity and a unit,
   and in a dock narrow enough it would otherwise push itself out of the row. */
.OverCommittedBadge {
  cursor: help;
  min-width: 0;
  color: var(--color-warning);
  font-weight: 600;
}

.SaleItemRow__chevron svg {
  transition: transform 120ms ease;
}

.SaleItemRow:not(.is-collapsed) .SaleItemRow__chevron svg {
  transform: rotate(180deg);
}

/* ===== Price lock =====
   Unscoped, like .SaleItemRow itself: the dock and the full-page sale form
   render the same row. The padlock sits at the end of the money cluster, where
   the thing it holds still ends. */
.PriceLockField {
  display: flex;
  align-items: center;
  margin: 0;
}

/* Doubled up on purpose: .IconButton is defined in application.scss, which the
   cascade reaches after this file, so a single class here would lose to it. */
.IconButton.PriceLockButton {
  top: 0;
  font-size: 0.85rem;
  opacity: 0.55;
}

.IconButton.PriceLockButton:hover,
.IconButton.PriceLockButton[aria-pressed=true] {
  opacity: 1;
}

/* A locked price field is readonly, not disabled (see price_lock_controller),
   and used to be greyed out from here because nothing else in the app styled an
   uneditable field. forms.scss now gives every disabled and readonly field the
   same look, and price_lock_controller sets .readOnly alongside .is-locked on
   the same line — so this block only said the baseline again, in slightly
   different numbers. Left as a pointer: if a locked field ever needs to differ
   from a disabled one, it goes here.

   The focus ring moved with it: this block killed it outright, the baseline
   instead swaps the live teal for a faint one, so tabbing into a locked price to
   copy it still shows you where you are. */
.PriceLockNote {
  color: #527070;
  white-space: nowrap;
}

/* Destroy state */
.SaleItemRow.marked-for-destroy {
  opacity: 0.55;
  filter: grayscale(0.2);
  pointer-events: none;
}

.SaleItemRow.marked-for-destroy .IconButton {
  pointer-events: auto;
}

/* Add line button */
#SaleDock button[data-action*="sale-form#addItem"] {
  background-color: #fff;
  color: #1f3d3d;
  border: 1px solid #e3dccb;
  align-self: start;
  padding: 0.5rem 0.75rem;
  border-radius: var(--btn-radius);
  border-style: dashed;
}
#SaleDock button[data-action*="sale-form#addItem"]:hover {
  background-color: #fffdf7;
}

/* ===== Errors ===== */
#SaleDock .field_with_errors input,
#SaleDock .field_with_errors select,
#SaleDock .field_with_errors textarea {
  border-color: rgb(177, 75.5, 69.5);
  box-shadow: 0 0 0 3px rgba(177, 75.5, 69.5, 0.15);
}

#SaleDock .ErrorMessage {
  margin-top: 0.25rem;
  font-size: 12px;
  color: rgb(177, 75.5, 69.5);
}

/* ===== Footer summary + actions ===== */
/* Flex so the totals box lands on the right, under the money column it sums.
   .SaleTotals has always asked for that with `margin-left: auto`, but an auto
   margin does nothing to an inline-level box in a block container — the rule
   was inert and the totals sat left, away from the prices they add up. */
.SalesFormFooter {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.04), transparent);
  z-index: 2;
}

/* The per-stock-type quantity badges, same shape as the ones on the sales index
   and the pull list rows (sale_form_controller#recalc builds them). */
.SaleTotals .StockTypeStats {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.SaleTotals .StockTypeStat {
  font-size: 0.9em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.SaleTotals .Separator {
  opacity: 0.5;
}

.SaleTotals {
  margin-left: auto;
  width: fit-content;
  display: inline-flex;
  gap: 1rem;
  align-items: baseline;
  background: #fff; /* was var(--bg-color, #fff) — that var is never defined */
  border: 1px solid var(--color-border, #ddd);
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.Actions {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.DockActions {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}

.DockActions .RowBelow {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.DockActions .InlineButtonForm {
  display: inline-flex;
  margin: 0;
}

.SubmitRow {
  display: flex;
  justify-content: flex-end;
}

/* ===== Customer info icon (dock header) ===== */
.CustomerInfoIcon {
  cursor: default;
  font-size: 0.9em;
  opacity: 0.75;
}
.CustomerInfoIcon:hover {
  opacity: 1;
}

/* ===== Customer notes (dock form) ===== */
.CustomerNotes {
  font-size: 12px;
  color: #1f3d3d;
  background: rgb(248.64, 253.56, 235.32);
  border-left: 3px solid rgb(209.5, 236.1, 124.6);
  padding: 0.4rem 0.6rem;
  border-radius: 0 6px 6px 0;
  line-height: 1.5;
}
.CustomerNotes__provenance {
  font-size: 11px;
  color: #527070;
  margin-bottom: 0.25rem;
}
.CustomerNotes__label {
  font-weight: 600;
  margin-right: 0.3rem;
}
.CustomerNotes__overflow {
  display: inline;
}
.CustomerNotes__overflow summary {
  display: inline;
  cursor: pointer;
  color: #105151;
  list-style: none;
}
.CustomerNotes__overflow summary::-webkit-details-marker {
  display: none;
}

/* ===== Submitted customer info (row expand side) ===== */
.SubmittedCustomerInfo {
  margin-top: 0.5rem;
  font-size: 12px;
  color: #1f3d3d;
  line-height: 1.6;
}
.SubmittedCustomerInfo--has-user {
  border-top: 1px dashed #e3dccb;
  padding-top: 0.4rem;
}
.SubmittedCustomerInfo__label {
  font-size: 11px;
  font-weight: 600;
  color: #527070;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

/* ===== Suggested user banner ===== */
.Button--link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #105151;
  cursor: pointer;
  text-decoration: underline;
  font-size: inherit;
  line-height: inherit;
}
.Button--link:hover {
  color: rgb(13.6, 68.85, 68.85);
  text-decoration: none;
  background-color: unset;
}

.SuggestedUser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: 0.6rem 0.75rem;
  background: rgb(243.34, 252.36, 218.92);
  border: 1px solid rgb(213.25, 232.65, 141.4);
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 0.5rem;
}
.SuggestedUser form {
  display: contents;
}
.SuggestedUser__prompt {
  flex: 1 1 auto;
  min-width: 0;
}
.SuggestedUser__details {
  width: 100%;
}
.SuggestedUser__details summary {
  cursor: pointer;
  color: #527070;
  font-size: 12px;
  user-select: none;
}
.SuggestedUser__details[open] summary {
  margin-bottom: 0.4rem;
}
.SuggestedUser__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.6rem;
  font-size: 12px;
  margin: 0 0 0.4rem;
}
.SuggestedUser__dl dt {
  font-weight: 600;
  color: #527070;
}
.SuggestedUser__dl dd {
  margin: 0;
}

.needs-pricing {
  background-color: rgb(248.64, 240.96, 224.88);
}
.needs-pricing:hover {
  background-color: rgb(243.34, 229.26, 199.78);
}

.price-warning {
  color: rgb(141.9883495146, 97.0019417476, 2.8116504854);
  font-weight: bold;
  font-style: italic;
}

.price-warning-badge {
  display: inline-block;
  background-color: rgb(151.5, 103.5, 3);
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.85em;
  margin-left: 8px;
  font-weight: bold;
}

.price-missing {
  border: 2px solid #ca8a04 !important;
  background-color: rgb(248.64, 240.96, 224.88) !important;
}

.Button--warning {
  background-color: #ca8a04 !important;
  border-color: #ca8a04 !important;
}
.Button--warning:hover {
  background-color: rgb(171.9941747573, 117.5009708738, 3.4058252427) !important;
  border-color: rgb(171.9941747573, 117.5009708738, 3.4058252427) !important;
}

.UnpublishedPriceNotice {
  flex-basis: 100%;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  font-style: italic;
  color: rgb(111.9825242718, 76.5029126214, 2.2174757282);
}
.UnpublishedPriceNotice[hidden] {
  display: none;
}

.received {
  background-color: var(--color-bg-dark);
  color: var(--color-text-faint);
}

/* Pull-list propagation confirmation panel (docs/pull_lists_architecture.md §5) */
.PropagationConfirm:not(:empty) {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--color-warning);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.03);
}

.PropagationConfirm-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.PropagationConfirm-list {
  margin: 0 0 0.75rem;
  padding-left: 1.1rem;
}

.PropagationConfirm-warning {
  font-weight: 600;
}

.PropagationConfirm-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.PropagationConfirm-actions {
  display: flex;
  gap: 0.5rem;
}

/* The sale form's pull-list summary (docs/pull_lists_architecture.md §15.1). */
.SalePullLists {
  margin: 0 0 0.75rem;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--color-accent, currentColor);
  font-size: 0.9em;
}

.SalePullLists__heading {
  margin: 0 0 0.25rem;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.SalePullLists__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0;
}

.SalePullLists__row.is-cancelled {
  opacity: 0.6;
}

/* The same amber edge a pull list row wears on the index (pull_lists.scss),
   at summary size: the sale form must not read as though the floor is finished
   while the list still has something to resolve. */
.SalePullLists__row.is-incomplete {
  box-shadow: inset 3px 0 0 var(--color-warning-light);
  padding-left: 0.4rem;
}

.SalePullLists__link {
  font-weight: 600;
  white-space: nowrap;
}

.SalePullLists__cancelled summary {
  cursor: pointer;
  font-size: 0.85em;
}

/* The same block inside an expanded sales row. The row is a grid cell rather
   than the dock's column, so it only has to give the summary its own line and
   stop the accent rule from butting against the row's top border. */
.SaleRowPullLists {
  min-width: 0;
}
.SaleRowPullLists .SalePullLists {
  margin-bottom: 0;
}

.PricingTable {
  width: auto;
  border-collapse: collapse;
  font-size: 1rem;
  table-layout: auto;
  margin: 1rem 0;
}

.PricingTable th {
  text-align: center;
}

.PricingTable td {
  text-align: right;
}

.PricingTable th,
.PricingTable td {
  width: 6rem;
  border: 1px solid #e3dccb;
  padding: 0.25rem 0.4rem;
}

.PricingTable.TableWithSuffixCells th,
.PricingTable.TableWithSuffixCells td {
  width: 8rem;
}

.PricingTable td.PricingSpeciesCell,
.PricingTable th.PricingSpeciesCell {
  width: auto;
  text-align: left;
  white-space: nowrap;
  padding-right: 0.5rem;
}

.PricingInput {
  width: 100%;
  max-width: 6rem;
  font-size: 1rem;
  padding: 0.1rem 0.2rem;
  text-align: right;
  box-sizing: border-box;
}

.PricingTable.TableWithSuffixCells .PricingInput {
  max-width: 8rem;
}

.PricingTable tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.03);
}

.PricingRowSpecies {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.PriceNoLotFlag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  color: #fff;
  background-color: rgb(151.5, 103.5, 3);
  border-radius: 3px;
  text-decoration: none;
}
.PriceNoLotFlag:hover {
  background-color: rgb(111.4922330097, 76.167961165, 2.2077669903);
}

.HiddenPriceCell {
  background-color: rgba(202, 138, 4, 0.15);
}

.PricingRowHidden {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  color: #527070;
  vertical-align: middle;
}

.HiddenPriceRow .PricingRowSpecies {
  opacity: 0.6;
}

.PricingTable th.PricingVisibilityHeader,
.PricingTable td.PricingVisibilityCell {
  width: 1%;
  text-align: center;
  white-space: nowrap;
  padding: 0.25rem 0.35rem;
}

.PricingTable th.PricingVisibilityHeader {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.PricingVisibilityCell form {
  margin: 0;
  line-height: 0;
}

.PricingVisibilityToggle {
  cursor: pointer;
  margin: 0;
  vertical-align: middle;
}

.PricingTableScroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

@media (max-width: 767px) {
  .PricingTable {
    font-size: 0.9rem;
  }
  .PricingTable th:not(.PricingSpeciesCell):not(.PricingVisibilityHeader),
  .PricingTable td:not(.PricingSpeciesCell):not(.PricingVisibilityCell) {
    width: auto;
    min-width: 4.5rem;
    padding: 0.25rem 0.3rem;
  }
  .PricingTable.TableWithSuffixCells th:not(.PricingSpeciesCell):not(.PricingVisibilityHeader),
  .PricingTable.TableWithSuffixCells td:not(.PricingSpeciesCell):not(.PricingVisibilityCell) {
    min-width: 8rem;
  }
  .PricingTable th.PricingSpeciesCell,
  .PricingTable td.PricingSpeciesCell {
    min-width: 7rem;
    max-width: 10rem;
    white-space: normal;
  }
  .PricingRowSpecies {
    flex-wrap: wrap;
    gap: 0.15rem 0.3rem;
  }
  .PricingInput,
  .PricingTable.TableWithSuffixCells .PricingInput {
    max-width: none;
  }
  .PricingTable .PricingInput {
    padding: 0.15rem 0.3rem;
  }
  .PricingTable th.PricingVisibilityHeader,
  .PricingTable td.PricingVisibilityCell {
    min-width: 0;
    padding: 0.25rem 0.25rem;
  }
}
.PublishAllButton {
  background-color: #1c723b;
  color: #ffffff;
  border: none;
  border-radius: 3px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}
.PublishAllButton:hover {
  background-color: rgb(21.9661971831, 89.4338028169, 46.285915493);
}

.UnpublishAllButton {
  background-color: transparent;
  color: #527070;
  border: 1px solid #e3dccb;
  border-radius: 3px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}
.UnpublishAllButton:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.PricingSizeTabs {
  display: flex;
  gap: 0.25rem;
  margin: 0.5rem 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.PricingSizeTab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid #e3dccb;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background-color: rgba(0, 0, 0, 0.04);
  color: #527070;
  text-decoration: none;
  white-space: nowrap;
}
.PricingSizeTab:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
.PricingSizeTab.is-current {
  background-color: transparent;
  color: inherit;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 #1c723b;
}

.PricingSizeTab__hidden {
  font-size: 0.65rem;
  font-style: italic;
  color: #527070;
}

.ImportForm {
  max-width: 520px;
  margin: 1rem 0 2rem;
}

.ImportFormRow {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ImportFormLabel {
  width: 140px;
  flex-shrink: 0;
  font-weight: bold;
  font-size: 0.9rem;
}

.ImportFormRadioLabel {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.ImportFormHint {
  font-size: 0.8rem;
  color: #527070;
}

.ImportFormAmountInput {
  width: 6rem;
  font-size: 1rem;
  padding: 0.1rem 0.3rem;
}

.ImportPreviewAdjustmentLabel {
  font-size: 0.8rem;
  font-weight: normal;
  color: #527070;
}

.BulkSaveActions {
  display: flex;
  gap: 0.75rem;
  margin: 1rem 0 2rem;
}

/* ---------- Wrapper ---------- */
#SalePrint {
  margin-left: auto; /* centered by default */
  margin-right: auto;
  color: var(--color-text-dark, #111);
  background: var(--color-bg, #fff);
}

@media print {
  html, body.PrintPage {
    background: #fff !important;
  }
  .Surface, .Page {
    background: #fff !important;
  }
}
@media screen {
  #SalePrint {
    max-width: 8.5in;
    margin-inline: auto;
    padding: 0 0.5in; /* visual gutter on screen */
  }
}
/* Hide setup controls on print */
@media print {
  @page {
    size: Letter portrait;
    margin: 0.5in;
  }
  .no-print {
    display: none !important;
  }
  #SalePrint {
    max-width: none;
    padding: 0;
  }
}
.PrintLayoutControls select {
  max-width: 10rem;
}
.PrintLayoutControls .PrintLink, .PrintLayoutControls .CreatePullListLink {
  padding: 0.35rem 0.65rem;
}

/* ---------- Header (3-column grid) ---------- */
.PrintHeader {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr; /* Logo : Account : Customer */
  gap: 0.75rem 1rem;
  align-items: start;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border, #ddd);
  background: var(--color-bg, transparent);
}

.PrintHeader .Col {
  min-width: 0;
}
.PrintHeader .Col.CustomerCol {
  text-align: right;
}

@media print {
  .PrintHeader {
    max-height: 2.75in;
    overflow: hidden;
  }
}
/* ---------- Logo ---------- */
.LogoImg {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 1.75in;
  object-fit: contain;
}

/* ---------- Account block ---------- */
.AccountName {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  color: var(--color-text-dark, #111);
}

.AccountContact {
  font-size: 0.95rem;
  line-height: 1.25rem;
  color: var(--color-text-dark, #111);
}

.AccountContact br {
  line-height: 1.25rem;
}

/* ---------- Customer block ---------- */
.LayoutTitle {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  color: var(--color-primary);
}

.SaleMeta {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: end;
}
.SaleMeta .MetaCol {
  flex-grow: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.SaleMeta .Label {
  font-weight: 600;
  line-height: 1.2;
  background: var(--color-bg-dark);
}
.SaleMeta .Value {
  font-size: 0.95rem;
}

.CustomerName {
  margin: 0 0 0.25rem 0;
  font-size: 1.1rem;
  color: var(--color-text-dark, #111);
}

.CustomerContact {
  font-size: 0.95rem;
  line-height: 1.25rem;
}

/* ---------- Table ---------- */
.SaleItems {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  page-break-inside: auto;
  font-size: 0.95rem;
  background: var(--color-bg, #fff);
  color: var(--color-text-dark, #111);
}

.SaleItems th,
.SaleItems td {
  border: 1px solid var(--color-border, #ccc);
  padding: 0.35rem 0.4rem;
  vertical-align: top;
}

.SaleItems thead th {
  background: var(--color-bg-dark);
  color: var(--color-text-dark, #111);
}

.IncludeCol {
  width: 1.25rem;
  text-align: center;
}

/* ---------- Totals & disclaimer ---------- */
#receiptExtras {
  margin-top: 0.75rem;
  font-size: 1rem;
  color: var(--color-text-dark, #111);
}

#receiptExtras .Disclaimer {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* ---------- Pack-only ---------- */
.pack-only.Hidden {
  display: none;
}

/* ---------- Print niceties ---------- */
@media print {
  input[type=checkbox] {
    appearance: none;
    width: 0;
    height: 0;
    border: 0;
    margin: 0;
    padding: 0;
  }
  .SaleItems thead {
    display: table-header-group;
  }
  .SaleItems tr {
    page-break-inside: avoid;
  }
  .SaleItems th, .SaleItems td {
    padding: 0.25rem 0.3rem;
  }
}
.SignatureContainer {
  line-height: 4rem;
  font-size: 1.5rem;
}

/* ---------- Sale Notes ---------- */
.SaleReceiptThankYouMessage {
  font-weight: bold;
}

.PullListsIndex {
  /* The filter bar ended flush against the first row, so the search box read as
     part of the list rather than as the control above it. */
  margin-top: 1.25rem;
}

/* The shared .FiltersRow is a `repeat(auto-fit, minmax(8rem, 1fr))` grid built
   for the sales menu's stack of equal-width selects. This row holds two things
   of different natures — a search box and a button — and the grid both stretched
   the button across its cell and pushed it a whole column away from the box it
   belongs beside. Flex sizes each to its content instead. */
#PullListsIndexFilters .FiltersRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.PullListsIndex__create {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* The sale picker behind Create Pull List — a short form, not a page of data. */
.PullListSelectSale {
  max-width: 44rem;
}
.PullListSelectSale .Field {
  margin-bottom: 1rem;
}
.PullListSelectSale .SaleChoiceSelect {
  width: 100%;
}
.PullListSelectSale .Actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.PullListDetails {
  /* Sale rows moved their customer block above the items and went single
     column; pull lists still keep theirs in a side column. */
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 0.6fr);
  gap: 0.75rem 1rem;
}
@media (max-width: 720px) {
  .PullListDetails {
    grid-template-columns: 1fr;
  }
}

/* Pull List variants */
.PullListsList--print {
  background: transparent;
}

/* Pull list specific elements */
.WantedAt {
  font-weight: 500;
  color: rgb(26.35, 51.85, 51.85);
}

/* ── The show page ────────────────────────────────────────────────────────────

   The header's buttons are `button_to` forms, which are block elements: dropped
   into a bare container they stack into a column, which is what this page did
   before. `.PageHeaderActions` (already flex) plus `margin: 0` on the forms puts
   them back on one line, here and in every action cluster below. */
.PullListShow__header {
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.PullListShow__header h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.PullListShow__header .PageHeaderActions {
  margin-left: auto;
}

.PageHeaderActions form,
.ItemActions form,
.NeedsAttention form,
.PullListItems__header form {
  margin: 0;
}

.PullListShow {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

/* Label over value, wrapping into as many columns as fit — the old
   <p><strong>Sale:</strong> …</p> stack burned a full line on each fact. */
.PullListShow__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin: 0;
}

.PullListShow__metaItem {
  min-width: 0;
}
.PullListShow__metaItem dt {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin-bottom: 0.1rem;
}
.PullListShow__metaItem dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.PullListShow__notes {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
}
.PullListShow__notes p {
  margin: 0 0 0.25rem;
}

.PullListShow__notesHeading {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* Collapsed to its "Add note" toggle until someone means to write — the note is
   read far more often than it is edited. Same treatment as the item editor it
   replaces. */
.PullListNotesEditor summary {
  cursor: pointer;
  font-size: 0.85em;
}
.PullListNotesEditor .FormControl {
  margin: 0.3rem 0;
}

.PullListShow .CancelledBanner,
.PullListShow .SaleUpdatedBanner {
  padding: 0.35rem 0.5rem;
  margin: -0.25rem 0 0.6rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.035);
}

/* ── Items on the show page ───────────────────────────────────────────────── */
.PullListItems__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.PullListItems__header h2 {
  margin: 0;
}
.PullListItems__header .Button {
  margin-left: auto;
}

.PullListItems__count {
  font-size: 0.8rem;
  font-weight: 600;
  vertical-align: middle;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--color-bg-dark);
  color: var(--color-text-dark);
}

/* The show page's card list, and — since an expanded index row draws the same
   cards — the row's too. */
.PullListItems__list,
.PullListItemsList {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.PullListItems__empty {
  opacity: 0.7;
}

/* One line and its own history. The resolved rows above the live one belong to
   it, so the group closes the list's gap between them — near-touching reads as
   "this happened to that row", a half-rem apart reads as two rows. */
.PullListItemGroup {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* Each item is a card: the identity line and its buttons share one row, and
   everything conditional (flag, adjustment, note, provenance) stacks beneath at
   full width instead of being squeezed alongside. */
.PullListItemRow {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: #fff;
  /* The stock type's colour (set inline as --st-row-tint), laid on as an image
     rather than a background-color so a row that colours itself for its own
     state — pulled, below — keeps both signals. */
  background-image: linear-gradient(var(--st-row-tint, transparent), var(--st-row-tint, transparent));
}

/* background-color, not the shorthand: the shorthand would blank the tint. */
.PullListItemRow.is-pulled {
  background-color: rgb(237.2738028169, 250.6461971831, 242.094084507);
}

.PullListItemRow .ItemMain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
}

.PullListItemRow .ItemInfo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  min-width: 0;
}
.PullListItemRow .ItemInfo .ItemName {
  font-weight: 600;
}
.PullListItemRow .ItemInfo .Accession,
.PullListItemRow .ItemInfo .StockType,
.PullListItemRow .ItemInfo .Size {
  font-size: 0.85em;
  opacity: 0.7;
}

/* Open rows carry it in the action cluster; a cancelled row's tombstone still
   carries it inside .ItemInfo, so the rule sits at row level. */
.PullListItemRow .Quantity {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.PullListItemRow .ItemActions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin-left: auto;
}

/* The row's edit chevron. Deliberately not `.RowExpand`: that class pins itself
   to the top-right corner of its row below 640px, which is where the pull
   list's own chevron goes — an item's belongs in the flow of its action
   cluster, on every width. */
.ItemExpand {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 0.25rem;
  line-height: 0;
  cursor: pointer;
  color: inherit;
  border-radius: 999px;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.ItemExpand:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.ItemExpand.is-open {
  transform: rotate(180deg);
}

/* The in-row editor (§15.2's collapse, applied to an item). Hidden until the
   chevron opens it — `[hidden]` alone loses to the `display: flex` here, and
   expand_row_controller sets `style.display` for the same reason. */
.PullListItemRow .ItemEditor {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--color-border);
}
.PullListItemRow .ItemEditor[hidden] {
  display: none;
}

/* The way back off a full-page item form. */
.BackLink {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

/* The full-page variant (new / edit). Left to itself the fields run the whole
   width of the content column, which reads as a wall of controls for what is
   really one decision — so it is capped, and the line and its quantity share a
   row wherever there is room for them. */
.PullListItemForm:not(.PullListItemForm--inline) {
  max-width: 44rem;
  /* A quantity is a short number; a full-width box for it only invites doubt. */
}
.PullListItemForm:not(.PullListItemForm--inline) .Field {
  margin-bottom: 0.75rem;
}
.PullListItemForm:not(.PullListItemForm--inline) .FormControl {
  width: 100%;
}
.PullListItemForm:not(.PullListItemForm--inline) .FormRow--line {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  align-items: flex-start;
}
.PullListItemForm:not(.PullListItemForm--inline) .Field--line {
  flex: 1 1 22rem;
  min-width: 14rem;
}
.PullListItemForm:not(.PullListItemForm--inline) .Field--quantity {
  flex: 0 0 9rem;
}
.PullListItemForm:not(.PullListItemForm--inline) .Field--quantity .FormControl {
  text-align: right;
}

.PullListItemForm--inline {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin: 0;
  /* Quantity is a number and a short one; the note wants whatever is left.
     The note is first in the DOM order that reads best in a form, but the
     quantity belongs on the right — under the number the row displays in its
     own right-hand cluster, so opening a row to change it does not make the
     figure jump across the card. `order` moves it without moving the tab
     order's sense of "what, then how many". */
  /* Right-aligned for the same reason the full-page variant does it: a quantity
     is read against the ones above and below it. */
  /* The global .Actions is a grid, which stacks these two into a column. */
}
.PullListItemForm--inline .Field {
  margin: 0;
}
.PullListItemForm--inline .Field label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}
.PullListItemForm--inline .Field--quantity,
.PullListItemForm--inline .Field:has(input[type=number]) {
  order: 2;
  flex: 0 0 8rem;
  margin-left: auto;
}
.PullListItemForm--inline .Field--notes,
.PullListItemForm--inline .Field:has(textarea) {
  order: 1;
  flex: 1 1 14rem;
  min-width: 10rem;
}
.PullListItemForm--inline .Actions {
  order: 3;
}
.PullListItemForm--inline .ErrorMessages {
  order: 0;
}
.PullListItemForm--inline .Field--quantity .FormControl {
  text-align: right;
}
.PullListItemForm--inline textarea.FormControl {
  min-height: 2.2rem;
}
.PullListItemForm--inline .Actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0;
}
.PullListItemForm--inline .ErrorMessages {
  flex: 1 0 100%;
}

/* Cancel sits at the end of the editor line, aligned with the buttons beside it
   rather than with the inputs' baseline. */
.ItemEditorActions {
  display: flex;
  align-items: center;
  margin-left: auto;
  /* .IconButton nudges itself up 5px for the contexts it was born in; on this
     line it just floats above its neighbours. */
}
.ItemEditorActions form {
  margin: 0;
}
.ItemEditorActions .IconButton {
  top: 0;
}

/* "Added 8/13 · Updated 8/14 by BK" — quiet by design; it only has to be there
   when someone goes looking for whether a row is new. */
.ItemProvenance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: rgb(73.2543478261, 144.1456521739, 144.1456521739);
}
.ItemProvenance .Separator {
  opacity: 0.5;
}
.ItemProvenance .Stamp {
  cursor: help;
  white-space: nowrap;
}

.PullListShow__metaItem .Stamp {
  cursor: help;
}

/* One wrapping line for everything under the identity line. A card with nothing
   to say costs a single line of collapsed summaries; the blocks that need the
   width take it back with a 100% basis. */
.ItemFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.9rem;
}
.ItemFooter > .NeedsAttention,
.ItemFooter > .ItemAdjustment--pending {
  flex: 1 0 100%;
}

.ItemFooter .ItemNotes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  min-width: 0;
}

/* A written note is a block of prose and wants the card's width, not whatever
   is left beside the provenance chip. Collapsed to just its "Add note" toggle
   it stays inline — which is the whole point of the footer row. */
.ItemFooter .ItemNotes:has(.ItemNotesBody) {
  flex: 1 0 100%;
}

.ItemNotesBody {
  flex: 1 0 100%;
  font-size: 0.9em;
  padding: 0.1rem 0.5rem;
  border-left: 3px solid var(--color-border);
}
.ItemNotesBody p {
  margin: 0;
}

/* An open editor or request form needs the full width; collapsed, it is just
   its summary and sits inline with its neighbours. */
.ItemFooter details[open] {
  flex: 1 0 100%;
}

.ItemNotesEditor summary,
.ItemAdjustment--request summary {
  color: rgb(66.2119565217, 130.2880434783, 130.2880434783);
}

/* ── The list form (new / edit) ───────────────────────────────────────────────

   Two shapes on one page, because §14.9 splits the items in two: an unpulled
   row is a line of fields, a pulled one is the show page's own card carrying
   its adjustment control. */
.PullListForm {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.PullListForm .Field {
  margin: 0;
}

/* Sale and Wanted side by side, wrapping when there is no room for both. */
.PullListForm__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 1.5rem;
}

/* The sale is a fact, not a picker — it needs a label that looks like the real
   ones beside it without being one. */
.FieldLabel {
  display: block;
  font-weight: bold;
}

.FieldStatic {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.25rem 0 0;
  /* Line up with the inputs beside it, which carry a border and .5rem of pad. */
  padding: 0.5rem 0;
}

.FieldStatic__aside {
  font-size: 0.9em;
  opacity: 0.7;
}

.PullListForm__itemsHeading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}
.PullListForm__itemsHeading .Button {
  margin-left: auto;
}

.PullListItemFieldsList {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* One item, one line. The identity takes the slack; the inputs keep the widths
   they actually need, and the whole thing wraps rather than stacking. */
.PullListItemFields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: #fff;
  /* The stock type's colour, the same wash the show page's rows wear. */
  background-image: linear-gradient(var(--st-row-tint, transparent), var(--st-row-tint, transparent));
}
.PullListItemFields label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

.PullListItemFields__identity {
  flex: 1 1 18rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  min-width: 0;
}
.PullListItemFields__identity .ItemName {
  font-weight: 600;
}
.PullListItemFields__identity .StockType,
.PullListItemFields__identity .Size,
.PullListItemFields__identity .Accession {
  font-size: 0.85em;
  opacity: 0.7;
}

/* forms.scss gives every text input `width: 100%`, which is why this one used
   to run the width of the page. A quantity is four characters wide.

   The basis is fixed rather than shrink-to-fit so the column lands in the same
   place on every row: a unit label that happens to be "feet" instead of "qts"
   would otherwise walk the quantity and the note across the list. */
.PullListItemFields__quantity {
  flex: 0 0 9rem;
}
.PullListItemFields__quantity .QuantityField {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.PullListItemFields__quantity input[type=number] {
  width: 5.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.PullListItemFields__quantity .QuantityField__unit {
  font-size: 0.85em;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.PullListItemFields__notes {
  flex: 1 1 12rem;
  min-width: 8rem;
}

.PullListItemFields__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* The global .Actions is a one-column grid: it stacked these two full width and
   butted them against each other. */
.PullListForm__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.PullListForm__pulled {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.PullListForm__pulledHint {
  margin: -0.25rem 0 0.6rem;
  font-size: 0.85rem;
  opacity: 0.75;
}

/* Tombstones, below the working set. A quiet container so the section reads as
   a section rather than as a loose table on the page background. Superseded
   rows have no section of their own any more — each one sits against the row
   that replaced it. */
.CancelledItems {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg-light);
}

@media (max-width: 640px) {
  .PullListShow__header .PageHeaderActions {
    margin-left: 0;
    width: 100%;
  }
  .PullListItemRow .ItemActions {
    margin-left: 0;
    width: 100%;
  }
}
.PulledStatus {
  color: var(--color-success);
  font-size: 0.9em;
}

.NotPulledStatus {
  color: var(--color-warning);
  font-size: 0.9em;
}

.UnpullButton {
  background-color: var(--color-warning);
  opacity: 0.8;
}

.UnpullButton:hover {
  background-color: var(--color-warning);
  opacity: 1;
}

/* Cancellation tombstones and the needs-attention flag (§2, §4). */
.PullListRow.is-cancelled {
  opacity: 0.6;
  /* The dock glyph is a control, not a fact about the list — striking it
     through would only make it hard to read. The row's opacity is enough. */
}
.PullListRow.is-cancelled .WantedAt,
.PullListRow.is-cancelled .Status,
.PullListRow.is-cancelled .PullListNumber {
  text-decoration: line-through;
}

.PullListNumber {
  font-weight: 700;
  /* The number is the row's link to its own page. It inherits the row's color
     rather than the link blue — a row already dense with badges does not need
     a second accent — and announces itself on hover instead. */
}
.PullListNumber a {
  color: inherit;
  text-decoration: none;
}
.PullListNumber a:hover, .PullListNumber a:focus-visible {
  text-decoration: underline;
}

/* A row's door into the dock (`pull_list_sale_dock_button`): the glyph alone,
   sized like the row's other icon badges. It only renders for someone who has
   a dock, so there is no hidden twin to swap in here. */
.SaleDockButton {
  line-height: 1;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.12s ease-in-out, transform 0.12s ease-in-out;
}
.SaleDockButton:hover, .SaleDockButton:focus-visible {
  opacity: 1;
  transform: scale(1.12);
  text-decoration: none;
}

/* ── "Not finished" as one look, everywhere ───────────────────────────────────

   A list with anything left to resolve — rows still to pull, a raised flag, an
   adjustment waiting on a person (PullList#incomplete?) — wears the same amber
   edge on the index, on the dashboard, inside an expanded sale row and on its
   own page. The finished ones settle back a little, so a full page of rows
   sorts itself into "still mine" and "done" at a glance rather than on a read
   of each status word.

   Ordered before `.needs-attention` deliberately: the two share specificity, and
   a flagged row should keep the heavier bar. */
.PullListRow.is-incomplete {
  box-shadow: inset 3px 0 0 var(--color-warning-light);
}

/* Not faded to tombstone levels (`.is-cancelled` is 0.6) — a finished list is
   still a record someone reads, it just stops competing for attention. */
.PullListRow.is-complete {
  opacity: 0.88;
}

.PullListRow.needs-attention {
  box-shadow: inset 3px 0 0 var(--color-warning);
}

/* The status chip itself (`pull_list_status_badge`): glyph plus word, in the
   colour its state earns. Amber for every shape of unfinished, quiet green for
   done, struck-through faint for a tombstone. */
.PullListStatus {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  font-size: 0.85em;
  line-height: 1.35;
  white-space: nowrap;
}

.PullListStatus__glyph {
  font-size: 0.95em;
}

/* In a page header the chip inherits the <h1>'s scale, which turns a status
   word into a second headline beside the list number. */
.PullListShow__header h1 .PullListStatus {
  font-size: 1rem;
  font-weight: 600;
}

.PullListStatus.is-incomplete {
  color: var(--color-warning-deep);
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 45%, transparent);
  font-weight: 600;
}

/* The one that used to read "✅ Pulled" while a person was still owed an
   answer — it gets the loudest of the three. */
.PullListStatus.PullListStatus--attention {
  background: color-mix(in srgb, var(--color-warning) 22%, transparent);
  border-color: var(--color-warning);
}

.PullListStatus--pulled {
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
}

.PullListStatus--cancelled {
  color: var(--color-text-faint);
}

/* The glyph on its own, where a sale line or the sale form's summary has no
   room for the word. It carries the word in its tooltip; what it carries here
   is weight — the finished ones step back so an amber one stands out. */
.StatusIcon {
  cursor: help;
}

.StatusIcon--pulled,
.StatusIcon--cancelled {
  opacity: 0.65;
}

/* "2/3 items". The colour comes from PullList#incomplete?, not from the tally:
   a 3/3 list holding a pending adjustment is amber, because the thing left to
   do is not something the tally can count. */
.PullListProgress {
  font-size: 0.9em;
  font-weight: 600;
  white-space: nowrap;
}

.ProgressPending,
.ProgressPartial {
  color: var(--color-warning-deep);
}

.ProgressComplete {
  color: var(--color-success);
}

.ProgressCancelled {
  color: var(--color-text-faint);
}

/* The show page's card takes the same edge as its row, and says in words what
   is left — the page where someone decides a list is done is the page that can
   afford a sentence. */
.PullListShow.is-incomplete {
  border-left: 3px solid var(--color-warning);
}

.IncompleteBanner {
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.5rem;
  border-left: 3px solid var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  color: var(--color-warning-deep);
  font-size: 0.9em;
}

.NeedsAttentionBadge {
  cursor: help;
}

.NeedsAttention {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-left: 3px solid var(--color-warning);
  font-size: 0.9em;
}

.NeedsAttentionReason {
  color: rgb(27.9, 54.9, 54.9);
}

.SaleUpdatedBanner,
.CancelledBanner {
  padding: 0.25rem 0.5rem;
  font-size: 0.85em;
}

.SaleUpdatedBanner {
  color: var(--color-warning);
}

.CancelledBanner {
  color: rgb(66.2119565217, 130.2880434783, 130.2880434783);
}

.CancelledItems {
  margin-top: 0.75rem;
  opacity: 0.65;
}

.CancelledItemsHeading {
  margin: 0 0 0.25rem;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.CancelledReason,
.CancelledMeta {
  font-size: 0.85em;
  color: rgb(59.1695652174, 116.4304347826, 116.4304347826);
}

.PullListItemRow.is-cancelled {
  opacity: 0.65;
}

.PullListItemRow.needs-attention {
  box-shadow: inset 3px 0 0 var(--color-warning);
}

.ItemNotesEditor summary {
  cursor: pointer;
  font-size: 0.85em;
}

/* Supersession and adjustments (§14). Superseded rows are history — faded, and
   never struck through: struck means cancelled, and these were real work. */
.SupersededMeta,
.AdjustmentMeta,
.AdjustmentReason {
  font-size: 0.85em;
  color: rgb(59.1695652174, 116.4304347826, 116.4304347826);
}

.PullListItemRow.is-superseded {
  opacity: 0.6;
}

/* Why the pile changed, under the line it changed on. */
.SupersededReason {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.85em;
  color: rgb(59.1695652174, 116.4304347826, 116.4304347826);
}

.SupersededReason__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.AdjustmentBadge {
  font-weight: 600;
  white-space: nowrap;
}

.PendingAdjustmentBadge {
  cursor: help;
  white-space: nowrap;
}

.ItemAdjustment {
  padding: 0.25rem 0.5rem;
  font-size: 0.9em;
}

.ItemAdjustment--pending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  border-left: 3px solid var(--color-warning);
}

.ItemAdjustment--request summary {
  cursor: pointer;
  font-size: 0.85em;
}

/* Opened, the request is a short line of fields, not a page-wide stack — a
   signed quantity and a one-line reason. Without this, forms.scss's
   `input { width: 100% }` ran both of them the width of the card. */
.ItemAdjustment--request form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem 0.75rem;
  margin-top: 0.35rem;
  /* The warning is prose and wants the width; the button follows on its own
     line rather than being wedged against the reason field. */
}
.ItemAdjustment--request form .Field {
  margin: 0;
}
.ItemAdjustment--request form label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}
.ItemAdjustment--request form .Field:has(input[type=number]) {
  flex: 0 0 9rem;
}
.ItemAdjustment--request form .Field:has(input[type=text]) {
  flex: 1 1 14rem;
  min-width: 10rem;
}
.ItemAdjustment--request form input[type=number] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ItemAdjustment--request form .RestockHint {
  flex: 1 0 100%;
  margin: 0;
}
.ItemAdjustment--request form input[type=submit] {
  flex: 0 0 auto;
}

.RestockWarning,
.RestockHint {
  color: var(--color-warning);
  font-size: 0.85em;
}

.AdjustmentActions {
  display: flex;
  gap: 0.25rem;
}

/* The print page's refused-create block (pull_lists/_create_errors). Inherits
   .ErrorSummary's colours; all it adds is the room the print controls above it
   don't leave, and a dismiss in the corner — this one stays until it is read,
   so it needs a way out that isn't a page reload. */
.PullListCreateErrors {
  position: relative;
  margin: 0 0 1rem;
  padding-right: 2rem;
}
.PullListCreateErrors ul {
  margin: 0;
}
.PullListCreateErrors:focus-visible {
  outline: 2px solid rgb(177, 75.5, 69.5);
  outline-offset: 2px;
}

.PullListCreateErrors__dismiss {
  position: absolute;
  top: 0.25rem;
  right: 0.4rem;
  background: none;
  border: 0;
  padding: 0 0.25rem;
  font-size: 1.1rem;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}
.PullListCreateErrors__dismiss:hover {
  opacity: 1;
}

/* Tasks List */
.TasksList {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.TaskRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e3dccb;
  border-radius: 4px;
  transition: all 0.2s;
}

.TaskCompleteAction {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.TaskCompleteAction form {
  display: flex;
}

.TaskAssigneeDropdown {
  position: relative;
}
.TaskAssigneeDropdown > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: #527070;
  line-height: 1;
  padding: 4px 5px;
  border-radius: 3px;
  user-select: none;
  display: block;
  text-align: center;
  transform: scaleX(1.5);
}
.TaskAssigneeDropdown > summary::-webkit-details-marker {
  display: none;
}
.TaskAssigneeDropdown > summary:hover {
  color: #1f3d3d;
  background: #faf7ee;
}

.TaskAssigneeList {
  position: absolute;
  left: 0;
  top: calc(100% + 0.25rem);
  z-index: 100;
  background: #fff;
  border: 1px solid #e3dccb;
  border-radius: 4px;
  padding: 0.5rem;
  min-width: 220px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.TaskRow:hover {
  border-color: #105151;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.TaskRow.completed,
.TaskRow.cancelled {
  opacity: 0.6;
  background: #fffdf7;
}

.TaskRow.overdue,
.TaskRow.priority-urgent {
  border-left: 4px solid #d56856;
}

.TaskRow.priority-high {
  border-left: 4px solid #ca8a04;
}

.TaskRow.priority-backburner {
  opacity: 0.7;
}

.TaskRowMain {
  flex: 1;
  min-width: 0;
}

.TaskRowHeader {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.TaskTitleLine {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}

.TaskTitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f3d3d;
  text-decoration: none;
  min-width: 0;
  overflow-wrap: anywhere;
}

.TaskTitle:hover {
  color: #105151;
}

.TaskBadges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.TaskRowDetails {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  color: #527070;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

.TaskRowBody {
  font-size: 0.9rem;
  color: #527070;
  overflow-wrap: anywhere;
}

.TaskRowActions {
  display: flex;
  gap: 0.5rem;
  margin-left: 1rem;
  align-items: center;
}
.TaskRowActions > form {
  display: flex;
  align-items: center;
}

/* Assignee completion dropdown in TaskRowActions */
.AssigneeCompletionDropdown {
  position: relative;
}
.AssigneeCompletionDropdown > summary {
  list-style: none;
  cursor: pointer;
}
.AssigneeCompletionDropdown > summary::-webkit-details-marker {
  display: none;
}

.AssigneeCompletionList {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid #e3dccb;
  border-radius: 4px;
  padding: 0.5rem;
  min-width: 220px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.AssigneeCompletionItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  white-space: nowrap;
}
.AssigneeCompletionItem form {
  display: flex;
  align-items: center;
}

/* Assignee completions section on show page */
.AssigneeCompletions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.AssigneeCompletionRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #e3dccb;
}
.AssigneeCompletionRow:last-child {
  border-bottom: none;
}
.AssigneeCompletionRow form {
  display: flex;
  align-items: center;
}

.AssigneeCompletionStatus {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

/* Task Show Page */
.TaskShow {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  margin-top: 1rem;
}

.TaskShowMain {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.TaskShowSidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.TaskShowSection {
  background: #fff;
  padding: 1.5rem;
  border-radius: 4px;
  border: 1px solid #e3dccb;
}

.TaskShowSection h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.TaskShowSection h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.TaskDetails {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.TaskDetailRow {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.TaskDetailRow strong {
  min-width: 120px;
}

.TaskBody {
  line-height: 1.6;
}
.TaskBody p {
  margin-bottom: 0.75rem;
}
.TaskBody p:last-child {
  margin-bottom: 0;
}
.TaskBody ul, .TaskBody ol {
  margin: 0.5rem 0 0.75rem 1.5rem;
}
.TaskBody ul li, .TaskBody ol li {
  margin-bottom: 0.25rem;
}
.TaskBody hr {
  border: none;
  border-top: 2px solid #e3dccb;
  margin: 1rem 0;
}
.TaskBody a {
  color: #105151;
  text-decoration: underline;
}
.TaskBody strong {
  font-weight: 700;
}
.TaskBody em {
  font-style: italic;
}
.TaskBody del {
  text-decoration: line-through;
  color: #527070;
}
.TaskBody code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--color-bg);
  border: 1px solid #e3dccb;
  border-radius: 3px;
  padding: 0.1em 0.35em;
}
.TaskBody pre {
  background: var(--color-bg);
  border: 1px solid #e3dccb;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  margin: 0.75rem 0;
}
.TaskBody pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.875rem;
}
.TaskBody table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75rem 0;
  font-size: 0.9rem;
}
.TaskBody table th, .TaskBody table td {
  border: 1px solid #e3dccb;
  padding: 0.4rem 0.75rem;
  text-align: left;
}
.TaskBody table th {
  background: var(--color-bg);
  font-weight: 600;
}
.TaskBody table tr:nth-child(even) td {
  background: #fffdf7;
}

.TaskActions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Badges */
.Badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 3px;
  white-space: nowrap;
}

.BadgeFeature {
  background: rgb(248.64, 240.96, 224.88);
  color: rgb(141.9883495146, 97.0019417476, 2.8116504854);
}

.BadgePriority {
  background: rgb(231.1, 237.6, 237.6);
  color: #105151;
}

.BadgePriority.priority-urgent {
  background: rgb(240.3, 202.15, 195.85);
  color: #5d091f;
}

.BadgePriority.priority-high {
  background: rgb(248.64, 240.96, 224.88);
  color: rgb(141.9883495146, 97.0019417476, 2.8116504854);
}

.BadgePriority.priority-backburner {
  background: #ece5d3;
  color: #527070;
}

.BadgeCompleted {
  background: rgb(227.76, 238.08, 231.48);
  color: #1c723b;
}

.BadgePending {
  background: rgb(220.55, 247.2, 148.4);
  color: #1f3d3d;
}

.BadgeOverdue {
  background: rgb(240.3, 202.15, 195.85);
  color: #5d091f;
}

.BadgeWarning {
  background: rgb(248.64, 240.96, 224.88);
  color: rgb(141.9883495146, 97.0019417476, 2.8116504854);
}

/* Vote Widget */
.TaskVoteWidget {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.VoteDisplay {
  text-align: center;
}

.VoteCount {
  font-size: 2rem;
  font-weight: bold;
  color: #105151;
}

.VoteLabel {
  font-size: 0.9rem;
  color: #527070;
}

.VoteControls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.VoteButton {
  padding: 0.5rem 1rem;
  border: 1px solid #e3dccb;
  background: #fff;
  color: #527070;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 600;
  transition: all 0.2s;
}

.VoteButtonUp:hover {
  background: rgb(227.76, 238.08, 231.48);
  border-color: #1c723b;
  color: #1c723b;
}

.VoteButtonDown:hover {
  background: rgb(240.3, 202.15, 195.85);
  border-color: #d56856;
  color: #5d091f;
}

.YourVote, .OtherVotes {
  font-size: 0.9rem;
  color: #527070;
  text-align: center;
}

/* Task Status Alerts */
.TaskStatus {
  margin-bottom: 1rem;
}

.Alert {
  padding: 1rem;
  border-radius: 4px;
  border-left: 4px solid;
}

.AlertSuccess {
  background: rgb(227.76, 238.08, 231.48);
  border-color: #1c723b;
  color: #1c723b;
}

.AlertDanger {
  background: rgb(240.3, 202.15, 195.85);
  border-color: #d56856;
  color: #5d091f;
}

.AlertWarning {
  background: rgb(248.64, 240.96, 224.88);
  border-color: #ca8a04;
  color: rgb(141.9883495146, 97.0019417476, 2.8116504854);
}

.AlertInfo {
  background: rgb(231.1, 237.6, 237.6);
  border-color: #105151;
  color: #105151;
}

/* Form Checkbox Groups */
.FormCheckboxGroup {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #e3dccb;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
}

.FormCheckboxItem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem;
}

.FormCheckboxItem:hover {
  background: #faf7ee;
}

.FormCheckboxLabel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
  .TaskShow {
    grid-template-columns: 1fr;
  }
  .TaskRow {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .TaskRowActions {
    flex-basis: 100%;
    margin-left: 0;
    margin-top: 0.5rem;
  }
}
/* Task Mini Rows (home page "My Tasks" boxes)

   The row's own line is `.RowMain` (sales/_lists.shared.scss), the same
   content-plus-pinned-actions split the dashboard's sale and pull list rows use,
   with the details panel below it — so this is only the card around them. */
.TaskMiniRow {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border-left: 3px solid transparent;
  background: #fff;
  border-radius: 4px;
  transition: all 0.2s;
}

.TaskMiniRow:last-child {
  margin-bottom: 0;
}

.TaskMiniRow:hover {
  background: #fffdf7;
}

.TaskMiniRow.overdue {
  border-left-color: #d56856;
  background: rgb(240.3, 202.15, 195.85);
}

.TaskMiniRow.priority-urgent {
  border-left-color: #d56856;
}

.TaskMiniRow.priority-high {
  border-left-color: #ca8a04;
}

.TaskMiniTitle {
  /* Takes the slack, so the badges sit against the actions cluster rather than
     drifting with the title's length. */
  flex: 1 1 auto;
  font-weight: 500;
  color: #1f3d3d;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.TaskMiniTitle:hover {
  color: #105151;
}

.TaskMiniBadges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.TaskMiniAssignees,
.TaskMiniDue {
  font-size: 0.85rem;
  color: #527070;
}

.TaskMiniDue.overdue {
  color: rgb(177, 75.5, 69.5);
  font-weight: 600;
}

/* What the row hides until the chevron is used: the task's body and its meta
   line, the same block the full row on /tasks shows outright. */
.TaskMiniDetails {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  /* `display: grid` beats the `hidden` attribute on its own. */
}
.TaskMiniDetails[hidden] {
  display: none !important;
}

/* Cancelled and completed rows stay readable but stop competing with the work
   that is still open — the same dimming the full row uses. */
.TaskMiniRow.completed,
.TaskMiniRow.cancelled {
  opacity: 0.6;
}

.CommentsButtonWrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.btn-comments {
  border: 1px solid #105151;
  border-radius: var(--btn-radius);
  background: #105151;
  color: #ffffff;
  cursor: pointer;
}
.btn-comments:hover {
  background: rgb(18.7249484536, 94.7950515464, 94.7950515464);
}

.CommentCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25em;
  padding: 0 0.3em;
  margin-left: -0.35em;
  height: 1.25em;
  color: #fff;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1;
}

.CommentsDialog {
  border-radius: 8px;
  width: min(720px, 92vw);
  margin: 8vh auto;
}
.CommentsDialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.CommentsDialog turbo-frame {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.CommentsDialog turbo-frame > turbo-frame {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.CommentsDialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e3dccb;
  flex-shrink: 0;
}
.CommentsDialog-header h2 {
  margin: 0;
  font-size: 1.1rem;
  color: #1f3d3d;
}

.CommentsDialog-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.CommentsDialog-subject {
  font-size: 0.8rem;
  color: #527070;
  overflow-wrap: anywhere;
}

.CommentsDialog-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #527070;
  padding: 0 0.4rem 0.25rem;
  flex: 0 0 auto;
  align-self: flex-start;
}
.CommentsDialog-close:hover {
  color: #1f3d3d;
}

.CommentsList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.CommentsEmpty {
  color: #527070;
  font-size: 0.9rem;
  text-align: center;
  padding: 2rem 0;
}

.CommentsLoading {
  color: #527070;
  font-size: 0.9rem;
  padding: 1.5rem 1.25rem;
}

.Comment {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background-color: #faf7ee;
  border: 1px solid #e3dccb;
  padding: 0.5rem;
}

.Comment-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.Comment-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.Comment-avatarImg {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.Comment-avatarInitials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #105151;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
}

.Comment-meta-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
}

.Comment-actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s;
}
.Comment:hover .Comment-actions {
  opacity: 1;
}

.Comment-action {
  background: none;
  border: none;
  padding: 0.1rem 0.25rem;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  border-radius: 4px;
  text-decoration: none;
}
.Comment-action:hover {
  background: #ece5d3;
}

.Comment-author {
  font-weight: 600;
  color: #105151;
}

.Comment-meta-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.Comment-time {
  color: #527070;
}

.CommentBadge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.CommentBadge--new {
  background: #105151;
  color: #fff;
}
.CommentBadge--updated {
  background: #e5c786;
  color: #1f3d3d;
}

@keyframes comment-badge-fade {
  0%, 50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.Comment-body {
  font-size: 0.9rem;
  line-height: 1.5;
}
.Comment-body p, .Comment-body ul, .Comment-body ol, .Comment-body blockquote, .Comment-body pre {
  margin: 0.3rem 0;
}
.Comment-body p:first-child, .Comment-body ul:first-child, .Comment-body ol:first-child, .Comment-body blockquote:first-child, .Comment-body pre:first-child {
  margin-top: 0;
}
.Comment-body p:last-child, .Comment-body ul:last-child, .Comment-body ol:last-child, .Comment-body blockquote:last-child, .Comment-body pre:last-child {
  margin-bottom: 0;
}
.Comment-body ul, .Comment-body ol {
  padding-left: 1.4rem;
}
.Comment-body hr {
  margin: 0.4rem 0;
  border: none;
  border-top: 1px solid #e3dccb;
}

.Comment--editing {
  padding: 0.5rem;
}
.Comment--editing .CommentForm-body {
  width: 100%;
}

.CommentEditActions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

.CommentEditCancel {
  font-size: 0.85rem;
  color: #527070;
  text-decoration: none;
}
.CommentEditCancel:hover {
  color: #1f3d3d;
}

.CommentForm {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid #e3dccb;
  flex-shrink: 0;
}

.CommentForm-body {
  width: 100%;
  resize: vertical;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e3dccb;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
}
.CommentForm-body:focus {
  outline: none;
  border-color: #105151;
  box-shadow: 0 0 0 3px rgba(16, 81, 81, 0.15);
}
.CommentForm-body.is-invalid {
  border-color: rgb(177, 75.5, 69.5);
}

.CommentForm-error {
  font-size: 0.8rem;
  color: rgb(177, 75.5, 69.5);
}

.CommentForm-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.CommentForm-formatting {
  font-size: 0.8rem;
  color: #527070;
}
.CommentForm-formatting summary {
  cursor: pointer;
  user-select: none;
  color: #527070;
}
.CommentForm-formatting summary:hover {
  color: #1f3d3d;
}

.CommentForm-formattingList {
  margin: 0.4rem 0 0 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.CommentForm-formattingList code {
  font-size: 0.8em;
  background: #ece5d3;
  border-radius: 3px;
  padding: 0.05em 0.3em;
}

.CommentForm-notified {
  flex-shrink: 0;
  text-align: right;
}
.CommentForm-notified summary {
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.CommentForm-notified summary:hover {
  color: #1f3d3d;
}

.CommentForm-notifiedList {
  margin: 0.4rem 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.CommentForm-submit {
  align-self: flex-end;
  padding: 0.4rem 1rem;
  background: #105151;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 0.875rem;
  cursor: pointer;
}
.CommentForm-submit:hover {
  background: rgb(18.7249484536, 94.7950515464, 94.7950515464);
}

#NotificationDock {
  container-type: inline-size;
  position: fixed;
  top: var(--app-header-height);
  left: 0;
  height: calc(100vh - var(--app-header-height));
  width: var(--notif-dock-width);
  transform: translateX(-100%);
  will-change: transform;
  transition: transform var(--dock-transition-duration) var(--dock-transition-ease), width var(--dock-transition-duration) var(--dock-transition-ease);
  z-index: var(--z-dock);
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
}

#NotificationDock.Open {
  transform: translateX(0);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

.NotifDockHeader {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  gap: 0.5rem;
  background: #fff;
  border-bottom: 1px solid #e3dccb;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  flex-shrink: 0;
}

.NotifDockHeader-left,
.NotifDockHeader-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.NotifDockTitle {
  font-weight: 600;
  font-size: 0.95rem;
}

@container (max-width: 280px) {
  .NotifDockTitle {
    display: none;
  }
}
.NotifDockHeader .CloseButton {
  line-height: 1;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.25rem;
}
.NotifDockHeader .CloseButton:hover {
  background: var(--color-accent);
}

.NotifRefreshBtn {
  font-size: 1rem;
  color: #527070;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  line-height: 1;
}
.NotifRefreshBtn:hover {
  color: #1f3d3d;
  background: #ece5d3;
}

.NotifMarkAllBtn {
  font-size: 0.75rem;
  color: #527070;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}
.NotifMarkAllBtn:hover {
  color: #1f3d3d;
  background: #ece5d3;
}

.NotifDockBody {
  flex: 1;
  overflow-y: auto;
  background: #fffdf7;
  border-left: 1px solid #e3dccb;
}

.NotifEmpty {
  padding: 2rem 1rem;
  text-align: center;
  color: #527070;
  font-size: 0.9rem;
}

.NotifDockFooter {
  flex-shrink: 0;
  border-top: 1px solid #e3dccb;
  background: #fff;
  text-align: center;
  padding: 0.55rem 1rem;
}

.NotifDockFooter-link {
  font-size: 0.8rem;
  color: #527070;
  text-decoration: none;
}
.NotifDockFooter-link:hover {
  color: #1f3d3d;
  text-decoration: underline;
}

.NotifGroup {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e3dccb;
  background: #fff;
  border-left: 3px solid transparent;
  transition: background 0.1s;
}
.NotifGroup.Unread {
  background: rgb(238.27, 242.82, 242.82);
  border-left-color: #105151;
  cursor: pointer;
}

.NotifGroup-header {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.NotifGroup-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.NotifGroup-subject {
  flex: 1;
  min-width: 0;
}

.NotifGroup-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f3d3d;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.NotifGroup-title a {
  color: inherit;
  text-decoration: none;
}
.NotifGroup-title a:hover {
  text-decoration: underline;
}

.NotifGroup-event {
  font-size: 0.75rem;
  color: #527070;
  margin-top: 0.1rem;
}

.NotifGroup-actors {
  font-size: 0.8rem;
  color: #1f3d3d;
  margin-bottom: 0.25rem;
}

.NotifGroup-comments {
  margin: 0.4rem 0 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.NotifGroup-comment {
  font-size: 0.8rem;
  color: #1f3d3d;
  line-height: 1.4;
  padding: 0.2rem 0.4rem;
  border-left: 2px solid #e3dccb;
  border-radius: 0 2px 2px 0;
}
.NotifGroup-comment ol, .NotifGroup-comment ul {
  margin: 0.25rem 0 0.25rem 1.25rem;
  padding: 0;
}
.NotifGroup-comment p {
  margin: 0;
}
.NotifGroup-comment p + p {
  margin-top: 0.25rem;
}

.NotifGroup-comment--read {
  color: #527070;
  border-left-color: transparent;
}

.NotifGroup-comment--context {
  color: #527070;
  border-left-color: transparent;
  transition: color 0.15s;
}
.NotifGroup-comment--context:hover {
  color: #1f3d3d;
}

.NotifGroup-comment-author {
  font-weight: 600;
  margin-right: 0.2rem;
}

.NotifGroup-time {
  font-size: 0.75rem;
  color: #527070;
}

.NotifGroup-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.4rem;
}

.NotifMarkUnreadBtn {
  font-size: 0.75rem;
  color: #527070;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0;
  text-decoration: underline;
}
.NotifMarkUnreadBtn:hover {
  color: #1f3d3d;
}

.NotifMarkForm {
  display: inline;
}

.NotifSnoozeIcon {
  display: none;
  position: absolute;
  bottom: 4px;
  right: 0;
  line-height: 1;
  pointer-events: none;
}

html.notif-heartbeat-snoozed .NotifSnoozeIcon {
  display: block;
}

@keyframes notif-badge-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.45);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
#NotificationToggle {
  position: relative;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  border-radius: 0.375rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  line-height: 1;
}
#NotificationToggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

.NotifBadge.Pulse {
  animation: notif-badge-pulse 0.4s ease-out;
}

.NotifBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25em;
  padding: 0 0.3em;
  height: 1.25em;
  background: rgb(177, 75.5, 69.5);
  color: #fff;
  font-size: 0.85rem;
  border-radius: 999px;
  line-height: 1;
  margin-left: -0.2rem;
  margin-top: -0.6rem;
}
.NotifBadge.Hidden {
  display: none;
}

.NotifPage .PageHeaderActions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.NotifPage .PageHeaderActions form {
  display: contents;
}

.NotifPage {
  margin: 0 auto;
}
.NotifPage h1 {
  margin-bottom: 1rem;
}

@media (max-width: 767px) {
  #NotificationDock {
    display: none !important;
  }
  .NotifPage .PageHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 0rem;
    margin-bottom: 0.5rem;
  }
  .NotifPage .PageHeader h1 {
    margin-bottom: 0;
  }
  .NotifPage .PageHeaderActions .Button,
  .NotifPage .PageHeaderActions .Button--secondary {
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  #NotificationDock {
    transition: none !important;
  }
}
.DemoBanner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.4rem 1rem;
  background: #e5c786;
  color: #1f3d3d;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}
.DemoBanner__cta {
  color: #105151;
  font-weight: 700;
  text-decoration: underline;
}

.UserInitials {
  cursor: help;
  white-space: nowrap;
}

.UserAvatar {
  flex-shrink: 0;
  display: inline-flex;
  vertical-align: middle;
}
.UserAvatar__img {
  border-radius: 25%;
  object-fit: cover;
  display: block;
}
.UserAvatar__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25%;
  color: #fff;
  font-weight: 600;
  line-height: 1;
}

.UserProfile-card {
  --user-color: #105151;
  position: relative;
  background: #fff;
  border: 1px solid var(--user-color);
  border-top: 4px solid var(--user-color);
  border-radius: 10px;
  overflow: hidden;
}

.UserProfile-cardActions {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}

.UserProfile-editBtn {
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  background: #fff;
  border: 1px solid #e3dccb;
  border-radius: 6px;
  color: #1f3d3d;
  cursor: pointer;
}
.UserProfile-editBtn:hover {
  background: #faf7ee;
  color: #105151;
}

.UserProfile-formPanel {
  padding: 1.5rem;
}

.UserProfile-formHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.UserProfile-formTitle {
  font-size: 1rem;
  font-weight: 600;
  color: #1f3d3d;
}

.UserProfile-cancelBtn {
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  background: none;
  border: 1px solid #e3dccb;
  border-radius: 6px;
  color: #527070;
  cursor: pointer;
}
.UserProfile-cancelBtn:hover {
  background: #faf7ee;
  color: #1f3d3d;
}

.UserProfile-hero {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  border-bottom: 1px solid #e3dccb;
  background: linear-gradient(160deg, #fff 40%, #faf7ee 100%);
}

.UserProfile-avatar {
  flex-shrink: 0;
}

.UserProfile-avatarImg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.UserProfile-avatarInitials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--user-color);
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.UserProfile-identity {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.UserProfile-name {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1f3d3d;
  line-height: 1.2;
}

.UserProfile-company {
  font-size: 0.9rem;
  color: #527070;
}

.UserProfile-email {
  font-size: 0.85rem;
  color: #527070;
}

.UserProfile-sections {
  padding: 0 1.5rem;
}

.UserProfile-section {
  padding: 1rem 0;
  border-bottom: 1px solid #e3dccb;
}
.UserProfile-section:last-child {
  border-bottom: none;
}

.UserProfile-sectionTitle {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #527070;
}

.UserProfile-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.25rem;
  margin: 0;
  font-size: 0.9rem;
}
.UserProfile-dl dt {
  color: #527070;
  font-weight: 500;
  white-space: nowrap;
}
.UserProfile-dl dd {
  margin: 0;
  color: #1f3d3d;
}

.LeadBreadcrumb {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.LeadProfile-card {
  --lead-color: #105151;
  --lead-color-soft: rgb(226.32, 234.12, 234.12);
  --lead-color-border: rgb(147.45, 176.7, 176.7);
  --lead-color-ink: #164949;
  position: relative;
  background: #fff;
  border: 1px solid var(--lead-color-border);
  border-top: 4px solid var(--lead-color);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 1rem;
}
.LeadProfile-card--new {
  --lead-color: #527070;
  --lead-color-soft: rgb(234.24, 237.84, 237.84);
  --lead-color-border: rgb(177.15, 190.65, 190.65);
  --lead-color-ink: rgb(61.6, 91.6, 91.6);
}
.LeadProfile-card--contacted {
  --lead-color: #ca8a04;
  --lead-color-soft: rgb(248.64, 240.96, 224.88);
  --lead-color-border: rgb(231.15, 202.35, 142.05);
  --lead-color-ink: rgb(133.6, 107.2, 26.8);
}
.LeadProfile-card--demo-created {
  --lead-color: #0d6969;
  --lead-color-soft: rgb(225.96, 237, 237);
  --lead-color-border: rgb(146.1, 187.5, 187.5);
  --lead-color-ink: rgb(20.2, 87.4, 87.4);
}
.LeadProfile-card--converted {
  --lead-color: #1c723b;
  --lead-color-soft: rgb(227.76, 238.08, 231.48);
  --lead-color-border: rgb(152.85, 191.55, 166.8);
  --lead-color-ink: rgb(29.2, 92.8, 59.8);
}
.LeadProfile-card--declined {
  --lead-color: rgb(177, 75.5, 69.5);
  --lead-color-soft: rgb(245.64, 233.46, 232.74);
  --lead-color-border: rgb(219.9, 174.225, 171.525);
  --lead-color-ink: rgb(118.6, 69.7, 66.1);
}

.LeadProfile-cardActions {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}

.LeadProfile-editBtn {
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  background: #fff;
  border: 1px solid #e3dccb;
  border-radius: 6px;
  color: #1f3d3d;
  cursor: pointer;
}
.LeadProfile-editBtn:hover {
  background: #faf7ee;
  color: #105151;
}

.LeadProfile-formPanel {
  padding: 1.5rem;
}
.LeadProfile-formPanel .LeadForm-field {
  flex: 1 1 220px;
  flex-direction: column;
  gap: 0.15rem;
}
.LeadProfile-formPanel .LeadForm-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #527070;
}
.LeadProfile-formPanel .LeadForm-field input, .LeadProfile-formPanel .LeadForm-field textarea {
  flex: 0 0 auto;
  width: 100%;
  padding: 0.5rem;
  font-size: 0.95rem;
}
.LeadProfile-formPanel .LeadForm-field .hint {
  margin-top: 0.15rem;
}

.LeadProfile-formHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.LeadProfile-formTitle {
  font-size: 1rem;
  font-weight: 600;
  color: #1f3d3d;
}

.LeadProfile-cancelBtn {
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  background: none;
  border: 1px solid #e3dccb;
  border-radius: 6px;
  color: #527070;
  cursor: pointer;
}
.LeadProfile-cancelBtn:hover {
  background: #faf7ee;
  color: #1f3d3d;
}

.LeadProfile-hero {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  padding-right: 6rem;
  border-bottom: 1px solid #e3dccb;
  background: linear-gradient(160deg, #fff 40%, var(--lead-color-soft) 100%);
}

.LeadProfile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--lead-color);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.LeadProfile-identity {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
}

.LeadProfile-name {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1f3d3d;
  line-height: 1.2;
}

.LeadProfile-business {
  font-size: 0.9rem;
  color: #527070;
}

.LeadProfile-email {
  font-size: 0.85rem;
  color: #527070;
}

.LeadStatusBadge {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  background: #fff;
  color: var(--lead-color-ink);
  border: 1px solid var(--lead-color-border);
}

.LeadProfile-sections {
  padding: 0 1.5rem;
}

.LeadProfile-section {
  margin-top: 0;
  padding: 1rem 0;
  border-bottom: 1px solid #e3dccb;
}
.LeadProfile-section:last-child {
  border-bottom: none;
}

.LeadProfile-sectionTitle {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #527070;
}

.LeadProfile-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.25rem;
  margin: 0;
  font-size: 0.9rem;
}
.LeadProfile-dl dt {
  color: #527070;
  font-weight: 500;
  white-space: nowrap;
}
.LeadProfile-dl dd {
  margin: 0;
  color: #1f3d3d;
  min-width: 0;
}

.LeadProfile-empty {
  color: #527070;
  font-style: italic;
}

.LeadProfile-notes {
  font-size: 0.9rem;
  color: #1f3d3d;
  background: #fffdf7;
  border: 1px solid #e3dccb;
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
}
.LeadProfile-notes p {
  margin: 0 0 0.5rem;
}
.LeadProfile-notes p:last-child {
  margin-bottom: 0;
}

.LeadFeatureChips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.LeadFeatureChip {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: #faf7ee;
  border: 1px solid #e3dccb;
  color: #1f3d3d;
}

.LeadTimeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.LeadTimeline-step {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 0.75rem;
  border-left: 3px solid #e3dccb;
}
.LeadTimeline-step.is-done {
  border-left-color: var(--lead-color);
}

.LeadTimeline-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #527070;
}

.LeadTimeline-when {
  font-size: 0.85rem;
  color: #1f3d3d;
}

.LeadStatusActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.LeadStatusActions-label {
  font-size: 0.8rem;
  color: #527070;
  margin-right: 0.15rem;
}

.LeadStatusActions-form {
  display: inline;
}

.LeadPanel {
  margin-top: 1.25rem;
  background: #fff;
  border: 1px solid #e3dccb;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}

.LeadPanel-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1f3d3d;
}

.LeadPanel-hint {
  font-size: 0.85rem;
  color: #527070;
  margin-bottom: 0.9rem;
}

.LeadPanel-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.85rem;
  background: #faf7ee;
  border: 1px solid #e3dccb;
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
}

.LeadStatusBadge--new {
  --lead-color: #527070;
  --lead-color-soft: rgb(234.24, 237.84, 237.84);
  --lead-color-border: rgb(177.15, 190.65, 190.65);
  --lead-color-ink: rgb(61.6, 91.6, 91.6);
}
.LeadStatusBadge--contacted {
  --lead-color: #ca8a04;
  --lead-color-soft: rgb(248.64, 240.96, 224.88);
  --lead-color-border: rgb(231.15, 202.35, 142.05);
  --lead-color-ink: rgb(133.6, 107.2, 26.8);
}
.LeadStatusBadge--converted {
  --lead-color: #1c723b;
  --lead-color-soft: rgb(227.76, 238.08, 231.48);
  --lead-color-border: rgb(152.85, 191.55, 166.8);
  --lead-color-ink: rgb(29.2, 92.8, 59.8);
}

.BetaProgram-invite {
  margin-bottom: 0.5rem;
}

.BetaProgram-directLink {
  margin-top: 0.6rem;
}

.BetaProgram-linkText {
  display: block;
  margin-top: 0.2rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid #e3dccb;
  border-radius: 4px;
  background: #fffdf7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  line-height: 1.4;
  color: #527070;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.BetaProgram-linkText.Copied {
  border-color: #1c723b;
  color: #1f3d3d;
}

.BetaProgram-subtitle {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #527070;
}

.BetaProgram-survey {
  padding: 0.75rem 0;
  border-top: 1px solid #e3dccb;
}

.BetaProgram-surveyHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.BetaProgram-surveyName {
  font-weight: 600;
  font-size: 0.9rem;
}

.BetaProgram-meta {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #527070;
}

.BetaProgram-effective {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.BetaProgram-ledger {
  font-size: 0.85rem;
}
.BetaProgram-ledger .Button--secondary {
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
}

.BetaProgram-manualGrant {
  margin-top: 1rem;
  font-size: 0.9rem;
}
.BetaProgram-manualGrant summary {
  cursor: pointer;
  color: #527070;
}

.BetaProgram-freeText {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}
.BetaProgram-freeText li + li {
  margin-top: 0.35rem;
}

.BetaProgram-grantForm {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: 0.75rem;
}

.ProvisionDemo__missingName {
  font-size: 0.9rem;
  background: rgb(248.64, 240.96, 224.88);
  border: 1px solid #e5c786;
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  color: #1f3d3d;
}

.ProvisionDemo__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.9rem;
}

.ProvisionDemo__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 200px;
}
.ProvisionDemo__field label {
  font-size: 0.8rem;
  color: #527070;
}

@media (max-width: 767px) {
  .LeadProfile-hero {
    flex-wrap: wrap;
    padding-right: 1.5rem;
    padding-top: 3.25rem;
  }
  .LeadProfile-dl {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  .LeadProfile-dl dd {
    margin-bottom: 0.5rem;
  }
}
/* app/assets/stylesheets/customer_orders.scss */
/* ============================================
   CUSTOMER ORDER PAGE
   Uses the existing design system from colors.scss, forms.scss, tables.scss
   ============================================ */
.CustomerOrderPage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #faf7ee;
}

/* ============================================
   HEADER - Sticky Top Bar
   ============================================ */
.OrderHeader {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 2px solid #e3dccb;
  padding: 1rem;
  margin: 1rem 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.OrderHeader.hidden {
  display: none;
}

#main-content.UserSignedIn .OrderHeader {
  top: 4rem;
}

.OrderDisclaimer {
  text-align: center;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 500;
  color: rgb(11.793814433, 59.706185567, 59.706185567);
  background: rgb(203.268556701, 244.781443299, 244.781443299);
  border: 1px solid rgb(134.2932989691, 231.1567010309, 231.1567010309);
  border-radius: 6px;
  padding: 0.75rem 2rem;
  max-width: 800px;
  margin: 0.75rem auto;
}
.OrderDisclaimer p {
  margin: 0;
}
.OrderDisclaimer p + p {
  margin-top: 0.5rem;
}

.OrderHeader__container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.Logo {
  flex-shrink: 0;
  max-width: 100px;
  height: auto;
}

.OrderHeader__filter {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
}

.SeasonSelectPage__notice {
  font-size: 1.2rem;
}

.SeasonSelector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.SeasonSelector label {
  font-weight: 600;
  color: #1f3d3d;
  margin: 0;
}
.SeasonSelector select {
  padding: 0.5rem 1rem;
  border: 1px solid #e3dccb;
  border-radius: 4px;
  font-size: 0.95rem;
  background: #fff;
  color: #1f3d3d;
  cursor: pointer;
}
.SeasonSelector select:focus {
  border-color: #105151;
  box-shadow: 0 0 0 3px rgba(16, 81, 81, 0.22);
}

/* Search and the filter button travel together — side by side on one line at
   every width, so the phone header stays two short rows tall. */
.OrderHeader__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

.OrderSearch {
  flex: 1;
  min-width: 0;
}
.OrderSearch input {
  width: 100%;
  margin-top: 0;
  font-size: 1rem;
  line-height: 1.5;
  /* font-size/line-height set explicitly: the UA default for <input>
     ignores inherited text sizing, which left it a few px shorter than
     the SeasonInfo badge next to it. Otherwise inherits from forms.scss. */
}

/* ============================================
   FILTER FLYOUT
   One panel for every filter but the search box.
   Hangs off the button on a desktop; slides up
   from the bottom edge on a phone (see RESPONSIVE).
   ============================================ */
.OrderFilterMenu {
  position: relative;
  flex-shrink: 0;
}

.FilterButton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  min-height: 2.6rem;
  border: 1px solid #e3dccb;
  border-radius: 4px;
  background: #fff;
  color: #1f3d3d;
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
}
.FilterButton:hover {
  border-color: #105151;
}
.FilterButton[aria-expanded=true] {
  border-color: #105151;
  box-shadow: 0 0 0 3px rgba(16, 81, 81, 0.22);
}

.FilterButton--active {
  border-color: #105151;
  color: #105151;
}

.FilterButton__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.FilterButton__count {
  min-width: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #105151;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3rem;
  text-align: center;
}
.FilterButton__count[hidden] {
  display: none;
}

.FilterPanel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 2;
  width: 20rem;
  max-width: calc(100vw - 2rem);
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e3dccb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  text-align: left;
}
.FilterPanel[hidden] {
  display: none;
}

/* The sheet needs a title and a way out on a phone; the desktop dropdown is
   dismissed by clicking away from it and says what it is by where it sits. */
.FilterPanel__header {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.FilterPanel__heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f3d3d;
}

.FilterPanel__close {
  border: 0;
  background: none;
  padding: 0 0.25rem;
  font-size: 1.6rem;
  line-height: 1;
  color: #527070;
  cursor: pointer;
}

.FilterPanel__group + .FilterPanel__group {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid #e3dccb;
}

.FilterPanel__title {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #527070;
}

.FilterPanel__options {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.FilterPanel__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem; /* a comfortable tap target in the sheet */
  margin: 0;
  font-weight: normal;
  color: #1f3d3d;
  cursor: pointer;
  user-select: none;
}
.FilterPanel__option input[type=checkbox] {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
}

.FilterPanel__swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.FilterPanel__select {
  width: 100%;
  margin: 0;
}

.FilterPanel__price {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.FilterPanel__price input {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.FilterPanel__prefix {
  color: #527070;
  font-weight: 600;
}

.FilterPanel__hint {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: #527070;
}

.FilterPanel__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid #e3dccb;
}

.FilterPanel__clear {
  border: 0;
  background: none;
  padding: 0.4rem 0;
  color: rgb(15.2, 76.95, 76.95);
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}

.FilterPanel__done {
  padding: 0.5rem 1.1rem;
  border: 1px solid #105151;
  border-radius: 4px;
  background: #105151;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.FilterPanel__done:hover {
  background: rgb(18.7249484536, 94.7950515464, 94.7950515464);
}

/* Only ever seen behind the phone sheet — the desktop dropdown leaves the page
   reachable underneath it. */
.FilterBackdrop {
  display: none;
}

.EmptyState--noMatches {
  margin-top: 1rem;
}
.EmptyState--noMatches .FilterPanel__clear {
  font-size: 1rem;
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.OrderForm {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.OrderTableSection {
  flex: 1;
  padding: 2rem 1rem;
  padding-bottom: 100px; /* Space for sticky footer */
}
.OrderTableSection.hidden {
  display: none;
}

.OrderTableSection__container {
  max-width: 1400px;
  margin: 0 auto;
}

.EmptyState {
  text-align: center;
  padding: 4rem 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.EmptyState p {
  color: #527070;
  font-size: 1.1rem;
}

/* ============================================
   STOCK TYPE SECTIONS
   ============================================ */
.OrderTableSection .StockTypeList {
  display: grid;
  gap: 1rem;
  background: none;
}

.StockTypeSection {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.StockTypeSection__header {
  background: var(--st-color-header, #0a5454);
  color: #ffffff;
  padding: 1rem 1.5rem;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  position: relative;
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.StockTypeSection__header:hover {
  filter: brightness(0.9);
}

.StockTypeSection__increment,
.StockTypeSection__pricing-note {
  font-size: 0.85rem;
  font-weight: normal;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.22);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
}

.StockTypeSection__order-note {
  flex-basis: 100%;
  font-size: 0.85rem;
  font-weight: normal;
  line-height: 1.4;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.22);
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  white-space: pre-line;
}

.StockTypeSection__chevron {
  display: inline-block;
  transition: transform 0.2s ease;
  margin-right: 0.5rem;
  font-size: 0.8em;
}
.StockTypeSection__chevron.is-open {
  transform: rotate(0deg);
}
.StockTypeSection__chevron:not(.is-open) {
  transform: rotate(-90deg);
}

.StockTypeSection [data-expand-row-target=details][hidden] {
  display: none !important;
}

/* ============================================
   ORDER TABLE
   Extends table styles from tables.scss
   ============================================ */
.OrderTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
}
.OrderTable thead {
  background: #fffdf7;
  border-bottom: 2px solid #e3dccb;
}
.OrderTable thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: #1f3d3d;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #fffdf7; /* Override default table th background */
  border: none;
}
.OrderTable tbody {
  /* A size is two rows — its prices and its stock count — so hovering either
     lights both. The pair is always adjacent (see customer/sales/_species_row),
     which is what lets `+` reach forwards and `:has(+ …)` reach back. The
     species header row is excluded — it's not an orderable size, so it
     shouldn't highlight on hover. */
}
.OrderTable tbody tr {
  border-bottom: 1px solid #e3dccb;
  background: var(--st-color-row, transparent);
}
.OrderTable tbody tr.OrderRow--small {
  background: rgb(255, 253.06, 247.24);
}
.OrderTable tbody tr.OrderRow:not(.OrderRow--speciesHeader):hover,
.OrderTable tbody tr.OrderRow--size:hover + tr.OrderRow--stock,
.OrderTable tbody tr.OrderRow--size:has(+ tr.OrderRow--stock:hover) {
  background: #fffdf7;
}
.OrderTable tbody td {
  padding: 1rem;
  vertical-align: top;
  border: none; /* Override default table borders */
}

/* Column widths (price tier columns are auto-width) */
.OrderTable .col-info {
  width: 2rem;
}
.OrderTable .col-species {
  width: 25%;
}
.OrderTable .col-size {
  width: 8%;
}
.OrderTable .col-quantity {
  width: 15%;
  text-align: right;
}

/* Make price tier columns compact and centered */
.col-price-tier {
  min-width: 80px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

/* Header styling for price tiers */
.OrderTable thead th.col-price-tier {
  font-size: 0.85rem;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-light));
}

/* ============================================
   SPECIES NAMES
   ============================================ */
.SpeciesName {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  /* The order form runs the names along one line — that table already gives a
     species its own rows for availability and prices. Wraps on narrow screens. */
}
.SpeciesName--indent {
  padding-left: 1.5rem;
  position: relative;
}
.SpeciesName--indent::before {
  content: "↳";
  position: absolute;
  left: 0.5rem;
  color: #527070;
}
.SpeciesName--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  row-gap: 0.15rem;
  /* Sized against the cell, not the root, so the whole line scales together
     as the table compresses — the shared rem-based rules don't, which leaves
     the common name larger than the latin one on a tablet. The accession
     keeps the default weight: it identifies the plant, it isn't a subtitle. */
}
.SpeciesName--inline .SpeciesName__common,
.SpeciesName--inline .SpeciesName__accession {
  font-size: 0.9em;
}

/* When the species can be picked up. Sits at the end of the name line at every
   width — including a phone, if it fits — and drops onto its own line whole
   rather than breaking mid-window, which is what the nowrap buys. */
.SpeciesAvailability {
  font-size: 0.9em;
  color: #527070;
  font-style: italic;
  white-space: nowrap;
}

.SpeciesName__latin {
  font-weight: 600;
  font-style: italic;
  color: #1f3d3d;
}

.SpeciesName__common {
  font-size: 0.9rem;
  color: #527070;
}

/* Which size of the plant this line is — only rendered when the stock type
   has more than one, so single-size receipts read exactly as before. */
.SpeciesName__size {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #527070;
}

/* ============================================
   AVAILABILITY
   ============================================ */
.availability-count {
  font-weight: 600;
  font-style: normal;
  color: #1f3d3d;
}

.availability-limited {
  color: rgb(161.6, 110.4, 3.2);
  font-style: italic;
}

/* ============================================
   PRICING TIERS
   ============================================ */
.PricingTiers {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.PricingTier {
  display: flex;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.PricingTier__range {
  color: #527070;
  min-width: 80px;
}

.PricingTier__price {
  font-weight: 600;
  color: #105151;
}

.no-pricing {
  color: #527070;
  font-style: italic;
}

/* ============================================
   QUANTITY INPUT
   ============================================ */
.QuantityInput {
  width: 100%;
  max-width: 120px;
  padding: 0.5rem;
  border: 2px solid #e3dccb;
  border-radius: 4px;
  font-size: 1rem;
  text-align: center;
  background: #fff;
}
.QuantityInput:focus {
  border-color: #105151;
  box-shadow: 0 0 0 3px rgba(16, 81, 81, 0.22);
}
.QuantityInput.input-adjusted {
  border-color: #ca8a04;
  animation: pulse 0.3s ease;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
/* ============================================
   QUANTITY ADJUSTMENT TOAST
   Pops out of the field that was rounded rather than off in a corner —
   quantity_input_controller.js fixes it to the field's edge and picks the
   direction, this only draws it and slides it clear.
   ============================================ */
.QuantityToast {
  position: fixed;
  z-index: 1000;
  max-width: min(20rem, 100vw - 1rem);
  padding: 0.55rem 0.85rem;
  background: rgb(151.5, 103.5, 3);
  color: white;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
  /* The pointer back at the field, tucked under the body so only the tip shows */
  /* Both directions start tucked behind the field and slide out past its edge */
}
.QuantityToast strong {
  display: block;
  font-weight: 600;
}
.QuantityToast span {
  display: block;
  opacity: 0.85;
  font-size: 0.8rem;
}
.QuantityToast::after {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  width: 0.6rem;
  height: 0.6rem;
  margin-left: -0.3rem;
  background: inherit;
  transform: rotate(45deg);
}
.QuantityToast.QuantityToast--below {
  transform: translateY(-0.6rem) scale(0.96);
}
.QuantityToast.QuantityToast--below::after {
  top: -0.2rem;
}
.QuantityToast.QuantityToast--below.is-shown {
  transform: translateY(0.45rem) scale(1);
}
.QuantityToast.QuantityToast--above {
  transform: translateY(0.6rem) scale(0.96);
}
.QuantityToast.QuantityToast--above::after {
  bottom: -0.2rem;
}
.QuantityToast.QuantityToast--above.is-shown {
  transform: translateY(-0.45rem) scale(1);
}
.QuantityToast.is-shown {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .QuantityToast,
  .QuantityToast.is-shown {
    transition: opacity 0.18s ease;
    transform: none;
  }
}
/* Every quantity cell spans its size's price row and the stock row below it, so
   the field sits centred against the pair — prices level with its top edge, the
   inventory count level with its bottom. */
.OrderTable tbody td.col-quantity[rowspan] {
  vertical-align: middle;
  padding: 0.5rem 1rem;
}
.OrderTable tbody td.col-quantity[rowspan] .QuantityInput {
  text-align: right;
  width: 100%;
  max-width: 140px;
  padding: 0.6rem 0.75rem;
  font-size: 1.05rem;
  min-height: 50px;
}

/* ============================================
   SPECIES BLOCKS
   Every species renders the same way whether it offers one size or several: a
   header row carrying the photo, the name stack and the pickup window, then a
   pair of rows per shop-visible size — its prices, then how much of it there
   is — with the quantity field spanning that pair.
   ============================================ */
/* The border lives on the row as well as the cell — under border-collapse a
   `none` on the td alone loses to the tr's solid, drawing a line between the
   header and the sizes it belongs to. */
.OrderTable tbody tr.OrderRow--speciesHeader {
  border-bottom: none;
}
.OrderTable tbody tr.OrderRow--speciesHeader td {
  padding-bottom: 0.15rem;
  border-bottom: none;
}

/* Gutter holding the species info button. It keeps its width when a species has
   no preview to show, so every name in the table starts at the same x. */
.OrderTable thead th.col-info,
.OrderTable tbody td.col-info {
  padding-left: 0.75rem;
  padding-right: 0;
  text-align: center;
  vertical-align: top;
}

/* Block-level rather than inline: an inline button is positioned against the
   cell's own baseline strut, which doesn't track the name cell's font size, so
   the icon drifted off the name as the table shrank. As a block it starts at
   the top of the cell's content box — exactly where the name's first line
   starts — and being one line tall (see .SpeciesInfoBtn-trigger) it centres on
   that line at every width. */
.OrderTable tbody td.col-info .SpeciesInfoBtn {
  display: flex;
  justify-content: center;
  margin-right: 0; /* the column is the spacing now */
}

/* The priced row opens a size and the stock row closes it, so the two sit tight
   against each other and the separators all live on the stock row. */
.OrderTable tbody tr.OrderRow--size {
  border-bottom: none;
}
.OrderTable tbody tr.OrderRow--size td {
  padding-top: 0.2rem;
  padding-bottom: 0.1rem;
}

.OrderTable tbody tr.OrderRow--stock {
  /* Between one size and the next of the same species — lighter than the rule
     that separates species. */
  border-bottom: 1px dotted #e3dccb;
}
.OrderTable tbody tr.OrderRow--stock td {
  padding-top: 0;
  padding-bottom: 0.4rem;
}

/* A block ends on its last stock row, so that row carries the separator
   between species. */
.OrderTable tbody tr.OrderRow--stock:last-child,
.OrderTable tbody tr.OrderRow--stock:has(+ tr.OrderRow--speciesHeader) {
  border-bottom: 1px solid #e3dccb;
}
.OrderTable tbody tr.OrderRow--stock:last-child td,
.OrderTable tbody tr.OrderRow--stock:has(+ tr.OrderRow--speciesHeader) td {
  padding-bottom: 0.75rem;
}

.OrderTable td.col-species--size,
.OrderTable td.col-stock {
  padding-left: 1.25rem;
}

.SizeName {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #527070;
}

/* How much of this size there is, replacing the old Available column: it reads
   under the size's own prices instead of off to the side. */
.OrderTable tbody td.col-stock {
  font-size: 0.85rem;
  color: #527070;
  font-style: italic;
  white-space: nowrap;
}

/* ============================================
   SHARED CUSTOMER SHOP PATTERNS
   Used across the form, review, and confirmation pages.
   ============================================ */
.CustomerShop {
  background: #faf7ee;
  padding: 2rem 1rem;
}

.CustomerShopCard {
  margin: 0 auto;
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============================================
   CUSTOMER FORM SECTION
   ============================================ */
.CustomerFormSection.hidden {
  display: none;
}

.CustomerFormSection__wrapper {
  max-width: 600px;
  margin: 0 auto;
}

.CustomerFormSection__container {
  max-width: 600px;
}
.CustomerFormSection__container h2 {
  margin-top: 0;
  color: #1f3d3d;
}

.CustomerFormSection__subtitle {
  color: #527070;
  margin-bottom: 2rem;
}

.CustomerFormSection__legend {
  display: block;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.CustomerFormSection__mark {
  color: rgb(177, 75.5, 69.5);
}

.BackButton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.CustomerFields {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.Field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Input styles inherited from forms.scss */
}
.Field label {
  font-weight: 600;
  color: #1f3d3d;
  display: block;
  margin: 0;
}
.Field--required label::after {
  content: " *";
  color: rgb(177, 75.5, 69.5);
}

.FieldHint {
  font-size: 0.85rem;
  color: #527070;
  font-style: italic;
}

.SubmitButton {
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.RecaptchaDisclosure {
  font-size: 0.75rem;
  color: #527070;
  margin-top: 0.5rem;
}
.RecaptchaDisclosure a {
  color: inherit;
  text-decoration: underline;
}

.grecaptcha-badge {
  visibility: hidden !important;
}

/* ============================================
   FOOTER - Sticky Bottom Bar
   ============================================ */
.OrderFooter {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 2px solid #e3dccb;
  padding: 0.5rem 1rem;
  z-index: 100;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
.OrderFooter.hidden {
  display: none;
}

.OrderFooter__container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.OrderSummary {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.OrderSummary__quantities {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  font-size: 1.1rem;
  color: #1f3d3d;
}

.QuantitySummary__label {
  font-weight: 600;
  white-space: nowrap;
  margin-right: 0.1rem;
}

.QuantitySummary__item {
  white-space: nowrap;
  font-weight: 600;
}

.QuantitySummary__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.25rem;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.QuantitySummary__empty {
  color: #527070;
  font-style: italic;
}

.OrderSummary__total {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
  white-space: nowrap;
}

.OrderSummary__label {
  color: #1f3d3d;
}

.OrderSummary__amount {
  color: #105151;
}

.CheckoutButton {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================
   CONFIRMATION PAGE
   ============================================ */
.OrderConfirmation {
  min-height: 100vh;
  padding-top: 3rem;
}

.OrderConfirmation__container {
  max-width: 800px;
  padding: 3rem;
}

.OrderConfirmation__icon {
  text-align: center;
  color: #105151;
  margin-bottom: 2rem;
}
.OrderConfirmation__icon svg {
  display: inline-block;
}

.OrderConfirmation__title {
  text-align: center;
  color: #1f3d3d;
  margin-bottom: 2rem;
}

.OrderConfirmation__details {
  text-align: center;
  margin-bottom: 3rem;
}
.OrderConfirmation__details p {
  margin: 1rem 0;
  line-height: 1.6;
}

.OrderConfirmation__number {
  font-size: 1.2rem;
}
.OrderConfirmation__number strong {
  color: #105151;
}

.OrderConfirmation__message {
  font-size: 1.1rem;
  color: #1f3d3d;
}

.OrderConfirmation__notice {
  background: rgb(252.6388349515, 214.8601941748, 135.7611650485);
  border: 1px solid #ca8a04;
  border-radius: 4px;
  padding: 1rem;
  margin: 1.5rem 0;
}
.OrderConfirmation__notice p {
  margin: 0;
  color: rgb(141.4, 96.6, 2.8);
}

.OrderConfirmation__deposit {
  color: #527070;
  font-style: italic;
}

.OrderConfirmation__summary {
  border-top: 2px solid #e3dccb;
  padding-top: 2rem;
}
.OrderConfirmation__summary h2, .OrderConfirmation__summary h3 {
  color: #1f3d3d;
  margin-bottom: 1rem;
}
.OrderConfirmation__summary h3 {
  font-size: 1.2rem;
  margin-top: 2rem;
}

.OrderSummary__contact,
.OrderSummary__notes {
  margin-bottom: 2rem;
}
.OrderSummary__contact p,
.OrderSummary__notes p {
  margin: 0.5rem 0;
  line-height: 1.6;
}

.OrderSummary__items {
  margin-top: 2rem;
}

.ConfirmationTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.ConfirmationTable thead {
  background: #fffdf7;
  border-bottom: 2px solid #e3dccb;
}
.ConfirmationTable thead th {
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
  color: #1f3d3d;
  border: none;
}
.ConfirmationTable thead th.num {
  text-align: right;
}
.ConfirmationTable tbody tr {
  border-bottom: 1px solid #e3dccb;
}
.ConfirmationTable tbody td {
  padding: 0.75rem;
  border: none;
}
.ConfirmationTable tbody td.num {
  text-align: right;
}
.ConfirmationTable tbody td small {
  color: #527070;
  font-style: italic;
}

.OrderConfirmation__actions {
  text-align: center;
  margin-top: 3rem;
}

/* Button classes are defined in forms.scss, we just use them */
/* ============================================
   UTILITY
   ============================================ */
.hidden {
  display: none !important;
}

/* ============================================
   SEASON SELECT PAGE
   ============================================ */
.SeasonSelectPage {
  min-height: 100vh;
  background: #faf7ee;
  padding: 3rem 1rem;
}

.SeasonSelectPage__container {
  max-width: 600px;
  margin: 0 auto;
}

.SeasonSelectPage__logo {
  text-align: center;
  margin-bottom: 2rem;
}

.SeasonSelectPage__header {
  text-align: center;
  margin-bottom: 2rem;
}
.SeasonSelectPage__header h1 {
  margin-bottom: 1rem;
  color: #1f3d3d;
}

.SeasonExplainer {
  background: #fffdf7;
  border-left: 4px solid #105151;
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 4px;
  text-align: left;
}
.SeasonExplainer p {
  margin-bottom: 1rem;
  font-size: 1.05em;
  line-height: 1.6;
  color: #1f3d3d;
}
.SeasonExplainer p:last-child {
  margin-bottom: 0;
}
.SeasonExplainer strong {
  color: #1f3d3d;
}

.SeasonOptions {
  display: flex;
  gap: 1.5rem;
  flex-direction: column;
}

.SeasonCard {
  display: block;
  padding: 2rem;
  border: 2px solid #e3dccb;
  border-radius: 8px;
  text-decoration: none;
  background: #fff;
  transition: all 0.2s ease;
}
.SeasonCard:hover {
  border-color: #105151;
  box-shadow: 0 4px 12px rgba(16, 81, 81, 0.15);
  transform: translateY(-2px);
}

.SeasonCard__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.SeasonCard__info {
  flex: 1;
}

.SeasonCard__title {
  margin: 0 0 0.5rem 0;
  color: #105151;
  font-size: 1.5rem;
}

.SeasonCard__dates {
  margin: 0;
  color: #527070;
  font-size: 0.95em;
}

.SeasonCard__arrow {
  font-size: 1.5rem;
  color: #105151;
}

/* ============================================
   SEASON INFO COMPONENT (in header)
   ============================================ */
.SeasonInfo {
  padding: 0.5rem 1rem;
  background: #fffdf7;
  border-radius: 4px;
  border: 1px solid #e3dccb;
  cursor: default;
}

.SeasonInfo__link {
  text-decoration: none;
  color: #105151;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  transition: color 0.2s ease;
}
.SeasonInfo__link:hover {
  color: rgb(13.6, 68.85, 68.85);
}

.SeasonInfo__arrow {
  display: inline-block;
}

.SeasonInfo__text {
  display: inline-block;
}

/* ============================================
   REVIEW PAGE - STOCK TYPE SECTIONS
   ============================================ */
.ReviewStockTypeSection {
  margin-bottom: 1.5rem;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ReviewStockTypeSection__header {
  padding: 0.6rem 1rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1f3d3d;
  background: #fffdf7;
  border-bottom: 1px solid #e3dccb;
}

.ReviewGrandTotal {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  border-top: 2px solid #e3dccb;
  margin-top: 0.5rem;
}

.ReviewGrandTotal__label {
  color: #1f3d3d;
}

.ReviewGrandTotal__amount {
  color: #105151;
  font-size: 1.3rem;
  font-weight: bold;
}

.OrderConfirmationDisclaimer {
  text-align: right;
  padding: 0 1rem;
  font-size: 1.2rem;
  color: #527070;
}

/* ============================================
   ORDER REVIEW PAGE
   ============================================ */
.OrderReviewPage {
  min-height: 100vh;
}

.OrderReviewPage__container {
  max-width: 900px;
  margin: 0 auto;
}

.OrderReviewPage__title {
  margin-bottom: 2rem;
  color: #1f3d3d;
}

.OrderDetails,
.OrderItemsList,
.ContactInfo {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.OrderDetails__heading,
.OrderItemsList__heading,
.ContactInfo__heading {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  color: #1f3d3d;
}

.OrderDetails__item,
.ContactInfo__item {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.OrderDetails__item:last-child,
.ContactInfo__item:last-child {
  margin-bottom: 0;
}
.OrderDetails__item strong,
.ContactInfo__item strong {
  color: #1f3d3d;
}

.OrderDetails__subtext {
  color: #527070;
  margin-left: 0.5rem;
}

.OrderDetails__notes {
  margin-top: 0.5rem;
  padding: 1rem;
  background: #fffdf7;
  border-radius: 4px;
  border: 1px solid #e3dccb;
}

.ReviewTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
}
.ReviewTable thead {
  background: #fffdf7;
  border-bottom: 2px solid #e3dccb;
}
.ReviewTable thead th {
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
  color: #1f3d3d;
  background-color: unset;
  border: none;
}
.ReviewTable thead th.num {
  text-align: right;
}
.ReviewTable tbody tr {
  border-bottom: 1px solid #e3dccb;
}
.ReviewTable tbody tr:hover {
  background: #fffdf7;
}
.ReviewTable tbody td {
  padding: 0.75rem;
  border: none;
}
.ReviewTable tbody td.num {
  text-align: right;
}
.ReviewTable tfoot {
  border-top: 2px solid #e3dccb;
  background: #fffdf7;
}
.ReviewTable tfoot tr td {
  padding: 1rem 0.75rem;
}

.OrderTotal__label {
  text-align: right;
}

.OrderTotal__amount {
  text-align: right;
  color: #105151;
}

.ConfirmForm {
  text-align: center;
  margin-top: 2rem;
}

.ConfirmButton {
  background: #105151;
  color: white;
  border: none;
  padding: 1rem 3rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

/* ============================================
   CONFIRMATION PAGE ENHANCEMENTS
   ============================================ */
.OrderConfirmation__wantedAt {
  font-size: 1.05rem;
  color: #1f3d3d;
}

.ConfirmationTable tfoot {
  border-top: 2px solid #e3dccb;
  background: #fffdf7;
}
.ConfirmationTable tfoot tr td {
  padding: 1rem 0.75rem;
}

/* ============================================
   RESPONSIVE
   All media queries gathered here so they
   cascade after every base rule above.
   ============================================ */
@media (max-width: 1024px) {
  .OrderTableSection__container, .StockTypeSection {
    overflow-x: auto;
  }
}
@media (min-width: 769px) {
  .OrderHeader__filter {
    flex-direction: row;
    align-items: left;
    justify-content: flex-end;
    gap: 1rem;
  }
}
@media (max-width: 768px) {
  .OrderTableSection {
    padding: 2rem 0;
  }
  .OrderTable .col-info {
    width: 1.5rem;
  }
  .OrderTable thead th.col-info,
  .OrderTable tbody td.col-info {
    padding-left: 0.3rem;
  }
  .OrderHeader__container {
    align-items: center;
    gap: 0.25rem;
  }
  .OrderFooter__container {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .OrderHeader__filter {
    align-items: normal;
  }
  .OrderHeader__filter .SeasonSelector label {
    display: none;
  }
  /* Same panel, re-anchored: a sheet on the bottom edge, where a thumb is,
     instead of a dropdown hanging off a button at the top of the screen. */
  /* The word goes, the funnel stays: it buys the search box a good 60px, which
     is the difference between reading a species name in the field and not.
     Hidden rather than removed so the button keeps its name for a screen
     reader — a bare icon and a count would announce as "1". */
  .FilterButton__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .FilterButton {
    gap: 0.3rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.9rem;
  }
  .FilterPanel {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    max-height: 85vh;
    border-radius: 12px 12px 0 0;
    border-bottom: 0;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
  }
  /* The sheet is taller than it is scrollable in one thumb-swipe, so its way
     out rides along at the top instead of sitting at the end of the list.
     top cancels the negative margin rather than being 0: sticky parks the
     MARGIN box at the offset, so top: 0 would hold the bar a whole 1rem down
     the sheet and let the list scroll through the gap above it. The two must
     move together. */
  .FilterPanel__header {
    display: flex;
    position: sticky;
    top: -1rem;
    z-index: 1;
    margin: -1rem -1rem 0.5rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-bottom: 1px solid #e3dccb;
  }
  .FilterBackdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
  }
  /* The header owns the sheet's stacking context, and it is pinned at the same
     z-index as the totals bar — which, coming later in the document, would
     otherwise paint straight through the sheet sitting over it. */
  body.is-filterSheetOpen {
    overflow: hidden;
  }
  body.is-filterSheetOpen .OrderHeader {
    z-index: 300;
  }
  .OrderSummary {
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem;
  }
  .OrderSummary__quantities {
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: left;
  }
  .OrderSummary__total {
    font-size: 1rem;
  }
  .CheckoutButton {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  .OrderTable {
    min-width: 0px;
    font-size: 0.85rem;
  }
  .OrderTable thead th, .OrderTable tbody td {
    padding: 0.25rem;
    font-size: 0.8rem;
    min-width: 30px;
  }
  .col-species {
    width: auto;
  }
  .OrderTable tbody td.col-quantity[rowspan] {
    padding: 0.25rem;
  }
  .OrderTable tbody td.col-quantity[rowspan] .QuantityInput {
    padding: 0.25rem;
    font-size: 0.8rem;
    min-height: 36px;
  }
  /* The name line is the block's heading — on a phone the whole table drops to
     0.8rem, which flattens it into the prices and stock under it. Sizing the
     cell (not the spans) keeps the common name and pickup window scaling off
     the latin name as one unit. */
  .OrderTable tbody tr.OrderRow--speciesHeader td.col-species {
    font-size: 0.95rem;
  }
  .OrderTable tbody tr.OrderRow--speciesHeader td.col-species .SpeciesAvailability {
    font-size: 0.8em;
  }
  /* The gutter is sized off the names it stands next to, not off the table: the
     info button's box is one text line tall in em, so it only lands centred on
     the name when both cells carry the same font-size. The `tbody td` rule
     above would otherwise drop this cell to 0.8rem on its own. */
  .OrderTable tbody tr.OrderRow--speciesHeader td.col-info {
    font-size: 0.95rem;
  }
  /* Size rows stay tappable on a phone even as the rest of the table shrinks. */
  .OrderTable td.col-species--size,
  .OrderTable td.col-stock {
    padding-left: 0.5rem;
  }
  .SizeName {
    font-size: 0.7rem;
  }
  /* Subordinate to the heading above it, not competing with it. */
  .OrderTable tbody td.col-stock {
    font-size: 0.65rem;
  }
  .QuantityToast {
    font-size: 0.8rem;
    padding: 0.45rem 0.7rem;
  }
  .QuantityToast span {
    font-size: 0.75rem;
  }
  .ReviewTable {
    font-size: 0.85rem;
  }
  .ReviewTable thead th,
  .ReviewTable tbody td,
  .ReviewTable tfoot td {
    padding: 0 0.5rem;
  }
  .OrderTotal,
  .ReviewGrandTotal {
    font-size: 1rem;
  }
  .OrderTotal .OrderTotal__amount,
  .OrderTotal .ReviewGrandTotal__amount,
  .ReviewGrandTotal .OrderTotal__amount,
  .ReviewGrandTotal .ReviewGrandTotal__amount {
    font-size: 1.1rem;
  }
}
@media (max-width: 480px) {
  .OrderTable thead th.col-info,
  .OrderTable tbody td.col-info {
    padding-left: 0.2rem;
  }
  .CustomerShop {
    padding: 0.75rem 0;
  }
  .CustomerShopCard,
  .OrderDetails,
  .OrderItemsList,
  .ContactInfo {
    padding: 0.75rem;
    border-radius: 0;
    margin-bottom: 0.75rem;
  }
  .OrderReviewPage__title {
    margin-bottom: 1rem;
    font-size: 1.3rem;
    padding: 0 0.75rem;
  }
  .BackButton {
    margin-bottom: 1rem;
    margin-left: 0.75rem;
  }
  .ReviewStockTypeSection {
    border-radius: 0;
  }
  .ReviewTable {
    font-size: 0.5rem;
  }
  .ReviewTable thead th,
  .ReviewTable tbody td,
  .ReviewTable tfoot td {
    padding: 0.2rem 0.25rem;
  }
  .OrderTotal,
  .ReviewGrandTotal {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }
  .OrderTotal .OrderTotal__amount,
  .OrderTotal .ReviewGrandTotal__amount,
  .ReviewGrandTotal .OrderTotal__amount,
  .ReviewGrandTotal .ReviewGrandTotal__amount {
    font-size: 0.95rem;
  }
  .ConfirmForm {
    padding: 0 0.75rem;
  }
}
@media (max-width: 464px) {
  .OrderTable thead th,
  .OrderTable tbody td {
    padding: 0.2rem;
  }
  .OrderTable thead th.col-price-tier {
    padding: 0.1rem;
  }
  .OrderForm thead th,
  .OrderForm tbody td,
  .OrderForm .OrderTable thead th.col-price-tier,
  .OrderForm .QuantityInput,
  .ReviewTable thead th,
  .ReviewTable tbody td,
  .ReviewTable .OrderTable thead th.col-price-tier,
  .ReviewTable .QuantityInput {
    font-size: 0.5rem;
  }
  /* The rest of the table compresses to fit its columns; the heading spans the
     full width, so it holds a readable size and carries the hierarchy on its
     own. The common name is left off the list above so it keeps scaling off
     this rather than collapsing to the body size. */
  .OrderTable tbody tr.OrderRow--speciesHeader td.col-species,
  .OrderTable tbody tr.OrderRow--speciesHeader td.col-info {
    font-size: 0.85rem;
  }
  .OrderTable tbody td.col-stock {
    font-size: 0.6rem;
  }
}
.SpeciesInfoBtn {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 0.35rem;
}

.SpeciesInfoBtn-trigger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  font-size: 1em;
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  color: var(--color-primary);
  transition: color 0.12s ease, background-color 0.12s ease;
}
.SpeciesInfoBtn-trigger::after {
  content: "";
  position: absolute;
  inset: -0.4rem;
}
.SpeciesInfoBtn-trigger:hover, .SpeciesInfoBtn-trigger:focus-visible {
  color: var(--color-primary-bright);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.SpeciesInfoBtn-trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.SpeciesInfoBtn-icon {
  display: block;
  width: 1.15em;
  height: 1.15em;
}

.SpeciesInfoDialog {
  border-radius: 8px;
  max-width: min(95vw, 34rem);
}
.SpeciesInfoDialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.SpeciesInfoDialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e3dccb;
  flex-shrink: 0;
  gap: 0.5rem;
}

.SpeciesInfoDialog-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.SpeciesInfoDialog-common {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.SpeciesInfoDialog-latin {
  margin: 0;
  font-size: 0.8rem;
  color: #527070;
}

.SpeciesInfoDialog-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #527070;
  padding: 0 0.4rem 0.25rem;
  flex-shrink: 0;
}
.SpeciesInfoDialog-close:hover {
  color: #1f3d3d;
}

.SpeciesInfoDialog-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overflow-wrap: break-word;
}

.SpeciesInfoDialog-gallery {
  background: #111;
}

.SpeciesInfoDialog-imageWrap {
  position: relative;
}

.SpeciesInfoDialog-image {
  width: 100%;
  max-height: 50vh;
  object-fit: contain;
  display: block;
}

.SpeciesInfoDialog-loading {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
}
.SpeciesInfoDialog-loading.is-loading {
  display: flex;
}
.SpeciesInfoDialog-loading::after {
  content: "";
  width: 2rem;
  height: 2rem;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sid-spin 0.7s linear infinite;
}

@keyframes sid-spin {
  to {
    transform: rotate(360deg);
  }
}
.SpeciesInfoDialog-thumbs {
  display: flex;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  background: #1a1a1a;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.SpeciesInfoDialog-thumb {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
  transition: border-color 0.15s;
}
.SpeciesInfoDialog-thumb img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  display: block;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.SpeciesInfoDialog-thumb:hover img {
  opacity: 0.85;
}
.SpeciesInfoDialog-thumb.is-active {
  border-color: #fff;
}
.SpeciesInfoDialog-thumb.is-active img {
  opacity: 1;
}

.SpeciesInfoDialog-caption {
  padding: 0.5rem 0.75rem;
  margin: 0;
  font-size: 0.8rem;
  color: #bbb;
  min-height: 1.6rem;
}

.SpeciesInfoDialog-text {
  padding: 0.85rem 1.25rem 1.25rem;
}

.SpeciesInfoDialog-description,
.SpeciesInfoDialog-salesNotes {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #1f3d3d;
}
.SpeciesInfoDialog-description p,
.SpeciesInfoDialog-salesNotes p {
  margin: 0 0 0.5em;
}

.SpeciesInfoDialog-salesNotes {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e3dccb;
}

/* app/assets/stylesheets/customer_layout.scss */
/* ============================================
   CUSTOMER LAYOUT FOOTER
   ============================================ */
.CustomerFooter {
  text-align: center;
  padding: 1.5rem 1rem calc(max(2rem, env(safe-area-inset-bottom)) + var(--order-footer-height, 0px));
  color: #527070;
  font-size: 0.8rem;
}

.CustomerFooter__links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.CustomerFooter__links a {
  color: #527070;
  text-decoration: none;
}
.CustomerFooter__links a:hover {
  text-decoration: underline;
}

.CustomerFooter__sep {
  color: #527070;
  opacity: 0.5;
}

.CustomerFooter__brand {
  margin-top: 0.75rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0.5rem 0.9rem 0.15rem;
  color: inherit;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 10px;
  transition: border-color 0.15s ease;
}
.CustomerFooter__brand:hover, .CustomerFooter__brand:focus-visible {
  border-color: #0d6969;
  text-decoration: none;
}

.CustomerFooter__poweredBy {
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #527070;
}

.CustomerFooter__logomark {
  display: block;
  width: 5rem;
  height: auto;
  margin-top: -8px;
}

/* ============================================
   CUSTOMER CONTACT BANNER
   ============================================ */
.CustomerContactBanner {
  text-align: center;
  font-style: italic;
  font-size: 0.95rem;
  color: #527070;
  padding: 0.4rem 1rem;
}
.CustomerContactBanner a {
  color: #527070;
}
.CustomerContactBanner a:hover {
  text-decoration: underline;
}

/* ============================================
   CUSTOMER HEADER (replaces Navbar on customer/session pages)
   ============================================ */
#CustomerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
}

.CustomerHeader__left {
  flex: 1;
}

.CustomerHeader__center {
  flex: 2;
  text-align: center;
}

.CustomerHeader__right {
  flex: 1;
  text-align: right;
  white-space: nowrap;
}

/* Large devices (desktops) */
@media (min-width: 992px) {
  #CustomerHeader {
    padding: 0.5rem 4rem;
  }
}
/* app/assets/stylesheets/public_layout.scss */
/* ============================================
   PUBLIC LAYOUT SHELL

   The untenanted surface (welcome.cropcache.com): a logo, one short panel,
   a footer. No nav, no docks, no tenant chrome.

   Sticky footer — the pages here are a few lines long, so without this the
   copyright floats in the middle of an empty viewport.
   ============================================ */
.PublicBody {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* ============================================
   PUBLIC LAYOUT HEADER
   ============================================ */
.PublicHeader {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem 1rem;
}

.PublicHeader__brand {
  display: inline-block;
  line-height: 0;
}
.PublicHeader__brand:hover {
  text-decoration: none;
}

.PublicHeader__logo {
  display: block;
  width: 100%;
  max-width: 240px;
  max-height: 160px;
  height: auto;
  object-fit: contain;
}

/* ============================================
   PUBLIC MAIN

   The <main> carries id="main-content", which otherwise inherits the ADMIN
   layout rules in application.scss (dock-aware max-width, `margin: 4rem` at
   >=992px). Those assume a signed-in tenant shell and shove this content off
   to the left. The id selector outranks a bare class, so the override has to
   be id-qualified.
   ============================================ */
#main-content.PublicMain {
  flex: 1;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  transition: none;
}

/* ============================================
   PUBLIC PANEL

   The content block on every public page (thanks, error).
   ============================================ */
.PublicPanel {
  background: #fff;
  border: 1px solid #e3dccb;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 2rem 1.75rem;
  text-align: center;
}
.PublicPanel .Button {
  display: inline-block;
  margin-top: 0.5rem;
}

.PublicPanel__heading {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.PublicPanel__lead {
  margin-bottom: 1.25rem;
  color: #1f3d3d;
}
.PublicPanel__lead a {
  overflow-wrap: anywhere;
  text-decoration: underline;
}

.PublicPanel__errors {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  text-align: left;
  background: rgb(240.3, 202.15, 195.85);
  border: 1px solid rgb(177, 75.5, 69.5);
  border-radius: 8px;
  color: #5d091f;
}
.PublicPanel__errors li + li {
  margin-top: 0.35rem;
}

/* ============================================
   PUBLIC SURVEY

   The tokenized pre-account survey. The base panel centers its short thanks
   pages; a form full of questions reads better left-aligned.
   ============================================ */
.PublicPanel--survey {
  text-align: left;
}
.PublicPanel--survey .PublicPanel__heading,
.PublicPanel--survey .PublicPanel__lead {
  text-align: center;
}

.SurveyBanner {
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  background: rgb(227.76, 238.08, 231.48);
  border: 1px solid #1c723b;
  border-radius: 8px;
}
.SurveyBanner strong {
  display: block;
  margin-bottom: 0.25rem;
}

.SurveyQuestions {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.SurveyQuestion {
  padding: 1.25rem 0;
  border-top: 1px solid #e3dccb;
}
.SurveyQuestion--missing {
  border-left: 3px solid rgb(177, 75.5, 69.5);
  padding-left: 0.85rem;
  margin-left: -1rem;
}

.SurveyQuestion__prompt {
  margin: 0 0 0.35rem;
  font-weight: 600;
}

.SurveyQuestion__optional {
  font-weight: 400;
  color: #527070;
  font-size: 0.85em;
}

.SurveyQuestion__hint {
  margin: 0 0 0.5rem;
  color: #527070;
  font-size: 0.9rem;
}

.SurveyQuestion__missingNote {
  margin: 0 0 0.5rem;
  color: #5d091f;
  font-size: 0.9rem;
}

.SurveyQuestion__options {
  list-style: none;
  margin: 0;
  padding: 0;
}

.SurveyQuestion__option label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  cursor: pointer;
}
.SurveyQuestion__option input[type=radio],
.SurveyQuestion__option input[type=checkbox] {
  flex-shrink: 0;
  width: auto;
  padding: 0;
  margin-top: 0;
}

.SurveyQuestion__input,
.SurveyQuestion__textarea {
  width: 100%;
}

.SurveyQuestion__input--detail {
  margin: 0.25rem 0 0.25rem 1.6rem;
  width: calc(100% - 1.6rem);
}

.SurveyFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* ============================================
   PUBLIC FOOTER
   ============================================ */
.PublicFooter {
  padding: 2rem 1.25rem max(1.5rem, env(safe-area-inset-bottom));
  text-align: center;
  color: #527070;
  font-size: 0.8rem;
}

/* Small devices (phones) */
@media (max-width: 767px) {
  .PublicHeader {
    padding: 1.5rem 1rem 0.75rem;
  }
  .PublicHeader__logo {
    max-width: 180px;
    max-height: 120px;
  }
  .PublicPanel {
    padding: 1.5rem 1.25rem;
  }
  .PublicPanel__heading {
    font-size: 1.3rem;
  }
}
/* Short/landscape viewports — reclaim the vertical space the logo eats */
@media (max-height: 480px) {
  .PublicHeader {
    padding: 1rem 1rem 0.5rem;
  }
  .PublicHeader__logo {
    max-width: 150px;
    max-height: 90px;
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: #faf7ee;
  color: #1f3d3d;
  padding: 1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.LatinName {
  font-style: italic;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
}

input, select, textarea {
  max-width: 100%;
}

.table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.CallLink {
  text-decoration: none;
  margin-left: 0.25rem;
}

@media (max-width: 767px) {
  .HideOnMobile {
    display: none !important;
  }
  .RowEditBox {
    float: none;
    width: 100%;
    max-width: 100%;
  }
}
section {
  margin-top: 1rem;
}

fieldset {
  padding: 1rem;
}

a {
  color: #105151;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  color: #105151;
  margin-bottom: 0.5rem;
}

.PageHeader {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 1rem;
}

.PageHeader h1 {
  margin: 0;
}

.PageHeaderActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.SettingsLink {
  font-size: 1.5rem;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.SettingsLink:hover {
  opacity: 1;
}

hr.dotted {
  border-top: 2px dotted var(--color-border);
}

hr.dashed {
  border: 0;
  border-top: 2px solid transparent;
  border-image: repeating-linear-gradient(to right, var(--color-border) 0 20px, transparent 20px 40px) 100% 1;
}

hr.dashed.light {
  border: 0;
  border-top: 2px solid transparent;
  border-image: repeating-linear-gradient(to right, var(--color-bg-light) 0 20px, transparent 20px 40px) 100% 1;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.BoxContainer {
  background-color: #faf7ee;
  border: 1px solid #e3dccb;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  color: #1f3d3d;
  margin-bottom: 2rem;
  max-width: 800px;
}
.BoxContainer.Accent {
  background-color: #caf35b;
  color: #1f3d3d;
}
.BoxContainer.Primary {
  background-color: #105151;
  color: #ffffff;
}
.BoxContainer.Small {
  padding: 0.1rem 0.6rem;
  margin-bottom: 0.1rem;
}
.BoxContainer.HoverGlow:hover {
  border: 1px solid #ffffff;
}

.BoxContainer.Light {
  background-color: rgb(19.7361702128, 165.7838297872, 165.7838297872);
}

.BoxContainer.Dark {
  background-color: #ece5d3;
}

.MediumContentContainer {
  max-width: 800px;
}

#main-content {
  margin: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  max-width: var(--main-content-width-when-dock-closed);
  transition: max-width var(--dock-transition-duration) var(--dock-transition-ease), margin-left var(--dock-transition-duration) var(--dock-transition-ease), margin-right var(--dock-transition-duration) var(--dock-transition-ease);
  will-change: max-width, margin-left, margin-right; /* hint for smoother anims */
}

#main-content.UserSignedIn {
  margin: calc(var(--app-header-height) + 1rem) 1rem 0 1rem;
}

html.sale-dock-open #main-content.UserSignedIn {
  max-width: var(--main-content-width-when-dock-open);
  margin-left: 0.5rem;
  margin-right: auto;
  overflow: auto;
}

/* Notification dock pushes main content right (desktop only) */
@media (min-width: 768px) {
  html.notification-dock-open #main-content.UserSignedIn {
    margin-left: calc(var(--notif-dock-width) + 0.5rem);
  }
}
/* Wide screens (≥1280px): true 3-column when both docks open */
@media (min-width: 1280px) {
  html.notification-dock-open.sale-dock-open #main-content.UserSignedIn {
    margin-left: calc(var(--notif-dock-width) + 0.5rem);
    max-width: calc(100vw - var(--notif-dock-width) - var(--dock-width-closed) - 1rem);
  }
}
/* kill transitions while we hydrate */
html.no-transition #main-content,
html.no-transition #SaleDock,
html.no-transition #NotificationDock {
  transition: none !important;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  #main-content, #SaleDock {
    transition: none !important;
  }
}
/* Print: lock the layout, no animations */
@media print {
  #main-content {
    max-width: var(--main-content-width-when-dock-open);
    margin-left: 0.5rem;
    margin-right: auto;
    transition: none !important;
  }
}
/* Small devices (phones) */
@media (max-width: 767px) {
  body {
    padding: 0;
  }
}
/* Medium devices (tablets) */
/* Large devices (desktops) */
@media (min-width: 992px) {
  #main-content {
    margin: 4rem 4rem 0 4rem;
  }
}
.Hidden {
  display: none;
}

/* Inline "show more" for a long string, built on <details> so it needs no JS
   and survives arriving by turbo stream (the jQuery-bound .Voggle toggles do
   not).

   Both lengths live inside the <summary> and swap on [open]. The obvious
   shape — short text in the summary, the rest as the details' content — cannot
   put the toggle after the text it opens, and laying the element out as a
   reversed flex column to fix that breaks the closed state: a <details> with
   `display: flex` stops hiding its content in Chrome. With nothing outside the
   summary there is nothing to hide, so this one lays out however it likes. */
.TruncatedDisclosure {
  display: inline;
}
.TruncatedDisclosure > summary {
  display: inline;
  cursor: pointer;
  list-style: none;
}
.TruncatedDisclosure > summary::-webkit-details-marker {
  display: none;
}
.TruncatedDisclosure .TruncatedDisclosure__full {
  display: none;
}
.TruncatedDisclosure[open] .TruncatedDisclosure__head {
  display: none;
}
.TruncatedDisclosure[open] .TruncatedDisclosure__full {
  display: inline;
}
.TruncatedDisclosure[open] .TruncatedDisclosure__toggle::after {
  content: "show less";
}
.TruncatedDisclosure .TruncatedDisclosure__toggle {
  white-space: nowrap;
  text-decoration: underline;
  opacity: 0.8;
}
.TruncatedDisclosure .TruncatedDisclosure__toggle::after {
  content: "show more";
}

.FloatLeft {
  float: left;
}

.FloatRight {
  float: right;
}

.AlignLeft {
  text-align: left;
}

.AlignRight {
  text-align: right;
}

.Center {
  text-align: center;
}

.NoWrap {
  white-space: nowrap;
}

.FullWidth {
  width: 100%;
  max-width: 100%;
}

.Pointer {
  cursor: pointer;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.hint {
  font-size: 0.8rem;
  color: var(--color-text-faint);
}

.LeftBorder {
  border-left: 2px dashed #e3dccb;
  padding-left: 0.5rem;
}

.NoBorder {
  border: none;
}

.Warning {
  color: var(--color-warning);
}

.Margin {
  margin: 1rem;
}

.MarginSmall {
  margin: 0.5rem;
}

.MarginLarge {
  margin: 2rem;
}

.MarginTop {
  margin-top: 1rem;
}

.MarginTopSmall {
  margin-top: 0.5rem;
}

.MarginTopLarge {
  margin-top: 2rem;
}

.MarginRight {
  margin-right: 1rem;
}

.MarginRightSmall {
  margin-right: 0.5rem;
}

.MarginRightLarge {
  margin-right: 2rem;
}

.MarginBottom {
  margin-bottom: 1rem;
}

.MarginBottomSmall {
  margin-bottom: 0.5rem;
}

.MarginBottomLarge {
  margin-bottom: 2rem;
}

.MarginLeft {
  margin-left: 1rem;
}

.MarginLeftSmall {
  margin-left: 0.5rem;
}

.MarginLeftLarge {
  margin-left: 2rem;
}

.CancelEditButton {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}
.CancelEditButton:hover {
  opacity: 0.7;
}

.DemoText {
  color: var(--color-warning);
  font-weight: normal;
}

.DemoTextPillContainer {
  padding: 2px 4px;
  border-radius: 12px;
  background-color: var(--color-warning-light);
  text-align: center;
  width: 5rem;
}
.DemoTextPillContainer .DemoText {
  font-weight: bold;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}

.ClickToCopy {
  cursor: pointer;
}

.ClickToCopy:hover {
  opacity: 0.8;
}

.ShowOnParentHover {
  visibility: hidden;
}

.ShowOnParentHoverParent:hover .ShowOnParentHover {
  visibility: visible;
}

.PermissionIcons, .NoteIcon {
  cursor: default;
}

.DeleteButtonForm {
  display: inline;
}

.DeleteButtonIcon {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.2rem;
  color: rgb(177, 75.5, 69.5);
  cursor: pointer;
  text-decoration: none;
}
.DeleteButtonIcon:hover {
  text-decoration: underline;
  color: #5d091f;
}

.IconButton {
  position: relative;
  top: -5px;
  display: inline-flex;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  padding: 0rem;
  padding-top: 2px;
  border: 1px solid #e3dccb;
  background: #fff;
  cursor: pointer;
  line-height: 1;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.IconButton--danger {
  background: rgb(240.3, 202.15, 195.85);
  border-color: rgb(227.7, 192.175, 190.075);
  color: #5d091f;
}

.IconButton--danger:hover {
  background: rgb(240.96, 222.69, 221.61);
}

.IconButton--danger:focus-visible {
  outline: 2px solid rgb(177, 75.5, 69.5);
  outline-offset: 2px;
}

.FlashOnce {
  animation: flash-bg 1.2s ease-in-out;
}

@keyframes flash-bg {
  0% {
    background-color: rgb(236.45, 250.8, 197.6);
  }
  50% {
    background-color: rgb(220.55, 247.2, 148.4);
  }
  100% {
    background-color: transparent;
  }
}
.StagingHint {
  margin-top: 1.25rem;
  text-align: left;
  background: rgb(235.88, 241.08, 241.08);
  border: 1px dashed rgb(142.6, 164.4, 154.2);
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
}
.StagingHint p {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  color: #1f3d3d;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.StagingHint .EnvBadge {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: #105151;
  line-height: 1;
}

.StagingHintList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
}
.StagingHintList li {
  display: block;
}
.StagingHintList code {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.5rem;
  border: 1px solid #e3dccb;
  border-radius: 0.375rem;
  background: #fffdf7;
  color: #1f3d3d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  user-select: all;
  overflow-x: auto;
  white-space: nowrap;
}
.StagingHintList code:hover {
  border-color: rgb(216.29, 206.6125, 183.11);
}

.ResultItem {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #e3dccb;
  transition: background-color 0.15s ease;
}

.ResultItem:hover {
  background-color: #fffdf7;
}

.ResultItem:last-child {
  border-bottom: none;
}

.ResultItem__primary {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #1f3d3d;
  margin-bottom: 0.25rem;
}

.ResultItem__primary strong {
  font-weight: 600;
}

.ResultItem__secondary {
  font-size: 0.85rem;
  line-height: 1.3;
  color: #527070;
}

/* Optional: Add a subtle highlight on focus for accessibility */
.ResultItem:focus {
  outline: 2px solid #105151;
  outline-offset: -2px;
  background-color: rgba(16, 81, 81, 0.08);
}