/* =====================================================================
   Owen2k6 Business Portal — Stylesheet
   Owen2k6 Network Design Language, deep-skeuomorphic material kit v2:
   varnished planked-wood header with brass beading, coarse woven-fabric
   desk, stitched dark-leather panels, and POLISHED BRASS controls.
   The 2010s aqua gloss survives as finish (gel highlights, bevels) and
   as the network link blue — not as button colour.

   All textures are procedural (inline SVG feTurbulence data-URIs) so the
   portal ships with NO binary assets — one stylesheet, nothing else.
   This file is the design experiment for the wider network re-skin.
   ===================================================================== */

:root {
    --ink:        #ece3d3;   /* warm parchment text on the dark leather     */
    --ink-soft:   #ddd2bd;
    --muted:      #b0a48f;
    --link:       #a7c7ff;   /* network link blue                           */
    --link-hover: #cfe0ff;

    --felt:       #2b2118;   /* leather panel surface                       */
    --felt-edge:  #14100b;
    --slate:      #241b13;   /* content container leather                   */

    --aqua-1:     #fdf3cd;   /* polished brass, top sheen                   */
    --aqua-2:     #dcb254;
    --aqua-3:     #ad7f1a;

    --gold:       #ffcf6b;
    --money:      #7ee08a;

    --line:       #4a3b2a;
    --stitch:     rgba(214,178,120,.38);
    --radius:     9px;
}

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

html, body { min-height: 100vh; }

body {
    margin: 0;
    font: 15px/1.6 Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: var(--ink);
    background-color: #161310;
    /* dark woven fabric: warm lamplight falloff + vignette + coarse weave */
    background-image:
        radial-gradient(ellipse 130% 90% at 50% -10%, rgba(255,235,200,.05), rgba(0,0,0,0) 55%),
        radial-gradient(ellipse 140% 120% at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, rgba(0,0,0,0) 1px 3px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, rgba(0,0,0,0) 1px 3px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' fill='%23181410'/%3E%3Crect width='160' height='160' filter='url(%23f)' opacity='0.5'/%3E%3C/svg%3E");
    background-attachment: fixed;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    overflow-wrap: anywhere;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

code {
    font-family: "Consolas", "Menlo", monospace;
    font-size: 13px;
    color: #ffe6b0;
    background: #171009;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid #000;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}

/* ---------------------------------------------------------------- header
   Varnished planked wood: grain + plank seams + wet top sheen, finished
   with a strip of brass beading along the bottom edge. */
.site-header {
    position: relative;
    padding: 16px 5%;
    color: #fff8ec;
    border-bottom: 3px solid #2c1a0c;
    background-color: #54371c;
    background-image:
        linear-gradient(to bottom, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 16%,
                        rgba(255,255,255,.02) 44%, rgba(0,0,0,.16) 72%, rgba(0,0,0,.38) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1980' height='140'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.12' numOctaves='5' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.31 0 0 0 0 0.18 0 0 0 0 0.07 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='1980' height='140' fill='%236b4423'/%3E%3Crect width='1980' height='140' filter='url(%23w)' opacity='0.75'/%3E%3Cg fill='%23000000' opacity='0.32'%3E%3Crect x='218' width='2' height='140'/%3E%3Crect x='438' width='2' height='140'/%3E%3Crect x='658' width='2' height='140'/%3E%3Crect x='878' width='2' height='140'/%3E%3Crect x='1098' width='2' height='140'/%3E%3Crect x='1318' width='2' height='140'/%3E%3Crect x='1538' width='2' height='140'/%3E%3Crect x='1758' width='2' height='140'/%3E%3Crect x='1978' width='2' height='140'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.07'%3E%3Crect x='0' width='1' height='140'/%3E%3Crect x='220' width='1' height='140'/%3E%3Crect x='440' width='1' height='140'/%3E%3Crect x='660' width='1' height='140'/%3E%3Crect x='880' width='1' height='140'/%3E%3Crect x='1100' width='1' height='140'/%3E%3Crect x='1320' width='1' height='140'/%3E%3Crect x='1540' width='1' height='140'/%3E%3Crect x='1760' width='1' height='140'/%3E%3C/g%3E%3C/svg%3E");
    box-shadow: 0 3px 0 #7a5a34, 0 8px 18px rgba(0,0,0,.65),
                inset 0 1px 0 rgba(255,255,255,.25), inset 0 -14px 22px rgba(0,0,0,.28);
}
/* polished brass beading under the plank */
.site-header::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
    background: linear-gradient(to bottom, #f6d78a, #a9781f);
    box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.header-content {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap;
}
.header-title {
    margin: 0;
    font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
    font-size: 1.85em; font-weight: normal; letter-spacing: .3px;
    text-shadow: 0 2px 3px rgba(0,0,0,.85), 0 1px 0 rgba(0,0,0,.55), 0 0 14px rgba(255,220,150,.18);
}
.header-title a { color: #fff8ec; }
.header-title a:hover { color: #fff; text-decoration: none; }

/* nav — dark leather lozenges that turn brass on hover/active */
.header-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-basis: 100%; order: 3; }
.header-nav a {
    color: #e9d9b8; text-decoration: none;
    padding: 6px 13px; border-radius: 8px;
    border: 1px solid #120d08;
    background: linear-gradient(to bottom, #3a2e22, #241b12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 2px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.35);
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.header-nav a:hover {
    background: linear-gradient(to bottom, #fdf3cd 0%, #f0d489 30%, #dcb254 48%, #c39329 52%, #ad7f1a 84%, #c69c3e 100%);
    border-color: #6b4d10; color: #3a2708;
    text-shadow: 0 1px 0 rgba(255,246,215,.65); text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 3px rgba(96,66,10,.5), 0 2px 4px rgba(0,0,0,.4);
}
.header-nav a.active {
    background: linear-gradient(to bottom, #fdf3cd 0%, #f0d489 30%, #dcb254 48%, #c39329 52%, #ad7f1a 84%, #c69c3e 100%);
    border-color: #6b4d10; color: #3a2708;
    text-shadow: 0 1px 0 rgba(255,246,215,.65);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -2px 3px rgba(96,66,10,.5), 0 2px 4px rgba(0,0,0,.4);
}
/* logged-in identity — an engraved nameplate + a matching log-out lozenge, set
   apart from the nav buttons by a carved groove so it reads as its own thing
   instead of a flat afterthought squeezed against the brass. */
.header-user {
    display: inline-flex; align-items: center; gap: 9px;
    margin-left: 5px; padding-left: 14px;
    border-left: 1px solid rgba(0,0,0,.5);
    box-shadow: -1px 0 0 rgba(255,255,255,.07);
}
.header-user__name {
    padding: 5px 12px; border-radius: 8px;
    color: #f4e8cf; font-size: 13px; font-weight: bold; letter-spacing: .3px;
    background: linear-gradient(to bottom, rgba(0,0,0,.36), rgba(0,0,0,.14));
    border: 1px solid rgba(0,0,0,.55);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.10);
    text-shadow: 0 1px 2px rgba(0,0,0,.75);
}
/* inherits the leather-lozenge look from `.header-nav a` (brass on hover); just
   a touch smaller so it sits as a companion to the name plate, not a nav item. */
.header-user__out { font-size: 12px; padding: 5px 11px; }
/* the name plate shares the title row (top right); the tabs get a row of their own */
.header-content > .header-user { margin-left: auto; border-left: 0; box-shadow: none; padding-left: 0; }
.header-user a {
    color: #e9d9b8; text-decoration: none; border-radius: 8px; border: 1px solid #120d08;
    background: linear-gradient(to bottom, #3a2e22, #241b12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 2px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.35);
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.header-user a:hover, .header-user a.active {
    background: linear-gradient(to bottom, #fdf3cd 0%, #f0d489 30%, #dcb254 48%, #c39329 52%, #ad7f1a 84%, #c69c3e 100%);
    border-color: #6b4d10; color: #3a2708; text-shadow: 0 1px 0 rgba(255,246,215,.65); text-decoration: none;
}

/* ---------------------------------------------------------------- layout
   The content container is a broad stitched-leather desk blotter. */
.site-main { padding: 22px 4% 40px; }
.content-container {
    position: relative;
    max-width: 1200px; margin: 0 auto; padding: 22px 24px 28px;
    background-color: var(--slate);
    background-image:
        linear-gradient(160deg, rgba(255,255,255,.05), rgba(0,0,0,.24)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.19 0 0 0 0 0.14 0 0 0 0 0.10 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='170' height='170' fill='%23231a12'/%3E%3Crect width='170' height='170' filter='url(%23l)' opacity='0.75'/%3E%3C/svg%3E");
    border: 1px solid var(--felt-edge);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 0 46px rgba(0,0,0,.38),
        0 14px 30px rgba(0,0,0,.55);
}
/* saddle stitching just inside the blotter edge */
.content-container::before {
    content: ""; position: absolute; inset: 7px; pointer-events: none;
    border: 1px dashed var(--stitch); border-radius: 9px;
}

h1 { font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 26px; font-weight: normal; margin: 6px 0 4px; color: #f5ead6; text-shadow: 0 2px 3px rgba(0,0,0,.6); }
h2 { font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 19px; font-weight: normal; margin: 0 0 14px; color: #f5ead6; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
h3 { font-size: 15px; margin: 0 0 8px; color: var(--ink); }
.muted { color: var(--muted); }

/* ---------------------------------------------------------------- cards
   Stitched dark-leather panels: grain texture, saddle stitch, deep seat. */
.card {
    position: relative;
    background-color: var(--felt);
    background-image:
        linear-gradient(160deg, rgba(255,255,255,.05), rgba(0,0,0,.24)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.19 0 0 0 0 0.14 0 0 0 0 0.10 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='170' height='170' fill='%23291f16'/%3E%3Crect width='170' height='170' filter='url(%23l)' opacity='0.75'/%3E%3C/svg%3E");
    border: 1px solid var(--felt-edge);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin: 16px 0;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 0 34px rgba(0,0,0,.34),
        0 8px 18px rgba(0,0,0,.45);
}
/* saddle stitching just inside the edge */
.card::before {
    content: ""; position: absolute; inset: 6px; pointer-events: none;
    border: 1px dashed var(--stitch); border-radius: 6px;
}
.card > h2:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- tables */
.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { text-align: left; padding: 10px 12px; overflow-wrap: break-word; }
/* body uses overflow-wrap:anywhere, which also lets browsers shrink table columns to a few
   letters ("Unit|ed|King|dom"); cells break words only when one really cannot fit, and
   short labels / status pills never wrap. */
.nowrap, .status { white-space: nowrap; }
.grid thead th {
    color: #dcbe7e; font-weight: bold; font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
    background: linear-gradient(to bottom, #241b13, #160f0a);
    border-bottom: 1px solid #000;
    box-shadow: inset 0 1px 0 rgba(255,235,190,.08), inset 0 -1px 0 rgba(0,0,0,.5);
    text-shadow: 0 1px 1px rgba(0,0,0,.7);
}
.grid tbody tr { border-bottom: 1px solid rgba(0,0,0,.5); box-shadow: 0 1px 0 rgba(255,255,255,.03); }
.grid tbody tr:nth-child(even) { background: rgba(255,240,210,.022); }
.grid tbody tr:hover { background: rgba(233,190,80,.07); }
.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--money); }

/* ---------------------------------------------------------------- buttons
   POLISHED BRASS gel: bright bar-top sheen, dark turned edge, real weight. */
.btn, button {
    display: inline-block;
    font: bold 13px/1 Verdana, sans-serif;
    color: #3a2708; text-decoration: none; text-shadow: 0 1px 0 rgba(255,246,215,.65);
    padding: 8px 15px; border-radius: 9px; cursor: pointer;
    border: 1px solid #6b4d10;
    background-image: linear-gradient(to bottom, #fdf3cd 0%, #f0d489 30%, #dcb254 48%, #c39329 52%, #ad7f1a 84%, #c69c3e 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 3px rgba(96,66,10,.5),
                inset 0 0 0 1px rgba(255,235,180,.28), 0 3px 6px rgba(0,0,0,.5),
                0 1px 0 rgba(255,255,255,.05);
}
.btn:hover, button:hover {
    text-decoration: none;
    background-image: linear-gradient(to bottom, #fff8dc 0%, #f6dfa0 30%, #e6c168 48%, #d1a238 52%, #bb8d24 84%, #d3ab4e 100%);
}
.btn:active, button:active {
    transform: translateY(1px);
    background-image: linear-gradient(to bottom, #d9b358, #c1922d);
    box-shadow: inset 0 2px 5px rgba(80,52,8,.6), 0 1px 2px rgba(0,0,0,.4);
}

/* destructive: red enamel over the same brass forms */
button.danger, .btn.danger {
    color: #3d0d04; text-shadow: 0 1px 0 rgba(255,220,210,.5); border-color: #6e1f10;
    background-image: linear-gradient(to bottom, #f0b3a6 0%, #d96a55 40%, #b03a26 52%, #942c1a 88%, #a94a32 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 3px rgba(80,16,6,.55),
                inset 0 0 0 1px rgba(255,200,185,.25), 0 3px 6px rgba(0,0,0,.5);
}
button.danger:hover, .btn.danger:hover {
    background-image: linear-gradient(to bottom, #f6c3b6 0%, #e37a64 40%, #c04833 52%, #a23823 88%, #b65a41 100%);
}
button.danger:active, .btn.danger:active {
    background-image: linear-gradient(to bottom, #c05540, #96301c);
    box-shadow: inset 0 2px 5px rgba(60,10,4,.6), 0 1px 2px rgba(0,0,0,.4);
}

.inline { display: inline-block; margin: 0 5px 5px 0; vertical-align: middle; }
.actions form { display: inline-block; }

/* ---------------------------------------------------------------- forms */
label { display: block; margin: 12px 0; color: var(--ink-soft); font-size: 13px; }
label.check { display: flex; align-items: center; gap: 9px; }
input[type=text], input[type=password], select {
    width: 100%; max-width: 340px; margin-top: 5px;
    padding: 9px 11px; color: #f1e9d6;
    background: #151009; border: 1px solid #000; border-radius: 7px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.72), inset 0 -1px 0 rgba(255,255,255,.05);
    font: 14px Verdana, sans-serif;
}
input[type=text]:focus, input[type=password]:focus, select:focus {
    outline: none; border-color: #a9781f;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.72), 0 0 0 2px rgba(233,190,80,.4);
}
.inline input[type=text], .inline select { width: auto; display: inline-block; margin-top: 0; }

textarea {
    width: 100%; max-width: 520px; margin-top: 5px;
    padding: 9px 11px; color: #f1e9d6;
    background: #151009; border: 1px solid #000; border-radius: 7px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.72), inset 0 -1px 0 rgba(255,255,255,.05);
    font: 13px Consolas, Menlo, monospace; resize: vertical;
}
textarea:focus {
    outline: none; border-color: #a9781f;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.72), 0 0 0 2px rgba(233,190,80,.4);
}

.perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 16px; margin: 10px 0; }
.perms label.check { margin: 3px 0; }
.rank { border-top: 1px solid rgba(0,0,0,.5); box-shadow: 0 -1px 0 rgba(255,255,255,.04); padding: 14px 0; }
.rank:first-of-type { border-top: 0; box-shadow: none; }
.rank-actions { margin-top: 10px; }

/* ---------------------------------------------------------------- badges
   Small enamelled pills — semantic hue kept, brass-era gel finish. */
.tag {
    font-size: 11px; font-weight: bold; padding: 2px 9px; border-radius: 10px; vertical-align: middle;
    color: #05301a; background: linear-gradient(to bottom, #9df0b4, #43c46b);
    border: 1px solid #1c7a3e;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 2px rgba(0,40,15,.35), 0 1px 2px rgba(0,0,0,.4);
}
.status {
    font-size: 11px; font-weight: bold; padding: 3px 10px; border-radius: 10px; text-transform: uppercase; letter-spacing: .5px;
    border: 1px solid rgba(0,0,0,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 2px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4);
    text-shadow: 0 1px 1px rgba(0,0,0,.45);
}
.status.open { color: #e3f0ff; background: linear-gradient(to bottom, #3a6fc8, #1e3f86); }
.status.paid { color: #d3fce4; background: linear-gradient(to bottom, #279a68, #0c4e33); }
.status.void { color: #eceadf; background: linear-gradient(to bottom, #5c584e, #34322b); }

/* ---------------------------------------------------------------- alerts
   Leather patches with the same saddle stitch as the panels. */
.alert {
    position: relative;
    padding: 12px 15px; border-radius: 8px; margin: 14px 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 18px rgba(0,0,0,.3), 0 3px 8px rgba(0,0,0,.35);
}
.alert::before {
    content: ""; position: absolute; inset: 4px; pointer-events: none;
    border: 1px dashed rgba(255,255,255,.16); border-radius: 5px;
}
.alert.ok  { background: linear-gradient(to bottom, #17402a, #0d2b1c); color: #b8f3ce; border: 1px solid #1c7a45; }
.alert.ok::before { border-color: rgba(160,240,190,.28); }
.alert.err { background: linear-gradient(to bottom, #3c1a14, #2a100c); color: #ffc9c0; border: 1px solid #8a2a1c; }
.alert.err::before { border-color: rgba(255,170,150,.28); }

/* ---------------------------------------------------------------- footer */
.site-footer {
    max-width: 1200px; margin: 26px auto 0; padding: 18px 24px;
    color: #a39680; font-size: 13px; line-height: 1.7;
    border-top: 1px solid rgba(255,255,255,.07);
}
.site-footer .copyright { color: #8f8370; }
.site-footer a { color: var(--link); }

/* ---------------------------------------------------------------- login
   A stitched-leather folio sitting on the fabric desk. */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.login-card {
    width: 380px; max-width: 92vw; padding: 30px 30px 34px;
    background-color: var(--felt);
    background-image:
        linear-gradient(160deg, rgba(255,255,255,.05), rgba(0,0,0,.24)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.19 0 0 0 0 0.14 0 0 0 0 0.10 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='170' height='170' fill='%23291f16'/%3E%3Crect width='170' height='170' filter='url(%23l)' opacity='0.75'/%3E%3C/svg%3E");
    border: 1px solid var(--felt-edge); border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 0 46px rgba(0,0,0,.38),
        0 18px 40px rgba(0,0,0,.6);
    position: relative;
}
/* saddle stitching just inside the folio edge */
.login-card::before {
    content: ""; position: absolute; inset: 8px; pointer-events: none;
    border: 1px dashed var(--stitch); border-radius: 9px;
}
/* embossed gilt title on the leather cover */
.login-card h1 {
    font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 22px; margin: 0 0 4px;
    text-align: center; color: #f5ead6;
    text-shadow: 0 2px 3px rgba(0,0,0,.75), 0 0 12px rgba(255,220,150,.14);
}
.login-card .lead { text-align: center; margin: 0 0 18px; }
.login-card button { width: 100%; margin-top: 16px; padding: 11px; font-size: 14px; }
.login-card label { margin: 14px 0 0; }
.login-card input[type=text], .login-card input[type=password] { max-width: none; }

/* ---------------------------------------------------------------- cookie notice
   A slim stitched-leather strip along the foot of the window. It never sits over
   the page: while it shows, the page is given its height at the foot (--cn-h,
   set by cookie-notice.php), so the chat composer and the footer stay clear of it. */
body { padding-bottom: var(--cn-h, 0px); }
#cookie-notice {
    position: fixed; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center; gap: 12px 18px; flex-wrap: wrap;
    padding: 8px 16px; z-index: 50;
    color: var(--ink); font-size: 12px; line-height: 1.4;
    background-color: #2e241a;
    background-image:
        linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.26)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.19 0 0 0 0 0.14 0 0 0 0 0.10 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='170' height='170' fill='%23291f16'/%3E%3Crect width='170' height='170' filter='url(%23l)' opacity='0.75'/%3E%3C/svg%3E");
    border-top: 1px solid var(--felt-edge);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 -8px 24px rgba(0,0,0,.45);
}
/* An id selector outranks the UA [hidden] rule, so `el.hidden = true` alone would
   NOT hide the notice — this makes the hidden attribute actually win. */
#cookie-notice[hidden] { display: none; }
#cookie-notice::before {
    content: ""; position: absolute; inset: 4px; pointer-events: none;
    border: 1px dashed var(--stitch); border-radius: 4px;
}
#cookie-notice p { margin: 0; flex: 0 1 auto; }
#cookie-notice .cn-actions { display: flex; gap: 8px; }
#cookie-notice button { padding: 4px 12px; font-size: 12px; min-height: 0; }

@media (max-width: 620px) {
    .header-content { flex-direction: column; align-items: flex-start; }
    .site-main { padding: 16px 3% 32px; }
    .content-container { padding: 16px; }
}

/* owner-only destructive controls, set off from the form above by a groove */
.danger-zone { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.32);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* --- tabbed management page: brass folder tabs on a dark rail --- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 16px; border-bottom: 2px solid rgba(0,0,0,.45); }
.tab {
    padding: 8px 16px; border-radius: 8px 8px 0 0; color: #e9d9b8; text-decoration: none;
    border: 1px solid #120d08; border-bottom: none; position: relative; top: 2px;
    background: linear-gradient(to bottom, #3a2e22, #241b12);
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.tab:hover { color: #fff; text-decoration: none; }
.tab.active {
    background: linear-gradient(to bottom, #fdf3cd 0%, #f0d489 30%, #dcb254 48%, #c39329 52%, #ad7f1a 84%, #c69c3e 100%);
    border-color: #6b4d10; color: #3a2708; text-shadow: 0 1px 0 rgba(255,246,215,.65);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
/* wide tables (transaction ledger) scroll inside their panel, never the page */
.table-scroll { overflow-x: auto; }


/* =====================================================================
   2k6bank additions
   ---------------------------------------------------------------------
   Everything above this line is goscore.goplex.me's standard wood/brass
   kit (up to, not including, its "GoScore additions"), plus the table
   wrapping fix from roles.staff.owen2k6.com. Below: what a bank and its
   books need - wayfinding, more form controls, status enamel for every
   ledger/product/request state, the account tree, the register, the
   split editor, dashboards and the execution notice.
   FEATURE BUILDERS: append your own rules at the END of this file.
   ===================================================================== */

/* ------------------------------------------------------ header extras */
.header-sub { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #e8cf98; vertical-align: middle; }
.header-user__name small { font-weight: normal; color: #cbb48a; font-size: 11px; margin-left: 4px; }
.nav-badge {
    display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px;
    font: bold 11px/18px Verdana, sans-serif; text-align: center; color: #fff;
    background: linear-gradient(to bottom, #d0503a, #8e2414); border: 1px solid #4d0f06;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

/* ------------------------------------------------------ wayfinding */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--link); }
.crumbs__sep { color: #7d6c55; }
.crumbs__here { color: var(--ink-soft); }
.next-links { margin: 10px 0 4px; font-size: 13px; color: var(--muted); }
.action-list { margin: 4px 0 6px; padding-left: 20px; }
.action-list li { margin: 6px 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head h1 { margin-right: auto; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.btn.secondary, button.secondary {
    color: #f1e4c8; text-shadow: 0 1px 2px rgba(0,0,0,.6); border-color: #120d08;
    background-image: linear-gradient(to bottom, #4a3a2a, #2a2017);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 2px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.4);
}
.btn.secondary:hover, button.secondary:hover { background-image: linear-gradient(to bottom, #5a4733, #33271c); color: #fff; }
.btn.small, button.small { padding: 5px 10px; font-size: 12px; }
.linkish { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; color: var(--link); font: inherit; text-shadow: none; cursor: pointer; }
.linkish:hover { text-decoration: underline; color: var(--link-hover); }
.pager { margin: 12px 0; font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------ more form controls */
input[type=number], input[type=date], input[type=search], input[type=email], input[type=datetime-local] {
    width: 100%; max-width: 340px; margin-top: 5px;
    padding: 9px 11px; color: #f1e9d6;
    background: #151009; border: 1px solid #000; border-radius: 7px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.72), inset 0 -1px 0 rgba(255,255,255,.05);
    font: 14px Verdana, sans-serif; color-scheme: dark;
}
input[type=number]:focus, input[type=date]:focus, input[type=search]:focus, input[type=email]:focus, input[type=datetime-local]:focus {
    outline: none; border-color: #a9781f;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.72), 0 0 0 2px rgba(233,190,80,.4);
}
.inline input[type=number], .inline input[type=date], .inline input[type=search] { width: auto; display: inline-block; margin-top: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin: 8px 0 14px; }
.filters label { margin: 0; }
.filters input, .filters select { width: auto; max-width: 220px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 18px; }
.form-grid label { margin: 8px 0; }
.form-grid .wide { grid-column: 1 / -1; }
.hint { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
fieldset { border: 1px solid rgba(0,0,0,.5); border-radius: 8px; padding: 8px 14px 12px; margin: 12px 0; }
legend { color: #dcbe7e; padding: 0 6px; font-size: 13px; }
details > summary { cursor: pointer; color: var(--link); }
details[open] > summary { margin-bottom: 8px; }

/* ------------------------------------------------------ alerts + banners */
.alert.warn { background: linear-gradient(to bottom, #4a3812, #2e220a); color: #ffe4a6; border: 1px solid #8a6a1c; }
.alert.warn::before { border-color: rgba(255,220,140,.28); }
.alert ul { margin: 6px 0 0; padding-left: 20px; }
.banner { margin: 10px 0; padding: 10px 14px; border-radius: 8px; border: 1px solid #000; font-size: 13px; }
.banner.lock { background: linear-gradient(to bottom, #3c1a14, #2a100c); color: #ffc9c0; border-color: #8a2a1c; }
.banner.hold { background: linear-gradient(to bottom, #3a3016, #251e0b); color: #f6e0a8; border-color: #7a6220; }
.banner.info { background: linear-gradient(to bottom, #1d2a3a, #121b26); color: #cfe0ff; border-color: #2c4a72; }
.banner form { display: inline; }

/* ------------------------------------------------------ status enamel (statusPill) */
.status.st-active, .status.st-posted, .status.st-done, .status.st-finished, .status.st-approved
    { color: #d3fce4; background: linear-gradient(to bottom, #279a68, #0c4e33); }
.status.st-pending, .status.st-requested, .status.st-submitted, .status.st-open, .status.st-processing
    { color: #e3f0ff; background: linear-gradient(to bottom, #3a6fc8, #1e3f86); }
.status.st-frozen, .status.st-matured
    { color: #e6f6ff; background: linear-gradient(to bottom, #3a9bb0, #155866); }
.status.st-rejected, .status.st-defaulted, .status.st-failed, .status.st-written_off
    { color: #ffe3dc; background: linear-gradient(to bottom, #c2412c, #7a1d10); }
.status.st-void, .status.st-closed, .status.st-cancelled, .status.st-expired, .status.st-withdrawn, .status.st-unknown
    { color: #eceadf; background: linear-gradient(to bottom, #5c584e, #34322b); }
.rstate { display: inline-block; width: 20px; text-align: center; border-radius: 5px; font: bold 11px/18px Consolas, monospace; border: 1px solid #000; }
.rstate.n { color: #b0a48f; background: #1a130c; }
.rstate.c { color: #3a2708; background: linear-gradient(to bottom, #f0d489, #c39329); }
.rstate.y { color: #d3fce4; background: linear-gradient(to bottom, #279a68, #0c4e33); }
.rstate-form button { padding: 0; background: none; border: 0; box-shadow: none; }

/* ------------------------------------------------------ numbers */
.num.neg, .neg { color: #ff9f8a; }
.num.zero { color: var(--muted); }
.num.total, tr.total td { font-weight: bold; }
tr.total td { border-top: 2px solid rgba(0,0,0,.6); }
.amount-big { font: bold 24px/1.2 "Trebuchet MS", Verdana, sans-serif; color: var(--money); }
.amount-big.neg { color: #ff9f8a; }

/* ------------------------------------------------------ dashboard tiles */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 12px 0; }
.stat {
    position: relative; padding: 12px 14px; border-radius: 9px; border: 1px solid #000;
    background: linear-gradient(to bottom, #2f2419, #1d160f);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 10px rgba(0,0,0,.4);
}
.stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #dcbe7e; }
.stat__value { font: bold 19px/1.3 "Trebuchet MS", Verdana, sans-serif; color: var(--money); margin-top: 4px; }
.stat__value.neg { color: #ff9f8a; }
.stat__sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
a.stat:hover { text-decoration: none; border-color: #a9781f; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.two-col > .card { margin: 16px 0; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }

/* ------------------------------------------------------ account tree */
.tree td.tree-name { white-space: nowrap; }
.tree .indent { display: inline-block; }
.tree tr.depth-0 td { font-weight: bold; background: rgba(255,240,210,.035); }
.tree tr.depth-0 td.tree-name a { color: #f5ead6; }
.tree .placeholder-acct { font-style: italic; }
.tree .hidden-acct, .tree .hidden-acct a { color: var(--muted); }
.tree .role-tag, .tag.muted { color: #3a2708; background: linear-gradient(to bottom, #f0d489, #c39329); border-color: #6b4d10; }
.tag.lock { color: #ffe3dc; background: linear-gradient(to bottom, #c2412c, #7a1d10); border-color: #4d0f06; }
.tag.link { color: #e3f0ff; background: linear-gradient(to bottom, #3a6fc8, #1e3f86); border-color: #0f2350; }

/* ------------------------------------------------------ register */
.register td, .register th { padding: 7px 9px; font-size: 13px; vertical-align: top; }
.register tr.void td { text-decoration: line-through; color: var(--muted); }
.register tr.void td.actions-cell { text-decoration: none; }
.register .split-lines td { background: rgba(0,0,0,.22); font-size: 12px; color: var(--ink-soft); }
.register .actions-cell { white-space: nowrap; }
.register .actions-cell form { display: inline; }
.register .actions-cell a, .register .actions-cell button { margin-right: 4px; }
.register details summary { font-size: 12px; }
.register .running { color: #e8d8b0; }

/* ------------------------------------------------------ split editor */
.split-editor td { padding: 6px; vertical-align: top; }
.split-editor select { max-width: 360px; min-width: 220px; }
.split-editor input[type=text] { max-width: 150px; }
.split-editor input.memo { max-width: 200px; }
.split-editor .qty-cell input { max-width: 140px; }
.split-editor .qty-cell .hint { max-width: 160px; }
.balance-check { margin: 10px 0; padding: 8px 12px; border-radius: 7px; font-weight: bold; border: 1px solid #000; }
.balance-check.ok { color: #b8f3ce; background: #0d2b1c; border-color: #1c7a45; }
.balance-check.bad { color: #ffc9c0; background: #2a100c; border-color: #8a2a1c; }

/* ------------------------------------------------------ rate matrix */
.matrix th, .matrix td { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; padding: 6px 8px; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix td.diag { color: var(--muted); }
.matrix td.peg { color: var(--gold); }

/* ------------------------------------------------------ executed
   The execution notice (executed.php): bare dark leather, no navigation,
   a deep-red accent and a large engraved death clock. */
.executed-body {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; padding: 28px 16px;
}
.executed {
    position: relative; width: 760px; max-width: 100%;
    padding: 34px 36px 30px; text-align: center;
    border: 1px solid #0b0806; border-top: 4px solid #7a1414; border-radius: 14px;
    background-color: #241b13;
    background-image:
        linear-gradient(170deg, rgba(255,255,255,.05), rgba(0,0,0,.30)),
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(122,20,20,.22), rgba(0,0,0,0) 70%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 50px rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.65);
}
.executed::before {
    content: ""; position: absolute; inset: 8px; pointer-events: none;
    border: 1px dashed rgba(190,120,120,.28); border-radius: 9px;
}
.executed__kicker { margin: 0 0 6px; font-size: 11px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; color: #b98686; }
.executed__title {
    margin: 0; font: normal 38px/1.15 "Trebuchet MS", Verdana, sans-serif; letter-spacing: .5px;
    color: #f0e6d6; text-shadow: 0 2px 4px rgba(0,0,0,.8), 0 0 22px rgba(160,24,24,.45);
}
.executed__name { margin: 8px 0 22px; font-size: 18px; font-weight: bold; color: #d9a3a3; letter-spacing: .4px; }
.death-clock {
    display: flex; align-items: flex-start; justify-content: center; gap: 6px;
    margin: 0 auto 10px; padding: 18px 16px 12px; max-width: 600px;
    border-radius: 10px; border: 1px solid #000;
    background: linear-gradient(to bottom, #150f0a, #1d150e);
    box-shadow: inset 0 3px 12px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.06);
}
.death-clock__unit { display: flex; flex-direction: column; align-items: center; min-width: 92px; }
.death-clock__num {
    font: bold 54px/1 "Consolas", "Menlo", monospace; font-variant-numeric: tabular-nums;
    color: #d23a32; text-shadow: 0 0 14px rgba(200,30,30,.55), 0 2px 2px rgba(0,0,0,.9);
}
.death-clock__lbl { margin-top: 6px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #a8987f; }
.death-clock__colon { font: bold 46px/1.1 "Consolas", "Menlo", monospace; color: #6e2a26; }
.death-clock--done .death-clock__num { color: #a89a86; text-shadow: none; }
.executed__until { margin: 0 0 18px; color: var(--ink-soft); }
.executed__text { margin: 0 auto 18px; max-width: 600px; color: var(--ink); }
.executed__record {
    margin: 0 auto 16px; max-width: 600px; padding: 6px 16px; text-align: left;
    border-radius: 8px; border: 1px solid #0b0806; border-left: 3px solid #7a1414;
    background: linear-gradient(to bottom, #1d150e, #160f0a);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.6);
}
.executed__row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid rgba(0,0,0,.5); }
.executed__row:first-child { border-top: 0; }
.executed__row dt { color: var(--muted); font-size: 13px; }
.executed__row dd { margin: 0; text-align: right; }
.executed__permanent { margin: 0 0 18px; font-size: 13px; font-weight: bold; color: #d9a3a3; }
.executed__out a {
    display: inline-block; padding: 8px 22px; border-radius: 8px; color: #f1e4c8;
    border: 1px solid #0b0806; background: linear-gradient(to bottom, #4a3a2a, #2a2017);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 4px rgba(0,0,0,.4);
}
.executed__out a:hover { color: #fff; text-decoration: none; border-color: #7a1414; }
.executed__foot { margin-top: 18px; font-size: 12px; color: #8f8370; }
@media (max-width: 620px) {
    .executed { padding: 26px 18px 22px; }
    .executed__title { font-size: 28px; }
    .death-clock__unit { min-width: 56px; }
    .death-clock__num { font-size: 32px; }
    .death-clock__colon { font-size: 28px; }
    .executed__row dd { text-align: left; }
}

/* ------------------------------------------------------ customer portal + teller queue
   (portal.php, statement.php, open.php, cash.php, queue.php, cash-request.php) */
.product-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 16px; }
.product-cards > .product-card { margin: 12px 0; display: flex; flex-direction: column; }
.product-card h2 { margin: 0 0 4px; font-size: 20px; }
.product-card .btn { margin-top: auto; align-self: flex-start; }
.example-box {
    margin: 8px 0 12px; padding: 10px 14px; border-radius: 8px; border: 1px solid #000;
    background: linear-gradient(to bottom, #2b2116, #1c150e);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.55);
}
.example-box p { margin: 6px 0; }
.example-box strong { color: var(--money); }
.confirm-pay { border-top: 4px solid #a9781f; }
.confirm-pay th { width: 30%; white-space: nowrap; color: #dcbe7e; }
.timeline { list-style: none; margin: 6px 0 12px; padding: 0 0 0 4px; }
.timeline li { position: relative; padding: 4px 0 8px 24px; border-left: 2px solid rgba(0,0,0,.55); margin-left: 6px; }
.timeline li::before {
    content: ""; position: absolute; left: -8px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
    border: 1px solid #000; background: #3a2e20;
}
.timeline li.done::before { background: linear-gradient(to bottom, #279a68, #0c4e33); }
.timeline li.failed::before { background: linear-gradient(to bottom, #c2412c, #7a1d10); }
.timeline li:last-child { border-left-color: transparent; }
.queue td { vertical-align: top; }
.queue-actions { min-width: 220px; }
.queue-actions form { margin: 0 0 6px; }
.queue-actions input[type=text] { max-width: 200px; padding: 6px 8px; font-size: 12px; margin: 0 0 4px; }
.queue-actions label.check { margin: 2px 0 4px; font-size: 12px; }
.queue-actions details summary { font-size: 12px; margin-bottom: 4px; }
.tab .nav-badge { margin-left: 6px; }

/* ------------------------------------------------------ reconciliation + reports
   (reconcile.php, reports.php, report.php, quarterly.php, close.php) */
.report-meta { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.presets { margin: 4px 0 12px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.presets a.active { color: var(--gold); font-weight: bold; }
.report-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 22px; }
.report-item h3 { margin: 10px 0 2px; font-size: 16px; }
.report-item p { margin: 2px 0 6px; }
.report-item .presets { margin: 0 0 6px; font-size: 12px; }
.report-table td, .report-table th { font-size: 13px; padding: 6px 9px; }
.report-table tr.subtotal td { font-weight: bold; }
.report-table tr.muted td { color: var(--muted); }
.report-table tr.txn-head td { background: rgba(255,240,210,.045); border-top: 2px solid rgba(0,0,0,.55); font-weight: bold; }
.report-table tr.txn-head td .muted { font-weight: normal; }
.report-table tr.void td { text-decoration: line-through; color: var(--muted); }
.report-table tr.q-cat td { font: bold 12px Verdana, sans-serif; text-transform: uppercase; letter-spacing: .8px; color: #dcbe7e; background: rgba(0,0,0,.25); }
.report-notes ul { margin-top: 0; }
.recon-summary .stat__value { font-variant-numeric: tabular-nums; }
.recon-list td:first-child { width: 44px; text-align: center; }
.recon-list input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; }
.card-sub { margin: 14px 0 0; padding: 10px 12px; border: 1px solid rgba(0,0,0,.45); border-radius: 8px; background: rgba(0,0,0,.14); }
.card-sub label { margin: 6px 0; }
.close-form { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.5); }
.save-snapshot { margin-top: 10px; }
.save-snapshot textarea { max-width: 720px; }
.quarterly .q-title { margin: 18px 0 6px; }
.q-kicker { margin: 0; font-size: 11px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; color: #dcbe7e; }
.q-h { margin: 2px 0 4px; font: normal 28px/1.2 "Trebuchet MS", Verdana, sans-serif; }
.q-h .muted { font-size: 16px; }
.q-notes { margin: 6px 0 12px; padding: 10px 14px; border-left: 3px solid #a9781f; background: rgba(0,0,0,.18); border-radius: 6px; }

/* ------------------------------------------------------ print (reports, statements, quarterly)
   Paper is white: drop the leather, the chrome and every control; keep the tables. */
@media print {
    @page { margin: 14mm 12mm; }
    *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
    body { font: 10.5pt/1.4 Georgia, "Times New Roman", serif; background: #fff !important; }
    .site-header, .site-footer, .crumbs, .tabs, .no-print, .filters, .presets, .pager, .page-actions, .next-links,
    #cookie-notice, .alert, .quick-actions, form, details > summary, button, .btn { display: none !important; }
    .site-main, .content-container { margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; border: 0 !important; }
    .content-container::before, .card::before, .card::after { display: none !important; }
    .card { border: 0 !important; margin: 0 0 12pt !important; padding: 0 !important; break-inside: auto; }
    h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
    h2 { font-size: 13pt; border-bottom: 1px solid #000; padding-bottom: 2pt; margin: 10pt 0 6pt; }
    a { text-decoration: none !important; }
    .table-scroll { overflow: visible !important; }
    table.grid { width: 100%; border-collapse: collapse; }
    table.grid th, table.grid td { border-bottom: 1px solid #bbb !important; padding: 3pt 5pt !important; font-size: 9.5pt; }
    table.grid th { border-bottom: 1.5px solid #000 !important; }
    tr { break-inside: avoid; page-break-inside: avoid; }
    tr.total td, tr.subtotal td { font-weight: bold; }
    tr.total td { border-top: 1.5px solid #000 !important; }
    .neg { color: #000 !important; }
    .stat-grid { display: flex !important; flex-wrap: wrap; gap: 6pt; }
    .stat { border: 1px solid #999 !important; padding: 4pt 8pt !important; min-width: 120pt; }
    .status, .tag, .rstate { border: 1px solid #666 !important; padding: 0 3pt; }
    .page-break { break-before: page; page-break-before: always; }
    .q-section { break-inside: auto; }
    .quarterly .q-title { margin-top: 0; }
    .q-notes { border-left: 2px solid #000 !important; }
}

/* =====================================================================
   IMPORT / EXPORT (import.php, export.php)
   ===================================================================== */
.import-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; counter-reset: istep; margin: 6px 0 14px; padding: 0; }
.import-steps li {
    counter-increment: istep; padding: 5px 12px 5px 8px; border-radius: 14px; font-size: 13px; color: var(--muted);
    background: rgba(0,0,0,.25); border: 1px solid rgba(0,0,0,.5);
}
.import-steps li::before {
    content: counter(istep); display: inline-block; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%;
    text-align: center; font: bold 11px/18px Verdana, sans-serif; color: #241b13; background: #8f8370;
}
.import-steps li.done { color: var(--ink-soft); }
.import-steps li.done::before { content: "\2713"; background: #3fa275; color: #fff; }
.import-steps li.here { color: #f6e0a8; border-color: #a9781f; box-shadow: 0 0 0 1px rgba(233,190,80,.35); }
.import-steps li.here::before { background: #e9be50; }
.import-steps a { color: inherit; }
.import-log {
    max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5;
    padding: 10px 12px; color: #e9dfc9; background: #151009; border: 1px solid #000; border-radius: 7px;
}
.import-errors { margin: 6px 0 0; padding-left: 20px; }
label.radio, label.checkbox { display: block; margin: 8px 0; font-weight: normal; }
label.radio input, label.checkbox input { width: auto; margin: 0 6px 0 0; vertical-align: middle; }
label.radio .hint { margin-left: 22px; }
.status.st-staged, .status.st-mapped { color: #e3f0ff; background: linear-gradient(to bottom, #3a6fc8, #1e3f86); }
.status.st-discarded, .status.st-skipped, .status.st-unverifiable { color: #e8e1d3; background: linear-gradient(to bottom, #6d6252, #3f372c); }
.status.st-rounded, .status.st-changed { color: #fff3d0; background: linear-gradient(to bottom, #b8862a, #6e4d10); }
.status.st-mismatch { color: #ffe1db; background: linear-gradient(to bottom, #c4432d, #7a1d10); }

/* ------------------------------------------------------ products & controls (staff)
   catalogue.php, customers.php, customer.php, products.php, product.php,
   wizard.php, runs.php */
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
.three-col > .card { margin: 14px 0; }
@media (max-width: 1100px) { .three-col { grid-template-columns: 1fr; } }
.widget h2 { font-size: 17px; }
.widget .grid td { font-size: 12px; padding: 6px 7px; vertical-align: top; }
.wizard-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.wizard-tile {
    display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 9px; border: 1px solid #000; color: var(--ink);
    background: linear-gradient(to bottom, #2f2419, #1d160f);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 4px 10px rgba(0,0,0,.4);
}
.wizard-tile strong { color: #f1e4c8; font-size: 15px; }
.wizard-tile span { font-size: 12px; color: var(--muted); }
.wizard-tile em { font-size: 11px; font-style: normal; color: #dcbe7e; text-transform: uppercase; letter-spacing: .6px; }
a.wizard-tile:hover { text-decoration: none; border-color: #a9781f; }
.plan-txn { margin: 12px 0 16px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(0,0,0,.6); background: rgba(0,0,0,.18); }
.plan-txn__head { margin-bottom: 6px; font-size: 13px; }
.grid.plan td, .grid.plan th { font-size: 13px; padding: 6px 9px; }
.plan-ok { margin: 6px 0 0; font-size: 12px; color: #b8f3ce; }
.plan-ok::before { content: "\2713  "; }
.plan-card .banner { margin-top: 0; }
.grid.terms th { width: 34%; text-align: left; color: #dcbe7e; font-weight: normal; vertical-align: top; white-space: nowrap; }
.grid.terms td { vertical-align: top; }
.grid.mini { margin: 2px 0; width: auto; }
.grid.mini td, .grid.mini th { font-size: 12px; padding: 4px 8px; }
.grid.editor td { padding: 4px 6px; }
.grid.editor input[type=text], .grid.editor input[type=number], .grid.editor select { margin-top: 0; padding: 6px 8px; font-size: 13px; }
.grid.editor input[type=number] { max-width: 110px; }
ul.plain { margin: 0; padding-left: 18px; }
.schedule tr.overdue td { background: rgba(194,65,44,.14); }
.inline-block { display: inline-block; vertical-align: top; margin: 0 10px 6px 0; }
.catalogue-form fieldset { background: rgba(0,0,0,.12); }
.catalogue-form h3 { font-size: 15px; margin: 12px 0 6px; }
.btn.danger, button.danger { border-color: #4d0f06; }

/* ---------------------------------------------------------------- session (assets/session.js) */
.draft-note { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    background: linear-gradient(to bottom, #3f3114, #2b200b); color: #ffe2a6; border: 1px solid #8a6a1c; }
.draft-note button { margin: 0; }
.session-ended { position: sticky; top: 0; z-index: 1000; margin: 0; padding: 10px 16px; text-align: center;
    background: linear-gradient(to bottom, #3c1a14, #2a100c); color: #ffc9c0; border-bottom: 1px solid #8a2a1c;
    font-size: 14px; }
.session-ended a { color: #fff; font-weight: bold; text-decoration: underline; }

/* ---------------------------------------------------------------- payments (pay.php, standing-orders.php, direct-debits.php, originator.php, payments-desk.php) */
.status.st-paid, .status.st-completed, .status.st-upheld { color: #d3fce4; background: linear-gradient(to bottom, #279a68, #0c4e33); }
.status.st-held, .status.st-scheduled { color: #e3f0ff; background: linear-gradient(to bottom, #3a6fc8, #1e3f86); }
.status.st-suspended, .status.st-refunded { color: #fff3d0; background: linear-gradient(to bottom, #b8862a, #6e4d10); }
.status.st-returned { color: #ffe3dc; background: linear-gradient(to bottom, #c2412c, #7a1d10); }
.banner.cop strong { font-size: 15px; }

/* ---------------------------------------------------------------- ai.goplex.me: the conversation (index.php, assets/chat.js)
   Everything in the thread is a kit component: the player's words sit in an
   .example-box, the assistant's in a .card-sub, each under a .stat__label; a
   line that is the site's and not the assistant's is a quiet .chat-note across
   the middle, with no name over it and no box round it; states are
   .status pills, sources carry .tag badges and the suggestions are small
   secondary buttons. What follows is layout only: the thread fills the height
   of the window under the header, the player on the right and the assistant
   on the left, with the composer pinned beneath it. */
/* --cn-h is the height of the cookie notice while it shows (set by cookie-notice.php, 0 once dismissed): the
   conversation gives up that much so that the notice rests under the composer, never over it. */
.chat { display: flex; flex-direction: column; height: calc(100vh - 215px - var(--cn-h, 0px)); height: calc(100dvh - 215px - var(--cn-h, 0px)); min-height: 320px; }
.chat-top { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.chat-body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0 0 10px; }
.chat-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 10px 2px 2px;
    border-top: 1px solid rgba(0,0,0,.32); border-bottom: 1px solid rgba(0,0,0,.32); }
.chat-thread:focus-visible { outline: 1px dashed var(--stitch); outline-offset: -1px; }
.chat-jump { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); }
.chat-jump:active { transform: translateX(-50%); }
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 14px; }
.chat-msg--you { align-items: flex-end; }
.chat-msg .stat__label { margin: 0 6px 3px; }
.chat-msg .card-sub, .chat-msg .example-box, .chat-msg .chat-note { margin: 0; max-width: min(86%, 780px); overflow-wrap: anywhere; }
.chat-msg--you .example-box { border-bottom-right-radius: 2px; }
.chat-msg--bot .card-sub { border-bottom-left-radius: 2px; }
.chat-msg .card-sub > :first-child, .chat-msg .example-box > :first-child, .chat-msg .chat-note > :first-child { margin-top: 0; }
.chat-msg .card-sub > :last-child, .chat-msg .example-box > :last-child, .chat-msg .chat-note > :last-child { margin-bottom: 0; }
.chat-msg .card-sub .alert { margin: 8px 0; }
/* Only the bubble chat.js builds (a <p> of plain text) keeps its line breaks this way; the server's has <br> already. */
.chat-msg--you .example-box > p { white-space: pre-line; }
/* A line of the site's own (a refusal, a fault, a reply that did not pass, a stopped reply): a quiet small line across
   the middle of the thread, on neither side, in muted text with no box, no name and no colour block. A refusal
   (.chat-note--warn) is the same line in the warm tone the kit uses for a hold. */
.chat-msg--note { align-items: center; margin-bottom: 12px; }
.chat-note { padding: 2px 10px; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
.chat-note p { margin: 0; }
.chat-note--warn { color: #f6e0a8; }
.chat-note .chat-sources, .chat-note details, .chat-note .hint { text-align: left; }
.chat-meta { margin-bottom: 2px; }
/* Under a reply, one small closed line ("Sources (2) · Confidence: high"); opened, the source rows and the standing notes. */
.chat-more { margin: 6px 0 0; font-size: 13px; }
.chat-more > summary { display: inline-block; padding: 0; font-size: 12px; color: var(--muted); }
.chat-more > summary:hover { color: var(--ink-soft); }
.chat-more > summary .status { font-size: 11px; padding: 1px 7px; text-transform: none; letter-spacing: 0; }   /* "confidence high": the kit's pill, in sentence case */
.chat-more[open] > summary { margin-bottom: 6px; }
.chat-more__body > :first-child { margin-top: 0; }
.chat-more__body > :last-child { margin-bottom: 0; }
.chat-more__body .alert { margin: 8px 0; }
.chat-sources { margin: 4px 0 8px; font-size: 13px; }
.chat-sources li { margin: 5px 0; }
.chat-suggest { margin: 8px 0 0 2px; align-items: center; }
.chat-suggest button { text-align: left; }
.chat-empty { margin: auto; padding: 24px 8px; text-align: center; }
.chat-empty .chat-suggest { justify-content: center; margin: 12px 0 0; }
.chat-thread:has(.chat-empty) { display: flex; flex-direction: column; }
/* the composer: one box, the meter, Send (Stop takes its place while a reply is being written); nothing asks which nation */
.chat-composer { flex: 0 0 auto; margin: 0; }
.chat-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.chat-row textarea { flex: 1 1 240px; min-width: 0; max-width: none; min-height: 40px; max-height: 34vh; margin: 0; font: 14px Verdana, sans-serif; resize: none; }
.chat-row button { flex: 0 0 auto; min-width: 76px; min-height: 40px; padding: 10px 16px; }
.chat-meter { flex: 0 0 auto; align-self: center; white-space: nowrap; }
.chat-foot { margin: 6px 2px 0; }
/* read out, not shown: where a message has got to */
.chat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The kit gives buttons and banners a display of their own, which outranks the UA [hidden] rule (as for #cookie-notice). */
.chat [hidden], .card[hidden], form[hidden] { display: none; }
/* the waiting and thinking states: a muted line with three dots that fill in */
.chat-pending .card-sub p { color: var(--muted); font-style: italic; }
.chat-pending .card-sub p::after { content: ""; display: inline-block; width: 1.4em; text-align: left; animation: chat-dots 1.4s steps(4, end) infinite; }
@keyframes chat-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@media (prefers-reduced-motion: reduce) { .chat-pending .card-sub p::after { animation: none; content: "..."; } }
.chat-draft .card-sub p { white-space: pre-wrap; }
/* A draft that failed a check and is being written again: it stays where it is, a little dimmer, with a small muted
   "Checking" line under it that borrows the waiting state's three dots. The checked reply then takes its place in one
   step (chat.js); nothing is wiped and written again before the reader. Same colours and type as the rest. */
.chat-checking .card-sub > p:first-child { opacity: .7; }
.chat-checking .card-sub > .chat-check { margin: 6px 0 0; font-size: 12px; font-style: italic; white-space: normal; }
.chat-checking .chat-check::after { content: ""; display: inline-block; width: 1.4em; text-align: left; animation: chat-dots 1.4s steps(4, end) infinite; }
@media (prefers-reduced-motion: reduce) { .chat-checking .chat-check::after { animation: none; content: "..."; } }
/* A plain POST comes back to #latest: the thread goes to its foot and the page itself stays where it is. */
html:has(#chat) { scroll-padding-top: 100vh; }
@media (max-width: 620px) {
    .chat { height: calc(100vh - 170px - var(--cn-h, 0px)); height: calc(100dvh - 170px - var(--cn-h, 0px)); }
    .chat-msg .card-sub, .chat-msg .example-box, .chat-msg .chat-note { max-width: 94%; }
    /* the box takes the row with Send beside it; the meter sits under them on the left */
    .chat-row textarea { flex: 1 1 calc(100% - 100px); }
    .chat-meter { order: 4; }
}
/* A phone: the header keeps to as few lines as it can (the name plate beside the title where both fit, smaller
   lozenges, and the nav on one line that slides sideways rather than wrapping), so that the conversation under it
   has room. */
@media (max-width: 620px) {
    .site-header { padding: 10px 4%; }
    .header-content { flex-direction: row; align-items: center; gap: 8px; }
    .header-title { font-size: 1.4em; }
    .header-nav { gap: 6px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .header-nav::-webkit-scrollbar { display: none; }
    .header-nav a { padding: 5px 10px; font-size: 13px; flex: 0 0 auto; white-space: nowrap; }
    .header-user__name { padding: 4px 9px; font-size: 12px; }
}