/* ============================================================================
   VEBSTERS — application styles
   ============================================================================
   One stylesheet, no framework and no CDN. Everything here is plain CSS with
   custom properties, so the whole interface is re-themed from the :root block
   below without touching a single page.
   ========================================================================= */

:root {
    /* --- brand palette ---------------------------------------------------
       The roles are the ones on the Vebsters brand sheet, so a change made
       there maps onto one line here:

         Corporate Yellow  #F2B705   buttons, highlights, icons, accents
         Rich Black        #111111   headings, and the header and footer bands
         White             #FFFFFF   page background, text on black
         Charcoal          #2E2E2E   body text
         Soft Grey         #F5F5F5   cards and section backgrounds
         Light Yellow      #FFF6D6   highlight boxes
         Dark Gold         #8C6A00   yellow-toned text on white: links, labels

       Yellow is 1.8:1 against white, so it is used only where it is a shape — a
       button fill, an accent border, an underline — never as text on a light
       background. Where text has to be yellow-toned on white it is Dark Gold,
       which is the role the sheet reserves for exactly that. Black text on a
       yellow button is 11:1; white text on it would be 1.6:1. */
    --brand:       #F2B705;
    --brand-dark:  #D9A404;   /* hover and pressed fill */
    --brand-soft:  #FFF6D6;   /* the light-yellow highlight box */
    --gold:        #8C6A00;   /* dark gold: yellow-toned text on light */
    --gold-dark:   #6B5100;

    --ink:         #111111;   /* rich black — headings, and the dark bands */
    --ink-2:       #2E2E2E;   /* charcoal — body text */
    --muted:       #6A6A6A;
    --line:        #E1E1E1;
    --line-soft:   #ECECEC;

    --bg:          #FFFFFF;   /* page background */
    --card:        #F5F5F5;   /* cards and sections */
    --flat:        #FFFFFF;   /* a surface nested inside a card */
    --thead:       #EAEAEA;

    /* The inverted bands. The brand ships a white logo for them, which is the
       logo the header uses. To put the logo on white instead, point
       vb_brand_logo() at logo-vebsters.png and flip these five values. */
    --chrome:      #111111;
    --chrome-2:    #1F1F1F;
    --chrome-text: #FFFFFF;
    --chrome-dim:  rgba(255, 255, 255, .74);
    --chrome-line: rgba(255, 255, 255, .22);

    /* Status colours. The brand sheet does not define semantic colours, so
       these are chosen to stay legible on a light card and to sit beside the
       palette rather than fight it: gold for "needs attention" (which is the
       brand's own dark gold), and no blue anywhere, since blue is not a
       Vebsters colour. */
    --good:       #1C7A4A;
    --good-soft:  #E6F4EC;
    --good-line:  #BFE0CD;
    --good-text:  #14512F;
    --warn:       #8C6A00;
    --warn-soft:  #FFF6D6;
    --warn-line:  #EBD79B;
    --warn-text:  #6D5200;
    --bad:        #A32222;
    --bad-soft:   #FDEAEA;
    --bad-line:   #F0C4C4;
    --bad-text:   #7D1C1C;
    --info-soft:  #EFEFEF;
    --info-line:  #DCDCDC;
    --info-text:  #1F1F1F;

    --radius:     10px;
    --radius-sm:  7px;
    --shadow:     0 1px 2px rgba(17, 17, 17, .05), 0 1px 3px rgba(17, 17, 17, .06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink-2);
    font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Headings are Rich Black; body text is Charcoal. */
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 8px; color: var(--ink); }

/* Dark Gold, not corporate yellow: yellow on white cannot be read. */
a { color: var(--gold); }
a:hover { color: var(--gold-dark); }

/* --- layout -------------------------------------------------------------- */

.wrap { max-width: 880px; margin: 0 auto; padding: 22px 16px 60px; }
.wrap--wide { max-width: 1100px; }

.page-title { font-size: 26px; margin: 6px 0 4px; }
.page-sub { color: var(--muted); margin: 0 0 20px; }

.muted { color: var(--muted); font-size: 14px; }

/* --- header --------------------------------------------------------------
   The brand sheet puts the header and footer bands in Rich Black, and the
   white logo exists for them, so the header is an inverted band on both sites
   and in the staff panel.
   ------------------------------------------------------------------------- */

.site-head { background: var(--chrome); border-bottom: 0; }
.site-head__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }

/* The brand is the logo lockup plus a small label naming which of the two
   sites this is. The label comes from SITE_KIND, which is why lib/ can stay
   identical on both sites. */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__logo { display: block; height: 36px; width: auto; }
.brand__sub {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--chrome-dim);
    padding-left: 12px;
    border-left: 1px solid var(--chrome-line);
}

.site-nav { display: flex; align-items: center; gap: 16px; }
.site-nav a { text-decoration: none; font-size: 15px; color: var(--chrome-dim); }
.site-nav a:hover { color: var(--chrome-text); }
.site-nav .btn { text-decoration: none; }

/* .site-nav a outranks .btn--primary on specificity, so the one filled button
   in the header needs its label restated — otherwise it would inherit the dim
   white of its neighbours and sit unreadable on the yellow fill. */
.site-nav a.btn--primary,
.site-nav a.btn--primary:hover { color: var(--ink); }

/* On the dark band the quiet button has to be inverted too, or it would be a
   white box with black text sitting in a black bar. */
.site-head .btn--quiet { background: transparent; border-color: var(--chrome-line); color: var(--chrome-text); }
.site-head .btn--quiet:hover { background: var(--chrome-2); border-color: var(--chrome-line); color: var(--chrome-text); }

.site-nav__who { font-size: 13px; color: var(--chrome-dim); }

/* Narrow screens: shrink the lockup and tighten the gaps, so the logo and the
   navigation fit on one line on a phone rather than pushing into an overflow. */
@media (max-width: 620px) {
    .site-head__inner { padding-top: 10px; padding-bottom: 10px; }
    .brand { gap: 9px; }
    .brand__logo { height: 30px; }
    .brand__sub { font-size: 10px; padding-left: 9px; }
    .site-nav { gap: 11px; }
    .site-nav a { font-size: 14px; }

    /* A 14px link with no padding is a 22px-tall target, under the 24px minimum
       WCAG 2.5.8 asks for. The padding is invisible on a link with no
       background of its own, and it only applies where the header is tight. */
    .site-nav a:not(.btn) { padding: 6px 2px; }

    /* A signed-in expert carries four or five links, which will not fit beside
       the logo at phone widths. Above, the row is `nowrap`, so the navigation
       simply overflows the right edge and the page scrolls sideways — the
       sessions site does exactly this at 360px. Letting both the row and the
       navigation wrap puts the links on a second line instead, and does nothing
       on the pages where they already fit. */
    .site-head__inner { flex-wrap: wrap; row-gap: 8px; }
    .site-nav { flex-wrap: wrap; row-gap: 6px; }
}
@media (max-width: 480px) { .brand__sub { display: none; } }

/* --- footer -------------------------------------------------------------- */

.site-foot { border-top: 0; background: var(--chrome); color: var(--chrome-dim); }
.site-foot p { margin: 6px 0; font-size: 14px; }
.site-foot p:first-child { color: var(--chrome-text); }
.site-foot .muted { color: var(--chrome-dim); }
.site-foot a { color: var(--brand); }
.site-foot a:hover { color: var(--chrome-text); }

/* --- cards and panels ---------------------------------------------------- */

.card,
.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
    margin: 0 0 18px;
}

.card--soft { background: var(--flat); }
.card--status { border-left: 4px solid var(--brand); }

.card__title { font-size: 17px; margin: 0 0 8px; }

.panel__title { font-size: 19px; padding-bottom: 8px; border-bottom: 2px solid var(--line-soft); margin-bottom: 14px; }

.grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .grid, .grid--2 { grid-template-columns: 1fr; } }

.actions { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* --- buttons ------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}

/* Yellow fill, black label. This is the one combination the brand's accent
   colour is safe in. */
.btn--primary { background: var(--brand); color: var(--ink); }
.btn--primary:hover { background: var(--brand-dark); color: var(--ink); }

.btn--quiet { background: var(--flat); border-color: var(--line); color: var(--ink); }
.btn--quiet:hover { background: var(--line-soft); color: var(--ink); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--gold); }
.btn--ghost:hover { background: var(--brand-soft); color: var(--gold-dark); }

.btn--small { padding: 5px 11px; font-size: 13px; }

.btn--remove { color: var(--bad); }
.btn--remove:hover { background: var(--bad-soft); }

/* --- flash messages and callouts ----------------------------------------- */

.flash-stack { margin: 0 0 18px; }

.flash {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    margin-bottom: 8px;
    font-size: 15px;
}

.flash--good { background: var(--good-soft); border-color: var(--good-line); color: var(--good-text); }
.flash--bad  { background: var(--bad-soft);  border-color: var(--bad-line);  color: var(--bad-text); }
.flash--warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-text); }
.flash--info { background: var(--info-soft); border-color: var(--info-line); color: var(--info-text); }

/* The highlight box, which is the brand's Light Yellow role. */
.callout {
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    margin: 0 0 18px;
    border: 1px solid var(--line);
    background: var(--flat);
    font-size: 15px;
}

.callout h3 { font-size: 15px; margin: 0 0 6px; }
.callout__body { white-space: normal; }
.callout--info { background: var(--info-soft); border-color: var(--info-line); }
.callout--warn { background: var(--brand-soft); border-color: var(--warn-line); }
.callout--bad  { background: var(--bad-soft);  border-color: var(--bad-line); }
.callout--good { background: var(--good-soft); border-color: var(--good-line); }

/* --- forms --------------------------------------------------------------- */

.form { margin: 0; }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field--wide { grid-column: 1 / -1; }

.field__label { font-weight: 600; font-size: 15px; color: var(--ink); }
.req { color: var(--bad); font-weight: 700; }

.field__help { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.group__help--after { margin-top: 8px; }

.field__error { margin: 2px 0 0; color: var(--bad); font-size: 14px; font-weight: 600; }
.field__error--form { background: var(--bad-soft); border: 1px solid var(--bad-line); border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 14px; }

.input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #CFCFCF;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 15px;
    background: var(--flat);
    color: var(--ink);
}

/* The focus ring is Rich Black rather than yellow on purpose: a yellow ring on
   white is 1.8:1, which is not a focus indicator anyone can see. */
.input:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.input--num { max-width: 130px; }
.input--inline { max-width: 240px; }
.input--file { padding: 7px 11px; background: var(--flat); }

.field--invalid .input,
.repeat__row--invalid .input { border-color: #D99A9A; background: #FFFAFA; }

textarea.input { resize: vertical; min-height: 84px; }

.group { margin: 0 0 26px; padding: 0 0 4px; }
.group__title { font-size: 17px; margin: 0 0 4px; }
.group__help { margin: 0 0 14px; color: var(--muted); font-size: 14px; }

.form--narrow { max-width: 460px; }

.form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}

/* Tracks --card, since it sits over the card it belongs to. */
.form__actions--sticky {
    position: sticky;
    bottom: 0;
    background: rgba(245, 245, 245, .96);
    backdrop-filter: blur(4px);
    /* Bleed out to the page gutter so the bar spans the whole column — and no
       further. At -22px the bar is 44px wider than the form, which at a phone
       width is 6px past the right edge of the screen: the whole page then
       scrolls sideways to reach the Save button. 16px is the gutter .wrap
       uses, so the bar reaches the edge of the page and stops there. */
    margin: 0 -16px -20px;
    padding: 14px 16px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* --- option lists -------------------------------------------------------- */

.options { display: flex; flex-direction: column; gap: 6px; }
.options--inline { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.options--tags { flex-direction: row; flex-wrap: wrap; gap: 8px; }

.option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--flat);
    cursor: pointer;
    font-size: 15px;
}

.option:hover { border-color: var(--brand-dark); }

.options--tags .option { padding: 5px 11px; }
.options--inline .option { border: 0; padding: 4px 0; background: transparent; }

.option input { margin: 2px 0 0; flex: 0 0 auto; }

.option__text { display: flex; flex-direction: column; gap: 2px; }
.option__help { font-style: normal; font-size: 13px; color: var(--muted); line-height: 1.45; }

.option--custom { display: flex; align-items: center; gap: 8px; }
.option--custom > span { font-size: 14px; color: var(--muted); }

/* --- repeats ------------------------------------------------------------- */

.repeat { display: flex; flex-direction: column; gap: 12px; }

.repeat__row {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px 12px;
    background: var(--flat);
}

/* The spare is the always-blank row that makes the group usable without
   JavaScript, so it is tinted to read as "fill this in" rather than as another
   entry. */
.repeat__row--spare { background: var(--brand-soft); border-style: dashed; border-color: var(--brand-dark); }
.repeat__row--invalid { border-color: #D99A9A; }

.repeat__rownum {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

.repeat__fields { margin-bottom: 8px; }
.repeat__row [data-remove-row] { margin-top: 4px; }

/* --- duration ------------------------------------------------------------ */

.duration-row { display: flex; gap: 12px; flex-wrap: wrap; }
.duration-row__part { display: flex; align-items: center; gap: 6px; }
.duration-row__unit { font-size: 14px; color: var(--muted); }

/* --- tables and the fee matrix ------------------------------------------- */

.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th, .table td { border: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: middle; }
.table thead th { background: var(--thead); font-size: 13px; color: var(--ink); }
.table--compact th[scope="row"] { background: var(--flat); font-weight: 600; width: 42%; }

.matrix { overflow-x: auto; }

/* --- read-only records --------------------------------------------------- */

.record { margin: 0; }
.record__row { display: flex; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.record__row dt { flex: 0 0 38%; margin: 0; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.record__row dd { flex: 1; margin: 0; }
.record__row--empty dd { color: #9A9A9A; font-style: italic; }
.record__group { padding: 14px 0 4px; font-weight: 700; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.record__repeat { margin: 10px 0; }
.record__repeat > dt { font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.record__card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 8px; background: var(--flat); }
.record__pair { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 14.5px; }

@media (max-width: 620px) {
    .record__row { flex-direction: column; gap: 2px; }
    .record__row dt { flex: none; }
}

/* --- pills and status ----------------------------------------------------
   The four semantic tones plus two neutrals. "Info" is a filled black pill
   rather than a pale tint, because a pale grey one would be indistinguishable
   from the draft pill next to it in the same list.
   ------------------------------------------------------------------------- */

.pill {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 99px;
    white-space: nowrap;
}

.pill--good    { background: var(--good-soft); color: var(--good-text); }
.pill--warn    { background: var(--brand-soft); color: var(--warn); }
.pill--bad     { background: var(--bad-soft);  color: var(--bad); }
.pill--info    { background: var(--ink);       color: var(--chrome-text); }
.pill--neutral { background: var(--line-soft); color: var(--ink-2); }
.pill--vebsters { background: var(--brand-soft); color: var(--warn); }
/* Customer-facing visibility, marked in the brand's black so it does not read
   as one more status. */
.pill--b2b      { background: var(--ink); color: var(--chrome-text); }

.status-bar { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; margin-bottom: 8px; }
.status-bar__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 3px; }

/* --- progress steps ------------------------------------------------------ */

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

.step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: 0; }

.step__mark {
    flex: 0 0 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--line-soft);
    color: var(--muted);
}
.step--done .step__mark { background: var(--good-soft); color: var(--good); }
.step--open .step__mark { background: var(--brand-soft); color: var(--warn); }
.step--skipped { opacity: .62; }

.step__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.step__title { font-weight: 600; }
.step__note { font-size: 14px; color: var(--muted); }

/* --- checks (setup page) ------------------------------------------------- */

.checks { list-style: none; margin: 0; padding: 0; }
.check { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.check:last-child { border-bottom: 0; }
.check__mark { flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.check--pass .check__mark { background: var(--good-soft); color: var(--good); }
.check--fail .check__mark { background: var(--bad-soft); color: var(--bad); }
.check__body p { margin: 3px 0 0; font-size: 14.5px; }
.check__fix { color: var(--bad); font-weight: 500; }

/* --- tabs, crumbs -------------------------------------------------------- */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tab { padding: 9px 15px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--muted); border-bottom: 2px solid transparent; }
.tab:hover { color: var(--ink); }
.tab--on { color: var(--gold); border-bottom-color: var(--brand); }

.crumbs { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 14.5px; }
.crumbs__pos { color: var(--muted); }

/* --- profile header ------------------------------------------------------ */

.profile-head__body { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; }
.profile-head__name { font-size: 23px; margin: 0 0 4px; }
.profile-head__headline { margin: 0 0 6px; color: var(--ink-2); font-size: 16px; }
.profile-head__photo { width: 104px; height: 104px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }

/* --- misc ---------------------------------------------------------------- */

.ticks { margin: 10px 0; padding-left: 20px; }
.ticks li { margin-bottom: 4px; }
.ticks--open { color: var(--warn); }

.meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.meta dt { color: var(--muted); font-size: 13px; font-weight: 600; }
.meta dd { margin: 0 0 0 6px; font-size: 14px; }

.thumb { max-width: 130px; border-radius: var(--radius-sm); border: 1px solid var(--line); }

.tiny { font-size: 12px; }
.nowrap { white-space: nowrap; }

/* --- staff panel ---------------------------------------------------------
   The review queue is a different place from the expert-facing site: denser,
   plainer, and built for scanning a list rather than filling a form. The dark
   band is shared with the expert header, so what marks this side out is the
   width, the density, and the active-link underline in brand yellow.
   ------------------------------------------------------------------------- */

.site-head--admin .site-nav a.on { color: var(--chrome-text); border-bottom: 2px solid var(--brand); padding-bottom: 3px; }

/* Counts across the top of the dashboard. */
.stat-row { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin-bottom: 18px; }
@media (max-width: 860px) { .stat-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .stat-row { grid-template-columns: 1fr; } }

.stat {
    display: block;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
    text-decoration: none;
    color: var(--ink);
}
a.stat:hover { border-color: var(--brand); color: var(--ink); }
.stat--attention { border-left: 4px solid var(--brand); }
.stat__value { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.stat__label { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; }

/* Filters sit above every list, in one row that wraps on a narrow screen. */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 16px;
}
.filters__label { font-size: 13px; font-weight: 600; color: var(--muted); }
.filters__input { flex: 1 1 220px; min-width: 160px; }
.filters__select { flex: 0 0 auto; }

.table--list td { vertical-align: top; }
.table--list tbody tr:hover { background: var(--thead); }

/* A submitted record, whether a stored snapshot or a live render. */
.snapshot {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--flat);
    padding: 4px 18px 18px;
    overflow-x: auto;
}
.snapshot__heading { font-size: 17px; margin: 26px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }

/* The back link out of a section is the only control in the crumbs row, and at
   its text height it is 23px tall — one pixel under the 24px target size WCAG
   2.5.8 asks for. It is not inside a sentence, so the inline exemption does not
   cover it. Padding grows the box without moving the row. */
.crumbs a { text-decoration: none; padding: 5px 2px; }

/* The identity block on one expert's page. */
.identity { display: flex; gap: 22px; align-items: flex-start; }
@media (max-width: 700px) { .identity { flex-direction: column; } }

.identity__photo img { width: 128px; height: 128px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); display: block; }
.identity__body { flex: 1; min-width: 0; }
.identity__name { font-size: 23px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.identity__headline { margin: 0 0 12px; color: var(--ink-2); font-size: 16px; }

.identity__facts { display: grid; gap: 6px 22px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0; }
.identity__facts dt { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.identity__facts dd { margin: 1px 0 0; font-size: 14.5px; }

/* The decision box. Slightly set apart, because it is the point of the page. */
.review-box { border-left: 4px solid var(--brand); }

/* Activity rows, used on the dashboard and both record pages. */
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.activity li:last-child { border-bottom: 0; }
.activity__when { flex: 0 0 132px; color: var(--muted); font-size: 13px; }
.activity__who { flex: 0 0 180px; font-weight: 600; overflow-wrap: anywhere; }
.activity__what { flex: 1; min-width: 200px; }

/* Mail log entries: a summary line that opens to the whole message. */
.mail-item { border-bottom: 1px solid var(--line-soft); padding: 8px 0; }
.mail-item:last-child { border-bottom: 0; }
.mail-item summary { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; cursor: pointer; font-size: 14.5px; }
.mail-item__to { flex: 0 0 220px; font-weight: 600; overflow-wrap: anywhere; }
.mail-item__subject { flex: 1; min-width: 180px; }
.mail-item__when { color: var(--muted); font-size: 13px; }
.mail-item__body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--flat);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 10px 0 6px;
    font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.mail-item__links { font-size: 13.5px; margin: 6px 0; }

.raw summary { cursor: pointer; font-weight: 600; }
.raw__json {
    background: var(--flat);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px;
    overflow-x: auto;
    font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    max-height: 480px;
}

.pager { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.pager__link { padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--flat); text-decoration: none; font-size: 14px; }
.pager__link--on { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.pager__gap { padding: 5px 4px; color: var(--muted); }

[hidden] { display: none !important; }

@media print {
    .site-head, .site-foot, .form__actions, .tabs, .crumbs, .filters, .stat-row, .review-box, .actions { display: none; }
    body, body.admin { background: #fff; }
    /* Cards go white on paper: a page of Soft Grey would cost a fortune in ink
       and read worse than plain black on white. */
    .card, .panel { background: #fff; box-shadow: none; border-color: #ccc; }
    .snapshot { border: 0; padding: 0; }
}