:root{
    --bg:#07111f;
    --bg-soft:#0d1a2e;
    --panel:#0f1d35;
    --panel-2:#132442;
    --line:rgba(152, 182, 255, 0.14);
    --text:#f6f8ff;
    --muted:#8da2c9;
    --accent:#29c3ff;
    --accent-2:#5ef0c0;
    --warning:#ffcc66;
    --danger:#ff7b91;
    --success:#44d39b;
    --shadow:0 24px 60px rgba(0, 0, 0, 0.32);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}

.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;
}

/* iOS Safari counts the collapsing URL bar inside 100vh, so a full-height
   element is taller than the screen and its bottom is cut off. dvh measures the
   space actually visible. The 100vh line stays first as the fallback for
   browsers that do not know dvh. */
body{
    min-height:100vh;
    min-height:100dvh;
    /* Safari inflates text in landscape unless told not to, which silently
       breaks every carefully sized layout on a rotated phone. */
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at top right, rgba(41,195,255,0.18), transparent 28%),
        radial-gradient(circle at bottom left, rgba(94,240,192,0.14), transparent 24%),
        linear-gradient(180deg, #07111f 0%, #091528 100%);
    overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.sidebar-backdrop{
    position:fixed;
    inset:0;
    background:rgba(3, 9, 18, 0.72);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.24s ease;
    z-index:20;
}

.sidebar-backdrop.active{
    opacity:1;
    pointer-events:auto;
}

.app-shell{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    min-height:100vh;
    min-height:100dvh;
    transition:grid-template-columns 0.24s ease;
}

.app-shell.sidebar-hidden{
    grid-template-columns:0 minmax(0,1fr);
}

.sidebar{
    position:sticky;
    top:0;
    height:100vh;
    height:100dvh;
    padding:24px 18px;
    /* Keep the last nav item clear of the iPhone home indicator. */
    padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
    background:rgba(7,17,31,0.92);
    border-right:1px solid var(--line);
    backdrop-filter:blur(14px);
    overflow-y:auto;
    transition:transform 0.24s ease, opacity 0.24s ease;
    z-index:30;
}

.app-shell.sidebar-hidden .sidebar{
    transform:translateX(-110%);
    opacity:0;
    pointer-events:none;
}

.sidebar-close,
.sidebar-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:44px;
    /* Never wrap. min-width:44px minus the 32px of horizontal padding leaves
       about one character of room, so anything that permits mid-word breaking
       turns this into a vertical column of letters. */
    white-space:nowrap;
    flex:0 0 auto;
}

.sidebar-close{
    display:none;
    margin-left:auto;
}

.brand{
    padding:18px 18px 20px;
    border-radius:20px;
    background:linear-gradient(145deg, rgba(41,195,255,0.14), rgba(94,240,192,0.08));
    border:1px solid rgba(255,255,255,0.07);
    box-shadow:var(--shadow);
}

.logo-lockup{
    display:flex;
    align-items:center;
    gap:14px;
}

.brand-mark{
    width:48px;
    height:48px;
    border-radius:16px;
    background:rgba(255,255,255,0.05);
    padding:8px;
    border:1px solid rgba(255,255,255,0.1);
}

.brand h1{
    margin:0;
    font-size:1.16rem;
    letter-spacing:0.02em;
}

.brand p{
    margin:12px 0 0;
    color:var(--muted);
    font-size:0.92rem;
    line-height:1.5;
}

.nav{
    margin-top:24px;
    display:grid;
    gap:8px;
}

.nav-group{
    border:1px solid transparent;
    border-radius:16px;
    overflow:hidden;
}

.nav-group[open]{
    border-color:rgba(152, 182, 255, 0.1);
    background:rgba(255,255,255,0.018);
}

.nav-group > summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 14px;
    color:var(--muted);
    font-size:0.78rem;
    font-weight:800;
    letter-spacing:0.09em;
    text-transform:uppercase;
    cursor:pointer;
    user-select:none;
    list-style:none;
}

.nav-group > summary::-webkit-details-marker{display:none}

.nav-group > summary::after{
    content:"+";
    color:var(--accent);
    font-size:1.05rem;
    line-height:1;
}

.nav-group[open] > summary::after{content:"−"}

.nav-group-links{
    display:grid;
    gap:5px;
    padding:0 7px 8px;
}

.nav > a.nav-home{
    margin-bottom:4px;
}

.nav a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:14px;
    color:var(--muted);
    border:1px solid transparent;
    transition:0.2s ease;
}

.nav a:hover,
.nav a.active{
    color:var(--text);
    background:rgba(41,195,255,0.08);
    border-color:var(--line);
}

.nav small{
    color:inherit;
    opacity:0.7;
}

.sidebar-footer{
    margin-top:24px;
    padding:16px 18px;
    border-radius:18px;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--line);
}

.sidebar-footer strong{
    display:block;
    margin-bottom:6px;
}

.content{
    padding:24px;
    min-width:0;
}

.topbar{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:24px;
    /* Without wrapping, the title and the action buttons keep fighting for one
       row and both overflow instead of stacking. */
    flex-wrap:wrap;
}

.topbar-left{
    display:flex;
    align-items:flex-start;
    gap:14px;
    min-width:0;
}

.top-search{
    flex:1 1 320px;
    max-width:420px;
}

.top-search form{
    margin:0;
    display:flex;
    gap:10px;
    align-items:center;
}

.search-input{
    width:100%;
}

.top-search-submit{
    flex:0 0 auto;
}

/* A flex child refuses to shrink past its content unless told it may. Without
   this the heading and subtitle keep their full width and push out of the bar. */
.page-title{
    min-width:0;
}

.page-title h2{
    margin:0;
    font-size:1.9rem;
    overflow-wrap:anywhere;
}

.page-title p{
    margin:8px 0 0;
    color:var(--muted);
    overflow-wrap:anywhere;
}

.top-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.chip,
.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
    color:var(--muted);
    font-size:0.9rem;
    white-space:nowrap;
}

/* The stage of an exchange order, on the panel somebody watches while money is
   moving. It had no rule at all, so the one state worth noticing read as
   ordinary text. Heavier than a badge on purpose: this is the line that says
   whether the counterparty has paid. */
.status-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.05);
    color:var(--text);
    font-size:0.9rem;
    font-weight:600;
    white-space:nowrap;
}

.status-pill.success{color:#c5ffe8;border-color:rgba(68,211,155,0.4);background:rgba(68,211,155,0.16)}
.status-pill.warning{color:#ffe6a9;border-color:rgba(255,204,102,0.4);background:rgba(255,204,102,0.16)}
.status-pill.danger{color:#ffd0d8;border-color:rgba(255,123,145,0.4);background:rgba(255,123,145,0.16)}
.status-pill.info{color:#cdeeff;border-color:rgba(41,195,255,0.4);background:rgba(41,195,255,0.16)}

.badge.success{color:#c5ffe8;background:rgba(68,211,155,0.12)}
.badge.warning{color:#ffe6a9;background:rgba(255,204,102,0.12)}
.badge.danger{color:#ffd0d8;background:rgba(255,123,145,0.12)}
.badge.info{color:#cdeeff;background:rgba(41,195,255,0.12)}

.button,
button,
input[type="submit"]{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    border:none;
    border-radius:12px;
    padding:11px 16px;
    font-weight:600;
    line-height:1.2;
    cursor:pointer;
    color:#06111f;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
}

a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
    outline:3px solid rgba(94,240,192,0.72);
    outline-offset:3px;
    box-shadow:0 0 0 6px rgba(41,195,255,0.14);
}

a.badge{
    cursor:pointer;
    transition:border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

a.badge:hover{
    border-color:rgba(94,240,192,0.28);
    transform:translateY(-1px);
}

.button.secondary,
button.secondary{
    color:var(--text);
    background:rgba(255,255,255,0.06);
    border:1px solid var(--line);
}

.button.warning,
button.warning{
    color:#231600;
    background:linear-gradient(135deg, #ffd166, #ffb347);
}

.button.danger,
button.danger{
    color:#250913;
    background:linear-gradient(135deg, #ff8fa3, #ff667f);
}

.button.ghost,
button.ghost{
    color:var(--text);
    background:transparent;
    border:1px solid var(--line);
}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap:16px;
    margin-bottom:22px;
}

.profile-top-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap:16px;
    margin-bottom:22px;
}

.card,
.panel{
    background:linear-gradient(180deg, rgba(15,29,53,0.96), rgba(11,24,45,0.98));
    border:1px solid var(--line);
    border-radius:22px;
    padding:22px;
    box-shadow:var(--shadow);
}

/* A stat tile is not a panel.
 *
 * It was taking a panel's proportions -- 22px of padding and a 22px radius,
 * which are right for a box with a table in it -- around a single number. Four
 * of them filled the top of the screen before you reached the work, and on the
 * dashboard there are thirty.
 *
 * The number was 2rem, and 114 of the 207 on the site already overrode that
 * inline, in eight different sizes between 1.05 and 1.4rem. More than half the
 * site had quietly patched its way off the default, which is the default
 * telling you it is wrong. Those overrides still win where a tile holds a name
 * or a domain rather than a figure.
 */
.card{
    padding:15px 17px;
    border-radius:16px;
}

.card > .muted{
    font-size:0.84rem;
    line-height:1.4;
}

/* Names three pages were written against that nothing defined, so they
   rendered as bare boxes: the authenticator vault, the trainee task templates
   and the trainee progress board. Each is pointed at what the rest of the
   portal already uses, rather than becoming a fourth way of drawing a card. */
.content-card{
    padding:18px 20px;
    border-radius:20px;
    border:1px solid var(--line);
    background:linear-gradient(180deg, rgba(15,29,53,0.96), rgba(11,24,45,0.98));
    box-shadow:var(--shadow);
    min-width:0;
}

.muted-label{
    color:var(--muted);
    font-size:0.74rem;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.secondary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:11px 16px;
    border-radius:14px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.05);
    color:var(--text);
    font-size:0.92rem;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
}

.secondary-button:hover{
    border-color:rgba(255,255,255,0.24);
}

.section-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.grid-form{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap:14px;
    align-items:end;
}

.grid-two{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap:16px;
}

/* The box around a one-time code: a label, the code, a countdown and a bar.
   Layout only -- the font belongs on the code itself, not on the container,
   or the muted labels inside it become code too. */
.auth-code-box{
    min-width:0;
}

/* The code, read off the screen and typed somewhere else. Selectable as a
   whole so a double-click takes all six digits and not three. */
.auth-code-box [data-auth-code]{
    user-select:all;
    word-break:break-all;
}

.button-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
}

a.card{
    display:block;
    color:var(--text);
    transition:transform 0.2s ease, border-color 0.2s ease;
}

a.card:hover{
    transform:translateY(-2px);
    border-color:rgba(94,240,192,0.3);
}

.stat-number{
    font-size:1.5rem;
    font-weight:700;
    margin:5px 0 3px;
    line-height:1.25;
}

.muted{color:var(--muted)}
.danger-text{color:var(--danger)}
.success-text{color:var(--success)}

.panel-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.panel-header h3{
    margin:0;
    font-size:1.1rem;
}

.panel-header p{
    margin:8px 0 0;
    color:var(--muted);
}

.progressive-panel details,
.progressive-action,
.connection-settings,
.connection-diagnostics{
    min-width:0;
}

.progressive-summary,
.progressive-action > summary,
.connection-settings > summary,
.connection-diagnostics > summary{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    cursor:pointer;
    list-style:none;
}

.progressive-summary::-webkit-details-marker,
.progressive-action > summary::-webkit-details-marker,
.connection-settings > summary::-webkit-details-marker,
.connection-diagnostics > summary::-webkit-details-marker{
    display:none;
}

.progressive-summary::after,
.progressive-action > summary::after,
.connection-settings > summary::after,
.connection-diagnostics > summary::after{
    content:"Show";
    flex:0 0 auto;
    color:var(--accent);
    font-size:0.82rem;
    font-weight:700;
    padding-top:4px;
}

.progressive-panel details[open] > .progressive-summary,
.progressive-action[open] > summary,
.connection-settings[open] > summary,
.connection-diagnostics[open] > summary{
    margin-bottom:18px;
}

.progressive-panel details[open] > .progressive-summary::after,
.progressive-action[open] > summary::after,
.connection-settings[open] > summary::after,
.connection-diagnostics[open] > summary::after{
    content:"Hide";
}

.progressive-body{
    min-width:0;
}

/* Inline disclosures inside a table row or a card -- "show the raw provider
   response", "edit rate and limits". They keep the browser's own marker, which
   is the right control for a one-line reveal, but without a rule they read as
   ordinary body text and nobody knows they open. */
details:not([class]) > summary{
    cursor:pointer;
    padding:4px 0;
    color:var(--accent);
    font-size:0.88rem;
    font-weight:600;
}

details:not([class])[open] > summary{
    margin-bottom:8px;
}

/* The affordance said "Show" and kept saying it after the section opened. The
   swap to "Hide" was written only for a wrapper class that most pages do not
   use, so on most pages it never fired. */
details[open] > .progressive-summary::after{
    content:"Hide";
}

/* A heading inside a panel that folds. Open, it reads exactly like the
   .panel-header it replaced; closed, it is one line. Folding a section should
   not cost you the ability to see what is in it. */
.fold-section > summary,
.order-section > summary,
.order-fold > summary{
    padding:2px 0;
}

.fold-section[open] > summary,
.order-section[open] > summary{
    margin-bottom:18px;
}

.fold-section > summary h3,
.order-section > summary h3{
    margin:0;
    font-size:1.1rem;
}

.fold-section > summary p,
.order-section > summary p{
    margin:8px 0 0;
    color:var(--muted);
}

/* .field sets display:grid, which a <details> should not inherit -- whether a
   closed fold hides its contents has depended on that in the past. It still
   sits in the grid; grid-column is what does that. */
.order-fold{
    display:block;
}

/* A fold standing in for a labelled field inside a form grid, so the summary
   has to read as the label it replaced. */
.order-fold > summary strong{
    color:#d9e6ff;
    font-size:0.92rem;
    font-weight:600;
}

.connection-settings,
.connection-diagnostics{
    margin-top:14px;
    padding:14px 0 0;
    border-top:1px solid var(--line);
}

.connection-settings > summary,
.connection-diagnostics > summary{
    font-weight:700;
}

.progressive-action{
    margin-top:14px;
    padding:14px 0 0;
    border-top:1px solid var(--line);
}

.progressive-action > summary{
    font-weight:700;
}

/* A queue row holds a fact and a muted line or two under it. Paragraph spacing
   on those lines would trade the width just saved for height. */
.row-note{
    margin-top:4px;
    font-size:0.82rem;
    line-height:1.4;
}

/* Twelve columns at a hard 1460px told people to scroll sideways. Five columns
   share what is there, and the two that carry the most words get the room. */
.order-queue-table{
    width:100%;
    table-layout:auto;
}

.order-queue-table th:nth-child(2),
.order-queue-table td:nth-child(2){
    width:30%;
}

.order-queue-table th:last-child,
.order-queue-table td:last-child{
    white-space:nowrap;
}

/* The review queue: five columns, and the one that carries the decision gets
   the room. Ten columns with three note boxes a row is what it replaced. */
.proof-queue-table{
    width:100%;
    table-layout:auto;
}

.proof-queue-table th:nth-child(3),
.proof-queue-table td:nth-child(3){
    width:26%;
}

.proof-queue-table th:last-child,
.proof-queue-table td:last-child{
    width:24%;
}

/* One note box per row instead of three. Small enough that a row of the queue
   stays a row, and it grows if somebody writes a paragraph. */
.proof-review-form textarea{
    min-height:56px;
}

.table-wrap{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}

.directory-summary-cards{
    margin-bottom:18px;
}

.directory-filter-bar{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap:14px;
    margin-bottom:20px;
    align-items:end;
}

.directory-filter-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.directory-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap:18px;
}

.staff-card{
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(255,255,255,0.03);
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:16px;
    min-width:0;
}

.staff-card-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.staff-code-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:999px;
    padding:7px 12px;
    background:rgba(41,195,255,0.1);
    border:1px solid rgba(41,195,255,0.22);
    color:#dff5ff;
    font-size:0.82rem;
    font-weight:700;
    letter-spacing:0.04em;
    white-space:nowrap;
}

.staff-person{
    display:flex;
    align-items:flex-start;
    gap:14px;
    min-width:0;
}

.staff-avatar-photo,
.staff-avatar-fallback{
    width:56px;
    height:56px;
    border-radius:18px;
    flex:0 0 auto;
}

.staff-avatar-photo{
    object-fit:cover;
    border:1px solid rgba(255,255,255,0.12);
}

.staff-avatar-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:1.1rem;
    background:rgba(77,220,196,0.12);
    color:#dffff7;
}

.staff-person-meta{
    min-width:0;
}

.staff-person-meta h4{
    margin:0 0 6px;
    font-size:1.08rem;
    line-height:1.35;
    overflow-wrap:anywhere;
}

.staff-person-meta .muted{
    line-height:1.45;
    overflow-wrap:anywhere;
}

.staff-chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.staff-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 11px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.04);
    color:#d8e6ff;
    font-size:0.78rem;
    font-weight:600;
}

.staff-chip.success{
    background:rgba(94,240,192,0.12);
    border-color:rgba(94,240,192,0.28);
    color:#dbfff2;
}

.staff-chip.warning{
    background:rgba(255,204,102,0.12);
    border-color:rgba(255,204,102,0.3);
    color:#ffecc5;
}

.staff-chip.muted-chip{
    color:var(--muted);
}

.staff-alert-stack{
    display:grid;
    gap:10px;
}

.staff-metric-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.staff-metric-card,
.staff-activity-block{
    border:1px solid var(--line);
    border-radius:16px;
    padding:12px 14px;
    background:rgba(255,255,255,0.03);
    min-width:0;
}

.staff-metric-label{
    color:var(--muted);
    font-size:0.76rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
}

.staff-metric-value{
    margin-top:8px;
    color:var(--text);
    font-size:1rem;
    font-weight:700;
}

.staff-activity-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.directory-filter-actions .button,
.directory-filter-actions button,
.staff-card-head .button{
    white-space:nowrap;
}

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

    .staff-card-head,
    .staff-person{
        flex-direction:column;
    }

    .staff-metric-grid,
    .staff-activity-grid{
        grid-template-columns:1fr;
    }
}

table{
    width:100%;
    border-collapse:collapse;
}

th,td{
    padding:14px 12px;
    border-bottom:1px solid var(--line);
    text-align:left;
    vertical-align:top;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:normal;
}

th{
    color:#cfe0ff;
    font-size:0.82rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
}

tr:last-child td{border-bottom:none}

.table-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.table-actions form,
.inline-form{
    margin:0;
    display:inline-flex;
}

/* Dashboard focus blocks.
   Everything used to be a card of the same size, so the eye had nowhere to land.
   These three tiers are deliberately different weights: the top one is loud and
   only appears when it has something to say, the middle is quiet and constant,
   and the rest is folded away. */
.focus-block{
    padding:18px 20px;
    border-radius:18px;
    border:1px solid var(--line);
    margin-bottom:16px;
    background:rgba(255,255,255,0.03);
}

.focus-block.focus-danger{
    border-left:4px solid #ff7b91;
    background:rgba(255,123,145,0.07);
}

.focus-block.focus-warning{
    border-left:4px solid #ffcc66;
    background:rgba(255,204,102,0.06);
}

.focus-block.focus-clear{
    border-left:4px solid #44d39b;
    background:rgba(68,211,155,0.05);
}

.focus-head h3{
    margin:0 0 4px;
    font-size:1.15rem;
}

.focus-head p{
    margin:0;
    color:var(--muted);
    font-size:0.9rem;
}

.focus-items{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap:12px;
    margin-top:14px;
}

.focus-item{
    display:grid;
    gap:2px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid var(--line);
    background:rgba(0,0,0,0.18);
    text-decoration:none;
    color:inherit;
    min-width:0;
}

.focus-item:hover{
    border-color:rgba(255,255,255,0.28);
}

.focus-count{
    font-size:1.6rem;
    font-weight:700;
    line-height:1.1;
    font-variant-numeric:tabular-nums;
}

.focus-item.focus-danger .focus-count{color:#ff7b91}
.focus-item.focus-warning .focus-count{color:#ffcc66}
.focus-item.focus-info .focus-count{color:#29c3ff}

.focus-label{
    font-weight:600;
    overflow-wrap:anywhere;
}

.focus-note{
    font-size:0.82rem;
    color:var(--muted);
    overflow-wrap:anywhere;
}

.flow-strip{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap:12px;
    margin-bottom:18px;
}

.flow-item{
    display:grid;
    gap:2px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
    text-decoration:none;
    color:inherit;
    min-width:0;
}

.flow-item:hover{border-color:rgba(255,255,255,0.24)}

.flow-count{
    font-size:1.35rem;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}

.flow-label{font-weight:600; font-size:0.92rem; overflow-wrap:anywhere}
.flow-note{font-size:0.8rem; color:var(--muted); overflow-wrap:anywhere}

/* A panel that folds itself away when it has nothing to report. Open, these
   sections are pages of reassuring zeros; the summary still carries the status
   badge and the count, so folding hides the detail, never the signal. */
.fold-panel{
    margin-bottom:18px;
}

.fold-panel > summary{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    cursor:pointer;
    padding:13px 16px;
    border-radius:14px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
    font-weight:600;
}

.fold-panel > summary:hover{
    border-color:rgba(255,255,255,0.24);
}

.fold-panel[open] > summary{
    margin-bottom:12px;
}

/* The panel inside already carries its own heading and border. */
.fold-panel[open] > .panel{
    margin-bottom:0;
}

/* The count beside a folded heading: how many rows, or what is waiting. Kept
   quiet -- it is a reason to open the section, not a thing to read instead. */

.all-metrics{
    margin-bottom:18px;
}

.all-metrics > summary{
    cursor:pointer;
    padding:11px 14px;
    border-radius:12px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
    font-weight:600;
    color:var(--muted);
}

.all-metrics[open] > summary{
    margin-bottom:14px;
}

.form-grid{
    display:grid;
    /* min() lets a column drop below 220px when the container is narrower than
       that. A bare minmax(min(220px, 100%), 1fr) treats 220px as a hard floor, so on a
       small screen two columns still claim 456px and push the form out of the
       page — which is what made text sit outside its box. */
    grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap:16px;
}

.field{
    display:grid;
    gap:8px;
}

.field label{
    color:#d9e6ff;
    font-size:0.92rem;
}

.field-hint{
    color:var(--muted);
    font-size:0.85rem;
    line-height:1.45;
}

input,
select,
textarea{
    width:100%;
    /* A field smaller than 16px makes iOS Safari zoom the whole page the moment
       it is focused, and it does not zoom back out. Anyone filling a form on an
       iPhone then has to pinch out after every field. */
    font-size:max(16px, 1rem);
    padding:12px 14px;
    border-radius:14px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.04);
    color:var(--text);
    outline:none;
    /* Stop long pasted values — UTRs, wallet addresses — widening the field
       past its container. */
    max-width:100%;
    min-width:0;
}

input:focus,
select:focus,
textarea:focus{
    border-color:rgba(94,240,192,0.5);
    background:rgba(255,255,255,0.06);
}

select{color-scheme:dark}

option{
    background:#132442;
    color:#f6f8ff;
}

textarea{
    min-height:120px;
    resize:vertical;
}

/* The chat composer is a line you type and send, not a form field.
 *
 * It asks for rows="2" and got 120px anyway, because the rule above is written
 * for a correction reason or a review note -- somewhere you write a paragraph.
 * On a 1366x768 screen that made the box you type into 120px while the
 * conversation above it had 129px, so the input was almost as tall as the
 * conversation it belongs to.
 */
.chat-thread-panel .field textarea{
    min-height:64px;
}

input[type="file"]{
    padding:10px 12px;
}

input[type="file"]::file-selector-button{
    margin-right:12px;
    border:none;
    border-radius:10px;
    padding:9px 14px;
    background:rgba(255,255,255,0.08);
    color:var(--text);
    font-weight:600;
    cursor:pointer;
}

input[type="checkbox"]{
    width:auto;
    padding:0;
    accent-color:var(--accent);
}

input[disabled],
textarea[disabled],
select[disabled]{
    opacity:0.68;
    cursor:not-allowed;
}

.field.full{
    grid-column:1 / -1;
}

.stack{
    display:grid;
    gap:18px;
}

.form-section{
    display:grid;
    gap:14px;
}

.form-section + .form-section{
    padding-top:18px;
    border-top:1px solid var(--line);
}

.form-section h4{
    margin:0;
    font-size:1rem;
}

.form-section p{
    margin:6px 0 0;
    color:var(--muted);
    font-size:0.92rem;
}

.inline-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.profile-status-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.profile-summary-card{
    display:grid;
    gap:14px;
    min-width:0;
    align-content:start;
}

.profile-summary-head{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.profile-avatar{
    width:74px;
    height:74px;
    border-radius:22px;
    object-fit:cover;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.05);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    font-weight:700;
    color:var(--text);
    flex-shrink:0;
}

.profile-summary-copy{
    min-width:0;
    display:grid;
    gap:4px;
}

.profile-summary-copy h3,
.profile-summary-copy h4{
    margin:0;
    font-size:1.25rem;
    line-height:1.2;
    word-break:break-word;
}

.profile-summary-value{
    font-size:1.05rem;
    font-weight:600;
    word-break:break-word;
}

.profile-meta-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap:12px;
}

.profile-meta-item{
    display:grid;
    gap:6px;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
    min-width:0;
}

.profile-meta-label{
    color:var(--muted);
    font-size:0.84rem;
}

.profile-meta-value{
    color:var(--text);
    font-size:1rem;
    font-weight:600;
    word-break:break-word;
}

.profile-form-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.profile-evidence-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
}

.profile-evidence-card{
    display:grid;
    gap:12px;
    padding:18px;
    border-radius:18px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
    min-width:0;
}

.profile-file-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.callout{
    padding:15px 16px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.04);
    /* Long references — UTRs, wallet addresses, URLs — have no spaces to break
       at, so without this they run straight through the edge of the box. */
    min-width:0;
    overflow-wrap:anywhere;
}

.callout.info{background:rgba(41,195,255,0.08)}
.callout.success{background:rgba(68,211,155,0.09)}
.callout.warning{background:rgba(255,204,102,0.09)}
.callout.danger{background:rgba(255,123,145,0.09)}

.flash-stack{
    display:grid;
    gap:12px;
    margin-bottom:18px;
}

.flash{
    padding:14px 16px;
    border-radius:16px;
    border:1px solid var(--line);
}

.flash.success{background:rgba(68,211,155,0.09)}
.flash.error{background:rgba(255,123,145,0.1)}
.flash.info{background:rgba(41,195,255,0.08)}
.flash.warning{background:rgba(255,204,102,0.09)}

.nav-badge{
    min-width:22px;
    height:22px;
    padding:0 7px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:0.78rem;
    color:#04111f;
    background:linear-gradient(135deg, var(--warning), #ff7b91);
    opacity:1;
}

.list{
    display:grid;
    gap:12px;
}

/* A list that is a preview of a fuller page -- the panel says so, with a link
   beside it. Bounded so a busy day does not run the panel down the screen;
   everything in it is still reachable, and the rest is one click away. */
.list-preview{
    max-height:min(52vh, 30rem);
    overflow:auto;
    padding-right:4px;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
}

.list-item{
    padding:14px 16px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
}

/* A link that is the whole content of a row should be the whole tap target.
   Left as inline text it was 21px tall inside a 49px row, so on a phone you had
   to hit the words rather than the row. The negative margin lets the link cover
   the row's padding, which changes nothing visually.

   :only-child keeps this away from rows that mix a link with other content,
   where an expanding link would swallow its neighbours. */
.list-item > a:only-child{
    display:flex;
    align-items:center;
    min-height:44px;
    margin:-14px -16px;
    padding:14px 16px;
    border-radius:16px;
}

.list-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
}

.empty-state{
    padding:18px;
    border-radius:16px;
    border:1px dashed var(--line);
    background:rgba(255,255,255,0.03);
    color:var(--muted);
}

.card,
.panel,
.list-item,
.list-row,
.callout,
.flash,
.alert-entry,
.check-card,
.chat-room-link,
.chat-message,
.chat-message-reply,
.brand,
.muted,
.stat-number,
th,
td{
    min-width:0;
    overflow-wrap:break-word;
    word-break:normal;
}

.mobile-stack-table td::before{
    display:none;
}

.list-row > *,
.panel-header > *,
.topbar-left > *,
.page-title,
.page-title p,
.chat-room-meta > *,
.chat-message-head > *{
    min-width:0;
}

.notice-strip{
    display:grid;
    gap:12px;
    margin-bottom:18px;
}

.notice-strip .list-item{
    border-left:3px solid var(--accent);
}

.notice-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:8px;
    color:var(--muted);
    font-size:0.9rem;
}

.alert-tray{
    position:fixed;
    right:20px;
    bottom:20px;
    width:min(360px, calc(100vw - 32px));
    max-height:min(72vh, calc(100vh - 32px));
    border-radius:20px;
    border:1px solid var(--line);
    background:linear-gradient(180deg, rgba(10,21,39,0.97), rgba(8,17,31,0.98));
    box-shadow:var(--shadow);
    z-index:40;
    padding:16px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.alert-tray[hidden]{
    display:none;
}

.alert-tray-header{
    flex:0 0 auto;
    padding-right:78px;
}

.alert-tray-close{
    position:absolute;
    top:14px;
    right:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    padding:0;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.04);
    color:var(--text);
    font-size:1.35rem;
    line-height:1;
    cursor:pointer;
    transition:0.2s ease;
}

.alert-tray-close:hover{
    background:rgba(41,195,255,0.12);
    border-color:rgba(41,195,255,0.32);
}

.alert-list{
    display:grid;
    gap:10px;
    margin-top:12px;
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    padding-right:4px;
}

.alert-entry{
    display:block;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
}

.alert-entry.warning{border-color:rgba(255,204,102,0.35)}
.alert-entry.success{border-color:rgba(68,211,155,0.32)}
.alert-entry.urgent,
.alert-entry.error{border-color:rgba(255,123,145,0.42)}

.alert-entry strong{
    display:block;
    margin-bottom:4px;
}

.alert-entry small{
    display:block;
    margin-top:8px;
    color:var(--muted);
}

.check-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap:12px;
}

.check-card{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
}

.check-card small{
    display:block;
    margin-top:6px;
    color:var(--muted);
    line-height:1.4;
}

.dual{
    display:grid;
    /* Each panel as tall as its own contents. A grid item stretches to the
       tallest in its row by default, so one busy list beside one short table
       produced 1654px of empty box under the short one. */
    align-items:start;
    /* minmax(0, …) rather than a bare 2fr 1fr. A grid item's implicit min-width
       is auto, so a wide table refuses to shrink and pushes its column past its
       share -- taking the page with it. The wallet desk's 14-column table made
       a 1097px column render 1165px wide, and the whole page scrolled
       sideways. Capped here, the .table-wrap inside does the scrolling it is
       already there for. */
    grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);
    gap:18px;
}

.staff-profile-layout{
    display:grid;
    grid-template-columns:minmax(0, 1.4fr) minmax(min(320px, 100%), 0.86fr);
    gap:18px;
    align-items:start;
}

.staff-side-stack{
    display:grid;
    gap:18px;
    align-self:start;
}

.chat-layout{
    /* min() so the conversation list can go below 320px on a phone. As a hard
       floor it forced the list and the thread to claim more width than the
       screen has, which is why both ended up squeezed and spilling. */
    grid-template-columns:minmax(min(320px, 100%), 0.95fr) minmax(0, 1.45fr);
    align-items:start;
}

.chat-room-list{
    display:grid;
    gap:10px;
}

.chat-room-link{
    display:block;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
    transition:border-color 0.2s ease, transform 0.2s ease;
}

.chat-room-link:hover,
.chat-room-link.active{
    border-color:rgba(94,240,192,0.3);
    transform:translateY(-1px);
}

.chat-room-meta{
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:var(--muted);
    font-size:0.88rem;
    margin-top:8px;
}

/* The thread is one column the height of the screen. The header, the folds and
   the composer take what they need and the message list gets the rest, so
   reading back through a conversation scrolls the conversation -- not the whole
   page with the composer disappearing off the bottom of it. */
.chat-thread-panel{
    display:flex;
    flex-direction:column;
    /* What is left under the topbar and the page padding on a laptop. Measured
       rather than guessed: at 800 px tall the panel starts 178 px down and the
       page keeps 24 px below it. Too generous and the composer hangs off the
       bottom, which is the whole complaint. */
    max-height:calc(100vh - 200px);
    max-height:calc(100dvh - 200px);
}

/* Every textarea on the site has a 120 px floor, which is right for a note and
   wrong for a chat box sharing a panel with the conversation. It grows as the
   message does. */
.chat-thread-panel #chat_body{
    min-height:64px;
}

/* Who is here and what is pinned are two reference panels. They were two rows
   above the conversation; one row is enough. */
.chat-reference-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:10px;
}

/* The panel header, the typing line and the composer each carried a full
   gap. Together that was another message worth of height on a page whose
   problem was height. */
.chat-thread-panel > .panel-header{
    margin-bottom:12px;
}

.chat-reference-row > .fold-panel{
    /* Small enough that "Members" and "Pinned & files" still share a row on a
       375 px phone; stacking them there cost the conversation 60 px. */
    flex:1 1 140px;
    min-width:0;
    margin-bottom:0;
}

/* Opened, it needs the width back -- a member list or a pinned message does
   not read in half a column. */
.chat-reference-row > .fold-panel[open]{
    flex-basis:100%;
}

.chat-thread-panel .chat-messages{
    flex:1 1 auto;
    /* An explicit floor: a flex item will not shrink past its content without
       one, which is what would push the composer off the bottom again. Kept
       low so that on a short screen the conversation gives way rather than the
       box you type into. */
    min-height:120px;
    max-height:none;
}

.chat-messages{
    display:grid;
    gap:10px;
    min-height:320px;
    /* The conversation scrolls, not the page. Everything that used to sit
       above it -- members, pinned messages, shared files -- folds now, so
       this can take the room it needs and leave the composer on screen. */
    max-height:66vh;
    max-height:66dvh;
    overflow:auto;
    padding-right:4px;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    -webkit-overflow-scrolling:touch;
}

.order-chat-messages{
    display:grid;
    gap:12px;
    min-height:220px;
    max-height:min(52vh, 34rem);
    overflow:auto;
    padding-right:4px;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
}

.chat-message{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:4px;
    max-width:min(86%, 680px);
    padding:9px 13px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.04);
}

/* Same person, same few minutes: the name is already above it. Pull the
   bubble up so a run reads as one turn instead of five separate cards. */
.chat-message.grouped{
    margin-top:-6px;
    border-top-left-radius:8px;
}

.chat-message.grouped.self{
    border-top-left-radius:16px;
    border-top-right-radius:8px;
}

/* Sits on the last line of the message when it fits, drops below when it does
   not -- either way it never claims a row of its own. */
.chat-message-stamp{
    float:right;
    margin:5px 0 0 12px;
    font-size:0.72rem;
    color:var(--muted);
    white-space:nowrap;
    user-select:none;
}

.chat-message-body::after{
    content:"";
    display:block;
    clear:both;
}

.chat-message-foot{
    display:flex;
    justify-content:flex-end;
}

.chat-message-foot .chat-message-stamp{
    float:none;
    margin:0;
}

.chat-message-pinned{
    font-size:0.78rem;
}

/* The date belongs to the day, not to every message in it. */
.chat-day-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:6px 0 2px;
    color:var(--muted);
    font-size:0.76rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
}

.chat-day-divider::before,
.chat-day-divider::after{
    content:"";
    flex:1 1 auto;
    height:1px;
    background:var(--line);
}

.chat-message.self{
    margin-left:auto;
    background:linear-gradient(135deg, rgba(41,195,255,0.18), rgba(94,240,192,0.16));
}

.chat-message.system{
    max-width:100%;
    background:rgba(255,255,255,0.03);
    border-style:dashed;
}

.chat-message-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:var(--muted);
    font-size:0.82rem;
}

/* No room is reserved for the hover actions -- reserving it would make a
   two-word message as wide as the toolbar that is not on screen. The name
   gives way instead, and the toolbar is opaque over it. */
.chat-message-head strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.chat-message-reply{
    padding:7px 10px;
    font-size:0.86rem;
    border-radius:12px;
    border-left:3px solid rgba(94,240,192,0.55);
    background:rgba(255,255,255,0.03);
}

/* Reply and Pin used to be a permanent row under every message, which on a
   one-word message was more height than the message. They now sit over the
   corner of the bubble and cost nothing until somebody reaches for them. */
.chat-message-actions{
    position:absolute;
    top:4px;
    right:6px;
    display:flex;
    gap:6px;
    padding:3px;
    border-radius:12px;
    background:rgba(10,20,36,0.82);
    backdrop-filter:blur(6px);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.15s ease;
}

.chat-message:hover .chat-message-actions,
.chat-message:focus-within .chat-message-actions{
    opacity:1;
    pointer-events:auto;
}

.chat-message-actions button{
    padding:5px 9px;
    font-size:0.76rem;
}

/* A touch screen has no hover, so there is nothing to reveal them with. They
   stay visible there -- still in the corner, still costing no height. */
@media (hover: none){
    .chat-message-actions{
        opacity:0.62;
        pointer-events:auto;
    }
}

.chat-attachment{
    display:grid;
    gap:10px;
    margin-top:4px;
    min-width:0;
}

.chat-attachment-preview{
    display:block;
    width:min(100%, 340px);
    max-width:min(100%, 340px);
    border-radius:16px;
    border:1px solid var(--line);
    overflow:hidden;
    background:rgba(255,255,255,0.03);
}

.chat-attachment-preview img{
    width:100%;
    height:auto;
    object-fit:cover;
}

.chat-attachment-preview audio{
    width:100%;
    display:block;
    background:#0b1526;
}

.chat-attachment-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-width:0;
    flex-wrap:wrap;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
}

.chat-attachment-card > div{
    min-width:0;
    flex:1 1 220px;
}

.chat-attachment-card strong{
    display:block;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.chat-compose-tools{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

/* The attachment controls were 199 px of a 427 px composer, on a page whose
   whole problem was that the composer pushed the conversation off the screen. */
/* Attach sits beside Send while it is closed. Opened, it is a file picker, a
   record button and two lines of hint, so it takes the row and Send drops
   below it. */
.chat-compose-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.chat-compose-row > button[type="submit"]{
    flex:0 0 auto;
}

.chat-attach-fold[open]{
    flex:1 1 100%;
}

.chat-attach-fold > summary{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:12px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
    color:var(--muted);
    font-size:0.86rem;
    cursor:pointer;
    list-style:none;
}

.chat-attach-fold > summary::-webkit-details-marker{display:none}

.chat-attach-fold > summary::before{
    content:"+";
    color:var(--accent);
    font-weight:700;
}

.chat-attach-fold[open] > summary::before{content:"−"}

.chat-attach-fold > summary:hover{
    border-color:rgba(255,255,255,0.24);
}

.chat-compose-tools input[type="file"]{
    padding:10px 12px;
}

.chat-section-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    margin-bottom:18px;
}

.chat-subpanel{
    padding:14px 16px;
    border-radius:18px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
}

.chat-subpanel h4{
    margin:0 0 10px;
    font-size:0.96rem;
}

.chat-subpanel .list{
    gap:10px;
}

.chat-file-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:flex-start;
    gap:12px;
    min-width:0;
}

.chat-file-row > div:first-child{
    min-width:0;
}

.chat-file-row strong{
    display:block;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.chat-subpanel .list-item{
    overflow:hidden;
}

.chat-composer-reply{
    padding:12px 14px;
    border-radius:16px;
    border:1px solid rgba(94,240,192,0.24);
    background:rgba(94,240,192,0.08);
}

.chat-recorder-state{
    min-height:20px;
}

.chat-members{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.chat-member-chip{
    padding:10px 12px;
    border-radius:14px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.03);
}

.public-shell{
    min-height:100vh;
    padding:24px 18px 36px;
}

.public-inner{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    gap:20px;
}

.public-hero{
    display:grid;
    grid-template-columns:minmax(0, 1.1fr) minmax(min(320px, 100%), 0.9fr);
    gap:20px;
    align-items:stretch;
}

.public-hero > *,
.public-card-grid > *,
.login-card-grid > *{
    min-width:0;
}

.login-hero{
    grid-template-columns:minmax(0, 1.2fr) minmax(min(320px, 100%), 0.9fr);
}

.login-hero-copy{
    min-height:420px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.login-hero-title{
    font-size:clamp(2rem, 4.8vw, 2.7rem);
    overflow-wrap:normal;
    word-break:normal;
}

.login-card-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.login-hero-form{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.public-title{
    margin:14px 0 10px;
    font-size:clamp(2.1rem, 5vw, 3.15rem);
    line-height:1.08;
}

.public-lead{
    font-size:1.04rem;
    line-height:1.78;
}

.public-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.public-card-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
}

.public-info-list{
    display:grid;
    gap:12px;
}

.public-support{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
}

.public-footer{
    display:flex;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    align-items:center;
}

.public-footer-links{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

@media (max-width: 980px){
    .app-shell{
        display:block;
    }
    .app-shell.sidebar-hidden{
        grid-template-columns:1fr;
    }
    .sidebar{
        position:fixed;
        left:0;
        top:0;
        width:min(86vw, 320px);
        height:100vh;
        transform:translateX(-110%);
        opacity:1;
        pointer-events:auto;
    }
    .app-shell.sidebar-open .sidebar{
        transform:translateX(0);
    }
    .app-shell.sidebar-hidden .sidebar{
        transform:translateX(-110%);
        opacity:1;
        pointer-events:auto;
    }
    .sidebar-close{
        display:inline-flex;
    }
    .content{
        padding:12px;
    }
    .alert-tray{
        right:12px;
        bottom:12px;
        width:calc(100vw - 24px);
    }
    .topbar{
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        margin-bottom:12px;
    }
    .topbar-left{
        align-items:flex-start;
        gap:8px;
    }
    .top-search{
        display:none;
    }
    .page-title h2{
        font-size:1.38rem;
    }
    .page-title p{
        margin-top:4px;
        font-size:0.86rem;
    }
    .top-actions{
        gap:8px;
    }
    .chip,
    .badge{
        padding:6px 10px;
        font-size:0.82rem;
    }
    .dual{
        grid-template-columns:1fr;
    }
    .staff-profile-layout{
        grid-template-columns:1fr;
    }
    .chat-layout{
        grid-template-columns:1fr;
    }
    .chat-section-grid{
        grid-template-columns:1fr;
    }
    .public-hero,
    .public-card-grid{
        grid-template-columns:1fr;
    }
    .login-hero{
        grid-template-columns:1fr;
    }
    .login-hero-copy{
        min-height:auto;
        gap:16px;
    }
    .public-shell{
        padding:18px 14px 28px;
    }
    .public-actions .button,
    .public-actions button{
        width:100%;
        justify-content:center;
    }
    .profile-form-grid,
    .profile-evidence-grid{
        grid-template-columns:1fr;
    }
    .card,
    .panel{
        padding:16px;
        border-radius:18px;
    }
    .panel-header{
        flex-direction:column;
        align-items:stretch;
    }
    .panel-header .badge,
    .panel-header .chip{
        align-self:flex-start;
    }
    .profile-summary-card{
        gap:10px;
    }
    .profile-summary-head{
        align-items:flex-start;
        gap:12px;
    }
    .profile-avatar{
        width:60px;
        height:60px;
        border-radius:18px;
    }
    .profile-file-actions,
    .inline-actions,
    .table-actions{
        gap:8px;
    }
    .profile-file-actions .button,
    .inline-actions .button,
    .table-actions .button,
    .table-actions a.badge,
    .profile-file-actions a.button,
    .inline-actions button{
        width:100%;
    }
    .mobile-stack-table table,
    .mobile-stack-table tbody,
    .mobile-stack-table tr,
    .mobile-stack-table td{
        display:block;
        width:100%;
    }
    .mobile-stack-table table > tr:first-child,
    .mobile-stack-table tbody > tr:first-child{
        display:none;
    }
    .mobile-stack-table tr{
        border-bottom:1px solid var(--line);
        padding:10px 0;
    }
    .mobile-stack-table tr:last-child{
        border-bottom:none;
    }
    .mobile-stack-table td{
        border-bottom:none;
        padding:8px 0;
    }
    .mobile-stack-table td::before{
        content:attr(data-label);
        display:block;
        margin-bottom:4px;
        color:#9db5d8;
        font-size:0.72rem;
        font-weight:700;
        letter-spacing:0.06em;
        text-transform:uppercase;
    }
    .mobile-stack-table td[colspan]::before{
        display:none;
    }
    .chat-attachment-card,
    .chat-file-row{
        grid-template-columns:1fr;
    }
    .chat-attachment-card .button,
    .chat-file-row .button{
        width:100%;
        justify-content:center;
    }
    .public-footer{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width: 820px){
    .login-card-grid{
        grid-template-columns:1fr;
    }
    .login-hero-title{
        font-size:1.9rem;
        line-height:1.14;
    }
    .profile-top-grid,
    .profile-meta-grid{
        grid-template-columns:1fr;
    }
    .profile-top-grid{
        gap:12px;
        margin-bottom:16px;
    }
}

/* The back link only has a job on a phone, where the list is hidden. */
.chat-back-link{
    display:none;
}

/* Chat on a small screen.
   The 980px block above already stacks the two panels, but stacking alone puts
   the conversation list above the thread — so an open conversation is never
   what you are looking at, and it gets worse with two or three of them.
   With a chat open the list steps aside entirely and the back link brings it
   back: one thing on screen at a time, the way a phone messaging app behaves.
   With no chat open the list is the page, which is also correct. */
@media (max-width: 980px){
    .chat-layout.chat-has-active > .panel:has(.chat-room-list){
        display:none;
    }

    .chat-layout.chat-has-active .chat-back-link{
        display:inline-block;
        margin-bottom:12px;
        padding:9px 13px;
        border-radius:11px;
        border:1px solid var(--line);
        background:rgba(255,255,255,0.04);
        text-decoration:none;
        color:var(--text);
        font-weight:600;
        font-size:0.9rem;
    }

    /* No chat open: the list is the whole point of the page, so let it breathe
       rather than capping it into a small scroller. */
    .chat-layout:not(.chat-has-active) .chat-room-list{
        max-height:none;
    }

    .chat-messages{
        max-height:58vh;
        max-height:58dvh;
    }

    /* No sidebar here, so the thread can have more of the screen than it can
       on a laptop -- but not so much that the send button lands below the
       fold, which is what a phone user hits first. */
    .chat-thread-panel{
        max-height:calc(100vh - 150px);
        max-height:calc(100dvh - 150px);
    }
}

/* Below this width the portal was pushing content past the edge of the screen:
   action rows stayed on one line, buttons kept their full label width, and the
   page scrolled sideways. Buttons are allowed to wrap their text and share the
   row instead. */
@media (max-width: 720px){
    /* A chip that is a link is a navigation control. At 31px it was a small
       target for a thumb; badges are not interactive and keep their size. */
    a.chip{
        min-height:40px;
    }

    .top-actions{
        width:100%;
    }

    .top-actions > *{
        flex:1 1 auto;
        min-width:0;
    }

    button,
    input[type="submit"],
    .button{
        /* Wrap at spaces so a long label uses two lines instead of overflowing.
           break-word only splits a word when that word alone cannot fit;
           `anywhere` lets the browser break "Menu" into single letters as soon
           as the button is squeezed, which is exactly what it did. */
        white-space:normal;
        overflow-wrap:break-word;
        max-width:100%;
    }

    .table-actions{
        flex-wrap:wrap;
    }
}

@media (max-width: 640px){
    .public-shell{
        padding:12px 10px 22px;
    }
    .public-inner{
        gap:12px;
    }
    .login-hero-copy,
    .login-hero-form{
        padding:14px;
    }
    .login-hero-title{
        font-size:1.5rem;
        line-height:1.12;
        max-width:12ch;
    }
    .public-lead{
        font-size:0.94rem;
        line-height:1.6;
    }
}

/* ---------------------------------------------------------------------------
   Printing.

   Receipts and salary records get printed and saved as PDFs, and until now they
   printed the way the screen looks: dark background, the whole sidebar, every
   button. That wastes ink, and hands somebody a document with a navigation menu
   down the side of it.

   Anything that only exists for navigating is dropped, and the page returns to
   black on white.
   --------------------------------------------------------------------------- */
@media print{
    :root{
        --text:#000;
        --muted:#444;
        --line:#bbb;
    }

    body{
        background:#fff !important;
        color:#000 !important;
    }

    /* Navigation, controls and anything else you cannot use on paper. */
    .sidebar,
    .sidebar-backdrop,
    .sidebar-toggle,
    .sidebar-close,
    .top-actions,
    .top-search,
    .table-actions,
    .nav,
    .chip,
    button,
    input[type="submit"],
    .button,
    .focus-block,
    .flow-strip,
    .all-metrics,
    .fold-panel > summary,
    .chat-back-link{
        display:none !important;
    }

    /* The shell is a two-column grid built around the sidebar. */
    .app-shell{
        display:block !important;
    }

    .content{
        padding:0 !important;
    }

    /* Panels become plain sections: no glass, no shadow, no rounded fills that
       print as grey boxes. */
    .panel,
    .card,
    .callout,
    .list-item,
    .focus-item,
    .flow-item{
        background:#fff !important;
        border:1px solid #bbb !important;
        box-shadow:none !important;
        border-radius:0 !important;
        backdrop-filter:none !important;
    }

    /* A row split across two sheets is unreadable on both. */
    tr,
    .list-item,
    .card,
    .check-card{
        break-inside:avoid;
        page-break-inside:avoid;
    }

    table{
        width:100% !important;
        border-collapse:collapse !important;
    }

    th,
    td{
        border:1px solid #bbb !important;
        color:#000 !important;
    }

    /* A folded panel holds the detail somebody is trying to print. */
    details{
        display:block !important;
    }

    details > *:not(summary){
        display:revert !important;
    }

    /* On paper a link's destination is invisible, so print it once next to the
       text. Internal anchors and javascript: links have nothing worth showing. */
    a[href^="http"]::after{
        content:" (" attr(href) ")";
        font-size:0.8em;
        color:#555;
        word-break:break-all;
    }
}

/* The counterparty's payment QR, beside the address it encodes.

   Side by side on a desktop, stacked on a phone — where this matters most,
   because the phone showing the QR is often the phone that has to scan it, and
   the address underneath is the way out of that. */
.payment-qr{
    display:flex;
    gap:16px;
    align-items:flex-start;
    flex-wrap:wrap;
    margin-top:14px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,0.03);
}

.payment-qr img{
    /* A QR on a dark background does not scan. */
    background:#fff;
    padding:8px;
    border-radius:8px;
    flex:0 0 auto;
}

.payment-qr > div{
    min-width:0;
    flex:1 1 220px;
}

/* Group headings inside a long form.

   The staff record is forty-seven fields. Ungrouped, it reads as a wall and
   whoever opens it scrolls looking for the two they came to change. These
   split it into what the page is for (employment) and what was filled once at
   onboarding (documents, contact) — the second kind folds. */
.form-group-title{
    margin:22px 0 2px;
    font-size:0.82rem;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
}

.form-group-title + .muted{
    margin:0 0 10px;
}

/* A folded group sits between grids rather than inside one, so it needs the
   spacing the grid would otherwise have given it. */
details.fold-panel > .form-grid{
    margin-top:12px;
}

.fold-count{
    margin-left:8px;
    font-size:0.78rem;
    font-weight:500;
    color:var(--muted);
}

/* A checkbox is 13 pixels. The label around it is the thing a thumb actually
   hits, and a one-line label is only about 20 — under the 24 that a small
   target should be. The permission cards already wrap generously; these inline
   ones did not, and were the only controls on the whole portal too small to
   tap comfortably. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
    display:inline-flex;
    align-items:flex-start;
    gap:8px;
    min-height:24px;
    padding:2px 0;
    cursor:pointer;
}

label:has(> input[type="checkbox"]) > input,
label:has(> input[type="radio"]) > input {
    /* Keep the box aligned with the first line of a label that wraps. */
    margin-top:3px;
    flex:0 0 auto;
}