/* ===========================================================================
   JV Pharma Rep Catalogue — components.
   The contract is handoff/design/components.md; the exact values come from
   handoff/design/artboards/Main.dc.html.

   Shared by the PHP pages and the catalogue app, so a button is the same
   button everywhere. Tokens live in tokens.css and nothing here invents a
   colour.
   =========================================================================== */

/* ---------------------------------------------------------------- layout -- */

.wrap        { max-width: 460px;  margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); }
.wrap.wide   { max-width: 1160px; }
.wrap.full   { max-width: 1440px; }

.stack       { display: flex; flex-direction: column; gap: var(--space-4); }
.row         { display: flex; align-items: center; gap: var(--space-3); }
.row.wrap-row{ flex-wrap: wrap; }
.spacer      { flex: 1 1 auto; }

/* ------------------------------------------------------------------ type -- */

h1, h2, h3, .h1, .h2, .h3 { font-family: var(--font-brand); font-weight: 600; margin: 0; letter-spacing: -0.015em; }
h1, .h1 { font-size: 29px; line-height: 32px; }
h2, .h2 { font-size: 22px; line-height: 26px; }
h3, .h3 { font-size: 17px; line-height: 21px; letter-spacing: 0; }

.eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted);
}
.hint      { color: var(--ink-muted); font-size: 13px; margin: 0; }
.subtitle  { color: var(--ink-muted); font-size: 12px; line-height: 17px; }
.figure-lg { font-size: 26px; line-height: 27px; font-weight: 600; letter-spacing: -0.02em; }
.figure-md { font-size: 15px; font-weight: 600; }

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 44px; padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--navy); color: #FFFFFF;
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn:hover              { background: var(--navy-deep); color: #FFFFFF; }
.btn:active             { background: var(--navy-pressed); }
.btn[disabled],
.btn.is-disabled        { background: var(--disabled-bg); color: var(--disabled-ink);
                          border-color: transparent; cursor: not-allowed; }

.btn.secondary          { background: var(--surface); color: var(--ink); border-color: var(--field-border); }
.btn.secondary:hover    { background: var(--surface-sunken); border-color: var(--ink-muted); color: var(--ink); }
.btn.secondary:active   { background: #DEDEDE; }
.btn.secondary[disabled]{ background: transparent; border-color: var(--rule-strong); color: var(--disabled-ink); }

.btn.ghost              { background: transparent; color: var(--navy); border-color: transparent; }
.btn.ghost:hover        { background: var(--blue-wash); color: var(--navy); }
.btn.ghost:active       { background: #C9E7F7; }
.btn.ghost[disabled]    { background: transparent; color: var(--disabled-ink); }

/* A filled destructive button belongs only inside a confirmation dialog. On a
   row or a bulk bar, destructive actions are outlined. */
.btn.danger             { background: var(--red); color: #FFFFFF; border-color: transparent; }
.btn.danger:hover       { background: var(--red-deepest); color: #FFFFFF; }
.btn.danger:active      { background: #6E1D20; }
.btn.danger-outline     { background: transparent; color: var(--red-deep); border-color: var(--red-deep); }
.btn.danger-outline:hover { background: var(--red-wash); color: var(--red-deepest); }

.btn.lg                 { height: 52px; font-size: 15px; }      /* phone primary */
.btn.sm                 { height: 36px; padding: 0 var(--space-3); font-size: 14px; } /* desktop toolbar */
.btn.block              { width: 100%; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid var(--field-border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink);
}
.icon-btn:hover         { background: var(--surface-sunken); border-color: var(--ink-muted); }
.icon-btn.bare          { border-color: transparent; background: transparent; }
.icon-btn.bare:hover    { background: var(--surface-shade); }
.icon-btn.sm            { width: 36px; height: 36px; }

/* ---------------------------------------------------------------- fields -- */

.field        { display: block; margin-bottom: var(--space-4); }
.field > label,
label.label   { display: block; font-size: 13px; font-weight: 600; margin-bottom: var(--space-1); color: var(--ink); }
/* A hint sits between the label and the control, never below it. */
.field-hint   { display: block; font-size: 12px; color: var(--ink-muted); margin-bottom: var(--space-2); }

/* `input:not([type])` matters: an input with no type attribute defaults to text
   but is NOT matched by input[type=text], so it would otherwise get no styling
   at all and blow out its container. */
input:not([type]), input[type=text], input[type=password], input[type=email],
input[type=search], input[type=number], input[type=date], input[type=tel],
select, textarea {
  width: 100%; height: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--field-border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink); font-size: 16px;
}
textarea { height: auto; min-height: 88px; padding: var(--space-3); line-height: 1.5; }
select   { appearance: none; padding-right: var(--space-6);
           background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%231D1D1B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
           background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; }

input:not([type]):hover, input[type]:not([type=checkbox]):not([type=radio]):not([type=file]):hover,
select:hover, textarea:hover { border-color: #5E5747; }
input:not([type]):focus, input[type]:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
select:focus, textarea:focus { border-color: var(--navy); }

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"],
.field.is-error input, .field.is-error select, .field.is-error textarea {
  border: 1.5px solid var(--red); background: var(--red-wash-faint);
}
/* Disabled is dashed, so it reads at a glance rather than by tone alone. */
input[disabled], select[disabled], textarea[disabled] {
  border: 1px dashed var(--field-disabled); background: var(--surface-sunken);
  color: var(--disabled-ink); cursor: not-allowed;
}

.field-error {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--red-deep);
}

/* The icon is positioned against THIS box, so nothing else may add padding to
   it. A wrapper that needs padding gets its own element around this one:
   an absolutely positioned child measures from the padding edge, so a padded
   .search would put the icon on the input's border rather than inside it. */
.search {
  position: relative; display: block; width: 100%;
}
.search .search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; color: var(--ink-muted); pointer-events: none;
}
.search input  { height: 48px; padding-left: 44px; padding-right: 44px; }
.search .clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--ink-muted);
}
.search input::-webkit-search-cancel-button { display: none; }

/* checkbox and toggle ------------------------------------------------------ */

.check { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.check input[type=checkbox], .check input[type=radio] {
  width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--navy);
}

.toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.toggle .track {
  display: block; width: 46px; height: 26px; border-radius: 13px;
  background: var(--surface-sunken); border: 1px solid var(--field-border);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.toggle .knob {
  position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--field-border); transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.toggle input:checked ~ .track { background: var(--navy); border-color: var(--navy); }
.toggle input:checked ~ .knob  { transform: translateX(20px); background: #FFFFFF; }
.toggle input:focus-visible ~ .track { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.toggle input[disabled] ~ .track { border-style: dashed; background: var(--surface-sunken); cursor: not-allowed; }
.toggle input[disabled] ~ .knob  { background: var(--field-disabled); }
/* A switch that departs from its role default. */
.toggle.changed input:checked ~ .track { background: var(--red-deep); border-color: var(--red-deep); }
.toggle.changed .knob                  { background: var(--red-deep); }

/* ----------------------------------------------------------------- pills -- */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 var(--space-2);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pill .dot      { width: 6px; height: 6px; border-radius: 50%; background: var(--jv-grey); }
.pill .micro    { font-weight: 500; letter-spacing: 0.04em; opacity: 0.8; }

.pill.bonus     { background: var(--blue-wash); color: var(--navy); }
.pill.fridge    { background: var(--blue-wash); color: var(--navy); }
.pill.offer     { background: var(--red); color: #FFFFFF; font-weight: 700; }
.pill.hidden    { background: var(--surface-sunken); color: var(--ink-secondary); }
.pill.draft     { background: var(--surface); border-color: var(--rule-strong); color: var(--ink-secondary); }
.pill.neutral   { background: var(--surface-sunken); border-color: var(--rule-strong); color: var(--ink-secondary); }

/* The four expiry bands. Healthy is the absence of colour, so red always
   means work. Urgency is intensity, not hue. */
.pill.exp-none,
.pill.exp-ok          { background: var(--surface-sunken); border-color: var(--rule-strong); color: var(--ink-secondary); }
.pill.exp-approaching { background: var(--red-wash); color: var(--red-deep); }
.pill.exp-approaching .dot { background: var(--red-deep); }
.pill.exp-short       { background: var(--red-wash); border-color: var(--red); color: var(--red-deep); font-weight: 700; }
.pill.exp-short .dot  { background: var(--red-deep); }
.pill.exp-expired     { background: var(--red); color: #FFFFFF; font-weight: 700; }
.pill.exp-expired .dot{ background: #FFFFFF; }

.role-pill { height: 22px; font-size: 11.5px; letter-spacing: 0.02em; }
.role-pill.admin   { background: var(--navy); color: #FFFFFF; }
.role-pill.manager { background: var(--blue-wash); color: var(--navy); }
.role-pill.rep     { background: var(--surface-sunken); color: var(--ink-secondary); }

/* ----------------------------------------------------------------- cards -- */
/* Elevation is a hairline. Cards are white on white. No shadows, anywhere. */

.panel {
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md); padding: var(--space-5);
}
.panel + .panel { margin-top: var(--space-4); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between;
              gap: var(--space-3); margin-bottom: var(--space-2); }

.card {
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md); overflow: hidden;
}
.card.selected { border-color: var(--navy); background: var(--blue-wash); }
.card.hidden-row { background: var(--surface-sunken); }

.card-body     { padding: 14px 14px 0; }
.card-identity { display: flex; gap: var(--space-3); }
.card-thumb {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 4px;
  background: var(--surface-sunken); border: 1px solid var(--rule-strong);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-name  { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex-grow: 1; }
.card-meta  { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-muted); }
.card-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--jv-grey); }

/* Retail is ink, not red. Red carries urgency; a red price reads as a state
   the rep has to decode. */
.card-retail { display: flex; align-items: baseline; justify-content: flex-end;
               gap: var(--space-2); margin-top: 10px; }
.card-retail .was { font-size: 12px; color: var(--ink-muted); text-decoration: line-through; }
.card-retail .per { font-size: 12px; color: var(--ink-muted); }

/* The internal strip. One contiguous band, so the three sensitive permissions
   can remove it without leaving a hole. */
.strip {
  display: flex; align-items: stretch; margin: var(--space-3) -14px 0;
  padding: 9px 14px; background: var(--surface-sunken);
  border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong);
}
.strip-cell  { display: flex; flex-direction: column; gap: 1px; flex-grow: 1; min-width: 0; }
.strip-cell:last-of-type { align-items: flex-end; flex-grow: 0; }
.strip-rule  { width: 1px; background: var(--rule-strong); margin: 0 var(--space-3); }
.strip-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
               text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.strip-value { font-size: 15px; font-weight: 600; color: var(--ink); }
/* Markup is the only number that ever takes colour, and only when it is thin. */
.strip-value.thin { color: var(--red-deep); }

.card-status { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 10px 14px; }

/* ----------------------------------------------------------------- table -- */

.table-wrap { border: 1px solid var(--rule-strong); border-radius: var(--radius-md); overflow: hidden; }
table       { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-sunken); text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); padding: 10px var(--space-3); white-space: nowrap;
  border-bottom: 1px solid var(--rule-strong);
}
tbody td    { padding: 10px var(--space-3); border-bottom: 1px solid var(--rule); height: 52px; vertical-align: middle; }
/* The product name takes whatever is left; everything else is only as wide as
   its content needs. */
td.col-name, th.col-name { width: 100%; min-width: 220px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td      { background: var(--surface-shade); }
/* Row tint carries the state; there is no separate status column for it. */
tbody tr.selected td   { background: var(--blue-wash); }
tbody tr.expired td    { background: var(--red-wash-faint); }
tbody tr.hidden-row td { background: var(--surface-sunken); color: var(--ink-muted); }
tbody tr.locked td     { background: var(--red-wash-faint); }
tbody tr.changed td    { background: var(--red-wash-faint); }
/* A price that wraps onto two lines is unreadable and breaks the column
   alignment reps scan by, so numbers never wrap. */
.num-cell   { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody td.num, thead th.num-cell { white-space: nowrap; }
.absent     { color: var(--jv-grey); }

/* --------------------------------------------------------------- banners -- */
/* A banner is a condition that stays true until somebody acts. */

.banner {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  border: 1px solid var(--blue-wash-line); border-radius: var(--radius-md);
  background: var(--blue-wash); color: var(--navy); font-size: 14px;
}
.banner .banner-body   { flex-grow: 1; min-width: 0; }
.banner strong         { display: block; font-weight: 600; }
.banner.alert          { background: var(--red-wash); border-color: var(--red-wash-line); color: var(--red-deepest); }
.banner.quiet          { background: var(--surface-sunken); border-color: var(--rule-strong); color: var(--ink-secondary); }

/* A toast is something that already happened. */
.toast-rail {
  position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%);
  z-index: 60; display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--ink); color: #FFFFFF; font-size: 14px; font-weight: 500;
  max-width: min(92vw, 520px); pointer-events: auto;
}
.toast.alert { background: var(--red-deepest); }

/* ---------------------------------------------------------------- modals -- */

.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(29, 29, 27, 0.48);
  display: flex; align-items: center; justify-content: center; padding: var(--space-4);
}
.modal {
  background: var(--surface); border-radius: var(--radius-lg);
  width: 100%; max-width: 560px; max-height: calc(100vh - var(--space-7));
  display: flex; flex-direction: column; overflow: hidden;
}
.modal.wide   { max-width: 920px; }
.modal-head   { padding: var(--space-5) var(--space-5) var(--space-3); }
.modal-body   { padding: 0 var(--space-5) var(--space-5); overflow: auto; }
/* The safe option sits on the left, so the pointer never crosses the dangerous
   one on its way to Cancel. */
.modal-actions{
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--rule); background: var(--surface);
}
.modal-actions .spacer { flex: 1 1 auto; }
.modal.danger { border: 2px solid var(--red); }

/* ----------------------------------------------------------------- misc --- */

.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; margin: var(--space-3) 0; }
.codes span {
  background: var(--surface-sunken); border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm); padding: 9px; text-align: center;
  font-family: ui-monospace, Menlo, monospace; font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 var(--space-5) 40px; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: #FFFFFF; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.otp {
  width: 100%; max-width: 100%;
  font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums;
  font-size: 26px; letter-spacing: 0.35em; text-align: center; height: 56px;
}

.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-8) var(--space-5); text-align: center; color: var(--ink-muted);
}
.empty h3 { color: var(--ink); }

/* Skeletons fade down the list and cross-fade to content. No shimmer, no spinner. */
.skeleton { background: var(--surface-sunken); border-radius: var(--radius-sm); }
.skeleton-card { height: 148px; border: 1px solid var(--rule); border-radius: var(--radius-md); }
.skeleton-list > * + * { margin-top: 10px; }
.skeleton-list > :nth-child(2) { opacity: 0.75; }
.skeleton-list > :nth-child(3) { opacity: 0.5; }
.skeleton-list > :nth-child(4) { opacity: 0.3; }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-5) 0; }
code { background: var(--surface-sunken); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 13px; }

/* ------------------------------------------------------------- app chrome -- */

.appbar {
  display: flex; align-items: center; gap: var(--space-3);
  height: 56px; padding: 0 var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--rule);
}
.appbar .logo   { height: 34px; width: auto; display: block; }
.appbar .glyph  { height: 18px; width: 25px; display: block; flex-shrink: 0; }
.appbar .title  {
  font-family: var(--font-brand); font-size: 18px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.tabs       { display: flex; gap: 0; border-bottom: 1px solid var(--rule-strong); overflow-x: auto; }
.tabs button{
  height: 44px; padding: 0 2px; margin-right: 20px; flex-shrink: 0;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  font-family: var(--font-brand); font-size: 16px; font-weight: 500; color: var(--ink-muted);
}
.tabs button[aria-selected="true"] { border-bottom-color: var(--ink); color: var(--ink); font-weight: 600; }

.chips      { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 13px; flex-shrink: 0;
  border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); font-size: 14px; font-weight: 500;
}
.chip .count { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.chip:hover  { background: var(--surface-shade); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #FFFFFF; font-weight: 600; }
.chip[aria-pressed="true"] .count { color: #FFFFFF; opacity: 0.75; }

/* The bulk bar replaces the toolbar entirely, so the screen is unmistakably in
   a different mode. It never sits beside it. */
.bulkbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--ink); color: #FFFFFF;
}
.bulkbar .count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 26px; padding: 0 var(--space-2); border-radius: var(--radius-sm);
  background: var(--navy); font-weight: 700; font-variant-numeric: tabular-nums;
}
.bulkbar .btn.ghost        { color: #FFFFFF; }
.bulkbar .btn.ghost:hover  { background: rgba(255,255,255,0.12); color: #FFFFFF; }
.bulkbar .btn.danger-outline       { color: #E79A9D; border-color: #B5565A; background: transparent; }
.bulkbar .btn.danger-outline:hover { background: rgba(207,54,59,0.18); color: #FFFFFF; }

/* ---------------------------------------------------------------- print --- */

@media print {
  .no-print { display: none !important; }
  body { background: #FFFFFF; }
  .card, .panel, .table-wrap { border-color: #D8D8D8; }
  a[href]::after { content: none; }
}

/* The base32 enrolment key. Long, monospaced, and typed by hand from a phone,
   so it wraps rather than pushing the page sideways. */
.secret-key {
  display: inline-block; max-width: 100%;
  font-family: ui-monospace, Menlo, monospace; font-size: 16px; letter-spacing: 0.06em;
  background: var(--surface-sunken); border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm); padding: 10px 12px;
  overflow-wrap: anywhere; word-break: break-word;
}

@media (max-width: 560px) {
  .steps li      { padding-left: 34px; }
  .steps li::before { width: 24px; height: 24px; font-size: 12px; }
  h1, .h1        { font-size: 25px; line-height: 29px; }
  .wrap, .wrap.wide, .wrap.full { padding-left: 0; padding-right: 0; }
}

/* ------------------------------------------------ the permission switch -- */

.perm-row { padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.perm-row:last-child { border-bottom: 0; }
/* A value that departs from its role default is tinted, so the exceptions read
   down the left edge without anyone hunting for them. */
/* A rule, not a shadow: elevation is a hairline everywhere in this system. */
.perm-row.is-changed {
  background: var(--red-wash-faint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-left: 3px solid var(--red);
  padding-left: calc(var(--space-3) - 3px); padding-right: var(--space-3);
}
.confirm-strip {
  display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap;
  margin: var(--space-3) 0 0 0; padding: var(--space-3);
  border: 1px solid var(--red); border-radius: var(--radius-sm); background: var(--red-wash);
  color: var(--red-deepest); font-size: 13px;
}
.confirm-strip .eyebrow { margin-left: auto; white-space: nowrap; }

.action-card {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 236px; max-width: 300px;
  padding: var(--space-3); border: 1px solid var(--rule-strong); border-radius: var(--radius-md);
}
.action-card .btn { align-self: flex-start; }

/* What the markup is OF, and whose it is. A bare percentage tells a rep
   nothing they can say out loud to a pharmacist.

   width, NOT flex-basis: this band runs as a row on a list card and as a
   column on a grid card, and in a column container flex-basis resolves against
   the HEIGHT, which laid the note out beside the card instead of inside it. */
.strip-note {
  width: 100%; flex: 0 0 auto; order: 99;
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--rule-strong);
  font-size: 11.5px; line-height: 15px; color: var(--ink-muted);
}
.strip { flex-wrap: wrap; }