/* =====================================================================
   GOV.UK (in-game) Portals — Stylesheet
   Owen2k6 Network Design Language, deep-skeuomorphic material kit v2,
   STONE edition: the same kit as goscore.goplex.me / business.goplex.me,
   re-cut for the government estate — a dressed-ashlar stone header with
   brass beading (in place of the varnished plank), a cool slate-woven
   desk, stitched GREY leather panels (in place of brown), and the same
   POLISHED BRASS controls. The 2010s aqua gloss survives as finish (gel
   highlights, bevels) and as the network link blue.

   All textures are procedural (inline SVG feTurbulence data-URIs) so the
   portal ships with NO binary assets — one stylesheet, nothing else.
   Shared by visa / legislation / cash / police .gov.uk.goplex.me; each
   site appends its own components below the "site additions" marker.
   ===================================================================== */

:root {
    --ink:        #e7e6e1;   /* pale limestone text on the grey leather      */
    --ink-soft:   #d4d3ce;
    --muted:      #a4a6a9;
    --link:       #a7c7ff;   /* network link blue                           */
    --link-hover: #cfe0ff;

    --felt:       #2a2b2d;   /* grey leather panel surface                  */
    --felt-edge:  #0e0f10;
    --slate:      #232426;   /* content container leather                   */

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

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

    --line:       #45474a;
    --stitch:     rgba(205,208,214,.34);
    --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: #131415;
    /* dark slate-woven fabric: cool daylight falloff + vignette + coarse weave */
    background-image:
        radial-gradient(ellipse 130% 90% at 50% -10%, rgba(215,225,240,.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.10 0 0 0 0 0.10 0 0 0 0 0.11 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' fill='%23151617'/%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: #111214;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid #000;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}

/* ---------------------------------------------------------------- header
   Dressed ashlar: mottled grey stone blocks in staggered courses, dark
   mortar joints with a chiselled top bevel, a soft weathered sheen, and
   the same strip of brass beading along the bottom edge. */
.site-header {
    position: relative;
    padding: 16px 5%;
    color: #f7f6f2;
    border-bottom: 3px solid #1d1e1f;
    background-color: #555654;
    background-image:
        linear-gradient(to bottom, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 16%,
                        rgba(255,255,255,.02) 44%, rgba(0,0,0,.14) 72%, rgba(0,0,0,.36) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='72'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.42 0 0 0 0 0.41 0 0 0 0.85 0'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.07' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.24 0 0 0 0 0.25 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='240' height='72' fill='%235d5e5c'/%3E%3Crect width='240' height='72' filter='url(%23b)'/%3E%3Crect width='240' height='72' filter='url(%23s)' opacity='0.4'/%3E%3Cg fill='%23000000' opacity='0.5'%3E%3Crect y='34' width='240' height='2'/%3E%3Crect y='70' width='240' height='2'/%3E%3Crect x='0' width='2' height='34'/%3E%3Crect x='120' width='2' height='34'/%3E%3Crect x='60' y='36' width='2' height='34'/%3E%3Crect x='180' y='36' width='2' height='34'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.11'%3E%3Crect y='36' width='240' height='1'/%3E%3Crect y='0' width='240' height='1'/%3E%3Crect x='2' width='1' height='34'/%3E%3Crect x='122' width='1' height='34'/%3E%3Crect x='62' y='36' width='1' height='34'/%3E%3Crect x='182' y='36' width='1' height='34'/%3E%3C/g%3E%3C/svg%3E");
    box-shadow: 0 3px 0 #6f6f6c, 0 8px 18px rgba(0,0,0,.65),
                inset 0 1px 0 rgba(255,255,255,.22), inset 0 -14px 22px rgba(0,0,0,.26);
}
/* polished brass beading under the stonework */
.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(220,230,245,.16);
}
.header-title a { color: #f7f6f2; }
.header-title a:hover { color: #fff; text-decoration: none; }

/* nav — grey leather lozenges that turn brass on hover/active */
.header-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.header-nav a {
    color: #e2e3e5; text-decoration: none;
    padding: 6px 13px; border-radius: 8px;
    border: 1px solid #0b0c0d;
    background: linear-gradient(to bottom, #36383b, #1f2023);
    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: #f1f1ee; 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; }

/* ---------------------------------------------------------------- layout
   The content container is a broad stitched grey-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.17 0 0 0 0 0.17 0 0 0 0 0.18 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='170' height='170' fill='%23222325'/%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: #efeee9; 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: #efeee9; 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 grey-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.17 0 0 0 0 0.17 0 0 0 0 0.18 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='170' height='170' fill='%23292a2c'/%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; }
.grid thead th {
    color: #dcbe7e; font-weight: bold; font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
    background: linear-gradient(to bottom, #25262a, #151618);
    border-bottom: 1px solid #000;
    box-shadow: inset 0 1px 0 rgba(225,230,240,.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(230,235,245,.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], input[type=number], input[type=date],
input[type=datetime-local], input[type=search], select {
    width: 100%; max-width: 340px; margin-top: 5px;
    padding: 9px 11px; color: #eeeeea;
    background: #111214; 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, input[type=number]:focus, input[type=date]:focus,
input[type=datetime-local]:focus, input[type=search]: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 input[type=number], .inline input[type=search], .inline select { width: auto; display: inline-block; margin-top: 0; }

textarea {
    width: 100%; max-width: 520px; margin-top: 5px;
    padding: 9px 11px; color: #eeeeea;
    background: #111214; 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, #5c5c5a, #333434); }

/* ---------------------------------------------------------------- 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: #9c9ea2; font-size: 13px; line-height: 1.7;
    border-top: 1px solid rgba(255,255,255,.07);
}
.site-footer .copyright { color: #86888c; }
.site-footer a { color: var(--link); }

/* ---------------------------------------------------------------- login
   A stitched grey-leather folio sitting on the slate 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.17 0 0 0 0 0.17 0 0 0 0 0.18 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='170' height='170' fill='%23292a2c'/%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: #efeee9;
    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 small stitched grey-leather slip resting at the foot of the desk. */
#cookie-notice {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    max-width: 720px; width: calc(100% - 32px);
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 16px; z-index: 50;
    color: var(--ink); font-size: 13px;
    background-color: #2c2d30;
    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.17 0 0 0 0 0.17 0 0 0 0 0.18 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='170' height='170' fill='%23292a2c'/%3E%3Crect width='170' height='170' filter='url(%23l)' opacity='0.75'/%3E%3C/svg%3E");
    border: 1px solid var(--felt-edge); border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 30px rgba(0,0,0,.6);
}
/* 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: 5px; pointer-events: none;
    border: 1px dashed var(--stitch); border-radius: 6px;
}
#cookie-notice p { margin: 0; flex: 1 1 340px; }
#cookie-notice .cn-actions { display: flex; gap: 8px; }
#cookie-notice button { padding: 7px 14px; }

@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: #e2e3e5; text-decoration: none;
    border: 1px solid #0b0c0d; border-bottom: none; position: relative; top: 2px;
    background: linear-gradient(to bottom, #36383b, #1f2023);
    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; }

/* =====================================================================
   Site additions
   ---------------------------------------------------------------------
   Everything above this line is the shared GOV.UK stone kit. Each portal
   appends only the components it needs below, re-toned for the grey
   leather (neutral greys where the wood kit used warm browns; brass and
   the semantic status colours unchanged).
   ===================================================================== */

/* ---------------------------------------------------------------------
   cash.gov.uk.goplex.me — UK Currency Exchange
   The exchange counter: an engraved brass rate plate, per-currency wallet
   plaques in grey leather, a stitched "quote ticket" for the review step
   and a brass indicator lamp while the game server works.
   --------------------------------------------------------------------- */

.lead { font-size: 15px; color: var(--ink-soft); margin: 0 0 14px; }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.empty { color: var(--muted); padding: 10px 0; }
abbr[title] { text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.3); cursor: help; }

/* ------------------------------------------------------ status pills
   Enamel, same forms as the kit's open/paid/void; semantic hue kept. */
.status.processing, .status.pending { color: #3a2708; text-shadow: 0 1px 0 rgba(255,246,215,.5);
    background: linear-gradient(to bottom, #f6e09a, #d9b24d); border-color: #8a6a14; }
.status.done      { color: #d3fce4; background: linear-gradient(to bottom, #279a68, #0c4e33); }
.status.failed    { color: #ffd9d0; background: linear-gradient(to bottom, #b8503c, #7a2a1c); }
.status.cancelled { color: #eceadf; background: linear-gradient(to bottom, #5c5c5a, #333434); }
.status.expired   { color: #e4e2dc; background: linear-gradient(to bottom, #4a4c50, #2a2b2e); }

/* ------------------------------------------------------ secondary button
   Grey leather over the brass form: for "Change", "Clear", pager links. */
button.quiet, .btn.quiet {
    color: #e2e3e5; text-shadow: 0 1px 2px rgba(0,0,0,.6); border-color: #0b0c0d;
    background-image: linear-gradient(to bottom, #45474b 0%, #36383b 45%, #2a2b2d 55%, #1f2023 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 3px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.5);
}
button.quiet:hover, .btn.quiet:hover {
    color: #fff; background-image: linear-gradient(to bottom, #505257 0%, #404246 45%, #323437 55%, #26272a 100%);
}
button.quiet:active, .btn.quiet:active {
    background-image: linear-gradient(to bottom, #232427, #313336);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 6px; }
.actions form { margin: 0; }

/* ------------------------------------------------------ the rate plate
   An engraved, screwed-down brass plate: the one fact that never changes. */
.rate-plate {
    position: relative;
    display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px 16px;
    margin: 4px 0 18px; padding: 14px 30px;
    border-radius: 10px; border: 1px solid #6b4d10;
    color: #3a2708; text-shadow: 0 1px 0 rgba(255,246,215,.65);
    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 6px 14px rgba(0,0,0,.55);
}
/* four countersunk screws, one per corner */
.rate-plate::before {
    content: ""; position: absolute; inset: 7px; pointer-events: none;
    background:
        radial-gradient(circle at 5px 5px, #7a5a1a 0 2px, #f6e2a4 2.5px, transparent 4px) top left / 10px 10px no-repeat,
        radial-gradient(circle at 5px 5px, #7a5a1a 0 2px, #f6e2a4 2.5px, transparent 4px) top right / 10px 10px no-repeat,
        radial-gradient(circle at 5px 5px, #7a5a1a 0 2px, #f6e2a4 2.5px, transparent 4px) bottom left / 10px 10px no-repeat,
        radial-gradient(circle at 5px 5px, #7a5a1a 0 2px, #f6e2a4 2.5px, transparent 4px) bottom right / 10px 10px no-repeat;
}
.rate-plate__side { font: bold 26px/1.1 "Trebuchet MS", Verdana, sans-serif; letter-spacing: .5px; }
.rate-plate__eq { font: bold 26px/1.1 "Trebuchet MS", Verdana, sans-serif; color: #6b4d10; }
.rate-plate__note { flex-basis: 100%; text-align: center; font-size: 11px; font-weight: bold;
    text-transform: uppercase; letter-spacing: 1.2px; color: #5a410c; }
.rate-plate abbr[title] { border-bottom-color: rgba(58,39,8,.35); }

/* ------------------------------------------------------ two-column desk */
.cash-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 18px; align-items: start; }

/* ------------------------------------------------------ wallet plaques
   One grey-leather plaque per currency; the amounts never mix. */
.wallets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 12px 0 8px; }
.wallet {
    display: flex; flex-direction: column;
    padding: 13px 15px; border-radius: 8px;
    border: 1px solid #0e0f10;
    background: linear-gradient(to bottom, #333538, #232426);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 3px 8px rgba(0,0,0,.35);
}
.wallet__code { font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 17px; color: #f1f0ec; }
.wallet__title { font-size: 11px; color: var(--muted); margin-top: 2px; }
.wallet__amount { margin: 9px 0 3px; font-size: 21px; color: var(--money); font-variant-numeric: tabular-nums; text-align: left; }
.wallet__sub { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 4px; }

/* ------------------------------------------------------ the quote ticket
   The review step: a stitched inset slip listing exactly what is authorised. */
.quote {
    position: relative; margin: 12px 0; padding: 10px 16px;
    border-radius: 8px; border: 1px solid #0b0c0d;
    background: linear-gradient(to bottom, #1d1e20, #161719);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.05);
}
.quote::before {
    content: ""; position: absolute; inset: 4px; pointer-events: none;
    border: 1px dashed var(--stitch); border-radius: 5px;
}
.quote__row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
    padding: 8px 0; border-top: 1px solid rgba(0,0,0,.5); box-shadow: 0 -1px 0 rgba(255,255,255,.035);
}
.quote__row:first-child { border-top: 0; box-shadow: none; }
.quote dt { color: var(--muted); font-size: 13px; }
.quote dd { margin: 0; text-align: right; color: var(--ink); }
.quote__out { font-size: 18px; font-weight: bold; color: #ffcf9e; }
.quote__in  { font-size: 18px; font-weight: bold; color: var(--money); }

/* ------------------------------------------------------ processing lamp
   A leather patch with a glowing brass lamp while the game server works. */
.processing {
    position: relative; margin: 14px 0; padding: 12px 15px 12px 44px;
    border-radius: 8px; border: 1px solid #8a6a14; color: #f6e7bd;
    background: linear-gradient(to bottom, #3a3120, #28220f);
    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);
}
.processing p { margin: 4px 0; }
.processing::before {
    content: ""; position: absolute; left: 16px; top: 17px; width: 14px; height: 14px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff6d0, #f0c24e 45%, #a8780f 80%);
    box-shadow: 0 0 8px rgba(255,200,80,.8), inset 0 -1px 2px rgba(0,0,0,.4);
    animation: cash-lamp 1.4s ease-in-out infinite;
}
@keyframes cash-lamp { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .processing::before { animation: none; } }

/* ------------------------------------------------------ direction picker */
.dir-pick { border: 0; margin: 0 0 6px; padding: 0; min-width: 0; }
.dir-pick legend { padding: 0; margin: 0 0 4px; color: var(--ink-soft); font-size: 13px; }
.dir-pick__opt {
    align-items: flex-start; margin: 8px 0; padding: 10px 12px; border-radius: 8px;
    border: 1px solid #0e0f10; background: linear-gradient(to bottom, #2e3033, #232426);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    cursor: pointer;
}
.dir-pick__opt input { margin-top: 3px; }
.dir-pick__opt > span { display: flex; flex-direction: column; gap: 3px; }
.dir-pick__opt:hover { border-color: #6b4d10; }

/* ------------------------------------------------------ lists and filters */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; }
.filters label.inline { margin: 0; }
.filters input[type=text], .filters input[type=date], .filters select { width: auto; display: inline-block; }
.pager { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; }
.steps { margin: 6px 0 10px; padding-left: 22px; }
.steps li { margin: 6px 0; }
.alert.notice { white-space: normal; }

@media (max-width: 620px) {
    .rate-plate { padding: 12px 20px; }
    .rate-plate__side, .rate-plate__eq { font-size: 21px; }
    .quote dd { text-align: left; }
}