/* =====================================================================
   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).
   ===================================================================== */

/* ---------------------------------------------------------------- police: alerts
   An amber leather patch for "check this" notices. */
.alert.warn { background: linear-gradient(to bottom, #3d3217, #2a220e); color: #ffe6ad; border: 1px solid #8a6a1c; }
.alert.warn::before { border-color: rgba(255,220,150,.28); }
.alert p:first-child { margin-top: 0; }
.alert p:last-child { margin-bottom: 0; }
.warn-text { color: #f3cf73; }

/* ---------------------------------------------------------------- police: status pills
   One enamel per record state, used everywhere as .status.<state> so a state
   always reads the same colour on every page. */
.status { display: inline-block; white-space: nowrap; line-height: 1.5; }
.status.approved, .status.paid, .status.done, .status.active, .status.not_guilty
                        { color: #d3fce4; background: linear-gradient(to bottom, #279a68, #0c4e33); }
.status.processing, .status.pending, .status.requested, .status.scheduled, .status.recorded
                        { color: #e3f0ff; background: linear-gradient(to bottom, #3a6fc8, #1e3f86); }
.status.unpaid, .status.contested, .status.adjourned, .status.charged, .status.unverified, .status.due_release
                        { color: #3a2708; text-shadow: 0 1px 0 rgba(255,240,200,.55);
                          background: linear-gradient(to bottom, #f3cf73, #b98518); }
.status.overdue, .status.failed
                        { color: #ffe7d6; background: linear-gradient(to bottom, #c8662a, #7a3510); }
.status.rejected, .status.revoked, .status.guilty, .status.in_custody
                        { color: #ffe1db; background: linear-gradient(to bottom, #b03a26, #6a1c10); }
.status.executed, .status.concluded
                        { color: #e9eef5; background: linear-gradient(to bottom, #4f6a86, #2a3b4f); }
.status.expired, .status.cancelled, .status.dismissed, .status.released, .status.withdrawn, .status.inactive
                        { color: #eceadf; background: linear-gradient(to bottom, #5c5c5a, #333434); }

/* role plates: engraved grey, blue rim for the bench, brass for overseers */
.role {
    display: inline-block; font-size: 11px; font-weight: bold; padding: 2px 9px; border-radius: 6px;
    letter-spacing: .4px; white-space: nowrap; color: #e2e3e5;
    background: linear-gradient(to bottom, #36383b, #1f2023); border: 1px solid #0b0c0d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.35);
}
.role.judge { border-color: #3a6fc8; }
.role.overseer {
    color: #3a2708; border-color: #6b4d10; text-shadow: 0 1px 0 rgba(255,246,215,.65);
    background: linear-gradient(to bottom, #fdf3cd 0%, #f0d489 30%, #dcb254 48%, #c39329 52%, #ad7f1a 84%, #c69c3e 100%);
}

/* ---------------------------------------------------------------- police: key/value sheets */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 7px 20px; margin: 0; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; }
.ref { font-family: "Consolas", "Menlo", monospace; letter-spacing: .5px; color: #ffe6b0; white-space: nowrap; }
a.ref:hover { color: #fff3d6; }
.money { color: var(--money); font-variant-numeric: tabular-nums; }
.ent-word { font: 20px/1.2 "Trebuchet MS", Verdana, sans-serif; color: #efeee9; margin: 4px 0 8px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* ---------------------------------------------------------------- police: reference check
   The lookup bar, and the one thing nobody may misread: a huge enamel plate,
   green for VALID, red for NOT VALID. */
.check-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.check-form label { margin: 0; }
.check-form input[type=text] { font-size: 18px; padding: 10px 13px; max-width: 320px; font-family: "Consolas", "Menlo", monospace; letter-spacing: .5px; }
.check-form button { font-size: 15px; padding: 12px 20px; }
.verdict {
    position: relative; margin: 18px 0; padding: 26px 28px 24px; border-radius: 14px; text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 8px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.55);
}
.verdict::before {
    content: ""; position: absolute; inset: 8px; pointer-events: none;
    border: 1px dashed rgba(255,255,255,.3); border-radius: 9px;
}
.verdict.pass { color: #eafff2; background: linear-gradient(to bottom, #2a9a5e 0%, #1b7446 45%, #0e4a2b 100%); border: 2px solid #5fe29a; }
.verdict.fail { color: #fff0ec; background: linear-gradient(to bottom, #c2432c 0%, #962c1a 45%, #5e160b 100%); border: 2px solid #ff8a70; }
.verdict-word {
    font: bold 46px/1.1 "Trebuchet MS", Verdana, sans-serif; letter-spacing: 2px; text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,.55); margin: 4px 0 6px;
}
.verdict-name { font-size: 22px; font-weight: bold; }
.verdict-sub  { font-size: 16px; margin-top: 6px; }
.verdict-meta { font-size: 12px; opacity: .85; margin-top: 14px; }
.verdict.slim { padding: 14px 20px 12px; }
.verdict.slim .verdict-word { font-size: 28px; }
@media (max-width: 620px) { .verdict-word { font-size: 30px; } }

/* ---------------------------------------------------------------- police: payment steps */
.steps { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; padding: 0; margin: 8px 0 16px; }
.steps li {
    padding: 4px 12px; border-radius: 8px; font-size: 12px; color: var(--muted);
    background: linear-gradient(to bottom, #232427, #151618); border: 1px solid #0b0c0d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.steps li.on {
    color: #3a2708; border-color: #6b4d10; text-shadow: 0 1px 0 rgba(255,246,215,.65);
    background: linear-gradient(to bottom, #fdf3cd 0%, #f0d489 30%, #dcb254 48%, #c39329 52%, #ad7f1a 84%, #c69c3e 100%);
}
.steps li.done { color: var(--ink-soft); }

/* currency choices: big grey-leather lozenges, brass on hover */
.choices { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0; }
.choice {
    display: block; min-width: 220px; max-width: 360px; padding: 14px 18px; border-radius: 10px; color: var(--ink);
    background: linear-gradient(to bottom, #36383b, #1f2023); border: 1px solid #0b0c0d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 2px rgba(0,0,0,.4), 0 3px 8px rgba(0,0,0,.4);
}
a.choice:hover { text-decoration: none; color: #fff; border-color: #a9781f; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 2px rgba(233,190,80,.35), 0 3px 8px rgba(0,0,0,.4); }
.choice strong { display: block; font: 18px "Trebuchet MS", Verdana, sans-serif; color: #efeee9; }
.choice .amt { display: block; font-size: 20px; color: var(--money); margin-top: 4px; font-variant-numeric: tabular-nums; }
.choice.disabled { opacity: .55; cursor: not-allowed; }

/* the confirm step: a brass-rimmed slip stating exactly what will be taken */
.slip {
    position: relative; max-width: 600px; margin: 16px 0; padding: 22px 24px;
    background: linear-gradient(to bottom, #2f3033, #1c1d1f); border: 1px solid #0b0c0d; border-radius: 12px;
    box-shadow: inset 0 0 0 2px rgba(220,178,84,.38), inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.5);
}
.slip .amount { font: 34px/1.2 "Trebuchet MS", Verdana, sans-serif; color: var(--money); margin: 4px 0 12px; font-variant-numeric: tabular-nums; }
.slip .kv { margin-bottom: 14px; }
.slip form { margin-top: 16px; }
.slip button { font-size: 15px; padding: 11px 20px; }

/* ---------------------------------------------------------------- police: history + notes */
.timeline { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid #111214; box-shadow: 1px 0 0 rgba(255,255,255,.05); }
.timeline li { position: relative; margin: 0 0 14px; padding-left: 12px; }
.timeline li::before {
    content: ""; position: absolute; left: -28px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
    border: 1px solid #6b4d10; background: radial-gradient(circle at 35% 30%, #fdf3cd, #dcb254 45%, #ad7f1a);
    box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.timeline .when, .notes .when { color: var(--muted); font-size: 12px; }
.timeline .what { font-weight: bold; }
.notes { list-style: none; margin: 0 0 12px; padding: 0; }
.notes li {
    margin: 0 0 10px; padding: 9px 12px; border-radius: 8px;
    background: #1b1c1e; border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}

/* ---------------------------------------------------------------- police: desk tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.stat {
    display: block; padding: 12px 14px; border-radius: 9px; color: var(--ink);
    background: linear-gradient(to bottom, #36383b, #1f2023); border: 1px solid #0b0c0d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 8px rgba(0,0,0,.4);
}
a.stat:hover { text-decoration: none; border-color: #a9781f; }
.stat .n { display: block; font: 28px/1.1 "Trebuchet MS", Verdana, sans-serif; color: #efeee9; font-variant-numeric: tabular-nums; }
.stat .l { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }
.stat.hot .n { color: var(--gold); }

/* ---------------------------------------------------------------- police: chips, filters, layout */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; align-items: center; }
.chip {
    font-size: 12px; padding: 2px 9px; border-radius: 10px; color: var(--ink-soft); white-space: nowrap;
    background: #1b1c1e; border: 1px solid #000; box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filters label { margin: 0; }
.filters input[type=text], .filters select { width: auto; min-width: 140px; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 20px; }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.actions { min-width: 120px; }
.actions form, .actions details { margin: 4px 0; }
details.edit { margin: 8px 0; }
details.edit > summary { cursor: pointer; color: var(--link); }
details.edit[open] > summary { margin-bottom: 8px; }
.card details.edit + details.edit { border-top: 1px solid rgba(0,0,0,.4); box-shadow: 0 -1px 0 rgba(255,255,255,.04); padding-top: 8px; }