/* ═══════════════════════════════════════════════════════════════════════════
   THE MR PHONE LOOK — the design system (docs/DESIGN_SYSTEM.md) on the real app
   ═══════════════════════════════════════════════════════════════════════════
   Loaded last (after app.css and layouts.css). Everything below is scoped to
   body.theme-mp, which index.html sets at start unless this device chose
   "Look: Classic" (Settings → This device, the 'look' preference in
   js/people/prefs.js). Classic is the app exactly as it was.

   It changes how things look, never what they do: the same markup, the same
   checkout (search, scanner, row search, the product grid, cartTotals()),
   the same pages. Steps 1–3 of DESIGN_SYSTEM.md "Moving the app over":
     1. tokens: the palette, type, radii and shadows through the app's own
        variables (--bg, --surface, --text …), so every page takes them;
     2. states: focus rings (keyboard and scanner users), hover, pressed,
        disabled and invalid, and touch targets of 44 px and more;
     3. the checkout: the product grid and the "Current sale" pane, the notched
        Charge, the payment tiles, the page tabs, the phone's cart sheet.
   The accent: settings/core.js applyAccentColor() shows Solder Teal in place of
   the old default blue (#2563eb) only; a colour the shop or a person picked stays.
   Light only: the app still has fixed light colours in many places, so the
   design system's dark palette waits until they are gone.
   Plain CSS, no framework. The spacing is on a 4 px grid (--mp-space-*).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens (docs/design-system/tokens.css, light) ───────────────────── */
:root {
  --mp-bg: #f3f5f5;  --mp-surface: #ffffff;  --mp-surface-2: #eceff0;  --mp-surface-3: #e2e7e7;
  --mp-border: #dce2e1;  --mp-border-strong: #bfc9c8;
  --mp-text: #111a19;  --mp-text-2: #4b5957;  --mp-text-3: #5f6d6b;  --mp-text-inverse: #ffffff;
  --mp-success: #177033;  --mp-success-tint: #e6f4ea;
  --mp-warning: #a95a00;  --mp-warning-tint: #fdf1e1;
  --mp-danger:  #c2362b;  --mp-danger-tint:  #fbe9e7;
  --mp-info:    #2e5bd0;  --mp-info-tint:    #e8eefc;

  --mp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mp-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --mp-text-display: 28px; --mp-lh-display: 36px;   /* the sale's total */
  --mp-text-h1: 22px;      --mp-lh-h1: 28px;        /* page titles */
  --mp-text-h2: 18px;      --mp-lh-h2: 24px;        /* pane titles: "Current sale" */
  --mp-text-h3: 16px;      --mp-lh-h3: 24px;
  --mp-text-body: 15px;    --mp-lh-body: 20px;      /* buttons, inputs */
  --mp-text-small: 13px;   --mp-lh-small: 16px;     /* dense data: tables, cart lines */
  --mp-text-micro: 12px;   --mp-lh-micro: 16px;     /* caps labels, badges, table heads */

  --mp-space-1: 4px;  --mp-space-2: 8px;  --mp-space-3: 12px; --mp-space-4: 16px;
  --mp-space-5: 20px; --mp-space-6: 24px; --mp-space-8: 32px;

  --mp-radius-xs: 2px; --mp-radius-sm: 4px; --mp-radius-md: 6px; --mp-radius-lg: 8px; --mp-radius-xl: 12px;
  --mp-notch: 10px;   /* the SIM-card notch: the primary action's cut corner */

  --mp-shadow-1: 0 1px 2px rgba(17, 26, 25, 0.06), 0 0 0 1px rgba(17, 26, 25, 0.04);
  --mp-shadow-2: 0 4px 12px rgba(17, 26, 25, 0.10), 0 1px 3px rgba(17, 26, 25, 0.06);
  --mp-shadow-3: 0 16px 40px rgba(17, 26, 25, 0.16), 0 4px 12px rgba(17, 26, 25, 0.08);
  --mp-scrim: rgba(17, 26, 25, 0.36);

  --mp-touch-min: 44px; --mp-touch-comfort: 48px; --mp-touch-primary: 56px;

  --mp-ease: cubic-bezier(0.45, 0, 0.25, 1);          /* folds, tabs, accordions */
  --mp-ease-enter: cubic-bezier(0.2, 0, 0, 1);        /* sheets and slide-overs arriving */
  --mp-dur-instant: 80ms; --mp-dur-fast: 140ms; --mp-dur-base: 220ms; --mp-dur-slow: 300ms;
}

/* The app's own variables, pointed at the tokens. --accent is not here: it is
   set on <html> by applyAccentColor() (the shop's or the person's colour). */
body.theme-mp {
  --bg: var(--mp-bg); --surface: var(--mp-surface); --surface2: var(--mp-surface-2);
  --border: var(--mp-border); --border2: var(--mp-border-strong);
  --text: var(--mp-text); --text2: var(--mp-text-2); --text3: var(--mp-text-3); --text-muted: var(--mp-text-3);
  --accent-light: color-mix(in srgb, var(--accent) 11%, #fff);
  --accent-ink: color-mix(in srgb, var(--accent) 86%, #000);          /* text in the accent: 5:1 and more */
  --accent-halo: color-mix(in srgb, var(--accent) 28%, transparent);  /* the focus ring's soft edge */
  --green: var(--mp-success); --green-light: var(--mp-success-tint);
  --red: var(--mp-danger);    --red-light: var(--mp-danger-tint);
  --amber: var(--mp-warning); --amber-light: var(--mp-warning-tint);
  --shadow: var(--mp-shadow-1); --shadow-md: var(--mp-shadow-2); --shadow-lg: var(--mp-shadow-3);
  --radius: var(--mp-radius-lg); --radius-sm: var(--mp-radius-md); --radius-lg: var(--mp-radius-xl);
  --font-ui: var(--mp-font-sans); --font-num: var(--mp-font-mono);   /* every 'DM Sans' / 'DM Mono' in the app reads these */
  font-family: var(--mp-font-sans);
  color: var(--mp-text); background: var(--mp-bg);
  -webkit-font-smoothing: antialiased;
}
body.theme-mp .product-price, body.theme-mp .ci-total, body.theme-mp .ci-qty,
body.theme-mp #grand-total, body.theme-mp .kpi-val, body.theme-mp .stat-value { font-variant-numeric: tabular-nums; }

/* ── 2. States ───────────────────────────────────────────────────────────── */
/* Focus: a 2 px ring in the accent with a soft halo, on every control a key or a
   scanner can reach. !important: many controls carry an inline outline:none. */
body.theme-mp :is(button, a[href], [role="button"], [role="tab"], summary, .product-card, .sv2-item, .sv2-subitem, .pos-page-tab, .cat-btn):focus-visible {
  outline: 2px solid var(--accent) !important; outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--accent-halo) !important;
}
body.theme-mp :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea):focus-visible {
  outline: 2px solid var(--accent) !important; outline-offset: 0;
  border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-halo) !important;
}
body.theme-mp :is(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }
body.theme-mp :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--accent); }
/* the Stock Sheet draws its own cell cursor (sheet-grid.css): no second ring on its cells */
body.theme-mp .sg-scroll :is(td, th):focus-visible { outline: none !important; box-shadow: none !important; }

/* Disabled: faded, no pointer; a disabled value still readable */
body.theme-mp :is(button, input, select, textarea):disabled { cursor: not-allowed; }
body.theme-mp :is(button):disabled { opacity: .45; }
body.theme-mp :is(input, select, textarea):disabled { background: var(--mp-surface-2); color: var(--mp-text-3); opacity: 1; }

/* Invalid: the field says so, in the danger colour (aria-invalid, or the browser's
   own check once the field was used) */
body.theme-mp :is(input, select, textarea)[aria-invalid="true"],
body.theme-mp :is(input, select, textarea):user-invalid {
  border-color: var(--mp-danger) !important; box-shadow: 0 0 0 3px var(--mp-danger-tint);
}

/* Hover and pressed: quick colour changes, a small press on the things a finger taps */
body.theme-mp :is(button, .product-card, .cat-btn, .pos-page-tab, .sv2-item, .sv2-subitem) {
  transition: background-color var(--mp-dur-fast) var(--mp-ease), border-color var(--mp-dur-fast) var(--mp-ease),
              color var(--mp-dur-fast) var(--mp-ease), box-shadow var(--mp-dur-fast) var(--mp-ease), transform var(--mp-dur-instant) var(--mp-ease);
}
body.theme-mp :is(.btn-checkout, .pm-btn, .pm-btn-square, .btn-primary, .btn-secondary, .cat-btn, .product-card):active:not(:disabled) { transform: scale(0.98); }

/* Buttons and inputs: the shared shapes */
body.theme-mp .btn-primary { border-radius: var(--mp-radius-md); font-weight: 600; min-height: 40px; }
body.theme-mp .btn-primary:hover { background: var(--accent-hover); }
body.theme-mp .btn-secondary { border-radius: var(--mp-radius-md); border-color: var(--mp-border-strong); min-height: 40px; }
body.theme-mp .btn-secondary:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-light); }
body.theme-mp .form-input { border-color: var(--mp-border-strong); border-radius: var(--mp-radius-md); min-height: 40px; font-size: 14px; }
body.theme-mp .form-label { font-size: var(--mp-text-micro); font-weight: 600; letter-spacing: .02em; color: var(--mp-text-2); }

/* A finger's size (a touch screen): 44 px at least, 48 for the everyday controls */
@media (pointer: coarse) {
  body.theme-mp :is(.btn-primary, .btn-secondary, .form-input, .cat-btn, .pos-manage-btn, .modal-close, .pg-btn) { min-height: var(--mp-touch-min); }
  body.theme-mp .modal-close { min-width: var(--mp-touch-min); }
  body.theme-mp .ci-qty-btn { width: 36px; height: 36px; }
  body.theme-mp .ci-remove { min-width: 36px; min-height: 36px; }
}

/* ── Surfaces: cards, modals, tables ─────────────────────────────────────── */
body.theme-mp .modal-overlay { background: var(--mp-scrim); backdrop-filter: none; }
body.theme-mp .modal { border-radius: var(--mp-radius-xl); box-shadow: var(--mp-shadow-3); }
body.theme-mp .modal-header { padding: var(--mp-space-4) var(--mp-space-6); }
body.theme-mp .modal-title { font-size: var(--mp-text-h2); line-height: var(--mp-lh-h2); font-weight: 600; }
body.theme-mp .modal-close { border-radius: var(--mp-radius-md); background: transparent; }
body.theme-mp .modal-close:hover { background: var(--mp-surface-2); color: var(--mp-text); }
body.theme-mp .modal-footer { padding: var(--mp-space-3) var(--mp-space-6); background: var(--mp-surface); }

/* Tables: a quiet head that stays in view, hairlines between rows */
body.theme-mp th { background: var(--mp-surface-2); color: var(--mp-text-2); font-size: var(--mp-text-micro); font-weight: 600; letter-spacing: .06em; border-bottom: 1px solid var(--mp-border); }
body.theme-mp td { border-bottom: 1px solid var(--mp-border); }
body.theme-mp tr:hover td { background: color-mix(in srgb, var(--mp-surface-2) 60%, transparent); }
body.theme-mp .rpt-table th { position: sticky; top: 0; z-index: 1; background: var(--mp-surface-2); border-bottom: 1px solid var(--mp-border-strong); color: var(--mp-text-2); }
body.theme-mp .rpt-table tr[onclick]:hover td { background: var(--accent-light) !important; }

/* ── The navigation: the side rail and the top bar ──────────────────────── */
body.theme-mp .topbar { height: 56px; border-bottom-color: var(--mp-border); }
body.theme-mp .sidebar-v2 { background: var(--mp-surface); border-right-color: var(--mp-border); transition: width var(--mp-dur-base) var(--mp-ease); }
body.theme-mp .sv2-section { color: var(--mp-text-3); font-size: var(--mp-text-micro); letter-spacing: .06em; }
body.theme-mp .sv2-item { color: var(--mp-text-2); border-radius: var(--mp-radius-md); min-height: 40px; position: relative; }
body.theme-mp .sv2-item:hover, body.theme-mp .sv2-subitem:hover { background: var(--mp-surface-2); color: var(--mp-text); }
body.theme-mp .sv2-item.active, body.theme-mp .sv2-subitem.active { background: var(--accent-light); color: var(--accent-ink); }
/* the active module: a 3 px accent bar at the rail's edge */
body.theme-mp .sv2-item.active::before { content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
body.theme-mp .sv2-subgroup { overflow: hidden; }

/* ── 3. The checkout ─────────────────────────────────────────────────────── */
body.theme-mp #page-pos .pos-left { background: var(--mp-bg); padding: var(--mp-space-4); gap: var(--mp-space-3); }

/* the pages of the till (active tickets / product pages): underline tabs */
/* (compact on purpose: the owner asked for the page tabs in two short rows at most, app.css .pos-pages-bar) */
body.theme-mp .pos-pages-bar { border-bottom: 1px solid var(--mp-border); max-height: 64px; }
body.theme-mp .pos-page-tab { border: 0; border-radius: var(--mp-radius-sm) var(--mp-radius-sm) 0 0; padding: 5px 10px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--mp-text-2); box-shadow: inset 0 -2px 0 transparent; }
body.theme-mp .pos-page-tab:hover { background: var(--mp-surface-2); color: var(--mp-text); }
body.theme-mp .pos-page-tab.active { background: transparent; color: var(--accent-ink); box-shadow: inset 0 -3px 0 var(--accent); }

/* search first: the fastest way to one of 5,000 products (or a scan) */
body.theme-mp .search-input-wrap input { min-height: 44px; font-size: var(--mp-text-body); border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-md); background: var(--mp-surface); padding-left: 40px; }
body.theme-mp .search-input-wrap .search-icon { left: 13px; }
body.theme-mp .pos-manage-btn { border-radius: var(--mp-radius-md); }

/* category chips */
body.theme-mp .cat-btn { border-radius: var(--mp-radius-md); border-color: var(--mp-border); min-height: 36px; padding: 6px 14px; font-size: 14px; font-weight: 500; color: var(--mp-text-2); }
body.theme-mp .cat-btn:hover { border-color: var(--mp-border-strong); color: var(--mp-text); background: var(--mp-surface); }
body.theme-mp .cat-btn.active { background: var(--mp-text); border-color: var(--mp-text); color: var(--mp-text-inverse); }

/* the product tiles: flat, a hairline and the lightest shadow; the tile is the button */
body.theme-mp .products-grid { gap: var(--mp-space-2); grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
body.theme-mp .product-card { border-radius: var(--mp-radius-md); border-color: var(--mp-border); box-shadow: var(--mp-shadow-1); padding: var(--mp-space-2) var(--mp-space-3) var(--mp-space-3); }
body.theme-mp .product-card:hover { border-color: var(--accent); box-shadow: var(--mp-shadow-2); transform: none; }
body.theme-mp .product-card-img, body.theme-mp .product-card-img-placeholder { border-radius: var(--mp-radius-sm); }

/* the sale: a pane of its own */
body.theme-mp #page-pos .pos-right { background: var(--mp-surface); border-left: 1px solid var(--mp-border); }   /* (its widths stay app.css's: 340, 310, 280 px) */
body.theme-mp .cart-header { padding: var(--mp-space-4); min-height: 56px; gap: var(--mp-space-2); }
body.theme-mp .cart-header h3 { font-size: var(--mp-text-h2); line-height: var(--mp-lh-h2); font-weight: 600; letter-spacing: -.01em; }
body.theme-mp .cart-count { border-radius: 999px; padding: 2px 8px; font-size: var(--mp-text-micro); }
body.theme-mp .cart-items { padding: var(--mp-space-2) var(--mp-space-3); gap: 0; }
/* cart lines: rows with hairlines, not boxes (more lines fit, easier to read) */
body.theme-mp .cart-item { background: transparent; border: 0; border-bottom: 1px solid var(--mp-border); border-radius: 0; padding: var(--mp-space-3) var(--mp-space-1); }
body.theme-mp .ci-name { font-size: 14px; font-weight: 600; }
body.theme-mp .ci-total { font-size: 14px; }
body.theme-mp .ci-qty-btn { border-radius: var(--mp-radius-md); border-color: var(--mp-border-strong); }   /* (sizes: app.css, 36 px on a touch screen; a mouse till keeps them compact — touch.js) */
body.theme-mp .ci-qty-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent-ink); }
body.theme-mp .ci-qty { font-size: 14px; }
body.theme-mp .ci-each-label, body.theme-mp .ci-var-price-label, body.theme-mp .ci-note-toggle { font-size: 12px; }

/* the foot of the sale: totals you can read at arm's length, then payment, then Charge */
body.theme-mp .cart-footer { padding: var(--mp-space-3) var(--mp-space-4) var(--mp-space-4); box-shadow: 0 -1px 0 var(--mp-border), 0 -8px 24px rgba(17, 26, 25, 0.04); border-top: 0; }
body.theme-mp .cart-footer [style*="font-size:9px"], body.theme-mp .cart-footer [style*="font-size:10px"] { font-size: 12px !important; }
body.theme-mp .cart-footer [style*="font-size:8px"] { font-size: 11px !important; }
body.theme-mp #grand-total { font-size: var(--mp-text-display) !important; line-height: var(--mp-lh-display); font-weight: 700 !important; letter-spacing: -.01em; }
body.theme-mp .disc-type-btn { min-width: 32px; min-height: 32px; font-size: 13px; }
body.theme-mp #discount-amount { min-height: 32px; font-size: 14px !important; width: 64px !important; }
body.theme-mp .payment-methods { gap: var(--mp-space-2); margin-bottom: var(--mp-space-3); }
body.theme-mp .pm-btn, body.theme-mp .pm-btn-square { border-radius: var(--mp-radius-md); font-size: 13px; font-weight: 600; }   /* (44 px on a touch screen: app.css; natural on a mouse till) */
body.theme-mp .pm-btn { background: var(--mp-surface); border: 1px solid var(--mp-border-strong); color: var(--mp-text); }
body.theme-mp .pm-btn:hover { background: var(--mp-surface-2); border-color: var(--mp-border-strong); color: var(--mp-text); }
body.theme-mp .pm-btn.active { background: var(--accent-light); border: 2px solid var(--accent); color: var(--accent-ink); }
body.theme-mp .pm-btn-square { border-color: var(--mp-success); background: var(--mp-success-tint); color: var(--mp-success); }
body.theme-mp .pm-btn-square:hover, body.theme-mp .pm-btn-square.active { background: var(--mp-success); border-color: var(--mp-success); color: #fff; }

/* Charge: the one filled button on the screen, with the notched corner (drawn by
   the background, so the focus ring and the tap area stay whole) */
body.theme-mp .btn-checkout {
  min-height: var(--mp-touch-primary); border-radius: var(--mp-radius-md); border-top-right-radius: 0;
  background: linear-gradient(225deg, transparent var(--mp-notch), var(--accent) calc(var(--mp-notch) + 0.5px));
  font-size: 18px; font-weight: 700; letter-spacing: .01em;
}
body.theme-mp .btn-checkout:hover:not(:disabled) { background: linear-gradient(225deg, transparent var(--mp-notch), var(--accent-hover) calc(var(--mp-notch) + 0.5px)); }
body.theme-mp .btn-checkout:disabled { opacity: .4; }

/* the tablet: products on the left, the sale on the right (the owner's reference; Q33) — or, on a till
   whose "Sale pane" preference is Left (body.cart-left, js/people/prefs.js), the Phase 6 layout: the sale
   on the left under the left thumb */
body.theme-mp.layout-tablet #page-pos.active { flex-direction: row; }
body.theme-mp.layout-tablet #page-pos .pos-right { width: 34% !important; min-width: 340px; max-width: 440px; border-right: 0; border-left: 1px solid var(--mp-border); }
body.theme-mp.layout-tablet.cart-left #page-pos.active { flex-direction: row-reverse; }
body.theme-mp.layout-tablet.cart-left #page-pos .pos-right { width: 30% !important; border-left: 0; border-right: 1px solid var(--mp-border); }
body.theme-mp.layout-tablet .btn-checkout { min-height: 64px; font-size: 20px !important; border-radius: var(--mp-radius-md) !important; border-top-right-radius: 0 !important; }
body.theme-mp.layout-tablet .pm-btn, body.theme-mp.layout-tablet .pm-btn-square { min-height: var(--mp-touch-primary); border-radius: var(--mp-radius-md) !important; }
body.theme-mp.layout-tablet .product-card { border-radius: var(--mp-radius-lg); }
body.theme-mp.layout-tablet .cart-item { border-radius: 0; padding: var(--mp-space-3) var(--mp-space-1); }
body.theme-mp.layout-tablet .cat-btn, body.theme-mp.layout-tablet .cv-mode-btn { border-radius: var(--mp-radius-md); }
body.theme-mp.layout-tablet .pos-toolbar .search-input-wrap input { border-radius: var(--mp-radius-md); }

/* the phone: the sale is a sheet from the bottom; the bar under the thumb opens it */
@media (max-width: 767px) {
  body.theme-mp #page-pos .pos-left { padding: var(--mp-space-2) var(--mp-space-3) calc(92px + env(safe-area-inset-bottom)); }
  body.theme-mp #page-pos .pos-right { border-radius: var(--mp-radius-xl) var(--mp-radius-xl) 0 0; box-shadow: var(--mp-shadow-3);
    transition: transform var(--mp-dur-slow) var(--mp-ease-enter); }
  body.theme-mp.cart-sheet-open #cart-sheet-backdrop { background: var(--mp-scrim); }
  body.theme-mp .pos-toolbar .search-input-wrap input { border-radius: var(--mp-radius-md); }
  body.theme-mp .pos-toolbar .cat-btn, body.theme-mp .pos-toolbar .cv-mode-btn { border-radius: var(--mp-radius-md); min-height: 44px; }   /* a thumb's target (mobile.js: 42 px or more) */
  body.theme-mp .product-card { min-height: 104px; }
  body.theme-mp .pm-btn, body.theme-mp .pm-btn-square { min-height: 48px; border-radius: var(--mp-radius-md) !important; }
  body.theme-mp .btn-checkout { min-height: var(--mp-touch-primary); border-radius: var(--mp-radius-md) !important; border-top-right-radius: 0 !important; }
  body.theme-mp #pos-cart-bar button { border-radius: var(--mp-radius-lg); font-family: var(--mp-font-sans); box-shadow: var(--mp-shadow-2); }
  body.theme-mp #pos-cart-bar .pcb-pay { background: linear-gradient(225deg, transparent var(--mp-notch), var(--accent) calc(var(--mp-notch) + 0.5px)); border-top-right-radius: 0; }
  body.theme-mp.ui-v2 .sidebar-v2 { box-shadow: var(--mp-shadow-3); transition: transform var(--mp-dur-base) var(--mp-ease); }
  body.theme-mp.mobile-nav-open #mobile-nav-backdrop { background: var(--mp-scrim); }
}

/* Motion: everything above moves at once for anyone who asked for less motion */
@media (prefers-reduced-motion: reduce) {
  body.theme-mp *, body.theme-mp *::before, body.theme-mp *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* My Preferences → Text darkness → Darker and bolder (js/people/prefs.js textWeight): the grey helper text much
   darker, the body text a step heavier. In both looks; bold stays bold. */
body.text-strong, body.theme-mp.text-strong {
  --text2: #262b2a; --text3: #3a4140; --text-muted: #3a4140;
  --mp-text-2: #262b2a; --mp-text-3: #3a4140;
  font-weight: 500;
}
body.text-strong input, body.text-strong select, body.text-strong textarea, body.text-strong button { font-weight: 500; }
body.text-strong ::placeholder { color: #5b6361; }