/*
 * Admin + client portal — "ledger" theme.
 * Warm paper surface, forest-green ink, amber as the single accent,
 * mono figures for anything that reads like a number or a code.
 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --green:   #0c501a;
    --green-d: #083810;
    --green-l: #e6f2ea;
    --amber:   #FFB400;
    --amber-l: #fff6dc;
    --navy:    #0a1628;
    --navy-2:  #111f36;
    --ink:     #0d1f12;
    --muted:   #5a6b60;
    --rule:    #dbe5dd;
    --rule-2:  #c6d6ca;
    --surf:    #f3f5f0;
    --paper:   #fbfbf8;
    --red:     #b3261e;
    --red-l:   #fbecea;
    --blue:    #24539c;
    --blue-l:  #ecf2fb;

    --f-body:    'Instrument Sans', system-ui, sans-serif;
    --f-display: 'Syne', var(--f-body);
    --f-mono:    'IBM Plex Mono', ui-monospace, monospace;
    /* Figures (money, counts, dates in big type): Syne's zero reads as a letter o */
    --f-figure:  'Instrument Sans', system-ui, sans-serif;

    --r:  10px;
    --r-s: 6px;
    --shadow: 0 1px 0 rgba(13,31,18,0.04), 0 10px 30px -18px rgba(13,31,18,0.28);
    --sb-w: 252px;
    /* Height of the phone's bottom bar, for whatever is pinned to the foot of the screen to sit above it */
    --tab-h: 0px;
    --ease: cubic-bezier(.2,.7,.2,1);
}

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--f-body);
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    min-height: 100vh;
    background-color: var(--surf);
    background-image: radial-gradient(rgba(12,80,26,0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--green); }
[hidden] { display: none !important; }
::selection { background: var(--amber); color: var(--navy); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ── Login ── */
.login-wrap {
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center; padding: 1.25rem;
    background:
        radial-gradient(60rem 40rem at 110% -10%, rgba(12,80,26,0.55), transparent 60%),
        radial-gradient(40rem 30rem at -10% 110%, rgba(255,180,0,0.14), transparent 60%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 28px),
        var(--navy);
}
.login-card { background: var(--paper); border-radius: 14px; width: 100%; max-width: 400px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6); animation: rise .5s var(--ease) both; }
.login-head { background: var(--green); padding: 2rem 2rem 1.7rem; position: relative; overflow: hidden; }
.login-head::after { content: ''; position: absolute; left: 2rem; bottom: 0; width: 46px; height: 4px; background: var(--amber); }
.login-head h1 { font-family: var(--f-display); font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.login-head p  { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-top: 6px; }
.login-body { padding: 1.8rem 2rem 2rem; }
.login-body label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.4rem; }
.login-body input[type=password], .login-body input[type=email], .login-body input[type=text] {
    width: 100%; padding: 0.75rem 0.95rem; border: 1.5px solid var(--rule-2); border-radius: var(--r-s);
    font: inherit; font-size: 1rem; margin-bottom: 1rem; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.login-body input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(12,80,26,0.12); }
.login-body label.check-inline { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.login-body label.check-inline input { width: 18px; height: 18px; margin-bottom: 0; accent-color: var(--green); }
.btn-login { width: 100%; background: var(--green); color: #fff; border: none; padding: 0.9rem; border-radius: var(--r-s); font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; transition: background .15s, transform .15s; }
.btn-login:hover { background: var(--green-d); }
.btn-login:active { transform: translateY(1px); }
.login-error { background: var(--red-l); border: 1px solid #ebbcb7; color: #7a1a1a; font-size: 0.84rem; padding: 0.65rem 0.9rem; border-radius: var(--r-s); margin-bottom: 1rem; }

/* ── Sign-in screens: split brand / form (x-auth-shell) ── */
.login-wrap.auth {
    --a-text: #eef2ee;
    --a-soft: rgba(238,242,238,0.66);
    --a-line: rgba(255,255,255,0.14);
    --a-field: rgba(255,255,255,0.05);
    --a-fill: #13233a; /* solid twin of --a-field over navy, for autofill */
    position: relative; isolation: isolate; overflow: hidden;
    padding: max(1.5rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
    color: var(--a-text);
    background:
        radial-gradient(48rem 36rem at 8% 50%, rgba(12,80,26,0.45), transparent 62%),
        radial-gradient(34rem 26rem at 100% 105%, rgba(255,180,0,0.10), transparent 60%),
        var(--navy);
}
.login-wrap.auth::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 25% 50%, #000 10%, transparent 75%);
            mask-image: radial-gradient(ellipse 60% 70% at 25% 50%, #000 10%, transparent 75%);
}
.auth-split { width: 100%; max-width: 980px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); }

.auth-brand { justify-self: center; animation: rise .6s var(--ease) both; }
.auth-brand-logo { display: inline-block; padding: 0.9rem 1.3rem; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 24px 50px -24px rgba(0,0,0,0.8), 0 0 60px -20px rgba(12,80,26,0.9); }
.auth-brand-logo img { display: block; height: clamp(44px, 5vw, 56px); width: auto; }
.auth-brand-tag { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); }
.auth-brand-tag::before { content: ''; width: 24px; height: 2px; background: currentColor; }
.auth-brand p { margin-top: 0.75rem; max-width: 30ch; font-size: 0.95rem; line-height: 1.6; color: var(--a-soft); }

.auth-divider {
    align-self: stretch; width: 1px; min-height: 440px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.22) 18%, rgba(255,180,0,0.6) 50%, rgba(255,255,255,0.22) 82%, transparent);
    animation: auth-grow-y .9s var(--ease) both .1s;
}
@keyframes auth-grow-y { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes auth-grow-x { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }

.auth-panel { justify-self: center; width: 100%; max-width: 360px; animation: rise .6s var(--ease) both .15s; }
.auth-intro { text-align: center; margin-bottom: 2rem; }
.auth-intro h1 { font-family: var(--f-display); font-size: clamp(1.55rem, 7vw, 1.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: #fff; }
.auth-intro p { margin-top: 0.65rem; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--a-soft); }

.auth-panel label { display: block; margin-bottom: 0.45rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--a-soft); }
.auth-panel input[type=email], .auth-panel input[type=password], .auth-panel input[type=text] {
    width: 100%; margin-bottom: 1.15rem; padding: 0.85rem 1rem;
    font: inherit; font-size: 1rem; color: #fff; caret-color: var(--amber);
    background: var(--a-field); border: 1px solid var(--a-line); border-radius: var(--r-s);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.auth-panel input:hover { border-color: rgba(255,255,255,0.26); }
.auth-panel input:focus { outline: none; border-color: var(--amber); background-color: rgba(255,255,255,0.08); box-shadow: 0 0 0 4px rgba(255,180,0,0.16); }
.auth-panel input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 100px var(--a-fill) inset; transition: background-color 9999s; }
.auth-panel input:-webkit-autofill:focus { box-shadow: 0 0 0 100px var(--a-fill) inset, 0 0 0 4px rgba(255,180,0,0.16); }
.auth-panel input.auth-code { text-align: center; font-family: var(--f-mono); font-size: 1.3rem; letter-spacing: 0.35em; }

.auth-pw { position: relative; margin-bottom: 1.15rem; }
.auth-panel .auth-pw input { margin-bottom: 0; padding-right: 3rem; }
.auth-pw-toggle { position: absolute; top: 0; right: 0; bottom: 0; width: 3rem; display: grid; place-items: center; background: none; border: 0; border-radius: 0 var(--r-s) var(--r-s) 0; color: var(--a-soft); cursor: pointer; transition: color .15s; }
.auth-pw-toggle:hover { color: #fff; }
.auth-caps { display: flex; align-items: center; gap: 0.4rem; margin: -0.7rem 0 1rem; font-size: 0.78rem; color: var(--amber); }

.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; margin: 0.1rem 0 1.6rem; }
.auth-panel label.check-inline { display: flex; align-items: center; gap: 0.55rem; margin: 0; font-size: 0.86rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--a-soft); cursor: pointer; }
.auth-panel label.check-inline input { width: 17px; height: 17px; margin: 0; accent-color: var(--amber); }
.auth-panel label.auth-trust { align-items: flex-start; margin: 0.2rem 0 1rem; }
.auth-panel label.auth-trust input { margin-top: 2px; flex-shrink: 0; }
.auth-trust small { display: block; margin-top: 0.2rem; font-size: 0.76rem; line-height: 1.45; opacity: 0.8; }
.auth-link { font-size: 0.86rem; color: var(--a-soft); text-decoration: none; transition: color .15s; }
.auth-link:hover { color: var(--amber); }
.auth-link i { font-size: 0.75em; margin-right: 0.3rem; }
.auth-note { margin: 0 0 1.5rem; text-align: center; font-size: 0.9rem; line-height: 1.6; color: var(--a-soft); }
.auth-note strong { color: #fff; }
.auth-note:empty { display: none; }
.auth-hint { margin: -0.5rem 0 1.4rem; font-size: 0.78rem; color: var(--a-soft); }
.auth-foot { margin-top: 1.5rem; text-align: center; font-size: 0.86rem; color: var(--a-soft); }
.auth-foot + .auth-foot { margin-top: 0.8rem; }
.auth-foot a:not(.auth-link), .auth-panel .link-button { color: var(--amber); font-size: 0.86rem; }

.auth-panel .btn-login {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0.95rem; background: var(--amber); color: var(--navy);
    font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase;
    box-shadow: 0 12px 30px -14px rgba(255,180,0,0.7);
    transition: background-color .15s, transform .15s, box-shadow .15s;
}
.auth-panel .btn-login:hover { background: #ffc22e; transform: translateY(-1px); box-shadow: 0 16px 34px -14px rgba(255,180,0,0.8); }
.auth-panel .btn-login:active { transform: none; }
.auth-panel .btn-login:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.auth-panel .btn-login[aria-busy=true] { opacity: 0.8; cursor: progress; transform: none; }

.auth-panel .login-error, .auth-panel .login-status { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1.3rem; padding: 0.75rem 0.9rem; font-size: 0.86rem; line-height: 1.45; }
.auth-panel .login-error i, .auth-panel .login-status i { margin-top: 0.18rem; }
.auth-panel .login-error { background: rgba(179,38,30,0.18); border: 1px solid rgba(240,128,118,0.42); color: #ffd6d1; }
.auth-panel .login-status { background: rgba(46,160,80,0.15); border: 1px solid rgba(116,204,146,0.38); color: #d0f0da; }

@media (max-width: 820px) {
    .login-wrap.auth { place-items: start center; }
    .auth-split { grid-template-columns: 1fr; gap: 1.75rem; max-width: 400px; padding-top: 4vh; }
    .auth-brand { text-align: center; }
    .auth-brand-logo { padding: 0.65rem 1rem; border-radius: 12px; }
    .auth-brand-logo img { height: 38px; }
    .auth-brand-tag { margin-top: 1rem; }
    .auth-brand p { display: none; }
    .auth-divider { justify-self: center; width: 100%; max-width: 220px; min-height: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(255,180,0,0.6), transparent); animation-name: auth-grow-x; }
    .auth-panel { max-width: none; }
    .auth-intro { margin-bottom: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-brand, .auth-divider, .auth-panel { animation: none; }
    .auth-panel .btn-login, .auth-panel .btn-login:hover { transition: none; transform: none; }
}

/* ── Layout ── */
.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sb-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0 0;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 60;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(12,80,26,0.22), transparent 40%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 32px),
        var(--navy);
    border-right: 1px solid rgba(255,255,255,0.04);
}

.sb-logo { padding: 0 1.4rem 1.3rem; margin-bottom: 0.6rem; position: relative; }
.sb-logo::after { content: ''; position: absolute; left: 1.4rem; right: 1.4rem; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(255,180,0,0.6), rgba(255,255,255,0.06) 40%); }
.sb-logo img { height: 34px; filter: brightness(0) invert(1); display: block; }
.sb-logo small { display: block; font-family: var(--f-mono); font-size: 0.62rem; color: var(--amber); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 8px; opacity: 0.85; }

.sb-nav { flex: 1; padding: 0.3rem 0.75rem 1rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }

.sb-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--r-s);
    color: rgba(255,255,255,0.62);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background .18s, color .18s, padding .18s;
    margin-bottom: 1px;
}
.sb-link i { width: 16px; text-align: center; font-size: 0.82rem; opacity: 0.8; }
.sb-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sb-link.active { background: linear-gradient(90deg, rgba(12,80,26,0.75), rgba(12,80,26,0.25)); color: #fff; }
.sb-link.active::before { content: ''; position: absolute; left: -0.75rem; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--amber); }
.sb-link.active i { color: var(--amber); opacity: 1; }
.sb-link.sb-sub { padding-left: 2.55rem; font-size: 0.82rem; }
.sb-link.sb-sub::after { content: ''; position: absolute; left: 1.3rem; top: 0; height: 50%; width: 0.7rem; border-left: 1px solid rgba(255,255,255,0.18); border-bottom: 1px solid rgba(255,255,255,0.18); border-bottom-left-radius: 4px; }
.sb-sep { height: 1px; background: rgba(255,255,255,0.07); margin: 0.6rem 0.8rem; }
.sb-ext i:last-child { margin-left: auto; font-size: 0.6rem; width: auto; opacity: 0.45; }

/* Sections of the sidebar, and counts of what's waiting in each */
.sb-group + .sb-group { margin-top: 0.85rem; }
.sb-group-label { display: block; padding: 0 0.8rem 0.35rem; font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.34); }
.sb-badge { margin-left: auto; min-width: 1.45rem; padding: 0.05rem 0.4rem; border-radius: 999px; font-family: var(--f-mono); font-size: 0.64rem; font-weight: 500; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; background: var(--amber); color: var(--navy); }
.sb-badge.is-alert { background: #e5534b; color: #fff; }
.sb-badge.is-info { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
.m-burger { position: relative; }
.m-dot { position: absolute; top: 10px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--navy); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.sb-footer { padding: 1rem 1.4rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,0.07); background: rgba(0,0,0,0.18); }
.sb-user { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; min-width: 0; }
.sb-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--amber); color: var(--navy); font-family: var(--f-display); font-weight: 800; font-size: 0.85rem; }
.sb-user div { min-width: 0; line-height: 1.3; }
.sb-user strong { display: block; font-size: 0.82rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user div span { display: block; font-family: var(--f-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-footer a { font-size: 0.8rem; color: rgba(255,255,255,0.5); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: color .15s; }
.sb-footer a:hover { color: var(--amber); }

/* Installable app (PWA): "Install app" in the side menu, and the steps on iPhones */
.sb-install { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 40px; margin-top: 0.85rem; padding: 0 0.8rem; border: 1px solid rgba(255,255,255,0.16); border-radius: var(--r-s); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.82); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.sb-install[hidden] { display: none; }
.sb-install:hover { border-color: var(--amber); color: var(--amber); }
.sb-install:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.pwa-hint { margin: auto; width: min(22rem, calc(100vw - 2rem)); padding: 1.5rem; border: 0; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 24px 60px -20px rgba(10,22,40,0.5); }
.pwa-hint::backdrop { background: rgba(10,22,40,0.55); }
.pwa-hint img { display: block; border-radius: 13px; margin-bottom: 0.9rem; }
.pwa-hint h2 { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.2; margin-bottom: 0.3rem; }
.pwa-hint p { font-size: 0.88rem; color: var(--muted); }
.pwa-hint ol { list-style: none; display: grid; gap: 0.5rem; margin: 1rem 0 1.2rem; }
.pwa-hint li { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem; border-radius: var(--r-s); background: var(--surf); font-size: 0.88rem; }
.pwa-hint li i { width: 1.2rem; text-align: center; color: var(--blue); }
.pwa-hint .btn-save { width: 100%; }
@media (max-width: 720px) { .pwa-hint { margin-bottom: calc(1rem + env(safe-area-inset-bottom)); } }

/* Mobile top bar + drawer scrim (hidden on desktop) */
.m-topbar { display: none; }
.m-tabbar { display: none; }
.sb-scrim { display: none; }
.sb-close { display: none; }

/* ── Main ── */
.main { margin-left: var(--sb-w); flex: 1; min-width: 0; padding: 2.2rem clamp(1.2rem, 3vw, 2.75rem) 4rem; animation: rise .45s var(--ease) both; }

/* ── Page header: one dark panel across the admin and the portal (the meetings diary's look) ── */
.page-header, .mg-hero {
    position: relative; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem 1.5rem;
    margin-bottom: 1.6rem; padding: 1.45rem 1.6rem; border-radius: 16px; color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255,180,0,0.18), transparent 55%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 56px),
        linear-gradient(135deg, var(--navy), var(--green-d));
    box-shadow: 0 18px 40px -26px rgba(10,22,40,0.7);
    animation: rise .45s var(--ease) both;
}
/* Its entrance animation makes the header a stacking context, so a menu opening out of it is lifted above the cards and sticky tabs that follow */
.page-header:has(details[open]) { z-index: 30; }
.page-header h1, .mg-hero h1 { font-family: var(--f-display); font-size: clamp(1.55rem, 2.8vw, 2.15rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.08; color: #fff; }
.page-header > div:not(:first-child), .page-header > .action-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
/* What pages put in it was written for a light page: made readable on dark */
.page-header h1 i, .page-header [style*="color:var(--green)"], .page-header [style*="color: var(--green)"] { color: var(--amber) !important; }
.page-header [style*="color:var(--muted)"], .page-header .hint, .page-header p, .page-header small { color: rgba(255,255,255,0.74) !important; }
.page-header a:not(.btn):not([class*="btn-"]) { color: var(--amber); }
.page-header a[style*="color:var(--muted)"] { color: rgba(255,255,255,0.7) !important; font-family: var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.68rem !important; text-decoration: none; }
.page-header a[style*="color:var(--muted)"]:hover { color: var(--amber) !important; }
/* The main action is amber, as on the meetings page; the rest are frosted outlines */
.page-header .btn-approve, .page-header .btn-save { background: var(--amber); color: var(--navy); border-color: var(--amber); box-shadow: 0 6px 16px -8px rgba(255,180,0,0.8); }
.page-header .btn-approve:hover, .page-header .btn-save:hover { background: #ffc633; border-color: #ffc633; color: var(--navy); }
.page-header .btn:not(.btn-approve):not(.btn-delete), .page-header .btn-cancel { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.24); box-shadow: none; }
.page-header .btn:not(.btn-approve):not(.btn-delete):hover, .page-header .btn-cancel:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.45); color: #fff; }
.page-header .btn-delete { border-color: transparent; }
.page-header .chip { box-shadow: 0 0 0 1px rgba(255,255,255,0.08); }
.page-header .av-status:not(.is-open) { background: rgba(255,255,255,0.1); color: #fff; }
.page-header .av-status small { color: rgba(255,255,255,0.7) !important; }

/* ── Stats ── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card, .db-tile, .pt-tile, .wt-tile {
    background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); position: relative; overflow: hidden;
    animation: rise .5s var(--ease) both;
}
.stat-card::before, .db-tile::before, .pt-tile::before, .wt-tile::before { content: ''; position: absolute; left: 0; top: 0; width: 28px; height: 3px; background: var(--amber); }
.stats > :nth-child(2), .db-tiles > :nth-child(2), .pt-tiles > :nth-child(2), .wt-tiles > :nth-child(2) { animation-delay: .05s; }
.stats > :nth-child(3), .db-tiles > :nth-child(3), .pt-tiles > :nth-child(3), .wt-tiles > :nth-child(3) { animation-delay: .1s; }
.stats > :nth-child(4), .db-tiles > :nth-child(4), .pt-tiles > :nth-child(4), .wt-tiles > :nth-child(4) { animation-delay: .15s; }
.stat-card .stat-label { font-family: var(--f-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem; }
.stat-card .stat-num   { font-family: var(--f-display); font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-card.s-total    .stat-num { color: var(--ink); }
.stat-card.s-pending  .stat-num { color: #c27f00; }
.stat-card.s-pending::before { background: #c27f00; }
.stat-card.s-approved .stat-num { color: var(--green); }
.stat-card.s-approved::before { background: var(--green); }
.stat-card.s-declined .stat-num { color: var(--red); }
.stat-card.s-declined::before { background: var(--red); }

/* Tile labels across admin dashboards + portal (structure lives in the pages) */
.db-tile small, .pt-tile small, .wt-tile small { font-family: var(--f-mono); font-weight: 500 !important; letter-spacing: 0.12em !important; }
.db-tile strong, .pt-tile strong, .wt-tile strong { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* Big figures stay on one line and shrink to the tile's width (Syne is wide: ~0.75em per digit) */
.db-tile, .pt-tile { container-type: inline-size; }
.db-tile strong, .pt-tile strong { white-space: nowrap; line-height: 1.15; }

/* ── Flash ── */
.flash { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.85rem 1.1rem; border-radius: var(--r-s); font-size: 0.9rem; margin-bottom: 1.5rem; border: 1px solid; border-left-width: 4px; animation: rise .4s var(--ease) both; }
.flash.success { background: var(--green-l); border-color: rgba(12,80,26,0.35); border-left-color: var(--green); color: var(--green-d); }
.flash.warning { background: var(--amber-l); border-color: #f1d58a; border-left-color: var(--amber); color: #6b4500; }
.flash.error   { background: var(--red-l); border-color: #ebbcb7; border-left-color: var(--red); color: #7a1a1a; }

/* ── Filter tabs ── */
.filter-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.filter-tab {
    padding: 0.42rem 0.95rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--rule);
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.filter-tab:hover { border-color: var(--green); color: var(--green); }
.filter-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: inset 0 -2px 0 var(--amber); }

/* ── Table ── */
.table-wrap { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); overflow-x: auto; box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; }
.form-card .table-wrap { box-shadow: none; }

.bookings-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.bookings-table th { background: var(--paper); color: var(--muted); font-family: var(--f-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.bookings-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: middle; font-variant-numeric: tabular-nums; }
.bookings-table tbody tr:last-child td { border-bottom: none; }
.bookings-table tbody tr { transition: background .12s; }
.bookings-table tbody tr:hover td { background: #f7faf7; }
.bookings-table tfoot td { background: var(--paper); border-top: 1px solid var(--rule-2); border-bottom: none; font-weight: 600; }
.bookings-table td strong { font-weight: 600; }
/* Amounts and dates never wrap: right-aligned cells hold money, .nowrap marks dates and short codes */
.bookings-table td.num, .bookings-table td.db-num, .bookings-table td[style*="text-align:right"], .bookings-table .nowrap { white-space: nowrap; }
.bookings-table th.num, .bookings-table th[style*="text-align:right"] { text-align: right; }

.td-name strong { display: block; color: var(--ink); }
.td-name span   { font-size: 0.78rem; color: var(--muted); }

.action-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.42rem 0.8rem; border-radius: var(--r-s);
    font-family: inherit; font-size: 0.78rem; font-weight: 600; line-height: 1.2;
    border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
}
.btn:hover { box-shadow: 0 2px 8px -4px rgba(13,31,18,0.35); }
.btn:active { transform: translateY(1px); }
.btn-view    { background: var(--blue-l); color: var(--blue); border-color: #d3e0f3; }
.btn-view:hover { border-color: var(--blue); }
.btn-approve { background: var(--green-l); color: var(--green); border-color: #cfe4d6; }
.btn-approve:hover { border-color: var(--green); }
.btn-decline, .btn-delete { background: var(--red-l); color: var(--red); border-color: #f2d2ce; }
.btn-decline:hover, .btn-delete:hover { border-color: var(--red); }
.btn-edit    { background: var(--amber-l); color: #8a5600; border-color: #f6e2a9; }
.btn-edit:hover { border-color: #c27f00; }

.btn-cancel, .btn-save {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    padding: 0.6rem 1.25rem; border-radius: var(--r-s); font-family: inherit; font-size: 0.86rem; font-weight: 600;
    cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, transform .1s, border-color .15s;
}
.btn-cancel { background: #fff; color: var(--muted); border: 1px solid var(--rule-2); }
.btn-cancel:hover { border-color: var(--muted); color: var(--ink); }
.btn-save   { background: var(--green); color: #fff; border: 1px solid var(--green); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18); }
.btn-save:hover { background: var(--green-d); }
.btn-save:active, .btn-cancel:active { transform: translateY(1px); }

.empty-state { text-align: center; padding: 3.5rem 1.5rem; color: var(--muted); font-size: 0.9rem; }
.empty-state i { font-size: 2.2rem; display: block; margin-bottom: 0.9rem; color: var(--rule-2); }

/* ── Modal ── */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(10,22,40,0.55); backdrop-filter: blur(3px); z-index: 1000; align-items: center; justify-content: center; padding: 1rem; }
.modal-backdrop.open { display: flex; }
.modal { background: #fff; border-radius: 14px; width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.5); animation: rise .3s var(--ease) both; }
.modal-head { background: var(--navy); color: #fff; padding: 1.1rem 1.4rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -3px 0 var(--amber); }
.modal-head h2 { font-family: var(--f-display); font-size: 1.05rem; font-weight: 800; }
.modal-close { background: none; border: none; color: rgba(255,255,255,0.7); font-size: 1.2rem; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; }
.modal-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
.modal-body { padding: 1.4rem; }
.modal-body .dl { display: grid; grid-template-columns: 130px 1fr; gap: 0.55rem 1rem; font-size: 0.88rem; }
.modal-body .dl dt { color: var(--muted); font-weight: 600; }
.modal-body .dl dd { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.modal-body .dl dd.meet-link a { color: var(--green); word-break: break-all; }

/* ── Forms ── */
.edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.edit-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.edit-field.full { grid-column: 1 / -1; }
.edit-field label { font-size: 0.76rem; font-weight: 600; color: var(--muted); }
.edit-field input, .edit-field select, .edit-field textarea,
.form-card input[type=text], .form-card input[type=email], .form-card input[type=number], .form-card input[type=date],
.form-card input[type=search], .form-card input[type=url], .form-card input[type=password], .form-card input[type=tel],
.form-card input[type=month], .form-card input[type=time], .form-card select, .form-card textarea {
    padding: 0.58rem 0.8rem; border: 1.5px solid var(--rule-2); border-radius: var(--r-s);
    font-family: inherit; font-size: 0.88rem; color: var(--ink); background: #fff; max-width: 100%;
    transition: border-color .15s, box-shadow .15s;
}
.edit-field input:focus, .edit-field select:focus, .edit-field textarea:focus,
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(12,80,26,0.1); }
.edit-field textarea { resize: vertical; min-height: 80px; }
.modal-foot { padding: 1rem 1.4rem; border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; background: var(--paper); position: sticky; bottom: 0; }

/* ── Inline forms in the actions column ── */
.inline-form { display: inline; }

/* ── Focus groups ── */
.fg-list { display: grid; gap: 1rem; }
.fg-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 1.2rem 1.4rem; display: flex; gap: 1.2rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; box-shadow: var(--shadow); }
.fg-card.closed { opacity: 0.8; }
.fg-main { flex: 1; min-width: min(260px, 100%); }
.fg-main h3 { font-family: var(--f-display); font-size: 1.08rem; font-weight: 800; }
.fg-client { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.fg-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.8rem; font-size: 0.8rem; color: var(--muted); }
.fg-meta strong { color: var(--ink); }
.fg-link { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem; font-size: 0.78rem; }
.fg-link input { flex: 1; min-width: 0; max-width: 360px; padding: 0.35rem 0.6rem; border: 1px solid var(--rule); border-radius: var(--r-s); font-family: var(--f-mono); font-size: 0.72rem; color: var(--muted); background: var(--surf); }
.fg-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; }

.switch-form { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; font-weight: 600; }
.switch { position: relative; width: 44px; height: 24px; border: none; border-radius: 12px; background: #c9d6ce; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.switch.on { background: var(--green); }
.switch.on::after { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.switch-label.on { color: var(--green); }
.switch-label.off { color: var(--muted); }

.form-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 1.4rem 1.5rem; margin-bottom: 1.4rem; box-shadow: var(--shadow); min-width: 0; }
.form-card h2 { font-family: var(--f-display); font-size: 1.05rem; font-weight: 800; margin-bottom: 0.35rem; letter-spacing: -0.005em; }
.form-card h3 { font-family: var(--f-display); font-weight: 800; }
.form-card .hint { font-size: 0.82rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.55; }
.edit-field small { font-size: 0.73rem; color: var(--muted); }
.check-inline { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; font-weight: 600; }
.check-inline input { width: 17px; height: 17px; accent-color: var(--green); flex-shrink: 0; }

.q-card { border: 1px solid var(--rule); border-radius: var(--r-s); padding: 1rem; margin-bottom: 0.8rem; background: var(--paper); }
.q-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.q-num { font-family: var(--f-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.q-tools { display: flex; gap: 0.3rem; }
.q-tools button { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-s); width: 32px; height: 32px; cursor: pointer; color: var(--muted); }
.q-tools button:hover { color: var(--ink); border-color: var(--muted); }
.q-tools button.q-remove:hover { color: var(--red); border-color: var(--red); }
.q-options[hidden] { display: none; }
.btn-add { background: var(--green-l); color: var(--green); border: 1.5px dashed rgba(12,80,26,0.5); padding: 0.65rem 1rem; border-radius: var(--r-s); font-family: inherit; font-weight: 600; font-size: 0.84rem; cursor: pointer; width: 100%; transition: background .15s, border-color .15s; }
.btn-add:hover { border-color: var(--green); background: #dcecdf; }
.form-actions { display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.form-actions .right { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.fit { display: inline-block; font-family: var(--f-mono); font-size: 0.68rem; font-weight: 500; padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.fit-high { background: var(--green-l); color: var(--green); }
.fit-mid  { background: var(--amber-l); color: #8a5600; }
.fit-low  { background: var(--red-l); color: var(--red); }
.fit-na   { background: var(--surf); color: var(--muted); }

.answers { list-style: none; display: grid; gap: 0.8rem; margin-top: 1rem; }
.answers li { border-left: 3px solid var(--rule); padding: 0.2rem 0 0.2rem 0.8rem; }
.answers li.yes { border-color: var(--green); }
.answers li.no  { border-color: var(--red); }
.answers .q { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.answers .a { font-size: 0.9rem; white-space: pre-wrap; margin-top: 2px; }
.answers .tag { font-family: var(--f-mono); font-size: 0.62rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; margin-left: 0.4rem; }
.answers li.yes .tag { color: var(--green); }
.answers li.no .tag  { color: var(--red); }
.respond-box { margin-top: 1.2rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.respond-box textarea { width: 100%; min-height: 80px; padding: 0.58rem 0.8rem; border: 1.5px solid var(--rule-2); border-radius: var(--r-s); font-family: inherit; font-size: 0.88rem; resize: vertical; }
.respond-box .row { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.back-link { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.7rem; transition: color .15s, gap .15s; }
.back-link:hover { color: var(--green); gap: 0.65rem; }

/* Back to the client whose page you came from (admin.js adds it) */
.client-return { position: sticky; top: 0.6rem; z-index: 40; display: flex; align-items: center; gap: 0.5rem; width: fit-content; max-width: 100%; margin-bottom: 0.9rem; padding: 0.5rem 0.9rem; border: 1px solid #cfe4d6; border-radius: 999px; background: var(--green-l); color: var(--green); font-size: 0.84rem; font-weight: 700; text-decoration: none; box-shadow: var(--shadow); transition: gap .15s, border-color .15s; }
.client-return span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-return:hover { gap: 0.7rem; border-color: var(--green); }
.client-return:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Two-column detail blocks (invoice / quotation headers) */
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }

/* Portal status chips */
.pt-status { font-family: var(--f-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--surf); color: var(--muted); white-space: nowrap; }
.pt-status.paid, .pt-status.accepted, .pt-status.finalized, .pt-status.approved { background: var(--green-l); color: var(--green); }
.pt-status.overdue, .pt-status.declined { background: var(--red-l); color: var(--red); }
.pt-status.review, .pt-status.pending { background: #fdf3dc; color: #8a5a00; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tab-notch { from { transform: scaleX(0); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Full-screen loader: the next page on its way, or a form being worked on (partials/loader) ──
   A direct child of <body> and above every dialog, sheet and the assistant, so nothing under it can be clicked or tapped. */
.pg-loader {
    position: fixed; inset: 0; z-index: 2147483000;
    display: grid; place-items: center; padding: 1.5rem;
    background: rgba(100, 108, 120, 0.52);
    -webkit-backdrop-filter: grayscale(0.6) blur(2px); backdrop-filter: grayscale(0.6) blur(2px);
    opacity: 0; visibility: hidden; cursor: progress;
    transition: opacity .2s var(--ease), visibility 0s linear .2s;
}
html.is-loading .pg-loader { opacity: 1; visibility: visible; transition-delay: 0s; }
.pg-loader-plate {
    position: relative; overflow: hidden;
    display: grid; justify-items: center; gap: 0.9rem;
    min-width: 9.5rem; max-width: 16.5rem; padding: 1.6rem 1.7rem 1.2rem;
    border-radius: var(--r); color: #fff;
    background: linear-gradient(0deg, rgba(12,80,26,0.36), transparent 72%), var(--navy);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 24px 54px -14px rgba(10,22,40,0.6);
    transform: translateY(8px) scale(0.96); transition: transform .32s var(--ease);
}
html.is-loading .pg-loader-plate { transform: none; }
/* The amber notch that marks the open tab, here marking the thing that is happening */
.pg-loader-plate::before {
    content: ''; position: absolute; top: 0; left: 50%; width: 2.2rem; height: 3px; margin-left: -1.1rem;
    border-radius: 0 0 3px 3px; background: var(--amber);
}
.pg-loader-ring { position: relative; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.09); }
.pg-loader-ring::before, .pg-loader-ring::after { content: ''; position: absolute; border-radius: 50%; border: 3px solid transparent; }
.pg-loader-ring::before { inset: 0; border-top-color: var(--amber); border-right-color: var(--amber); animation: pg-spin .95s linear infinite; }
.pg-loader-ring::after { inset: 9px; border-bottom-color: #3bb055; animation: pg-spin 1.5s linear infinite reverse; }
.pg-loader-label { font: 500 0.66rem/1 var(--f-mono); letter-spacing: 0.18em; text-indent: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.86); }
.pg-loader-slow { display: none; }
.pg-loader.is-slow .pg-loader-slow {
    display: grid; justify-items: center; gap: 0.7rem; margin-top: 0.1rem; padding-top: 0.9rem;
    border-top: 1px solid rgba(255,255,255,0.1); text-align: center; font-size: 0.8rem; line-height: 1.45; color: rgba(255,255,255,0.7);
    animation: rise .35s var(--ease) both;
}
.pg-loader-hide {
    padding: 0.5rem 0.95rem; border: 1px solid rgba(255,180,0,0.45); border-radius: var(--r-s); background: none; cursor: pointer;
    font: 500 0.62rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber);
}
.pg-loader-hide:hover { background: rgba(255,180,0,0.12); }
.pg-loader-hide:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@keyframes pg-spin { to { transform: rotate(360deg); } }
@keyframes pg-breathe { 50% { opacity: 0.3; } }
/* Still has to look alive for people who asked for less motion: the arcs hold still and breathe instead */
@media (prefers-reduced-motion: reduce) {
    .pg-loader .pg-loader-ring::before, .pg-loader .pg-loader-ring::after { animation: pg-breathe 1.8s ease-in-out infinite !important; }
}
@media print { .pg-loader { display: none !important; } }

/* ════════════════════════════════════════
   Tablet / phone
   ════════════════════════════════════════ */
@media (max-width: 960px) {
    .shell { display: block; }
    .client-return { top: calc(58px + 0.5rem); }

    .m-topbar {
        display: flex; align-items: center; gap: 0.75rem;
        position: sticky; top: 0; z-index: 50;
        height: 58px; padding: 0 0.75rem 0 0.5rem; padding-top: env(safe-area-inset-top);
        background: rgba(10,22,40,0.96); backdrop-filter: blur(10px);
        color: #fff; box-shadow: inset 0 -2px 0 var(--amber);
    }
    .m-burger, .sb-close {
        width: 44px; height: 44px; border: 0; border-radius: var(--r-s); background: transparent; color: #fff;
        font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
    }
    .m-burger:hover, .sb-close:hover { background: rgba(255,255,255,0.08); }
    .m-topbar img { height: 24px; filter: brightness(0) invert(1); }
    .m-title { margin-left: auto; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw; }

    .sidebar {
        width: min(300px, 86vw);
        transform: translateX(-102%);
        transition: transform .28s var(--ease), box-shadow .28s;
        padding-top: calc(1.1rem + env(safe-area-inset-top));
    }
    .sb-logo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
    .sb-close { display: grid; margin-right: -0.6rem; }
    .sb-link { padding: 0.78rem 0.85rem; font-size: 0.95rem; }
    .sb-link.sb-sub { font-size: 0.9rem; }
    body.nav-open { overflow: hidden; }
    body.nav-open .sidebar { transform: none; box-shadow: 20px 0 60px rgba(0,0,0,0.4); }
    .sb-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(10,22,40,0.5); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .28s; }
    body.nav-open .sb-scrim { opacity: 1; pointer-events: auto; }

    /* Bottom bar: the head of the side menu brought under the thumb, with More opening the rest */
    body:has(.m-tabbar) { --tab-h: calc(58px + env(safe-area-inset-bottom)); }
    .m-tabbar {
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
        padding: 0 max(0.25rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(0.25rem, env(safe-area-inset-left));
        color: #fff;
        background:
            linear-gradient(0deg, rgba(12,80,26,0.26), transparent 75%),
            rgba(10,22,40,0.97);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 -12px 28px -18px rgba(10,22,40,0.6);
        transition: transform .28s var(--ease);
    }
    .m-tab {
        position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.34rem;
        min-width: 0; min-height: 58px; padding: 0.5rem 0.1rem 0.4rem; border: 0; background: none; color: rgba(255,255,255,0.6);
        font-family: var(--f-mono); font-size: 0.6rem; font-weight: 500; line-height: 1; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
        text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .18s;
    }
    .m-tab i { font-size: 1.1rem; transition: transform .18s var(--ease), color .18s; }
    .m-tab:active { color: #fff; }
    .m-tab:active i { transform: scale(0.84); }
    .m-tab:focus-visible { outline: 2px solid var(--amber); outline-offset: -4px; border-radius: var(--r-s); }
    .m-tab.is-active { color: #fff; background: linear-gradient(180deg, rgba(12,80,26,0.7), rgba(12,80,26,0) 88%); }
    .m-tab.is-active i { color: var(--amber); }
    .m-tab.is-active::before { content: ''; position: absolute; top: 0; left: 24%; right: 24%; height: 3px; border-radius: 0 0 3px 3px; background: var(--amber); animation: tab-notch .4s var(--ease) both .15s; }
    .m-tab-count { position: absolute; top: 0.32rem; left: calc(50% + 0.42rem); min-width: 1.15rem; padding: 0 0.3rem; border-radius: 999px; background: var(--amber); color: var(--navy); font-size: 0.6rem; line-height: 1.15rem; letter-spacing: 0; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--navy); }
    .m-tab-count.is-alert { background: #e5534b; color: #fff; }
    .m-tab-count.is-info { background: #33425c; color: #fff; }
    .m-tab-dot { position: absolute; top: 0.5rem; left: calc(50% + 0.62rem); width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--navy); }
    /* Out of the way of a sheet or dialog that opens over the page */
    body:has(.modal-backdrop.open, .send-later[open], .wa-actions[open]) .m-tabbar { transform: translateY(105%); }

    .main { margin-left: 0; padding: 1.4rem 1rem calc(2.4rem + var(--tab-h)); }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) { .m-tab { letter-spacing: 0.02em; } }

@media (max-width: 720px) {
    body { font-size: 14.5px; }
    .page-header, .mg-hero { align-items: flex-start; margin-bottom: 1.3rem; padding: 1.15rem 1.1rem; border-radius: 14px; }
    .page-header > div:not(:first-child), .page-header > .action-btns, .page-header > a, .page-header > form { width: 100%; }
    .page-header .btn-save, .page-header .btn-cancel { flex: 1 1 auto; }

    .form-card { padding: 1.1rem 1rem; border-radius: var(--r-s); }
    .edit-grid, .two-col { grid-template-columns: minmax(0, 1fr); }
    .edit-field.full { grid-column: 1; }
    .form-actions, .form-actions .right { width: 100%; }
    .form-actions .right > *, .form-actions > .btn-save, .form-actions > .btn-cancel { flex: 1 1 auto; }

    /* 16px inputs stop iOS from zooming on focus */
    .edit-field input, .edit-field select, .edit-field textarea, .form-card input, .form-card select, .form-card textarea, .respond-box textarea { font-size: 16px; }

    .filter-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1rem; padding: 0 1rem 0.3rem; scrollbar-width: none; }
    .filter-tabs::-webkit-scrollbar { display: none; }

    .fg-side { align-items: stretch; width: 100%; }
    .modal-body .dl { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
    .modal-body .dl dd { margin-bottom: 0.5rem; }

    /* Modals become bottom sheets */
    .modal-backdrop { padding: 0; align-items: flex-end; }
    .modal { max-width: none; border-radius: 16px 16px 0 0; max-height: 92dvh; animation-name: sheet; }

    /* Tables flagged by admin.js become stacked cards */
    .bookings-table.is-stack thead { display: none; }
    .bookings-table.is-stack, .bookings-table.is-stack tbody, .bookings-table.is-stack tfoot { display: block; }
    .bookings-table.is-stack tr { display: block; padding: 0.75rem 1rem; border-bottom: 1px solid var(--rule); }
    .bookings-table.is-stack tbody tr:last-child { border-bottom: none; }
    .bookings-table.is-stack tbody tr:hover td { background: none; }
    .bookings-table.is-stack td {
        display: block; position: relative; padding: 0.28rem 0 0.28rem min(40%, 9rem); border: 0; min-height: 1.6rem;
        text-align: left !important; overflow-wrap: anywhere; max-width: none !important; width: auto !important;
    }
    .bookings-table.is-stack td::before { content: attr(data-label); position: absolute; left: 0; top: 0.5rem; width: calc(min(40%, 9rem) - 0.75rem); font-family: var(--f-mono); font-size: 0.6rem; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
    .bookings-table.is-stack td.no-label, .bookings-table.is-stack td.cell-actions { padding-left: 0; }
    .bookings-table.is-stack td.no-label::before { display: none; }
    .bookings-table.is-stack td:first-child:not(.no-label) { font-size: 0.98rem; }
    .bookings-table.is-stack td:first-child:not(.no-label)::before { top: 0.6rem; }
    .bookings-table.is-stack td.cell-empty { display: none; }
    .bookings-table.is-stack td.cell-actions { padding-top: 0.6rem; }
    .bookings-table.is-stack td.cell-actions::before { display: none; }
    .bookings-table.is-stack td.cell-actions .action-btns, .bookings-table.is-stack td.cell-actions { gap: 0.4rem; }
    .bookings-table.is-stack td.cell-actions .btn { padding: 0.55rem 0.85rem; font-size: 0.82rem; }
    .bookings-table.is-stack tfoot tr { background: var(--paper); }
    /* Breakdown lines under a row (over billing, VAT, totals): one compact "label … amount" line */
    .bookings-table.is-stack tr.is-subline { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.45rem 1rem; border-bottom: 1px dashed var(--rule); }
    .bookings-table.is-stack tr.is-subline td { padding: 0; min-height: 0; }
    .bookings-table.is-stack tr.is-subline td::before { display: none; }
    .bookings-table.is-stack tr.is-subline td:empty, .bookings-table.is-stack tr.is-subline td.cell-empty { display: none; }
    .bookings-table.is-stack .empty-state { padding: 2.5rem 1rem; }

    /* Wide editable tables scroll sideways inside their card instead */
    .form-card > table:not(.is-stack), .form-card > div > table:not(.is-stack) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .bookings-table:not(.is-stack) th, .bookings-table:not(.is-stack) td { padding: 0.65rem 0.7rem; }
    .table-wrap:has(> .bookings-table:not(.is-stack)) { background: linear-gradient(90deg, #fff 30%, transparent), linear-gradient(-90deg, rgba(13,31,18,0.08), transparent 18px) right / 18px 100% no-repeat, #fff; }
}

@media (max-width: 420px) {
    .stats { grid-template-columns: minmax(0, 1fr); }
    .stat-card .stat-num { font-size: 1.7rem; }
    .main { padding-inline: 0.8rem; }
}

@keyframes sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Show/hide password button (admin.js wraps each password field) */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 2.6rem !important; }
.pw-toggle {
    position: absolute; top: 50%; right: 0.35rem; transform: translateY(-50%);
    width: 2rem; height: 2rem; display: grid; place-items: center;
    background: none; border: none; border-radius: var(--r-s); color: var(--muted); cursor: pointer;
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

/* Sign-in: confirmation notice and text-style buttons */
.login-status { background: var(--green-l, #e8f3eb); border: 1px solid #b9d9c1; color: #0c501a; font-size: 0.84rem; padding: 0.65rem 0.9rem; border-radius: var(--r-s); margin-bottom: 1rem; }
.link-button { background: none; border: none; padding: 0; font: inherit; font-size: 0.8rem; color: var(--green); text-decoration: underline; cursor: pointer; }
.sb-footer > a { margin-right: 1rem; }
.sb-footer a.active { color: var(--amber); }

/* ════════════════════════════════════════
   List pages (clients, hosting, invoices, timesheets, users)
   ════════════════════════════════════════ */

/* Summary band: the page's key figures, ruled like a ledger header */
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1.4rem; }
.ledger-cell { background: #fff; padding: 1rem 1.25rem 1.05rem; position: relative; min-width: 0; animation: rise .5s var(--ease) both; container-type: inline-size; }
.ledger-cell:nth-child(2) { animation-delay: .04s; }
.ledger-cell:nth-child(3) { animation-delay: .08s; }
.ledger-cell:nth-child(4) { animation-delay: .12s; }
.ledger-cell small { display: flex; align-items: center; gap: 0.45rem; font-family: var(--f-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ledger-cell small::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--rule-2); flex-shrink: 0; }
.ledger-cell strong { display: block; font-family: var(--f-display); font-size: min(1.55rem, 9cqi); font-weight: 800; line-height: 1.15; margin-top: 0.4rem; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ledger-cell span { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 0.25rem; }
.ledger-cell.is-good small::before { background: var(--green); }
.ledger-cell.is-good strong { color: var(--green); }
.ledger-cell.is-warn small::before { background: var(--amber); }
.ledger-cell.is-warn strong { color: #9a6200; }
.ledger-cell.is-alert small::before { background: var(--red); }
.ledger-cell.is-alert strong { color: var(--red); }
.ledger-cell.is-quiet strong { color: var(--muted); }
/* A cell that jumps to the matching filter */
a.ledger-cell { color: inherit; text-decoration: none; transition: background-color .15s; }
a.ledger-cell::after { content: '\f061'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 1rem; right: 1rem; font-size: 0.65rem; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s var(--ease); }
a.ledger-cell:hover { background: var(--paper); }
a.ledger-cell:hover::after, a.ledger-cell:focus-visible::after { opacity: 1; transform: none; }
a.ledger-cell:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* Filter tabs + counts, with room for a note on the right */
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.list-toolbar .filter-tabs { margin-bottom: 0; }
.list-toolbar .hint { font-size: 0.78rem; color: var(--muted); }
.filter-tab .count { display: inline-block; min-width: 1.4em; margin-left: 0.4rem; padding: 0 0.4em; border-radius: 999px; background: var(--surf); color: var(--muted); font-family: var(--f-mono); font-size: 0.66rem; font-weight: 500; text-align: center; }
.filter-tab.active .count { background: rgba(255,255,255,0.16); color: #fff; }
.filter-tab.is-alert:not(.active) { color: var(--red); }
.filter-tab.is-alert:not(.active) .count { background: var(--red-l); color: var(--red); }

/* Collapsible action panel (e.g. "Invoice timesheets"), closed until needed */
.drawer { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 1.4rem; overflow: hidden; }
.drawer > summary { list-style: none; display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1.2rem; cursor: pointer; user-select: none; transition: background .15s; }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary:hover { background: var(--paper); }
.drawer-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--green-l); color: var(--green); flex-shrink: 0; }
.drawer-title { min-width: 0; flex: 1; }
.drawer-title strong { display: block; font-family: var(--f-display); font-size: 0.95rem; font-weight: 800; }
.drawer-title span { display: block; font-size: 0.78rem; color: var(--muted); }
.drawer > summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.72rem; color: var(--muted); transition: transform .2s var(--ease); }
.drawer[open] > summary { border-bottom: 1px solid var(--rule); }
.drawer[open] > summary::after { transform: rotate(180deg); }
.drawer-body { padding: 1.2rem; animation: rise .3s var(--ease) both; }
.drawer-body .form-actions { margin-top: 1rem; }

/* Status chips */
.chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 3px 9px 3px 8px; border-radius: 999px; background: var(--surf); color: var(--muted); font-family: var(--f-mono); font-size: 0.63rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; line-height: 1.5; }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.chip-green { background: var(--green-l); color: var(--green); }
.chip-blue  { background: var(--blue-l); color: var(--blue); }
.chip-amber { background: var(--amber-l); color: #8a5600; }
.chip-red   { background: var(--red-l); color: var(--red); }
.chip-solid { background: var(--green); color: #fff; }
.chip-plain::before { display: none; }
.chips { display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; }

/* Rows */
.bookings-table tr[data-href] { cursor: pointer; }
.bookings-table tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.bookings-table tr.is-off td { color: var(--muted); }
.bookings-table tr.is-off .entity strong { color: var(--muted); }
.mono { font-family: var(--f-mono); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em; }
.sub { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 2px; font-weight: 400; }
.sub.is-alert { color: var(--red); font-weight: 600; }
.sub.is-good { color: var(--green); }
.amount { font-weight: 600; white-space: nowrap; }

/* A record's name with its code tile or avatar */
.entity { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.entity > div { min-width: 0; }
.entity strong { display: block; color: var(--ink); font-weight: 600; }
.entity a { color: inherit; text-decoration: none; }
.entity a:hover { color: var(--green); }
.monogram { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; background: var(--green); color: #fff; font-family: var(--f-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2); }
.monogram.is-off { background: var(--rule); color: var(--muted); box-shadow: none; }
.monogram-logo { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; object-fit: contain; background: #fff; border: 1px solid var(--rule); }
.monogram-logo.is-off { filter: grayscale(1); opacity: 0.6; }
.avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--navy); color: var(--amber); font-family: var(--f-display); font-size: 0.85rem; font-weight: 800; }
.avatar.is-off { background: var(--rule); color: var(--muted); }

/* Quiet secondary actions: icon only, named by aria-label/title */
.btn-icon { width: 32px; height: 32px; padding: 0; background: #fff; color: var(--muted); border-color: var(--rule); }
.btn-icon:hover { color: var(--ink); border-color: var(--muted); }
.btn-icon.is-danger:hover { color: var(--red); border-color: var(--red); background: var(--red-l); }
.action-btns { align-items: center; }
.bookings-table td.cell-actions-end .action-btns { justify-content: flex-end; flex-wrap: nowrap; }

/* Weekday / weekend split of a timesheet's hours */
.hours { display: flex; align-items: baseline; gap: 0.5rem; }
.hours-bar { display: flex; width: 120px; max-width: 100%; height: 6px; border-radius: 3px; background: var(--surf); overflow: hidden; margin-top: 0.4rem; }
.hours-bar i { display: block; height: 100%; }
.hours-bar .wd { background: var(--green); }
.hours-bar .we { background: var(--amber); }
.legend { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; color: var(--muted); }
.legend::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--green); }
.legend.we::before { background: var(--amber); }

/* Sign-in history as a compact timeline */
.timeline { list-style: none; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); padding: 0.4rem 0; }
.timeline li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.6rem 1.2rem; font-size: 0.84rem; border-bottom: 1px solid var(--rule); }
.timeline li:last-child { border-bottom: 0; }
.timeline time { font-family: var(--f-mono); font-size: 0.72rem; color: var(--muted); }
.timeline .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline .ip { font-family: var(--f-mono); font-size: 0.7rem; color: var(--muted); margin-left: 0.5rem; }
.section-title { font-family: var(--f-display); font-size: 1.05rem; font-weight: 800; margin: 2rem 0 0.8rem; display: flex; align-items: center; gap: 0.5rem; }
.section-title i { color: var(--green); font-size: 0.9rem; }

@media (max-width: 720px) {
    .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ledger-cell { padding: 0.85rem 1rem; }
    .list-toolbar { flex-direction: column; align-items: stretch; }
    .list-toolbar .row-hint { display: none; }
    .drawer > summary { padding: 0.8rem 1rem; }
    .drawer-body { padding: 1rem; }
    .bookings-table.is-stack td.cell-actions-end .action-btns { justify-content: flex-start; flex-wrap: wrap; }
    .bookings-table.is-stack .entity { padding-top: 0.1rem; }
    .bookings-table.is-stack tr.is-overdue { box-shadow: inset 3px 0 0 var(--red); }
    .bookings-table.is-stack tr.is-overdue td:first-child { box-shadow: none; }
    .timeline li { grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.8rem; padding: 0.7rem 1rem; }
    .timeline time { grid-column: 1 / -1; }
}

/* ── Quotation stepper ── */
.quotation-stepper {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.stepper-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.stepper-title { font-family: var(--f-display); font-size: 0.95rem; font-weight: 800; letter-spacing: 0.01em; }
.stepper-steps { display: flex; gap: 0; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stepper-step { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; font-size: 0.8rem; color: var(--muted); border-right: 1px solid var(--rule); }
.stepper-step:last-child { border-right: 0; }
.stepper-step .step-circle { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--rule-2); background: #fff; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 0.7rem; font-weight: 700; }
.stepper-step .step-label { font-weight: 600; }
.stepper-step.stepper-active { color: var(--ink); background: var(--green-l); }
.stepper-step.stepper-active .step-circle { background: var(--green); border-color: var(--green); color: #fff; }
.stepper-step:not(.stepper-active) .step-circle { border-style: dashed; }
.stepper-controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.stepper-controls .btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.stepper-counter { font-family: var(--f-mono); font-size: 0.78rem; color: var(--muted); }

/* Steps inside the form */
.form-step { display: none; }
.form-step.active { display: block; }

@media (max-width: 720px) {
    .quotation-stepper { padding: 0.8rem; }
    .stepper-step { padding: 0.55rem 0.6rem; font-size: 0.72rem; }
    .stepper-steps { flex-wrap: wrap; }
}

/* ════════════════════════════════════════
   Dashboards: KPI tiles that link to their list, trends, needs-attention panel
   ════════════════════════════════════════ */
a.db-tile, a.pt-tile { display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s var(--ease); }
a.db-tile:hover, a.pt-tile:hover { border-color: var(--rule-2); box-shadow: 0 1px 0 rgba(13,31,18,0.04), 0 14px 32px -18px rgba(13,31,18,0.4); transform: translateY(-1px); }
a.db-tile::after, a.pt-tile::after { content: '\f061'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 1rem; right: 1rem; font-size: 0.7rem; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s var(--ease); }
a.db-tile:hover::after, a.db-tile:focus-visible::after, a.pt-tile:hover::after, a.pt-tile:focus-visible::after { opacity: 1; transform: none; }
.db-tile.is-alert::before, .pt-tile.is-alert::before { background: var(--red); }
.db-tile.is-alert strong, .pt-tile.is-alert strong { color: var(--red); }
.db-tile.is-good::before, .pt-tile.is-good::before { background: var(--green); }
.db-tile.is-warn::before, .pt-tile.is-warn::before { background: #c27f00; }

.trend { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.4rem; border-radius: 999px; font-family: var(--f-mono); font-size: 0.68rem; font-weight: 500; font-variant-numeric: tabular-nums; background: var(--surf); color: var(--muted); }
.trend.is-up { background: var(--green-l); color: var(--green); }
.trend.is-down { background: var(--red-l); color: var(--red); }
.trend i { font-size: 0.55rem; }

.db-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; margin: 0 0 0.7rem; }
.db-head .db-section { margin: 0; }
.db-head a { font-size: 0.8rem; color: var(--green); text-decoration: none; }
.db-head a:hover { text-decoration: underline; }

.attn { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 1.4rem; overflow: hidden; }
.attn-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.2rem; border-bottom: 1px solid var(--rule); }
.attn-head h2 { font-family: var(--f-display); font-size: 0.95rem; font-weight: 800; }
.attn-head .count { margin-left: auto; font-family: var(--f-mono); font-size: 0.7rem; color: var(--muted); }
.attn-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.attn-list li { border-right: 1px solid var(--surf); border-bottom: 1px solid var(--surf); }
.attn-list a { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1.2rem; color: var(--ink); text-decoration: none; font-size: 0.86rem; transition: background .15s; height: 100%; }
.attn-list a:hover { background: var(--paper); }
.attn-list a::after { content: '\f054'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: auto; font-size: 0.65rem; color: var(--muted); }
.attn-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: var(--amber-l); color: #8a5600; font-size: 0.8rem; }
.attn-list .is-alert .attn-icon { background: var(--red-l); color: var(--red); }
.attn-list .is-info .attn-icon { background: var(--blue-l); color: var(--blue); }
.attn-list strong { font-family: var(--f-display); font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.attn-list .is-alert strong { color: var(--red); }
.attn-clear { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.2rem; font-size: 0.86rem; color: var(--muted); }
.attn-clear i { color: var(--green); }

.quick-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 720px) { .quick-actions .btn { flex: 1 1 auto; } }
@media (prefers-reduced-motion: reduce) { a.db-tile, a.pt-tile, a.db-tile::after, a.pt-tile::after { transition: none; transform: none; } }

/* ════════════════════════════════════════
   System: logs and background services (super admins)
   ════════════════════════════════════════ */
.filter-tab i { margin-right: 0.35rem; font-size: 0.75rem; }
.log-env { display: block; font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); opacity: 0.8; }
.log-message { font-size: 0.84rem; word-break: break-word; }
.log-details { margin-top: 0.35rem; }
.log-details summary { cursor: pointer; font-size: 0.76rem; color: var(--muted); }
.log-details pre, .code-line { font-family: var(--f-mono); font-size: 0.72rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; background: var(--surf); border: 1px solid var(--rule); border-radius: var(--r-s); padding: 0.7rem 0.85rem; }
.log-details pre { margin-top: 0.4rem; max-height: 360px; overflow: auto; }
.code-line { user-select: all; }

.health-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.6rem; }
.health-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; align-items: center; padding: 0.7rem 0.85rem; border: 1px solid var(--rule); border-radius: var(--r-s); background: var(--paper); }
.health-list li::before { content: ''; grid-row: span 2; width: 9px; height: 9px; border-radius: 50%; background: var(--rule-2); }
.health-list li.is-good::before { background: var(--green); }
.health-list li.is-warn::before { background: #c27f00; }
.health-list li.is-alert { border-color: #f2d2ce; background: var(--red-l); }
.health-list li.is-alert::before { background: var(--red); }
.health-label { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.health-value { font-size: 0.86rem; font-weight: 600; }
.health-hint { grid-column: 2; font-size: 0.76rem; color: var(--muted); }

/* Bar charts (dashboard, expenses): grouped or stacked columns on a ruled axis, hover tooltips */
.db-chart { --series-1: #1b7a3a; --series-2: #2a78d6; }
.db-legend { display: flex; gap: 1.2rem; font-size: 0.8rem; color: var(--ink); margin: 0.2rem 0 0.6rem; }
.db-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.4rem; vertical-align: -1px; }
.db-plot { position: relative; height: 220px; margin-left: 3.2rem; border-bottom: 1px solid var(--rule); }
.db-grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--rule); }
.db-grid span { position: absolute; left: -3.2rem; top: -0.55rem; width: 2.8rem; text-align: right; font-size: 0.68rem; color: var(--muted); }
.db-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.db-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.db-col:hover, .db-col:focus { background: var(--surf); outline: none; }
.db-bar { width: min(32%, 18px); border-radius: 4px 4px 0 0; }
.db-stack { width: min(50%, 28px); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.db-stack div { border-radius: 4px 4px 0 0; }
.db-stack div + div { border-radius: 0; }
.db-tip { display: none; position: absolute; bottom: calc(100% - 2.6rem); left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 0.75rem; white-space: nowrap; padding: 0.4rem 0.6rem; border-radius: 4px; z-index: 2; pointer-events: none; line-height: 1.5; }
.db-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 0.35rem; }
.db-col:hover .db-tip, .db-col:focus .db-tip { display: block; }
.db-labels { display: flex; margin: 0.35rem 0 0 3.2rem; }
.db-labels span { flex: 1; text-align: center; font-size: 0.66rem; color: var(--muted); }
@media (max-width: 600px) { .db-labels span:nth-child(even) { visibility: hidden; } }
.db-ref { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--ink); z-index: 1; pointer-events: none; }
.db-ref span { position: absolute; right: 0; bottom: 0.2rem; background: #fff; padding: 0 0.3rem; font-size: 0.7rem; font-weight: 600; color: var(--ink); }
.db-col.is-ahead .db-stack div, .db-col.is-ahead .db-bar { opacity: 0.55; }
.db-labels span.is-now { color: var(--ink); font-weight: 700; }

/* Files attached to a record (expense receipts, statements) */
.doc-list { list-style: none; display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.doc-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; border: 1px solid var(--rule); border-radius: var(--r-s); background: var(--paper); font-size: 0.84rem; min-width: 0; }
.doc-list li > i { color: var(--muted); }
.doc-list a { color: var(--ink); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-list a:hover { text-decoration: underline; }
.doc-list span { color: var(--muted); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-list .btn { margin-left: auto; }

/* Interest accrued on an overdue invoice, under its status (client portal) */
.pt-interest { display: block; margin-top: 0.25rem; font-size: 0.72rem; font-weight: 600; color: var(--red); white-space: nowrap; }

/* Agreements: the terms as the client reads them, and the portal's response controls */
.agreement-body { max-width: 72ch; line-height: 1.7; font-size: 0.94rem; }
.agreement-body h1, .agreement-body h2 { font-family: var(--f-display); font-size: 1.1rem; font-weight: 800; margin: 1.6rem 0 0.5rem; }
.agreement-body h3 { font-size: 1rem; margin: 1.2rem 0 0.4rem; }
.agreement-body > :first-child { margin-top: 0; }
.agreement-body p { margin: 0 0 0.8rem; }
.agreement-body ul, .agreement-body ol { margin: 0 0 0.9rem 1.3rem; }
.agreement-body li { margin-bottom: 0.25rem; }
.agreement-body a { color: var(--green); }
.agreement-choice { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.4rem 0 1.2rem; }
.agreement-choice label { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border: 1.5px solid var(--rule-2); border-radius: var(--r-s); cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.agreement-choice label:has(input:checked) { border-color: var(--green); background: var(--green-l); color: var(--green); }
.agreement-choice input { accent-color: var(--green); }
.signature-input { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 1.5rem !important; }
.agreement-cards { display: grid; gap: 0.7rem; }
.agreement-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--rule); border-left: 4px solid #c27f00; border-radius: var(--r); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.agreement-card:hover { border-color: var(--green); border-left-color: var(--green); }
.agreement-card-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--amber-l); color: #8a5600; flex-shrink: 0; }
.agreement-card-text { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.agreement-card-text span { font-size: 0.8rem; color: var(--muted); }
.agreement-card-text span.is-late { color: var(--red); font-weight: 600; }
@media (max-width: 600px) { .agreement-card { flex-wrap: wrap; } .agreement-card .btn { width: 100%; } }

/* Agreement conditions: the editor rows, and the monitored list */
.cond-rows { display: grid; gap: 0.8rem; margin-bottom: 0.8rem; }
.cond-row { position: relative; border: 1px solid var(--rule); border-radius: var(--r-s); background: var(--paper); padding: 0.9rem 2.6rem 0.2rem 0.9rem; }
.cond-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 0.8rem; }
.cond-grid .cond-wide { grid-column: span 2; }
.cond-remove { position: absolute; top: 0.6rem; right: 0.6rem; width: 30px; height: 30px; border: 1px solid var(--rule); border-radius: var(--r-s); background: #fff; color: var(--muted); cursor: pointer; }
.cond-remove:hover { color: var(--red); border-color: var(--red); }
@media (max-width: 900px) { .cond-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cond-grid { grid-template-columns: minmax(0, 1fr); } .cond-grid .cond-wide { grid-column: auto; } }

.cond-list { list-style: none; display: grid; gap: 0.6rem; }
.cond-item { display: grid; grid-template-columns: auto 1fr auto; gap: 0.3rem 0.9rem; align-items: start; padding: 0.85rem 1rem; border: 1px solid var(--rule); border-radius: var(--r-s); background: #fff; }
.cond-item.is-breached { border-color: #f2d2ce; background: var(--red-l); }
.cond-item.is-met { opacity: 0.85; }
.cond-date { text-align: center; min-width: 3.4rem; padding: 0.3rem 0.4rem; border-radius: var(--r-s); background: var(--surf); line-height: 1.1; }
.cond-date strong { display: block; font-family: var(--f-display); font-size: 1.15rem; }
.cond-date span { font-family: var(--f-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.cond-body strong { display: block; font-size: 0.92rem; }
.cond-body span { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.cond-body .cond-interest { color: var(--red); font-weight: 600; }
.cond-side { display: grid; justify-items: end; gap: 0.4rem; }
.cond-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 600px) { .cond-item { grid-template-columns: auto 1fr; } .cond-side { grid-column: 1 / -1; justify-items: start; } }

/* Agreement form: AI drafting and import, above the form */
.ai-tools { display: grid; gap: 0.8rem; margin-bottom: 1.4rem; }
.ai-tools .drawer { margin-bottom: 0; }
.ai-tools .drawer-icon { background: var(--blue-l); color: var(--blue); }
.drawer-body .hint { font-size: 0.82rem; color: var(--muted); line-height: 1.55; }

/* Portal: "Rate our service" stars (reversed so hover and checked light the stars before them) */
.portal-stars { display: inline-flex; flex-direction: row-reverse; gap: 0.25rem; }
.portal-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.portal-stars label { font-size: 2rem; line-height: 1; color: var(--rule-2); cursor: pointer; transition: color .15s; }
.portal-stars input:checked ~ label, .portal-stars label:hover, .portal-stars label:hover ~ label { color: #e0a800; }
.portal-stars input:focus-visible + label { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

/* Credentials vault: a revealed secret, one value per line */
.vault-secret { font-size: 0.84rem; min-width: 220px; }
.vault-line { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.vault-line small { font-family: var(--f-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); width: 3.4rem; }
.vault-line code { font-family: var(--f-mono); font-size: 0.8rem; background: var(--surf); padding: 0.1rem 0.4rem; border-radius: 4px; word-break: break-all; }
.vault-notes { color: var(--muted); font-size: 0.78rem; white-space: pre-line; }
.vault-code { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; color: var(--muted); font-size: 0.78rem; }
.vault-code[hidden] { display: none; }
.vault-code input { width: 11rem; max-width: 100%; padding: 0.3rem 0.5rem; border: 1px solid var(--rule-2); border-radius: var(--r-s); font: inherit; }
.vault-suggestion { margin-top: 0.6rem; padding: 0.7rem 0.85rem; border: 1px solid #f6e2a9; border-radius: var(--r-s); background: var(--amber-l); }
.vault-suggestion[hidden] { display: none; }
.vault-suggestion code { margin-right: 0.6rem; font-family: var(--f-mono); font-size: 1.02rem; font-weight: 600; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.vault-status { padding: 0.25rem 0.4rem; border: 1px solid var(--rule-2); border-radius: var(--r-s); background: #fff; font: inherit; font-size: 0.78rem; font-weight: 600; }
.vault-status.is-active { color: var(--green); background: var(--green-l); border-color: #cfe4d6; }
.vault-status.is-expired { color: var(--red); background: var(--red-l); border-color: #f2d2ce; }
.vault-status.is-changed { color: #8a5600; background: var(--amber-l); border-color: #f6e2a9; }
.vault-stale .td-name strong { color: var(--muted); text-decoration: line-through; }
.vault-file { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font-size: 0.8rem; }
.vault-file .link-button { text-align: left; overflow-wrap: anywhere; }
.vault-file .vault-file-remove { color: var(--muted); text-decoration: none; }
.vault-file .vault-file-remove:hover { color: var(--red); }

/* ════════════════════════════════════════
   Projects: logo, product facts, production checklist, GitHub
   ════════════════════════════════════════ */
.pj-logo { width: var(--size, 44px); height: var(--size, 44px); flex-shrink: 0; border-radius: calc(var(--size, 44px) * 0.24); object-fit: cover; background: #fff; border: 1px solid var(--rule); display: block; }
.pj-logo.is-initials { display: grid; place-items: center; background: var(--navy); border-color: var(--navy); color: var(--amber); font-family: var(--f-display); font-weight: 800; font-size: calc(var(--size, 44px) * 0.36); letter-spacing: 0.02em; }
.pj-title { display: flex; align-items: center; gap: 1rem; min-width: 0; }

.pj-product { padding-top: 1rem; padding-bottom: 1rem; }
.pj-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem 1.4rem; margin: 0; }
.pj-facts dt { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pj-facts dd { margin: 0.3rem 0 0; font-size: 0.92rem; font-weight: 600; }
.pj-facts dd i { color: var(--green); margin-right: 0.2rem; }
.pj-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--surf); }
.pj-link { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.85rem; border: 1px solid var(--rule); border-radius: var(--r-s); background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color .15s, background-color .15s, transform .15s var(--ease); }
.pj-link:hover { border-color: var(--green); background: #fff; transform: translateY(-1px); }
.pj-link > i:first-child { font-size: 1.1rem; color: var(--green); width: 1.2rem; text-align: center; }
.pj-link strong { display: block; font-size: 0.84rem; line-height: 1.2; }
.pj-link small { display: block; font-size: 0.72rem; color: var(--muted); }
.pj-link-out { font-size: 0.65rem; color: var(--muted); }

.pj-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.pj-card-head h2 { margin: 0; }
.pj-note { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0; padding: 0.65rem 0.85rem; border-radius: var(--r-s); background: var(--amber-l); color: #6b4500; font-size: 0.85rem; }
.pj-note i { margin-top: 0.2rem; }

/* Checklist */
.pj-readiness { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem 1.2rem; margin: 1.1rem 0 1rem; }
.pj-readiness-figure strong { display: block; font-family: var(--f-display); font-size: 1.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pj-readiness-figure span { font-size: 0.78rem; color: var(--muted); }
.pj-bar { height: 9px; border-radius: 5px; background: var(--surf); overflow: hidden; }
.pj-bar i { display: block; height: 100%; border-radius: 5px; background: var(--green); transition: width .3s var(--ease); }
.pj-hide-done { font-size: 0.8rem; font-weight: 400; color: var(--muted); white-space: nowrap; }
.pj-sections { display: grid; gap: 0.6rem; }
.pj-section { border: 1px solid var(--rule); border-radius: var(--r-s); background: #fff; }
.pj-section > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.95rem; cursor: pointer; }
.pj-section > summary::-webkit-details-marker { display: none; }
.pj-section > summary::before { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.65rem; color: var(--muted); margin-right: 0.6rem; transition: transform .2s var(--ease); transform: rotate(-90deg); }
.pj-section[open] > summary::before { transform: none; }
.pj-section > summary strong { flex: 1; font-size: 0.9rem; }
.pj-section-count { font-family: var(--f-mono); font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pj-section ul { list-style: none; margin: 0; padding: 0 0.4rem 0.4rem; border-top: 1px solid var(--surf); }
.pj-item label { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.55rem 0.55rem; border-radius: var(--r-s); cursor: pointer; font-weight: 400; margin: 0; }
.pj-item label:hover { background: var(--paper); }
.pj-item input { width: 18px; height: 18px; margin: 0.1rem 0 0; flex-shrink: 0; accent-color: var(--green); cursor: pointer; }
.pj-item-text { min-width: 0; }
.pj-item-label { display: block; font-size: 0.88rem; }
.pj-item small { display: block; font-size: 0.76rem; color: var(--muted); margin-top: 0.1rem; }
.pj-item small:empty { display: none; }
.pj-item.is-done .pj-item-label { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(90,107,96,0.5); }
.pj-item-by { color: var(--green) !important; }
.pj-launch.is-hiding-done .pj-item.is-done { display: none; }

/* GitHub */
.pj-github h2 i { margin-right: 0.3rem; }
.pj-commits { border: 1px solid var(--rule); border-radius: var(--r-s); padding: 0.9rem 1rem 0.7rem; background: var(--paper); }
.pj-commits-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; font-size: 0.85rem; }
.pj-commit-bars { display: flex; align-items: flex-end; gap: 4px; height: 72px; }
.pj-commit-bars span { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.pj-commit-bars i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--green); transition: opacity .15s; }
.pj-commit-bars i.is-zero { background: var(--rule-2); }
.pj-commit-bars span:hover i { opacity: 0.75; }
.pj-commit-axis { display: flex; justify-content: space-between; margin-top: 0.35rem; font-family: var(--f-mono); font-size: 0.62rem; color: var(--muted); }
.pj-last-commit { display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 0.9rem; font-size: 0.86rem; }
.pj-last-commit > i { margin-top: 0.2rem; color: var(--muted); }
.pj-last-commit a { color: var(--ink); font-weight: 600; text-decoration: none; }
.pj-last-commit a:hover { color: var(--green); }

/* Project type picker on the form */
.pf-heading { font-family: var(--f-display); font-size: 0.95rem; margin: 1.5rem 0 0.6rem; padding-top: 1.2rem; border-top: 1px solid var(--surf); }
.pf-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.3rem; }
.pf-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.pf-types legend { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.4rem; padding: 0; }
.pf-type { position: relative; margin: 0; cursor: pointer; }
.pf-type input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pf-type span { display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.85rem; border: 1px solid var(--rule-2); border-radius: var(--r-s); background: #fff; font-size: 0.86rem; font-weight: 600; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.pf-type span i { color: var(--muted); width: 1rem; text-align: center; }
.pf-type:hover span { border-color: var(--green); }
.pf-type input:checked + span { border-color: var(--green); background: var(--green-l); box-shadow: inset 0 0 0 1px var(--green); }
.pf-type input:checked + span i { color: var(--green); }
.pf-type input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }
.pf-logo { display: flex; align-items: center; gap: 0.7rem; }
.pf-logo img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 1px solid var(--rule); }

@media (max-width: 600px) {
    .pj-readiness { grid-template-columns: auto 1fr; }
    .pj-hide-done { grid-column: 1 / -1; }
    .pj-title { gap: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) { .pj-link, .pj-bar i, .pj-section > summary::before { transition: none; } }

/* Client portal: the signed-in company, with its logo */
.sb-company { display: flex; align-items: center; gap: 0.7rem; margin: 0 1rem 0.9rem; padding: 0.65rem 0.75rem; border-radius: var(--r); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); min-width: 0; }
.sb-company-logo { width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px; object-fit: contain; background: #fff; padding: 3px; }
.sb-company-logo.is-initials { display: grid; place-items: center; padding: 0; background: var(--amber); color: var(--navy); font-family: var(--f-display); font-weight: 800; font-size: 0.95rem; }
.sb-company div { min-width: 0; line-height: 1.3; }
.sb-company strong { display: block; font-size: 0.84rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-company span { display: block; font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); opacity: 0.85; }
.m-company-logo { height: 30px !important; width: auto; max-width: 120px; object-fit: contain; filter: none !important; background: #fff; border-radius: 6px; padding: 2px 4px; }
.pt-company-logo { width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid var(--rule); padding: 4px; }

/* ════════════════════════════════════════
   Availability: admin page, and the client portal's time-away alert
   ════════════════════════════════════════ */
.av-status { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.85rem; border-radius: 999px; font-size: 0.84rem; font-weight: 600; background: var(--surf); color: var(--muted); }
.av-status i { font-size: 0.5rem; }
.av-status small { font-weight: 400; color: var(--muted); }
.av-status.is-open { background: var(--green-l); color: var(--green); }
.av-status.is-closed i { color: var(--red); }
.av-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 1.4rem; align-items: start; }
.av-item { display: flex; gap: 1rem; align-items: flex-start; padding: 0.9rem 0; border-top: 1px solid var(--surf); }
.av-item:first-of-type { border-top: 0; padding-top: 0.3rem; }
.av-item.is-current .av-item-date { background: var(--red); color: #fff; }
.av-item-date { width: 52px; flex-shrink: 0; padding: 0.45rem 0; border-radius: var(--r-s); background: var(--navy); color: #fff; text-align: center; line-height: 1.1; }
.av-item-date strong { display: block; font-family: var(--f-display); font-size: 1.25rem; font-weight: 800; }
.av-item-date span { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.av-item.is-current .av-item-date span { color: #fff; }
.av-item-main { flex: 1; min-width: 0; }
.av-item-main > strong { display: block; font-size: 0.95rem; }
.av-item-actions { display: flex; gap: 0.35rem; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.av-remove { position: relative; }
.av-remove > summary { list-style: none; cursor: pointer; }
.av-remove > summary::-webkit-details-marker { display: none; }
.av-remove[open] > form { position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 5; display: grid; gap: 0.5rem; width: max-content; padding: 0.75rem; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-s); box-shadow: var(--shadow); }
.av-past { list-style: none; margin: 0.6rem 0 0; padding: 0; font-size: 0.85rem; }
.av-past li { padding: 0.35rem 0; border-bottom: 1px solid var(--surf); }
.av-hours { display: grid; gap: 0.35rem; }
.av-day { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: var(--r-s); background: var(--paper); border: 1px solid var(--rule); }
.av-day-toggle { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.av-day-toggle input { width: 16px; height: 16px; accent-color: var(--green); }
.av-day-times { display: flex; align-items: center; gap: 0.4rem; }
.av-day-times input { width: 100%; min-width: 0; padding: 0.35rem 0.45rem; font-size: 0.85rem; }
.av-day-closed { display: none; font-size: 0.82rem; color: var(--muted); }
.av-day.is-closed { background: #fff; }
.av-day.is-closed .av-day-toggle span { color: var(--muted); }
.av-day.is-closed .av-day-times { display: none; }
.av-day.is-closed .av-day-closed { display: block; }
.av-summary { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.9rem; padding: 0.65rem 0.8rem; border-radius: var(--r-s); background: var(--green-l); color: var(--green); font-family: var(--f-mono); font-size: 0.74rem; }
@media (max-width: 1100px) { .av-grid { grid-template-columns: minmax(0, 1fr); } }

/* Portal: published time away, at the top of every page */
.av-alerts { margin-left: var(--sb-w); }
.av-alert { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.8rem clamp(1.2rem, 3vw, 2.75rem); background: var(--amber-l); border-bottom: 1px solid #f0d58f; color: #5c3d00; font-size: 0.88rem; line-height: 1.45; }
.av-alert.is-current { background: var(--navy); border-bottom-color: var(--amber); color: #fff; }
.av-alert.is-incident { background: var(--red-l); border-bottom-color: var(--red); }
.av-alert.is-incident .av-alert-icon { color: var(--red); }
.av-alert-icon { margin-top: 0.2rem; color: #b07800; }
/* In .shell: it wraps so the banner gets a row of its own above the page */
.shell:has(> .av-alerts.is-sticky) { flex-wrap: wrap; align-content: flex-start; }
.shell:has(> .av-alerts.is-sticky) > .main { flex-basis: 100%; }
.av-alerts.is-sticky { flex: 1 1 100%; min-width: 0; position: sticky; top: 0; z-index: 30; max-height: 40vh; overflow-y: auto; box-shadow: 0 2px 8px rgba(10,22,40,0.12); }
.shell:has(> .av-alerts.is-sticky) .pj-tabs { top: var(--alert-h, 0px); }
.av-alert.is-current .av-alert-icon { color: var(--amber); }
.av-alert-text { flex: 1; min-width: 0; }
.av-alert-text strong { display: block; }
.av-alert-text span { display: block; white-space: pre-line; opacity: 0.85; }
.av-alert-close { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: var(--r-s); background: transparent; color: inherit; opacity: 0.7; cursor: pointer; }
.av-alert-close:hover { opacity: 1; background: rgba(0,0,0,0.06); }
.av-alert.is-current .av-alert-close:hover { background: rgba(255,255,255,0.1); }
@media (max-width: 960px) {
    .av-alerts { margin-left: 0; } .av-alert { padding: 0.7rem 1rem; }
    /* Below the sticky mobile top bar, which is above it in the page */
    .av-alerts.is-sticky { top: 58px; z-index: 49; }
    .shell:has(> .av-alerts.is-sticky) .pj-tabs { top: calc(58px + var(--alert-h, 0px)); }
}

/* Project lists: filters and cards */
button.filter-tab { font-family: inherit; cursor: pointer; }
.pj-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem 1rem; margin-bottom: 1.1rem; }
.pj-toolbar .filter-tabs { margin-bottom: 0; }
.pj-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pj-tools select, .pj-search input { height: 36px; padding: 0 0.65rem; font: inherit; font-size: 0.82rem; color: var(--ink); background: #fff; border: 1px solid var(--rule-2); border-radius: var(--r-s); }
.pj-search { position: relative; display: block; margin: 0; }
.pj-search i { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); font-size: 0.72rem; color: var(--muted); pointer-events: none; }
.pj-search input { width: 15rem; max-width: 100%; padding-left: 1.85rem; }
.pj-tools select:focus, .pj-search input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.pj-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; align-items: stretch; }
.pj-tile { position: relative; display: flex; flex-direction: column; gap: 0.8rem; padding: 1.05rem 1.15rem 0.9rem; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s, transform .15s var(--ease); }
.pj-tile:hover { border-color: var(--rule-2); box-shadow: 0 1px 0 rgba(13,31,18,0.04), 0 16px 34px -20px rgba(13,31,18,0.45); transform: translateY(-2px); }
.pj-tile:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.pj-tile.is-late { box-shadow: inset 3px 0 0 var(--red), var(--shadow); }
.pj-tile-top { display: flex; align-items: flex-start; gap: 0.75rem; }
.pj-tile-name { flex: 1; min-width: 0; }
.pj-tile-name h2 { font-family: var(--f-display); font-size: 0.98rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.pj-tile-name span { display: block; margin-top: 0.15rem; font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-tile-tags { display: flex; flex-wrap: wrap; gap: 0.3rem 0.85rem; font-size: 0.76rem; color: var(--muted); }
.pj-tile-tags i { font-size: 0.72rem; margin-right: 0.1rem; }
.pj-tile-tags .fa-circle { font-size: 0.42rem; vertical-align: middle; color: #c27f00; }
.pj-tile-tags .is-live .fa-circle { color: var(--green); }
.pj-tile-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.5rem 1rem; margin-top: auto; }
.pj-meter { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.25rem; }
.pj-meter span { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pj-meter strong { font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.pj-meter .pj-bar { grid-column: 1 / -1; height: 6px; }
.pj-meter.is-launch .pj-bar i { background: var(--amber); }
.pj-tile.is-late .pj-meter:not(.is-launch) .pj-bar i { background: var(--red); }
.pj-tile-foot { display: flex; flex-wrap: wrap; gap: 0.25rem 0.85rem; padding-top: 0.6rem; border-top: 1px solid var(--surf); font-size: 0.75rem; color: var(--muted); }
.pj-tile-foot .is-late { color: var(--red); font-weight: 600; }

/* Project page: tabs */
.pj-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 0.15rem; margin: 0 0 1.2rem; padding: 0.3rem 0 0; overflow-x: auto; scrollbar-width: none; background: var(--surf); border-bottom: 1px solid var(--rule); }
.pj-tabs::-webkit-scrollbar { display: none; }
.pj-tabs a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.85rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; }
.pj-tabs a:hover { color: var(--ink); }
.pj-tabs a[aria-current="true"] { color: var(--green); border-bottom-color: var(--amber); }
.pj-tabs small { min-width: 1.4em; padding: 0 0.4em; border-radius: 999px; background: #fff; border: 1px solid var(--rule); color: var(--muted); font-family: var(--f-mono); font-size: 0.64rem; font-weight: 500; text-align: center; }
.ledger-cell span span { display: inline; margin: 0; }
.ledger-cell .pj-bar { display: block; height: 6px; margin: 0.5rem 0 0.15rem; }
.ledger-cell.is-warn .pj-bar i { background: #c27f00; }
.ledger-cell.is-alert .pj-bar i { background: var(--red); }

/* Task board */
.pj-board { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 0.9rem; overflow-x: auto; padding-bottom: 0.5rem; align-items: start; }
.pj-col { background: var(--surf); border: 1px solid var(--rule); border-radius: var(--r); padding: 0.7rem; min-height: 10rem; transition: background-color .15s; }
.pj-col.is-over { background: var(--green-l); outline: 2px dashed var(--green); outline-offset: -2px; }
.pj-col > h3 { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-family: var(--f-display); font-size: 0.82rem; margin: 0 0 0.6rem; }
.pj-col > h3 > span:first-child::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 0.45rem; border-radius: 50%; background: var(--rule-2); }
.pj-col > h3.is-in_progress > span:first-child::before { background: var(--amber); }
.pj-col > h3.is-done > span:first-child::before { background: var(--green); }
.pj-col-count { min-width: 1.5em; padding: 0 0.4em; border-radius: 999px; background: #fff; border: 1px solid var(--rule); color: var(--muted); font-family: var(--f-mono); font-size: 0.68rem; font-weight: 500; text-align: center; }
.pj-col-empty { display: none; margin: 0.2rem 0 0.7rem; padding: 0.9rem 0.5rem; border: 1px dashed var(--rule-2); border-radius: var(--r-s); text-align: center; font-size: 0.78rem; color: var(--muted); }
.pj-col:not(:has(.pj-task)) .pj-col-empty { display: block; }
.pj-board[data-view] .pj-col-empty { display: none; }
.pj-board[data-view] .pj-col.is-empty-here .pj-col-empty { display: block; }
.pj-task.is-elsewhere { display: none; }
/* Tasks are only added to our own view; mirrored ones come from the sync */
.pj-board[data-view]:not([data-view="manual"]) .pj-add-task { display: none; }
.pj-sources { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0 0 0.8rem; }
.pj-sources-tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.pj-sources [role=tab] { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 0.9rem; border: 1px solid var(--rule); border-radius: 999px; background: #fff; cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--muted); transition: background .15s, color .15s, border-color .15s; }
.pj-sources [role=tab] i { font-size: 0.75rem; }
.pj-sources [role=tab]:hover { color: var(--ink); border-color: var(--rule-2); }
.pj-sources [role=tab][aria-selected=true] { background: var(--navy); border-color: var(--navy); color: #fff; }
.pj-sources [role=tab][aria-selected=true] i { color: var(--amber); }
.pj-sources [role=tab][data-source=linear][aria-selected=true], .pj-sources [role=tab][data-source=trello][aria-selected=true] { background: var(--blue); border-color: var(--blue); }
.pj-sources [role=tab][data-source=linear][aria-selected=true] i, .pj-sources [role=tab][data-source=trello][aria-selected=true] i { color: #fff; }
.pj-sources [role=tab]:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.pj-sources-n { min-width: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: var(--surf); color: var(--muted); font-family: var(--f-mono); font-size: 0.68rem; line-height: 1.3rem; text-align: center; }
.pj-sources [aria-selected=true] .pj-sources-n { background: rgba(255,255,255,0.18); color: #fff; }
.pj-sources-note { flex: 1 1 16rem; margin: 0; font-size: 0.76rem; color: var(--muted); }
.pj-sources [hidden] { display: none; }
.pj-task { background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--rule-2); border-radius: var(--r-s); padding: 0.55rem 0.65rem; margin-bottom: 0.55rem; transition: box-shadow .15s, opacity .15s; }
.pj-task:hover { box-shadow: 0 8px 18px -14px rgba(13,31,18,0.5); }
.pj-task.is-done { border-left-color: var(--green); }
.pj-task.is-done .pj-task-title { color: var(--muted); }
.pj-task.is-mirrored { border-left-color: var(--blue); background: #fcfdff; }
.pj-task.is-dragging { opacity: 0.45; }
.pj-task[draggable="true"] { cursor: grab; }
.pj-task[draggable="true"]:active { cursor: grabbing; }
.pj-task-head { display: flex; align-items: flex-start; gap: 0.4rem; }
.pj-task-title { flex: 1; min-width: 0; font-weight: 600; font-size: 0.88rem; overflow-wrap: anywhere; }
.pj-task-moves { display: flex; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity .15s; }
.pj-task:hover .pj-task-moves, .pj-task:focus-within .pj-task-moves { opacity: 1; }
.pj-task-moves button { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 5px; background: var(--surf); color: var(--muted); font-size: 0.62rem; cursor: pointer; }
.pj-task-moves button:hover:not(:disabled) { background: var(--green-l); color: var(--green); }
.pj-task-moves button:disabled { visibility: hidden; }
.pj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.7rem; margin-top: 0.3rem; font-size: 0.72rem; color: var(--muted); }
.pj-meta .is-late { color: var(--red); font-weight: 600; }
.pj-assignee b { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 0.15rem; border-radius: 50%; background: var(--navy); color: var(--amber); font-size: 0.56rem; font-weight: 700; vertical-align: -3px; }
.pj-chip-src { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.pj-progress { height: 5px; border-radius: 3px; background: var(--surf); margin-top: 0.4rem; overflow: hidden; }
.pj-progress > div { height: 100%; background: var(--green); }
.pj-fold > summary { cursor: pointer; list-style: none; font-size: 0.74rem; color: var(--muted); margin-top: 0.4rem; }
.pj-fold > summary::-webkit-details-marker { display: none; }
.pj-fold[open] > summary { color: var(--green); }
.pj-todos { list-style: none; margin: 0.4rem 0; padding: 0; }
.pj-todos li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; padding: 0.15rem 0; }
.pj-todos li.is-done span { text-decoration: line-through; color: var(--muted); }
.pj-check-btn { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 0.9rem; padding: 0; }
.pj-check-btn.on { color: var(--green); }
.pj-add { margin-top: 0.3rem; }
.pj-add input, .pj-add select, .pj-add textarea { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--rule-2); border-radius: var(--r-s); font: inherit; font-size: 0.82rem; }
.pj-add-task summary { cursor: pointer; list-style: none; padding: 0.3rem 0.2rem; font-size: 0.78rem; font-weight: 600; color: var(--green); }
.pj-add-task summary::-webkit-details-marker { display: none; }

@media (hover: none) { .pj-task-moves { opacity: 1; } }
@media (max-width: 760px) { .pj-board { grid-template-columns: repeat(3, 82vw); } .pj-search, .pj-search input { width: 100%; } .pj-tools { width: 100%; } .pj-tools select { flex: 1; min-width: 0; } .pj-tiles { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .pj-tabs { top: 58px; } }
@media (prefers-reduced-motion: reduce) { .pj-tile, .pj-task, .pj-col { transition: none; } .pj-tile:hover { transform: none; } }

/* Project page: overview */
.pj-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pj-next > .form-card { margin-bottom: 0; }
.pj-more { font-size: 0.8rem; font-weight: 600; color: var(--green); text-decoration: none; white-space: nowrap; }
.pj-more:hover { text-decoration: underline; }
.pj-next-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; font-size: 0.86rem; border-bottom: 1px solid var(--surf); }
.pj-next-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pj-next-row:first-of-type { margin-top: 0.5rem; }
.pj-next-row > i { color: var(--rule-2); }
.pj-next-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-next-date { font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.pj-next-date.is-late { color: var(--red); font-weight: 600; }
.pf-actions { position: sticky; bottom: var(--tab-h); z-index: 10; margin: 1.2rem -1.5rem -1.5rem; padding: 0.8rem 1.5rem; background: rgba(255,255,255,0.94); backdrop-filter: blur(6px); border-top: 1px solid var(--rule); border-radius: 0 0 var(--r) var(--r); }
@media (max-width: 760px) { .pj-next { grid-template-columns: minmax(0, 1fr); } }
[data-pj-panel], .pj-launch, .pj-github { scroll-margin-top: 4.5rem; }
@media (max-width: 960px) { [data-pj-panel], .pj-launch, .pj-github { scroll-margin-top: 7.5rem; } }

/* Project page: repositories and client databases */
.pj-repo, .pj-db { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.pj-repo-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.pj-repo-head a { color: var(--green); font-weight: 600; overflow-wrap: anywhere; }
.pj-db-head { display: flex; align-items: center; gap: 0.75rem; }
.pj-db-icon { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: var(--navy); color: var(--amber); font-size: 0.9rem; }
.pj-db-title { flex: 1; min-width: 0; }
.pj-db-title strong { display: block; font-size: 0.98rem; }
.pj-db-title span { display: block; font-size: 0.74rem; color: var(--muted); overflow-wrap: anywhere; }
.pj-db-facts { margin-top: 0.9rem; }
.pj-db-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.pj-db-edit { margin-top: 0.8rem; }
.pj-db-edit > summary { width: fit-content; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.pj-db-edit > summary:hover { color: var(--green); }
.pj-db-edit > form { margin-top: 0.7rem; }
.pj-db-new { padding-top: 1rem; border-top: 1px solid var(--rule); }
.pj-db-new > summary { color: var(--green); }
.pj-github h2 i, .pj-databases h2 i { margin-right: 0.3rem; }
.pf-repos { display: grid; gap: 0.4rem; }
.pf-repo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 0.4rem; align-items: center; }
@media (max-width: 600px) { .pf-repo { grid-template-columns: minmax(0, 1fr) auto; } .pf-repo input:first-child { grid-column: 1 / -1; } }

/* Project status from Uptime Kuma */
.pj-live { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pj-live i { font-size: 0.45rem; margin: 0; }
.pj-live.is-up { color: var(--green); }
.pj-live.is-down { color: var(--red); }
.pj-live.is-pending, .pj-live.is-maintenance { color: #8a5600; }
.pj-live.is-down i { animation: pj-pulse 1.6s ease-in-out infinite; }
@keyframes pj-pulse { 50% { opacity: 0.35; } }
.pj-title .pj-live { margin-top: 0.3rem; }
.pj-uptime h2 i { margin-right: 0.3rem; }
.pj-monitor-form { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.6rem; }
.pj-monitor-form select { flex: 1; min-width: 0; max-width: 26rem; padding: 0.45rem 0.6rem; font: inherit; font-size: 0.85rem; }
@media (prefers-reduced-motion: reduce) { .pj-live.is-down i { animation: none; } }
.pj-gotify h2 i { margin-right: 0.3rem; }
.pj-alerts { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.pj-alerts li { padding: 0.5rem 0; border-top: 1px solid var(--surf); font-size: 0.86rem; }
.pj-alerts a { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.pj-alerts a:hover { color: var(--green); }

/* Task notes, attachments, sign-off and rich text */
.rich-text { font-size: 0.8rem; margin: 0.4rem 0; overflow-wrap: anywhere; }
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4 { font-size: 0.9rem; font-weight: 700; margin: 0.5rem 0 0.25rem; }
.rich-text ul, .rich-text ol { padding-left: 1.2rem; margin: 0.3rem 0; }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text blockquote { border-left: 3px solid var(--rule-2); margin: 0.4rem 0; padding-left: 0.6rem; color: var(--muted); }
.rich-text pre { background: var(--paper); padding: 0.4rem 0.5rem; border-radius: var(--r-s); overflow-x: auto; }
.rich-text a { color: var(--green); text-decoration: underline; }
.rich-editor trix-toolbar .trix-button-group--file-tools, .rich-editor trix-toolbar .trix-button-group--history-tools { display: none; }
.rich-editor trix-toolbar .trix-button-row { flex-wrap: wrap; }
.rich-editor trix-toolbar .trix-button-group { margin-bottom: 0.25rem; }
.rich-editor trix-toolbar .trix-button { font-size: 0.68rem; }
.rich-editor trix-editor { background: #fff; font-size: 0.8rem; min-height: 4rem; max-height: 16rem; overflow-y: auto; border-color: var(--rule); border-radius: var(--r-s); }
.pj-sub { font-size: 0.74rem; font-weight: 700; margin: 0.7rem 0 0.25rem; color: var(--muted); }
.pj-files { list-style: none; margin: 0 0 0.35rem; padding: 0; font-size: 0.78rem; }
.pj-files li { display: flex; align-items: center; gap: 0.3rem; }
.pj-files a { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--green); }
.pj-note { background: var(--paper); border-radius: var(--r-s); padding: 0.35rem 0.5rem; margin-bottom: 0.3rem; font-size: 0.78rem; }
.pj-note p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.pj-note small { color: var(--muted); font-size: 0.68rem; }
.pj-tick { display: flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; cursor: pointer; }
.pj-signoff { font-size: 0.74rem; margin-top: 0.4rem; padding: 0.3rem 0.45rem; border-radius: var(--r-s); background: var(--paper); }
.pj-signoff.is-approved { color: var(--green); }
.pj-signoff.is-declined { color: var(--red); }

/* Communication */
.comm-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.25rem 1rem; max-height: 16rem; overflow-y: auto; margin-top: 0.5rem; padding: 0.5rem; border: 1px solid var(--rule); border-radius: var(--r-s); background: #fff; }
.comm-clients small { color: var(--muted); }

/* Billable tasks */
.pj-billing { border: 1px solid var(--rule); border-radius: var(--r-s); padding: 0.7rem 0.8rem; margin: 0.6rem 0 0.9rem; background: var(--paper); }
.pj-chip-bill { font-size: 0.66rem; font-weight: 700; padding: 0.05rem 0.35rem; border-radius: 4px; background: var(--rule); color: var(--muted); }
.pj-chip-bill.is-yes { background: var(--green); color: #fff; }
.pj-pri { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.05rem 0.4rem; border-radius: 4px; }
.pj-pri.is-urgent { background: var(--red); color: #fff; }
.pj-pri.is-high { background: var(--amber-l); color: #7a4d00; box-shadow: inset 0 0 0 1px #f1d58a; }
.pj-pri.is-low { background: var(--surf); color: var(--muted); }
.pj-task.is-urgent:not(.is-done) { border-left-color: var(--red); }
.pj-task.is-high:not(.is-done) { border-left-color: var(--amber); }
.pj-chip-bill.is-quoted { background: var(--blue); color: #fff; }

/* Previews of documents being imported: on the right of wide screens, the form tightened beside it */
.doc-preview { margin-top: 0.7rem; }
.doc-preview iframe { display: block; width: 100%; height: 70vh; border: 1px solid var(--rule); border-radius: var(--r-s); background: #fff; }
.doc-preview img { display: block; max-width: 100%; max-height: 70vh; border: 1px solid var(--rule); border-radius: var(--r-s); }
.doc-panel { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); margin-bottom: 1.4rem; overflow: hidden; }
.doc-panel-head { display: flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.7rem; background: var(--surf); border-bottom: 1px solid var(--rule); }
.doc-panel-head strong { flex: 1; min-width: 0; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-panel-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border: 0; border-radius: var(--r-s); background: none; color: var(--muted); cursor: pointer; font-size: 0.8rem; }
.doc-panel-btn:hover { background: #fff; color: var(--green); }
.doc-panel .doc-preview { margin: 0; overflow: auto; background: #52605a; }
.doc-panel .doc-preview iframe, .doc-panel .doc-preview img { border: 0; border-radius: 0; }
.doc-panel .doc-preview img { width: 100%; max-width: none; max-height: none; }

@media (min-width: 1180px) {
    :root { --doc-w: clamp(30rem, 44vw, 62rem); }
    .doc-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: var(--doc-w); margin: 0; display: flex; flex-direction: column; border: 0; border-left: 1px solid var(--rule); border-radius: 0; box-shadow: -18px 0 36px -30px rgba(13, 31, 18, 0.5); }
    .doc-panel[hidden] { display: none; }
    .doc-panel .doc-preview { flex: 1; min-height: 0; }
    .doc-panel .doc-preview iframe { height: 100%; }

    /* The page's entrance animation would pin the fixed panel to .main */
    .main:has(.doc-panel:not([hidden])) { animation: none; margin-right: var(--doc-w); padding: 1rem 1.1rem 3rem; }
    .main:has(.doc-panel:not([hidden])) .page-header { margin-bottom: 0.7rem; padding: 0.8rem 1rem; }
    .main:has(.doc-panel:not([hidden])) .page-header h1 { font-size: 1.15rem; }
    .main:has(.doc-panel:not([hidden])) .back-link { margin-bottom: 0.3rem; }
    .main:has(.doc-panel:not([hidden])) .flash { padding: 0.45rem 0.7rem; font-size: 0.78rem; }
    .main:has(.doc-panel:not([hidden])) .form-card { padding: 0.65rem 0.75rem; margin-bottom: 0.6rem; }
    .main:has(.doc-panel:not([hidden])) .form-card h2 { font-size: 0.86rem; margin-bottom: 0.3rem; }
    .main:has(.doc-panel:not([hidden])) .form-card p.hint { display: none; }
    .main:has(.doc-panel:not([hidden])) .edit-grid { gap: 0.45rem 0.6rem; }
    .main:has(.doc-panel:not([hidden])) .edit-field { gap: 0.15rem; }
    .main:has(.doc-panel:not([hidden])) .edit-field label { font-size: 0.68rem; }
    .main:has(.doc-panel:not([hidden])) .edit-field input:not([type=checkbox]):not([type=radio]),
    .main:has(.doc-panel:not([hidden])) .edit-field select,
    .main:has(.doc-panel:not([hidden])) .edit-field textarea { padding: 0.3rem 0.45rem; font-size: 0.78rem; }
    .main:has(.doc-panel:not([hidden])) .edit-field textarea { min-height: 48px; }
    .main:has(.doc-panel:not([hidden])) .edit-field.full { grid-column: 1 / -1; }

    /* The transport fee on one line */
    .main:has(.doc-panel:not([hidden])) .edit-field:has(#transport) { grid-column: 1 / -1; }
    .main:has(.doc-panel:not([hidden])) .edit-field:has(#transport) span { white-space: nowrap; font-size: 0.76rem; }
    .main:has(.doc-panel:not([hidden])) #transport_days { width: 3.5rem !important; }
    .main:has(.doc-panel:not([hidden])) #transport_rate { width: 6rem !important; }

    /* The upload itself, one line */
    .main:has(.doc-panel:not([hidden])) #extractForm h2 { display: none; }
    .main:has(.doc-panel:not([hidden])) #extractForm input[type=file] { flex: 1; min-width: 0; font-size: 0.74rem; }
    .main:has(.doc-panel:not([hidden])) #extractForm .btn-save { padding: 0.3rem 0.7rem; font-size: 0.74rem; }

    /* Quotation steps */
    .main:has(.doc-panel:not([hidden])) .stepper-title { display: none; }
    .main:has(.doc-panel:not([hidden])) .quotation-stepper { margin-bottom: 0.4rem; }
    .main:has(.doc-panel:not([hidden])) .stepper-header { display: none; }
    .main:has(.doc-panel:not([hidden])) .step-label { font-size: 0.66rem; }
    .main:has(.doc-panel:not([hidden])) .stepper-controls { margin-bottom: 0.5rem; }
    .main:has(.doc-panel:not([hidden])) .stepper-controls .btn { padding: 0.25rem 0.55rem; font-size: 0.72rem; }

    /* Line tables: each line becomes a small block, as the columns can't fit */
    .main:has(.doc-panel:not([hidden])) #invoiceLines thead,
    .main:has(.doc-panel:not([hidden])) #itemsTable thead { display: none; }
    .main:has(.doc-panel:not([hidden])) #invoiceLines,
    .main:has(.doc-panel:not([hidden])) #invoiceLines tbody,
    .main:has(.doc-panel:not([hidden])) #itemsTable,
    .main:has(.doc-panel:not([hidden])) #itemsTable tbody { display: block; width: 100%; }
    .main:has(.doc-panel:not([hidden])) #invoiceLines tbody tr,
    .main:has(.doc-panel:not([hidden])) #itemsTable tbody tr { display: grid; gap: 0.25rem 0.5rem; padding: 0.4rem; border-bottom: 1px solid var(--rule); align-items: end; }
    .main:has(.doc-panel:not([hidden])) #invoiceLines tbody tr { grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) auto; }
    .main:has(.doc-panel:not([hidden])) #itemsTable tbody tr { grid-template-columns: auto auto auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) auto; }
    .main:has(.doc-panel:not([hidden])) #invoiceLines td::before,
    .main:has(.doc-panel:not([hidden])) #itemsTable td::before { display: block; white-space: nowrap; font-size: 0.64rem; }
    .main:has(.doc-panel:not([hidden])) #invoiceLines td,
    .main:has(.doc-panel:not([hidden])) #itemsTable td { display: block; padding: 0; border: 0; min-width: 0; font-size: 0.68rem; color: var(--muted); }
    .main:has(.doc-panel:not([hidden])) #invoiceLines input:not([type=checkbox]),
    .main:has(.doc-panel:not([hidden])) #itemsTable input:not([type=hidden]):not([type=checkbox]),
    .main:has(.doc-panel:not([hidden])) #itemsTable textarea { width: 100% !important; padding: 0.25rem 0.35rem; font-size: 0.76rem; }
    .main:has(.doc-panel:not([hidden])) #itemsTable textarea { margin-top: 0.2rem; min-height: 2.2rem; }
    .main:has(.doc-panel:not([hidden])) #invoiceLines input[type=checkbox],
    .main:has(.doc-panel:not([hidden])) #itemsTable input[type=checkbox] { display: block; margin: 0.2rem 0 0; }
    .main:has(.doc-panel:not([hidden])) #invoiceLines td .btn-delete,
    .main:has(.doc-panel:not([hidden])) #itemsTable td .btn-delete { padding: 0.15rem 0.35rem; font-size: 0.68rem; }

    .main:has(.doc-panel:not([hidden])) #invoiceLines td:nth-child(1) { grid-column: 1 / -1; }
    .main:has(.doc-panel:not([hidden])) #invoiceLines tbody:not(.il-extras) td:nth-child(2)::before { content: 'Weekend'; }
    .main:has(.doc-panel:not([hidden])) #invoiceLines tbody:not(.il-extras) td:nth-child(3)::before { content: 'Transport'; }
    .main:has(.doc-panel:not([hidden])) #invoiceLines tbody:not(.il-extras) td:nth-child(4)::before { content: 'Hours/days'; }
    .main:has(.doc-panel:not([hidden])) #invoiceLines tbody:not(.il-extras) td:nth-child(5)::before { content: 'Rate'; }
    .main:has(.doc-panel:not([hidden])) #invoiceLines tbody:not(.il-extras) td:nth-child(6)::before { content: 'Amount'; }

    .main:has(.doc-panel:not([hidden])) #itemsTable td:nth-child(1) { grid-column: 1 / -1; }
    .main:has(.doc-panel:not([hidden])) #itemsTable td:nth-child(2) { grid-column: 1 / -1; }
    .main:has(.doc-panel:not([hidden])) #itemsTable td:nth-child(3)::before { content: 'Opt.'; }
    .main:has(.doc-panel:not([hidden])) #itemsTable td:nth-child(4)::before { content: 'Add-on'; }
    .main:has(.doc-panel:not([hidden])) #itemsTable td:nth-child(5)::before { content: 'Transport'; }
    .main:has(.doc-panel:not([hidden])) #itemsTable td:nth-child(6)::before { content: 'Hours/days'; }
    .main:has(.doc-panel:not([hidden])) #itemsTable td:nth-child(7)::before { content: 'Rate'; }
    .main:has(.doc-panel:not([hidden])) #itemsTable td:nth-child(8)::before { content: 'Amount'; }

    .main:has(.doc-panel:not([hidden])) .il-totals,
    .main:has(.doc-panel:not([hidden])) .qf-totals { gap: 0.5rem; margin-top: 0.5rem; padding-top: 0.5rem; }
    .main:has(.doc-panel:not([hidden])) .il-totals strong,
    .main:has(.doc-panel:not([hidden])) .qf-totals strong { font-size: 0.9rem; }
}

/* Page links */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.pager-count { margin: 0; font-size: 0.8rem; color: var(--muted); }
.pager ul { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.pager-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; height: 2.1rem; padding: 0 0.5rem; border: 1px solid var(--rule); border-radius: var(--r-s); background: #fff; color: var(--ink); font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.pager-link i { font-size: 0.7rem; }
a.pager-link:hover { border-color: var(--green); color: var(--green); }
.pager-link.is-current { background: var(--green); border-color: var(--green); color: #fff; }
.pager-link.is-off { color: var(--muted); opacity: 0.5; }
.pager-link.is-gap { border-color: transparent; background: none; color: var(--muted); }

/* The AI Assistant page: chats down the side, the conversation filling the rest */
.main:has(.as-shell) { padding: 1rem clamp(0.8rem, 1.6vw, 1.4rem); animation: none; }
.as-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); height: calc(100dvh - 2rem); background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.main:has(.as-shell) .flash + .as-shell { height: calc(100dvh - 5.5rem); }

.as-rail { display: flex; flex-direction: column; gap: 0.6rem; min-height: 0; padding: 0.85rem; background: var(--surf); border-right: 1px solid var(--rule); }
.as-new { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem; border-radius: var(--r-s); background: var(--green); color: #fff; font-weight: 600; font-size: 0.88rem; text-decoration: none; transition: background .15s; }
.as-new:hover { background: var(--green-d); }
.as-chats { display: none; }
.as-search { width: 100%; padding: 0.45rem 0.6rem; font: inherit; font-size: 0.84rem; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-s); }
.as-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -0.35rem; padding: 0 0.35rem; scrollbar-width: thin; }
.as-list h2 { margin: 0.8rem 0 0.25rem 0.55rem; font-family: var(--f-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.as-list [data-as-group]:first-child h2 { margin-top: 0.15rem; }
.as-list a { display: block; padding: 0.45rem 0.55rem; border-left: 3px solid transparent; border-radius: var(--r-s); color: var(--ink); text-decoration: none; transition: background .15s; }
.as-list a:hover { background: rgba(12,80,26,0.06); }
.as-list a.is-active { background: #fff; border-left-color: var(--amber); box-shadow: 0 1px 2px rgba(13,31,18,0.08); }
.as-list a span { display: block; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-list a small { display: block; font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-list [hidden] { display: none; }
.as-none { padding: 0.6rem 0.55rem; font-size: 0.82rem; color: var(--muted); }

.as-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.as-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.2rem; border-bottom: 1px solid var(--rule); }
.as-head > div { min-width: 0; }
.as-head h1 { font-family: var(--f-body); font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-context { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.1rem; font-size: 0.76rem; color: var(--green); text-decoration: none; }
.as-context:hover { text-decoration: underline; }
.as-context.is-off { color: var(--muted); }
.as-icon { width: 34px; height: 34px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--muted); cursor: pointer; }
.as-icon:hover { background: var(--red-l); color: var(--red); }

.as-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 1.4rem clamp(1rem, 4vw, 3rem); display: flex; flex-direction: column; gap: 1rem; scroll-behavior: smooth; }
.as-thread.as-start { justify-content: flex-start; }
.as-welcome { width: 100%; max-width: 560px; margin: auto; text-align: center; }
.as-mark { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 0.7rem; border-radius: 12px; background: var(--amber-l); color: var(--green); font-family: var(--f-mono); font-weight: 600; font-size: 0.9rem; box-shadow: inset 0 0 0 1px rgba(255,180,0,0.5); }
.as-welcome h1 { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.2; }
.as-welcome p { margin-top: 0.4rem; color: var(--muted); font-size: 0.92rem; }
.as-suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.1rem; }
.as-suggestions button { padding: 0.65rem 0.75rem; text-align: left; font: inherit; font-size: 0.84rem; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: var(--r); cursor: pointer; transition: border-color .15s, transform .15s var(--ease); }
.as-suggestions button:hover:not(:disabled) { border-color: var(--green); transform: translateY(-1px); }
.as-suggestions button:disabled { opacity: 0.5; cursor: not-allowed; }

.as-msg { position: relative; width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; animation: as-in .22s var(--ease) both; }
.as-msg.is-user { align-items: flex-end; }
.as-msg.is-user .as-body { max-width: 82%; padding: 0.55rem 0.8rem; border-radius: 12px 12px 3px 12px; background: var(--green); color: #fff; white-space: pre-line; overflow-wrap: anywhere; }
.as-msg.is-ai .as-body { padding-left: 0.85rem; border-left: 2px solid var(--amber); overflow-wrap: anywhere; line-height: 1.55; }
.as-msg.is-error .as-body { padding: 0.55rem 0.8rem; border-radius: var(--r-s); background: var(--red-l); color: var(--red); font-size: 0.88rem; }
.as-body p + p, .as-body p + ul, .as-body p + ol, .as-body ul + p, .as-body ol + p { margin-top: 0.5rem; }
.as-body ul, .as-body ol { padding-left: 1.2rem; }
.as-body li + li { margin-top: 0.2rem; }
.as-body code { padding: 0.05rem 0.3rem; border-radius: 4px; background: var(--surf); font-family: var(--f-mono); font-size: 0.84em; }
.as-copy { align-self: flex-start; margin: 0.15rem 0 0 0.85rem; padding: 0; border: 0; background: none; color: var(--muted); font-size: 0.72rem; cursor: pointer; opacity: 0; transition: opacity .15s; }
.as-msg:hover .as-copy, .as-copy:focus-visible { opacity: 1; }
.as-copy:hover { color: var(--green); }
.as-dots { display: inline-flex; gap: 4px; padding: 0.3rem 0; }
.as-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: as-dot 1.1s infinite ease-in-out both; }
.as-dots i:nth-child(2) { animation-delay: .15s; }
.as-dots i:nth-child(3) { animation-delay: .3s; }

.as-composer { padding: 0.7rem clamp(1rem, 4vw, 3rem) 0.65rem; border-top: 1px solid var(--rule); background: var(--paper); }
.as-composer > * { max-width: 760px; margin-inline: auto; }
.as-project { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem; padding: 0 0.7rem; background: #fff; border: 1px solid var(--rule-2); border-radius: var(--r); color: var(--green); transition: border-color .15s, box-shadow .15s; }
.as-project:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-l); }
.as-project select { flex: 1; min-width: 0; padding: 0.65rem 0; font: inherit; font-size: 0.9rem; color: var(--ink); background: transparent; border: 0; outline: 0; cursor: pointer; }
.as-box { display: flex; align-items: flex-end; gap: 0.4rem; padding: 0.35rem 0.35rem 0.35rem 0.75rem; background: #fff; border: 1px solid var(--rule-2); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.as-box:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-l); }
.as-box textarea { flex: 1; min-width: 0; max-height: 180px; padding: 0.35rem 0; font: inherit; line-height: 1.4; color: var(--ink); background: transparent; border: 0; outline: 0; resize: none; }
.as-box button { flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--green); color: #fff; cursor: pointer; transition: background .15s; }
.as-box button:hover { background: var(--green-d); }
.as-box button:disabled { background: var(--rule-2); cursor: wait; }
.as-foot { margin-top: 0.35rem; font-size: 0.7rem; color: var(--muted); text-align: center; }
.as-error { margin-top: 0.3rem; font-size: 0.8rem; color: var(--red); }
@keyframes as-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes as-dot { 0%, 80%, 100% { transform: scale(0.55); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .as-msg, .as-dots i { animation: none; } .as-thread { scroll-behavior: auto; } }
@media (max-width: 960px) {
    .main:has(.as-shell) { padding: 0; }
    .as-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - 58px - var(--tab-h)); border: 0; border-radius: 0; box-shadow: none; }
    .main:has(.as-shell) .flash + .as-shell { height: calc(100dvh - 58px - 3.5rem - var(--tab-h)); }
    .as-rail { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0.5rem 0.7rem; border-right: 0; border-bottom: 1px solid var(--rule); }
    .as-new { flex-shrink: 0; padding: 0.45rem 0.7rem; }
    .as-chats { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; padding: 0.45rem 0.7rem; font: inherit; font-size: 0.86rem; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: var(--r-s); cursor: pointer; }
    .as-chats small { font-family: var(--f-mono); color: var(--muted); }
    .as-search, .as-list { display: none; }
    .as-rail.is-open .as-search { display: block; flex-basis: 100%; }
    .as-rail.is-open .as-list { display: block; flex-basis: 100%; max-height: 42dvh; }
    .as-copy { opacity: 1; }
    .as-suggestions { grid-template-columns: minmax(0, 1fr); }
}

/* The floating AI chat: above the page, below dialogs */
.ai-fab { position: fixed; right: 1.2rem; bottom: calc(1.2rem + max(env(safe-area-inset-bottom), var(--tab-h))); z-index: 900; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--green); color: #fff; font-size: 1.15rem; cursor: pointer; box-shadow: 0 8px 22px rgba(10,22,40,0.3); display: grid; place-items: center; }
.ai-fab:hover { filter: brightness(1.1); }
/* Out of the way of a sticky save bar and of the document preview */
body:has(.pf-actions) .ai-fab, body:has(.pf-actions) .ai-panel { margin-bottom: 4.2rem; }
body:has(.doc-panel:not([hidden])) .ai-fab, body:has(.doc-panel:not([hidden])) .ai-panel { right: auto; left: calc(var(--sb-w) + 1.2rem); }
.ai-panel { position: fixed; right: 1.2rem; bottom: calc(5rem + max(env(safe-area-inset-bottom), var(--tab-h))); z-index: 900; width: min(400px, calc(100vw - 1.6rem)); height: min(560px, calc(100vh - 7rem - var(--tab-h))); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(10,22,40,0.45); overflow: hidden; }
.ai-panel[hidden] { display: none; }
.ai-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.65rem 0.8rem; background: var(--navy); color: #fff; }
.ai-head strong { display: block; font-size: 0.9rem; }
.ai-head small { display: block; font-size: 0.72rem; opacity: 0.75; }
.ai-head div { flex: 1; min-width: 0; }
.ai-head button, .ai-head a { background: none; border: 0; color: #fff; opacity: 0.8; cursor: pointer; padding: 0.3rem; font-size: 0.85rem; }
.ai-head button:hover, .ai-head a:hover { opacity: 1; }
.ai-picker { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.8rem; border-bottom: 1px solid var(--rule); background: var(--surf); color: var(--green); font-size: 0.82rem; }
.ai-picker[hidden] { display: none; }
.ai-picker select { flex: 1; min-width: 0; padding: 0.3rem 0; font: inherit; font-size: 0.84rem; color: var(--ink); background: transparent; border: 0; outline: 0; cursor: pointer; }
.ai-picker:focus-within { box-shadow: inset 0 -2px 0 var(--green); }
.ai-log { flex: 1; overflow-y: auto; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.55rem; }
.ai-msg { max-width: 88%; padding: 0.5rem 0.7rem; border-radius: 10px; font-size: 0.86rem; white-space: pre-line; overflow-wrap: anywhere; background: var(--surf); align-self: flex-start; }
.ai-msg.is-user { background: var(--green); color: #fff; align-self: flex-end; }
.ai-msg.is-error { background: var(--red-l); color: var(--red); }
.ai-msg p + p, .ai-msg p + ul, .ai-msg p + ol, .ai-msg ul + p, .ai-msg ol + p { margin-top: 0.4rem; }
.ai-msg ul, .ai-msg ol { padding-left: 1.1rem; }
.ai-msg code { font-family: var(--f-mono); font-size: 0.85em; }
.ai-form { display: flex; gap: 0.4rem; padding: 0.6rem; border-top: 1px solid var(--rule); }
.ai-form textarea { flex: 1; min-width: 0; resize: none; font: inherit; font-size: 0.86rem; padding: 0.45rem 0.55rem; border: 1px solid var(--rule); border-radius: 8px; }
.ai-form button { width: 40px; border: 0; border-radius: 8px; background: var(--green); color: #fff; cursor: pointer; }
.ai-form button:disabled { opacity: 0.55; cursor: wait; }
@media (max-width: 960px) {
    body:has(.doc-panel:not([hidden])) .ai-fab, body:has(.doc-panel:not([hidden])) .ai-panel { left: auto; right: 1.2rem; }
}
@media (max-width: 520px) {
    .ai-panel { right: 0.8rem; left: 0.8rem; width: auto; bottom: calc(4.8rem + max(env(safe-area-inset-bottom), var(--tab-h))); }
}
@media print { .ai-fab, .ai-panel, .m-tabbar { display: none !important; } }

/* Meetings: a diary. Big mono dates, an agenda that reads down the day, and what needs you first */
.mg-page { --mg-ink: var(--ink); }
.mg-hero.is-slim { align-items: center; }
.mg-hero a:not(.mg-new) { color: var(--amber); }
.mg-eyebrow { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.25rem; }
.mg-panel .mg-eyebrow, .mg-preview .mg-eyebrow { color: #8a5600; }
.mg-lede { max-width: 52ch; margin-top: 0.35rem; font-size: 0.9rem; opacity: 0.82; }
.mg-back { display: inline-flex; gap: 0.4rem; align-items: center; margin-bottom: 0.3rem; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.mg-hero-side { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.mg-stats { display: flex; gap: 1.4rem; }
.mg-stats dt { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.mg-stats dd { font-family: var(--f-display); font-size: 1.9rem; line-height: 1; }
.mg-stats dd.is-hot { color: var(--amber); }
.mg-new, .mg-send { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.15rem; border: 0; border-radius: 999px; background: var(--amber); color: var(--navy); font: inherit; font-weight: 700; font-size: 0.88rem; text-decoration: none; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(255,180,0,0.8); transition: transform .15s var(--ease), box-shadow .15s; }
.mg-new:hover, .mg-send:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(255,180,0,0.9); }
.mg-send { background: var(--green); color: #fff; box-shadow: 0 6px 16px -8px rgba(12,80,26,0.8); }
.mg-send.is-quiet { background: #fff; color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green); }
.mg-section { margin-bottom: 1.8rem; }
.mg-h2 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.mg-h2 span:not(.mg-pulse) { padding: 0 0.45rem; border-radius: 999px; background: var(--surf); }
.mg-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(255,180,0,0.7); animation: mg-pulse 1.8s infinite; }
@keyframes mg-pulse { 70% { box-shadow: 0 0 0 9px rgba(255,180,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,180,0,0); } }

.mg-needs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.8rem; }
.mg-need { position: relative; display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.1rem 2.2rem; background: #fff; border: 1px solid var(--rule); border-left: 4px solid var(--amber); border-radius: 12px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .18s var(--ease), box-shadow .18s; animation: rise .4s var(--ease) both; }
.mg-need:nth-child(2) { animation-delay: .05s; } .mg-need:nth-child(3) { animation-delay: .1s; }
.mg-need:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(13,31,18,0.45); }
.mg-need-kind { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8a5600; }
.mg-need strong { font-size: 1rem; }
.mg-need-when { margin-top: 0.3rem; font-weight: 600; color: var(--green); }
.mg-need-note { margin-top: 0.3rem; font-size: 0.85rem; font-style: italic; color: var(--muted); }
.mg-need-go { position: absolute; right: 1rem; bottom: 0.8rem; font-size: 0.78rem; font-weight: 600; color: var(--green); }
.mg-who { font-size: 0.82rem; color: var(--muted); }
.mg-prospect { display: inline-block; margin-left: 0.25rem; padding: 0.05rem 0.4rem; border-radius: 4px; background: var(--blue-l); color: var(--blue); font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px; }

.mg-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 1.6rem; align-items: start; }
.mg-day { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0.9rem; padding: 0.9rem 0; border-top: 1px dashed var(--rule-2); }
.mg-day:first-of-type { border-top: 0; padding-top: 0; }
.mg-date { display: flex; flex-direction: column; align-items: center; padding: 0.45rem 0 0.5rem; border-radius: 12px; background: var(--navy); color: #fff; font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mg-date strong { font-family: var(--f-display); font-size: 1.7rem; line-height: 1; letter-spacing: 0; color: var(--amber); }
.mg-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.mg-slot { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; padding: 0.7rem 0.9rem; background: #fff; border: 1px solid var(--rule); border-radius: 12px; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s var(--ease); }
.mg-slot:hover { border-color: var(--green); transform: translateX(3px); }
.mg-time { font-family: var(--f-mono); font-size: 1.05rem; font-weight: 600; color: var(--green); }
.mg-time small { display: block; font-size: 0.65rem; font-weight: 400; color: var(--muted); }
.mg-slot-main { min-width: 0; }
.mg-slot-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-mode { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--green-l); color: var(--green); font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.mg-slot.is-person .mg-mode { background: var(--amber-l); color: #8a5600; }
.mg-foot { margin-top: 0.8rem; font-size: 0.8rem; color: var(--muted); }
.mg-empty { display: grid; justify-items: center; gap: 0.3rem; padding: 2.2rem 1rem; border: 1.5px dashed var(--rule-2); border-radius: 14px; color: var(--muted); text-align: center; }
.mg-empty i { font-size: 1.8rem; color: var(--rule-2); }
.mg-empty a { color: var(--green); font-weight: 600; }

.mg-wait { display: grid; gap: 0.2rem; margin-bottom: 0.55rem; padding: 0.85rem 0.95rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; color: var(--ink); text-decoration: none; transition: border-color .15s; }
.mg-wait:hover { border-color: var(--green); }
.mg-wait small { color: var(--muted); font-size: 0.72rem; }
.mg-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0 0.15rem; }
.mg-chip { padding: 0.18rem 0.5rem; border-radius: 6px; background: #fff; border: 1px solid var(--rule); font-family: var(--f-mono); font-size: 0.68rem; }
.mg-chip.is-gone { opacity: 0.45; text-decoration: line-through; }
.mg-quiet { color: var(--muted); font-size: 0.86rem; }

.mg-past summary { cursor: pointer; list-style: none; }
.mg-past summary::-webkit-details-marker { display: none; }
.mg-past-list { list-style: none; margin: 0 0 0.8rem; padding: 0; background: #fff; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.mg-past-list a { display: grid; grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; padding: 0.65rem 1rem; border-top: 1px solid var(--surf); color: var(--ink); text-decoration: none; font-size: 0.86rem; }
.mg-past-list li:first-child a { border-top: 0; }
.mg-past-list a:hover { background: var(--paper); }
.mg-past-when { font-family: var(--f-mono); font-size: 0.72rem; color: var(--muted); }
.mg-tag { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--green-l); color: var(--green); font-size: 0.72rem; font-weight: 600; text-decoration: none; }
.mg-tag.is-off { background: var(--surf); color: var(--muted); }

/* Composing an invite */
.mg-compose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 1.6rem; align-items: start; }
.mg-step { margin: 0 0 1.1rem; padding: 1.2rem 1.3rem 1.3rem; border: 1px solid var(--rule); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.mg-step legend { float: left; width: 100%; display: flex; align-items: center; gap: 0.55rem; padding: 0; margin-bottom: 0.2rem; font-family: var(--f-display); font-size: 1.05rem; }
.mg-step legend + * { clear: both; }
.mg-step legend span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: var(--amber); font-family: var(--f-mono); font-size: 0.72rem; }
.mg-label { display: block; margin: 0.9rem 0 0.3rem; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.mg-label small { font-weight: 400; }
.mg-page input[type=text], .mg-page input[type=email], .mg-page input[type=url], .mg-page input[type=number], .mg-page input[type=date], .mg-page input[type=time], .mg-page select, .mg-page textarea { width: 100%; padding: 0.62rem 0.75rem; border: 1.5px solid var(--rule); border-radius: 10px; background: var(--paper); font: inherit; font-size: 0.92rem; color: var(--ink); transition: border-color .15s, box-shadow .15s, background .15s; }
.mg-page input:focus, .mg-page select:focus, .mg-page textarea:focus { outline: 0; border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px var(--green-l); }
.mg-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.3rem; }
.mg-toggle.is-small { margin-top: 0.9rem; }
.mg-choice input { position: absolute; opacity: 0; pointer-events: none; }
.mg-choice span { display: grid; grid-template-columns: auto 1fr; column-gap: 0.65rem; align-items: center; height: 100%; padding: 0.8rem 0.9rem; border: 1.5px solid var(--rule); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s, transform .15s var(--ease); }
.mg-choice i { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--surf); color: var(--muted); }
.mg-choice small { grid-column: 2; font-size: 0.74rem; color: var(--muted); }
.mg-toggle.is-small .mg-choice i { grid-row: auto; }
.mg-choice:hover span { transform: translateY(-1px); }
.mg-choice input:checked + span { border-color: var(--green); background: var(--green-l); }
.mg-choice input:checked + span i { background: var(--green); color: #fff; }
.mg-choice input:focus-visible + span { box-shadow: 0 0 0 3px var(--amber-l); }
.mg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.8rem; }
.mg-grid .is-wide { grid-column: 1 / -1; }
.mg-grid[hidden], [data-mg-client-fields][hidden], [data-mg-in-person][hidden], [data-mg-fee-field][hidden] { display: none; }
.mg-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mg-pills input { position: absolute; opacity: 0; pointer-events: none; }
.mg-pills span { display: inline-block; min-width: 3.2rem; padding: 0.45rem 0.8rem; border: 1.5px solid var(--rule); border-radius: 999px; text-align: center; font-family: var(--f-mono); font-size: 0.82rem; cursor: pointer; transition: all .15s; }
.mg-pills input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--amber); }
.mg-pills input:focus-visible + span { box-shadow: 0 0 0 3px var(--amber-l); }
.mg-money { display: flex; align-items: center; border: 1.5px solid var(--rule); border-radius: 10px; background: var(--paper); overflow: hidden; }
.mg-money span { padding: 0 0.7rem; font-family: var(--f-mono); color: var(--muted); }
.mg-page .mg-money input { border: 0; border-radius: 0; box-shadow: none; }
.mg-times { display: grid; gap: 0.5rem; }
.mg-time-row { display: grid; grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 1fr) 32px; gap: 0.5rem; align-items: center; animation: rise .3s var(--ease) both; }
.mg-time-row[hidden] { display: none; }
.mg-time-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--amber-l); color: #8a5600; font-family: var(--f-mono); font-size: 0.75rem; font-weight: 600; }
.mg-x { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.mg-x:hover { background: var(--red-l); color: var(--red); }
.mg-add { justify-self: start; padding: 0.4rem 0.2rem; border: 0; background: none; color: var(--green); font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.mg-add[hidden] { display: none; }
.mg-hint { margin-top: 0.4rem; font-size: 0.78rem; color: var(--muted); }
.mg-error { margin-top: 0.25rem; font-size: 0.78rem; color: var(--red); }

.mg-preview { position: sticky; top: calc(var(--alert-h, 0px) + 1rem); padding: 1.2rem; border-radius: 16px; background: var(--paper); border: 1px solid var(--rule); }
.mg-ticket { position: relative; display: grid; gap: 0.2rem; margin: 0.4rem 0 1rem; padding: 1.1rem 1.1rem 1.2rem; border-radius: 12px; background: #fff; border: 1px solid var(--rule); box-shadow: var(--shadow); font-size: 0.84rem; color: var(--muted); }
.mg-ticket::before, .mg-ticket::after { content: ''; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule); }
.mg-ticket::before { left: -9px; clip-path: inset(0 0 0 50%); } .mg-ticket::after { right: -9px; clip-path: inset(0 50% 0 0); }
.mg-ticket strong { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.mg-ticket-mode { justify-self: start; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--green-l); color: var(--green); font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mg-ticket-fee { margin-top: 0.4rem; padding-top: 0.5rem; border-top: 1px dashed var(--rule-2); font-weight: 600; color: #8a5600; }
.mg-ticket-fee[hidden], .mg-flow li[hidden] { display: none; }
.mg-flow { margin: 0 0 1.1rem 1.1rem; padding: 0; font-size: 0.82rem; color: var(--muted); }
.mg-flow li { margin: 0.25rem 0; }
.mg-flow li::marker { font-family: var(--f-mono); color: var(--green); }
.mg-preview .mg-send { width: 100%; }

/* One meeting */
.mg-status { padding: 0.45rem 0.85rem; border-radius: 999px; background: rgba(255,255,255,0.12); font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.mg-status.is-chosen { background: var(--amber); color: var(--navy); }
.mg-status.is-confirmed { background: #fff; color: var(--green); }
.mg-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 1.4rem; padding: 0; list-style: none; counter-reset: none; }
.mg-track li { position: relative; display: grid; justify-items: center; gap: 0.2rem; text-align: center; font-size: 0.8rem; color: var(--muted); }
.mg-track li::before { content: ''; position: absolute; top: 14px; left: -50%; right: 50%; height: 2px; background: var(--rule-2); z-index: 0; }
.mg-track li:first-child::before { display: none; }
.mg-track li.is-done::before, .mg-track li.is-now::before { background: var(--green); }
.mg-track-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--rule-2); font-family: var(--f-mono); font-size: 0.75rem; }
.mg-track li.is-done .mg-track-dot { background: var(--green); border-color: var(--green); color: #fff; }
.mg-track li.is-now .mg-track-dot { border-color: var(--amber); color: #8a5600; box-shadow: 0 0 0 4px var(--amber-l); }
.mg-track li.is-now strong { color: var(--ink); }
.mg-track small { font-family: var(--f-mono); font-size: 0.64rem; }
.mg-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 1.4rem; align-items: start; }
.mg-panel { margin-bottom: 1rem; padding: 1.15rem 1.25rem; background: #fff; border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); }
.mg-panel h2 { font-family: var(--f-display); font-size: 1.25rem; margin: 0.1rem 0 0.2rem; }
.mg-panel.is-action { border: 0; background: linear-gradient(135deg, var(--green-l), #fff 70%); box-shadow: inset 0 0 0 1.5px var(--green), var(--shadow); }
.mg-panel.is-note { border-left: 4px solid var(--amber); }
.mg-panel blockquote { margin: 0.4rem 0 0.7rem; font-size: 1rem; font-style: italic; }
.mg-panel summary { cursor: pointer; font-weight: 700; list-style: none; }
.mg-panel summary::-webkit-details-marker { display: none; }
.mg-panel[open] summary { margin-bottom: 0.6rem; }
.mg-panel.is-danger summary { color: var(--red); }
.mg-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 0.9rem; }
.mg-link { color: var(--green); font-weight: 600; font-size: 0.86rem; }
.mg-danger { margin-top: 0.7rem; padding: 0.6rem 1rem; border: 0; border-radius: 999px; background: var(--red); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.mg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.9rem 1.2rem; }
.mg-facts dt { font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.mg-facts dd { margin-top: 0.15rem; white-space: pre-line; overflow-wrap: anywhere; }
.mg-facts a { color: var(--green); }
.mg-agenda { white-space: pre-line; }
.mg-copy { display: flex; gap: 0.4rem; }
.mg-page .mg-copy input { font-family: var(--f-mono); font-size: 0.7rem; }
.mg-copy button { flex-shrink: 0; width: 40px; border: 1.5px solid var(--rule); border-radius: 10px; background: #fff; color: var(--green); cursor: pointer; }

@media (max-width: 1100px) {
    .mg-columns, .mg-compose, .mg-detail { grid-template-columns: minmax(0, 1fr); }
    .mg-preview { position: static; }
}
@media (max-width: 620px) {
    .mg-stats { gap: 1rem; } .mg-stats dd { font-size: 1.5rem; }
    .mg-toggle, .mg-grid { grid-template-columns: minmax(0, 1fr); }
    .mg-day { grid-template-columns: 52px minmax(0, 1fr); }
    .mg-slot { grid-template-columns: 52px minmax(0, 1fr); }
    .mg-mode { grid-column: 2; justify-self: start; }
    .mg-past-list a { grid-template-columns: minmax(0, 1fr) auto; }
    .mg-past-list .mg-who, .mg-past-when { display: none; }
    .mg-track small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mg-pulse, .mg-need, .mg-time-row { animation: none; } }

/* ── Settings: tabs, a section index and one section at a time (settings.js) ── */
.st-tabs { display: flex; gap: 0.3rem; padding: 0.3rem; margin: 0 0 1.3rem; background: var(--surf); border: 1px solid var(--rule); border-radius: 999px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tabs a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.84rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; transition: background .18s var(--ease), color .18s var(--ease); }
.st-tabs a i { font-size: 0.8rem; opacity: 0.7; }
.st-tabs a:hover { color: var(--ink); background: #fff; }
.st-tabs a.is-on { background: var(--navy); color: #fff; box-shadow: 0 6px 16px -10px rgba(10,22,40,0.8); }
.st-tabs a.is-on i { color: var(--amber); opacity: 1; }

.st-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.st-layout > * { min-width: 0; }
.st-rail { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.st-rail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.85rem 1rem 0.7rem; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); position: relative; }
.st-rail-head.has-meter::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--done); background: var(--green); transition: width .6s var(--ease); }
.st-rail-meter b { color: var(--green); font-weight: 600; }
.st-search { margin: 0.7rem 0.7rem 0.2rem; padding: 0.5rem 0.75rem; border: 1px solid var(--rule); border-radius: var(--r-s); background: #fff; font: inherit; font-size: 0.84rem; color: var(--ink); }
.st-search:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(12,80,26,0.1); }
.st-list { list-style: none; margin: 0; padding: 0.45rem; overflow-y: auto; counter-reset: none; }
.st-list a { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; align-items: center; gap: 0.35rem; padding: 0.5rem 0.6rem; border-radius: var(--r-s); font-size: 0.85rem; font-weight: 500; line-height: 1.3; color: var(--ink); text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease); }
.st-list a:hover { background: var(--surf); }
.st-list a:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.st-n { font-family: var(--f-mono); font-size: 0.68rem; color: var(--rule-2); transition: color .15s; }
.st-label { overflow: hidden; text-overflow: ellipsis; }
.st-mark { width: 7px; height: 7px; border-radius: 50%; }
.st-list a.is-ready .st-mark { background: var(--green); box-shadow: 0 0 0 3px var(--green-l); }
.st-list a.is-unset .st-mark { border: 1.5px solid var(--rule-2); }
.st-list a.is-dirty .st-mark { background: var(--amber); border: 0; box-shadow: 0 0 0 3px var(--amber-l); }
.st-list a.is-error .st-mark { background: var(--red); border: 0; box-shadow: 0 0 0 3px var(--red-l); }
.st-list a.is-on { background: var(--navy); color: #fff; }
.st-list a.is-on .st-n { color: var(--amber); }
.st-list a.is-on.is-ready .st-mark { box-shadow: 0 0 0 3px rgba(255,255,255,0.12); background: #7fd18f; }
.st-none { padding: 0.6rem 1rem 1rem; font-size: 0.82rem; color: var(--muted); }

.st-panels > .hint:first-child { margin-top: 0; }
.st-panels .form-card { margin-top: 0 !important; }
.st-panels .form-card.st-off { display: none; }
.st-panels .form-card.st-in { animation: st-in .32s var(--ease) both; }
@keyframes st-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.st-panels form.st-empty > .form-actions { display: none; }
.st-panels .form-card h2 { font-size: 1.25rem; }

.st-savebar { position: sticky; bottom: calc(0.8rem + var(--tab-h)); z-index: 5; align-items: center; padding: 0.7rem 0.8rem 0.7rem 1.1rem; background: rgba(251,251,248,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: 0 14px 30px -18px rgba(13,31,18,0.45); }
.st-unsaved { font-size: 0.82rem; font-weight: 600; color: #6b4500; display: inline-flex; align-items: center; gap: 0.5rem; }
.st-unsaved:not(:empty)::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: st-pulse 1.6s ease-in-out infinite; }
form.is-dirty > .st-savebar { border-color: #f1d58a; box-shadow: inset 3px 0 0 var(--amber), 0 14px 30px -18px rgba(13,31,18,0.45); }
@keyframes st-pulse { 50% { opacity: 0.35; } }

@media (max-width: 960px) {
    .st-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .st-rail { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; align-items: center; background: none; border: 0; box-shadow: none; overflow: visible; }
    .st-rail-head { display: none; }
    .st-search { flex: 1 1 100%; margin: 0 0 0.5rem; }
    .st-list { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0 0 0.3rem; scrollbar-width: thin; flex: 1 1 100%; min-width: 0; }
    .st-list a { display: inline-flex; gap: 0.45rem; white-space: nowrap; border: 1px solid var(--rule); background: #fff; }
    .st-label { overflow: visible; }
    .st-list a.is-on { border-color: var(--navy); }
    .st-n { display: none; }
    /* Clear of the floating assistant button */
    .form-actions.st-savebar { width: auto; flex-wrap: nowrap; margin-right: 4.4rem; padding: 0.55rem 0.6rem 0.55rem 0.9rem; }
    .form-actions.st-savebar > :first-child { flex: 1 1 auto; min-width: 0; }
    .form-actions.st-savebar .right { width: auto; flex: 0 0 auto; }
    .form-actions.st-savebar .right > * { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .st-panels .form-card.st-in, .st-unsaved:not(:empty)::before { animation: none; } }

/* ── Dashboard: greeting, today's pulse, the week, and a section jump bar ── */
.dx-hero { align-items: flex-start; padding-bottom: 1.2rem; }
.dx-eyebrow { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.35rem; }
.dx-hero .quick-actions .btn { font-size: 0.8rem; padding: 0.5rem 0.95rem; }
.page-header > div.dx-pulse { flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 0.4rem; background: rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; }
.dx-pulse a { display: grid; gap: 0.15rem; padding: 0.85rem 1rem; background: rgba(10,22,40,0.45); color: #fff; text-decoration: none; transition: background .18s var(--ease); min-width: 0; position: relative; }
.dx-pulse a:hover { background: rgba(10,22,40,0.25); }
.dx-pulse small { padding-right: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; }
.dx-pulse strong { font-family: var(--f-display); font-size: clamp(1.35rem, 2.4vw, 1.8rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.dx-pulse span { font-size: 0.76rem; color: rgba(255,255,255,0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-header .dx-pulse a strong { color: #fff; }
.page-header .dx-pulse a.is-hot strong { color: var(--amber); }
.dx-pulse a.is-hot::before { content: ''; position: absolute; top: 0.9rem; right: 0.8rem; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(255,180,0,0.18); animation: st-pulse 1.8s ease-in-out infinite; }

.dx-week { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.1rem; margin-bottom: 1.2rem; scroll-margin-top: 4rem; }
.dx-panel { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); padding: 1rem 1.1rem 1.1rem; min-width: 0; animation: rise .45s var(--ease) both; }
.dx-panel:nth-child(3) { animation-delay: .06s; }
.dx-panel:nth-child(4) { animation-delay: .12s; }
.dx-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.75rem; }
.dx-panel-head h3 { font-family: var(--f-display); font-size: 0.98rem; font-weight: 800; display: flex; align-items: center; gap: 0.5rem; }
.dx-panel-head h3 i { color: var(--green); font-size: 0.85rem; }
.dx-panel-head a { font-size: 0.78rem; color: var(--muted); text-decoration: none; }
.dx-panel-head a:hover { color: var(--green); }

.dx-day + .dx-day { margin-top: 0.7rem; }
.dx-day-name { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.35rem; }
.dx-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.dx-slot { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: 0.6rem; align-items: start; padding: 0.5rem 0.6rem; border-radius: var(--r-s); background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--blue); color: var(--ink); text-decoration: none; transition: transform .15s var(--ease), box-shadow .15s; }
.dx-slot.is-in_person { border-left-color: var(--amber); }
.dx-slot.is-booking { border-left-color: var(--green); }
.dx-slot:hover { transform: translateX(2px); box-shadow: 0 6px 16px -12px rgba(13,31,18,0.5); }
.dx-slot.is-past { opacity: 0.55; }
.dx-slot time { font-family: var(--f-mono); font-size: 0.82rem; font-weight: 600; padding-top: 0.05rem; }
.dx-slot-main { display: grid; min-width: 0; }
.dx-slot-main strong { font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-slot-main span { font-size: 0.74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dx-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.dx-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title flag" "where due"; gap: 0.1rem 0.6rem; padding: 0.5rem 0.65rem; border-radius: var(--r-s); border-left: 3px solid var(--rule-2); color: var(--ink); text-decoration: none; transition: background .15s; }
.dx-task:hover { background: var(--surf); }
.dx-task.is-urgent { border-left-color: var(--red); }
.dx-task.is-high { border-left-color: var(--amber); }
.dx-task strong { grid-area: title; font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-task-flag { grid-area: flag; display: flex; gap: 0.3rem; justify-self: end; }
.dx-task-where { grid-area: where; font-size: 0.74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-due { grid-area: due; justify-self: end; font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.dx-due.is-late { color: var(--red); font-weight: 600; }
.dx-doing { font-size: 0.66rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 4px; background: var(--blue-l); color: var(--blue); }
.dx-more { font-size: 0.76rem; color: var(--muted); margin: 0.5rem 0 0 0.7rem; }
.dx-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin: auto 0 0; padding-top: 0.9rem; }
.dx-counts div { border-top: 1px solid var(--rule); padding-top: 0.5rem; }
.dx-counts dt { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dx-counts dd { font-family: var(--f-display); font-size: 1.15rem; font-weight: 800; margin: 0; }
.dx-counts .is-hot dd { color: var(--red); }

.dx-project { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.6rem; align-items: center; padding: 0.55rem 0.15rem; border-bottom: 1px solid var(--surf); color: var(--ink); text-decoration: none; }
.dx-project:last-child { border-bottom: 0; }
.dx-project:hover strong { color: var(--green); }
.dx-project-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; min-width: 0; }
.dx-project-top strong { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; }
.dx-project-sub { grid-column: 1 / -1; font-size: 0.74rem; color: var(--muted); }
.dx-project-sub b { color: #7a4d00; font-weight: 600; }

/* Cards that hold a second link: the card's own link (.dx-cover) stretches over the whole card,
   and the client's name (.to-client) sits above it, so each goes to its own page without nesting links. */
.dx-slot, .dx-task, .dx-project, .db-tile.is-linked { position: relative; }
.dx-cover { color: inherit; text-decoration: none; }
.dx-cover::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.dx-cover:focus-visible { outline: none; }
.dx-slot:has(.dx-cover:focus-visible), .dx-task:has(.dx-cover:focus-visible), .dx-project:has(.dx-cover:focus-visible), .db-tile:has(.dx-cover:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }
.to-client { position: relative; z-index: 1; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--rule-2); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color .15s, text-decoration-color .15s; }
.to-client:hover, .to-client:focus-visible { color: var(--green); text-decoration-color: currentColor; }
.db-tile.is-linked { transition: border-color .15s, box-shadow .15s; }
.db-tile.is-linked:hover { border-color: var(--rule-2); box-shadow: 0 1px 0 rgba(13,31,18,0.04), 0 14px 32px -18px rgba(13,31,18,0.4); }
.dx-left { flex: none; font-family: var(--f-mono); font-size: 0.66rem; padding: 0.08rem 0.4rem; border-radius: 4px; background: var(--surf); color: var(--muted); }
.dx-left.is-near { background: var(--amber-l); color: #7a4d00; }
.dx-left.is-late { background: var(--red-l); color: var(--red); }
.dx-bar { height: 6px; border-radius: 3px; background: var(--surf); overflow: hidden; margin-top: 0.15rem; }
.dx-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--green), #3f8f4f); transform-origin: left; animation: dx-grow .8s var(--ease) both .2s; }
.dx-pct { font-family: var(--f-mono); font-size: 0.7rem; color: var(--muted); }
@keyframes dx-grow { from { transform: scaleX(0); } }

.dx-empty { display: grid; justify-items: center; gap: 0.35rem; padding: 1.4rem 0.5rem; text-align: center; color: var(--muted); font-size: 0.84rem; }
.dx-empty i { font-size: 1.4rem; color: var(--rule-2); }
.dx-empty p { margin: 0; }
.dx-empty a { color: var(--green); font-weight: 600; font-size: 0.82rem; }

.dx-jump { position: sticky; top: 0.6rem; z-index: 6; display: flex; gap: 0.25rem; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 0 1.2rem; padding: 0.3rem; background: rgba(251,251,248,0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--rule); border-radius: 999px; box-shadow: 0 10px 24px -18px rgba(13,31,18,0.5); }
.dx-jump::-webkit-scrollbar { display: none; }
.dx-jump a { padding: 0.38rem 0.85rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.dx-jump a:hover { color: var(--ink); background: #fff; }
.dx-jump a.is-on { background: var(--navy); color: #fff; }
.main:has(.dx-jump) .db-head, .main:has(.dx-jump) #accounts { scroll-margin-top: 4.2rem; }

@media (max-width: 1200px) { .dx-week { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dx-week > .dx-panel:last-child { grid-column: 1 / -1; } }
@media (max-width: 820px) {
    .dx-week { grid-template-columns: minmax(0, 1fr); }
    .page-header > div.dx-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dx-jump { top: 4.2rem; }
}
@media (prefers-reduced-motion: reduce) { .dx-panel, .dx-bar span, .dx-pulse a.is-hot::before { animation: none; } }

/* ── Dictate tasks on a project board (partials/dictate) ── */
.dt { margin: 0.4rem 0 1rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); overflow: hidden; }
.dt-launch { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.9rem; cursor: pointer; list-style: none; transition: background .15s; }
.dt-launch::-webkit-details-marker { display: none; }
.dt-launch:hover { background: #fff; }
.dt-launch strong { display: block; font-family: var(--f-display); font-size: 0.92rem; font-weight: 800; }
.dt-launch small { display: block; font-size: 0.76rem; color: var(--muted); }
.dt-launch-mic { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; color: var(--amber); background: radial-gradient(circle at 30% 25%, var(--navy-2), var(--navy)); box-shadow: 0 6px 14px -8px rgba(10,22,40,0.8); }
.dt-chev { margin-left: auto; color: var(--muted); font-size: 0.75rem; transition: transform .2s var(--ease); }
.dt[open] .dt-chev { transform: rotate(180deg); }
.dt[open] .dt-launch { border-bottom: 1px solid var(--rule); }
.dt-body { padding: 1rem; }
.dt [hidden] { display: none !important; }

.dt-capture { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; }
.dt-mic-wrap { display: grid; justify-items: center; align-content: center; gap: 0.55rem; padding: 1rem 0.5rem; border-radius: var(--r); color: #fff;
    background: radial-gradient(120% 100% at 50% 0%, rgba(255,180,0,0.16), transparent 60%), linear-gradient(160deg, var(--navy), var(--green-d)); }
.dt-mic { position: relative; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.5rem; color: var(--navy); background: var(--amber); box-shadow: 0 10px 26px -10px rgba(255,180,0,0.9), inset 0 -3px 0 rgba(0,0,0,0.12); transition: transform .15s var(--ease), background .2s; }
.dt-mic:hover:not(:disabled) { transform: scale(1.05); }
.dt-mic:active:not(:disabled) { transform: scale(0.97); }
.dt-mic:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.dt-mic:disabled { cursor: not-allowed; background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.5); box-shadow: none; }
.dt-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--amber); opacity: 0; pointer-events: none; }
.dt.is-listening .dt-mic { background: #ff5a4e; color: #fff; box-shadow: 0 10px 26px -10px rgba(255,90,78,0.9); }
.dt.is-listening .dt-ring { border-color: #ff8a80; animation: dt-ring 1.8s var(--ease) infinite; }
.dt.is-listening .dt-ring + .dt-ring { animation-delay: .9s; }
@keyframes dt-ring { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }
.dt-state { margin: 0; font-size: 0.78rem; text-align: center; color: rgba(255,255,255,0.85); }
.dt-timer { margin: 0; font-family: var(--f-mono); font-size: 0.78rem; color: var(--amber); }

.dt-text textarea { width: 100%; min-height: 8.5rem; resize: vertical; padding: 0.75rem 0.9rem; border: 1.5px solid var(--rule); border-radius: var(--r-s); background: #fff; font: inherit; font-size: 0.92rem; line-height: 1.55; color: var(--ink); }
.dt-text textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(12,80,26,0.1); }
.dt.is-listening .dt-text textarea { border-color: #ff8a80; }
.dt-hearing { margin: 0.35rem 0 0; font-size: 0.82rem; font-style: italic; color: var(--muted); }
.dt-hearing::before { content: '…'; margin-right: 0.2rem; }
.dt-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.7rem; }
.dt-go { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.1rem; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.86rem; font-weight: 700; color: #fff; background: var(--green); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18); transition: background .15s, transform .15s; }
.dt-go:hover:not(:disabled) { background: var(--green-d); }
.dt-go:disabled { opacity: 0.45; cursor: not-allowed; }
.dt-quiet { border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.82rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.dt-quiet:hover { color: var(--ink); }
.dt-count { margin-left: auto; font-family: var(--f-mono); font-size: 0.7rem; color: var(--muted); }
.dt-file { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px dashed var(--rule); font-size: 0.78rem; color: var(--muted); }
.dt-file-pick { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border: 1.5px solid var(--rule-2); border-radius: 999px; cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--ink); background: #fff; transition: border-color .15s, color .15s; }
.dt-file-pick:hover, .dt-file-pick:focus-within { border-color: var(--green); color: var(--green); }
.dt-file-pick:focus-within { box-shadow: 0 0 0 3px rgba(12,80,26,0.15); }
.dt.is-dropping { outline: 2px dashed var(--green); outline-offset: -2px; }
.dt.is-dropping .dt-body { background: rgba(12,80,26,0.04); }
.dt-cut { margin: -0.4rem 0 0.7rem; font-size: 0.78rem; color: #7a4d00; }
.dt-note { margin: 0.7rem 0 0; font-size: 0.74rem; line-height: 1.5; color: var(--muted); }
.dt-note i { color: var(--green); margin-right: 0.2rem; }

.dt-thinking p { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.8rem; font-size: 0.86rem; color: var(--ink); }
.dt-dots { display: inline-flex; gap: 3px; }
.dt-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: dt-dot 1s ease-in-out infinite; }
.dt-dots i:nth-child(2) { animation-delay: .15s; }
.dt-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dt-dot { 50% { transform: translateY(-4px); opacity: 0.4; } }
.dt-skeleton { display: grid; gap: 0.45rem; }
.dt-skeleton span { height: 2.6rem; border-radius: var(--r-s); background: linear-gradient(90deg, var(--surf) 25%, #fff 50%, var(--surf) 75%); background-size: 200% 100%; animation: dt-shimmer 1.3s linear infinite; }
.dt-skeleton span:nth-child(2) { width: 85%; }
.dt-skeleton span:nth-child(3) { width: 70%; }
@keyframes dt-shimmer { to { background-position: -200% 0; } }

.dt-drafts-head h3 { font-family: var(--f-display); font-size: 0.98rem; font-weight: 800; }
.dt-drafts-head h3 small { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; margin-left: 0.3rem; padding: 0 0.35rem; border-radius: 999px; background: var(--navy); color: var(--amber); font-family: var(--f-mono); font-size: 0.7rem; vertical-align: 2px; }
.dt-drafts-head p { margin: 0.2rem 0 0.7rem; font-size: 0.8rem; color: var(--muted); }
.dt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.dt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: start; padding: 0.55rem 0.65rem; background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--rule-2); border-radius: var(--r-s); animation: rise .35s var(--ease) both; transition: opacity .2s; }
.dt-row[data-priority="urgent"] { border-left-color: var(--red); }
.dt-row[data-priority="high"] { border-left-color: var(--amber); }
.dt-row.is-off { opacity: 0.45; }
.dt-tick { padding-top: 0.45rem; }
.dt-tick input { width: 1.05rem; height: 1.05rem; accent-color: var(--green); cursor: pointer; }
.dt-row-main { display: grid; gap: 0.25rem; min-width: 0; }
.dt-row input[type=text] { width: 100%; padding: 0.35rem 0.5rem; border: 1px solid transparent; border-radius: 4px; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink); background: transparent; }
.dt-row textarea { width: 100%; resize: none; overflow: hidden; padding: 0.25rem 0.5rem; border: 1px solid transparent; border-radius: 4px; font: inherit; font-size: 0.8rem; line-height: 1.45; color: var(--muted); background: transparent; }
.dt-row input[type=text]:hover, .dt-row textarea:hover { border-color: var(--rule); }
.dt-row input[type=text]:focus, .dt-row textarea:focus, .dt-row select:focus, .dt-row input[type=date]:focus { outline: none; border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px rgba(12,80,26,0.1); }
.dt-row-side { display: grid; gap: 0.3rem; width: 9.5rem; }
.dt-row select, .dt-row input[type=date] { width: 100%; padding: 0.3rem 0.45rem; border: 1px solid var(--rule); border-radius: 4px; font: inherit; font-size: 0.78rem; background: #fff; color: var(--ink); }
.dt-row[data-priority="urgent"] select { color: var(--red); font-weight: 700; }
.dt-row[data-priority="high"] select { color: #7a4d00; font-weight: 700; }

@media (max-width: 720px) {
    .dt-capture { grid-template-columns: minmax(0, 1fr); }
    .dt-mic-wrap { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; padding: 0.7rem 0.9rem; }
    .dt-mic { width: 3.4rem; height: 3.4rem; font-size: 1.15rem; }
    .dt-row { grid-template-columns: auto minmax(0, 1fr); }
    .dt-row-side { grid-column: 2; width: auto; grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .dt-ring, .dt-dots i, .dt-skeleton span, .dt-row { animation: none !important; } }

/* ── Bank: balance, money in and out, and matching lines (admin/bank) ── */
.bk-balance { font-variant-numeric: tabular-nums; font-size: clamp(2rem, 4vw, 2.9rem) !important; }
.bk-asat { margin: 0.3rem 0 0; font-size: 0.82rem; }
.bk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.2rem; align-items: start; }
.bk-main { min-width: 0; }
.bk-side { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.bk-side .dx-panel { animation: none; }
.bk-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.bk-views { margin: 0; }
.bk-badge { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; margin-left: 0.35rem; padding: 0 0.3rem; border-radius: 999px; background: var(--amber); color: var(--navy); font-size: 0.66rem; font-weight: 800; }
.bk-search { position: relative; flex: 0 1 16rem; }
.bk-search i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.78rem; }
.bk-search input { width: 100%; padding: 0.5rem 0.8rem 0.5rem 2rem; border: 1px solid var(--rule); border-radius: 999px; background: #fff; font: inherit; font-size: 0.84rem; }
.bk-search input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(12,80,26,0.1); }
.bk-empty { background: #fff; border: 1px dashed var(--rule-2); border-radius: var(--r); padding: 2.2rem 1rem; }

.bk-lines { list-style: none; margin: 0 0 1rem; padding: 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.bk-line { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "date what amount" "date match match"; gap: 0.25rem 0.9rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--surf); position: relative; }
.bk-line:last-child { border-bottom: 0; }
.bk-line::before { content: ''; position: absolute; left: 0; top: 0.8rem; bottom: 0.8rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--rule-2); }
.bk-line.is-in::before { background: var(--green); }
.bk-line.is-unmatched::before { background: var(--amber); }
.bk-line.is-ignored { opacity: 0.6; }
.bk-date { grid-area: date; display: grid; justify-items: center; align-content: start; padding-top: 0.1rem; font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bk-date b { font-family: var(--f-display); font-size: 1.2rem; font-weight: 800; letter-spacing: 0; color: var(--ink); line-height: 1; }
.bk-what { grid-area: what; display: grid; gap: 0.15rem; min-width: 0; }
.bk-what strong { font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-what > span { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; font-size: 0.74rem; color: var(--muted); }
.bk-ref { font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink); background: var(--surf); padding: 0 0.35rem; border-radius: 3px; }
.bk-src i { font-size: 0.66rem; margin-right: 0.15rem; }
.bk-amount { grid-area: amount; display: grid; justify-items: end; align-content: start; }
.bk-amount strong { font-family: var(--f-body); font-size: 0.98rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-line.is-in .bk-amount strong { color: var(--green); }
.bk-amount small { font-family: var(--f-mono); font-size: 0.66rem; color: var(--muted); }
.bk-match { grid-area: match; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin-top: 0.35rem; }
.bk-matched { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--green); }
.bk-matched a { color: inherit; font-weight: 600; }
.bk-matched.is-quiet { color: var(--muted); }
.bk-link { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 0.76rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.bk-link:hover { color: var(--red); }
.bk-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; padding: 0.4rem 0.45rem 0.4rem 0.75rem; border: 1px solid #cfe3d4; border-radius: var(--r-s); background: var(--green-l); font-size: 0.8rem; }
.bk-suggest > span { display: grid; }
.bk-suggest small { font-size: 0.7rem; color: var(--muted); }
.bk-suggest.is-new { background: var(--paper); border-color: var(--rule); }
.bk-suggest input[type=text] { width: 13rem; max-width: 100%; }
.bk-suggest input[type=text], .bk-suggest select, .bk-more select, .bk-more input, .bk-form input, .bk-form select { padding: 0.35rem 0.5rem; border: 1px solid var(--rule); border-radius: 4px; background: #fff; font: inherit; font-size: 0.8rem; color: var(--ink); min-width: 0; }
.bk-yes { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border: 0; border-radius: 999px; background: var(--green); color: #fff; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.bk-yes:hover { background: var(--green-d); }
.bk-nohint { font-size: 0.78rem; color: var(--muted); font-style: italic; }
.bk-more summary { cursor: pointer; list-style: none; font-size: 0.76rem; font-weight: 600; color: var(--muted); }
.bk-more summary::-webkit-details-marker { display: none; }
.bk-more summary::after { content: ' ▾'; font-size: 0.65rem; }
.bk-more[open] { flex-basis: 100%; }
.bk-more-body { display: grid; gap: 0.6rem; margin-top: 0.5rem; padding: 0.7rem; border-radius: var(--r-s); background: var(--paper); border: 1px solid var(--rule); }
.bk-more-body form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.5rem; align-items: center; }
.bk-more-body label { grid-column: 1 / -1; font-size: 0.74rem; font-weight: 600; }
.bk-more-body label small { font-weight: 400; color: var(--muted); }
.bk-go { padding: 0.38rem 0.8rem; border: 1px solid var(--green); border-radius: 999px; background: #fff; color: var(--green); cursor: pointer; font: inherit; font-size: 0.76rem; font-weight: 700; }
.bk-go:hover { background: var(--green); color: #fff; }
.bk-go.is-quiet { border-color: var(--rule-2); color: var(--muted); }
.bk-go.is-quiet:hover { background: var(--surf); color: var(--ink); }

.bk-chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; height: 8.5rem; align-items: end; }
.bk-chart-col { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 0.3rem; }
.bk-bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.bk-bars span { width: 40%; min-height: 2px; border-radius: 3px 3px 0 0; transform-origin: bottom; animation: bk-grow .7s var(--ease) both; }
.bk-bars .is-in, .bk-legend .is-in { background: var(--green); }
.bk-bars .is-out, .bk-legend .is-out { background: var(--amber); }
@keyframes bk-grow { from { transform: scaleY(0); } }
.bk-chart small { text-align: center; font-family: var(--f-mono); font-size: 0.62rem; color: var(--muted); text-transform: uppercase; }
.bk-legend { display: flex; gap: 0.9rem; margin: 0.5rem 0 0; font-size: 0.74rem; color: var(--muted); }
.bk-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 0.25rem; }
.bk-table { margin-top: 0.5rem; font-size: 0.78rem; }
.bk-table summary { cursor: pointer; color: var(--muted); }
.bk-import > summary { list-style: none; cursor: pointer; margin-bottom: 0; }
.bk-import > summary::-webkit-details-marker { display: none; }
.bk-import[open] > summary { margin-bottom: 0.6rem; }
.bk-steps { margin: 0 0 0.8rem; padding-left: 1.1rem; font-size: 0.8rem; color: var(--muted); line-height: 1.55; }
.bk-steps b { color: var(--ink); }
.bk-form { display: grid; gap: 0.35rem; }
.bk-form label { font-size: 0.74rem; font-weight: 600; margin-top: 0.2rem; }
.bk-form label small { font-weight: 400; color: var(--muted); }
.bk-form .bk-yes, .bk-form .bk-go { justify-self: start; margin-top: 0.4rem; }
.bk-status { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.82rem; }
.bk-status i { font-size: 0.5rem; color: var(--muted); }
.bk-status.is-good i { color: var(--green); }
.bk-status.is-warn i { color: var(--amber); }
.bk-status.is-alert i { color: var(--red); }
.bk-account { border-top: 1px solid var(--surf); }
.bk-account:first-of-type { border-top: 0; }
.bk-account summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0; cursor: pointer; list-style: none; }
.bk-account summary::-webkit-details-marker { display: none; }
.bk-account summary span { display: grid; }
.bk-account summary strong { font-size: 0.86rem; }
.bk-account summary small { font-size: 0.74rem; color: var(--muted); }
.bk-account summary i { font-size: 0.72rem; color: var(--muted); }
.bk-account .bk-form { padding-bottom: 0.7rem; }

@media (max-width: 1100px) { .bk-layout { grid-template-columns: minmax(0, 1fr); } .bk-side { position: static; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
@media (max-width: 600px) {
    .bk-line { grid-template-columns: 2.4rem minmax(0, 1fr); grid-template-areas: "date what" "date amount" "match match"; }
    .bk-amount { justify-items: start; }
    .bk-search { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .bk-bars span { animation: none; } }
.dx-head-links { display: inline-flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.dx-bank { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--green-l); color: var(--green) !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.dx-bank small { font-weight: 400; color: var(--muted); }

/* My Account: trusted devices */
.td-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.td-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.85rem; border: 1px solid var(--rule); border-radius: var(--r-s); }
.td-icon { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: var(--surf); color: var(--muted); }
.td-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; }
.td-meta { flex-basis: 100%; font-size: 0.8rem; color: var(--muted); }
.td-empty { margin: 0.4rem 0 0; color: var(--muted); }
.td-empty i { margin-right: 0.35rem; }
@media (max-width: 560px) { .td-item { flex-wrap: wrap; align-items: flex-start; } .td-text { flex-basis: calc(100% - 3rem); } .td-item form { margin-left: 2.95rem; } }

/* Payment arrangements (admin and portal) */
.ar-views { margin: 0.4rem 0 1rem; }
.ar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.ar-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(9rem, 1fr) minmax(7.5rem, auto) auto; align-items: center; gap: 1.1rem; padding: 0.9rem 1.1rem; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.ar-row:hover { border-color: var(--green); box-shadow: var(--shadow); }
.ar-row.is-behind { border-left: 4px solid var(--red); }
.ar-row-main { min-width: 0; display: grid; gap: 0.15rem; }
.ar-row-main span { font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-row-progress { display: grid; gap: 0.3rem; }
.ar-row-progress small, .ar-row-next small { font-size: 0.74rem; color: var(--muted); }
.ar-row-next { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
.ar-late { color: var(--red); }
.ar-bar { display: block; height: 6px; border-radius: 999px; background: var(--surf); overflow: hidden; }
.ar-bar i { display: block; height: 100%; background: var(--green); border-radius: inherit; transition: width .4s var(--ease); }
@media (max-width: 760px) {
    .ar-row { grid-template-columns: 1fr auto; gap: 0.6rem 1rem; }
    .ar-row-progress { grid-column: 1 / -1; order: 3; }
    .ar-row-next { text-align: left; }
}

.ar-hero-sub { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.88rem; opacity: 0.85; }
.page-header .quick-actions form { margin: 0; }
.ar-detail { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); gap: 1.2rem; align-items: start; }
.ar-detail > .form-card, .ar-side > .form-card { margin: 0; }
.ar-side { display: grid; gap: 1.2rem; }
@media (max-width: 900px) { .ar-detail { grid-template-columns: 1fr; } }
.ar-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.86rem; }
.ar-side-list li { display: flex; justify-content: space-between; gap: 0.8rem; }
.ar-side-list li span:last-child { color: var(--muted); white-space: nowrap; }
.ar-side-list a { color: var(--green); font-weight: 600; }
.ar-history li { padding-bottom: 0.5rem; border-bottom: 1px dashed var(--rule); }
.ar-history li:last-child { border-bottom: 0; padding-bottom: 0; }

.ar-schedule { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.45rem; counter-reset: none; }
.ar-pay { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto; align-items: center; gap: 0.8rem; padding: 0.65rem 0.85rem; border: 1px solid var(--rule); border-radius: var(--r-s); background: #fff; }
.ar-pay-n { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--surf); font-family: var(--f-mono); font-size: 0.75rem; color: var(--muted); }
.ar-pay-main { display: grid; gap: 0.1rem; min-width: 0; }
.ar-pay-main small { font-size: 0.76rem; color: var(--muted); }
.ar-pay-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.ar-pay.is-paid { background: var(--paper); }
.ar-pay.is-paid .ar-pay-n { background: var(--green-l); color: var(--green); }
.ar-pay.is-paid .ar-pay-amount { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.ar-pay.is-missed { border-color: #f0c9c5; background: var(--red-l); }
.ar-pay.is-missed .ar-pay-n { background: #fff; color: var(--red); }
.ar-pay.is-due { border-color: var(--amber); background: var(--amber-l); }
@media (max-width: 520px) { .ar-pay { grid-template-columns: 1.8rem minmax(0, 1fr) auto; } .ar-pay .chip { grid-column: 2 / -1; justify-self: start; } }

.ar-step-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.ar-step { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: 0.35rem; border-radius: 50%; background: var(--green); color: #fff; font-family: var(--f-mono); font-size: 0.8rem; vertical-align: 0.15em; }
.ar-change { font-size: 0.84rem; color: var(--green); }
.ar-invoices { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.ar-invoice { display: flex; align-items: center; gap: 0.8rem; padding: 0.65rem 0.85rem; border: 1px solid var(--rule); border-radius: var(--r-s); cursor: pointer; transition: border-color .15s, background .15s; }
.ar-invoice:has(input:checked) { border-color: var(--green); background: var(--green-l); }
.ar-invoice input { width: 17px; height: 17px; accent-color: var(--green); margin: 0; }
.ar-invoice-main { flex: 1; display: grid; }
.ar-invoice-main small { font-size: 0.76rem; color: var(--muted); }
.ar-invoice-owed { font-weight: 600; font-variant-numeric: tabular-nums; }
.ar-owed { margin: 0.8rem 0 0; text-align: right; }
.ar-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0.8rem; align-items: end; padding: 0.9rem; background: var(--surf); border-radius: var(--r-s); }
.ar-split .edit-field { margin: 0; }
@media (max-width: 760px) { .ar-split { grid-template-columns: 1fr 1fr; } .ar-split .btn { grid-column: 1 / -1; justify-content: center; } }
.ar-rows { width: 100%; margin-top: 0.9rem; border-collapse: collapse; }
.ar-rows th { text-align: left; font-size: 0.72rem; font-weight: 600; color: var(--muted); padding: 0 0.4rem 0.4rem; }
.ar-rows td { padding: 0.25rem 0.4rem; }
.ar-rows .num { text-align: right; }
.ar-rows input { width: 100%; padding: 0.5rem 0.7rem; border: 1.5px solid var(--rule); border-radius: 4px; font: inherit; font-size: 0.9rem; }
.ar-rows .num input { text-align: right; font-variant-numeric: tabular-nums; }
.ar-n { width: 2rem; font-family: var(--f-mono); font-size: 0.78rem; color: var(--muted); }
.ar-remove { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.ar-remove:hover { background: var(--red-l); color: var(--red); }
.ar-rows-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.6rem; }
.ar-check { margin: 0; font-size: 0.86rem; font-weight: 600; }
.ar-check.is-ok { color: var(--green); }
.ar-check.is-ok::before { content: '\2713  '; }
.ar-check.is-off { color: var(--red); }

.ar-note { margin: 0 0 0.9rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--amber); background: var(--amber-l); border-radius: 0 var(--r-s) var(--r-s) 0; white-space: pre-line; font-size: 0.9rem; }
.ar-portal-tiles .ar-bar { margin-top: 0.4rem; }
.ar-card-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: center; }
.ar-card-next { display: grid; padding-right: 1.4rem; border-right: 1px solid var(--rule); }
.ar-card-next small { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ar-card-next strong { font-family: var(--f-display); font-size: 1.6rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ar-card-next span { font-size: 0.82rem; color: var(--muted); }
.ar-card-next.is-late strong, .ar-card-next.is-late small { color: var(--red); }
.ar-card-progress { display: grid; gap: 0.45rem; font-size: 0.82rem; color: var(--muted); }
.ar-card-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.ar-card-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--surf); border: 1px solid var(--rule); }
.ar-card-dots i.is-paid { background: var(--green); border-color: var(--green); }
.ar-card-dots i.is-part { background: linear-gradient(90deg, var(--green) 50%, var(--surf) 50%); border-color: var(--green); }
.ar-card-dots i.is-missed { background: var(--red); border-color: var(--red); }
.ar-card-dots i.is-due { background: var(--amber); border-color: var(--amber); }
@media (max-width: 560px) { .ar-card-body { grid-template-columns: 1fr; gap: 0.9rem; } .ar-card-next { border-right: 0; padding-right: 0; } }
/* A stat strip of plain figures (not links), e.g. on an arrangement */
.page-header > div.dx-pulse.is-static { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dx-pulse > div { display: grid; gap: 0.15rem; padding: 0.85rem 1rem; background: rgba(10,22,40,0.45); color: #fff; min-width: 0; position: relative; }
.page-header .dx-pulse > div strong { color: #fff; }
.page-header .dx-pulse > div.is-hot strong { color: var(--amber); }
@media (max-width: 760px) { .page-header > div.dx-pulse.is-static { grid-template-columns: 1fr; } }
.ar-card-body { padding: 1rem 1.2rem 1.1rem; }
.pt-status.arranged { background: var(--blue-l); color: var(--blue); }
/* Rand amounts are wider than counts: a size that fits them in the strip */
.ar-hero .dx-pulse strong { font-size: clamp(1.05rem, 1.75vw, 1.4rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Arrangement form: the either/or choices and their panels */
.ar-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.6rem; margin: 0.4rem 0 1rem; }
.ar-option { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.8rem 0.95rem; border: 1.5px solid var(--rule); border-radius: var(--r-s); cursor: pointer; transition: border-color .15s, background .15s; }
.ar-option:has(input:checked) { border-color: var(--green); background: var(--green-l); }
.ar-option:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.ar-option input { margin: 0.2rem 0 0; accent-color: var(--green); }
.ar-option span { display: grid; gap: 0.15rem; }
.ar-option small { font-size: 0.8rem; color: var(--muted); }
.ar-panel { border: 0; margin: 0; padding: 0; min-width: 0; }
.ar-panel[hidden] { display: none !important; }
.ar-balance { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-s); }
.ar-balance li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--rule); font-size: 0.9rem; }
.ar-balance li:last-child { border-bottom: 0; }
.ar-balance li strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-balance em { display: block; font-style: normal; font-size: 0.78rem; color: var(--muted); }
.ar-balance .is-total { background: var(--surf); font-weight: 600; }
.ar-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.6rem; margin: 0.4rem 0 0; }
.ar-terms div { padding: 0.75rem 0.9rem; border: 1px dashed var(--rule); border-radius: var(--r-s); }
.ar-terms small { display: block; font-size: 0.74rem; color: var(--muted); }
.ar-terms strong { font-variant-numeric: tabular-nums; }
.ar-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.ar-plan-grid [hidden] { display: none !important; }
@media (max-width: 640px) { .ar-plan-grid { grid-template-columns: 1fr; } }
.ar-preview { margin: 0.9rem 0 0.4rem; padding: 0.85rem 1rem; background: var(--surf); border-radius: var(--r-s); }
.ar-preview-head { margin: 0 0 0.4rem; font-size: 0.86rem; font-weight: 600; }
.ar-preview-head.is-off { color: var(--red); margin: 0; }
.ar-preview-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.3rem 1.2rem; font-size: 0.86rem; }
.ar-preview-list li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.25rem 0; border-bottom: 1px dashed var(--rule); }
.ar-preview-list strong { font-variant-numeric: tabular-nums; }
.ar-preview-list .is-more { color: var(--muted); border-bottom: 0; }

/* Billing proposals (admin and portal) */
.bp-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.bp-usage { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0.2rem 0 1rem; padding: 0.8rem 0.95rem; background: var(--blue-l); color: var(--ink); border-radius: var(--r-s); font-size: 0.88rem; line-height: 1.5; }
.bp-usage i { color: var(--blue); margin-top: 0.2rem; }
.bp-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0.9rem; }
.bp-option { display: grid; gap: 0.6rem; align-content: start; padding: 0.95rem; border: 1.5px solid var(--rule); border-radius: var(--r); background: #fff; }
.bp-option[data-type="retainer"] { border-top: 3px solid var(--green); }
.bp-option[data-type="hourly"] { border-top: 3px solid var(--blue); }
.bp-option .edit-field { margin: 0; }
.bp-option-head { display: flex; align-items: center; gap: 0.6rem; }
.bp-option-head strong { flex: 1; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bp-option-head select { padding: 0.35rem 0.6rem; border: 1.5px solid var(--rule); border-radius: 4px; font: inherit; font-size: 0.85rem; }
.bp-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.bp-fields[hidden] { display: none !important; }
.bp-fields label { font-size: 0.7rem !important; }
.bp-estimate { margin: 0; min-height: 1.2em; font-size: 0.82rem; font-weight: 600; color: var(--green); }
.bp-add { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1rem; }
.bp-add small { color: var(--muted); font-size: 0.8rem; }

.bp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 0.4rem; }
.bp-card { position: relative; display: flex; flex-direction: column; gap: 0.55rem; padding: 1.2rem 1.15rem 1.1rem; border: 1.5px solid var(--rule); border-radius: var(--r); background: #fff; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
label.bp-card { cursor: pointer; }
label.bp-card:hover { border-color: var(--green); box-shadow: var(--shadow); }
.bp-card:has(input:checked), .bp-card.is-chosen { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-l), var(--shadow); }
.bp-card.is-dim { opacity: 0.55; }
.bp-card-kind { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bp-card-kind .chip { margin-left: auto; }
.bp-card-title { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.2; }
.bp-card-price { font-family: var(--f-display); font-size: 1.7rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bp-card-price small { font-family: var(--f-body); font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.bp-card-terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.86rem; }
.bp-card-terms li::before { content: '\2713'; margin-right: 0.45rem; color: var(--green); font-weight: 700; }
.bp-card-details { margin: 0; font-size: 0.84rem; color: var(--muted); }
.bp-card-estimate { display: grid; gap: 0.1rem; margin-top: auto; padding-top: 0.7rem; border-top: 1px dashed var(--rule); }
.bp-card-estimate small { font-size: 0.74rem; color: var(--muted); }
.bp-card-estimate strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.bp-card-estimate em { font-style: normal; font-size: 0.8rem; color: var(--muted); }
.bp-card-estimate em.is-less { color: var(--green); font-weight: 600; }
.bp-card-estimate em.is-more { color: var(--red); }
.bp-card-pick { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.4rem; padding: 0.55rem; border-radius: var(--r-s); background: var(--surf); font-weight: 600; font-size: 0.88rem; }
.bp-card-pick input { width: 17px; height: 17px; margin: 0; accent-color: var(--green); }
.bp-card:has(input:checked) .bp-card-pick { background: var(--green); color: #fff; }
.bp-other summary { cursor: pointer; font-weight: 600; list-style: none; }
.bp-other summary::-webkit-details-marker { display: none; }
.bp-other summary i { margin-right: 0.4rem; color: var(--muted); }
.bp-other[open] summary { margin-bottom: 0.8rem; }
@media (max-width: 640px) { .bp-fields { grid-template-columns: 1fr; } }
.bp-card-price { font-size: clamp(1.25rem, 1.9vw, 1.55rem); white-space: nowrap; }
.bp-card-price small { display: block; margin-top: 0.15rem; white-space: normal; }
.bp-best { justify-self: start; margin: 0.25rem 0 0.1rem; }

/* Payment arrangements: requests and write-offs */
.ar-writeoff { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin: 0 0 1.2rem; padding: 1rem 1.15rem; border: 1.5px solid var(--green); border-radius: var(--r); background: var(--green-l); }
.ar-writeoff > i { font-size: 1.4rem; color: var(--green); }
.ar-writeoff div { display: grid; gap: 0.2rem; font-size: 0.88rem; }
.ar-writeoff form { margin: 0; }
@media (max-width: 760px) { .ar-writeoff { grid-template-columns: 1fr; } }
.ar-request-form { display: grid; gap: 0.8rem; padding: 1rem; margin-bottom: 1rem; background: var(--surf); border-radius: var(--r-s); }
.ar-request-form .ar-choice { margin: 0; }
.ar-request-form .ar-option { background: #fff; }
.ar-request-lead { margin: 0; font-size: 0.9rem; }
.ar-request-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.ar-request-grid .edit-field, .ar-request-form > .edit-field { margin: 0; }
.ar-request-grid small { display: block; margin-top: 0.3rem; font-size: 0.75rem; color: var(--muted); }
@media (max-width: 640px) { .ar-request-grid { grid-template-columns: 1fr; } }
.ar-presets { display: flex; gap: 0.35rem; margin-top: 0.4rem; }
.ar-presets[hidden] { display: none; }
.ar-presets button { padding: 0.2rem 0.55rem; border: 1px solid var(--rule); border-radius: 999px; background: #fff; font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.ar-presets button:hover { border-color: var(--green); color: var(--green); }
.ar-settle { align-items: flex-start !important; font-weight: 500 !important; font-size: 0.88rem !important; }
.ar-settle input { margin-top: 0.15rem; }
.ar-settle em { font-style: normal; color: var(--muted); }
.ar-request-sum { margin: 0; font-weight: 600; font-size: 0.88rem; color: var(--green); }
.ar-request-form .btn-save { justify-self: start; }
.ar-requests { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ar-req { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.8rem; align-items: center; padding: 0.7rem 0.9rem; border: 1px solid var(--rule); border-radius: var(--r-s); background: #fff; }
.ar-req.is-late { border-color: #f0c9c5; background: var(--red-l); }
.ar-req.is-paid { background: var(--paper); }
.ar-req form { margin: 0; }
.ar-req-main { display: grid; gap: 0.15rem; min-width: 0; }
.ar-req-main strong { font-size: 0.9rem; }
.ar-req-main span, .ar-req-main em { font-size: 0.8rem; color: var(--muted); }
.ar-ask-lead { margin: 0 0 0.8rem; font-size: 0.98rem; line-height: 1.55; }
.ar-ask-q { margin: 0.4rem 0 0.7rem; font-weight: 600; }
.pt-tiles.ar-portal-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .pt-tiles.ar-portal-tiles { grid-template-columns: 1fr; } }
.ar-first { display: grid; gap: 0.2rem; margin-top: 0.9rem; padding: 0.85rem 1rem; border-left: 4px solid var(--amber); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--amber-l); }
.ar-first small { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ar-first strong { font-size: 1.05rem; }
.ar-first span { font-size: 0.86rem; }
.ar-option small span { display: inline; }
.ar-request-fields { display: grid; gap: 0.8rem; }
.ar-request-fields .ar-choice, .ar-request-fields .edit-field { margin: 0; }


/* ── Feature requests (admin and portal): what it does on the left, the price as a navy ticket on the right ── */
.fr-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.fr-section { margin: 1.4rem 0 0.7rem; font-family: var(--f-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.fr-section:first-of-type { margin-top: 0.2rem; }
.fr-icon { background: var(--amber-l) !important; color: #8a5a00 !important; }
.fr-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r); background: #fff; box-shadow: var(--shadow); animation: rise .45s var(--ease) both; }
.fr-card-main { position: relative; padding: clamp(1.2rem, 3vw, 1.8rem); }
.fr-card-main::before { content: ''; position: absolute; left: 0; top: 0; width: 44px; height: 3px; background: var(--amber); }
.fr-card-for { margin: 0 0 0.5rem; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.fr-card-for i { margin-right: 0.3rem; color: var(--green); }
.fr-card-main h2 { margin: 0 0 0.8rem; font-family: var(--f-display); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.fr-card-what { max-width: 68ch; font-size: 0.94rem; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.fr-ticket { min-width: 0; display: grid; align-content: start; gap: 1rem; padding: clamp(1.2rem, 3vw, 1.6rem); background: radial-gradient(130% 80% at 100% 0%, rgba(12,80,26,0.45), transparent 60%), var(--navy); color: #fff; }
.fr-ticket dl { display: grid; gap: 0.5rem; margin: 0; }
.fr-ticket dl div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px dashed rgba(255,255,255,0.16); }
.fr-ticket dt { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.fr-ticket dd { margin: 0; white-space: nowrap; font-family: var(--f-mono); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.fr-ticket-price { display: grid; gap: 0.15rem; margin: 0; }
.fr-ticket-price small { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.fr-ticket-price strong { font-family: var(--f-display); font-size: clamp(1.35rem, 2.1vw, 1.7rem); white-space: nowrap; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fr-ticket-price span { font-size: 0.78rem; color: rgba(255,255,255,0.6); }
.fr-ticket-by { margin: 0; padding-top: 0.8rem; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem; color: rgba(255,255,255,0.8); }
.fr-ticket-by i { margin-right: 0.35rem; color: var(--amber); }
.fr-answer { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; margin-top: 1.2rem; align-items: start; }
.fr-answer .form-card { margin: 0; }
.fr-answer h2 { display: flex; align-items: center; gap: 0.5rem; }
.fr-answer h2 i { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; font-size: 0.8rem; }
.fr-answer p { margin: 0 0 0.9rem; font-size: 0.88rem; color: var(--muted); }
.fr-answer p strong { color: var(--ink); }
.fr-yes { border-top: 3px solid var(--green); }
.fr-yes h2 i { background: var(--green-l); color: var(--green); }
.fr-no { border-top: 3px solid var(--rule-2); background: var(--paper); }
.fr-no h2 i { background: var(--red-l); color: var(--red); }
.fr-price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fr-sum { margin: 0.9rem 0 0; padding: 0.6rem 0.8rem; border-radius: var(--r-s); background: var(--surf); font-size: 0.86rem; }
.fr-sum:empty { display: none; }
.fr-reason { color: #8a5a00 !important; font-weight: 600; }
.fr-reason i { margin-right: 0.25rem; }
.wa-client-search { position: relative; margin-top: 0.6rem; max-width: 26rem; }
.wa-client-search i { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); font-size: 0.8rem; color: var(--muted); pointer-events: none; }
.form-card .wa-client-search input[type="search"] { width: 100%; padding: 0.55rem 0.9rem 0.55rem 2.2rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); font: inherit; font-size: 0.86rem; }
.form-card .wa-client-search input[type="search"]:focus { outline: none; border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px var(--green-l); }
.wa-offer { margin-left: auto; font-size: 0.78rem; font-weight: 600; color: var(--green); text-decoration: none; white-space: nowrap; }
.wa-offer:hover { text-decoration: underline; }
@media (max-width: 860px) {
    .fr-card, .fr-answer, .fr-price-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Terminal (System → Terminal): a navy console with ttyd framed inside ── */
.tm-console { position: relative; overflow: hidden; border-radius: var(--r); background: radial-gradient(120% 90% at 0% 0%, rgba(12,80,26,0.38), transparent 55%), #0a1628; color: #e4ebe6; box-shadow: 0 1px 0 rgba(13,31,18,0.05), 0 24px 48px -28px rgba(10,22,40,0.75); border: 1px solid #0a1628; }
.tm-console::before { content: ''; position: absolute; left: 0; top: 0; width: 44px; height: 3px; background: var(--amber); z-index: 1; }
.tm-bar { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; min-height: 46px; padding: 0.55rem 0.9rem 0.55rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.08); font-family: var(--f-mono); font-size: 0.74rem; }
.tm-state { display: inline-flex; align-items: center; gap: 0.45rem; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem; font-weight: 600; }
.tm-state span { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tm-state.is-live { color: #4cc26a; }
.tm-state.is-live span { box-shadow: 0 0 0 4px rgba(76,194,106,0.18); animation: st-pulse 1.8s ease-in-out infinite; }
.tm-state.is-locked { color: var(--amber); }
.tm-state.is-off { color: #8696aa; }
.tm-where { min-width: 0; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-where span { color: rgba(255,255,255,0.5); }
.tm-actions { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }
.tm-actions form { margin: 0; }
.tm-clock { margin-right: 0.4rem; color: rgba(255,255,255,0.55); white-space: nowrap; }
.tm-clock time { color: var(--amber); font-variant-numeric: tabular-nums; }
.tm-clock.is-over { color: var(--amber); }
.tm-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.38rem 0.7rem; border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-s); background: transparent; color: #fff; font: 500 0.74rem var(--f-body); text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.tm-btn:hover { border-color: var(--amber); color: var(--amber); }
.tm-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.tm-screen { position: relative; height: max(420px, calc(100dvh - 300px - var(--tab-h))); padding: 0.35rem 0 0 0.35rem; }
.tm-screen iframe { display: block; width: 100%; height: 100%; border: 0; background: #0a1628; }
.tm-down { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.6rem; padding: 2rem; text-align: center; background: #0a1628; }
.tm-down[hidden] { display: none; }
.tm-down i { font-size: 1.8rem; color: var(--amber); }
.tm-down h2, .tm-gate h2, .tm-setup h2 { margin: 0; font-family: var(--f-display); font-size: 1.25rem; font-weight: 800; color: #fff; }
.tm-down p, .tm-gate p, .tm-setup p { max-width: 54ch; margin: 0; font-size: 0.88rem; line-height: 1.55; color: rgba(255,255,255,0.68); }
.tm-console code { padding: 0.08rem 0.35rem; border-radius: 4px; background: rgba(255,255,255,0.08); color: #fff; font-family: var(--f-mono); font-size: 0.82em; }
.tm-foot { margin-top: 0.7rem; }
.tm-foot kbd { padding: 0 0.3rem; border: 1px solid var(--rule-2); border-radius: 4px; font-family: var(--f-mono); font-size: 0.8em; }

.tm-gate-body { display: grid; justify-items: center; gap: 0.75rem; padding: clamp(2.2rem, 7vw, 4rem) 1.2rem; text-align: center; }
.tm-gate-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(255,180,0,0.12); color: var(--amber); font-size: 1.2rem; box-shadow: inset 0 0 0 1px rgba(255,180,0,0.3); }
.tm-code { width: min(15rem, 100%); margin-top: 0.3rem; padding: 0.75rem 1rem; border: 1.5px solid rgba(255,255,255,0.16); border-radius: var(--r); background: rgba(255,255,255,0.05); color: #fff; font: 600 1.45rem var(--f-mono); letter-spacing: 0.28em; text-align: center; caret-color: var(--amber); transition: border-color .15s, background .15s; }
.tm-code::placeholder { color: rgba(255,255,255,0.22); }
.tm-code:focus { outline: none; border-color: var(--amber); background: rgba(255,255,255,0.08); }

.tm-setup-body { display: grid; gap: 0.85rem; padding: clamp(1.4rem, 4vw, 2.2rem); }
.tm-steps { list-style: none; counter-reset: tm; display: grid; gap: 0.55rem; margin: 0.3rem 0 0; padding: 0; }
.tm-steps li { counter-increment: tm; display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: 0.15rem 0.6rem; font-size: 0.86rem; color: rgba(255,255,255,0.8); }
.tm-steps li::before { content: counter(tm, decimal-leading-zero); grid-row: span 2; font-family: var(--f-mono); font-size: 0.74rem; color: var(--amber); padding-top: 0.12rem; }
.tm-steps li > code { justify-self: start; max-width: 100%; overflow-wrap: anywhere; padding: 0.4rem 0.6rem; }
.tm-steps li > code::before { content: '$ '; color: #4cc26a; }

@media (max-width: 760px) {
    .tm-bar { gap: 0.5rem 0.7rem; }
    .tm-where span { display: none; }
    .tm-actions { width: 100%; margin-left: 0; }
    .tm-clock { margin-right: auto; }
    .tm-screen { height: max(380px, calc(100dvh - 290px - var(--tab-h))); }
}
@media (prefers-reduced-motion: reduce) { .tm-state.is-live span { animation: none; } }

/* ==========================================================================
   Figures and phones (portal and admin)
   ========================================================================== */

/* Big numbers in the body face: tabular, tight, and a zero that reads as one */
.pt-tile strong, .sp-price strong, .stat-card .stat-num, .ledger-cell strong, .attn-list strong, .cond-date strong,
.pj-readiness-figure strong, .av-item-date strong, .mg-stats dd, .mg-date strong, .dx-pulse strong, .dx-counts dd,
.bk-date b, .bk-balance, .ar-card-next strong, .bp-card-price, .ar-hero .dx-pulse strong, .db-tile strong, .wt-tile strong {
    font-family: var(--f-figure); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums;
}

@media (max-width: 720px) {
    /* Page headers: the top bar names the page, so the hero can be compact */
    .page-header h1, .mg-hero h1 { font-size: clamp(1.15rem, 5.4vw, 1.45rem); line-height: 1.14; letter-spacing: -0.005em; overflow-wrap: anywhere; }
    /* Titles people write (a ticket's subject) run long */
    .page-header h1.is-long { font-size: 1.1rem; line-height: 1.25; }
    .page-header h1 > i:first-child { font-size: 0.85em; }
    .page-header { gap: 0.8rem; }

    /* Stacked tables as cards: title and figure on top, details as compact lines, status beside them, actions last */
    .bookings-table.is-stack tbody tr:not(.is-subline):has(> td.cell-title) {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.9rem; row-gap: 0.2rem; align-items: start; padding: 0.9rem 1rem;
    }
    .bookings-table.is-stack tr:has(> td.cell-title) > td { grid-column: 1; padding: 0; min-height: 0; font-size: 0.84rem; }
    /* A detail line: its label, then whatever the cell holds, flowing as text */
    .bookings-table.is-stack tr:has(> td.cell-title) > td[data-label]:not(.cell-title):not(.cell-figure):not(.cell-status) { display: block; color: var(--ink); line-height: 1.45; padding-left: 4.95rem; }
    /* The label hangs in the margin, so a wrapped value lines up under itself */
    .bookings-table.is-stack tr:has(> td.cell-title) > td[data-label]:not(.cell-title):not(.cell-figure):not(.cell-status)::before { position: static; display: inline-block; width: 4.4rem; margin: 0 0.55rem 0 -4.95rem; vertical-align: 0.08em; top: auto; }
    .bookings-table.is-stack tr:has(> td.cell-title) > td[data-label] > :is(span, small, a, em, div):not(.chip):not(.pt-status):not(.btn) { display: inline; margin-left: 0.35rem; }
    .bookings-table.is-stack tr:has(> td.cell-title) > td[data-label] > :is(span, small, a, em, div):first-child { margin-left: 0; }
    .bookings-table.is-stack tr:has(> td.cell-title) > td.cell-title > :is(span, small):not(.chip) { display: inline; margin-left: 0.4rem; font-weight: 400; }
    .bookings-table.is-stack tr:has(> td.cell-title) > td .sub { display: inline; margin-left: 0.35rem; }
    .bookings-table.is-stack td.cell-title { grid-row: 1; font-size: 1rem !important; font-weight: 600; margin-bottom: 0.25rem; }
    .bookings-table.is-stack td.cell-title::before, .bookings-table.is-stack td.cell-figure::before, .bookings-table.is-stack td.cell-status::before { display: none; }
    .bookings-table.is-stack td.cell-figure { grid-column: 2 !important; grid-row: 1; text-align: right !important; font-family: var(--f-figure); font-weight: 700; font-size: 1rem !important; white-space: nowrap; }
    .bookings-table.is-stack td.cell-figure .sub { display: block !important; margin: 0.1rem 0 0 !important; font-weight: 500; font-size: 0.74rem; }
    .bookings-table.is-stack td.cell-status { grid-column: 2 !important; grid-row: 2 / span 3; justify-self: end; text-align: right !important; display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
    .bookings-table.is-stack tr:not(:has(> td.cell-figure)) > td.cell-status { grid-row: 1; }
    .bookings-table.is-stack tr:has(> td.cell-title) > td.cell-actions { grid-column: 1 / -1; display: flex; margin-top: 0.55rem; }
    .bookings-table.is-stack tr:has(> td.cell-title) > td.cell-actions .action-btns { display: flex; flex: 1; flex-wrap: wrap; }
    .bookings-table.is-stack tr:has(> td.cell-title) > td.cell-actions .btn, .bookings-table.is-stack tr:has(> td.cell-title) > td.cell-actions form { flex: 1 1 auto; justify-content: center; }
    .bookings-table.is-stack tr:has(> td.cell-title) > td.cell-actions form .btn { width: 100%; }
}

/* Summary strips: the body face is narrower than Syne, so the figures can be bigger */
.ledger-cell strong { font-size: min(1.75rem, 12cqi); }

/* File pickers: a soft drop area with a pill button, not the browser's grey box */
input[type=file] { width: 100%; max-width: 100%; padding: 0.5rem; border: 1.5px dashed var(--rule); border-radius: var(--r-s); background: var(--paper); color: var(--muted); font: inherit; font-size: 0.85rem; cursor: pointer; }
input[type=file]:hover { border-color: var(--green); }
input[type=file]::file-selector-button { margin-right: 0.75rem; padding: 0.5rem 0.95rem; border: 0; border-radius: 999px; background: var(--green-l); color: var(--green); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }

@media (max-width: 720px) {
    /* Columns for desktop only (a client's sort order) */
    .bookings-table.is-stack .hide-sm { display: none !important; }
    /* Selecting rows for bulk actions is desk work: the select boxes stay on wider screens */
    .bookings-table.is-stack td.cell-check, .bookings-table.is-stack thead th:has(> input[type=checkbox]) { display: none !important; }
}

.ar-interest { margin-top: 0.7rem; }
.ar-interest[hidden] { display: none !important; }
.ar-terms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.86rem; }
.ar-terms-list li { display: flex; gap: 0.6rem; align-items: baseline; }
.ar-terms-list i { width: 1rem; color: var(--muted); }
.ar-breach { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin: 0 0 1.2rem; padding: 1rem 1.15rem; border: 1.5px solid #f0c9c5; border-radius: var(--r); background: var(--red-l); }
.ar-breach > i { font-size: 1.3rem; color: var(--red); }
.ar-breach div { display: grid; gap: 0.2rem; font-size: 0.88rem; }
.ar-breach strong.ar-breach-figure { font-family: var(--f-figure); font-size: 1.3rem; letter-spacing: -0.02em; color: var(--red); }
.ar-breach form { margin: 0; }
.ar-breach-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 760px) { .ar-breach { grid-template-columns: 1fr; } }

.btn.is-disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.ar-locked { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.ar-locked i { margin-right: 0.25rem; }

/* WhatsApp messages linked to an invoice, quotation or arrangement */
.wa-linked-card { margin-top: 1.4rem; }
.ar-side .wa-linked-card { margin-top: 0; }
.wa-linked-card h2 i { margin-right: 0.3rem; }
.wa-linked { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.wa-linked-item { display: grid; gap: 0.2rem; padding: 0.6rem 0.8rem; border-radius: 8px; background: #fff; border: 1px solid var(--rule); color: inherit; text-decoration: none; border-left: 3px solid #25d366; }
.wa-linked-item.is-us { background: #f1fcef; }
.wa-linked-item:hover { border-color: #25d366; }
.wa-linked-meta { font-size: 0.74rem; color: var(--muted); }
.wa-linked-text { font-size: 0.88rem; white-space: pre-line; overflow-wrap: anywhere; }

/* Send later: a button that opens a small panel to pick the time */
.send-later { position: relative; display: inline-block; }
.send-later > summary { list-style: none; cursor: pointer; }
.send-later > summary::-webkit-details-marker { display: none; }
.send-later > summary.is-set { background: var(--amber-l); color: #8a5600; border-color: #f3dc9b; }
.send-later-panel { position: absolute; z-index: 30; top: calc(100% + 0.4rem); right: 0; width: min(19rem, 86vw); display: grid; gap: 0.6rem; padding: 0.95rem; background: #fff; color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: 0 18px 40px -16px rgba(13,31,18,0.45); text-align: left; }
.send-later-panel p { margin: 0; font-size: 0.85rem; line-height: 1.45; }
.send-later-panel form { display: grid; gap: 0.4rem; margin: 0; }
.send-later-panel label { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.send-later-panel input { width: 100%; padding: 0.55rem 0.65rem; border: 1.5px solid var(--rule); border-radius: 6px; font: inherit; font-size: 0.9rem; }
.send-later-panel .btn { justify-content: center; }
.send-later-panel > small, .send-later-error { font-size: 0.74rem; color: var(--muted); }
.send-later-error { color: var(--red); }
@media (max-width: 720px) {
    .send-later-panel { position: fixed; z-index: 60; left: 0; right: 0; top: auto; bottom: 0; width: auto; border-radius: 16px 16px 0 0; padding: 1.1rem 1rem calc(1.1rem + env(safe-area-inset-bottom)); animation: sheet .22s var(--ease); }
    .send-later[open]::before { content: ''; position: fixed; inset: 0; z-index: 59; background: rgba(10,22,40,0.45); }
    .send-later-panel input { font-size: 16px; }
    .send-later-panel .btn { min-height: 44px; }
}
/* In a dark page header, the panel keeps its own dark-on-light text */
.page-header .send-later-panel p { color: var(--ink) !important; }
.page-header .send-later-panel small:not(.send-later-error), .page-header .send-later-panel label { color: var(--muted) !important; }
.page-header .send-later-panel a:not(.btn), .page-header .send-later-panel .link-button { color: var(--green); }
@media (max-width: 720px) { body:has(.send-later[open]) .ai-fab { display: none; } }

/* ── Change log: admin project page and the client's "What's new" ───────── */
.pj-tabs small.is-alert { background: var(--amber); border-color: var(--amber); color: var(--navy); font-weight: 700; }
.chg-intro h2 { margin-bottom: 0.15rem; }
.chg-intro .hint { margin: 0 0 1rem; }
.chg-add { display: grid; gap: 0.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.chg-upload-pick { position: relative; display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1rem; border: 1.5px dashed var(--rule-2); border-radius: var(--r); background: var(--paper); cursor: pointer; transition: border-color .15s, background .15s; }
.chg-upload-pick:hover, .chg-upload-pick:focus-within { border-color: var(--green); background: var(--green-l); }
.chg-upload-pick > i { font-size: 1.3rem; color: var(--green); }
.chg-upload-pick strong { display: block; font-size: 0.9rem; }
.chg-upload-pick small { display: block; font-size: 0.76rem; color: var(--muted); }
.chg-upload-pick code { font-family: var(--f-mono); font-size: 0.72rem; background: #fff; padding: 0 0.25rem; border-radius: 3px; border: 1px solid var(--rule); }
.chg-upload-pick input[type=file] { margin-left: auto; max-width: 15rem; font-size: 0.78rem; }
.chg-upload-options { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.6rem; }
.chg-upload-options .btn { margin-left: auto; }
.chg-fields { display: grid; grid-template-columns: 11rem 9rem minmax(0, 1fr); gap: 0.6rem 0.8rem; margin-bottom: 0.6rem; }
.chg-fields .chg-wide { grid-column: 1 / -1; }
.chg-fields textarea { font-family: var(--f-mono); font-size: 0.82rem; line-height: 1.5; }

.chg-log { list-style: none; margin: 1rem 0 0; padding: 0; }
.chg-day { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 1.2rem; padding-bottom: 1.1rem; }
.chg-day::before { content: ''; position: absolute; left: calc(6.5rem + 0.6rem); top: 0.55rem; bottom: 0; width: 2px; background: var(--rule); }
.chg-day:last-child::before { bottom: 1.1rem; }
.chg-date { grid-row: span 99; margin: 0; padding-top: 0.15rem; font-family: var(--f-mono); font-size: 0.74rem; font-weight: 500; color: var(--muted); text-align: right; }
.chg-entry { position: relative; margin-bottom: 0.7rem; padding: 0.85rem 1rem 0.9rem; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); }
.chg-entry::before { content: ''; position: absolute; left: -1.05rem; top: 1.05rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #fff; border: 2px solid var(--rule-2); }
.chg-entry.is-latest { border-color: var(--green); box-shadow: 0 10px 28px -20px rgba(12,80,26,0.6); }
.chg-entry.is-latest::before { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 4px var(--green-l); }
.chg-entry.is-waiting { border-left: 3px solid var(--amber); }
.chg-entry.is-waiting::before { background: var(--amber); border-color: var(--amber); }
.chg-entry.is-hidden { background: var(--paper); border-style: dashed; }
.chg-entry.is-hidden .chg-body { opacity: 0.7; }
.chg-entry:target { animation: chg-flash 1.6s var(--ease); }
@keyframes chg-flash { from { box-shadow: 0 0 0 4px var(--amber); } to { box-shadow: 0 0 0 4px transparent; } }
.chg-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.chg-head h3 { margin: 0; font-family: var(--f-display); font-size: 1rem; font-weight: 800; line-height: 1.3; }
.chg-version { font-family: var(--f-mono); font-size: 0.7rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--navy); color: var(--amber); }
.chg-tools { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.chg-body { margin-top: 0.4rem; font-size: 0.88rem; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.chg-body > :first-child { margin-top: 0; }
.chg-body > :last-child { margin-bottom: 0; }
.chg-body h1, .chg-body h2, .chg-body h3, .chg-body h4 { margin: 0.8rem 0 0.25rem; font-family: var(--f-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.chg-body ul, .chg-body ol { margin: 0.2rem 0; padding-left: 1.2rem; }
.chg-body li { margin: 0.15rem 0; }
.chg-body li::marker { color: var(--muted); }
.chg-body p { margin: 0.35rem 0; }
.chg-body code { font-family: var(--f-mono); font-size: 0.8em; padding: 0.05rem 0.3rem; border-radius: 3px; background: var(--surf); }
.chg-body pre { padding: 0.6rem 0.8rem; border-radius: var(--r-s); background: var(--surf); overflow-x: auto; }
.chg-body pre code { padding: 0; background: none; }
.chg-body a { color: var(--green); }
.chg-body blockquote { margin: 0.4rem 0; padding-left: 0.8rem; border-left: 3px solid var(--rule); color: var(--muted); }

.chg-thread { list-style: none; margin: 0.8rem 0 0; padding: 0.7rem 0 0; border-top: 1px solid var(--rule); display: grid; gap: 0.5rem; }
.chg-msg { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: var(--r-s); background: var(--surf); font-size: 0.84rem; }
.chg-msg.is-us { justify-self: end; background: var(--green-l); }
.chg-msg.is-waiting { box-shadow: inset 3px 0 0 var(--amber); }
.chg-msg-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0; font-size: 0.74rem; color: var(--muted); }
.chg-msg-meta strong { color: var(--ink); font-size: 0.8rem; }
.chg-msg-body { margin: 0.25rem 0 0; white-space: pre-line; line-height: 1.5; overflow-wrap: anywhere; }
.chg-reaction { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.chg-reaction.is-good { background: var(--green-l); color: var(--green); }
.chg-reaction.is-problem { background: var(--red-l); color: var(--red); }

.chg-feedback { margin-top: 0.8rem; }
.chg-feedback > summary { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; list-style: none; padding: 0.35rem 0.8rem; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--green); background: #fff; transition: border-color .15s, background .15s; }
.chg-feedback > summary::-webkit-details-marker { display: none; }
.chg-feedback > summary:hover { border-color: var(--green); background: var(--green-l); }
.chg-feedback[open] > summary { margin-bottom: 0.6rem; }
.chg-reactions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.5rem; padding: 0; border: 0; }
.chg-reaction-pick input { position: absolute; opacity: 0; pointer-events: none; }
.chg-reaction-pick span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border: 1.5px solid var(--rule); border-radius: 999px; cursor: pointer; font-size: 0.84rem; font-weight: 600; color: var(--muted); background: #fff; transition: all .15s; }
.chg-reaction-pick span:hover { color: var(--ink); border-color: var(--rule-2); }
.chg-reaction-pick input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }
.chg-reaction-pick.is-good input:checked + span { color: var(--green); border-color: var(--green); background: var(--green-l); }
.chg-reaction-pick.is-problem input:checked + span { color: var(--red); border-color: var(--red); background: var(--red-l); }
.chg-feedback textarea, .chg-respond textarea, .chg-entry textarea[id^="chg-reply-"] { width: 100%; padding: 0.55rem 0.7rem; border: 1.5px solid var(--rule); border-radius: var(--r-s); font: inherit; font-size: 0.86rem; resize: vertical; background: #fff; }
.chg-feedback textarea:focus, .chg-respond textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(12,80,26,0.1); }
.chg-respond { margin-top: 0.7rem; }
.chg-respond-actions { display: flex; justify-content: flex-end; margin-top: 0.45rem; }
.chg-quiet { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 0.8rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.chg-quiet:hover { color: var(--ink); }

.chg-earlier { margin-top: 0.2rem; }
.chg-earlier > summary { width: fit-content; margin-left: 7.7rem; cursor: pointer; font-size: 0.84rem; font-weight: 600; color: var(--green); }
.chg-earlier > summary small { margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px; background: var(--surf); color: var(--muted); font-family: var(--f-mono); font-size: 0.68rem; }

@media (max-width: 640px) {
    .chg-fields { grid-template-columns: 1fr 1fr; }
    .chg-fields .chg-title { grid-column: 1 / -1; }
    .chg-day { grid-template-columns: minmax(0, 1fr); padding-left: 1.1rem; }
    .chg-day::before { left: 0.3rem; top: 1.6rem; }
    .chg-date { grid-row: auto; text-align: left; margin-bottom: 0.4rem; }
    .chg-entry::before { left: -1.15rem; }
    .chg-msg { max-width: 100%; }
    .chg-upload-pick { flex-wrap: wrap; }
    .chg-upload-pick input[type=file] { margin-left: 0; max-width: 100%; }
    .chg-earlier > summary { margin-left: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .chg-entry:target { animation: none; } }

/* Where a change is (live or sandbox, and the area), and the way to it */
.chg-env, .chg-area { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.08rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.chg-env.is-production { background: var(--green-l); color: var(--green); }
.chg-env.is-sandbox { background: var(--amber-l); color: #8a5600; }
.chg-area { max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: var(--surf); color: var(--ink); font-weight: 600; border: 1px solid var(--rule); }
.chg-area i { color: var(--muted); }
.chg-open { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.75rem; padding: 0.45rem 0.95rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; text-decoration: none; color: #fff; background: var(--green); box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18); transition: background .15s, transform .15s; max-width: 100%; overflow-wrap: anywhere; }
.chg-open:hover { background: var(--green-d); }
.chg-open:active { transform: translateY(1px); }
.chg-open:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.chg-open.is-sandbox { color: var(--navy); background: var(--amber); }
.chg-open.is-sandbox:hover { background: #e9a400; }
.chg-open i { font-size: 0.72rem; }
.chg-link-problem { margin: 0.4rem 0 0; padding: 0.35rem 0.6rem; border-radius: var(--r-s); background: var(--amber-l); color: #7a4d00; font-size: 0.78rem; }
.chg-env-pick { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; font-weight: 600; }
.chg-env-pick select { padding: 0.3rem 0.5rem; border: 1px solid var(--rule); border-radius: var(--r-s); font: inherit; font-size: 0.82rem; background: #fff; }