/* ============================================================================
   Eyeonic theme: the override layer on top of Bootstrap 4.6.1.

   Linked last in main/layout.html, after bootstrap.min.css and every vendor
   stylesheet, so a rule here wins on load order alone when it matches the
   selector Bootstrap uses. Bootstrap is compiled CSS with no Sass build: its
   own --primary variables are printed in :root but none of its components
   read them, so setting those does nothing. Every colour Bootstrap bakes in
   is overridden below by a rule that reads one of our tokens instead.

   Ground rules:
     - Restyle Bootstrap's classes, do not add parallel ones. .btn stays .btn.
     - No raw hex outside the token block, except inside SVG data URIs.
     - !important only where Bootstrap itself uses it (its utilities), with
       the reason next to it.

   Sections, in order: design tokens, base, type, links and utilities,
   buttons, form controls, cards, alerts, tables, dropdowns, modals, badges,
   shell (app bar and footer, main/partials/navbar.html and footer.html).
   ============================================================================ */

/* design tokens */
:root {
    --ink: #0F1E28;
    --slate: #1E3A47;
    --canvas: #EDF3F6;
    --page: #F5F9FB;
    --surface: #FFFFFF;
    --on-dark: #FFFFFF;            /* text on brand and slate fills */
    --surface-soft: #F7FAFC;
    --line: #D3DEE5;
    --line-soft: #E6EDF1;
    --line-control: #B4C6D0;
    --muted: #55707F;
    --label: #3C5B69;
    --brand: #0089C7;
    --brand-700: #056A99;
    --brand-800: #044F73;
    --brand-tint: #E7F3FA;
    --brand-line: #B4CDDA;
    --info-line: #BCDDEF;
    --info-ink: #0E3E56;
    --ok: #1F7A5C;
    --ok-tint: #E4F3EC;
    --ok-line: #BFE0D2;
    --ok-ink: #114A36;
    --alert: #A32017;
    --alert-tint: #FBEBE9;
    --alert-line: #F0C6C1;
    --amber-tint: #FDF1DC;
    --amber-line: #EFD6AC;
    --amber-ink: #7E4A05;
    --star: #E5202A;
    --disabled-bg: #EEF2F5;
    --disabled-ink: #8698A3;
    --disabled-line: #E0E8ED;
    --hover-soft: #F1F6F9;
    --th-bg: #F4F8FA;
    --th-ink: #4E6674;
    --text: var(--ink);
    --text-2: #4A6472;
    --text-3: #7B95A3;
    --r: 12px;
    --radius-card: 12px;
    --radius-control: 10px;
    --radius-pill: 20px;
    --shadow: 0 1px 2px rgba(15, 30, 40, .06), 0 6px 18px rgba(15, 30, 40, .06);
    --shadow-menu: 0 14px 34px rgba(15, 30, 40, .22);
    --shadow-modal: 0 24px 60px rgba(11, 23, 31, .4);
    --focus-ring: 3px solid var(--brand);
    --font-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-legible: 'Atkinson Hyperlegible', Verdana, system-ui, sans-serif;
    --s1: 8px;
    --s2: 16px;
    --s3: 24px;
    --s4: 32px;
    --bar-ink: #DCEAF1;
    --bar-hover: rgba(255, 255, 255, .13);
    --bar-on: rgba(255, 255, 255, .16);
    --foot-ink: #C6DCE6;
    --foot-head: #8FB3C4;
    --foot-underline: rgba(255, 255, 255, .55);
    --bar-divider: rgba(255, 255, 255, .28);  /* .practice */
    --bar-practice: #EAF4F9;
    --alert-ink: #8E2A1F;          /* .msg */
    --invalid-bg: #FDF0EE;         /* .showerr .fld .inp */
    --invalid-line: #E3A9A2;
    --line-hover: #9FB6C4;         /* .regionpick:hover, .method:hover */
    --toggle-track: #F2F7F9;       /* .seg */
    --seg-ink: #5A7180;            /* .seg-btn, .pwrules li */
    --rule-bg: #F4F8FB;            /* .pwrules */
    --rule-ink: #33505E;
    --rule-mark: #A9BECB;          /* .pwrules .rule-m */
    --body-2: #2C4652;             /* .regprac-lead, .acc-a p, .plancard li */
    --plan-ink: #41606F;           /* .plancard > p */
    --sub-ink: #3E5C6B;            /* .p-sub */
    --chip-line: #B7DCEF;          /* .limitchip */
    --row-hover: #F8FBFC;          /* table.tbl tbody tr:hover td */
    --foot-bg: #FAFCFD;            /* .modal-foot */
    --field-disabled-bg: #F0F4F7;  /* input.inp:disabled */
    --field-disabled-line: #DFE7EC;
    --video-bg: #22323A;           /* .video */
    --video-line: #1A2830;
    --overlay: #0B171F;            /* .overlay, at .55 */
    --shadow-auth: 0 1px 3px rgba(15, 30, 40, .07);  /* .authcard */
}

/* base */
body {
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-ui);
}

/* One focus treatment for everything reachable by keyboard. Bootstrap draws
   focus as a box-shadow on mouse focus too; the rules below drop that in
   favour of this ring, which only shows for keyboard focus. */
:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible {
    /* The class selectors match Bootstrap's own `:focus { outline: 0 }`
       rules, which would otherwise outrank the bare :focus-visible. */
    outline: var(--focus-ring);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* type: the patient side reads in Atkinson Hyperlegible at a larger scale.
   The class is set on <body> in main/layout.html. */
h1, h2, h3, .modal-title {
    font-family: var(--font-legible);
    color: var(--ink);
}

/* Bootstrap sets headings to 500; the prototype keeps the browser's bold. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
}

h4, h5, h6 {
    color: var(--ink);
}

.theme-patient #main-body {
    font-family: var(--font-legible);
    font-size: 19px;
}

.theme-patient #main-body small,
.theme-patient #main-body .small {
    font-size: 15.5px;
}

/* links and utilities: Bootstrap's blue, retinted. Its utilities carry
   !important, so these have to as well to win. */
a {
    color: var(--brand-700);
}

a:hover {
    color: var(--brand-800);
}

.text-primary {
    color: var(--brand-700) !important;
}

.bg-primary {
    background-color: var(--brand-700) !important;
}

.border-primary {
    border-color: var(--brand-700) !important;
}

.text-muted {
    color: var(--muted) !important;
}

.text-danger {
    color: var(--alert) !important;
}

.page-link {
    color: var(--brand-700);
    border-color: var(--line);
}

.page-link:hover {
    color: var(--brand-800);
    background-color: var(--brand-tint);
}

.page-item.active .page-link {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
}

.page-link:focus {
    box-shadow: none;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--brand-700);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
}

.progress-bar {
    background-color: var(--brand-700);
}

/* buttons. Primary is the expected next step, one per screen; everything
   else is outlined. Selectors match Bootstrap's, including the :active ones,
   or its colours come back on click. */
.btn {
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    border-radius: var(--radius-control);
    padding: 13px 22px;
    border-width: 1.5px;
    transition: background-color .12s, border-color .12s, color .12s;
}

.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus {
    box-shadow: none;
}

.btn-sm {
    padding: 9px 15px;
    font-size: 14.5px;
    border-radius: 8px;
}

.btn-lg {
    padding: 16px 26px;
    font-size: 18px;
}

.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
    color: var(--on-dark);
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--brand-800);
    border-color: var(--brand-800);
    color: var(--on-dark);
}

/* Bootstrap's filled grey and its outlined blues all become the secondary
   style: white, brand ink, light brand border. */
.btn-secondary,
.btn-secondary:focus,
.btn-secondary.focus,
.btn-info,
.btn-info:focus,
.btn-info.focus,
.btn-outline-primary,
.btn-outline-info {
    background-color: var(--surface);
    border-color: var(--brand-line);
    color: var(--brand-800);
}

.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle,
.btn-info:hover,
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle,
.btn-outline-info:hover,
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active {
    background-color: var(--brand-tint);
    border-color: var(--brand);
    color: var(--brand-800);
}

/* Ghost: the quiet action, such as Cancel or Back. Bootstrap has no ghost,
   so .btn-ghost is new; .btn-outline-secondary already plays that role. */
.btn-ghost,
.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--line);
    color: var(--text-2);
}

.btn-ghost:hover,
.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
    background-color: var(--hover-soft);
    border-color: var(--line);
    color: var(--ink);
}

/* Red is reserved for destructive actions, and even those are outlined. */
.btn-danger,
.btn-danger:focus,
.btn-danger.focus,
.btn-outline-danger {
    background-color: var(--surface);
    border-color: var(--alert-line);
    color: var(--alert);
}

.btn-danger:hover,
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.btn-outline-danger:hover,
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active {
    background-color: var(--alert-tint);
    border-color: var(--alert-line);
    color: var(--alert);
}

.btn-link {
    color: var(--brand-700);
    font-weight: 600;
}

.btn-link:hover {
    color: var(--brand-800);
}

.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
    background-color: var(--disabled-bg);
    border-color: var(--disabled-line);
    color: var(--disabled-ink);
    opacity: 1;
    cursor: not-allowed;
}

.btn-link:disabled,
.btn-link.disabled {
    background-color: transparent;
    border-color: transparent;
}

/* form controls. Bootstrap fixes .form-control to one line height; the
   minimum here is the 48px target, and the -sm variants keep their compact
   size for the dense admin tables. */
label,
.form-control-label {
    font-weight: 600;
    font-size: 14.5px;
    line-height: normal;
    color: var(--label);
    margin-bottom: 7px;
}

.custom-control-label,
.form-check-label,
input[type="checkbox"] + label,
input[type="radio"] + label {
    font-weight: 400;
    font-size: inherit;
    color: inherit;
}

.form-control,
.custom-select {
    height: auto;
    min-height: 48px;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
    background-color: var(--surface);
    border: 1.5px solid var(--line-control);
    border-radius: var(--radius-control);
    padding: 12px 14px;
}

/* One drawn arrow, inset from the border, for both kinds of single-line select.
   Most of the app's selects are select.form-control, whose native arrow sits
   against the border. A list box (multiple or size) keeps its native look. */
.custom-select,
select.form-control:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' fill='none' stroke='%23335A6B' stroke-width='2' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

/* Bootstrap moves an invalid select's background to make room for its icon. */
select.form-control.is-invalid,
.was-validated select.form-control:invalid {
    background-position: right 14px center;
}

.form-control-sm,
.custom-select-sm {
    min-height: 36px;
    font-size: 14.5px;
    padding: 6px 10px;
    border-radius: 8px;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--line-control);
    box-shadow: none;
    color: var(--ink);
}

.form-control::placeholder {
    color: var(--text-3);
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
    background-color: var(--field-disabled-bg);
    border-color: var(--field-disabled-line);
    color: var(--disabled-ink);
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.custom-select.is-invalid {
    border-color: var(--invalid-line);
    background-color: var(--invalid-bg);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: var(--invalid-line);
    box-shadow: none;
}

.invalid-feedback {
    margin-top: 6px;
    color: var(--alert);
    font-size: 13.5px;
    line-height: 1.4;
}

.form-text,
.form-text.text-muted {
    font-size: 14.5px;
    line-height: 1.6;
}

.input-group-text {
    font-size: 15px;
    background-color: var(--surface-soft);
    border: 1.5px solid var(--line-control);
    border-radius: var(--radius-control);
    color: var(--label);
}

.custom-file-label {
    height: auto;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid var(--line-control);
    border-radius: var(--radius-control);
}

.custom-file-label::after {
    height: auto;
    padding: 12px 14px;
    line-height: inherit;
}

.custom-file {
    height: auto;
    min-height: 48px;
}

/* cards */
.card {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
}

.card-header {
    background-color: var(--surface-soft);
    border-bottom: 1px solid var(--line-soft);
}

.card-header:first-child {
    border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
}

.card-footer {
    background-color: var(--surface-soft);
    border-top: 1px solid var(--line-soft);
}

.card-footer:last-child {
    border-radius: 0 0 calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px);
}

.card-title {
    color: var(--ink);
}

/* alerts. Tinted panel with a coloured left rule; status lives in the tint,
   never in a filled block. */
.alert {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    padding: 14px 18px;
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.5;
}

.alert-success {
    background-color: var(--ok-tint);
    border-color: var(--ok-line);
    border-left: 4px solid var(--ok);
    color: var(--ok-ink);
    font-weight: 500;
}

.alert-info,
.alert-primary {
    background-color: var(--brand-tint);
    border-color: var(--info-line);
    color: var(--info-ink);
    font-size: 15.5px;
    line-height: 1.6;
}

.alert-warning {
    background-color: var(--amber-tint);
    border-color: var(--amber-line);
    color: var(--amber-ink);
    padding: 14px 16px;
    font-size: 15px;
}

.alert-danger {
    background-color: var(--alert-tint);
    border-color: var(--alert-line);
    color: var(--alert-ink);
}

.alert-secondary,
.alert-light {
    background-color: var(--surface-soft);
    border-color: var(--line-soft);
    color: var(--text-2);
}

.alert .alert-link {
    color: inherit;
}

/* tables. One treatment for every list: quiet uppercase header, roomy rows,
   hover. The rounded frame is skipped on .table-bordered, which draws its
   own cell grid. */
.table {
    color: var(--ink);
}

.table th,
.table td {
    padding: 14px 16px;
    vertical-align: middle;
    border-top: 0;
    border-bottom: 1px solid var(--line-soft);
}

.table thead th {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--th-ink);
    background-color: var(--th-bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.table-sm th,
.table-sm td {
    padding: 8px 10px;
}

.table:not(.table-bordered) {
    border-collapse: separate;
    border-spacing: 0;
}

.table:not(.table-bordered) thead th:first-child {
    border-left: 1px solid var(--line);
    border-top-left-radius: var(--radius-control);
}

.table:not(.table-bordered) thead th:last-child {
    border-right: 1px solid var(--line);
    border-top-right-radius: var(--radius-control);
}

.table:not(.table-bordered) tbody td:first-child {
    border-left: 1px solid var(--line);
}

.table:not(.table-bordered) tbody td:last-child {
    border-right: 1px solid var(--line);
}

.table:not(.table-bordered) tbody tr:last-child td {
    border-bottom: 1px solid var(--line);
}

.table:not(.table-bordered) tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-control);
}

.table:not(.table-bordered) tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-control);
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border: 1px solid var(--line);
}

.table tbody tr:hover td {
    background-color: var(--row-hover);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--surface-soft);
}

/* dropdowns */
.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-menu);
    padding: 8px;
    font-size: 16px;
}

.dropdown-item {
    color: var(--ink);
    font-weight: 500;
    padding: 11px 13px;
    border-radius: 8px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--brand-tint);
    color: var(--brand-800);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--brand-700);
    color: var(--on-dark);
}

.dropdown-divider {
    border-top-color: var(--line-soft);
    margin: 6px 8px;
}

/* modals */
.modal-backdrop {
    background-color: var(--overlay);
}

.modal-backdrop.show {
    opacity: .55;
}

@media (min-width: 576px) {
    .modal-dialog:not(.modal-lg):not(.modal-xl):not(.modal-sm) {
        max-width: 560px;
    }
}

.modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: var(--shadow-modal);
    overflow: hidden;
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--line-soft);
    align-items: center;
}

.modal-title {
    font-size: 21px;
}

.modal-body {
    padding: 22px 24px;
}

.modal-footer {
    padding: 18px 24px;
    border-top: 1px solid var(--line-soft);
    background-color: var(--foot-bg);
}

.modal-header .close {
    width: 38px;
    height: 38px;
    margin: -4px -4px -4px auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text-2);
    text-shadow: none;
    opacity: 1;
}

.modal-header .close:hover {
    background-color: var(--hover-soft);
}

/* badges: status is a small pill, never a filled cell */
.badge {
    font-weight: 700;
    padding: 5px 10px;
}

.badge-pill {
    padding: 6px 14px;
    font-size: 14.5px;
}

.badge-primary,
.badge-info {
    background-color: var(--brand-tint);
    color: var(--brand-800);
}

.badge-success {
    background-color: var(--ok-tint);
    color: var(--ok);
}

.badge-warning {
    background-color: var(--amber-tint);
    color: var(--amber-ink);
}

.badge-danger {
    background-color: var(--alert-tint);
    color: var(--alert);
}

.badge-secondary,
.badge-light {
    background-color: var(--line-soft);
    color: var(--text-2);
}

/* icons from main/partials/icons.html */
.icon {
    width: 22px;
    height: 22px;
    flex: none;
}

/* shell: the app bar. Matches Bootstrap's .navbar-dark .navbar-nav .nav-link
   so these win on load order. */
.site-header .navbar {
    background-color: var(--slate);
    min-height: 62px;
    padding: 0;
    font-family: var(--font-ui);
}

/* .appbar runs edge to edge with 22px either side. main.css fixes every
   .container-fluid at 1200px above 1400px, which boxed the bar in; only the
   bar is released, the page body keeps that width. 100%, not auto: the bar is
   a flex container, so auto shrinks the row to its content and Bootstrap's
   margin: 0 auto then centres it. */
.site-header .navbar > .container-fluid {
    width: 100%;
    max-width: none;
    padding: 0 22px;
}

/* .mark */
.site-header .brand-mark {
    width: 36px;
    height: 36px;
    display: block;
}

.site-header .navbar-brand {
    margin-left: 10px;
    padding: 0;
    font-family: var(--font-legible);
    font-weight: 700;
    font-size: 20px;
    color: var(--on-dark);
}

/* .appbar { gap:14px } after the name. Collapsed, Bootstrap spreads the logo,
   the name and the toggler across the bar with space-between, so the name
   takes the slack and pushes the toggler to the far side. */
.site-header .navbar-brand {
    margin-right: 14px;
}

@media (max-width: 991.98px) {
    .site-header .navbar-brand {
        margin-right: auto;
    }
}

/* .practice: the practice a clinician is signed in under, beside the name.
   Filled by layout.html's script; empty for everyone else, and then it takes
   no room at all. */
.site-header #user-name {
    margin-right: 14px;
    padding-left: 16px;
    border-left: 1px solid var(--bar-divider);
    font-size: 16px;
    font-weight: 600;
    color: var(--bar-practice);
}

.site-header #user-name:empty {
    display: none;
}

/* Each link draws its own rounded hover background; the gap keeps
   neighbouring ones from touching. Works stacked in the collapsed menu too. */
.site-header .navbar-nav {
    gap: 4px;
}

.site-header .navbar-dark .navbar-nav .nav-link,
.site-header .navbar-nav .nav-link {
    color: var(--bar-ink);
    font-size: 15px;
    font-weight: 500;
    padding: 9px 12px;
    border-radius: 8px;
    white-space: nowrap;
}

.site-header .navbar-dark .navbar-nav .nav-link:hover,
.site-header .navbar-dark .navbar-nav .nav-link:focus {
    background-color: var(--bar-hover);
    color: var(--on-dark);
}

.site-header .navbar-dark .navbar-nav .nav-link.active,
.site-header .navbar-dark .navbar-nav .show > .nav-link,
.site-header .navbar-dark .navbar-nav .nav-link[aria-expanded="true"] {
    background-color: var(--bar-on);
    color: var(--on-dark);
    font-weight: 600;
}

/* Register: the one call to action in the signed-out bar. */
.site-header .navbar-dark .navbar-nav .nav-link.nav-cta,
.site-header .navbar-dark .navbar-nav .nav-link.nav-cta.active {
    background-color: var(--brand-700);
    color: var(--on-dark);
    font-weight: 600;
}

.site-header .navbar-dark .navbar-nav .nav-link.nav-cta:hover {
    background-color: var(--brand-800);
}

.site-header .dropdown-menu {
    min-width: 274px;
}

.site-header .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dropdown-item .mi {
    color: var(--brand-700);
}

/* shell: the footer, four labelled columns */
.site-footer {
    background-color: var(--slate);
    color: var(--foot-ink);
    font-family: var(--font-ui);
}

.site-footer-cols {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 26px 26px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

@media (max-width: 900px) {
    .site-footer-cols {
        grid-template-columns: 1fr 1fr;
    }
}

.foot-col h2 {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--foot-head);
    margin: 0 0 12px;
}

.foot-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.foot-col a {
    color: var(--foot-ink);
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.foot-col a:hover {
    color: var(--on-dark);
    border-bottom-color: var(--foot-underline);
}

.foot-col .extico {
    width: 13px;
    height: 13px;
    stroke-width: 2;
    margin-left: 5px;
    vertical-align: -1px;
    opacity: .7;
}

.site-footer-notices {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 26px 20px;
}

/* before login: the login card (users/login_v2.html) */
.auth-box {
    max-width: 440px;
    margin: 40px auto;
}

.auth-card {
    background-color: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    padding: 34px 36px 30px;
    box-shadow: var(--shadow-auth);
}

@media (max-width: 480px) {
    .auth-card {
        padding: 26px 20px 22px;
    }
}

.auth-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.auth-title {
    font-family: var(--font-ui);
    font-size: 27px;
    font-weight: 700;
    margin: 0;
}

.auth-card .form-group {
    margin-bottom: 18px;
}

/* Forgot password reuses the card. With no region pill beside it the heading
   stands alone, so its line takes .auth-head's 26px below on its own. */
.auth-title-solo {
    margin-bottom: 10px;
}

/* .hint */
.auth-lead {
    margin: 0 0 22px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted);
}

/* .fld margin: the widget sits one field-gap above Continue */
.auth-captcha {
    margin-bottom: 18px;
}

/* The sign in message sits between the password and Continue, next to the
   fields it is about, rather than at the top of the page. */
.auth-msg {
    margin: 0 0 18px;
    padding: 11px 14px;
    border: 1px solid var(--alert-line);
    border-radius: var(--radius-control);
    background-color: var(--alert-tint);
    color: var(--alert-ink);
    font-size: 14.5px;
    line-height: 1.5;
}

.auth-rule {
    border-top: 1px solid var(--line-soft);
    margin: 24px 0 18px;
}

.auth-links {
    margin: 0 0 10px;
    font-size: 15px;
    color: var(--slate);
}

.auth-links:last-child {
    margin-bottom: 0;
}

.auth-links a {
    color: var(--brand-800);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-links a:hover {
    color: var(--brand-700);
}

.auth-sub {
    color: var(--muted);
}

/* Region selector: a pill on the heading line, not a form field. It decides
   which address gets the credentials, so it does not queue with them.
   Doubled class to beat the .custom-select restyle above. */
.custom-select.regionpick {
    flex: none;
    width: auto;
    max-width: 150px;
    min-height: 40px;
    padding: 9px 34px 9px 15px;
    font-size: 16px;
    font-weight: 600;
    color: var(--slate);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background-position: right 12px center;
    cursor: pointer;
}

.custom-select.regionpick:hover {
    border-color: var(--line-hover);
}

/* form details shared by registration, reset password and the profile */
.required-asterisk {
    color: var(--alert);
    font-weight: 700;
}

/* The show/hide toggle sits inside the right edge of a password field. */
.eye-icon {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-2);
    cursor: pointer;
}

.photo-input_border {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid var(--line-control);
    border-radius: var(--radius-control);
    background-color: var(--surface);
    font-size: 16px;
}

.photo-input_border.is-invalid {
    border-color: var(--invalid-line);
    background-color: var(--invalid-bg);
}

/* Password rules: a marker column that is always there, so a rule does not
   shift sideways when the page's own script marks it met or unmet as the
   person types. The script toggles .password-valid / .password-invalid. */
#password-requirements {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background-color: var(--rule-bg);
    font-size: 14px;
    color: var(--rule-ink);
}

#password-requirements p {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 9px;
    margin: 0 0 5px;
    font-size: 14px;
    color: var(--seg-ink);
}

#password-requirements p:last-child {
    margin-bottom: 0;
}

#password-requirements .password-heading {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--ink);
}

#password-requirements p:not(.password-heading)::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f111";
    color: var(--rule-mark);
}

#password-requirements p.password-valid,
#password-requirements p.password-valid::before {
    color: var(--ok);
}

#password-requirements p.password-valid::before {
    content: "\f058";
}

#password-requirements p.password-invalid,
#password-requirements p.password-invalid::before {
    color: var(--alert);
}

#password-requirements p.password-invalid::before {
    content: "\f057";
}

/* Parsley's client-side errors read like the server's. */
.form-control.parsley-error,
.custom-select.parsley-error {
    border-color: var(--alert);
    background-color: var(--alert-tint);
    color: var(--ink);
}

.parsley-errors-list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--alert);
}

/* before login: Join Today (users/initial_register.html) and the clinician
   and practice forms that extend it */
.reg-container {
    padding: 0;
}

/* #reg-card */
.reg-card {
    max-width: 960px;
    padding: 26px 28px;
    margin: 8px auto 24px;
}

/* .regform { gap: 6px 22px }: 22px between the two columns, not Bootstrap's 30px */
.reg-card .row {
    margin-left: -11px;
    margin-right: -11px;
}

.reg-card .row > [class*="col"] {
    padding-left: 11px;
    padding-right: 11px;
}

@media (max-width: 576px) {
    .reg-card {
        padding: 20px 16px;
    }
}

.reg-title {
    font-size: 30px;
    margin: 0 0 18px;
}

.reg-pick {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    font-size: 16px;
    color: var(--label);
}

/* Clinician / Practice: a segmented switch. Links, since each is its own page. */
.seg {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background-color: var(--toggle-track);
}

.seg-btn {
    padding: 9px 22px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--seg-ink);
    text-decoration: none;
}

.seg-btn:hover {
    color: var(--ink);
    text-decoration: none;
}

.seg-btn.active,
.seg-btn.active:hover {
    background-color: var(--brand-700);
    color: var(--on-dark);
}

/* Every field keeps room for one line of error below it (.fld .err: 6px, then
   20px), then the 6px row gap, so validation does not push the form down. shortcut: an error longer than one line
   still overlaps the field below; give it a wrapper with a min-height if a
   longer message ever ships. */
.reg-card .form-group {
    position: relative;
    margin-bottom: 0;
    padding-bottom: 32px;
}

.reg-card .form-group > .invalid-feedback,
.reg-card .form-group > .form-control + .parsley-errors-list,
.reg-card .form-group > .custom-select + .parsley-errors-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 26px);
    margin: 0;
}

.reg-card .invalid-feedback {
    display: block;
}

/* A section rule sits midway: the field above already ends in 32px of error
   room, so the rule adds none above and the same 32px below. */
.reg-card hr {
    border-top-color: var(--line-soft);
    margin: 0 0 32px;
}

.reg-card input::-ms-reveal,
.reg-card input::-ms-clear {
    display: none;
}

.reg-card input::-webkit-outer-spin-button,
.reg-card input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.reg-card input[type=number] {
    -moz-appearance: textfield;
}

/* Drop Bootstrap's error icon on text fields; selects keep their arrow. */
.reg-card input.form-control.is-invalid,
.reg-card textarea.form-control.is-invalid,
.reg-card .was-validated input.form-control:invalid,
.reg-card .was-validated textarea.form-control:invalid {
    background-image: none;
    padding-right: 14px;
}

.reg-card .input-group-text {
    min-width: 45px;
}

/* .ackrow: the terms acknowledgement */
.reg-card .ack-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15.5px;
    line-height: 1.55;
}

.reg-card .ack-row input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex: none;
}

/* The row's 1.55 line height, not the labels' normal: the 20px box, 2px down,
   centres on a 24px first line. */
.reg-card .ack-row label {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

#billingValidationMessage,
#adminValidationMessage,
#validation-msg,
#practiceValidationMessage {
    color: var(--alert);
    font-size: 13.5px;
    line-height: 1.4;
}

/* photo ID preview */
/* Takes no room until a photo is chosen. */
#photo-preview-container:empty {
    display: none;
}

#photo-preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--line-soft);
}

.reg-card .img-fluid {
    width: 100px;
    margin: 10px;
    border-radius: 4px;
}

.reg-card .css-account-img,
.reg-card .css-pdf-image {
    width: 120px;
    height: 120px;
    margin: 10px;
    object-fit: cover;
    border: none;
    border-radius: 4px;
}

/* repeated practice addresses (users/clinician/address_macro.html) */
/* .addr-block: Name of Practice and Full Address side by side. The hidden
   inputs take no cell; the remove button and the rule span both. */
.reg-card .subform {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
}

.reg-card .subform > div:not(.form-group),
.reg-card .subform > hr {
    grid-column: 1 / -1;
}

@media (max-width: 575.98px) {
    .reg-card .subform {
        grid-template-columns: 1fr;
    }
}

/* Remove Address: destructive, so outlined red (.btn-danger), on every page
   that repeats addresses. Its old inline margin moves here. */
/* Flex, because js/clinician_address.html shows the button with an inline
   display: inline, which drops its width and lets its padding spill over the
   Add button. A flex item is laid out as a block whatever its display says;
   display: none still hides it. */
.addr-remove {
    display: flex;
    margin: 15px 5px 15px 0;
}

/* Remove Address: full width under the pair. The fields above keep only their
   error room (26px), and the rule between addresses has 24px either side, so
   each block reads as one unit rather than the button floating off its fields. */
.reg-card .subform > .form-group {
    padding-bottom: 26px;
}

/* ...so an error there sits 6px under its field, in the 20px left below it. */
.reg-card .subform > .form-group > .invalid-feedback,
.reg-card .subform > .form-group > .form-control + .parsley-errors-list {
    top: calc(100% - 20px);
}

.reg-card .subform .addr-remove {
    margin: 0;
}

.reg-card .subform .addr-remove .remove {
    flex: 1;
}

.reg-card .subform hr.addr-rule {
    margin: 24px 0;
}

/* The rule separates addresses, so the last one has none above the Add button. */
.reg-card #subforms-container > .subform:last-child hr.addr-rule {
    display: none;
}

/* ...so its Remove button carries the 24px the rule would have given before
   the Add button. On the button, not the block: with one address the button is
   hidden and the fields' own error room is space enough. */
.reg-card #subforms-container > .subform:last-child .addr-remove .remove {
    margin-bottom: 24px;
}

/* At five addresses js/clinician_address.html hides the Add button with an
   inline display: none, and then there is nothing below to space from. */
.reg-card .form-group:has(> #add[style*="none"]) #subforms-container > .subform:last-child .addr-remove .remove {
    margin-bottom: 0;
}

/* practice forms: the limit chip beside the heading */
.practice-header {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.limit-border {
    display: inline-block;
    padding: 5px 13px;
    border: 1px solid var(--chip-line);
    border-radius: 999px;
    background-color: var(--brand-tint);
    color: var(--brand-800);
    font-size: 13.5px;
    font-weight: 600;
}

.detail-text {
    color: var(--muted);
    font-size: 14.5px;
}

/* before login: the Practice tab (users/practice/practice_registration.html)
   Read, then choose a limit, then fill in its form. */
.practice-h {
    font-size: 24px;
    margin: 26px 0 12px;
    text-align: center;
}

.practice-tab > .practice-h:first-child {
    margin-top: 0;
}

.practice-lead {
    max-width: 78ch;
    margin: 0 auto 8px;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--body-2);
    text-align: center;
}

.reg-card hr.practice-rule {
    margin: 30px 0;
}

/* FAQ accordion: Bootstrap's collapse, drawn as the prototype's +/- list */
.faq {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    overflow: hidden;
    background-color: var(--surface);
}

.faq-h {
    margin: 0;
    font-family: var(--font-ui);
}

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 0;
    background-color: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.faq-q:hover,
.faq-q[aria-expanded="true"] {
    background-color: var(--brand-tint);
    color: var(--brand-800);
}

.faq-sign {
    position: relative;
    width: 22px;
    height: 22px;
    flex: none;
}

.faq-sign::before,
.faq-sign::after {
    content: "";
    position: absolute;
    border-radius: 2px;
    background-color: var(--brand-700);
}

.faq-sign::before {
    left: 0;
    right: 0;
    top: 10px;
    height: 2.5px;
}

.faq-sign::after {
    top: 0;
    bottom: 0;
    left: 10px;
    width: 2.5px;
    transition: transform .15s;
}

.faq-q[aria-expanded="true"] .faq-sign::after {
    transform: scaleY(0);
}

.faq-a {
    padding: 2px 18px 18px;
    border-top: 1px solid var(--line-soft);
    font-size: 16px;
    line-height: 1.7;
    color: var(--body-2);
}

.faq-a p,
.faq-a ul {
    margin: 14px 0 0;
    max-width: 82ch;
}

/* the two limits (users/practice/plan_cards.html) */
.plan-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 26px;
}

@media (max-width: 820px) {
    .plan-pair {
        grid-template-columns: 1fr;
    }
}

.plan-card {
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background-color: var(--surface);
}

.plan-card.on {
    border-color: var(--brand-700);
    box-shadow: 0 0 0 1px var(--brand-700);
}

.plan-card h3 {
    font-size: 21px;
    margin: 0 0 10px;
}

.plan-card > p {
    margin: 0 0 16px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--plan-ink);
}

.plan-features {
    display: grid;
    gap: 11px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.plan-features li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 11px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--body-2);
}

.plan-features li::before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    font-size: 20px;
    line-height: 22px;
    color: var(--brand-700);
}

.plan-card .btn {
    margin-top: auto;
}

/* The one panel a card opens. A full width panel under two cards belongs to
   neither by default, so it is tied to its card twice: the card is marked,
   and the panel points back at it. Stacked, the pointer would lie, so it goes. */
.plan-panel {
    position: relative;
    margin-top: 26px;
    padding: 28px 28px 24px;
    border: 1.5px solid var(--brand-700);
    border-radius: var(--radius-card);
    background-color: var(--surface);
    scroll-margin-top: 70px;
}

.plan-panel::before {
    content: "";
    position: absolute;
    top: -9px;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border-left: 1.5px solid var(--brand-700);
    border-top: 1.5px solid var(--brand-700);
    background-color: var(--surface);
    transform: rotate(45deg);
}

.plan-panel.from-standard::before {
    left: 25%;
}

.plan-panel.from-custom::before {
    left: 75%;
}

@media (max-width: 820px) {
    .plan-panel::before {
        display: none;
    }
}

@media (max-width: 576px) {
    .plan-panel {
        padding: 20px 16px;
    }
}

/* .regsect-h */
.practice-header {
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.practice-header h4 {
    margin: 0;
    font-family: var(--font-legible);
    font-size: 22px;
}

/* the home page (main/home.html): the public home and the signed-in one.
   Ids stay on the elements js/code/home_moon_UI.html reaches for. */
.home {
    max-width: 1180px;
    margin: 8px auto 32px;
    font-family: var(--font-legible);
}

/* The hero sits straight on the page: heading and line on the left, the video
   on the right. */
.home-hero {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: stretch;
    padding: 16px 0 0;
    margin-bottom: 26px;
}

/* .setup-left */
.home-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 768px) {
    .home-hero {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 8px;
    }
}

.home-title {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.005em;
    margin: 0;
}

.home-sub {
    margin: 8px 0 0;
    font-size: 18.5px;
    line-height: 1.5;
    color: var(--sub-ink);
}

/* #home-hr is an invisible spacer from the old jumbotron; the grid gap does its job now. */
.home-hero-text hr {
    margin: 0;
}

.home-hero-video video {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--video-line);
    border-radius: var(--radius-card);
    background-color: var(--video-bg);
}

/* .qgrid / .begin-row: 14px between buttons, not Bootstrap's 30px gutter */
.home-grid {
    row-gap: 14px;
    margin-left: -7px;
    margin-right: -7px;
}

.home-grid > [class*="col-"] {
    padding-left: 7px;
    padding-right: 7px;
}

.home-grid .lead {
    margin: 0;
    height: 100%;
}

.home-grid .btn {
    height: 100%;
    font-family: var(--font-legible);
    font-size: 17.5px;
    line-height: 1.3;
    padding: 16px 12px;
}

/* The four questions read as plain choices; the one whose answer is open is filled. */
.home-grid .btn.home-q {
    font-weight: 400;
}

.home-grid .btn.home-q[aria-expanded="true"],
.home-grid .btn.home-q[aria-expanded="true"]:hover {
    background-color: var(--brand-700);
    border-color: var(--brand-800);
    color: var(--on-dark);
}

/* One answer at a time, under the buttons. A panel, not a dialogue, so there
   is nothing to find and dismiss. */
.home-qpanel {
    max-width: 900px;
    margin-top: 16px;
    padding: 24px 28px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--brand-700);
    border-radius: var(--radius-card);
    background-color: var(--surface);
    font-size: 19.5px;
    line-height: 1.55;
}

.home-qpanel h2 {
    font-size: 24px;
    margin: 0 0 14px;
}

.home-qpanel .text-danger {
    font-weight: 700;
}

.home-qpanel .btn.home-qclose {
    height: auto;
    margin-top: 20px;
    padding: 9px 15px;
    font-family: var(--font-ui);
    font-size: 14.5px;
}

.home-actions .btn {
    font-size: 19px;
    padding: 18px 14px;
}

/* Only the visible divider: #home-hr inside the hero is a hidden spacer. */
.home > hr {
    border-top: 2px solid var(--line-soft);
    margin: 26px 0;
}

/* "Time zone is not set", for a signed-in user who never chose one */
.timezone-banner-dashboard-pin {
    width: 100%;
    margin-bottom: 1rem;
    padding: 14px 18px;
    border: 1px solid var(--alert-line);
    border-radius: var(--radius-control);
    background-color: var(--alert-tint);
    color: var(--alert-ink);
}

/* foot of a registration form (render_form_foot in users/partials/form_field.html):
   reCAPTCHA left, submit right, centred on one line; stacked when there is no room */
.form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
}

.form-foot .btn {
    padding: 14px 34px;
}


/* .tip: an instruction moved off a label (field_tip in users/partials/form_field.html) */
.field-tip {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 6px;
}

.field-tip-btn {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--line-soft);
    color: var(--plan-ink);
    cursor: pointer;
}

.field-tip-btn .icon {
    width: 13px;
    height: 13px;
}

.field-tip-bubble {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 50;
    width: 260px;
    padding: 10px 12px;
    border-radius: 8px;
    background-color: var(--overlay);
    box-shadow: 0 8px 20px rgba(11, 23, 31, .28);
    color: var(--bar-ink);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s;
}

.field-tip:hover .field-tip-bubble,
.field-tip:focus-within .field-tip-bubble {
    opacity: 1;
    visibility: visible;
}

/* the FAQ page (main/faqs.html): one card, the accordion from main/partials/faq.html */
.faq-page {
    padding: 26px 28px;
    margin: 8px 0 24px;
}

@media (max-width: 576px) {
    .faq-page {
        padding: 20px 16px;
    }
}

/* h1.page-title */
.faq-page-title {
    font-size: 30px;
    letter-spacing: .005em;
    margin: 0 0 6px;
}

/* .app-patient .acc-q / .acc-a p: the patient side reads larger */
.theme-patient .faq-q {
    font-size: 19px;
}

.theme-patient .faq-a,
.theme-patient .faq-a p {
    font-size: 18px;
}

/* Contact Us (main/contact.html): .card.card-pad held to 820px */
.contact-page {
    max-width: 820px;
    margin: 8px auto 24px;
    padding: 26px 28px;
}

/* h1.page-title { margin-bottom: 22px } */
.contact-title {
    font-size: 30px;
    letter-spacing: .005em;
    margin: 0 0 22px;
}

/* .form-grid: two columns, 18px between rows and 22px between columns */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
}

.form-grid > .full {
    grid-column: 1 / -1;
}

.form-grid .form-group {
    margin-bottom: 0;
}

@media (max-width: 576px) {
    .contact-page {
        padding: 20px 16px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* product label (main/labels.html): .card.card-pad held to 860px, the label
   in flow instead of on a fixed canvas */
.label-page {
    max-width: 860px;
    margin: 8px auto 12px;
    padding: 26px 28px;
}

@media (max-width: 576px) {
    .label-page {
        padding: 16px;
    }
}

.label-box {
    padding: 26px 28px;
    border: 1.5px solid var(--ink);
    border-radius: 6px;
    background-color: var(--surface);
    color: var(--ink);
}

.label-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.label-title {
    font-size: 29px;
    margin: 0 0 4px;
}

.label-ver {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
}

.label-lots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    font-size: 14.5px;
    font-weight: 600;
}

.lot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* The official symbols, drawn at the height the old label used. */
.label-sym {
    height: 40px;
    width: auto;
    flex: none;
}

.label-marks {
    display: grid;
    gap: 8px;
    justify-items: center;
    flex: none;
}

.label-mark {
    height: 36px;
    width: auto;
}

.label-mfr {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 18px;
    font-size: 14.5px;
    line-height: 1.4;
}

.label-changes,
.label-notice {
    margin: 0 0 8px;
    font-size: 15.5px;
    color: var(--sub-ink);
}

.label-notice {
    line-height: 1.55;
}

.label-sub {
    margin: 12px 0 6px;
    font-size: 15.5px;
    font-weight: 700;
}

.label-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 20px;
    font-size: 15.5px;
    color: var(--body-2);
}

.label-warning {
    display: block;
    height: 40px;
    margin-top: 16px;
}

.label-form {
    margin: 24px 0 0;
    text-align: right;
    font-size: 13px;
    color: var(--muted);
}

.label-build {
    max-width: 860px;
    margin: 0 auto 24px;
    font-size: 12px;
    color: var(--text-3);
}