/* ============================================================================
   portal.css - the client portal shell
   ----------------------------------------------------------------------------
   tokens/base/ui are the same files the public site uses, copied in by
   `console assets:sync`. This file only adds what is specific to the portal.

   Every value that would otherwise be an inline style attribute lives here as a
   class. The portal CSP has no 'unsafe-inline' for styles, and the per-request
   nonce does not cover style attributes, so an inline style is not merely
   frowned upon, it silently does nothing.
   ========================================================================== */

/* --- Shell ---------------------------------------------------------------- */

.portal {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--surface-page);
}

.pt-main {
    flex: 1 1 auto;
    padding-block: var(--space-8) var(--space-10);
}

.pt-body--centred .pt-main {
    display: grid;
    place-items: center;
    padding-block: var(--space-7);
}

/* --- Top bar -------------------------------------------------------------- */

.pt-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--line);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.pt-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: 4rem;
}

.pt-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.pt-brand svg {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    color: var(--brand);
}

.pt-brand:where(:hover) { color: var(--text-primary); }

.pt-bar__right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.pt-nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-right: auto;
    margin-left: var(--space-6);
}

.pt-nav a {
    position: relative;
    padding-block: 1.25rem;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color 160ms ease;
}

.pt-nav a:where(:hover) { color: var(--text-primary); }

.pt-nav a[aria-current="page"] { color: var(--text-primary); }

.pt-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    background: var(--brand);
}

.pt-who {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pt-signout {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: transparent;
    padding: 0.4rem 0.75rem;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease;
}

.pt-signout:hover {
    border-color: var(--line-strong);
    color: var(--text-primary);
}

@media (max-width: 52rem) {
    .pt-who { display: none; }
    .pt-brand span { display: none; }
    .pt-nav { gap: var(--space-4); margin-left: var(--space-4); }
}

/* --- Flash messages ------------------------------------------------------- */

.pt-flash {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

/* --- Sign in -------------------------------------------------------------- */

.pt-signin {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-2), var(--edge-highlight);
    padding: var(--space-7) var(--space-6) var(--space-6);
    text-align: center;
}

.pt-signin__mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-overlay);
    color: var(--brand);
}

.pt-signin__mark svg { width: 1.75rem; height: 1.75rem; }

.pt-signin h1 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xl);
}

.pt-signin__lead,
.pt-signin__note {
    margin: 0 0 var(--space-5);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.pt-signin__note { margin-bottom: 0; }

.pt-signin .field { margin-bottom: var(--space-5); text-align: left; }

.pt-signin .alert { margin-bottom: var(--space-4); text-align: left; }

/* --- Page heading --------------------------------------------------------- */

.pt-head { margin-bottom: var(--space-7); }

.pt-head h1 {
    margin: var(--space-2) 0 0;
    font-size: var(--text-2xl);
}

.pt-head__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.pt-head__row h1 { margin: 0; }

.pt-head__lead {
    margin: var(--space-3) 0 0;
    max-width: 62ch;
    color: var(--text-secondary);
    font-size: var(--text-md);
    line-height: 1.6;
}

.pt-back {
    display: inline-block;
    margin-bottom: var(--space-4);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.pt-back::before { content: "\2190"; margin-right: 0.4em; }

.pt-back:where(:hover) { color: var(--text-primary); }

.pt-muted {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.pt-num { font-variant-numeric: tabular-nums; }

.pt-optional {
    color: var(--text-muted);
    font-weight: 400;
    text-transform: none;
}

/* --- Two column layout ---------------------------------------------------- */

.pt-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: start;
    gap: var(--space-7);
    margin-top: var(--space-7);
}

@media (max-width: 62rem) {
    .pt-columns { grid-template-columns: minmax(0, 1fr); }
}

.pt-columns__main { display: grid; gap: var(--space-7); }

.pt-columns__side { display: grid; gap: var(--space-5); }

.pt-section > h2 {
    margin: 0 0 var(--space-5);
    font-size: var(--text-lg);
}

.pt-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    padding: var(--space-5);
}

.pt-card > h2 {
    margin: 0 0 var(--space-4);
    font-size: var(--text-base);
}

.pt-card__note {
    margin: var(--space-4) 0 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.pt-card .field { margin-bottom: var(--space-4); }

.pt-stack { display: grid; gap: var(--space-4); margin: 0; }

.pt-stack dt {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pt-stack dd {
    margin: var(--space-1) 0 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
}

/* --- Milestones ----------------------------------------------------------- */

.pt-steps {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pt-step {
    position: relative;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--space-4);
    padding-bottom: var(--space-5);
}

/* The connecting line, drawn behind the dots. The last step drops it so the
   sequence ends rather than trailing off. */
.pt-step::before {
    content: "";
    position: absolute;
    top: 1.1rem;
    bottom: 0;
    left: 0.6875rem;
    width: 1px;
    background: var(--line);
}

.pt-step:last-child { padding-bottom: 0; }
.pt-step:last-child::before { display: none; }

.pt-step__dot {
    position: relative;
    z-index: 1;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.375rem;
    border: 2px solid var(--line-strong);
    border-radius: var(--radius-full);
    background: var(--surface-page);
}

.pt-step--complete .pt-step__dot {
    border-color: var(--success);
    background: var(--success);
}

.pt-step--in_progress .pt-step__dot {
    border-color: var(--brand);
    background: var(--surface-page);
    box-shadow: 0 0 0 3px var(--warning-surface);
}

.pt-step__body h3 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
}

.pt-step--complete .pt-step__body h3 { color: var(--text-secondary); }

.pt-step__body p {
    margin: var(--space-2) 0 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.pt-step__meta {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --- Tasks ---------------------------------------------------------------- */

.pt-tasks {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pt-task {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-4);
    border-bottom: 1px solid var(--line-faint);
    padding: var(--space-4) 0;
}

.pt-task:last-child { border-bottom: 0; }

.pt-task__title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 500;
}

.pt-task__desc {
    margin: var(--space-2) 0 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.pt-task__tag {
    margin-left: var(--space-2);
    color: var(--brand-text);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pt-task__due {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    white-space: nowrap;
}

@media (max-width: 34rem) {
    .pt-task { grid-template-columns: minmax(0, 1fr); }
}

/* --- Message thread ------------------------------------------------------- */

.pt-thread {
    display: grid;
    gap: var(--space-4);
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.pt-msg {
    max-width: 42rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    padding: var(--space-4) var(--space-5);
}

/* The client's own messages are pushed right and tinted, so a thread reads as
   a conversation rather than a log. */
.pt-msg--you {
    margin-left: auto;
    border-color: transparent;
    background: var(--surface-overlay);
}

.pt-msg__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.pt-msg__who {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 600;
}

.pt-msg__head time {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    white-space: nowrap;
}

.pt-msg__body {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.pt-reply { max-width: 42rem; }

.pt-reply .field { margin-bottom: var(--space-4); }

.pt-reply textarea { resize: vertical; min-height: 6rem; }

/* --- File list ------------------------------------------------------------ */

.pt-filelist {
    display: grid;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.pt-filelist li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

.pt-filelist span {
    flex: none;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
}

.pt-file__desc {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: 400;
}

/* --- Outstanding balance -------------------------------------------------- */

.pt-owed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-7);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    padding: var(--space-5) var(--space-6);
}

.pt-owed__label {
    margin: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pt-owed__figure {
    margin: var(--space-1) 0 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.pt-owed__sub {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* --- Projects ------------------------------------------------------------- */

.pt-projects {
    display: grid;
    gap: var(--space-5);
}

.pt-project {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: var(--shadow-1);
    padding: var(--space-6);
}

.pt-project__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.pt-project__head h2 {
    margin: 0;
    font-size: var(--text-lg);
}

.pt-project__head h2 a {
    color: var(--text-primary);
    text-decoration: none;
}

.pt-project__head h2 a:where(:hover) {
    color: var(--brand-text);
}

.pt-project__summary {
    margin: var(--space-2) 0 0;
    max-width: 58ch;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.pt-project__note {
    margin: var(--space-5) 0 0;
    border-top: 1px solid var(--line-faint);
    padding-top: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.pt-project__note span {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Progress ------------------------------------------------------------- */

.pt-progress {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.pt-progress--wide { margin-top: 0; }

.pt-progress__track {
    flex: 1 1 auto;
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--surface-overlay);
}

.pt-progress__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-strong), var(--brand));
    transition: width 400ms ease;
}

.pt-progress__pct {
    flex: none;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Widths as classes rather than an inline style attribute, in 5% steps. The
   template floors the stored percentage to the nearest step to pick one. */
.pt-progress__fill--0   { width: 0; }
.pt-progress__fill--5   { width: 5%; }
.pt-progress__fill--10  { width: 10%; }
.pt-progress__fill--15  { width: 15%; }
.pt-progress__fill--20  { width: 20%; }
.pt-progress__fill--25  { width: 25%; }
.pt-progress__fill--30  { width: 30%; }
.pt-progress__fill--35  { width: 35%; }
.pt-progress__fill--40  { width: 40%; }
.pt-progress__fill--45  { width: 45%; }
.pt-progress__fill--50  { width: 50%; }
.pt-progress__fill--55  { width: 55%; }
.pt-progress__fill--60  { width: 60%; }
.pt-progress__fill--65  { width: 65%; }
.pt-progress__fill--70  { width: 70%; }
.pt-progress__fill--75  { width: 75%; }
.pt-progress__fill--80  { width: 80%; }
.pt-progress__fill--85  { width: 85%; }
.pt-progress__fill--90  { width: 90%; }
.pt-progress__fill--95  { width: 95%; }
.pt-progress__fill--100 { width: 100%; }

/* --- Project meta --------------------------------------------------------- */

.pt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin: var(--space-5) 0 0;
}

.pt-meta dt {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pt-meta dd {
    margin: var(--space-1) 0 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
}

/* --- Status pill ---------------------------------------------------------- */

.pill {
    display: inline-flex;
    align-items: center;
    flex: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    background: var(--surface-overlay);
    padding: 0.2rem 0.7rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Project, task, and invoice statuses all render as pills. They are grouped by
   what they mean rather than which table they came from, so "in progress" reads
   the same wherever it appears. */
.pill--in_progress,
.pill--sent,
.pill--viewed {
    border-color: transparent;
    background: var(--info-surface);
    color: var(--info);
}

.pill--review,
.pill--partial {
    border-color: transparent;
    background: var(--warning-surface);
    color: var(--warning);
}

.pill--complete,
.pill--done,
.pill--paid {
    border-color: transparent;
    background: var(--success-surface);
    color: var(--success);
}

.pill--on_hold,
.pill--cancelled,
.pill--blocked,
.pill--overdue {
    border-color: transparent;
    background: var(--danger-surface);
    color: var(--danger);
}

/* --- Empty state ---------------------------------------------------------- */

.pt-empty {
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-9) var(--space-6);
    text-align: center;
}

.pt-empty h2 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
}

.pt-empty p {
    margin: 0 auto;
    max-width: 42ch;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* --- Footer --------------------------------------------------------------- */

.pt-foot {
    border-top: 1px solid var(--line);
    padding-block: var(--space-5);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.pt-foot .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* -----------------------------------------------------------------------------
   Time log

   Shown only when the project has its time log switched on. Reads as a
   statement of work done, not an invoice: the totals lead, the individual
   rows are quiet underneath.
   -------------------------------------------------------------------------- */

.pt-timesum {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-bottom: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    padding: var(--space-5);
}

.pt-timesum__label {
    margin: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pt-timesum__figure {
    margin: var(--space-1) 0 0;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.pt-timelog {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pt-timelog li {
    display: grid;
    grid-template-columns: 4rem 5rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-4);
    border-bottom: 1px solid var(--line-faint);
    padding: var(--space-3) 0;
}

.pt-timelog li:last-child { border-bottom: 0; }

.pt-timelog__date { color: var(--text-muted); font-size: var(--text-3xs); }

.pt-timelog__hours {
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.pt-timelog__what {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.pt-timelog__cost {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 40rem) {
    .pt-timelog li {
        grid-template-columns: 4.5rem minmax(0, 1fr);
        row-gap: var(--space-1);
    }

    .pt-timelog__what { grid-column: 1 / -1; }
    .pt-timelog__cost { text-align: left; }
}

/* -----------------------------------------------------------------------------
   Pay page

   Stripe renders the fields themselves inside iframes, so there is very little
   to style here: a summary on one side, Stripe's element on the other. What
   this does control is the frame around it, which is what makes the embedded
   form read as part of the portal rather than as a bolted-on widget.
   -------------------------------------------------------------------------- */

.pt-pay {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr);
    align-items: start;
    gap: var(--space-7);
}

@media (max-width: 54rem) {
    .pt-pay { grid-template-columns: minmax(0, 1fr); }
}

.pt-pay__summary {
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    padding: var(--space-5);
}

.pt-pay__figure {
    margin: var(--space-1) 0 var(--space-5);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.pt-pay__form {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    padding: var(--space-6);
}

.pt-pay__submit { margin-top: var(--space-5); }

.pt-pay__error { margin-bottom: var(--space-4); }

.pt-pay__note {
    margin: var(--space-4) 0 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

/* Stripe's iframe sizes itself; this only reserves somewhere for it to land so
   the button does not jump up the page while it loads. */
#payment-element { min-height: 14rem; }

/* -----------------------------------------------------------------------------
   One invoice

   Deliberately reads as a document rather than as a screen: the line items get
   the room, the totals stack to the right of them, and the actions sit off to
   one side instead of on top. This is the page a client forwards to their
   accountant, so it should survive being printed or screenshotted.
   -------------------------------------------------------------------------- */

.pt-invoice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    align-items: start;
    gap: var(--space-7);
}

@media (max-width: 60rem) {
    .pt-invoice { grid-template-columns: minmax(0, 1fr); }
}

.pt-invoice__doc {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    overflow: hidden;
}

.pt-invoice__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    border-bottom: 1px solid var(--line-faint);
    padding: var(--space-5);
}

.pt-invoice__meta p { margin: 0; }
.pt-invoice__meta p + p { margin-top: var(--space-1); font-size: var(--text-sm); }

.pt-invoice__empty { padding: var(--space-6) var(--space-5); }

.pt-invoice__doc .table-wrap { border: 0; border-radius: 0; }

.pt-invoice__totals {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    border-top: 1px solid var(--line-faint);
    padding: var(--space-5);
}

.pt-invoice__totals > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
    margin-left: auto;
    min-width: 16rem;
    font-size: var(--text-sm);
}

.pt-invoice__totals dt { color: var(--text-secondary); }
.pt-invoice__totals dd { margin: 0; color: var(--text-primary); }

/* The number the client is actually looking for. */
.pt-invoice__due {
    margin-top: var(--space-2);
    border-top: 1px solid var(--line);
    padding-top: var(--space-3);
    font-size: var(--text-md) !important;
}

.pt-invoice__due dt { color: var(--text-primary) !important; font-weight: 600; }

.pt-invoice__due dd {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
}

.pt-invoice__side { display: grid; gap: var(--space-5); }

.pt-invoice__side .pt-card > p:first-child { margin-top: 0; }

.pt-invoice__dl { margin-top: var(--space-3); }

.pt-rowactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* --- Quotes ----------------------------------------------------------------
   `sent` already exists for invoices and reads the same here: waiting on you.
   The rest are the states a quote can reach that an invoice cannot. */

.pill--accepted { background: color-mix(in oklab, var(--success) 18%, transparent); color: var(--success); }
.pill--declined { background: var(--surface-sunken); color: var(--text-muted); }
.pill--expired  { background: color-mix(in oklab, var(--warning) 18%, transparent); color: var(--warning); }

/* Declining sits under accepting and is deliberately quieter: it is a real
   answer and should be easy to give, without competing with the other one. */
.pt-decline {
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--line);
}