/* ==========================================================================
   OLD PHONES' OWN STYLES (integrations round, old-phones).

   Tailwind v4 puts every rule it writes inside @layer, and Safari before 15.4
   throws a whole @layer block away as a rule it does not know. So on an
   iPhone that stopped at iOS 12, 13 or 14 — and on iOS 15.0 to 15.3 — a
   customer's page arrived as bare HTML: icons the width of the screen, the
   logo at its full size, buttons the size of a word, the "hidden" parts of
   the page shown. This file is what those phones get instead.

   IT ONLY WAKES ON THOSE PHONES. Everything below sits inside one
   @supports not (accent-color: auto) block. accent-color arrived in Safari
   15.4 in the same release as @layer (and in Chrome 93, Firefox 92), so the
   block is live exactly where Tailwind's layers were dropped and inert
   everywhere else: on a current phone none of it applies, so its unlayered
   rules can never out-rank Tailwind's own. It reaches the page through
   stylesheet_link_tag :app (every stylesheet under app/assets, in name
   order, so it always comes before tailwind.css).

   WHAT IS HERE: a small reset (what Tailwind's preflight did), readable
   defaults (16px text, 44px inputs and buttons, full-width submit buttons,
   cards as white boxes), the structural utilities the customer pages, the
   crew pages and the staff layout use, and the few colours that carry
   meaning (the black bar and its white words, the amber rule, the page's
   greys) so nothing is white on white. Hover states, shadows and letter
   spacing are left out: nice to have, never needed to finish a page.

   WHAT IS NOT HERE, ON PURPOSE (test/lib/legacy_css_coverage_test.rb keeps
   it honest): @layer, :is/:where/:has, gap (flex gap is Safari 14.1),
   inset, aspect-ratio, dvh, clamp(), color-mix, oklch, @property and
   @container — each is newer than the phones this file is for.
   Hand-written; no tool made it.
   ========================================================================== */
@supports not (accent-color: auto) {

  /* ------------------------------------------------------------ reset -- */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid #e2e8f0; }
  html { font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
  body {
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f1a14;
    background: #f5f4f1;
  }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  ol, ul, menu { list-style: none; }
  a { color: inherit; text-decoration: inherit; }
  b, strong { font-weight: 700; }
  small { font-size: 80%; }
  img, svg, video, canvas { display: block; vertical-align: middle; }
  img, video { max-width: 100%; height: auto; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
  summary { cursor: pointer; }
  /* A disclosure the page draws its own caret for keeps the old triangle
     out of the way. */
  summary::-webkit-details-marker { display: none; }

  /* ----------------------------------------- readable controls, 44px -- */
  button, input, select, textarea { font: inherit; color: inherit; background: transparent; }
  button, [type="button"], [type="submit"], [type="reset"] { cursor: pointer; -webkit-appearance: none; }
  button, [type="submit"], [type="button"] { min-height: 44px; }
  /* The one button a form is for fills the width of the phone, as the
     customer pages draw it on a new phone. A button in a row beside a box
     (Find, beside the search box) keeps its own width: at full width it ran
     off the side of the screen. */
  form:not(.flex) > [type="submit"], form:not(.flex) > button:not([type="button"]) { display: block; width: 100%; }
  /* The boxes a person types into. A button made with <input type=submit>
     is an input too, and this rule outranks every colour class, so without
     the last four :not()s "Sign agreement", "Request my free quote" and the
     office's Schedule came out as white text boxes, and the rep's Find
     button, set to full width, pushed the New quote page off the side of
     the phone. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
  select,
  textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #1f1a14;
    font-size: 16px;
    line-height: 1.5;
  }
  [type="submit"] { min-height: 44px; padding: 0.625rem 1rem; border-radius: 10px; font-weight: 700; }
  input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; vertical-align: middle; }
  input[type="file"] { display: block; width: 100%; min-height: 44px; font-size: 16px; }
  label { display: block; }
  label > input[type="checkbox"], label > input[type="radio"] { display: inline-block; margin-right: 0.5rem; }
  textarea { min-height: 6rem; }

  /* ------------------------------------------------ the kit's pieces -- */
  /* Staff pages on iOS 15.0–15.3, and the few customer pages built from the
     kit: cards are white boxes, buttons are big, the page title is big. */
  .ui-card { display: block; background: #fff; border: 1px solid #e6e1d8; border-radius: 10px; }
  .ui-card-header { padding: 1rem 1rem 0; }
  .ui-card-title { font-size: 1.0625rem; font-weight: 600; }
  .ui-card-subtitle { margin-top: 0.125rem; color: #6b6259; }
  .ui-card-body { padding: 1rem; }
  .ui-card-footer { padding: 0.75rem 1rem; border-top: 1px solid #e6e1d8; }
  .ui-stack > * + * { margin-top: 1.5rem; }
  .ui-grid-2 > * + * { margin-top: 1.5rem; }
  .ui-page-header { margin-bottom: 1.5rem; }
  .ui-page-title { font-size: 1.625rem; line-height: 2.125rem; font-weight: 700; }
  .ui-page-subtitle { margin-top: 0.25rem; color: #6b6259; }
  .ui-page-back { display: inline-block; min-height: 44px; line-height: 44px; font-weight: 600; color: #92400e; }
  .ui-section-title { margin-bottom: 0.75rem; font-size: 1.125rem; font-weight: 600; }
  .ui-eyebrow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: #6b6259; }
  .ui-link { font-weight: 600; color: #92400e; }
  .ui-btn {
    display: inline-block;
    min-height: 44px;
    padding: 0.625rem 1.125rem;
    border: 1px solid #d3ccc0;
    border-radius: 10px;
    background: #fff;
    color: #1f1a14;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    text-align: center;
  }
  .ui-btn svg { display: inline-block; width: 1.25rem; height: 1.25rem; }
  .ui-btn-primary { border-color: #b45309; background: #b45309; color: #fff; }
  .ui-btn-quiet { border-color: transparent; color: #92400e; }
  .ui-btn-danger { border-color: #efc2c2; color: #b91c1c; }
  .ui-btn-block { display: block; width: 100%; }
  .ui-input { display: block; width: 100%; min-height: 44px; }
  .ui-label { display: block; font-size: 0.875rem; font-weight: 600; color: #6b6259; }
  .ui-field { display: block; margin-bottom: 0.75rem; }
  .ui-badge { display: inline-block; padding: 0 0.625rem; border-radius: 999px; background: #efebe5; color: #4a433b; font-size: 0.8125rem; font-weight: 600; }
  .ui-badge svg { display: inline-block; width: 0.875rem; height: 0.875rem; }
  .ui-badge-good { background: #e9f7ee; color: #166534; }
  .ui-badge-warn { background: #fef6d4; color: #7a4a00; }
  .ui-badge-bad { background: #fdecec; color: #991b1b; }
  .ui-tabs { display: block; }
  .ui-tab { display: inline-block; min-height: 44px; padding: 0 1rem; line-height: 44px; font-weight: 600; color: #6b6259; }
  .ui-tab[aria-current] { background: #fff; color: #1f1a14; border-radius: 8px; }
  .ui-toast { display: block; position: relative; padding: 0.875rem 3.25rem 0.875rem 1rem; background: #fff; border: 1px solid #e6e1d8; border-left: 4px solid #b45309; border-radius: 10px; }
  details.ui-toast:not([open]) { display: none; }
  .ui-toast > summary { position: absolute; top: 0; right: 0; width: 44px; height: 44px; list-style: none; }
  .ui-toast svg, .ui-empty svg, .ui-stat svg, .ui-trend svg { width: 1.25rem; height: 1.25rem; }
  .ui-empty { padding: 2rem 1rem; text-align: center; color: #6b6259; }
  .ui-stat { display: block; padding: 1rem; background: #fff; border: 1px solid #e6e1d8; border-radius: 10px; margin-bottom: 1rem; }
  /* A tile's name, its figure and the line under it, one to a line: run
     together, Back office → Gross margin read "Revenue $0 the signed
     agreements' totals". */
  .ui-stat-label, .ui-stat-value, .ui-stat-sub { display: block; }
  .ui-stat-label { font-size: 0.9375rem; font-weight: 600; color: #6b6259; }
  .ui-stat-value { font-size: 2rem; line-height: 2.5rem; font-weight: 700; }
  .ui-stat-sub { font-size: 0.875rem; color: #6b6259; }
  .ui-chart svg { width: 100%; height: auto; }
  .ui-chart-table-wrap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

  /* -------------------------------------- the black bar and its words -- */
  /* The header every customer, crew and staff page shares. Without its
     colour the brand's white words sat on a white page. */
  .kf-bar { position: -webkit-sticky; position: sticky; top: 0; z-index: 40; background: #1f1a14; color: #fff; border-bottom: 2px solid #f59e0b; }
  .kf-drawer { position: static; }
  .kf-drawer > summary { display: flex; align-items: center; min-height: 44px; padding: 0 0.75rem; color: #e7e5e4; list-style: none; }
  .kf-drawer > summary svg { width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; }
  .kf-drawer > div { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; max-height: 80vh; overflow-y: auto; padding: 1rem; background: #1f1a14; border-bottom: 2px solid #f59e0b; }
  .kf-menu { display: none; }
  .kf-old-phone-notice { margin: 0; padding: 0.625rem 1rem; border-bottom: 1px solid #f0d98c; background: #fef6d4; color: #7a4a00; font-size: 0.9375rem; line-height: 1.4; }

  /* ------------------------------------------ a choice that shows itself -- */
  /* The review page's five stars are radio buttons hidden behind big tiles,
     and only Tailwind's peer-checked rules showed which tile was picked: on
     an old phone a customer tapped "4 stars" and nothing on the screen
     changed. The same rules, written the old way. */
  .peer:checked ~ .peer-checked\:border-amber-500 { border-color: #f59e0b; }
  .peer:checked ~ .peer-checked\:bg-amber-50 { background-color: #fffbeb; }
  .peer:focus ~ .peer-focus-visible\:ring-4 { box-shadow: 0 0 0 4px #fcd34d; }

  /* The website form's trap for robots stays out of sight: a person who
     typed into it would be sent to the office's review pile. */
  .kf-extra-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

  /* ------------------------------------------------------ display -- */
  .block { display: block; }
  .inline { display: inline; }
  .inline-block { display: inline-block; }
  .flex { display: flex; }
  .inline-flex { display: inline-flex; }
  .grid { display: grid; }
  .contents { display: contents; }
  .table { display: table; }
  /* After every display utility, so hidden wins when both are on one tag. */
  .hidden { display: none; }
  /* Important, because the readable-controls rules above are about inputs
     by type: a photo input hidden behind its own big label came out 390px
     wide and ran the page off the side of the phone. */
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
  }

  /* --------------------------------------------------------- flexbox -- */
  /* Unprefixed: every Safari this file is for (9 and up) reads flexbox as
     written. */
  .flex-1 { flex: 1 1 0%; }
  .flex-auto { flex: 1 1 auto; }
  .flex-none { flex: none; }
  .flex-col { flex-direction: column; }
  .flex-row { flex-direction: row; }
  .flex-wrap { flex-wrap: wrap; }
  .shrink-0 { flex-shrink: 0; }
  .grow { flex-grow: 1; }
  .items-start { align-items: flex-start; }
  .items-center { align-items: center; }
  .items-end { align-items: flex-end; }
  .items-baseline { align-items: baseline; }
  .items-stretch { align-items: stretch; }
  .justify-start { justify-content: flex-start; }
  .justify-center { justify-content: center; }
  .justify-end { justify-content: flex-end; }
  .justify-between { justify-content: space-between; }
  .self-start { align-self: flex-start; }
  .self-center { align-self: center; }
  /* Flex gap is Safari 14.1, so a row's items get a little room of their
     own instead: enough that two words never run together. */
  .flex > * + * { margin-left: 0.5rem; }
  .flex-col > * + * { margin-left: 0; margin-top: 0.5rem; }
  .flex-wrap > * { margin-bottom: 0.25rem; }

  /* ------------------------------------------------------------ grid -- */
  /* One column on an old phone: the side-by-side layouts are for iPads and
     desks, and a stack reads the same on any screen. */
  .grid > * + * { margin-top: 0.5rem; }
  .grid-cols-1 { grid-template-columns: minmax(0, 1fr); }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-2 > * + *, .grid-cols-3 > * + *, .grid-cols-4 > * + *, .grid-cols-5 > * + *, .grid-cols-6 > * + * { margin-top: 0; }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .col-span-2 { grid-column: span 2 / span 2; }
  .col-span-full { grid-column: 1 / -1; }

  /* ---------------------------------------------------------- sizing -- */
  .w-full { width: 100%; }
  .w-auto { width: auto; }
  .w-px { width: 1px; }
  .w-3 { width: 0.75rem; }
  .w-3\.5 { width: 0.875rem; }
  .w-4 { width: 1rem; }
  .w-5 { width: 1.25rem; }
  .w-6 { width: 1.5rem; }
  .w-7 { width: 1.75rem; }
  .w-8 { width: 2rem; }
  .w-9 { width: 2.25rem; }
  .w-10 { width: 2.5rem; }
  .w-11 { width: 2.75rem; }
  .w-12 { width: 3rem; }
  .w-14 { width: 3.5rem; }
  .w-16 { width: 4rem; }
  .w-20 { width: 5rem; }
  .w-24 { width: 6rem; }
  .w-72 { width: 18rem; max-width: 100%; }
  .h-auto { height: auto; }
  .h-full { height: 100%; }
  .h-px { height: 1px; }
  .h-3 { height: 0.75rem; }
  .h-3\.5 { height: 0.875rem; }
  .h-4 { height: 1rem; }
  .h-5 { height: 1.25rem; }
  .h-6 { height: 1.5rem; }
  .h-7 { height: 1.75rem; }
  .h-8 { height: 2rem; }
  .h-9 { height: 2.25rem; }
  .h-10 { height: 2.5rem; }
  .h-11 { height: 2.75rem; }
  .h-12 { height: 3rem; }
  .h-14 { height: 3.5rem; }
  .h-16 { height: 4rem; }
  .min-w-0 { min-width: 0; }
  .min-w-11, .min-w-\[44px\] { min-width: 2.75rem; }
  .min-h-screen { min-height: 100vh; }
  .min-h-11, .min-h-tap, .min-h-\[44px\], .min-h-\[2\.75rem\] { min-height: 2.75rem; }
  .min-h-12 { min-height: 3rem; }
  .min-h-14, .min-h-\[56px\] { min-height: 3.5rem; }
  .min-h-\[4\.5rem\] { min-height: 4.5rem; }
  .max-w-xs { max-width: 20rem; }
  .max-w-sm { max-width: 24rem; }
  .max-w-md { max-width: 28rem; }
  .max-w-lg { max-width: 32rem; }
  .max-w-xl { max-width: 36rem; }
  .max-w-2xl { max-width: 42rem; }
  .max-w-3xl { max-width: 48rem; }
  .max-w-4xl { max-width: 56rem; }
  .max-w-5xl { max-width: 64rem; }
  .max-w-6xl { max-width: 72rem; }
  .max-w-7xl { max-width: 80rem; }
  .max-w-full { max-width: 100%; }
  .max-w-prose { max-width: 65ch; }
  .max-h-56 { max-height: 14rem; }
  /* The logo and every icon: an image or an svg with no size of its own
     otherwise draws at its natural size, which is the width of the phone. */
  img.w-auto { width: auto; }

  /* --------------------------------------------------------- spacing -- */
  .mx-auto { margin-left: auto; margin-right: auto; }
  .ml-auto { margin-left: auto; }
  .mr-auto { margin-right: auto; }
  .m-0 { margin: 0; }
  .mt-0 { margin-top: 0; }
  .mt-0\.5 { margin-top: 0.125rem; }
  .mt-1 { margin-top: 0.25rem; }
  .mt-1\.5 { margin-top: 0.375rem; }
  .mt-2 { margin-top: 0.5rem; }
  .mt-2\.5 { margin-top: 0.625rem; }
  .mt-3 { margin-top: 0.75rem; }
  .mt-4 { margin-top: 1rem; }
  .mt-5 { margin-top: 1.25rem; }
  .mt-6 { margin-top: 1.5rem; }
  .mt-8 { margin-top: 2rem; }
  .mt-10 { margin-top: 2.5rem; }
  .mt-12 { margin-top: 3rem; }
  .mb-0 { margin-bottom: 0; }
  .mb-1 { margin-bottom: 0.25rem; }
  .mb-1\.5 { margin-bottom: 0.375rem; }
  .mb-2 { margin-bottom: 0.5rem; }
  .mb-3 { margin-bottom: 0.75rem; }
  .mb-4 { margin-bottom: 1rem; }
  .mb-5 { margin-bottom: 1.25rem; }
  .mb-6 { margin-bottom: 1.5rem; }
  .mb-8 { margin-bottom: 2rem; }
  .ml-1 { margin-left: 0.25rem; }
  .ml-2 { margin-left: 0.5rem; }
  .ml-3 { margin-left: 0.75rem; }
  .mr-1 { margin-right: 0.25rem; }
  .mr-2 { margin-right: 0.5rem; }
  .mr-3 { margin-right: 0.75rem; }
  .my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
  .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
  .my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
  .my-4 { margin-top: 1rem; margin-bottom: 1rem; }
  .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }

  .p-0 { padding: 0; }
  .p-1 { padding: 0.25rem; }
  .p-2 { padding: 0.5rem; }
  .p-3 { padding: 0.75rem; }
  .p-3\.5 { padding: 0.875rem; }
  .p-4 { padding: 1rem; }
  .p-5 { padding: 1.25rem; }
  .p-6 { padding: 1.5rem; }
  .p-8 { padding: 2rem; }
  .px-0 { padding-left: 0; padding-right: 0; }
  .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
  .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
  .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
  .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
  .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
  .px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
  .px-4 { padding-left: 1rem; padding-right: 1rem; }
  .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .px-8 { padding-left: 2rem; padding-right: 2rem; }
  .py-0 { padding-top: 0; padding-bottom: 0; }
  .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
  .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
  .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
  .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
  .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
  .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
  .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
  .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .pt-0 { padding-top: 0; }
  .pt-1 { padding-top: 0.25rem; }
  .pt-1\.5 { padding-top: 0.375rem; }
  .pt-2 { padding-top: 0.5rem; }
  .pt-3 { padding-top: 0.75rem; }
  .pt-4 { padding-top: 1rem; }
  .pt-5 { padding-top: 1.25rem; }
  .pt-6 { padding-top: 1.5rem; }
  .pt-8 { padding-top: 2rem; }
  .pb-0 { padding-bottom: 0; }
  .pb-2 { padding-bottom: 0.5rem; }
  .pb-3 { padding-bottom: 0.75rem; }
  .pb-4 { padding-bottom: 1rem; }
  .pb-6 { padding-bottom: 1.5rem; }
  .pb-8 { padding-bottom: 2rem; }
  .pb-10 { padding-bottom: 2.5rem; }
  .pb-12 { padding-bottom: 3rem; }
  .pb-16 { padding-bottom: 4rem; }
  .pb-24 { padding-bottom: 6rem; }
  .pb-32 { padding-bottom: 8rem; }
  .pl-1 { padding-left: 0.25rem; }
  .pl-2 { padding-left: 0.5rem; }
  .pl-3 { padding-left: 0.75rem; }
  .pl-4 { padding-left: 1rem; }
  .pl-5 { padding-left: 1.25rem; }
  .pl-8 { padding-left: 2rem; }
  .pr-1 { padding-right: 0.25rem; }
  .pr-1\.5 { padding-right: 0.375rem; }
  .pr-2 { padding-right: 0.5rem; }
  .pr-3 { padding-right: 0.75rem; }
  .pr-4 { padding-right: 1rem; }

  .space-y-0\.5 > * + * { margin-top: 0.125rem; }
  .space-y-1 > * + * { margin-top: 0.25rem; }
  .space-y-1\.5 > * + * { margin-top: 0.375rem; }
  .space-y-2 > * + * { margin-top: 0.5rem; }
  .space-y-2\.5 > * + * { margin-top: 0.625rem; }
  .space-y-3 > * + * { margin-top: 0.75rem; }
  .space-y-3\.5 > * + * { margin-top: 0.875rem; }
  .space-y-4 > * + * { margin-top: 1rem; }
  .space-y-5 > * + * { margin-top: 1.25rem; }
  .space-y-6 > * + * { margin-top: 1.5rem; }
  .space-y-8 > * + * { margin-top: 2rem; }

  /* -------------------------------------------------------- position -- */
  .static { position: static; }
  .relative { position: relative; }
  .absolute { position: absolute; }
  .fixed { position: fixed; }
  .sticky { position: -webkit-sticky; position: sticky; }
  .top-0 { top: 0; }
  .top-full { top: 100%; }
  .top-0\.5 { top: 0.125rem; }
  .bottom-0 { bottom: 0; }
  .left-0 { left: 0; }
  .right-0 { right: 0; }
  .left-6 { left: 1.5rem; }
  .inset-x-0 { left: 0; right: 0; }
  .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
  .z-10 { z-index: 10; }
  .z-20 { z-index: 20; }
  .z-30 { z-index: 30; }
  .z-40 { z-index: 40; }
  .z-50 { z-index: 50; }
  .overflow-hidden { overflow: hidden; }
  .overflow-auto { overflow: auto; }
  .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .overflow-y-auto { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .pointer-events-none { pointer-events: none; }

  /* ------------------------------------------------------------ text -- */
  .text-left { text-align: left; }
  .text-center { text-align: center; }
  .text-right { text-align: right; }
  .text-xs { font-size: 0.75rem; line-height: 1rem; }
  .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
  .text-base { font-size: 1rem; line-height: 1.5rem; }
  .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
  .text-2xl { font-size: 1.5rem; line-height: 2rem; }
  .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .text-\[10px\] { font-size: 10px; }
  .text-\[11px\] { font-size: 11px; }
  .text-\[12px\] { font-size: 12px; }
  .text-\[13px\] { font-size: 13px; }
  .text-\[14px\] { font-size: 14px; }
  .text-\[15px\] { font-size: 15px; }
  .text-\[16px\] { font-size: 16px; }
  .text-\[17px\] { font-size: 17px; }
  .text-\[19px\] { font-size: 19px; }
  .font-normal { font-weight: 400; }
  .font-medium { font-weight: 500; }
  .font-semibold { font-weight: 600; }
  .font-bold { font-weight: 700; }
  .font-extrabold { font-weight: 800; }
  .font-mono { font-family: Menlo, Monaco, Consolas, monospace; }
  .italic { font-style: italic; }
  .uppercase { text-transform: uppercase; }
  .underline { text-decoration: underline; }
  .no-underline { text-decoration: none; }
  .leading-none { line-height: 1; }
  .leading-tight { line-height: 1.25; }
  .leading-snug { line-height: 1.375; }
  .leading-relaxed { line-height: 1.625; }
  .whitespace-nowrap { white-space: nowrap; }
  .whitespace-pre-line { white-space: pre-line; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .break-words { overflow-wrap: break-word; word-wrap: break-word; }
  /* The executed agreement's long hash values (documents/show) ran the page
     sideways without it. */
  .break-all { word-break: break-all; }
  .tabular-nums { font-variant-numeric: tabular-nums; }
  .list-disc { list-style: disc; padding-left: 1.25rem; }
  .list-decimal { list-style: decimal; padding-left: 1.25rem; }

  /* ---------------------------------------- the colours that matter -- */
  /* Words and surfaces only, and only where leaving them out would put
     white words on a white page or hide the line between two things. */
  .bg-white, .bg-card { background-color: #fff; }
  .bg-page { background-color: #f5f4f1; }
  .bg-transparent { background-color: transparent; }
  .bg-\[\#1f1a14\] { background-color: #1f1a14; }
  .bg-slate-50 { background-color: #fafaf9; }
  .bg-slate-100 { background-color: #f5f5f4; }
  .bg-slate-200 { background-color: #e7e5e4; }
  .bg-slate-800 { background-color: #292524; }
  .bg-slate-900 { background-color: #1c1917; }
  .bg-amber-50 { background-color: #fffbeb; }
  .bg-amber-100 { background-color: #fef3c7; }
  .bg-amber-500 { background-color: #f59e0b; }
  .bg-emerald-50 { background-color: #ecfdf5; }
  .bg-emerald-100 { background-color: #d1fae5; }
  .bg-emerald-600 { background-color: #059669; }
  .bg-green-700 { background-color: #15803d; }
  .bg-red-50 { background-color: #fef2f2; }
  .bg-red-100 { background-color: #fee2e2; }
  .bg-rose-50 { background-color: #fff1f2; }
  .bg-sky-100 { background-color: #e0f2fe; }
  .bg-good-soft { background-color: #e9f7ee; }
  .bg-bad-soft { background-color: #fdecec; }
  .bg-warn-soft { background-color: #fef6d4; }
  .bg-accent { background-color: #b45309; }
  .bg-accent-soft { background-color: #fdf1e1; }
  .bg-amber-500.text-white { background-color: #b45309; }
  /* Every button that sets white words on its own colour has that colour
     here (test/lib/legacy_css_coverage_test.rb holds it): without it the
     words are white on the white page, a button nobody can read. */
  .bg-ink { background-color: #1f1a14; }
  .bg-slate-700 { background-color: #44403c; }
  .bg-sky-600 { background-color: #0284c7; }
  .bg-sky-700 { background-color: #0369a1; }
  .bg-red-600 { background-color: #dc2626; }
  .bg-rose-600 { background-color: #e11d48; }
  .bg-rose-700 { background-color: #be123c; }
  .bg-orange-500 { background-color: #f97316; }

  .text-white { color: #fff; }
  .text-ink { color: #1f1a14; }
  .text-muted { color: #6b6259; }
  .text-\[\#1f1a14\] { color: #1f1a14; }
  .text-slate-200 { color: #e7e5e4; }
  .text-slate-400 { color: #a8a29e; }
  .text-slate-500 { color: #78716c; }
  .text-slate-600 { color: #57534e; }
  .text-slate-700 { color: #44403c; }
  .text-slate-800 { color: #292524; }
  .text-slate-900 { color: #1c1917; }
  .text-amber-300 { color: #fcd34d; }
  .text-amber-500 { color: #f59e0b; }
  .text-amber-600 { color: #d97706; }
  .text-amber-700 { color: #b45309; }
  .text-amber-800 { color: #92400e; }
  .text-amber-900 { color: #78350f; }
  .text-emerald-600 { color: #059669; }
  .text-emerald-700 { color: #047857; }
  .text-emerald-800 { color: #065f46; }
  .text-emerald-900 { color: #064e3b; }
  .text-red-800 { color: #991b1b; }
  .text-red-900 { color: #7f1d1d; }
  .text-rose-700 { color: #be123c; }
  .text-rose-800 { color: #9f1239; }
  .text-rose-900 { color: #881337; }
  .text-sky-700 { color: #0369a1; }
  .text-sky-900 { color: #0c4a6e; }
  .text-blue-700 { color: #1d4ed8; }
  .text-good-ink { color: #166534; }
  .text-bad-ink { color: #991b1b; }
  .text-accent, .text-accent-strong { color: #92400e; }

  /* --------------------------------------------------- lines, corners -- */
  .border { border-width: 1px; }
  .border-2 { border-width: 2px; }
  .border-t { border-top-width: 1px; }
  .border-t-2 { border-top-width: 2px; }
  .border-b { border-bottom-width: 1px; }
  .border-b-2 { border-bottom-width: 2px; }
  .border-dashed { border-style: dashed; }
  .border-line, .border-slate-100, .border-slate-200 { border-color: #e6e1d8; }
  .border-line-strong, .border-slate-300, .border-slate-400 { border-color: #d3ccc0; }
  .border-slate-900 { border-color: #1c1917; }
  .border-amber-200, .border-amber-300, .border-amber-400 { border-color: #fcd34d; }
  .border-amber-500 { border-color: #f59e0b; }
  .border-emerald-200, .border-emerald-300 { border-color: #a7f3d0; }
  .border-emerald-600 { border-color: #059669; }
  .border-red-200, .border-rose-200, .border-rose-300 { border-color: #fecaca; }
  .border-red-600, .border-rose-500 { border-color: #dc2626; }
  .border-white\/10, .border-white\/20 { border-color: #4a433b; }
  .divide-y > * + * { border-top-width: 1px; }
  .rounded { border-radius: 0.25rem; }
  .rounded-md { border-radius: 0.375rem; }
  .rounded-lg { border-radius: 0.5rem; }
  .rounded-ui, .rounded-\[10px\] { border-radius: 0.625rem; }
  .rounded-xl { border-radius: 0.75rem; }
  .rounded-full { border-radius: 9999px; }
  .opacity-70 { opacity: 0.7; }
  .opacity-0 { opacity: 0; }
}