/* Signet console design system — "The 3 AM Notebook"
   Pinned to chronicaltech.solutions. Paper desk, ink, ballpoint blue, red pen,
   sticky notes, Caveat hand over Inter data. Operate surface: the notebook
   character never hides the task, the status, or the affordance. */

:root {
    --paper: #f6f1e3;
    --paper-2: #fbf7ec;
    --paper-3: #efe7d2;
    --desk: #2e2418;
    --desk-2: #3a2e1f;
    --ink: #2b2a33;
    --ink-soft: #57545f;
    --pen: #20509e;
    --pen-soft: rgba(32, 80, 158, .10);
    --pencil: #8a8577;
    --red: #c0392b;
    --green: #1e7d4f;
    --amber: #b9770e;
    --teal: #0e7c86;
    --violet: #6c4bb5;
    --sticky-yellow: #fdf3a6;
    --sticky-pink: #ffd9dc;
    --sticky-blue: #cfe6ff;
    --sticky-green: #d8f3d0;
    --grid: rgba(32, 80, 158, .10);
    --line: rgba(43, 42, 51, .15);
    --line-strong: rgba(43, 42, 51, .55);
    --hand: 'Caveat', cursive;
    --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --shadow-card: 0 12px 22px rgba(43, 42, 51, .16);
    --shadow-sticky: 2px 8px 16px rgba(43, 42, 51, .18);
    --shadow-hard: 2px 3px 0 rgba(43, 42, 51, .55);
    --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ── Browser surfaces ── */
::selection { background: var(--sticky-yellow); color: var(--ink); }
input, textarea, select { caret-color: var(--pen); }
html { scrollbar-color: var(--pencil) var(--paper); }
body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-track { background: var(--paper); }
body::-webkit-scrollbar-thumb { background: var(--pencil); border-radius: 6px; border: 3px solid var(--paper); }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; border-radius: 2px; }
table { font-variant-numeric: tabular-nums; }

.internal-body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── Desk shell ── */
.desk {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
}

.desk-nav {
    background: var(--desk);
    color: #e9dfc9;
    padding: 22px 14px;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

.desk-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 8px 20px;
    text-decoration: none;
}

.desk-seal {
    width: 40px; height: 40px; min-width: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #e0564a, var(--red) 60%, #7e1f14);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .12);
    display: grid; place-items: center;
    font-family: var(--hand);
    font-weight: 700;
    font-size: 24px;
    color: #fdf3a6;
    transform: rotate(-6deg);
}

.desk-brand-name {
    font-family: var(--hand);
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    color: #f6f1e3;
}

.desk-brand-sub {
    display: block;
    font-family: var(--body);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(233, 223, 201, .55);
    margin-top: 3px;
}

.desk-nav-label {
    font-family: var(--hand);
    font-size: 15px;
    color: rgba(233, 223, 201, .5);
    padding: 14px 10px 4px;
}

.desk-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #cbbb9c;
    text-decoration: none;
    font-weight: 500;
    font-size: 14.5px;
    transition: background .18s var(--ease), color .18s var(--ease);
}

.desk-link i { font-size: 19px; }

.desk-link:hover { background: var(--desk-2); color: #f6f1e3; }

.desk-link.is-active {
    background: var(--sticky-yellow);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, .35);
    transform: rotate(-1deg);
}

.desk-link.is-danger { color: #e08a80; }
.desk-link.is-danger:hover { background: rgba(192, 57, 43, .18); color: #f2b6ae; }

.desk-nav-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(233, 223, 201, .14);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--desk);
}

.desk-user {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; font-size: 13.5px; color: rgba(233, 223, 201, .7);
}

.desk-user .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--pen);
    color: #fff; display: grid; place-items: center;
    font-weight: 700; font-size: 13px; text-transform: uppercase;
}

.desk-main { padding: 34px clamp(20px, 4vw, 52px) 64px; min-width: 0; }

/* ── Page header ── */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    margin: 6px 0 26px;
}

.page-title {
    font-family: var(--hand);
    font-weight: 700;
    font-size: clamp(2.2rem, 4.5vw, 3rem);
    line-height: 1.05;
    margin: 0;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-title i { color: var(--pen); font-size: .85em; }

.page-sub {
    margin: 6px 0 0;
    color: var(--ink-soft);
    font-size: 14.5px;
    display: flex; align-items: center; gap: 7px;
}

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

/* ── Hand helpers ── */
.hand { font-family: var(--hand); }
.scribble {
    font-family: var(--hand);
    font-weight: 600;
    font-size: 1.18rem;
    color: var(--red);
    transform: rotate(-2deg);
    display: inline-block;
    letter-spacing: .4px;
}
.scribble.pen { color: var(--pen); }
.scribble.green { color: var(--green); }
.scribble.ink { color: var(--ink); }

/* ── Buttons ── */
.btn {
    font-family: var(--hand);
    font-weight: 700;
    font-size: 1.22rem;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}

.btn i { font-size: 1.05em; }

.btn-primary {
    background: var(--sticky-yellow);
    color: var(--ink);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-hard);
    transform: rotate(-1.5deg);
}
.btn-primary:hover { transform: rotate(0) translateY(-2px); box-shadow: 3px 5px 0 rgba(43, 42, 51, .55); }

.btn-pen {
    background: var(--pen);
    color: #fff;
    border-color: var(--pen);
    box-shadow: 2px 3px 0 rgba(32, 80, 158, .35);
    transform: rotate(1deg);
}
.btn-pen:hover { transform: rotate(0) translateY(-2px); }

.btn-outline {
    background: var(--paper-2);
    color: var(--ink);
    border: 1.5px dashed var(--line-strong);
}
.btn-outline:hover { background: var(--paper-3); transform: translateY(-1px); }

.btn-danger {
    background: var(--paper-2);
    color: var(--red);
    border: 1.5px solid rgba(192, 57, 43, .5);
}
.btn-danger:hover { background: #fbe9e7; }

.btn-sm { font-size: 1.05rem; padding: 6px 14px; }

.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

/* ── Cards ── */
.card {
    position: relative;
    background: repeating-linear-gradient(180deg, var(--paper-2) 0 27px, var(--grid) 27px 28px);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: var(--shadow-card);
    padding: 24px 22px 20px;
}

.card-plain {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: var(--shadow-card);
    padding: 22px;
    position: relative;
}

.card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}

.card-title {
    font-family: var(--hand);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0;
    color: var(--ink);
    display: flex; align-items: center; gap: 9px;
}

/* ── Tape & pin ── */
.tape {
    position: absolute;
    width: 84px; height: 26px;
    top: -13px; left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(255, 241, 178, .65);
    border-left: 1px dashed rgba(43, 42, 51, .15);
    border-right: 1px dashed rgba(43, 42, 51, .15);
    box-shadow: 0 2px 4px rgba(43, 42, 51, .12);
    pointer-events: none;
}

.pin {
    position: absolute;
    top: -11px; left: 50%;
    transform: translateX(-50%);
    width: 22px; height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ff8a80, var(--red) 62%, #7e1f14);
    box-shadow: 0 4px 6px rgba(43, 42, 51, .35);
    pointer-events: none;
}

/* ── Sticky notes ── */
.sticky {
    position: relative;
    padding: 20px 18px 22px;
    box-shadow: var(--shadow-sticky);
    font-size: .95rem;
    color: var(--ink);
    border-radius: 2px;
    transform: rotate(var(--rot, -1deg));
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.sticky:hover { transform: rotate(0) translateY(-3px); box-shadow: 3px 12px 20px rgba(43, 42, 51, .22); }

.s-yellow { background: var(--sticky-yellow); }
.s-pink { background: var(--sticky-pink); }
.s-blue { background: var(--sticky-blue); }
.s-green { background: var(--sticky-green); }

.sticky-title {
    font-family: var(--hand);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.1;
    margin: 0 0 6px;
}
.sticky-title a { color: var(--ink); text-decoration: none; }
.sticky-title a:hover { text-decoration: underline; text-decoration-color: var(--pen); }

.sticky-meta { font-size: 13px; color: rgba(43, 42, 51, .75); display: flex; align-items: center; gap: 6px; }
.sticky-link {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 12px; font-weight: 600; font-size: 13.5px;
    color: var(--pen); text-decoration: none;
}
.sticky-link:hover { text-decoration: underline; }

/* ── Notebook tabs ── */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; margin-bottom: -1px; }
.mobile-tabs-cue { display: none; }
.tab {
    font-family: var(--hand);
    font-weight: 600;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--ink-soft);
    padding: 7px 16px 6px;
    border-radius: 8px 8px 0 0;
    border: 1.5px dashed transparent;
    display: inline-flex; align-items: center; gap: 7px;
    transition: background .18s var(--ease), color .18s var(--ease);
}
.tab:hover { color: var(--ink); background: rgba(43, 42, 51, .05); }
.tab.is-active {
    color: var(--ink);
    background: var(--paper-2);
    border-color: var(--line);
    border-bottom-color: var(--paper-2);
    box-shadow: 0 -4px 8px rgba(43, 42, 51, .06);
}
.tab .count {
    font-family: var(--body);
    font-size: 11px; font-weight: 700;
    background: rgba(43, 42, 51, .1);
    border-radius: 99px; padding: 1px 7px;
}
.tab.is-active .count { background: var(--pen); color: #fff; }

/* ── Ledger table ── */
.ledger-wrap {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: var(--shadow-card);
    overflow-x: auto;
    max-width: 100%;
}

.ledger { width: 100%; min-width: 640px; border-collapse: collapse; }

.ledger th {
    text-align: left;
    padding: 13px 20px;
    font-family: var(--hand);
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--ink-soft);
    border-bottom: 1.5px solid var(--line-strong);
    background: var(--paper-3);
}

.ledger td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--grid);
    vertical-align: middle;
    font-size: 14.5px;
}

.ledger tbody tr { transition: background .16s var(--ease); }
.ledger tbody tr:hover { background: rgba(32, 80, 158, .05); }
.ledger tbody tr:last-child td { border-bottom: none; }

.td-title { font-weight: 600; }
.td-title a { color: var(--ink); text-decoration: none; }
.td-title a:hover { color: var(--pen); text-decoration: underline; text-decoration-color: var(--pen); }
.td-muted { color: var(--ink-soft); font-size: 13.5px; }

/* ── Status stamps ── */
.stamp {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: 12px;
    letter-spacing: .04em; text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 4px;
    border: 1.5px solid currentColor;
    transform: rotate(-1.5deg);
    background: var(--paper-2);
}
.stamp i { font-size: 14px; }
.stamp-draft { color: #665f52; }
.stamp-sent { color: var(--pen); }
.stamp-viewed { color: var(--violet); }
.stamp-signed { color: var(--green); }
.stamp-expired { color: var(--red); }
.stamp-voided { color: var(--red); }
.stamp-pending { color: #8a5a0a; }

/* ── Forms ── */
.field { margin-bottom: 16px; }
.field label {
    display: block;
    font-family: var(--hand);
    font-weight: 600;
    font-size: 1.12rem;
    color: var(--ink);
    margin-bottom: 4px;
}
.input, .field input[type="text"], .field input[type="search"], .field input[type="email"],
.field input[type="password"], .field input[type="number"], .field select, .field textarea {
    width: 100%;
    font-family: var(--body);
    font-size: 14.5px;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line-strong);
    border-radius: 6px;
    padding: 9px 13px;
    box-sizing: border-box;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--pen);
    box-shadow: 0 0 0 3px var(--pen-soft);
}

.search-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search-bar .input { flex: 1; min-width: 220px; }

/* ── Messages (hand notes) ── */
.note {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: 3px;
    font-size: 14.5px;
    box-shadow: var(--shadow-sticky);
    transform: rotate(-.4deg);
}
.note i { font-size: 19px; }
.note-success { background: var(--sticky-green); color: #14532d; }
.note-error { background: var(--sticky-pink); color: #7f1d1d; }
.note-info { background: var(--sticky-blue); color: #1e3a8a; }

/* ── Metrics ── */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.metric {
    position: relative;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 18px 18px 14px;
    box-shadow: 0 6px 14px rgba(43, 42, 51, .1);
}
a.metric {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
a.metric:hover {
    transform: translateY(-3px) rotate(-.4deg);
    box-shadow: 0 10px 20px rgba(43, 42, 51, .16);
    border-color: var(--pen);
}
a.metric:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
.row-clickable:hover { background: rgba(32, 80, 158, .06) !important; }

.metric-value {
    font-family: var(--body);
    font-weight: 800;
    font-size: 2.1rem;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.metric-label {
    font-family: var(--hand);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ink-soft);
    margin-top: 6px;
}

.sparkline { display: block; margin-top: 10px; width: 100%; height: 34px; }
.sparkline polyline { fill: none; stroke: var(--pen); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sparkline .area { fill: var(--pen-soft); stroke: none; }

/* ── Empty state ── */
.empty {
    text-align: center;
    padding: 52px 24px;
    color: var(--ink-soft);
}
.empty i {
    display: inline-grid; place-items: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: var(--paper-3);
    color: var(--pen);
    font-size: 28px;
    margin-bottom: 12px;
    transform: rotate(-4deg);
}
.empty strong {
    display: block;
    font-family: var(--hand);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ink);
    margin-bottom: 4px;
}

/* ── Dashboard board ── */
.board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.board > section { min-width: 0; }

.attention-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding-top: 14px;
}

.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin: 8px 0 4px;
}
.section-title {
    font-family: var(--hand);
    font-weight: 700;
    font-size: 1.7rem;
    margin: 0;
    display: flex; align-items: center; gap: 9px;
}

/* ── Login ── */
.login-desk {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 20% 15%, rgba(32, 80, 158, .06), transparent 40%),
        var(--paper);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .desk {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }
    .desk-nav {
        position: static; height: auto;
        flex-direction: row; align-items: center; flex-wrap: wrap;
        padding: 12px 14px; gap: 6px;
    }
    .desk-nav-label, .desk-user { display: none; }
    .desk-brand { padding: 0 8px 0 0; }
    .desk-nav-foot { margin-top: 0; margin-left: auto; padding-top: 0; border-top: 0; flex-direction: row; position: static; }
    .desk-link { padding: 8px 10px; }
    .desk-link .link-text { display: none; }
    .desk-main { padding: 22px 16px 48px; }
}

@media (max-width: 420px) {
    .attention-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .metric { padding: 13px 12px 11px; }
    .metric-value { font-size: 1.55rem; }
    .metric-label { font-size: .95rem; line-height: 1.15; }
}

/* Small-screen containment. Dense ledgers either become labelled cards or
   stay inside an explicitly announced horizontal scroll region. */
html,
body.internal-body { max-width: 100%; }
.desk,
.desk-main,
.page-head,
.ledger-wrap,
.internal-card,
.panel { min-width: 0; max-width: 100%; }
.ledger-wrap,
[data-mobile-scroll] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

@media (max-width: 720px) {
    .desk-nav {
        position: sticky;
        top: 0;
        z-index: 50;
        width: 100%;
        max-width: 100vw;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 9px 10px;
        scrollbar-width: thin;
    }
    .desk-brand,
    .desk-link,
    .desk-nav-foot { flex: 0 0 auto; }
    .desk-brand { padding-right: 2px; }
    .desk-brand > span:last-child { display: none; }
    .desk-logo,
    .desk-seal { width: 36px !important; height: 36px !important; min-width: 36px; }
    .desk-nav-foot { margin-left: auto; }
    .desk-main { width: 100%; padding: 18px 12px 42px; }

    .page-head { align-items: flex-start; gap: 12px; margin-bottom: 18px; }
    .page-head > div:first-child { min-width: 0; width: 100%; }
    .page-title { font-size: clamp(1.85rem, 10vw, 2.35rem); overflow-wrap: anywhere; }
    .page-sub { align-items: flex-start; overflow-wrap: anywhere; }
    .page-actions { width: 100%; align-items: stretch; }
    .page-actions .btn { flex: 1 1 auto; justify-content: center; }

    .tabs {
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 2px 5px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-tabs-cue {
        display: block;
        margin: 0 0 5px;
        color: var(--pencil);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
    .tab { flex: 0 0 auto; white-space: nowrap; }
    .search-bar { align-items: stretch; }
    .search-bar .input { min-width: 100%; flex-basis: 100%; }

    .panel,
    .internal-card { padding: 15px; overflow-wrap: anywhere; }
    .internal-page-header { align-items: flex-start; }
    .internal-page-actions,
    .internal-header-actions { width: 100%; }
    .internal-page-actions .btn,
    .internal-header-actions .btn { flex: 1 1 auto; justify-content: center; }
    input,
    select,
    textarea,
    pre,
    code { max-width: 100%; }
    input[type="file"] { width: 100%; }
    img,
    svg,
    iframe { max-width: 100%; }

    [data-mobile-scroll] {
        position: relative;
        width: 100%;
        max-width: 100%;
        padding-top: 30px;
        overflow-x: auto;
    }
    [data-mobile-scroll]::before {
        content: attr(data-mobile-scroll);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 30px;
        padding: 7px 10px;
        border-bottom: 1px solid var(--line);
        background: var(--paper-3);
        color: var(--ink-soft);
        font-size: 10px;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
    [data-mobile-scroll] table { margin-top: 0; }

    .ledger-mobile-cards {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 10px;
    }
    .ledger-mobile-cards thead { display: none; }
    .ledger-mobile-cards tbody { display: grid; gap: 10px; }
    .ledger-mobile-cards tr {
        display: block;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: rgba(255, 255, 255, .46);
    }
    .ledger-mobile-cards td {
        display: grid;
        grid-template-columns: minmax(76px, 32%) minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        width: 100%;
        padding: 9px 11px;
        border-bottom: 1px solid var(--grid);
        text-align: left !important;
        overflow-wrap: anywhere;
    }
    .ledger-mobile-cards td::before {
        content: attr(data-label);
        color: var(--pencil);
        font: 700 .92rem/1.15 var(--hand);
    }
    .ledger-mobile-cards td:last-child { border-bottom: 0; }
    .ledger-mobile-cards td[colspan] { display: block; }
    .ledger-mobile-cards td[colspan]::before { content: none; }
    .ledger-mobile-cards .stamp { justify-self: start; }
    .ledger-mobile-cards .template-name-link { min-width: 0; overflow-wrap: anywhere; }

    .settings-nav {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }
    .settings-nav a { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 360px) {
    .desk-main { padding-inline: 10px; }
    .metric-grid { grid-template-columns: 1fr; }
    .page-actions .btn { width: 100%; }
}

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

/* ══════════════════════════════════════════════════════════════════════
   Legacy bridge
   The wizard forms (agreement_form, tenancy, sales advice, acroform), the
   template editor and the overlay editor were written against the old host
   project's main.css / internal.css, which the desk shell no longer loads.
   This section gives those class names a home in the notebook system and
   repoints the old --agreement-* tokens at paper, ink and pen so every page
   under /_internal/ reads as one product.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body.internal-body {
    /* Old wizard tokens → notebook tokens (body beats the page-level :root). */
    --agreement-orange: var(--pen);
    --agreement-orange-deep: #173f80;
    --agreement-orange-glow: rgba(32, 80, 158, .18);
    --agreement-orange-soft: rgba(32, 80, 158, .08);
    --agreement-surface: var(--paper-2);
    --agreement-panel: var(--paper-3);
    --agreement-page: var(--paper);
    --agreement-border: var(--line);
    --agreement-border-strong: var(--line-strong);
    --agreement-text: var(--ink);
    --agreement-text-soft: var(--ink);
    --agreement-muted: var(--ink-soft);
    --agreement-muted-light: var(--pencil);
    --agreement-shadow: var(--shadow-card);
    --agreement-radius: 3px;
    --agreement-radius-sm: 3px;
    /* Detail page tokens */
    --orange: var(--pen);
    --orange-hover: #173f80;
    --orange-glow: rgba(32, 80, 158, .18);
    --orange-tint: rgba(32, 80, 158, .08);
    --orange-mid: rgba(32, 80, 158, .15);
    --page-bg: var(--paper);
    --surface: var(--paper-2);
    --panel-bg: var(--paper-3);
    --border: var(--line);
    --border-md: var(--line-strong);
    --text: var(--ink);
    --text-2: var(--ink);
    --muted: var(--ink-soft);
    --muted-light: var(--pencil);
    --radius: 3px;
    --radius-sm: 3px;
    --radius-xs: 3px;
    --shadow: var(--shadow-card);
}

/* Wizard shells: paper instead of white glass, ink instead of slate. */
.internal-body .agreement-wizard-shell,
.internal-body .agr-detail { font-family: var(--body); }
.internal-body .agreement-wizard-topbar,
.internal-body .agreement-card,
.internal-body .agreement-side-card,
.internal-body .agreement-action-card,
.internal-body .agreement-mode-card {
    background: var(--paper-2);
    border-radius: 3px;
    box-shadow: var(--shadow-card);
    backdrop-filter: none;
}
.internal-body .agreement-card-head,
.internal-body .agreement-side-card-head,
.internal-body .agreement-action-card-head {
    background: var(--paper-3);
    border-bottom: 1.5px solid var(--line-strong);
}
.internal-body .agreement-page-heading h1,
.internal-body .agreement-card-head h2,
.internal-body .agreement-side-card-head h3,
.internal-body .agreement-action-card-head h3 {
    font-family: var(--hand);
    font-weight: 700;
    letter-spacing: 0;
}
.internal-body .agreement-page-heading h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.internal-body .agreement-card-head h2 { font-size: 1.45rem; }
.internal-body .agreement-side-card-head h3,
.internal-body .agreement-action-card-head h3 { font-size: 1.25rem; text-transform: none; letter-spacing: 0; }
.internal-body .agreement-form label,
.internal-body .agreement-label {
    font-family: var(--hand);
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}
.internal-body .agreement-form input[type="text"],
.internal-body .agreement-form input[type="email"],
.internal-body .agreement-form input[type="date"],
.internal-body .agreement-form input[type="time"],
.internal-body .agreement-form input[type="number"],
.internal-body .agreement-form select,
.internal-body .agreement-form textarea,
.internal-body .agreement-form input[type="file"] {
    border-radius: 6px;
    border: 1.5px solid var(--line-strong);
    font-family: var(--body);
    font-size: 14.5px;
    max-width: 100%;
}
.internal-body .agreement-form input:focus,
.internal-body .agreement-form select:focus,
.internal-body .agreement-form textarea:focus {
    border-color: var(--pen);
    box-shadow: 0 0 0 3px var(--pen-soft);
}
.internal-body .agreement-back-link { border-radius: 8px; background: var(--paper-2); color: var(--ink); }
.internal-body .agreement-back-link:hover { color: var(--pen); border-color: var(--pen); }
.internal-body .agreement-title-icon { background: var(--pen-soft); color: var(--pen); box-shadow: none; border-radius: 8px; }
.internal-body .agreement-step {
    font-family: var(--hand);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 8px 8px 0 0;
}
.internal-body .agreement-step.is-active { background: var(--sticky-yellow); color: var(--ink); box-shadow: var(--shadow-hard); }
.internal-body .agreement-step.is-active .agreement-step-num { background: var(--ink); color: var(--sticky-yellow); }
.internal-body .agreement-step.is-complete .agreement-step-num { background: var(--green); color: #fff; }

/* Buttons inside the wizards inherit the notebook button voice. */
.internal-body .agreement-inline-actions .btn,
.internal-body .agreement-action-card .btn,
.internal-body .agreement-action-row .btn {
    font-family: var(--hand);
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: none;
    width: auto;
    max-width: 100%;
}
.internal-body .agreement-action-row { display: flex; flex-wrap: wrap; gap: 10px; }
.internal-body .agreement-action-row .btn { flex: 1 1 auto; justify-content: center; }
.internal-body .agreement-inline-actions .btn.btn-primary,
.internal-body .agreement-action-card .btn.btn-primary,
.internal-body .agreement-action-row .btn.btn-primary {
    background: var(--sticky-yellow);
    color: var(--ink);
    border: 1.5px solid var(--line-strong);
    box-shadow: var(--shadow-hard);
}
.internal-body .agreement-inline-actions .btn.btn-outline,
.internal-body .agreement-action-card .btn.btn-outline,
.internal-body .agreement-action-row .btn.btn-outline {
    background: var(--paper-2);
    color: var(--ink);
    border: 1.5px dashed var(--line-strong);
}

/* internal-* classes still used by the template editor, overlay editor and
   a few settings pages. */
.internal-main { max-width: none; padding: 0; }
.internal-page-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 18px; flex-wrap: wrap; margin: 6px 0 22px;
}
.internal-page-title {
    font-family: var(--hand); font-weight: 700;
    font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1.05; margin: 0; color: var(--ink);
}
.internal-page-subtitle { margin: 6px 0 0; color: var(--ink-soft); font-size: 14.5px; }
.internal-page-actions, .internal-header-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.internal-card {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: var(--shadow-card);
    padding: 22px;
}
.internal-card + .internal-card { margin-top: 18px; }
.internal-card-title {
    font-family: var(--hand); font-weight: 700; font-size: 1.45rem;
    margin: 0 0 12px; color: var(--ink);
}
.internal-help { color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }
.internal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.internal-span-2 { grid-column: span 2; }
.internal-grid .form-group { margin: 0; display: grid; gap: 6px; }
.internal-grid .form-group > label,
.internal-card .form-group > label {
    font-family: var(--hand); font-weight: 600; font-size: 1.08rem; color: var(--ink);
}
.internal-input,
.internal-card input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.internal-card select,
.internal-card textarea {
    width: 100%;
    font-family: var(--body);
    font-size: 14.5px;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--line-strong);
    border-radius: 6px;
    padding: 9px 13px;
    min-height: 42px;
}
.internal-card textarea { min-height: 120px; resize: vertical; }
.internal-card textarea.template-editor { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; min-height: 320px; }
.internal-input:focus,
.internal-card input:focus,
.internal-card select:focus,
.internal-card textarea:focus {
    outline: none; border-color: var(--pen); box-shadow: 0 0 0 3px var(--pen-soft);
}
.internal-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; cursor: pointer; }
.internal-checkbox input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--pen); }
.internal-form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.internal-messages { display: grid; gap: 10px; margin-bottom: 14px; }
.internal-message {
    padding: 12px 16px; border-radius: 3px; font-size: 14.5px;
    box-shadow: var(--shadow-sticky); background: var(--sticky-blue); color: #1e3a8a;
}
.internal-message.success { background: var(--sticky-green); color: #14532d; }
.internal-message.error { background: var(--sticky-pink); color: #7f1d1d; }
.internal-message.warning { background: var(--sticky-yellow); color: #5c3a00; }

@media (max-width: 720px) {
    .internal-grid { grid-template-columns: 1fr; }
    .internal-span-2 { grid-column: auto; }
}

/* Sales advice step pills and the template designer toolbar. */
.internal-body .sales-step {
    font-family: var(--hand); font-size: 1.1rem; font-weight: 600;
    letter-spacing: 0; text-transform: none;
    background: var(--paper-3); color: var(--ink); border: 1px solid var(--line);
    border-radius: 8px;
}
.internal-body .sales-step.is-active { background: var(--sticky-yellow); box-shadow: var(--shadow-hard); border-color: var(--line-strong); }
.internal-body .sales-step-num { background: var(--ink); color: var(--sticky-yellow); font-family: var(--body); font-size: 12px; }
.internal-body .sales-step.is-active .sales-step-num { background: var(--ink); }
.internal-body .sales-field label,
.internal-body .sales-form label {
    font-family: var(--hand); font-size: 1.08rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.wysiwyg-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.wysiwyg-toolbar button {
    font-family: var(--hand); font-size: 1.05rem; font-weight: 600;
    padding: 6px 12px; border-radius: 8px; cursor: pointer;
    background: var(--paper-2); color: var(--ink); border: 1.5px dashed var(--line-strong);
}
.wysiwyg-toolbar button:hover { background: var(--paper-3); }
.wysiwyg-toolbar button.is-active { background: var(--sticky-yellow); border-style: solid; }
.designer-canvas {
    position: relative; overflow: auto; background: var(--paper-3);
    border: 1px solid var(--line); border-radius: 3px; padding: 24px; margin-bottom: 18px;
}
.designer-page { position: relative; background: #fff; margin: 0 auto; box-shadow: var(--shadow-card); }
.internal-card a { color: var(--pen); text-decoration: underline; text-underline-offset: 3px; }
.internal-body .agreement-card label,
.internal-body .agreement-side-card label,
.internal-body .agreement-action-card label {
    font-family: var(--hand); font-size: 1.08rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink);
}
.internal-body .agreement-checkbox-card label { font-family: var(--body); font-size: 14.5px; }