/*
 * LINEHOUND app shell -- docs/DESIGN_SYSTEM.md section 3 (the shell) and
 * section 7 (phone rules). Chrome-owned, CHR-5: the wrapper, the top
 * strip / phone sport row, page-level gutters, the section-head meta
 * fix, the shared footer's phone layout, and the neutral gate/view-error
 * baseline.
 *
 * Per-screen composition (Gameday, Bet Check, Game View) lives in
 * screens.css, owned by other groups. Nothing here re-declares a token,
 * and nothing outside the sections named above is touched by this pass
 * (tracks 2 pages -- Odds, My Bets, Signin, Support, Billing, Signup --
 * keep the layouts and tokens they had; docs/DESIGN_SYSTEM.md's R6 keeps
 * those out of scope for this build wave).
 *
 * MARKUP (web/index.html, chrome-owned, verified against the file):
 *   <div class="shell">
 *     <nav class="rail" data-hook="primary-nav">...</nav>            (nav.css)
 *     <div class="shell__column">
 *       <header class="topstrip" data-hook="topstrip">
 *         <a class="topstrip__home" href="landing.html">
 *           <span class="hound">...</span>
 *           <span class="topstrip__wordmark">LINEHOUND</span>
 *         </a>
 *         <span class="topstrip__rule"></span>
 *         <div data-hook="sport-level-host"></div>
 *         <span class="topstrip__rule topstrip__rule--wide"></span>
 *         <time class="topstrip__clock" data-hook="shell-clock"></time>
 *       </header>
 *       <div data-hook="news-host"></div>                            (news.js)
 *       <main class="outlet" data-hook="app-outlet"></main>
 *       <div class="footer-host" data-hook="disclaimer-host"></div>
 *     </div>
 *     <nav class="tabbar" data-hook="primary-nav-mobile">...</nav>   (nav.css)
 *   </div>
 *
 * ONE HOST, CSS-REPOSITIONED (docs/DESIGN_SYSTEM.md section 3: "One host
 * element renders the sport-level content... a single renderSportLevel
 * mount, not two" -- confirmed: sport.js's renderSportLevel takes one
 * `host` and builds tabs + its own internal spacer + the coming-soon
 * links inside one `.sportlevel` component; index.html mounts it at the
 * single `[data-hook="sport-level-host"]` below). No `.topstrip__spacer`
 * element exists either -- the host's own `flex: 1` here does that job. */

/* ---- wrapper --------------------------------------------------------*/
.shell {
  position: relative;      /* the rail is absolute INSIDE this, never fixed */
  min-height: 100vh;
  background: var(--ground);
}
.shell__column {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@media (min-width: 900px) {
  .shell__column { margin-left: var(--rail-width); }
}
@media (max-width: 899px) {
  /* "Page content is padded by the bar height plus 16px"
     (docs/DESIGN_SYSTEM.md section 3) -- plus the home-indicator inset,
     since the tab bar reports its own height including it. */
  .shell__column {
    padding-bottom: calc(var(--tabbar-height) + 16px
                         + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- top strip --------------------------------------------------------
   Desktop (>=900px): 64px, --panel-3, a 1px --edge line below. Left to
   right: mark+wordmark, a rule, the sport-level host (tabs ... a flex
   spacer ... coming-soon links, all inside .sportlevel), a second rule,
   the clock (hidden 900-1199px, shown again at 1200px+).
   Phone (<900px): not sticky. Two rows in ONE flex container, forced
   onto separate lines by giving the sport-level host `flex-basis: 100%`
   (a plain CSS-only two-row wrap, no grid, no second mount): row 1
   (56px) is the mark+wordmark, no clock; row 2 (44px, 16px gutters) is
   the sport-level host -- every live sport's tab, at every width (see
   the note where the old under-400px rule was). ---------------------*/
.topstrip {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-height); /* 64px */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
  padding: 0 var(--gutter-desktop);
  background: var(--panel-3);
  box-shadow: inset 0 -1px 0 0 var(--edge);
}
.topstrip__home {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
}
.topstrip__wordmark {
  font-family: var(--font-display);
  font-style: italic; /* italic survives only in the wordmark (section 2) */
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--text-hi);
}
.topstrip__rule {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--edge);
}
.topstrip__rule--wide { display: none; }
@media (min-width: 1200px) {
  .topstrip__rule--wide { display: block; }
}
.topstrip__clock {
  flex: none;
  display: none;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .06em;
  color: var(--text-3);
  white-space: nowrap;
}
@media (min-width: 1200px) {
  .topstrip__clock { display: inline-flex; align-items: center; }
}
[data-hook="sport-level-host"] {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

@media (max-width: 899px) {
  .topstrip {
    position: static; /* "Neither row is sticky" (section 3, phone) */
    height: auto;
    padding: 0 var(--gutter-mobile);
    row-gap: 0;
  }
  .topstrip__home {
    min-height: var(--strip-height-phone); /* 56px: row 1 */
  }
  .topstrip__wordmark { font-size: 18px; }
  .topstrip__rule,
  .topstrip__rule--wide,
  .topstrip__clock {
    display: none; /* no clock on phone (shell-04); rules only separate desktop groups */
  }
  /* Forces a new line: the "phone sport row" (44px, 16px gutters via the
     .topstrip padding above, which applies to every wrapped line). One
     host, not two -- see the file header. */
  [data-hook="sport-level-host"] {
    flex: 1 0 100%;
    min-height: var(--sportrow-height); /* 44px */
    box-shadow: inset 0 1px 0 0 var(--edge-soft);
  }
}
/* NO SPORT TAB HIDES ON A NARROW PHONE (2026-09-20). Under 400px this
   file used to hide every `.sportlevel__tab`. That rule dates from when
   MLB was the only tab (the bottom tab bar already covered it) and the
   row's width went to two red "NFL · COMING SOON" / "TENNIS · COMING
   SOON" links -- 4px of slack at 375-399px. Once NFL and Tennis became
   tabs, the same rule hid all three and left the row empty: on every
   phone narrower than 400px (360, 375, 390) nothing in the chrome linked
   to NFL or Tennis, and nothing on an NFL/Tennis page linked back to MLB.
   The three short labels need about 120px of the 328px a 360px phone
   leaves inside its 16px gutters, so there is nothing left to hide. */

/* ---- outlet ---------------------------------------------------------*/
/* column flex, not a bare block: a short view (#/signup) can then say
   `flex: 1` and center itself in the leftover height instead of sitting at
   the top with a screen of dead black under it. */
.outlet { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.outlet > * { min-width: 0; }

/* Sections inside a screen align to the 40px desktop page gutter, 16px
   on phone -- both already read var(--gutter-mobile), which foundation
   moved from 14px to 16px (docs/DESIGN_SYSTEM.md section 2), so these
   picked up the redesign's phone gutter with no further edit here. */
.gutter { padding-left: var(--gutter-desktop); padding-right: var(--gutter-desktop); }
@media (max-width: 899px) {
  .gutter { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }
}

/* ---- section eyebrow row (canvas: label, hairline, right-side meta) -*/
.sechead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  row-gap: var(--sp-2);
  gap: var(--sp-7);
  margin-bottom: var(--sp-10);
}
.sechead__label {
  flex: none;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--text-mute);
  white-space: nowrap;
}
.sechead__label--live { color: var(--fresh); }
.sechead__hair {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0));
}
.sechead__meta {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  color: var(--text-faint);
  white-space: nowrap;
}
.sechead__dot { flex: none; }
@media (max-width: 899px) {
  /* Meta is never hidden (section 7: "never hidden -- section meta,
     sample sizes, conditions, the experimental notice"). It moves under
     the label at 15px instead, forced onto its own line the same way
     the top strip's sport row is: flex-basis 100% in a wrapping row. */
  .sechead { gap: var(--sp-5); }
  .sechead__label { font-size: var(--fs-small); letter-spacing: .2em; } /* no text under 15px (section 7) */
  .sechead__meta {
    flex: 1 0 100%;
    font-size: var(--fs-small);
    letter-spacing: normal;
    white-space: normal;
    color: var(--text-3);
  }
}

/* ---- footer (canvas: wordmark, hairline, legal meta; the full beta
   disclaimer stays reachable in a disclosure -- never deleted) --------*/
.footer-host { margin-top: auto; }
.sitefoot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: 26px var(--gutter-desktop) 40px;
}
.sitefoot__row {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  white-space: nowrap;
}
.sitefoot__mark {
  flex: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--text-faint);
}
.sitefoot__product {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--text-hi);
}
.sitefoot__hair { flex: 1; height: 1px; background: var(--edge-soft); }
.sitefoot__legal {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  color: var(--text-3);
}
/* The helpline and the support/record/research/props/bet-check links
   share the legal row's register -- quiet, monospaced, the same size as
   the 21+ notice beside them. They are links, not decoration, so they
   get an underline on hover and a visible focus ring; a helpline that
   cannot be found by keyboard is not a helpline. Deliberately NOT
   --primary or --fresh: neither is an alert and neither is a price. */
.sitefoot__help,
.sitefoot__support {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  color: var(--text-faint);
  text-decoration: none;
  white-space: nowrap;
}
.sitefoot__help:hover,
.sitefoot__support:hover,
.sitefoot__help:focus-visible,
.sitefoot__support:focus-visible {
  color: var(--text-hi);
  text-decoration: underline;
}
@media (max-width: 899px) {
  /* "Links at 15px in a two-column grid of 44px targets" (section 3,
     Footer, Phone). The mark and the legal line each take their own
     full-width row; every link (help + support-styled, whatever count
     meta.js renders) wraps two-per-row via a 50% flex-basis, each a real
     44px target. */
  .sitefoot__row { flex-wrap: wrap; row-gap: var(--sp-4); }
  .sitefoot__mark,
  .sitefoot__legal { flex: 1 1 100%; white-space: normal; }
  .sitefoot__hair { display: none; }
  .sitefoot__help,
  .sitefoot__support {
    flex: 1 1 calc(50% - var(--sp-4));
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-small);
    letter-spacing: normal;
    white-space: normal;
  }
}
.sitefoot__summary {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-faint);
  max-width: 900px;
}
.sitefoot__disclosure { max-width: 900px; }
/* The same disclosure component is reused on Gameday for the raw board
   freshness fields; it needs its own vertical rhythm there. */
[data-hook="board-freshness"] { padding-top: var(--sp-11); padding-bottom: var(--sp-9); }
.sitefoot__disclosure > summary {
  display: inline-block;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.sitefoot__disclosure > summary:hover { color: var(--text-3); }
.sitefoot__full {
  margin-top: var(--sp-5);
  padding: var(--sp-7) var(--sp-8);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--edge);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-faint);
}
.sitefoot__version {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  color: var(--text-3);
}
@media (max-width: 899px) {
  .sitefoot { padding: 22px var(--gutter-mobile) 32px; }
  /* No text under 15px (section 7) -- these read fine small on desktop
     but the legal/summary/disclosure/version text was still under the
     phone floor. */
  .sitefoot__legal,
  .sitefoot__summary,
  .sitefoot__disclosure > summary,
  .sitefoot__full,
  .sitefoot__version {
    font-size: var(--fs-small);
  }
}

/* ---- reduced-motion note (canvas keeps this visible on Gameday) -----*/
.motion-note {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin: var(--sp-10) var(--gutter-desktop) 0;
  padding: 12px 18px;
  --r: var(--r-badge);
  background: rgba(0, 224, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .16);
}
.motion-note__label {
  flex: none;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: .22em;
  color: var(--live);
}
.motion-note__body {
  flex: 1; min-width: 260px;
  font-family: var(--font-mono);
  font-size: 12.5px; line-height: 1.6; color: var(--text-mute);
}
@media (max-width: 899px) { .motion-note { margin: var(--sp-9) var(--gutter-mobile) 0; } }

/* ---- shared screen-state panels -------------------------------------*/
.screen-state { padding: var(--sp-15) var(--gutter-desktop); }
@media (max-width: 899px) { .screen-state { padding: var(--sp-13) var(--gutter-mobile); } }

/* Flat and square (section 2): dom.js still applies a "chamfer" class to
   these shared panels, so --r is zeroed here rather than left at the
   default --r-panel (16px) .chamfer would otherwise clip-path in --
   these state panels are not one of the three things (brand mark,
   rank-1 card, primary button) the chamfer stays on. */
.state-loading {
  padding: var(--sp-9) var(--sp-11);
  --r: 0;
}
.state-loading__figure {
  font-family: var(--font-mono);
  font-size: 14.5px;
  letter-spacing: .12em;
  color: var(--text-faint);
}

.view-error { --r: 0; }
.view-error__status {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--text-3);
}
.view-error__detail {
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--text-2);
  word-break: break-word;
}

/* Sign-in required / subscription expired / request failed -- a neutral
   state panel now (docs/DESIGN_SYSTEM.md section 4's "Signed out"
   treatment), not an alarm: a customer's own sign-in prompt, lapsed
   subscription or network hiccup is not a warning to flash red at them.
   Background/box-shadow/::before come from components.css's shared
   neutral baseline (.state-loading/.state-empty/.state-error/.gate);
   this file only adds layout, never a red tint. */
.gate {
  position: relative;
  max-width: 620px;
  padding: var(--sp-11) var(--sp-12);
  --r: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.gate__eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.gate__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.1;
  color: var(--text-hi);
}
.gate__body { font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); }
.gate__actions { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.gate__detail > summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.gate__detail-body {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  word-break: break-word;
}

/* ---- interim sign-in panel (web/js/signin.js) -----------------------*/
.signin { display: flex; justify-content: center; padding: var(--sp-16) var(--gutter-desktop); }
@media (max-width: 899px) { .signin { padding: var(--sp-13) var(--gutter-mobile); } }
.signin__panel {
  width: 100%;
  max-width: 520px;
  padding: var(--sp-12);
  --r: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}
.signin__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(32px, 4vw, 46px);
  line-height: .94;
  color: var(--text-hi);
}
.signin__body { font-size: 16px; line-height: 1.55; color: var(--text-mute); }
.signin__field { display: flex; flex-direction: column; gap: var(--sp-3); }
.signin__field label {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.signin__field input {
  --r: var(--r-badge);
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11);
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-hi);
  transition: box-shadow var(--dur-ring-bloom) ease;
}
.signin__field input:hover,
.signin__field input:focus {
  box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .75), 0 0 40px -8px rgba(0, 224, 255, .35);
}
.signin__actions { display: flex; gap: var(--sp-6); flex-wrap: wrap; align-items: center; }
.signin__status { font-size: 14.5px; color: var(--text-mute); }
.signin__note {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  line-height: 1.7;
  color: var(--text-ghost);
}

/* ---- raw JSON fallback rendering (dom.renderUnknown) ----------------*/
.raw-fields {
  display: grid; grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-6);
  font-size: 14.5px; margin: 0;
}
.raw-fields__key { color: var(--text-faint); font-family: var(--font-display);
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.raw-fields__value { margin: 0; color: var(--text-2); }
.raw-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; }
.raw-list__item { padding: var(--sp-2) 0; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05); }
.value-absent { color: var(--text-ghost); font-family: var(--font-mono); }

/* ---- staleness readout (shared by Today and Games) ------------------*/
.staleness {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-7);
  margin: 0; font-family: var(--font-mono); font-size: 13px;
}
.staleness dt {
  color: var(--text-ghost);
  font-family: var(--font-display);
  font-size: 12.5px; letter-spacing: .16em; font-weight: 700;
  text-transform: uppercase;
}
.staleness dd { margin: 0; color: var(--text-3); }

/* ---- boards (tables) ------------------------------------------------*/
.board-scroll { overflow-x: auto; --r: var(--r-panel); }
.board-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; }
.board-table caption {
  text-align: left; padding: var(--sp-6) var(--sp-8) 0;
  font-family: var(--font-display); font-size: 13.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-mute);
}
.board-table th, .board-table td {
  padding: var(--sp-5) var(--sp-6); text-align: left;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}
.board-table th {
  font-family: var(--font-display); font-size: 12.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-mute); font-weight: 700;
}
.board-table td { color: var(--text-3); font-family: var(--font-mono); font-size: 14.5px; }
.board-table tbody tr:hover { background: rgba(255, 255, 255, .03); }
.board-table a { color: var(--live); font-weight: 600; font-family: var(--font-display); }

/* ---- simple field form (Games date picker, My Bets, Support) --------*/
.field-form {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-7);
  padding: var(--sp-8); --r: var(--r-panel);
}
.field-row { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 140px; }
.field-row label {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute);
}
.field-row input, .field-row select {
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px var(--edge-1);
  --r: var(--r-badge);
  padding: 10px 12px;
  font-size: 15px;
  color: var(--text-hi);
  transition: box-shadow var(--dur-ring-bloom) ease;
}
.field-row input:focus-visible, .field-row select:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .75), 0 0 40px -8px rgba(0, 224, 255, .5);
}
.field-form__status[data-hook] { font-size: 14.5px; color: var(--text-mute); }

/* ---- generic view scaffolding (undesigned Track-2 screens: Odds, My
   Bets, Support, Signup, Billing keep serving their current views) ----*/
.view { display: flex; flex-direction: column; gap: var(--sp-11);
  padding: var(--sp-11) var(--gutter-desktop) var(--sp-16); }
@media (max-width: 899px) { .view { padding: var(--sp-9) var(--gutter-mobile) var(--sp-13); } }
.view__title {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: clamp(30px, 4vw, 44px); color: var(--text-hi);
}
.view__eyebrow-row { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.section-block { display: flex; flex-direction: column; gap: var(--sp-5); }
.section-block__heading { display: flex; align-items: baseline; gap: var(--sp-5); }
.section-block__heading h2, .section-block__heading h3 {
  font-family: var(--font-display); font-size: 17px; color: var(--text-hi);
}
.odds-summary { padding: var(--sp-7); --r: var(--r-panel); }
.odds-game__body { padding: var(--sp-7); --r: var(--r-panel); overflow-x: auto; }
.odds-game__note, .bet-check-result__note {
  padding: var(--sp-5) var(--sp-7);
  background: rgba(0, 224, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(0, 224, 255, .3);
  --r: var(--r-badge);
  font-size: 14.5px;
  color: var(--live-label);
}
.my-bets-form { display: flex; flex-wrap: wrap; gap: var(--sp-7); align-items: end;
  padding: var(--sp-8); --r: var(--r-panel); }
.data-quality { display: grid; grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-5); font-size: 13.5px; margin: 0; }
.data-quality dt { color: var(--text-faint); text-transform: uppercase;
  letter-spacing: .12em; font-size: 12.5px; font-family: var(--font-display); }
.data-quality dd { margin: 0; color: var(--text-2); }
.freshness-banner {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-7); --r: var(--r-badge);
  background: rgba(255, 179, 189, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 179, 189, .35);
  font-size: 13.5px; color: var(--money-soft);
}