/* DASHBOARD — the psychologist's caseload */

.case-head{display:flex;align-items:flex-end;justify-content:space-between;
    gap:24px;flex-wrap:wrap;}
.case-who{margin-top:7px;font-size:14px;color:var(--grey);}
.case-acts{display:flex;gap:10px;flex-wrap:wrap;}

/* The summary strip is the review queue's .stats. Its nth-child palette there
   is decorative, which would have landed green on "waiting on you" — the one
   cell that means somebody is stuck. Repainted to match the state dots, so a
   cell, a chip and a row all carry the same colour for the same thing. */
.stats.caseload .stat{border-top:3px solid var(--edge-2);}
.stats.caseload .stat dd{color:var(--navy-d);}
.stats.caseload .s-expired{border-top-color:#C2703A;}
.stats.caseload .s-expired dd{color:#C2703A;}
.stats.caseload .s-invited{border-top-color:var(--sig);}
.stats.caseload .s-invited dd{color:var(--sig);}
.stats.caseload .s-active{border-top-color:#2E9E6B;}
.stats.caseload .s-active dd{color:#2E9E6B;}
/* Nobody stuck is not a warning. Reads the same as a disabled chip below. */
.stats.caseload .is-clear{border-top-color:var(--edge-2);}
.stats.caseload .is-clear dd{color:var(--grey-2);}

/* Filter chips. "Everyone" is selected on load, so nothing is hidden until it
   is asked for, and each chip carries its own count — a stalled invitation is
   visible whether or not anyone clicks. Display lives on .chips rather than
   here, so the hidden attribute still works while the script is loading. */
.roll-filter{margin:20px 0 0;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:7px;
    font-family:inherit;font-size:13.5px;font-weight:500;line-height:1;
    padding:8px 9px 8px 14px;border:1.5px solid var(--edge-2);border-radius:999px;
    background:var(--page);color:var(--grey);cursor:pointer;
    transition:background .15s,border-color .15s,color .15s;}
.chip:hover{border-color:var(--navy);color:var(--navy-d);}
.chip:focus-visible{outline:2px solid var(--sig);outline-offset:2px;}
.chip-n{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
    padding:2px 8px;border-radius:999px;background:var(--tint);color:var(--grey-2);}
/* Nothing in this category. The fill and the softer border carry "not
   available"; the text keeps --grey, not --grey-2, because the nought is the
   whole point of showing this chip and 2.8:1 is not a number anyone reads.
   WCAG exempts inactive controls from contrast, but that exemption is for
   controls with nothing to say. Dimmed with tokens rather than opacity, which
   would compound against whatever sits behind it. */
.chip:disabled{cursor:default;background:var(--tint);border-color:var(--edge);
    color:var(--grey);}
.chip:disabled .chip-n{background:transparent;color:var(--grey);}
.chip:disabled:hover{border-color:var(--edge);color:var(--grey);}

.chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff;}
.chip.is-on .chip-n{background:rgba(255,255,255,0.2);color:#fff;}

/* One dot per state, in the same colour as that state's pill in the rows
   below, so a chip and the people it stands for read as one thing. These chips
   are the page's whole summary now — there is no strip above them.

   It reuses .dot from main.css rather than a lookalike of it: a hand-rolled
   copy had already drifted to 8px against the pill's 7px. Only the colour is
   set here. The halo the pills carry is dropped — inside a bordered chip it
   fights the border, and there is no wide row for the dot to hold its own in. */
.chip .dot{background:var(--grey-2);box-shadow:none;}
.chip.c-expired .dot{background:#C2703A;}
.chip.c-invited .dot{background:var(--sig);}
.chip.c-active .dot{background:#2E9E6B;}
.chip.c-closed .dot{background:var(--grey-2);}
/* On the navy fill --sig all but disappears. The fill already says "selected",
   and the dot's job is telling the unselected ones apart, so it goes white. */
.chip.is-on .dot{background:#fff;}
/* An empty category keeps the shape but drops the colour claim. */
.chip:disabled .dot{background:var(--grey-2);}

/* THE ROW.
   padding is declared on all four sides here, and the list is pulled back out
   by the same amount, so a name still lines up with the heading at rest and
   the hover tint has room around it. The table this replaced used
   `padding:17px 16px 17px 0` — fine with no background, but the moment a
   surface is painted behind it the first character sits on the edge. */
.roll{list-style:none;margin:22px -14px 0;padding:0;}
.roll > li{border-bottom:1px solid var(--edge);}
.roll > li:last-child{border-bottom:0;}
.row{display:grid;
    grid-template-columns:minmax(190px,1.5fr) minmax(150px,1fr) minmax(200px,1.35fr) auto;
    gap:14px 22px;align-items:center;
    padding:16px 14px;border-radius:6px;transition:background .15s;}
.roll > li:hover .row{background:var(--tint);}

.row .name{display:inline-flex;align-items:center;gap:6px;
    font-size:15.5px;font-weight:600;color:var(--navy-d);text-decoration:none;
    border-bottom:1px solid transparent;}
.roll > li:hover .name{color:var(--sig);border-bottom-color:var(--sig-pale);}
.row .name .go{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s;}
.roll > li:hover .name .go{opacity:1;}
.row .name:focus-visible{outline:2px solid var(--sig);outline-offset:3px;}
.row .addr{display:block;margin-top:1px;font-size:13.5px;color:var(--grey);}

.row .ctx{font-size:13.5px;line-height:1.5;color:var(--grey);}
.row .ctx b{color:var(--navy-d);font-weight:600;}
.row .ctx .ctx-lead{display:block;margin-bottom:1px;font-size:10px;font-weight:600;
    letter-spacing:0.05em;text-transform:uppercase;color:var(--grey-2);}
.row .ctx.due{color:#9A5424;}

.row-end{display:flex;align-items:center;justify-content:flex-end;gap:8px;}
.row-end .btn.sm{font-size:13.5px;padding:7px 14px;}
/* Make the row container the relative anchor */
.roll .row {
    position: relative;
}

/* Stretch the patient name link over the full row */
.roll .row .name::after {
    content: '';
    position: absolute;
    inset: 0; /* Cover top, right, bottom, left */
    z-index: 1;
}

/* Raise action buttons above the link so they remain clickable */
.roll .row-end {
    position: relative;
    z-index: 2;
}

.roll li:hover .row {
    background-color: var(--tint, #f8fafc);
}

.roll-foot{margin-top:20px;font-size:13.5px;color:var(--grey-2);}

/* Deactivate lives in here rather than in every row — same reasoning, and the
   same markup, as the revoke disclosure on the admin list. */
details.fold{position:relative;}
details.fold > summary{list-style:none;cursor:pointer;display:inline-flex;
    align-items:center;justify-content:center;width:30px;height:30px;
    border:1px solid transparent;border-radius:5px;color:var(--grey-2);}
details.fold > summary::-webkit-details-marker{display:none;}
details.fold > summary:hover,
details.fold[open] > summary{color:var(--navy-d);border-color:var(--edge-2);
    background:var(--page);}
details.fold > summary:focus-visible{outline:2px solid var(--sig);outline-offset:2px;}
details.fold > summary svg{width:16px;height:16px;fill:currentColor;}

/* Table cell alignment */
td.act {
    position: relative;
    text-align: right;
}

/* Ensure details is anchored to the right */
details.revoke {
    position: relative;
    display: inline-block;
}

/* Hide default marker arrow */
details.revoke > summary::-webkit-details-marker,
details.revoke > summary::marker {
    display: none;
}

/* Summary Button Default State */
details.revoke > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--grey-2, #64748b);
    background: transparent;
    border: 1px solid var(--edge-2, #cbd5e1);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}

details.revoke > summary:hover {
    color: var(--navy-d, #0f172a);
    border-color: var(--edge, #94a3b8);
}

/* Hide 'X' icon by default */
details.revoke .revoke-close {
    display: none;
    font-size: 18px;
    line-height: 1;
}

/* ---------------------------------------------------------
   OPEN STATE: When disclosure is expanded
   --------------------------------------------------------- */
details.revoke[open] > summary {
    width: 32px;              /* Fixed square width so it becomes an icon button */
    padding: 0;
    background: var(--tint, #f1f5f9);
    border-color: var(--edge, #94a3b8);
    color: var(--navy-d, #0f172a);
}

/* Hide text label when open */
details.revoke[open] .revoke-label {
    display: none;
}

/* Show 'X' icon when open */
details.revoke[open] .revoke-close {
    display: inline-block;
}

/* Dropdown popover positioning relative to the X icon */
details.revoke .revoke-body {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 50;
    width: 320px;
    padding: 16px;
    background: var(--page, #ffffff);
    border: 1px solid var(--edge, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12);
    text-align: left;
}

/* Mobile adjustments for Revoke Access */
@media (max-width: 621px) {
    /* Force the button container to the far right */
    td.act {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        width: 100% !important;
        text-align: right !important;
        box-sizing: border-box;
    }

    /* Ensure details container stays inline and right-aligned */
    details.revoke {
        margin-left: auto !important;
        margin-right: 0 !important;
        display: inline-block;
    }

    /* Force the popover menu to open aligned to the right edge */
    details.revoke .revoke-body {
        right: 0 !important;
        left: auto !important;
        transform: none;
    }
}

form.period {
    display: flex;
    flex-direction: column;
    width: 100%;
}

form.period > *,
form.period label,
form.period input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.fold-body{position:absolute;right:0;top:34px;z-index:5;width:min(276px,74vw);
    text-align:left;background:var(--page);border:1px solid var(--edge-2);
    border-radius:7px;padding:14px;box-shadow:var(--lift-2);}
.fold-body p{margin:0 0 10px;font-size:12.8px;line-height:1.55;color:var(--grey);}
.fold-body .btn{width:100%;}

.board-empty{margin-top:26px;padding:34px;background:var(--tint);
    border:1px solid var(--edge);border-radius:5px;}
.board-empty p{color:var(--grey);font-size:15px;max-width:48ch;}
.board-empty .tag{margin-bottom:8px;}

.board-note{margin-top:26px;font-size:16px;}

/* Account state. The dot carries the same meaning as the words beside it, so
   the label is never the only signal. */
.state{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--grey);}
.state .dot{background:var(--grey-2);box-shadow:none;}
.state.is-active .dot{background:#2E9E6B;box-shadow:0 0 0 3px rgba(46,158,107,0.16);}
.state.is-pending .dot{background:var(--sig);box-shadow:0 0 0 3px rgba(3,105,161,0.14);}
.state.is-stale .dot{background:#C2703A;box-shadow:0 0 0 3px rgba(194,112,58,0.16);}
.state.is-declined .dot{background:var(--grey-2);box-shadow:0 0 0 3px rgba(141,149,165,0.18);}

@media (max-width:860px){
    .row{grid-template-columns:1fr auto;gap:8px 16px;}
    .row-who{grid-column:1;}
    .row-end{grid-column:2;grid-row:1/3;align-items:flex-start;}
    .row .ctx{grid-column:1;}
}

/* ONE PATIENT — head */

.p-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
    flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--edge);}
.p-who{margin-top:6px;font-size:14px;color:var(--grey);}
.p-who b{color:var(--navy-d);font-weight:600;}

/* Disclosure, same shape as details.revoke on the admin list. */
details.disc{position:relative;}
details.disc > summary{list-style:none;cursor:pointer;font-size:13.5px;font-weight:500;
    color:var(--navy);background:var(--page);border:1px solid var(--edge-2);border-radius:5px;
    padding:6px 13px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
details.disc > summary::-webkit-details-marker{display:none;}
details.disc > summary:hover,
details.disc[open] > summary{border-color:var(--navy);}
details.disc > summary:focus-visible{outline:2px solid var(--sig);outline-offset:2px;}
/* Floated over the rows rather than pushing them apart, so opening one does
   not move the other session under the pointer. */
.disc-body{position:absolute;right:0;top:32px;z-index:5;width:min(320px,78vw);
    text-align:left;padding:15px 16px;background:var(--page);
    border:1px solid var(--edge-2);border-radius:7px;box-shadow:var(--lift-2);}
.disc-body .input{margin-bottom:0;}
.disc-body .btn{width:100%;justify-content:center;margin-top:11px;}
.disc-body label{font-size:11px;font-weight:600;letter-spacing:0.04em;
    text-transform:uppercase;color:var(--grey);}
.disc-body input[type="datetime-local"],
.disc-body input[type="date"]{width:100%;font-family:inherit;font-size:14.5px;
    padding:11px;border:1px solid var(--edge-2);border-radius:4px;background:var(--page);
    color:var(--navy-d);}
.disc-body input[type="datetime-local"]:focus-visible,
.disc-body input[type="date"]:focus-visible{outline:2px solid var(--sig);outline-offset:1px;
    border-color:var(--sig);}
/* The native icon sits at full strength against a field that is otherwise quiet. */
.disc-body input::-webkit-calendar-picker-indicator{opacity:0.55;cursor:pointer;}
.disc-body input:hover::-webkit-calendar-picker-indicator{opacity:1;}

@media (max-width:620px){
    .sess-row{grid-template-columns:1fr;gap:5px;}
    .sess-acts{justify-content:flex-start;}
    .disc-body{right:auto;left:0;}
}

/* SUBSCRIPTION — one page, three states */

.shell-narrow{max-width:720px;}

.plan-alert{margin-top:24px;padding:16px 20px;background:#FAEEDA;
    border:1px solid #FAC775;border-radius:5px;}
.plan-alert p{font-size:14.5px;line-height:1.65;color:#854F0B;max-width:56ch;}

.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;}
.plan{border:1px solid var(--edge);border-radius:5px;padding:26px;background:var(--page);}
.plan.is-current{margin-top:28px;}
.plan .tag{display:block;margin-bottom:10px;}
/*.plan-amount{font-family:'Newsreader',Georgia,serif;font-size:40px;line-height:1;color:var(--navy-d);}*/
.plan-amount{font-family:inherit;font-size:40px;line-height:1;color:var(--navy-d);}
.plan-current-name{font-family:'Newsreader',Georgia,serif;font-size:26px;line-height:1.2;color:var(--navy-d);}
.plan-period{margin-top:6px;font-size:14px;color:var(--grey);}
.plan-tax{margin-top:4px;font-size:13px;color:var(--grey-2);}
.plan .btn{margin-top:20px;width:100%;justify-content:center;}

/* Three cards, and wider than the column of prose above them.
   The page reads in a narrow measure because it is mostly sentences; the plans
   are a comparison and need the width. Breaking out of .shell-narrow here is
   cheaper than splitting the page into two containers, and keeps the heading
   aligned with the text it belongs to. */
.subscription-pricing-wrapper{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;
    width:min(1060px,calc(100vw - 48px));margin-left:50%;translate:-50%;}

/* At three across there is no room for a name beside a price, so the card top
   stacks instead of splitting left and right. */
.subscription-pricing-wrapper .pricing-card-top{display:block;}
.subscription-pricing-wrapper .pricing-price{text-align:left;margin-left:0;margin-top:14px;}
.subscription-pricing-wrapper .pricing-plan-desc{margin-top:6px;min-height:2.6em;}
.subscription-pricing-wrapper .pricing-amount{font-size:2.1rem;}
.subscription-pricing-wrapper .pricing-card-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
    white-space:nowrap;}
.subscription-pricing-wrapper .is-current-subscription-card{border-color:#c7ced9;}
.subscription-pricing-wrapper .plan-cell-current{display:block;padding:10px 14px;text-align:center;border:1.5px solid var(--edge-2);border-radius:3px;background:transparent;color:var(--grey);font-weight:600;letter-spacing:0.02em;}
.pricing-limit-name{font-weight:600;color:var(--navy-d);}

@media (max-width:980px){
    .subscription-pricing-wrapper{grid-template-columns:1fr;width:auto;margin-left:0;translate:none;}
    .subscription-pricing-wrapper .pricing-plan-desc{min-height:0;}
}

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

/* SUBSCRIPTION — plan comparison table */

/* Present to screen readers, absent to everyone else. Used for the row and
   column headers a sighted reader infers from layout, and for the word behind
   each tick — a bare ✓ tells a screen reader nothing. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

.plan-compare-head{margin-top:36px;margin-bottom:14px;font-family:'Newsreader',Georgia,serif;
    font-size:22px;line-height:1.2;color:var(--navy-d);}

/* Last-resort horizontal scroll. The table is built to fit without it — the
   plan columns hold ticks and short values, and only the row labels are long
   — but a long word at a large text size should scroll rather than push the
   page sideways. */
.plan-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}

.plan-table{width:100%;border-collapse:collapse;background:var(--page);
    border:1px solid var(--edge);border-radius:5px;}
.plan-table th,
.plan-table td{padding:12px 14px;text-align:left;vertical-align:top;
    border-bottom:1px solid var(--edge);font-size:14.5px;line-height:1.5;}
.plan-table tbody th{font-weight:400;color:var(--grey);}
.plan-table td{color:var(--navy-d);}
.plan-table tfoot td,
.plan-table tfoot th{border-bottom:0;}

.plan-table thead th{padding-top:18px;padding-bottom:14px;
    border-bottom:1px solid var(--edge-2);}
.plan-col-name{display:block;font-family:'Newsreader',Georgia,serif;font-size:19px;
    line-height:1.2;color:var(--navy-d);}
.plan-col-flag,
.plan-col-badge{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:20px;
    font-size:10.5px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;}
.plan-col-flag{background:var(--sig);color:#fff;}
.plan-col-badge{background:#F0B429;color:#1a1a2e;}
.plan-col-badge-standard{background:var(--sig);color:#fff;}

/* The column they are already on, tinted down the whole height so it reads as
   one thing rather than a header that happens to be marked. */
.plan-table .is-current-col{background:var(--tint);}

.plan-cell-amount{display:block;font-size:24px;line-height:1.1;color:var(--navy-d);}

/* Marks the cells a billing-period switch actually changed. Three numbers move
   in a table of twelve rows, and without a cue the table looks like it did
   nothing. Fading in from a lower opacity rather than sliding: the cell keeps
   its place, so nothing reflows and no row jumps under the cursor. */
@keyframes plan-cell-swap{from{opacity:0.25;}to{opacity:1;}}
.plan-cell-swapped{animation:plan-cell-swap 0.22s ease;}

@media (prefers-reduced-motion:reduce){
    .plan-cell-swapped{animation:none;}
}
.plan-cell-note{display:block;margin-top:3px;font-size:12.5px;color:var(--grey-2);}
.plan-cell-current{display:block;font-size:13px;font-weight:600;color:var(--sig);}

.plan-cell-tick svg{width:17px;height:17px;fill:none;stroke:var(--sig);
    stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

.plan-table tfoot .btn{width:100%;justify-content:center;}

.plan-cancel{margin-top:22px;text-align:center;}
.plan-cancel-link{font-size:14px;color:var(--grey);text-decoration:none;
    border-bottom:1px solid var(--edge-2);}
.plan-cancel-link:hover{color:#A32D2D;border-bottom-color:#A32D2D;}

@media (max-width:640px){
    .plan-table th,
    .plan-table td{padding:10px 9px;font-size:13.5px;}
    .plan-table thead th{padding-top:14px;}
    .plan-col-name{font-size:16px;}
    .plan-cell-amount{font-size:19px;}
    .plan-cell-note{font-size:11.5px;}
    .plan-table tfoot .btn{padding:9px 10px;font-size:13px;}
}

/* ADMIN REVIEW QUEUE
   Every colour here comes from the tokens in main.css, so the colour-blind and
   high-contrast modes keep working without a second set of rules. */

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* The summary answers "is there anything for me right now" before the detail. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
    background:var(--edge);border:1px solid var(--edge);border-radius:7px;
    overflow:hidden;margin:26px 0 34px;}
.stat{background:var(--page);padding:16px 18px;}
.stat dt{font-size:10.5px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;
    color:var(--grey-2);margin:0 0 5px;}
.stat dd{margin:0;font-size:25px;font-weight:700;letter-spacing:-0.02em;line-height:1.1;
    font-variant-numeric:tabular-nums;}
.stat dd small{font-size:13px;font-weight:500;color:var(--grey);letter-spacing:0;margin-left:3px;}
.stat.is-live dd{color:var(--sig);}
.stat:nth-child(1) dd {
    color: #ad8142;
}
.stat:nth-child(2) dd {
    color: #e25a79;
}
.stat:nth-child(3) dd {
    color: #7972ff;
}
.stat:nth-child(4) dd {
    color: #36997b;
}
.stat.is-live dd {
    color: var(--sig, #2563eb) !important;
}
.stat:nth-child(1) { border-top: 3px solid #f59e0b; }
.stat:nth-child(2) { border-top: 3px solid #f43f5e; }
.stat:nth-child(3) { border-top: 3px solid #6366f1; }
.stat:nth-child(4) { border-top: 3px solid #10b981; }

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding-bottom:11px;border-bottom:1px solid var(--edge);margin-bottom:4px;}
.sec-head h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-0.01em;}
.sec-head .count{font-size:13px;color:var(--grey);font-variant-numeric:tabular-nums;}
.sec-head-next{margin-top:46px;}

/* An application is a decision, and a decision needs context a table row
   cannot hold — how long it has waited, and whether it was declined before. */
.queue{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}

/* Not .card: home.css and Bootstrap both already define that, and inheriting a
   box from them meant the padding here was fighting a border set elsewhere.
   The box is declared in full so it cannot drift with either. */
.review-item{display:grid;grid-template-columns:1fr auto;gap:14px 22px;align-items:start;
    padding:20px 22px;background:var(--page);border:1px solid var(--edge-2);
    border-radius:5px;box-shadow:var(--lift);}
.review-item:hover{border-color:var(--sig-pale);}
.review-item .name{font-size:17px;font-weight:600;letter-spacing:-0.01em;color:var(--navy-d);
    text-decoration:none;border-bottom:1px solid transparent;}
.review-item a.name:hover{color:var(--sig);border-bottom-color:var(--sig);}
.review-item .mail{margin:2px 0 0;font-size:13.5px;color:var(--grey);}

.facts{display:flex;flex-wrap:wrap;gap:6px 26px;margin:11px 0 0;}
.fact{display:flex;flex-direction:column;gap:1px;}
.fact dt{font-size:10px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;
    color:var(--grey-2);}
.fact dd{margin:0;font-size:13.5px;color:var(--navy-d);}
.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:13px;font-variant-numeric:tabular-nums;}

/* Checking the number against the register is the whole job of this page. */
.reg{color:var(--sig);text-decoration:none;border-bottom:1px solid var(--sig-pale);}
.reg:hover{border-bottom-color:var(--sig);}

.review-act{display:flex;flex-direction:column;align-items:flex-end;gap:9px;}

/* Shown before the reviewer clicks through, because someone declined over a
   registration number can come back with a different one. */
.prior{grid-column:1/-1;display:flex;gap:11px;margin-top:2px;padding:11px 14px;
    background:rgba(194,112,58,0.07);border:1px solid rgba(194,112,58,0.22);border-radius:6px;}
.prior svg{width:16px;height:16px;flex:none;margin-top:2px;stroke:#C2703A;fill:none;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.prior p{margin:0;font-size:13.5px;color:var(--navy-d);}
.prior b{font-weight:600;}
.prior span{display:block;color:var(--grey);margin-top:2px;}

.people{width:calc(100% + 28px);border-collapse:collapse;margin:6px -14px 0;}
.people th{font-size:10px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;
    color:var(--grey-2);text-align:left;padding:12px 14px 10px 0;border-bottom:1px solid var(--edge);}
.people td{padding:14px 14px 14px 0;border-bottom:1px solid var(--edge);vertical-align:middle;}
.people tr:last-child td{border-bottom:0;}
.people tr:hover td{background:var(--tint);}
/* An open disclosure makes the row tall; the other cells should not float in it. */
.people tr:has(details[open]) td{vertical-align:top;}
.people .who{font-weight:600;font-size:15px;}
.people .addr{display:block;font-size:13px;color:var(--grey);}
.people .num,.people th.num{text-align:right;padding-right:26px;}
.people th:first-child,.people td:first-child{padding-left:14px;}
.people .act{text-align:right;padding-right:14px;width:1%;}

/* Destructive, so it is folded away rather than sitting in every row. */
details.revoke{display:inline-block;text-align:left;}
details.revoke > summary{list-style:none;cursor:pointer;font-size:13.5px;font-weight:500;
    color:var(--grey);border:1px solid var(--edge-2);border-radius:5px;padding:7px 14px;
    display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
details.revoke > summary::-webkit-details-marker{display:none;}
details.revoke > summary:hover,
details.revoke[open] > summary{color:#C2703A;border-color:#C2703A;}
details.revoke > summary:focus-visible{outline:2px solid var(--sig);outline-offset:2px;}
.revoke-body{margin-top:11px;padding:14px;width:min(340px,74vw);background:var(--tint);
    border:1px solid var(--edge);border-radius:6px;}
.revoke-body p{margin:0 0 10px;font-size:13px;color:var(--grey);}
.revoke-body label{font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
    color:var(--grey-2);}
.revoke-body textarea{width:100%;font-family:inherit;font-size:13.5px;padding:8px 10px;
    border:1px solid var(--edge-2);border-radius:4px;resize:vertical;background:var(--page);}
.btn.danger{margin-top:10px;background:#C2703A;border-color:#C2703A;color:#fff;font-size:13.5px;}
.btn.danger:hover{background:#A85E30;border-color:#A85E30;}

@media (max-width:620px){
    .review-item{grid-template-columns:1fr;padding:18px;}
    .review-act{align-items:flex-start;}
    .people thead{display:none;}
    .people tr{display:block;padding:14px 14px 14px 14px;border-bottom:1px solid var(--edge);}
    .people tr:hover{background:var(--tint);}
    .people tr:hover td{background:none;}
    .people td{display:block;border:0;padding:2px 0;text-align:left;}
    .people td:first-child{padding-left:0;}
    .people .num,.people .act{text-align:left;padding-right:0;}
}

/* PATIENT DIARY — reading every entry a patient has shared.
   Deliberately not reusing .entry-title / .entry-when from diary.css: those
   size a single entry on its own page (2rem heading), which in a list of
   twenty would be a wall of headings. */

/* A spine rather than a stack of cards. A border says "separate object", and
   these are pages of one person's writing over a stretch of time. */
.read-list{position:relative;margin-top:26px;padding-left:26px;}

.read-list::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;
    width:1px;background:var(--edge-2);}

/* The padding and negative margin exist so the hover tint has somewhere to go;
   the dot moves with them to stay on the spine. */
.read-entry{position:relative;padding:11px 12px 13px;margin:0 -12px 6px;
    border-radius:6px;transition:background 0.12s;}

.read-entry:hover{background:var(--tint);}

/* Arrived at from a summary citation. Without this the anchor drops you into a
   column of identical text with nothing saying which one you came for. */
.read-entry:target{background:var(--tint);box-shadow:inset 3px 0 0 var(--sig);}

.read-entry::before{content:"";position:absolute;left:-14px;top:17px;
    width:9px;height:9px;box-sizing:border-box;border-radius:50%;
    background:var(--page);border:2px solid var(--sig);}

.read-month{position:relative;font-family:inherit;font-size:11px;font-weight:600;
    letter-spacing:0.06em;text-transform:uppercase;color:var(--grey);margin:0 0 18px;}

.read-month + .read-entry ~ .read-month{margin-top:12px;}

.read-month::before{content:"";position:absolute;left:-26px;top:4px;width:9px;height:9px;
    box-sizing:border-box;border-radius:2px;background:var(--edge-2);}

.read-when{font-family:inherit;font-size:11px;font-weight:600;letter-spacing:0.04em;
    text-transform:uppercase;color:var(--grey);margin-bottom:4px;}

.read-title{font-size:21px;line-height:1.25;
    color:var(--navy-d);margin:0 0 9px;}

/* The patient's own words. Wider leading than the interface around it, because
   this is read rather than scanned. 54ch lands near 65 characters in Inter —
   a `ch` is the width of "0", which is narrower than the average letter. */
.read-body{font-size:15.5px;line-height:1.78;color:var(--navy-l);
    max-width:54ch;white-space:normal;overflow-wrap:break-word;}

.read-empty{font-size:14px;color:var(--grey-2);font-style:italic;}

.read-pages{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:28px;}
.read-pages a,
.read-pages .current{display:inline-flex;align-items:center;justify-content:center;
    min-width:34px;height:34px;padding:0 9px;border:1px solid var(--edge-2);
    border-radius:4px;font-size:13.5px;text-decoration:none;color:var(--navy);}
.read-pages a:hover{background:var(--tint);}
.read-pages .current{background:var(--navy);color:#fff;border-color:var(--navy);}
.read-pages .disabled{display:none;}

.read-count{margin-top:10px;font-size:13px;color:var(--grey-2);}

@media (max-width:640px){
    .read-list{padding-left:20px;}
    .read-entry::before{left:-8px;}
    .read-month::before{left:-20px;}
    .read-title{font-size:18px;}
    .read-body{font-size:15px;}
}

/* BILLING PERIOD

   Two links rather than a control, because each period is its own address.
   Sized and spaced like a segmented control so it reads as one choice. */
.plan-billing{display:flex;justify-content:center;gap:4px;margin:0 auto 26px;padding:4px;
    width:max-content;background:var(--tint);border:1px solid var(--edge);border-radius:999px;}
.plan-billing-opt{display:inline-flex;align-items:center;gap:7px;padding:8px 20px;border-radius:999px;
    font-size:14.5px;font-weight:500;color:var(--grey);text-decoration:none;
    transition:background .18s,color .18s;}
.plan-billing-opt:hover{color:var(--navy-d);}
.plan-billing-opt.is-on{background:var(--page);color:var(--navy-d);box-shadow:var(--lift-2);}
/* The discount is the reason to look at the annual column, so it is on the
   link rather than in small print underneath the table. */
.plan-billing-save{padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;
    letter-spacing:0.03em;text-transform:uppercase;background:rgba(46,158,107,0.14);color:#237552;}

@media (max-width:520px){
    .plan-billing{width:100%;}
    .plan-billing-opt{flex:1;justify-content:center;padding:8px 10px;}
}