@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@400;500&display=swap');

/* ── Design Tokens ───────────────────────────────────────────── */
:root {
    /* Brown scheme for this deployment. --accent is redefined rather than
       patched per-rule, so decorative flourishes that ride on it (section
       rules, streaming borders, status dots) move with the palette instead
       of being left behind as yellow. */
    --accent:        #6B4423;
    --accent-dark:   #4F3119;
    /* Inactive controls: near-white fill with brown lettering; on hover they
       invert to the solid brown with white lettering. The fill is the same
       #F1F1ED as the page itself, so it contributes nothing visually and
       --beige-border is the only thing defining the button edge. Do not drop
       it, and do not lighten it below 3:1 against the page. */
    --beige:         #f1f1ed;
    --beige-border:  #A67C52;
    --text:          #000000;
    --text-muted:    #0a0a0a;
    --border:        #e0e0e0;
    --border-focus:  #0a0a0a;
    --error:         #c0392b;
    --success:       #1a7a4a;
    --radius:        8px;
    --ease:          200ms ease;
}

/* ── Base Reset ──────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #F1F1ED;
    color: var(--text);
    line-height: 1.6;
    /* no overflow:hidden, no flex — walkthrough pages need to scroll */
}

/* ── Login page: full-screen centred layout ──────────────────── */
/* Add class="page-login" to <body> on index.html only            */
body.page-login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

/* ── Content wrapper (all pages) ────────────────────────────── */
.landing-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
    /* Transparent rather than a colour of its own, so the page background
       shows through on every module page. */
    background: transparent;
}

/* ── Section heading ─────────────────────────────────────────── */
.section-title {
    text-align: center;
    margin-bottom: 28px;
}
.section-title h3 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    text-transform: capitalize;
    margin: 0;
}
.section-title h3 span {
    font-weight: 400;
}
.section-title span.line {
    display: inline-block;
    background: #333;
    height: 1px;
    width: 28%;
    position: relative;
    margin: 14px auto 16px;
}
.section-title span.line::before {
    content: "";
    position: absolute;
    height: 5px;
    width: 50px;
    background: var(--accent);
    top: -2px;
    border-radius: 30px;
    left: 50%;
    margin-left: -25px;
}
.section-title p {
    font-size: 15px;
    color: #000;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ── Base typography ─────────────────────────────────────────── */
h1 { font-size: 22px; font-weight: 600; color: #0f172a; margin-bottom: .75rem; }
h3 { font-size: 22px; font-weight: 600; color: #333; }
p  { font-size: 15px; color: #000; line-height: 1.6; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 30px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background var(--ease), color var(--ease),
                border-color var(--ease), transform var(--ease),
                opacity var(--ease);
    white-space: nowrap;
    vertical-align: middle;
}

/* Primary — brown with white lettering. */
.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

/* Secondary — light fill with brown lettering, reading as an outline button:
   the fill matches the page exactly, so the border alone carries the shape. */
.btn-secondary {
    background: var(--beige);
    color: var(--accent);
    border-color: var(--beige-border);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Spinner inside .btn (shared with analyze & save) */
.bmc-btn-analyze__spinner,
.bmc-btn-save__spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(128,128,128,0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: bmc-spin 0.7s linear infinite;
    flex-shrink: 0;
}
.bmc-btn-analyze--loading .bmc-btn-analyze__spinner,
.bmc-btn-save--loading    .bmc-btn-save__spinner    { display: inline-block; }
.bmc-btn-analyze--loading .bmc-btn-analyze__label,
.bmc-btn-save--loading    .bmc-btn-save__label      { opacity: 0.7; }

@keyframes bmc-spin { to { transform: rotate(360deg); } }

/* ── Loading state ───────────────────────────────────────────── */
.bmc-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 28px 0;
    color: #888;
    font-size: 14px;
}
.bmc-loading__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: bmc-spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* ── Textareas used in wizard / entry ────────────────────────── */
textarea.form-group {
    display: block;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #333;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    resize: vertical;
    line-height: 1.6;
    transition: border-color var(--ease), box-shadow var(--ease);
}
textarea.form-group:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(107, 68, 35, 0.2);
}
.bmc-textarea--streaming {
    background: #fffef5 !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(107, 68, 35, 0.2) !important;
    color: #555 !important;
}

/* ── Editor chrome ───────────────────────────────────────────── */
.contact {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 16px;
}
.bmc-editor-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
}
.bmc-editor-label {
    font-size: 13px;
    font-weight: 700;
    color: #444;
}
.bmc-char-count {
    font-size: 12px;
    color: #aaa;
    flex-shrink: 0;
}
.bmc-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.bmc-editor-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.bmc-saved-msg {
    font-size: 12px;
    color: #aaa;
    flex-shrink: 0;
}

/* ── Toast notifications ─────────────────────────────────────── */
.bmc-toast {
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-top: 12px;
}
.bmc-toast--error   { background: #fff0ee; color: var(--error);   border: 1px solid #f5c0bb; }
.bmc-toast--success { background: #edfaf3; color: var(--success); border: 1px solid #a8e8c4; }

/* ── Confirm overlay (AI analysis) ──────────────────────────── */
.bmc-analyze-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bmc-analyze-overlay[hidden] { display: none; }

.bmc-analyze-modal {
    background: #fff;
    border-radius: var(--radius);
    padding: 32px 36px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
    text-align: center;
}
.bmc-analyze-modal p {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 24px;
}
.bmc-analyze-modal__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ── Wizard section navigation (prev / next) ─────────────────── */
.bmc-section-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #eee;
    gap: 10px;
}

/* ── Tips card (bmc-entry) ───────────────────────────────────── */
.bmc-tips__card {
    background: #fffef5;
    border: 1px solid #f0e280;
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-top: 4px;
}
.bmc-tips__card > p {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 10px;
}
.bmc-tips__list {
    list-style: none;
    padding: 0;
}
.bmc-tips__list li {
    font-size: 13px;
    color: #555;
    padding: 3px 0;
    line-height: 1.5;
}

/* ── Utility shims (replace Bootstrap needs) ─────────────────── */
.text-center { text-align: center; }
.mx-auto     { margin-left: auto; margin-right: auto; }
.col-lg-10   { width: 100%; max-width: 820px; margin: 0 auto; }
.col-lg-12   { width: 100%; }

/* ── Caution section (inline in wizard/entry/dashboard) ──────── */
.bmc-caution {
    text-align: center;
    padding: 28px 0 8px;
    border-top: 1px solid var(--border);
    margin-top: 12px;
}
.bmc-caution h3 {
    font-size: 18px;
    margin-bottom: 10px;
}
.bmc-caution h3 span { font-weight: 400; }
.bmc-caution p {
    font-size: 13px;
    color: #777;
    max-width: 660px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .landing-container  { padding: 1rem 1rem 2rem; }
    .bmc-editor-actions { flex-direction: column; }
    .bmc-section-nav    { flex-direction: column; gap: 10px; }
    .btn                { width: 100%; justify-content: center; }
    .bmc-analyze-modal  { padding: 24px 20px; }
}


/* ── Tool / report row list ──────────────────────────────────
   Shared by dashboard.php (advisor tools) and client-dashboard.php
   (a client's saved reports).

   A single column of rows, not a wrapped card grid. The advisor page was
   flex-wrap with `flex: 1; max-width: 380px`, so any count that is not a
   multiple of three left the final row stretched and centred under the
   gap. The client page is worse: its cards render conditionally, so the
   count varies per user and no fixed column count is ever right. Rows
   have no such failure mode at any count.

   The whole row is the link, so the hit target is the full width and
   there is no repeated button.

   Colour is set by two custom properties so one component serves both
   pages — see .tool-list--navy below. ---------------------------------- */
/* ── Tool groups ─────────────────────────────────────────────
   The tool list outgrew a single run of rows. Grouping keeps it scannable and
   gives each new tool an obvious home — a flat list of ten reads as a wall.

   A group holding one tool is deliberate, not an oversight: Marketing and
   Advisor Tools are seeded categories that the roadmap already fills. */
.tool-groups { max-width: 720px; margin: 28px auto 20px; }

.tool-group + .tool-group { margin-top: 26px; }

.tool-group__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #6B5C48;
    margin: 0 0 8px;
    padding-left: 2px;
}

/* Inside a group the list supplies no outer spacing — the group owns that. */
.tool-group .tool-list { margin: 0; max-width: none; }

.tool-list {
    --row-wash:  rgba(107, 68, 35, 0.14);
    --row-glyph: var(--accent);
    --row-hover: #F7F1E8;

    max-width: 720px;
    margin: 28px auto 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;              /* clips row hover fill to the rounded corners */
}

/* Client report page: navy has enough contrast to be a foreground colour,
   so the glyph itself is navy over a paler wash of the same hue. */
.tool-list--navy {
    --row-wash:  rgba(27, 58, 107, 0.10);
    --row-glyph: #1B3A6B;
    --row-hover: #f6f8fc;
}

.tool-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: background var(--ease);
}
.tool-row:last-child    { border-bottom: none; }
.tool-row:hover         { background: var(--row-hover); }
.tool-row:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }

/* Shared glyph treatment, so the markup carries only path data. */
.tool-row svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

/* On the advisor page the brand yellow sits at roughly 1.7:1 on white —
   far too light to be a foreground colour — so it appears only as a wash
   and the glyph stays black. */
.tool-row__icon {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--row-wash);
    color: var(--row-glyph);
}
.tool-row__icon svg { width: 21px; height: 21px; }

.tool-row__body    { flex: 1; min-width: 0; }
.tool-row__body h4 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 2px; }
/* Deliberately not var(--text-muted): that token is #0a0a0a, which is
   indistinguishable from --text and would flatten title against summary. */
.tool-row__body p  { font-size: 13.5px; color: #565656; line-height: 1.5; margin: 0; }

.tool-row__go     { flex: none; color: #565656; transition: transform var(--ease); }
.tool-row__go svg { width: 18px; height: 18px; }
.tool-row:hover .tool-row__go { transform: translateX(3px); }

@media (max-width: 560px) {
    .tool-row           { gap: 14px; padding: 15px 16px; }
    .tool-row__icon     { width: 36px; height: 36px; }
    .tool-row__icon svg { width: 18px; height: 18px; }
    .tool-row__go       { display: none; }
}

.home-logout          { text-align: center; padding: 4px 0 8px; }

/* ── Section wrapper ─────────────────────────────────────────── */
.su-section {
    text-align: center;
    max-width: 600px;
    padding: 2rem;
}
#signup.su-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Panel ───────────────────────────────────────────────────── */
.su-panel {
    width: 100%;
    max-width: 480px;
    animation: su-fade-up 0.35s ease both;
}
.su-panel--hidden { display: none; }
.su-panel__inner  { text-align: center; }

/* ── Typography ──────────────────────────────────────────────── */
.su-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.su-heading {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 12px;
}
.su-subtext {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.6;
    margin: 0 0 28px;
}

/* ── Form ────────────────────────────────────────────────────── */
.su-form  { text-align: left; }
.su-field { display: flex; flex-direction: column; margin-bottom: 20px; }

.su-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 8px;
}

.su-input {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: #000;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 12px 24px;
    outline: none;
    width: 100%;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.su-input::placeholder { color: #bbb; }
.su-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(107, 68, 35, 0.25);
}
.su-input.su-input--invalid { border-color: var(--error); }

/* ── Field errors ────────────────────────────────────────────── */
.su-error {
    font-size: 12px;
    color: var(--error);
    margin-top: 5px;
    min-height: 16px;
}
.su-error--center { display: block; text-align: center; margin-bottom: 12px; }

/* ── Signup/Login buttons ────────────────────────────────────── */
.su-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--ease), color var(--ease),
                border-color var(--ease), transform var(--ease);
    margin-top: 8px;
}
.su-btn--primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.su-btn--primary:hover:not(:disabled) {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    transform: translateY(-1px);
}
.su-btn--ghost {
    background: var(--beige);
    color: var(--accent);
    border-color: var(--beige-border);
    margin-top: 12px;
    font-size: 12px;
}
.su-btn--ghost:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.su-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Button spinner */
.su-btn__spinner {
    display: none;
    width: 16px; height: 16px;
    border: 2px solid rgba(128,128,128,0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: bmc-spin 0.7s linear infinite;
    flex-shrink: 0;
}
.su-btn--loading .su-btn__spinner { display: block; }
.su-btn--loading .su-btn__label   { opacity: 0.6; }

/* ── OTP boxes ───────────────────────────────────────────────── */
.su-otp-boxes {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 8px;
}
.su-otp-box {
    width: 52px;
    height: 60px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    caret-color: transparent;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.su-otp-box:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(107, 68, 35, 0.25);
}
.su-otp-box.su-otp-box--filled  { border-color: var(--text); background: #fafafa; }
.su-otp-box.su-otp-box--invalid { border-color: var(--error); animation: su-shake 0.35s ease; }

/* ── Toasts (login page) ─────────────────────────────────────── */
.su-toast {
    font-size: 13px;
    font-weight: 600;
    padding: 13px 16px;
    border-radius: var(--radius);
    margin-top: 16px;
    text-align: center;
}
.su-toast--error   { background: #fff0ee; color: var(--error);   border: 1px solid #f5c0bb; }
.su-toast--success { background: #edfaf3; color: var(--success); border: 1px solid #a8e8c4; }

/* ── Tab switcher ────────────────────────────────────────────── */
.su-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 32px;
    border-bottom: 2px solid var(--border);
    width: 100%;
    max-width: 480px;
}
/* Kept in sync with signup.css, which loads after this file on index.html. */
.su-tab {
    flex: 1;
    background: var(--beige);
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: -2px;
    padding: 12px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    cursor: pointer;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.su-tab:hover:not(.su-tab--active) { background: var(--accent); color: #fff; }
.su-tab--active     { background: var(--accent); color: #fff; border-bottom-color: var(--accent-dark); }
.su-flow--hidden    { display: none; }

/* ---------------------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------------------ */
.main-footer {
    background: #AFAF98;
    padding: 14px 28px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #654629;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes su-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes su-shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-6px); }
    40%     { transform: translateX(6px); }
    60%     { transform: translateX(-4px); }
    80%     { transform: translateX(4px); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SITE BACKDROP
   Two soft khaki bands and a diagonal ribbon out of the bottom-right corner.
   Prototyped on the login page, now applied site-wide.

   WHY PSEUDO-ELEMENTS AND NOT A body BACKGROUND
   As background-image percentages on <body>, the bands scale to DOCUMENT height:
   on a short login screen a 24% band is a thin edge, on the cash flow tool it
   becomes a thousand-pixel wash. Both layers are therefore fixed elements sized
   in viewport units, so they read identically on a login box and on a page that
   scrolls for several screens. background-attachment:fixed would also have solved
   it and is not used deliberately — it stutters or fails outright in iOS Safari,
   whereas a genuinely fixed element does not.

   WHY z-index:-1
   It puts both layers above the page background but beneath everything in normal
   flow, so no container needs to defend itself with a z-index of its own. Do not
   raise it to 0: positioned layers would then paint OVER the cards and tables.

   KEEP IT QUIET
   This sits behind working forms and financial tables. The alphas are deliberately
   low — noticed on the second look, not the first. If one is raised, re-check the
   ledger table in cashflow.php and the OTP boxes on the login screen.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Bands, top and bottom. On pages carrying .adm-nav the top band sits behind the
   opaque navbar and is effectively invisible; it is kept because the sign-in and
   admin sign-in screens have no navbar and do show it. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(180deg, rgba(175, 175, 150, 0.20) 0%, rgba(175, 175, 150, 0) 24%),
        linear-gradient(0deg,   rgba(175, 175, 150, 0.16) 0%, rgba(175, 175, 150, 0) 20%);
}

/* The corner ribbon. Horizontal stripes on a square rotated about its
   bottom-right corner — far easier to reason about, and to adjust, than placing
   angled gradients by hand. The angle is one number. */
body::after {
    content: "";
    position: fixed;
    right: -12vmax;
    bottom: -16vmax;
    width: 52vmax;
    height: 52vmax;
    transform: rotate(-32deg);
    transform-origin: 100% 100%;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(
        to bottom,
        transparent               0%,  transparent               38%,
        rgba(198, 150, 102, 0.26) 38%, rgba(198, 150, 102, 0.26) 46%,  /* sand ribbon    */
        transparent               46%, transparent               51%,
        rgba(107, 68,  35, 0.13)  51%, rgba(107, 68,  35, 0.13)  54%,  /* brown hairline */
        transparent               54%, transparent              100%
    );
}

/* Small screens: content fills most of the viewport, so the ribbon would run
   under the inputs rather than beside them. Pulled into the corner and lightened. */
@media (max-width: 640px) {
    body::after {
        right: -22vmax;
        bottom: -24vmax;
        opacity: 0.6;
    }
}

/* Anyone who has asked for less visual noise gets the flat beige. */
@media (prefers-reduced-transparency: reduce) {
    body::after { display: none; }
}

/* Paper is not a screen, and a client may be handed a printed projection. */
@media print {
    body::before,
    body::after { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TOOL ICON COLOURS
   Every dashboard row previously drew its disc from the single --row-wash /
   --row-glyph pair on .tool-list, so a dozen rows looked identical and the eye
   had nothing to catch. These modifiers override that pair per row.

   SOLID DISCS, NOT TINTS
   The first attempt used a low-alpha wash of each hue over the white card, in
   keeping with how quiet the rest of this page is. It failed: composited, the six
   discs landed between #E5E7DE and #F0E4E0 — three to eleven points apart out of
   255, which is invisible. A disc that distinguishes one row from another has to
   be the colour, not a hint of it. Same approach njentrepreneur already uses.

   THE PALETTE
   Five earthy hues on the warm arc from terracotta through ochre to olive, all
   within reach of the #AFAF96 khaki and #6B4423 brown already on the page. They
   were selected by maximising the smallest pairwise separation under a saturation
   cap, because picking them by eye kept producing pairs that measured close: the
   smallest gap is now 39/255. Left uncapped the search runs to fire-engine reds,
   which separate beautifully and belong to a different product.

   Glyphs are white and every disc clears 4.5:1 against white — comfortably past
   the 3:1 that SC 1.4.11 asks of a 1.8px stroked icon. If you restyle a disc,
   re-measure; the margin on ochre and olive is the thinnest.
   ═══════════════════════════════════════════════════════════════════════════════ */
.tool-row__icon--umber { --row-wash: #4F3119; --row-glyph: #fff; }
.tool-row__icon--brick { --row-wash: #973521; --row-glyph: #fff; }
.tool-row__icon--ochre { --row-wash: #976F21; --row-glyph: #fff; }
.tool-row__icon--taupe { --row-wash: #6C5937; --row-glyph: #fff; }
.tool-row__icon--olive { --row-wash: #455B20; --row-glyph: #fff; }