/* Viva Events — the Buyer Desk.
 *
 * Design handoff: ~/Downloads/design_handoff_buyer_desk (build 3a / 4a).
 * Plan: docs/product/buyer-workspace/desk-implementation-plan.md
 *
 * The prototype is inline-styled because its runtime demands it. The TOKENS are
 * the contract; the inline attributes were an artifact. Everything below styles
 * through the custom properties in :root.
 *
 * One brand, two temperatures: the marketing site runs on warm paper (#FAF4EC);
 * the desk runs cooler, because status colour has to read against the ground and
 * an amount must never look like a status. Same typefaces, same ink.
 */

:root {
    --canvas:      #E8E9E5;
    --surface:     #F7F8F5;   /* app background, third-panel wash */
    --raised:      #FCFCFA;   /* cards */
    --white:       #FFFFFF;
    /* The chrome — header band and the mobile tab bar — is the brand green. A
       stone band one step below the page was still one surface at arm's length;
       the frame has to be a different colour, not a different shade. Everything
       that sits ON it takes --on-band, never --ink. */
    --band:        #1F5E45;
    --band-edge:   #143A29;
    --on-band:     #F4F7F2;
    --on-band-2:   #BFD3C6;

    --ink:         #241F1A;
    --ink-2:       #3D3F3A;
    --ink-3:       #494B45;
    --muted:       #6B6E68;
    --faint:       #8C8F87;

    --border:      #D8DAD3;   /* frame borders, group rules */
    --border-2:    #D2D5CD;   /* card borders, buttons */
    --border-3:    #E3E5DE;   /* row separators, band edges */
    --border-4:    #E8EAE3;   /* card-internal dividers */
    --border-5:    #C9CBC4;   /* chips, strong field borders */

    --green:       #1F5E45;
    --green-h:     #16442F;
    --green-wash:  #F1F5F1;
    --green-edge:  #C4D8C6;
    --green-sub:   #C3D3C6;

    --ochre:       #8A4B00;   /* deadlines, unread badges, needs-you */
    --ochre-wash:  #FBF3E7;
    --ochre-edge:  #E0C9A6;
    --urgent:      #8E1F1F;   /* under ~4 hours */
    --terra:       #A03A17;   /* amounts owed, over-quote */
    --progress:    #4A5D57;   /* current stage, in-flight */

    --chat-out:    #E9EFE9;   /* outgoing bubble */

    /* The Ask panel's own neutrals. The desk's greys are cool, because status
       colour has to read against them; a chat bubble is not status and takes
       the warm paper the rest of the brand uses. Nothing else on the desk
       should reach for these. */
    --panel-sunken:  #F5F4EF;   /* assistant bubble */
    --panel-pill:    #F1F0EA;   /* request pill, close-button hover */
    --panel-tint:    #E4F0E9;   /* pill hover */
    --panel-divider: #F0EFE9;   /* header rule */
    --green-mute:    #B8CFC2;   /* send, with nothing to send */
    --dot-1:         #A9A99E;
    --dot-2:         #C6C6BC;
    --dot-3:         #DCDBD4;
    --avatar:      #E4E7E0;
    --rail-empty:  #E0E2DB;

    --shadow-card: 0 1px 2px rgba(36,31,26,.05), 0 18px 44px -22px rgba(36,31,26,.26);
    --shadow-fab:  0 10px 28px -12px rgba(36,31,26,.6);

    --dsp: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
    --body: "Public Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.dsp { font-family: var(--dsp); }
.tnum { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-h); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }

/* ── Header band ─────────────────────────────────────────────── */
.d-head { background: var(--band); border-bottom: 1px solid var(--band-edge); }
.d-head :focus-visible { outline-color: var(--white); }
.d-head-in {
    max-width: 1288px; margin: 0 auto; padding: 16px 32px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.d-mark { font-family: var(--dsp); font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--on-band); }
.d-mark:hover { color: var(--white); }
.d-who { display: flex; align-items: center; gap: 12px; }
.d-org { font-size: 14px; color: var(--on-band-2); }
.d-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    background: var(--avatar); border: 1px solid var(--border-2);
    display: grid; place-items: center;
    font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}

/* The avatar is also the account trigger. It carries a button's affordances
   without a button's chrome — the ring on :focus-visible is the whole product's. */
.d-who { position: relative; }
.d-avatar-btn {
    font-family: var(--body); cursor: pointer; padding: 0;
    background: var(--white); border-color: var(--band-edge); color: var(--green);
}
.d-avatar-btn:hover { background: var(--green-wash); }
.d-avatar-btn[aria-expanded="true"] { background: var(--green-wash); border-color: var(--white); }

/* ── Account menu ────────────────────────────────────────────── */
.d-menu {
    position: absolute; top: calc(100% + 10px); right: 0; width: 268px; z-index: 60;
    background: var(--raised); border: 1px solid var(--border-2); border-radius: 12px;
    box-shadow: var(--shadow-card); overflow: hidden;
}
.d-menu[hidden] { display: none; }
.d-menu-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.d-menu-head .d-avatar { width: 38px; height: 38px; font-size: 14px; }
.d-menu-id { min-width: 0; }
.d-menu-name {
    font-size: 14px; font-weight: 600; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d-menu-sub {
    font-size: 12.5px; color: var(--muted); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d-menu-meta {
    padding: 10px 16px; border-top: 1px solid var(--border-4); border-bottom: 1px solid var(--border-4);
    font-size: 12.5px; color: var(--muted);
}
.d-menu-meta strong { color: var(--ink-2); font-weight: 600; }
.d-menu-items { padding: 6px; }
.d-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 10px 12px; border: 0; border-radius: 8px; background: none; cursor: pointer;
    font-family: var(--body); font-size: 14px; font-weight: 500; color: var(--ink-2);
}
.d-menu-item:hover { background: var(--green-wash); color: var(--ink); }
.d-menu-item svg { flex: none; }

/* ── Tabs ────────────────────────────────────────────────────── */
.d-tabs {
    max-width: 1288px; margin: 0 auto; padding: 14px 32px 0;
    display: flex; gap: 26px;
}
.d-tab {
    background: none; border: 0; cursor: pointer; font-family: var(--body);
    font-size: 15px; font-weight: 600; color: var(--on-band-2);
    padding: 8px 2px 13px; border-bottom: 2px solid transparent;
}
.d-tab:hover { color: var(--on-band); }
.d-tab[aria-selected="true"] { font-weight: 700; color: var(--on-band); border-bottom-color: var(--on-band); }

/* ── Feed ────────────────────────────────────────────────────── */
.d-main { max-width: 1288px; margin: 0 auto; padding: 34px 32px 120px; }
.d-groups { display: flex; flex-direction: column; gap: 30px; }

.d-glabel {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}
.d-g-needs_you .d-glabel { color: var(--ochre); }
.d-g-in_flight .d-glabel { color: var(--progress); }
.d-g-happened  .d-glabel { color: var(--terra); }
.d-zone { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--faint); font-weight: 400; }
.d-items { display: flex; flex-direction: column; gap: 12px; }

/* ── The activity board ──────────────────────────────────────────
   Status is the lane a card sits in, so a card carries only what tells it
   apart from its neighbours. The design handoff's own palette is not used:
   it specifies a second green and a second typeface, and the desk already
   has both — its hexes are read as intent and answered with these tokens.

   No shadow, scale or translate anywhere below. Hover moves a border colour
   and nothing else, which is the one card state this design has. */
.d-phases {
    display: flex; gap: 4px; border-bottom: 1px solid var(--border-3);
    overflow-x: auto; scrollbar-width: none;
}
.d-phases::-webkit-scrollbar { display: none; }
.d-phase {
    display: flex; align-items: baseline; gap: 8px; flex: none;
    padding: 10px 16px; background: none; border: 0; cursor: pointer;
    font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--muted);
    /* The underline has to cover the container's rule, not sit above it. */
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.d-phase:hover { color: var(--ink-2); }
.d-phase[aria-selected="true"] { color: var(--green); border-bottom-color: var(--green); }
.d-phase-n { font-size: 13px; font-weight: 600; opacity: .6; }

.d-caption {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 24px 0;
}
.d-caption-t {
    font-size: 12px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink);
}

.d-board { display: grid; gap: 20px; align-items: start; }
.d-board-flight  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.d-board-payment { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.d-lane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.d-lane-h {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding-bottom: 10px; border-bottom: 2px solid var(--green);
}
/* Amber, not green: money and motion are different kinds of open. */
.d-board-payment .d-lane-h { border-bottom-color: var(--ochre); }
.d-lane-l { font-size: 14px; font-weight: 600; color: var(--ink); }
.d-lane-n { font-size: 13px; color: var(--faint); }
.d-lane-empty {
    border: 1px dashed var(--border); border-radius: 8px; padding: 20px; margin: 0;
    font-size: 12px; color: var(--faint); text-align: center;
}
.d-empty-wide { padding: 32px 20px; font-size: 14px; }

.d-bcard {
    display: flex; flex-direction: column; gap: 9px;
    background: var(--raised); border: 1px solid var(--border-3);
    border-radius: 8px; padding: 16px;
}
.d-bcard:hover { border-color: var(--green); }
.d-board-payment .d-bcard:hover { border-color: var(--ochre); }
.d-bcard-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.d-bcard-t {
    font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink);
    text-decoration: none; min-width: 0;
}
.d-bcard-t:hover { color: var(--green); }
.d-bcard-amt { font-size: 15px; font-weight: 600; color: var(--ink); flex: none; }
/* Calling a request off. Quiet until wanted — it must not compete with the
   title — but never hover-only: it stays in the tab order and shows itself on
   focus, or it would not exist for a keyboard or a touchscreen. */
.d-bcard-x {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; margin: -3px -4px 0 0; padding: 0;
    background: none; border: 0; border-radius: 6px; cursor: pointer;
    color: var(--rail-empty);
}
.d-bcard:hover .d-bcard-x { color: var(--faint); }
.d-bcard-x:hover, .d-bcard-x:focus-visible { background: var(--ochre-wash); color: var(--terra); }
.d-bcard-x:focus-visible { outline: 2px solid var(--terra); outline-offset: 1px; }
.d-bcard-d { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; }
/* The two facts a small card must never drop, because losing either costs
   money: a proposal's reply deadline, and an amount still outstanding. */
.d-bcard .d-deadline { font-size: 12.5px; margin: 0; }
.d-bcard .d-deadline svg { flex: none; }
.d-bcard-money { font-size: 12.5px; font-weight: 600; color: var(--terra); margin: 0; }
/* The consequence travels with the countdown above it — a deadline that does
   not say what it does reads as a nudge. */
.d-bcard-consq { font-size: 12px; color: var(--muted); margin: -4px 0 0; }
/* Someone else's deadline: why it is on her board, without an imperative. */
.d-bcard-wait { font-size: 12.5px; color: var(--muted); margin: 0; }
.d-bcard .d-sub { font-size: 12.5px; color: var(--muted); margin: 0; }
.d-bcard-f {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-top: 6px; border-top: 1px solid var(--border-4);
}
.d-bcard-o { font-size: 12px; color: var(--faint); min-width: 0; }
.d-bcard-a { font-size: 13px; font-weight: 500; color: var(--green); flex: none; text-decoration: none; }
.d-bcard-a:hover { color: var(--green-h); }

/* ── Completed: a table, because a finished event has no next step.
   Six tracks shared by the header and every row, so the columns line up as
   one read down the page. */
.d-done { display: flex; flex-direction: column; }
.d-done-h, .d-done-r {
    display: grid; grid-template-columns: 1.6fr .6fr 1fr .8fr .8fr 168px;
    gap: 20px; align-items: center;
}
.d-done-acts { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
/* A filing cabinet, not a delete — so it reads as an ordinary action rather
   than a warning, and it says the same word the tab does. */
.d-done-arc {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--faint);
}
.d-done-arc:hover, .d-done-arc:focus-visible { color: var(--ink-2); text-decoration: underline; }
.d-done-h {
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
    font-size: 11px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--faint);
}
.d-done-r { padding: 16px 0; border-bottom: 1px solid var(--border-4); font-size: 14px; color: var(--ink-2); }
.d-done-r:hover { background: var(--raised); }
.d-done-t { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.d-done-t:hover { color: var(--green); }
.d-done-a { font-weight: 500; color: var(--green); justify-self: end; text-decoration: none; }
.d-done-a:hover { color: var(--green-h); }

/* Four lanes stop fitting well before the page does. They scroll sideways
   rather than collapsing: the lane IS the status here, so stacking them would
   throw away the one thing the board exists to show. */
@media (max-width: 1099px) {
    .d-board {
        grid-template-columns: none; grid-auto-flow: column;
        grid-auto-columns: minmax(258px, 1fr);
        overflow-x: auto; padding-bottom: 10px;
        scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    }
    .d-lane { scroll-snap-align: start; }
}

/* The completed table drops to two columns: the event and its facts, labelled,
   because a bare "12" under nothing is not a guest count. */
@media (max-width: 639px) {
    .d-done-h { display: none; }
    .d-done-r { grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 14px 0; }
    /* The title and the link get their own full-width rows; the four facts
       pair up between them. [data-label] is what tells the two apart, so the
       label prefix can never land on the event name. */
    .d-done-r > span:first-child,
    .d-done-r > span:last-child { grid-column: 1 / -1; }
    .d-done-r > span[data-label] { font-size: 13px; color: var(--muted); }
    .d-done-r > span[data-label]::before { content: attr(data-label) " "; color: var(--faint); }
    .d-done-acts { grid-column: 1 / -1; justify-content: flex-start; margin-top: 4px; }
}

/* The three-panel card. The 232px money column is load-bearing: it makes the
   amounts line up down the whole feed, so scanning money is one vertical read.
   It must not flex above the breakpoint. */
.d-card {
    display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) 232px;
    background: var(--raised); border: 1px solid var(--border-2); border-radius: 11px;
    overflow: hidden;
}
.d-p { padding: 21px 24px; min-width: 0; }
.d-p + .d-p { border-left: 1px solid var(--border-4); }
.d-p-money {
    background: var(--surface); text-align: right;
    display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
}
/* In flight the column is the button alone — the stage label above it moved
   into the stepper — and space-between would strand it against the top. */
.d-p-money.d-p-center { justify-content: center; }

.d-deadline { font-size: 13.5px; font-weight: 600; letter-spacing: 0; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.d-deadline.is-soon { color: var(--urgent); }
.d-deadline:not(.is-soon) { color: var(--ochre); }
.d-title {
    display: inline-block; font-family: var(--dsp); font-size: 20px; font-weight: 600;
    letter-spacing: -.01em; line-height: 1.25; color: var(--ink); margin: 0 0 8px;
}
.d-title:hover { color: var(--green); }
.d-facts { font-size: 14.5px; color: var(--muted); margin: 0; }
.d-sub { font-size: 13.5px; color: var(--faint); margin: 6px 0 0; }

.d-venue { font-family: var(--dsp); font-size: 19px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 4px; }
.d-when { font-size: 13.5px; color: var(--muted); margin: 0 0 10px; }
.d-incl { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.d-terms { font-size: 13.5px; color: var(--muted); margin: 8px 0 0; }

.d-amount { font-family: var(--dsp); font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.d-payee { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.d-consequence { font-size: 12.5px; color: var(--ochre); margin: 8px 0 0; text-align: right; }

.d-actions { display: flex; flex-direction: column; gap: 8px; }
.d-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; text-align: center; cursor: pointer;
    font-family: var(--body); font-size: 15px; font-weight: 600;
    border-radius: 8px; border: 1px solid transparent; padding: 0 14px;
}
.d-btn-p { min-height: 46px; background: var(--green); color: var(--surface); }
.d-btn-p:hover { background: var(--green-h); color: var(--surface); }
.d-btn-s { min-height: 42px; background: transparent; border-color: var(--border-2); color: var(--ink-2); }
.d-btn-s:hover { border-color: var(--ink-3); color: var(--ink); }

/* Stage stepper — four steps that NAME a stage. Never a percentage: it is work
   humans are doing on the phone, and a bar filling to 50% claims a precision
   nobody has. This replaced four anonymous segments, which could say how far
   along a request was but never where it had got to.

   The active step used to pulse. It doesn't any more: the fade was compensating
   for a bar that had no way to say "here, now", and the word under a filled ring
   says it without moving. */
.d-stepper { display: flex; align-items: flex-start; list-style: none; margin: 0 0 12px; padding: 0; }
.d-step { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 64px; flex: none; }
.d-dot {
    width: 26px; height: 26px; border-radius: 999px; box-sizing: border-box; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--raised); border: 2px solid var(--rail-empty); color: var(--raised);
}
.d-dot svg { width: 13px; height: 13px; display: block; }
.d-step.is-done .d-dot { background: var(--green); border: 0; }
.d-step.is-now .d-dot { border-color: var(--green); }
.d-step.is-now .d-dot::after {
    content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--green);
}
.d-slabel { font-size: 12px; font-weight: 400; line-height: 1.2; color: var(--faint); }
.d-step.is-done .d-slabel { font-weight: 500; color: var(--ink-2); }
.d-step.is-now .d-slabel { font-weight: 600; color: var(--green); }

/* The connector belongs to the gap, not to a step. It flexes, and tucks under
   the fixed-width labels, so the LABELS are what space the circles evenly. */
.d-join { height: 26px; display: flex; align-items: center; flex: 1; margin: 0 -8px; }
.d-join i { display: block; height: 2px; width: 100%; background: var(--rail-empty); }
.d-join.is-done i { background: var(--green); }

/* Colour is not a status. Every step says its own state out loud. */
.d-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

.d-note { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.d-note .d-ago { color: var(--faint); }
.d-promise { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.d-coord { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.d-coord .d-avatar { width: 44px; height: 44px; font-size: 15px; }

/* Thin rows — drafts and settled things. Same three columns so their content
   still lines up with the cards above, minus the card chrome. */
.d-thin {
    display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) 232px;
    padding: 14px 24px; gap: 0; align-items: baseline;
}
.d-thin .d-title { font-size: 16px; margin: 0; }
.d-thin-m { font-size: 13.5px; color: var(--muted); }
.d-thin-a { text-align: right; font-size: 13.5px; }

.d-pill {
    display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
    background: var(--green-wash); border: 1px solid var(--green-edge); color: var(--green);
}

/* ── Empty, loading, error ───────────────────────────────────── */
.d-state { padding: 56px 0 24px; max-width: 46ch; }
.d-state h2 { font-family: var(--dsp); font-size: 25px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 10px; }
.d-state p { font-size: 15.5px; color: var(--muted); margin: 0 0 18px; }
.d-state .d-btn { display: inline-flex; width: auto; min-height: 46px; }
.d-skeleton { height: 108px; border-radius: 11px; background: var(--raised); border: 1px solid var(--border-3); }

/* ── Calendar ────────────────────────────────────────────────── */
.d-month {
    font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--border); margin: 0 0 12px;
}
.d-cal-row { display: flex; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--border-4); }
.d-cal-d { width: 44px; flex: none; text-align: center; }
.d-cal-n { font-family: var(--dsp); font-size: 21px; font-weight: 600; line-height: 1.1; }
.d-cal-w { font-size: 11.5px; color: var(--muted); }
.d-foot-note { font-size: 13.5px; color: var(--faint); margin: 18px 0 0; }

/* ── Calendar: the two views ─────────────────────────────────── */
.d-calbar { display: flex; justify-content: flex-end; margin: 0 0 16px; }
/* NOT `.d-seg`: that WAS the four-part stage rail on every Activity card --
   now `.d-stepper` above, but the lesson stands. A second `.d-seg` block here
   sat AFTER it and won, so every rail segment picked up a border,
   `overflow: hidden` and `background: var(--raised)` -- the last of which beat
   `.d-seg.is-done { background: var(--green) }` at equal specificity and
   silently drained the colour out of the rail on the busiest screen in the
   product. It also collapsed this switch to 0x0, which is how it was caught.
   Prefix anything new here `d-cal`. */
.d-calseg { display: inline-flex; border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden; background: var(--raised); }
.d-calseg-b {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: 13px; color: var(--muted);
    padding: 7px 15px; min-height: 34px;
}
.d-calseg-b + .d-calseg-b { border-left: 1px solid var(--border-2); }
.d-calseg-b:hover { color: var(--ink-2); }
.d-calseg-b.is-on { background: var(--ink); color: var(--white); font-weight: 500; }

.d-monthnav { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; }
.d-monthname { font-size: 21px; font-weight: 600; letter-spacing: -.015em; margin: 0 6px; }
.d-navb {
    appearance: none; cursor: pointer; font: inherit; font-size: 17px; line-height: 1;
    width: 32px; height: 32px; flex: none; border-radius: 8px;
    border: 1px solid var(--border-2); background: var(--raised); color: var(--ink-2);
}
.d-navb:hover { background: var(--white); color: var(--ink); }
.d-linkish {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: 13.5px; color: var(--green); text-decoration: underline;
    text-underline-offset: 2px; padding: 4px 2px;
}
.d-linkish:hover { color: var(--green-h); }
.d-today { margin-left: auto; }

/* The grid. `minmax(0, 1fr)` and not `1fr`: a long event title in a track
   sized by content stretches its column and breaks the week's alignment. */
.d-grid { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: var(--raised); }
.d-grid-h, .d-grid-r { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.d-grid-h { background: var(--surface); border-bottom: 1px solid var(--border); }
.d-grid-dow {
    font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); text-align: center; padding: 9px 4px;
}
.d-grid-dow abbr { text-decoration: none; border: 0; }
.d-grid-r + .d-grid-r .d-cell { border-top: 1px solid var(--border-4); }
.d-cell { min-height: 96px; padding: 6px; border-left: 1px solid var(--border-4); }
.d-cell:first-child { border-left: 0; }
.d-cell.is-out { background: var(--surface); }
.d-cell.is-out .d-cell-n { color: var(--faint); }
.d-cell-n { font-size: 12.5px; color: var(--muted); text-align: right; padding: 1px 3px 5px; }
.d-cell.is-today .d-cell-n {
    display: inline-flex; align-items: center; justify-content: center; float: right;
    min-width: 22px; height: 22px; margin-bottom: 3px; padding: 0 5px;
    border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 600;
}

.d-ev {
    display: block; clear: both; text-decoration: none;
    border-radius: 6px; padding: 4px 6px; margin-bottom: 4px;
    background: var(--green-wash); border: 1px solid var(--green-edge); color: var(--ink);
}
.d-ev:hover { background: var(--white); border-color: var(--green); }
/* A colleague's booking is on her calendar but is not hers to act on, and the
   desk says so everywhere else too. */
.d-ev.is-theirs { background: var(--surface); border-color: var(--border-2); }
.d-ev-t, .d-ev-m { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-ev-t { font-size: 12.5px; font-weight: 500; line-height: 1.35; }
.d-ev-m { font-size: 11.5px; color: var(--muted); }
.d-empty-month { font-size: 14px; color: var(--muted); margin: 14px 0 0; }

/* Narrow: seven columns cannot hold a title, so the cells become date squares
   with a dot per booking and the agenda carries the detail. */
@media (max-width: 640px) {
    .d-cell { min-height: 54px; padding: 4px 3px; }
    .d-cell-n { text-align: center; padding: 1px 0 3px; }
    .d-cell.is-today .d-cell-n { float: none; margin: 0 auto 3px; }
    .d-ev { padding: 0; margin: 0 auto 3px; width: 6px; height: 6px; border-radius: 999px; background: var(--green); border-color: var(--green); }
    .d-ev.is-theirs { background: var(--faint); border-color: var(--faint); }
    .d-ev-t, .d-ev-m { display: none; }
    .d-monthname { font-size: 18px; }
}

/* ── Account ─────────────────────────────────────────────────── */
.d-rows { border-top: 1px solid var(--border-3); max-width: 560px; }
.d-row { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--border-3); }
.d-row dt { font-size: 13.5px; color: var(--muted); margin: 0; }
.d-row dd { font-size: 15px; margin: 0; text-align: right; }

/* ── The launcher ────────────────────────────────────────────── */
/* A bubble, not a pill. The elongated label ran nearly the width of a phone and
   read as a page action; a circle reads as the one thing that is always there.
   The words survive in .d-sr, so the accessible name is unchanged. */
.d-fab {
    position: fixed; right: 28px; bottom: 26px; z-index: 30;
    display: inline-grid; place-items: center;
    width: 60px; height: 60px; padding: 0; border-radius: 50%;
    background: var(--ink); color: var(--surface); box-shadow: var(--shadow-fab);
    /* A <button> does not inherit font-family. This was an <a> until the
       launcher started opening a panel, and dropping the family shipped the
       label in the browser default. */
    font-family: var(--body); font-size: 16px; font-weight: 600; border: 0; cursor: pointer;
}
.d-fab:hover { color: var(--surface); }
.d-fab svg { width: 24px; height: 24px; flex: none; }

/* ── Responsive. The three-panel card is the thing that gives: below 1100px
   panel 3 stacks under panels 1–2 with the amount still right-aligned; below
   640px the tab row becomes a bottom bar. ─────────────────────── */
@media (max-width: 1099px) {
    .d-card { grid-template-columns: minmax(0,1fr); }
    .d-p + .d-p { border-left: 0; border-top: 1px solid var(--border-4); }
    .d-p-money { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
    .d-actions { flex: 1; min-width: 200px; }
    .d-thin { grid-template-columns: minmax(0,1fr); gap: 4px; }
    .d-thin-a { text-align: left; }
}
@media (max-width: 639px) {
    .d-head-in, .d-tabs, .d-main { padding-left: 20px; padding-right: 20px; }
    /* The header's bottom padding is 0 because the tab row supplies it. Below
       640px that row is fixed to the foot, so the mark sat on the band's edge. */
    .d-head-in { padding-bottom: 14px; }
    .r-crumbs { padding-top: 2px; }
    .d-main { padding-bottom: 190px; }
    .d-tabs {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
        background: var(--band); border-top: 1px solid var(--band-edge);
        padding: 8px 10px 28px; gap: 0; max-width: none;
    }
    .d-tab {
        flex: 1; min-height: 52px; padding: 6px 2px; border-bottom: 0;
        font-size: 13px; font-weight: 600;
    }
    .d-tab[aria-selected="true"] { font-weight: 700; border-bottom: 0; box-shadow: inset 0 -2px 0 var(--on-band); }
    .d-title { font-size: 17.5px; }
    .d-btn-p { min-height: 48px; }
    .d-btn-s { min-height: 44px; }
    .d-fab { right: 18px; bottom: 96px; width: 58px; height: 58px; }
}
/* Narrower than a phone: the circles still fit, the four words do not. Keep the
   one label that answers "where is this now". */
@media (max-width: 359px) {
    .d-step:not(.is-now) .d-slabel { display: none; }
}

/* ── The request page ────────────────────────────────────────────
   Everything about one request in a single scroll, no sub-tabs. Shares this
   stylesheet with the desk because the header IS the desk's header: arriving
   here must not feel like leaving. */
.r-crumbs {
    max-width: 1288px; margin: 0 auto; padding: 14px 32px 16px;
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px;
}
.r-crumbs a { color: var(--on-band-2); }
.r-crumbs a:hover { color: var(--on-band); }
.r-crumbs .r-sep { color: var(--green-sub); opacity: .6; }
.r-crumbs .r-here { color: var(--on-band); font-weight: 500; }

.r-title { display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 30px; }
.r-meta { font-size: 13px; color: var(--faint); margin: 0 0 10px; }
.r-h1 { font-family: var(--dsp); font-size: clamp(1.7rem, 4vw, 2.125rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 10px; text-wrap: balance; }
.r-facts { font-size: 15.5px; color: var(--ink-3); margin: 0; }
.r-own { font-size: 14px; color: var(--muted); margin: 6px 0 0; }

.r-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; margin-bottom: 12px; }
.r-pill-needs { background: var(--ochre-wash); border: 1px solid var(--ochre-edge); color: var(--ochre); }
.r-pill-done  { background: var(--green-wash); border: 1px solid var(--green-edge); color: var(--green); }
.r-pill-flight{ background: var(--surface); border: 1px solid var(--border-2); color: var(--progress); }
.r-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulseDot 2.6s ease-in-out infinite; }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .r-dot { animation: none; } }

.r-band { margin-bottom: 34px; }
.r-band-h {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.r-opt { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) 268px; }
.r-addr { font-size: 14px; color: var(--muted); margin: 4px 0 0; }

/* The shortlist — where each venue stands (0736). Deliberately flatter than
   .r-opt: these are candidates, and one of them being a card as heavy as the
   proposed option would read as four competing decisions rather than one
   decision and its working. */
.r-tally { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.r-sl-row {
    display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) 150px;
    gap: 18px; align-items: baseline;
    padding: 13px 0; border-bottom: 1px solid var(--border-4);
}
.r-sl-row:last-child { border-bottom: 0; }
/* The one already put to her, tied back to the band below without repeating it. */
.r-sl-row.is-proposed { background: var(--green-wash); border-radius: 8px; padding-left: 12px; padding-right: 12px; }
.r-sl-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.r-sl-addr { display: block; font-size: 13.5px; color: var(--faint); margin-top: 3px; }
.r-sl-detail { font-size: 14px; color: var(--muted); }
/* Where to go and check it. Quiet by default -- these are a convenience beside
   the name, not a call to action competing with Rule out. */
.r-sl-links { display: block; margin-top: 5px; }
.r-sl-link {
    font-size: 12.5px; font-weight: 600; color: var(--muted);
    text-decoration: none; border-bottom: 1px solid var(--border-2);
    padding-bottom: 1px; margin-right: 14px;
}
.r-sl-link:hover { color: var(--ink); border-bottom-color: currentColor; }
.r-sl-state { text-align: right; }
.r-sl-tag {
    display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
    border: 1px solid var(--border-2); background: var(--surface); color: var(--muted);
}
.r-sl-tag.is-quoted   { background: var(--green-wash); border-color: var(--green-edge); color: var(--green); }
.r-sl-tag.is-asked    { background: var(--ochre-wash); border-color: var(--ochre-edge); color: var(--ochre); }
.r-sl-tag.is-declined { opacity: .72; }

/* Saying something about the list while it is being worked (0737). Sits inside
   the shortlist band, under the rows, because it is about them -- an input
   floating in its own section would read as a second, unrelated form. */
.r-sl-rule {
    display: block; margin-top: 6px; margin-left: auto;
    font: 500 12.5px inherit; background: none; border: 0; padding: 0;
    color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.r-sl-rule:hover { color: var(--ink); }
.r-sl-rule:disabled { opacity: .5; cursor: default; }
.r-sl-ruled { margin-top: 10px; }
.r-sl-ruled > summary { font-size: 13.5px; color: var(--faint); cursor: pointer; padding: 8px 0; }
.r-sl-ruled .r-sl-row { opacity: .68; }

.r-ask { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-4); }
.r-ask-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.r-ask-q {
    flex: 1 1 280px; font: 400 14.5px inherit; padding: 10px 12px;
    border: 1px solid var(--border-2); border-radius: 8px; background: var(--white); color: var(--ink);
}
.r-ask-q:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.r-ask-out { margin-top: 13px; }
.r-ask-note { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.r-ask-hit {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 12px; border: 1px solid var(--border-4); border-radius: 8px;
    margin-bottom: 8px; background: var(--surface);
}

/* When / what / who. */
.r-log-row { display: grid; grid-template-columns: 168px minmax(0,1fr) 200px; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--border-4); font-size: 14.5px; }
.r-log-row:last-child { border-bottom: 0; }
.r-log-when { color: var(--faint); font-size: 13.5px; }
.r-log-who { color: var(--muted); font-size: 13.5px; text-align: right; }

.r-approved { background: var(--green-wash); border: 1px solid var(--green-edge); border-radius: 8px; padding: 12px 14px; }
.r-approved b { display: block; color: var(--green); font-size: 15px; }
.r-approved span { font-size: 13px; color: var(--ink-2); }

@media (max-width: 1099px) {
    .r-opt { grid-template-columns: minmax(0,1fr); }
    .r-sl-row { grid-template-columns: minmax(0,1fr); gap: 5px; }
    .r-sl-state { text-align: left; }
    .r-sl-rule { margin-left: 0; }
    .r-log-row { grid-template-columns: minmax(0,1fr); gap: 4px; }
    .r-log-who { text-align: left; }
}
@media (max-width: 639px) {
    .r-crumbs { padding-left: 20px; padding-right: 20px; }
}

/* ── The Ask panel ───────────────────────────────────────────────
   Chosen over a header ⌘K field because it reads as messaging a person, which
   is what it is.

   Design handoff: ~/Downloads/design_handoff_chatbot_panel (turn 2, 2a/2b).
   Four regions in a column — header, canvas, pill rail, composer — and only the
   canvas flexes. The rail sits ABOVE the composer rather than below the
   greeting so that switching request stays reachable once a thread is long
   enough to scroll; that is the whole reason the redesign happened.

   Colour comes from the desk's tokens, not the handoff's literals: the panel
   floats 40px from a --green header band, and a second green five points off it
   reads as a bug rather than a decision. Geometry, type and spacing are the
   handoff's exactly. */
.a-panel {
    position: fixed; right: 28px; bottom: 96px; z-index: 40;
    width: 440px; max-width: calc(100vw - 56px);
    height: min(560px, 70vh); max-height: calc(100vh - 116px);
    background: var(--white); border: 1px solid var(--border-3); border-radius: 18px;
    box-shadow: 0 18px 40px -24px rgba(20, 20, 10, .35);
    display: flex; flex-direction: column; overflow: hidden;
    animation: a-rise 160ms ease-out;
}
@keyframes a-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── 1. Header: what this thread is about, and the two things you can do to
   the panel itself. */
.a-head {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    padding: 14px 14px 14px 20px; border-bottom: 1px solid var(--panel-divider);
}
.a-ctx { display: flex; align-items: center; gap: 8px; min-width: 0; }
.a-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--green); }
.a-dot.is-off { background: var(--rail-empty); }
.a-ctx-t { font-size: 13.5px; color: var(--muted); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-acts { display: flex; align-items: center; gap: 4px; flex: none; }
.a-new {
    display: flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px;
    border: 0; border-radius: 999px; background: var(--green); color: var(--white);
    font: 600 13px var(--body); cursor: pointer; text-decoration: none;
    transition: background-color 120ms ease;
}
.a-new:hover { background: var(--green-h); color: var(--white); }
.a-new span { font-size: 15px; line-height: 1; }
.a-x {
    width: 30px; height: 30px; flex: none; display: grid; place-items: center;
    border: 0; background: transparent; border-radius: 9px; cursor: pointer;
    color: var(--muted); font-size: 16px; line-height: 1;
    transition: background-color 120ms ease, color 120ms ease;
}
.a-x:hover { background: var(--panel-pill); color: var(--ink); }

/* ── 2. The conversation canvas. The only region that flexes. */
.a-scroll {
    flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none;
    padding: 18px 16px; display: flex; flex-direction: column; gap: 14px;
}
.a-scroll::-webkit-scrollbar { width: 0; }
.a-scroll.is-empty { align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; }
.a-empty-t { font-size: 17px; font-weight: 650; color: var(--ink); margin: 0; }
.a-empty-s { font-size: 13.5px; color: var(--muted); line-height: 1.5; max-width: 250px; margin: 0; }

.a-out {
    align-self: flex-end; max-width: 78%; background: var(--ink); color: var(--white);
    font-size: 14.5px; line-height: 1.5; padding: 10px 14px; border-radius: 14px 14px 4px 14px;
}
.a-turn { align-self: flex-start; max-width: 88%; display: flex; flex-direction: column; gap: 8px; }
.a-from { font-size: 12px; color: var(--muted); margin: 0 0 -2px 2px; }
.a-in {
    background: var(--panel-sunken); color: var(--ink);
    font-size: 14.5px; line-height: 1.55; padding: 12px 14px; border-radius: 14px 14px 14px 4px;
}
/* The status card. Rows are label/value pairs, and a value the coordinator is
   waiting on takes the accent — the one thing on the card she has to act on. */
.a-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border-3); border-radius: 12px; padding: 12px 14px; }
.a-card-r { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.a-card-k { color: var(--muted); flex: none; }
.a-card-v { color: var(--ink); text-align: right; }
.a-card-v.is-live { color: var(--green); font-weight: 600; }
/* Per-answer affordances, supplied with the answer — not fixed chrome. */
.a-do { display: flex; flex-wrap: wrap; gap: 8px; }
.a-do a, .a-do button {
    padding: 8px 13px; border: 1px solid var(--border-2); background: var(--white);
    border-radius: 999px; font: 400 13px var(--body); color: var(--ink);
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: border-color 120ms ease, color 120ms ease;
}
.a-do a:hover, .a-do button:hover { border-color: var(--green); color: var(--green); }

.a-typing { align-self: flex-start; display: flex; align-items: center; gap: 5px; padding: 12px 14px; background: var(--panel-sunken); border-radius: 14px 14px 14px 4px; }
.a-typing i { width: 6px; height: 6px; border-radius: 50%; animation: a-pulse 1.2s ease-in-out infinite; }
.a-typing i:nth-child(1) { background: var(--dot-1); }
.a-typing i:nth-child(2) { background: var(--dot-2); animation-delay: 150ms; }
.a-typing i:nth-child(3) { background: var(--dot-3); animation-delay: 300ms; }
@keyframes a-pulse { 0%, 60%, 100% { opacity: .4; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* ── 3. The pill rail: open requests first, then what she was last looking at.
   One row that scrolls sideways — it must never wrap and steal the canvas. */
.a-pills { flex: none; display: flex; gap: 8px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; }
.a-pills::-webkit-scrollbar { height: 0; }
.a-pill {
    flex: none; padding: 7px 13px; border: 0; border-radius: 999px;
    background: var(--panel-pill); color: var(--ink-2);
    font: 400 13px var(--body); white-space: nowrap; cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.a-pill:hover { background: var(--panel-tint); color: var(--green); }
.a-pill[aria-pressed="true"] { background: var(--ink); color: var(--white); }

/* ── 4. Composer. */
.a-foot { flex: none; padding: 0 16px 16px; }
.a-row {
    display: flex; align-items: center; gap: 10px;
    border: 1.5px solid var(--border-2); border-radius: 12px; padding: 12px 12px 12px 16px;
    background: var(--white); transition: border-color 120ms ease;
}
.a-row:focus-within { border-color: var(--ink); }
.a-row textarea {
    flex: 1; min-width: 0; border: 0; outline: none; background: transparent; resize: none;
    font: 400 15px/1.4 var(--body); color: var(--ink);
    max-height: 84px; overflow-y: auto; padding: 0;
}
.a-row textarea::placeholder { color: var(--muted); }
.a-send {
    width: 32px; height: 32px; flex: none; border: 0; border-radius: 9px;
    background: var(--green); color: var(--white); font-size: 15px; line-height: 1; cursor: pointer;
    transition: background-color 120ms ease;
}
.a-send:hover:not(:disabled) { background: var(--green-h); }
.a-send:disabled { background: var(--green-mute); cursor: default; }

/* The handoff paints send at 32 and close at 30, which is right at this
   density and under the 44px a thumb needs. Both keep the painted box and
   grow only the hit area. */
.a-send, .a-x { position: relative; }
.a-send::after, .a-x::after { content: ''; position: absolute; inset: -6px; }

@media (max-width: 639px) {
    .a-panel { right: 10px; left: 10px; bottom: 96px; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .a-panel { animation: none; }
    .a-typing i { animation: none; opacity: .6; }
}

.r-share { flex: none; text-align: right; max-width: 240px; }
.r-share .d-btn { width: auto; min-height: 40px; padding: 0 16px; }
.r-share-n { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
@media (max-width: 639px) { .r-share { text-align: left; max-width: none; } }

/* Inviting a colleague. Lives under the team list, in the Account tab. */
.d-invite { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; max-width: 560px; }
.d-invite input { flex: 1 1 220px; min-width: 0; font: 400 15px var(--body); padding: 10px 12px;
                  border: 1px solid var(--border-5); border-radius: 8px; background: var(--white); color: var(--ink); }
.d-invite .d-btn { width: auto; min-height: 42px; padding: 0 18px; }
.d-invite .d-foot-note { flex: 1 1 100%; margin: 0; }

/* Who it is for, and whose budget. */
.r-attr { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.r-attr input { flex: 1 1 200px; min-width: 0; font: 400 14.5px var(--body); padding: 9px 11px;
                border: 1px solid var(--border-5); border-radius: 8px; background: var(--white); color: var(--ink); }
.r-attr .d-btn { width: auto; min-height: 38px; padding: 0 14px; font-size: 14px; }

/* Inbox. The badge is the only thing on the desk that shouts, and it earns it:
   an unread message from a coordinator is a person waiting on her. */
.d-badge {
    display: inline-block; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--ochre-edge); color: var(--ochre);
    font: 600 11px var(--body); line-height: 18px; text-align: center;
}
/* The UA's [hidden] rule is the same specificity as the one above and loses to
   it, so without this the badge is painted for everyone with nothing unread and
   never disappears after reading. */
.d-badge[hidden] { display: none; }
.d-cal-row.is-unread { border-left: 3px solid var(--ochre); padding-left: 12px; margin-left: -15px; }
.d-cal-row .d-avatar { width: 40px; height: 40px; font-size: 14px; }

.r-side { flex: none; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; max-width: 260px; }
.r-side .r-attr select { font: 400 14.5px var(--body); padding: 9px 11px; border: 1px solid var(--border-5);
                         border-radius: 8px; background: var(--white); color: var(--ink); max-width: 160px; }
@media (max-width: 639px) { .r-side { align-items: flex-start; max-width: none; } }

/* The money. Terracotta is for amounts owed and nothing else on this page, so
   an amount never reads as a status and a status never reads as a bill. */
.r-pay { display: flex; gap: 20px; justify-content: space-between; align-items: flex-start;
         padding: 14px 0; border-bottom: 1px solid var(--border-4); }
.r-pay:last-of-type { border-bottom: 0; }
.r-pay-k { font-size: 15px; font-weight: 600; color: var(--terra); margin: 0 0 3px; }
.r-pay-a { text-align: right; flex: none; }
.r-pay-a .d-amount { font-size: 22px; color: var(--terra); }
.r-pay-a .d-btn { width: auto; min-height: 38px; padding: 0 14px; margin-top: 8px; font-size: 14px; }
.r-pay.is-sent .r-pay-k, .r-pay.is-sent .r-pay-a .d-amount { color: var(--ink-3); }
.r-po { font-family: var(--body); font-size: 12px; letter-spacing: 0; text-transform: none;
        color: var(--muted); border: 1px solid var(--border-5); border-radius: 4px; padding: 2px 7px; }

/* Money owed reads terracotta; a decision waiting reads ochre. Two different
   kinds of urgent, and one glance has to tell them apart. */
.d-card.is-money { border-left: 3px solid var(--terra); }
.d-deadline-money { color: var(--terra) !important; }
.d-amount.is-money { color: var(--terra); }

/* The receipt packet. Four things finance asks for, and whether we can answer. */
.r-packet { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 4px; }
.r-doc { border: 1px solid var(--border-2); border-radius: 8px; padding: 12px 14px; background: var(--raised); }
.r-doc-n { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--muted); }
.r-doc.is-have { border-color: var(--green-edge); background: var(--green-wash); }
.r-doc.is-have .r-doc-n { color: var(--green); }
.r-var { font-size: 15px; font-weight: 600; color: var(--terra); margin: 0 0 14px; }
.r-filed { margin-top: 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.r-filed .d-btn { width: auto; min-height: 42px; padding: 0 18px; }
.r-filed .d-terms { margin: 0; flex: 1 1 240px; }
@media (max-width: 899px) { .r-packet { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .r-packet { grid-template-columns: minmax(0,1fr); } }