/* Dorplan Trade Portal.
   The palette, type scale and component treatments here are ported from the
   design system of the prototype Dorplan were actually shown and signed off
   on, so this app looks like the thing they already bought rather than a
   second, unrelated design. */

/* ---------------------------------------------------------------- fonts */
/* Self-hosted: the same woff2 files the original prototype shipped, so there
   is no Google Fonts CDN dependency at page load. */

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/barlow-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/barlow-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/barlow-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/barlow-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/barlow-semi-condensed-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/barlow-semi-condensed-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow Semi Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/barlow-semi-condensed-700.woff2') format('woff2');
}

/* ---------------------------------------------------------------- tokens */

:root {
    --navy: #10222C;
    --navy-2: #1B3441;
    --navy-3: #2C4351;
    --green: #17864B;
    --green-d: #0F5F36;
    --green-l: #48C48C;
    --green-pale: #E6F3EC;
    --page: #EDEFEC;
    --card: #fff;
    --panel: #F5F7F5;
    --panel-2: #F8F9F7;
    --line: #DDE3DF;
    --line-2: #EEF1EF;
    --line-3: #D5DCD8;
    --ink: #10222C;
    --ink-2: #41525A;
    --ink-3: #5E6D75;
    --muted: #7C8C93;
    --faint: #A0ABA6;
    --warn-bg: #FDF7E7;
    --warn-fg: #8A6415;
    --info-bg: #E9EFF4;
    --info-fg: #31576F;
    /* Not from the prototype palette - it has no error state, but this app
       has real validation messages that need one. */
    --danger: #B3261E;
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font: 400 14px/1.5 'Barlow', system-ui, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1 {
    font-size: 27px;
    line-height: 1.15;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 15px;
}

p {
    margin: 0;
}

a {
    color: var(--green);
    text-decoration: none;
}

a:hover {
    color: var(--green-d);
    text-decoration: underline;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #CDD4D0;
    border-radius: 6px;
}

/* Small uppercase eyebrow label, the prototype's most distinctive type
   detail - Barlow Semi Condensed, wide tracking. */
.kick {
    font: 600 10.5px/1 'Barlow Semi Condensed', sans-serif;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
}

/* ---------------------------------------------------------------- controls */

select,
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--line-3);
    border-radius: 3px;
    background: #fff;
    font-size: 13px;
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 22px;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
        linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

select:focus,
input:focus {
    outline: 2px solid var(--green-l);
    outline-offset: -1px;
}

/* Right-aligned numbers lose their last digit behind the spinner, so drop it. */
input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

.app-header {
    background: var(--navy);
    color: #fff;
}

/* Same box model as .app-body below, so the logo lines up with the page
   heading rather than sitting 28px to its left. */
.app-header-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 28px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

.app-brand img {
    height: 24px;
    display: block;
}

.app-brand-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.18);
    flex: none;
}

.app-brand-mark {
    font: 600 12px/1 'Barlow Semi Condensed', sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9FB3AB;
    white-space: nowrap;
}

.app-account {
    display: flex;
    align-items: center;
    gap: 14px;
}

.app-user {
    text-align: right;
    line-height: 1.25;
    min-width: 0;
}

.app-user-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
}

.app-user-role {
    display: block;
    font-size: 11.5px;
    color: #8FA29B;
}

.app-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--navy-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 12px 'Barlow', sans-serif;
    flex: none;
}

.app-header form {
    margin: 0;
}

.app-header button {
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 3px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.app-header button:hover {
    background: rgba(255, 255, 255, 0.16);
}

.app-body {
    max-width: 1340px;
    margin: 0 auto;
    padding: 26px 28px 60px;
}

/* ---------------------------------------------------------------- page head */

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.page-head .sub {
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--ink-3);
}

.page-head .kick {
    margin-bottom: 6px;
}

.page-head-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Green pill carrying the account's real pricing basis. */
.account-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 3px;
    padding: 5px 11px;
    background: var(--green-pale);
    border: 1px solid #B7DEC8;
    font-size: 13px;
    font-weight: 500;
    color: var(--green-d);
}

.account-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex: none;
}

/* Primary call to action, matching the prototype's green button. */
.btn-primary {
    border: 1px solid var(--green);
    background: var(--green);
    color: #fff;
    border-radius: 3px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-block;
}

.btn-primary:hover {
    background: var(--green-d);
    border-color: var(--green-d);
    color: #fff;
    text-decoration: none;
}

/* Neutral secondary action, alongside .btn-primary. */
.btn-quiet {
    border: 1px solid var(--line-3);
    background: #fff;
    color: var(--ink-2);
    border-radius: 3px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.btn-quiet:hover {
    background: var(--panel);
}

.btn-danger {
    border: 1px solid var(--danger);
    background: var(--danger);
    color: #fff;
    border-radius: 3px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.btn-danger:hover {
    background: #8E1E17;
    border-color: #8E1E17;
}

.delete-confirm {
    font-size: 13.5px;
    color: var(--ink-2);
}

/* ---------------------------------------------------------------- login */

.auth-page {
    min-height: 100vh;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-inner {
    width: 1000px;
    max-width: 100%;
    display: flex;
    border-radius: 6px;
    overflow: hidden;
}

.login-pitch {
    flex: 1 1 520px;
    background: var(--navy-2);
    color: #fff;
    padding: 44px 46px;
}

.login-pitch img {
    height: 30px;
    margin-bottom: 34px;
    display: block;
}

.login-pitch h1 {
    font-size: 30px;
    color: #fff;
    margin-bottom: 14px;
}

.login-pitch p {
    color: #9FB3AB;
    font-size: 15px;
    line-height: 1.6;
    max-width: 38ch;
}

.login-pitch ul {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.login-pitch li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 8px 0;
    font-size: 14px;
    color: #CFEDDD;
}

.login-pitch li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green-l);
    margin-top: 8px;
    flex: none;
}

.login-form {
    flex: 0 0 380px;
    background: #fff;
    padding: 44px 40px;
}

.login-form h2 {
    margin-bottom: 6px;
}

.login-form .sub {
    color: var(--ink-3);
    font-size: 13.5px;
    margin-bottom: 26px;
}

/* AccessDenied uses this on its own, without the split-screen pitch panel. */
.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 40px;
    background: #fff;
    border-radius: 6px;
}

.auth-card h1 {
    margin-bottom: 10px;
}

.auth-card p {
    color: var(--ink-3);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 18px;
}

.login-form label,
.auth-card label {
    display: block;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
}

.login-form input,
.auth-card input {
    margin-top: 5px;
    padding: 9px 11px;
    font-size: 14px;
    font-weight: 400;
}

.remember-me {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-weight: 500 !important;
}

.remember-me input {
    width: 14px;
    height: 14px;
    margin-top: 0;
    accent-color: var(--green);
    flex: none;
}

.login-form button[type="submit"],
.auth-card button[type="submit"] {
    width: 100%;
    margin-top: 8px;
    border: 1px solid var(--green);
    background: var(--green);
    color: #fff;
    border-radius: 3px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
}

.login-form button[type="submit"]:hover,
.auth-card button[type="submit"]:hover {
    background: var(--green-d);
    border-color: var(--green-d);
}

.validation-summary {
    color: var(--danger);
    font-size: 13px;
    margin-bottom: 12px;
}

.validation-summary ul {
    margin: 0;
    padding-left: 18px;
}

.field-validation {
    display: block;
    color: var(--danger);
    font-size: 12px;
    font-weight: 400;
    margin-top: 4px;
}

/* ---------------------------------------------------------------- panels */

.quote-settings,
.quote-add-line {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 18px 20px;
    margin-bottom: 16px;
    display: grid;
    /* An explicit track count rather than auto-fit: the full-width heading
       and fieldset span every column, which stops auto-fit collapsing the
       empty ones and left the two panels on different column widths. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 20px;
    align-items: start;
}

.quote-settings h2,
.quote-add-line h2,
.quote-add-line fieldset,
.quote-add-line > img,
.quote-add-line > button {
    grid-column: 1 / -1;
}

.quote-settings label,
.quote-add-line label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.quote-settings select,
.quote-add-line select,
.quote-add-line input[type="number"],
.quote-add-line input[type="text"] {
    margin-top: 5px;
    font-weight: 400;
}

/* Secondary note alongside a field label, e.g. a screen's max frame size. */
.field-hint {
    font-weight: 400;
    color: var(--muted);
}

.quote-add-line fieldset {
    margin: 4px 0 0;
    padding: 12px 16px 14px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--panel-2);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2px 18px;
}

.quote-add-line legend {
    font: 600 10.5px/1 'Barlow Semi Condensed', sans-serif;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 6px;
}

.option-checkbox {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 400 !important;
    cursor: pointer;
}

.option-checkbox:hover {
    background: #F4F9F6;
}

.option-checkbox input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--green);
    flex: none;
}

.option-checkbox input:disabled {
    cursor: not-allowed;
}

.option-checkbox:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

.quote-add-line > button {
    justify-self: start;
    margin-top: 4px;
    border: 1px solid var(--green);
    background: var(--green);
    color: #fff;
    border-radius: 3px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
}

.quote-add-line > button:hover {
    background: var(--green-d);
    border-color: var(--green-d);
}

/* ---------------------------------------------------------------- schedule */

.quote-lines {
    margin-top: 22px;
}

.quote-lines > h2 {
    margin-bottom: 12px;
}

/* The bordered container the schedule table and its totals footer share -
   table runs edge to edge inside it, totals sit on a tinted foot. */
.sched-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.sched-card > table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.sched-card th,
.quote-list-table th {
    text-align: left;
    padding: 11px 10px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    font: 600 10.5px/1 'Barlow Semi Condensed', sans-serif;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #6E7F86;
    white-space: nowrap;
}

.sched-card td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--line-2);
    vertical-align: middle;
}

.sched-card tbody tr:last-child td {
    border-bottom: none;
}

/* Money and quantity columns line up on the decimal point. */
.sched-card th.num,
.sched-card td.num,
.quote-list-table th.num,
.quote-list-table td.num,
.pdf-preview-table th.num,
.pdf-preview-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sched-card td.line-total {
    font-weight: 600;
}

.sched-card td.line-product {
    font-weight: 600;
}

.sched-card .thumb-cell {
    width: 56px;
    padding-right: 0;
}

.sched-foot {
    background: var(--panel);
    border-top: 1px solid var(--line);
    padding: 16px 20px;
    display: flex;
    justify-content: flex-end;
}

.sched-foot-inner {
    width: 340px;
    max-width: 100%;
}

/* ---------------------------------------------------------------- totals */

/* No column gap: the grand-total rule is a border-top on the last dt and dd,
   and a gap between them would break it into two segments. The label column
   pads itself instead. */
.quote-totals {
    display: grid;
    grid-template-columns: auto auto;
    gap: 3px 0;
    margin: 0;
}

.quote-totals dt {
    font-size: 13.5px;
    color: var(--ink-2);
    padding-right: 16px;
}

.quote-totals dd {
    margin: 0;
    text-align: right;
    font-size: 13.5px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.quote-totals dt:last-of-type,
.quote-totals dd:last-of-type {
    border-top: 1px solid var(--line-3);
    margin-top: 6px;
    padding-top: 9px;
}

.quote-totals dt:last-of-type {
    font-weight: 600;
    color: var(--ink);
    align-self: baseline;
}

.quote-totals .grand-total {
    font: 700 22px 'Barlow', sans-serif;
    color: var(--ink);
    line-height: 1.1;
}

.sched-foot button,
.sched-foot .btn-primary {
    width: 100%;
    margin-top: 12px;
    border: 1px solid var(--green);
    background: var(--green);
    color: #fff;
    border-radius: 3px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.sched-foot button:hover {
    background: var(--green-d);
    border-color: var(--green-d);
}

/* The interactive builder's per-line remove control. */
.sched-card tbody button {
    border: none;
    background: none;
    color: var(--faint);
    font-size: 15px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 3px;
}

.sched-card tbody button:hover {
    color: var(--danger);
}

.sched-card td.acts {
    text-align: right;
    width: 44px;
}

.sched-card .placeholder {
    color: var(--muted);
    font-style: normal;
    font-size: 12.5px;
}

/* ---------------------------------------------------------------- projects */

.quote-list-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    font-size: 13.5px;
}

.quote-list-table td {
    padding: 13px 10px;
    border-bottom: 1px solid var(--line-2);
}

.quote-list-table tbody tr:last-child td {
    border-bottom: none;
}

.quote-list-table tbody tr:hover {
    background: #F7FBF8;
}

.quote-list-table a {
    font-weight: 600;
}

.quote-list-table .go {
    text-align: right;
    color: var(--green);
    font-weight: 600;
    font-size: 13px;
}

.empty-state {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 44px 24px;
    text-align: center;
    color: var(--ink-3);
    font-size: 13.5px;
}

.muted-note {
    color: var(--muted);
    font-size: 12.5px;
    margin-top: 16px;
}

/* White card with a green rule, the prototype's standing "here's what just
   happened" treatment. */
/* Deliberately not flex: the message is one sentence with an inline link,
   and flex would turn each text run into its own item with gaps around it. */
.save-message {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--green);
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13.5px;
    color: var(--ink-2);
}

.quote-context {
    color: var(--ink-3);
    font-size: 13px;
    margin: 0 0 12px;
}

.back-link {
    display: inline-block;
    margin-top: 18px;
    font-size: 13.5px;
}

/* ---------------------------------------------------------------- elevations */

/* Elevations are tall, narrow line drawings (roughly 268x570), so these are
   height-constrained with the width left to follow - a square box just
   letterboxes them in white space. */
.line-thumbnail {
    height: 44px;
    width: auto;
    display: block;
    background: #fff;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    padding: 2px;
}

.line-elevation-preview {
    height: 150px;
    width: auto;
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 6px;
}

/* ---------------------------------------------------------------- actions */

.quote-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.quote-actions button {
    flex: 1 1 0;
    border: 1px solid var(--line-3);
    background: #fff;
    color: var(--ink-2);
    border-radius: 3px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
}

.quote-actions button:hover {
    background: #fff;
    border-color: var(--green);
    color: var(--green);
}

/* ---------------------------------------------------------------- modal */

.coming-soon-overlay {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(16, 34, 44, 0.5);
}

.coming-soon-dialog {
    background: #fff;
    border-radius: 5px;
    width: 780px;
    max-width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(16, 34, 44, 0.28);
}

.coming-soon-header {
    padding: 18px 24px 16px;
    border-bottom: 1px solid var(--line-2);
    flex: none;
}

.coming-soon-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.coming-soon-badge {
    display: inline-block;
    background: var(--info-bg);
    color: var(--info-fg);
    border-radius: 2px;
    padding: 3px 9px;
    font: 600 10.5px 'Barlow Semi Condensed', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.coming-soon-close {
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--ink-3);
    padding: 0 3px;
}

.coming-soon-close:hover {
    color: var(--ink);
}

.coming-soon-copy {
    font-size: 13.5px;
    color: var(--ink-3);
    line-height: 1.55;
    margin-top: 4px;
}

.coming-soon-preview {
    overflow-y: auto;
    padding: 22px 24px 24px;
    background: var(--panel-2);
}

/* ---------------------------------------------------------------- pdf preview */

.pdf-preview {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 26px 28px;
    color: var(--ink);
}

.pdf-preview-header {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: flex-start;
    border-bottom: 2px solid var(--navy);
    padding-bottom: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

/* The wordmark is white on transparent, so flip it for the white page. */
.pdf-preview-brand img {
    height: 26px;
    display: block;
    filter: invert(1);
}

.pdf-preview-doc-title {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
}

.pdf-preview-meta {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 16px;
    font-size: 12.5px;
    line-height: 1.7;
    margin: 0;
}

.pdf-preview-meta dt {
    color: var(--muted);
    font-weight: 600;
}

.pdf-preview-meta dd {
    margin: 0;
    color: var(--ink-2);
}

.pdf-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.pdf-preview-table th {
    text-align: left;
    padding: 8px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    font: 600 10px 'Barlow Semi Condensed', sans-serif;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #6E7F86;
    vertical-align: bottom;
}

.pdf-preview-table td {
    padding: 9px 8px;
    border-bottom: 1px solid var(--line-2);
    vertical-align: top;
    line-height: 1.4;
}

.pdf-preview-totals-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.pdf-preview-totals {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 0;
    width: 340px;
    max-width: 100%;
    margin: 0;
    font-size: 13px;
}

.pdf-preview-totals dt {
    color: var(--ink-2);
    padding-right: 16px;
}

.pdf-preview-totals dd {
    margin: 0;
    text-align: right;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.pdf-preview-totals dt:last-of-type,
.pdf-preview-totals dd:last-of-type {
    border-top: 1px solid var(--navy);
    margin-top: 6px;
    padding-top: 9px;
}

.pdf-preview-totals dt:last-of-type {
    font-weight: 600;
    color: var(--ink);
}

.pdf-preview-totals dd:last-of-type {
    font: 700 20px 'Barlow', sans-serif;
    color: var(--ink);
    line-height: 1.1;
}

.pdf-preview-terms {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--ink-3);
    line-height: 1.6;
}

/* ---------------------------------------------------------------- email preview */

.email-preview {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    font-size: 13px;
}

.email-preview-headers {
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    padding: 12px 16px;
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 12px;
}

.email-preview-headers dt {
    color: var(--ink-2);
    font-weight: 600;
    font-size: 12.5px;
}

.email-preview-headers dd {
    margin: 0;
    color: var(--ink-3);
    font-size: 12.5px;
}

.email-preview-body {
    padding: 16px;
    line-height: 1.55;
    color: var(--ink-2);
}

.email-preview-body ul {
    margin: 10px 0 0;
    padding-left: 18px;
}

.email-preview-body li {
    padding: 2px 0;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1040px) {
    .quote-settings,
    .quote-add-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .quote-settings,
    .quote-add-line {
        grid-template-columns: minmax(0, 1fr);
    }

    .login-inner {
        flex-direction: column;
    }

    .login-form {
        flex: 1 1 auto;
        padding: 32px 30px;
    }

    .login-pitch {
        padding: 34px 30px;
    }

    .app-header-inner {
        height: auto;
        padding: 12px 16px;
        flex-wrap: wrap;
    }

    .app-body {
        padding: 20px 16px 44px;
    }

    .sched-foot {
        padding: 14px 16px;
    }

    .sched-foot-inner {
        width: 100%;
    }
}

@media (max-width: 700px) {
    /* Wide schedule tables scroll inside their own card rather than
       forcing the whole page sideways. */
    .sched-card {
        overflow-x: auto;
    }

    .sched-card > table {
        min-width: 720px;
    }
}