/* Milton Portal · designsystem "Grafit och guld"
   Samma materialspråk som Samahers Home-sida: grafitglas, tvåpixlars kant med ljus överkant och mörk underkant,
   diagonala reflektioner, lager av skuggor och mjuk toning. Färgerna är grått, svart och guld. */

@font-face{font-family:Lato;font-weight:300;font-style:normal;font-display:swap;src:url(fonts/lato-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Lato;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/lato-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Lato;font-weight:700;font-style:normal;font-display:swap;src:url(fonts/lato-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Lato;font-weight:900;font-style:normal;font-display:swap;src:url(fonts/lato-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:Syncopate;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/syncopate-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Syncopate;font-weight:700;font-style:normal;font-display:swap;src:url(fonts/syncopate-latin-700-normal.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --display:Syncopate,Lato,system-ui,sans-serif;
  --body:Lato,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --page:#0b0b0d;
  --ink:#f4f0e7;
  --ink-2:#dad4c6;
  --muted:#bdb6a6;
  --rule:#5c5749;

  --gold-light:#f7e8ac;
  --gold:#dcb865;
  --gold-mid:#c29d49;
  --gold-dark:#755a21;
  --gold-deep:#33260b;

  --ok:#93dcae;
  --ok-well:#17301f;
  --warn:#f2c867;
  --warn-well:#3b3010;
  --bad:#ff9d8c;
  --bad-well:#3e1e19;

  --g-top:#3b3b41;
  --g-bottom:#18181b;
  --g-well-top:#1e1e22;
  --g-well-bottom:#111114;
  --g-raised-top:#4a4a52;
  --g-raised-bottom:#26262b;
  --g-header-top:#46464d;
  --g-header-bottom:#1a1a1e;

  --highlight:rgb(255 248 228 / 30%);
  --reflect:rgb(255 248 228 / 16%);
  --reflect-fade:rgb(255 248 228 / 3%);
  --reflect-clear:rgb(255 248 228 / 0%);
  --shadow:rgb(2 2 4 / 68%);
  --close-shadow:rgb(3 3 5 / 50%);
  --inner-shadow:rgb(2 2 4 / 55%);
  --glass-top:rgb(245 240 228 / 17%);
  --glass-bottom:rgb(235 230 218 / 4%);
  --selected:#4b4025;

  --field-top:#f6f1e4;
  --field-bottom:#ddd6c4;
  --field-ink:#2a2620;
  --field-muted:#6a6252;
  --field-border:#8d7a4b;

  --button-top:#f3dc8f;
  --button-bottom:#c9a04a;
  --button-ink:#2b2008;

  --space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-2xl:32px;
  --radius-control:12px;--radius-row:16px;--radius-panel:24px;--radius-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(14px,3.6vw,32px);
  --max:1280px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--space-xl)}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--page);color:var(--ink);
  font:400 1rem/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg{max-width:100%;display:block}
::selection{background:var(--gold);color:var(--button-ink)}
a{color:var(--gold);text-underline-offset:4px}
a:hover{color:var(--gold-light)}
:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px;border-radius:6px}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;overflow-wrap:break-word;min-width:0}
h1{font-family:var(--display);font-weight:400;letter-spacing:.07em;text-transform:uppercase;font-size:clamp(1.1rem,2.8vw,1.6rem);line-height:1.3;color:var(--gold-light);text-shadow:0 2px 0 var(--gold-deep),0 10px 24px rgb(0 0 0 / 55%)}
h2{font-family:var(--display);font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(.82rem,1.6vw,.98rem);line-height:1.4;color:var(--gold-light);text-shadow:0 2px 0 var(--gold-deep);margin-bottom:var(--space-md)}
h3{font-size:1rem;font-weight:700}
p{margin:0 0 1em;text-wrap:pretty}
.skip-link{position:absolute;left:-999px;top:8px;background:linear-gradient(var(--button-top),var(--button-bottom));color:var(--button-ink);padding:10px 16px;border-radius:var(--radius-control);z-index:200;font-weight:700}
.skip-link:focus{left:8px}
.symbols{position:absolute;width:0;height:0;overflow:hidden}

/* ───────── Bakgrund: ambient glöd och guldstoft ───────── */
.ambient{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.ambient i{position:absolute;display:block;border-radius:50%;filter:blur(80px)}
.ambient .a{width:62vw;height:62vw;left:-14vw;top:-22vw;background:radial-gradient(circle,rgb(220 184 101 / 26%),transparent 66%);animation:drift-a 52s ease-in-out infinite alternate}
.ambient .b{width:54vw;height:54vw;right:-16vw;top:18vh;background:radial-gradient(circle,rgb(150 155 168 / 20%),transparent 66%);animation:drift-b 66s ease-in-out infinite alternate}
.ambient .c{width:48vw;height:48vw;left:22vw;bottom:-26vw;background:radial-gradient(circle,rgb(194 157 73 / 18%),transparent 66%);animation:drift-c 58s ease-in-out infinite alternate}
@keyframes drift-a{to{transform:translate3d(9vw,7vh,0) scale(1.12)}}
@keyframes drift-b{to{transform:translate3d(-8vw,-6vh,0) scale(1.1)}}
@keyframes drift-c{to{transform:translate3d(10vw,-8vh,0) scale(1.15)}}
#dust{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ───────── Ramverk och sidhuvud ───────── */
.mode-banner{position:relative;z-index:3;background:linear-gradient(var(--button-top),var(--button-bottom));color:var(--button-ink);text-align:center;font-weight:700;font-size:.78rem;letter-spacing:.05em;padding:7px var(--gutter)}
.shell{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;width:min(100% - 2 * var(--gutter),var(--max));margin:0 auto;padding-top:var(--space-xl)}

.site-header{
  position:relative;isolation:isolate;z-index:20;margin-bottom:var(--space-xl);
  border:2px solid var(--gold-mid);border-top-color:var(--gold-light);border-bottom-color:var(--gold-dark);border-radius:var(--radius-panel);
  background:linear-gradient(145deg,var(--g-header-top),var(--g-header-bottom));
  box-shadow:0 1px 0 var(--highlight) inset,0 -2px 3px var(--inner-shadow) inset,0 4px 5px var(--close-shadow),0 20px 28px -16px var(--shadow);
}
.site-header::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:linear-gradient(124deg,var(--reflect) 0%,var(--reflect-fade) 40%,var(--reflect-clear) 41%);pointer-events:none}
.site-header::after{
  content:"";position:absolute;left:var(--space-xl);right:var(--space-xl);bottom:-3px;height:4px;border-radius:var(--radius-pill);pointer-events:none;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-light) 25%,var(--gold-mid) 50%,var(--gold-light) 75%,var(--gold-dark));
  background-size:220% 100%;box-shadow:0 4px 6px var(--shadow);animation:shimmer 9s linear infinite;
}
@keyframes shimmer{to{background-position:-220% 0}}
.bar{display:flex;align-items:center;gap:var(--space-md) var(--space-xl);padding:var(--space-md) var(--space-xl);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--space-md);text-decoration:none;color:var(--gold-light);line-height:1.05;margin-right:auto;min-height:48px}
.brand:hover{color:var(--gold-light)}
.brand .emblem{width:44px;height:44px;flex:none;filter:drop-shadow(0 4px 8px rgb(0 0 0 / 60%)) drop-shadow(0 0 12px rgb(220 184 101 / 30%))}
.brand-text{display:flex;flex-direction:column}
.brand-mark{display:block;height:14px;width:auto;margin-bottom:5px}
.brand-sub{font-family:var(--display);letter-spacing:.52em;font-size:.55rem;color:var(--muted)}
.main-nav{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap}

/* Glasknappar för navigering */
.main-nav a,.main-nav button.link,.admin-nav a,.lang button,.sound-toggle{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--space-sm) var(--space-lg);
  border:2px solid var(--gold-mid);border-top-color:var(--gold-light);border-bottom-color:var(--gold-dark);border-radius:var(--radius-control);
  color:var(--ink);font:700 .86rem/1.2 var(--body);letter-spacing:.03em;text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;
  background:linear-gradient(135deg,var(--glass-top),var(--glass-bottom));-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 1px 0 var(--highlight) inset,0 -2px 3px var(--inner-shadow) inset,0 3px 4px var(--close-shadow);
  transition:transform .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease);
}
.main-nav a::after,.main-nav button.link::after,.admin-nav a::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:linear-gradient(124deg,var(--reflect) 0%,var(--reflect-fade) 43%,var(--reflect-clear) 44%);pointer-events:none}
.main-nav a:hover,.main-nav button.link:hover,.admin-nav a:hover,.sound-toggle:hover{transform:translateY(-2px);color:var(--gold-light)}
.main-nav a:active,.main-nav button.link:active,.admin-nav a:active{transform:translateY(1px)}
.main-nav a.active,.admin-nav a.active{color:var(--button-ink);border-color:var(--gold-light);background:linear-gradient(var(--button-top),var(--button-bottom))}
.main-nav a.active::after,.admin-nav a.active::after{background:linear-gradient(124deg,rgb(255 255 255 / 38%) 0%,rgb(255 255 255 / 4%) 43%,rgb(255 255 255 / 0%) 44%)}
.lang{display:flex;gap:var(--space-xs)}
.lang button{min-width:48px;padding:var(--space-sm) var(--space-md);font-size:.76rem;letter-spacing:.1em;color:var(--ink-2)}
.lang button.on{color:var(--button-ink);border-color:var(--gold-light);background:linear-gradient(var(--button-top),var(--button-bottom))}
.sound-toggle{min-width:48px;padding:var(--space-sm) var(--space-md);font-size:1.05rem;line-height:1}
.sound-toggle[aria-pressed="true"]{color:var(--button-ink);border-color:var(--gold-light);background:linear-gradient(var(--button-top),var(--button-bottom))}
.admin-nav{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap;margin:0 var(--space-lg) var(--space-lg);padding:var(--space-md);border-radius:var(--radius-row);background:linear-gradient(160deg,#3f3f46,#202024);box-shadow:0 1px 0 var(--highlight) inset,0 2px 8px var(--inner-shadow) inset,0 8px 16px -10px var(--shadow)}
.admin-nav .eyebrow{margin:0 var(--space-sm) 0 var(--space-xs)}
.admin-nav a{flex:1 1 auto;min-height:40px;padding:var(--space-xs) var(--space-md);font-size:.8rem}

/* ───────── Innehåll ───────── */
main{flex:1;width:100%;padding:0 0 var(--space-2xl)}
main:focus{outline:none}
.stack{display:grid;gap:var(--space-lg)}
.stack-lg{display:grid;gap:var(--space-xl)}
.rise{animation:rise .9s var(--ease) backwards;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}

.card{
  position:relative;isolation:isolate;min-width:0;padding:clamp(18px,2.4vw,28px);
  border:2px solid var(--gold-mid);border-top-color:var(--gold-light);border-bottom-color:var(--gold-dark);border-radius:var(--radius-panel);
  background:linear-gradient(145deg,var(--g-top),var(--g-bottom));
  box-shadow:0 1px 0 var(--highlight) inset,0 -2px 3px var(--inner-shadow) inset,0 4px 6px var(--close-shadow),0 22px 32px -18px var(--shadow);
}
.card::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:linear-gradient(124deg,var(--reflect) 0%,var(--reflect-fade) 38%,var(--reflect-clear) 39%);pointer-events:none}
.card::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgb(247 232 172 / 14%),transparent 62%);opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.card:hover::before{opacity:1}
.card.well{background:linear-gradient(155deg,var(--g-well-top),var(--g-well-bottom))}
.card.page{max-width:580px;margin:var(--space-lg) auto 0;padding-top:clamp(22px,3vw,34px)}
.card.page>h1{margin-bottom:var(--space-lg);padding-right:76px}
.page-emblem{position:absolute;right:var(--space-lg);top:var(--space-lg);width:64px;height:64px;pointer-events:none;filter:drop-shadow(0 6px 12px rgb(0 0 0 / 55%)) drop-shadow(0 0 14px rgb(220 184 101 / 28%))}
.lead{color:var(--ink-2);font-size:1.05rem}
.muted{color:var(--muted)}
.hint{color:var(--muted);font-size:.84rem;margin:.4em 0 0}
.error{color:var(--bad)}
.eyebrow{font-family:var(--display);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-sm)}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.page-head h1{margin:0}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-lg)}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-lg)}
.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--space-xl);align-items:start}
.split-even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xl);align-items:start}

/* ───────── Formulär ───────── */
.field{display:grid;gap:6px}
.field-label{font-size:.88rem;color:var(--ink-2);font-weight:700}
input,select,textarea{
  width:100%;min-width:0;min-height:48px;padding:var(--space-md);border:1px solid var(--field-border);border-radius:var(--radius-control);
  background:linear-gradient(var(--field-top),var(--field-bottom));color:var(--field-ink);color-scheme:light;caret-color:var(--gold-dark);font:inherit;
  box-shadow:0 2px 4px var(--inner-shadow) inset,0 1px 0 var(--highlight);
}
input::placeholder,textarea::placeholder{color:var(--field-muted);opacity:1}
input[type=checkbox]{width:22px;height:22px;min-height:0;padding:0;accent-color:var(--gold-mid);flex:none;margin-top:3px}
input:focus,select:focus,textarea:focus{outline:3px solid var(--gold-light);outline-offset:2px;border-color:var(--gold-dark)}
textarea{resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:.92rem}
.row-form{display:flex;gap:var(--space-md);flex-wrap:wrap;align-items:flex-end}
.row-form>*{flex:1 1 180px}
.row-form>.btn{flex:0 0 auto}
.filters{display:flex;gap:var(--space-sm);flex-wrap:wrap}
.filters>*{flex:1 1 160px}
.filters>.btn{flex:0 0 auto}
.btn-row{display:flex;gap:var(--space-sm);flex-wrap:wrap;align-items:center}

/* ───────── Knappar ───────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:var(--space-sm) var(--space-xl);
  border:1px solid var(--gold-mid);border-radius:var(--radius-control);background:linear-gradient(var(--g-raised-top),var(--g-raised-bottom));
  color:var(--ink);font:700 .9rem/1.3 var(--body);letter-spacing:.03em;text-decoration:none;cursor:pointer;
  box-shadow:0 1px 0 var(--highlight) inset,0 3px 5px var(--close-shadow);
  transition:transform .15s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease);
}
.btn:hover:not(:disabled){background:var(--selected);color:var(--gold-light);transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.primary{border-color:var(--gold-light);background:linear-gradient(var(--button-top),var(--button-bottom));color:var(--button-ink)}
.btn.primary:hover:not(:disabled){background:linear-gradient(#fbeeb8,#d6ad54);color:var(--button-ink)}
.btn.small{min-height:44px;padding:var(--space-xs) var(--space-lg);font-size:.82rem}
.btn:disabled,.btn[disabled]{color:var(--muted);background:var(--g-well-top);border-color:var(--rule);box-shadow:none;cursor:not-allowed;opacity:.8}

/* ───────── Statusrutor, mätare och veckoremsa (Samahers statusboxar) ───────── */
.statusbox{display:block;text-decoration:none;color:inherit;min-height:150px;padding:var(--space-lg) var(--space-xl);transition:transform .2s var(--ease)}
a.statusbox:hover{transform:translateY(-3px);color:inherit}
.statusbox .sb-bar{display:block;width:36px;height:4px;margin-bottom:var(--space-md);border-radius:var(--radius-pill);background:var(--gold);box-shadow:0 1px 0 var(--highlight) inset,0 3px 4px var(--shadow)}
.statusbox[data-tone=ok] .sb-bar{background:var(--ok)}
.statusbox[data-tone=warn] .sb-bar{background:var(--warn);box-shadow:0 0 14px rgb(242 200 103 / 45%)}
.statusbox[data-tone=bad] .sb-bar{background:var(--bad);box-shadow:0 0 14px rgb(255 157 140 / 45%)}
.statusbox[data-tone=warn]{background:linear-gradient(145deg,#463b1e,#1e1b12)}
.statusbox[data-tone=bad]{background:linear-gradient(145deg,#4a2923,#1f1514)}
.statusbox[data-tone=ok]{background:linear-gradient(145deg,#2f4337,#14191a)}
.sb-value{font-family:var(--body);font-weight:300;font-size:clamp(2.3rem,4.6vw,3.1rem);line-height:1.1;font-variant-numeric:lining-nums tabular-nums;color:var(--gold-light);background:linear-gradient(180deg,#fff6cf,#dcb865 58%,#a8842f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 8px rgb(0 0 0 / 50%))}
.statusbox[data-tone=ok] .sb-value{background:linear-gradient(180deg,#d9ffe6,#93dcae 60%,#4f9d70);-webkit-background-clip:text;background-clip:text}
.statusbox[data-tone=bad] .sb-value{background:linear-gradient(180deg,#ffe0d9,#ff9d8c 60%,#c85d4b);-webkit-background-clip:text;background-clip:text}
.sb-sub{margin-top:var(--space-sm);color:var(--muted);font-size:.84rem;line-height:1.45}
.stat{padding:var(--space-lg)}
.stat-value{font-size:1.4rem;font-weight:700;color:var(--ink);word-break:break-word}
a.stat{text-decoration:none;color:inherit}

.meter{height:10px;border-radius:var(--radius-pill);background:#26262b;box-shadow:0 2px 4px var(--inner-shadow) inset,0 1px 0 var(--highlight);overflow:hidden}
.meter i{position:relative;display:block;height:100%;width:0;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--gold-dark),var(--gold) 55%,var(--gold-light));box-shadow:0 1px 0 var(--highlight) inset;transition:width .9s var(--ease);overflow:hidden}
.meter i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgb(255 250 225 / 55%) 50%,transparent 70%);background-size:220% 100%;animation:glint 4.5s ease-in-out infinite}
@keyframes glint{from{background-position:160% 0}to{background-position:-60% 0}}
.meter.segments{display:flex;gap:2px;background:#26262b}
.meter.segments i{flex:none;min-width:0;border-radius:0;animation:none}
.meter.segments i:first-child{border-radius:var(--radius-pill) 0 0 var(--radius-pill)}
.meter.segments i:last-child{border-radius:0 var(--radius-pill) var(--radius-pill) 0}
.meter.segments i::after{display:none}
.seg-open{background:linear-gradient(90deg,#8a6a1c,var(--warn))!important}
.seg-paid{background:linear-gradient(90deg,var(--gold-dark),var(--gold-light))!important}
.seg-done{background:linear-gradient(90deg,#2d6a47,var(--ok))!important}
.seg-exc{background:linear-gradient(90deg,#8f3b2c,var(--bad))!important}
.legend{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-xl);margin:var(--space-lg) 0 0;padding:0;list-style:none;font-size:.86rem;color:var(--ink-2)}
.legend li{display:flex;align-items:center;gap:8px}
.legend b{font-variant-numeric:tabular-nums;color:var(--ink)}
.dot-key{display:inline-block;width:12px;height:12px;border-radius:50%;box-shadow:0 1px 0 var(--highlight) inset,0 2px 3px var(--close-shadow)}
.dot-key.seg-open{background:var(--warn)!important}.dot-key.seg-paid{background:var(--gold-light)!important}.dot-key.seg-done{background:var(--ok)!important}.dot-key.seg-exc{background:var(--bad)!important}

.score{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-sm) var(--space-md);margin:var(--space-md) 0}
.score strong{font-family:var(--body);font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;font-weight:300;color:var(--gold-light);background:linear-gradient(180deg,#fff6cf,#dcb865 58%,#a8842f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 8px rgb(0 0 0 / 50%));font-variant-numeric:lining-nums tabular-nums}
.score span{color:var(--muted)}
.week-days{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-sm);margin:var(--space-lg) 0 0;padding:0}
.week-days li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--space-sm) 2px 0;border-bottom:3px solid var(--rule);border-radius:var(--radius-control) var(--radius-control) 0 0;color:var(--muted);font-size:.78rem;text-align:center}
.week-days .col{display:flex;align-items:flex-end;justify-content:center;width:100%;height:64px}
.week-days .col i{display:block;width:62%;min-height:3px;height:3px;border-radius:6px 6px 0 0;background:var(--rule);transition:height .9s var(--ease)}
.week-days .is-done .col i{background:linear-gradient(var(--gold-light),var(--gold-mid))}
.week-days strong{font-variant-numeric:lining-nums tabular-nums;color:var(--ink);font-size:.95rem}
.week-days .is-today{background:var(--selected);border-bottom-color:var(--gold-light);color:var(--ink)}
.week-days .is-done{border-bottom-color:var(--gold)}
.week-days small{font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ───────── Hjältekort (saldo och arbetsöversikt) ───────── */
.hero-card{
  display:flex;justify-content:space-between;gap:var(--space-xl);flex-wrap:wrap;align-items:center;padding:clamp(24px,3.6vw,40px) clamp(20px,3vw,36px);
  padding-right:clamp(130px,16vw,200px);background:linear-gradient(145deg,#403f46,#18181b);
}
.hero-card .emblem-big{position:absolute;right:clamp(14px,2.4vw,28px);top:50%;width:clamp(84px,11vw,138px);height:clamp(84px,11vw,138px);margin-top:calc(clamp(84px,11vw,138px) / -2);pointer-events:none;filter:drop-shadow(0 6px 14px rgb(0 0 0 / 60%)) drop-shadow(0 0 18px rgb(220 184 101 / 30%))}
.hero-card::after{background:linear-gradient(124deg,var(--reflect) 0%,var(--reflect-fade) 46%,var(--reflect-clear) 47%)}
.hero-shimmer{position:absolute;left:var(--space-xl);right:var(--space-xl);bottom:-3px;height:4px;border-radius:var(--radius-pill);pointer-events:none;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light) 25%,var(--gold-mid) 50%,var(--gold-light) 75%,var(--gold-dark));background-size:220% 100%;box-shadow:0 4px 6px var(--shadow);animation:shimmer 9s linear infinite}
.big{font-family:var(--body);font-size:clamp(2.2rem,6.4vw,3.8rem);font-weight:300;line-height:1.1;word-break:break-word;color:var(--gold-light);background:linear-gradient(180deg,#fff6cf,#dcb865 58%,#a8842f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 10px rgb(0 0 0 / 50%))}
.unit{font-family:var(--display);font-size:.9rem;letter-spacing:.14em;color:var(--gold);-webkit-text-fill-color:var(--gold)}
.hero-actions{display:grid;gap:var(--space-sm);justify-items:start;max-width:320px}
.hero-greet{font-size:.95rem;color:var(--ink-2);margin:0 0 var(--space-xs)}
.hero-title{margin:0 0 var(--space-sm)}
.hero-date{font-size:.84rem;color:var(--muted);letter-spacing:.04em}
.hero-date::first-letter{text-transform:uppercase}
.hero-summary{margin:var(--space-md) 0 0;font-size:1.05rem;color:var(--ink)}
.hero-summary.ok{color:var(--ok)}
.hero-summary.warn{color:var(--warn)}

/* ───────── Tabeller ───────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 calc(var(--space-sm) * -1);padding:0 var(--space-sm)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;font-weight:700;color:var(--gold);font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;border-bottom:2px solid var(--gold-dark)}
th,td{padding:12px;vertical-align:top;border-bottom:1px solid rgb(92 87 73 / 60%)}
td{color:var(--ink-2)}
tbody tr{transition:background-color .2s var(--ease)}
tbody tr:hover{background:rgb(220 184 101 / 7%)}
tr:last-child td{border-bottom:0}
.mono{font-family:var(--mono);font-size:.85em;word-break:break-all}
code.json{font-family:var(--mono);font-size:.78rem;color:var(--muted);word-break:break-all}
pre.mail{white-space:pre-wrap;word-break:break-word;margin:0;font-family:var(--mono);font-size:.78rem;color:var(--ink-2);max-width:520px}
.pager{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap}

/* ───────── Definitionslistor ───────── */
.kv{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:10px 24px;margin:0 0 var(--space-lg)}
.kv dt{color:var(--muted)}
.kv dd{margin:0;color:var(--ink);word-break:break-word}

/* ───────── Etiketter och meddelanden ───────── */
.pill{display:inline-flex;align-items:center;padding:2px 11px;border:1px solid var(--rule);border-radius:var(--radius-control);background:var(--g-well-top);color:var(--ink-2);font-size:.78rem;font-weight:700;white-space:nowrap}
.pill.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-well)}
.pill.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-well)}
.pill.bad{color:var(--bad);border-color:var(--bad);background:var(--bad-well)}
.alert{position:relative;padding:var(--space-md) var(--space-lg);margin:var(--space-md) 0;border:1px solid var(--rule);border-left:4px solid var(--gold);border-radius:var(--radius-row);background:linear-gradient(var(--g-well-top),var(--g-well-bottom))}
.alert.ok{border-left-color:var(--ok);background:linear-gradient(var(--ok-well),#10201a)}
.alert.warn{border-left-color:var(--warn);background:linear-gradient(var(--warn-well),#20190b)}
.alert.bad{border-left-color:var(--bad);background:linear-gradient(var(--bad-well),#241311)}
#toasts{position:fixed;right:calc(var(--space-lg) + env(safe-area-inset-right,0px));bottom:calc(var(--space-lg) + env(safe-area-inset-bottom,0px));display:grid;gap:var(--space-sm);z-index:150;max-width:min(420px,calc(100vw - 32px))}
.toast{padding:var(--space-md) var(--space-lg);border:2px solid var(--gold-mid);border-top-color:var(--gold-light);border-bottom-color:var(--gold-dark);border-radius:var(--radius-row);color:var(--ink);background:linear-gradient(140deg,#3c382e,#1c1c20);box-shadow:0 1px 0 var(--highlight) inset,0 8px 30px rgb(0 0 0 / 60%);animation:rise .5s var(--ease) backwards}
.toast.error{border-color:var(--bad);border-top-color:#ffc3b8;border-bottom-color:#8f3b2c;background:linear-gradient(140deg,#4a2823,#1c1514)}

/* ───────── Betalning och orderstatus ───────── */
.pay-grid{display:grid;grid-template-columns:240px 1fr;gap:var(--space-xl);align-items:start}
.qr{background:#fff;padding:10px;border-radius:var(--radius-row);width:220px;height:220px;box-shadow:0 0 0 3px var(--gold-mid),0 12px 28px rgb(0 0 0 / 55%),0 0 30px rgb(220 184 101 / 22%)}
.address{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:linear-gradient(var(--g-well-top),var(--g-well-bottom));border:1px solid var(--gold-dark);border-radius:var(--radius-control);padding:var(--space-md);box-shadow:0 2px 6px var(--inner-shadow) inset}
.address .mono{flex:1 1 220px;font-size:.92rem;color:var(--gold-light)}
.steps{list-style:none;margin:var(--space-xl) 0;padding:0;display:grid;gap:0}
.steps li{position:relative;display:flex;gap:var(--space-md);align-items:center;min-height:48px;color:var(--muted)}
.steps li:not(:last-child)::before{content:"";position:absolute;left:15px;top:38px;bottom:-10px;width:2px;background:var(--rule)}
.steps li.done:not(:last-child)::before{background:linear-gradient(var(--gold-mid),var(--gold-dark))}
.steps .dot{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--rule);background:var(--g-well-top);font-size:.82rem;flex:none}
.steps li.current{color:var(--ink);font-weight:700}
.steps li.current .dot{border-color:var(--gold-light);color:var(--gold-light);box-shadow:0 0 0 4px rgb(220 184 101 / 18%),0 0 18px rgb(220 184 101 / 50%);animation:pulse 2.4s ease-in-out infinite}
.steps li.done{color:var(--ink-2)}
.steps li.done .dot{background:linear-gradient(var(--gold-light),var(--gold-mid));color:var(--button-ink);border-color:var(--gold-light);font-weight:900}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgb(220 184 101 / 8%),0 0 26px rgb(220 184 101 / 70%)}}
.test-tools{border-style:dashed}
.card.page .quote{margin-top:var(--space-lg)}
.quote.card{background:linear-gradient(145deg,#443c27,#19181a)}

/* ───────── Firande ───────── */
.stars{position:fixed;z-index:180;inset:0;pointer-events:none;overflow:hidden}
.star,.emblem-star{display:block;background:linear-gradient(145deg,#fff3ba,#f7ce61 46%,#b88022);clip-path:polygon(50% 0%,61% 34%,98% 35%,69% 57%,79% 94%,50% 72%,21% 94%,31% 57%,2% 35%,39% 34%)}
.star{position:absolute;left:50%;top:46%;width:var(--star-size);height:var(--star-size);filter:drop-shadow(0 3px 3px rgb(9 8 12 / 60%));opacity:0;animation:burst 2.6s cubic-bezier(.12,.55,.25,1) var(--star-delay) both}
@keyframes burst{0%{opacity:0;transform:translate3d(0,0,0) rotate(0) scale(.3)}12%{opacity:1}72%{opacity:1}100%{opacity:0;transform:translate3d(var(--star-x),var(--star-y),0) rotate(var(--star-turn)) scale(1)}}
.celebrate-toast{
  position:fixed;z-index:190;right:calc(var(--space-xl) + env(safe-area-inset-right,0px));bottom:calc(var(--space-xl) + env(safe-area-inset-bottom,0px));
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:var(--space-md);align-items:center;width:min(460px,calc(100% - 48px));padding:var(--space-lg);
  border:2px solid #f7ce61;border-top-color:#fff3ba;border-bottom-color:#b88022;border-radius:var(--radius-panel);color:#fff8dc;
  background:linear-gradient(140deg,#3e362b,#1f1f24);box-shadow:0 1px 0 var(--highlight) inset,0 4px 8px rgb(9 8 12 / 60%),0 18px 45px rgb(247 206 97 / 24%);animation:rise .5s var(--ease) backwards;
}
.celebrate-toast .emblem-star{width:44px;height:44px}
.celebrate-toast strong{display:block;color:#fff3ba;font-size:1.1rem;line-height:1.25}
.celebrate-toast span{display:block;margin-top:var(--space-xs);font-size:.86rem;line-height:1.4}
.celebrate-toast .btn{min-height:44px;padding:var(--space-xs) var(--space-md)}

/* ───────── Sidfot ───────── */
.site-footer{
  position:relative;z-index:1;width:min(100% - 2 * var(--gutter),var(--max));margin:0 auto var(--space-xl);padding:var(--space-lg) var(--space-xl);display:flex;gap:var(--space-sm) var(--space-xl);justify-content:center;flex-wrap:wrap;
  border:2px solid var(--gold-dark);border-top-color:var(--gold-mid);border-radius:var(--radius-panel);background:linear-gradient(var(--g-well-top),var(--g-well-bottom));
  color:var(--muted);font-size:.85rem;box-shadow:0 1px 0 var(--highlight) inset;
}
.site-footer a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px}
.site-footer a:hover{color:var(--gold-light)}
.site-footer span{display:inline-flex;align-items:center;min-height:44px}

/* ───────── Responsivt ───────── */
@media (max-width:1320px){
  /* Administratörsmenyn ligger på en rad och rullar i sidled när bredden inte räcker. */
  .admin-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--gold-dark) transparent}
  .admin-nav a{flex:none;scroll-snap-align:start}
  .admin-nav .eyebrow{flex:none}
}
@media (max-width:1099px){
  .split,.split-even{grid-template-columns:minmax(0,1fr)}
  /* Smalare sidhuvud: märke, språk och ljud på första raden, menyn på egen rad. */
  .brand{order:1}
  .lang{order:2}
  .sound-toggle{order:3}
  .main-nav{order:4;width:100%}
  .main-nav a,.main-nav button.link{flex:1 1 auto}
}
@media (max-width:760px){
  .shell{padding-top:var(--space-lg)}
  .site-header{margin-bottom:var(--space-lg);border-radius:20px}
  .bar{padding:var(--space-md) var(--space-lg);gap:var(--space-md)}
  .brand{min-height:44px}
  .brand .emblem{width:38px;height:38px}
  .main-nav{order:4;width:100%;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:var(--space-xs);scrollbar-width:none}
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a,.main-nav button.link{flex:none;scroll-snap-align:start}
  .mode-banner{font-size:.68rem;padding:6px var(--gutter)}
  .lang button,.sound-toggle{min-width:44px;padding:var(--space-sm)}
  .admin-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;margin:0 var(--space-md) var(--space-md);padding:var(--space-sm)}
  .admin-nav a{flex:none;scroll-snap-align:start}
  .admin-nav .eyebrow{flex:none}
  .card{border-radius:20px;padding:var(--space-xl) var(--space-lg)}
  .card.page>h1{padding-right:68px}
  .page-emblem{width:54px;height:54px;right:var(--space-md);top:var(--space-md)}
  .pay-grid{grid-template-columns:1fr}
  .qr{margin:0 auto}
  .kv{grid-template-columns:1fr;gap:2px}
  .kv dt{margin-top:8px}
  .hero-card{padding:var(--space-xl) var(--space-lg);padding-right:var(--space-lg);padding-top:96px}
  .hero-card .emblem-big{top:var(--space-md);right:var(--space-md);margin-top:0;width:72px;height:72px}
  .hero-actions{max-width:none;width:100%}
  .hero-actions .btn{width:100%}
  .statusbox{min-height:120px;padding:var(--space-lg)}
  .week-days{gap:2px}
  .week-days li{font-size:.7rem}
  .week-days .col{height:48px}
  .week-days small{display:none}
  .celebrate-toast{left:calc(var(--space-lg) + env(safe-area-inset-left,0px));right:calc(var(--space-lg) + env(safe-area-inset-right,0px));width:auto;grid-template-columns:34px minmax(0,1fr) auto;border-radius:20px}
  .celebrate-toast .emblem-star{width:34px;height:34px}
  .site-footer{border-radius:20px;padding:var(--space-md) var(--space-lg)}
  .ambient i{filter:blur(56px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  #dust,.ambient i{display:none}
}
@media (prefers-reduced-transparency:reduce){
  .main-nav a,.main-nav button.link,.admin-nav a,.lang button,.sound-toggle{-webkit-backdrop-filter:none;backdrop-filter:none;background:#34343a}
  .main-nav a.active,.admin-nav a.active,.lang button.on{background:linear-gradient(var(--button-top),var(--button-bottom))}
}
/* ───────── Arbetsöversikt: köer och tabeller som paneler ───────── */
.sb-value.text{font-weight:900;font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.35;padding:6px 0;background:none;-webkit-text-fill-color:var(--gold-light);filter:none}
.statusbox[data-tone=ok] .sb-value.text{-webkit-text-fill-color:var(--ok)}
.statusbox[data-tone=bad] .sb-value.text{-webkit-text-fill-color:var(--bad)}
.statusbox[data-tone=warn] .sb-value.text{-webkit-text-fill-color:var(--warn)}
.hero-title{font-size:clamp(1.3rem,3.4vw,2rem)}
a.stat:hover{border-top-color:#fff3ba}
.stat.attention{border-color:var(--warn)}
.queue{list-style:none;margin:0 0 var(--space-md);padding:0;display:grid;gap:var(--space-sm)}
.queue li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-md);align-items:center;padding:var(--space-md) var(--space-lg);border:1px solid var(--rule);border-left:4px solid var(--gold);border-radius:var(--radius-row);background:linear-gradient(var(--g-well-top),var(--g-well-bottom));box-shadow:0 2px 6px var(--inner-shadow) inset}
.queue li[data-tone=bad]{border-left-color:var(--bad)}
.queue li[data-tone=warn]{border-left-color:var(--warn)}
.queue .q-main{min-width:0}
.queue strong{display:block;color:var(--ink);overflow-wrap:anywhere}
.queue .q-sub{display:block;color:var(--muted);font-size:.84rem;overflow-wrap:anywhere}
.queue-more{margin-top:var(--space-sm)}
.stack-lg>.table-wrap,.stack>.table-wrap{margin:0;padding:var(--space-sm) var(--space-lg);border:2px solid var(--gold-mid);border-top-color:var(--gold-light);border-bottom-color:var(--gold-dark);border-radius:var(--radius-panel);background:linear-gradient(145deg,var(--g-top),var(--g-bottom));box-shadow:0 1px 0 var(--highlight) inset,0 -2px 3px var(--inner-shadow) inset,0 4px 6px var(--close-shadow),0 22px 32px -18px var(--shadow)}
.stack-lg>.pager,.stack-lg>.filters,.stack-lg>.muted{padding:0 var(--space-xs)}
@media (max-width:760px){
  .queue li{grid-template-columns:minmax(0,1fr) auto}
  .queue li .pill{grid-column:1/-1;justify-self:start}
  .stack-lg>.table-wrap,.stack>.table-wrap{border-radius:20px;padding:var(--space-xs) var(--space-md)}
}
/* ───────── Konton och nätverk ───────── */
.copy-row{display:flex;gap:var(--space-sm);align-items:center}
.copy-row input{flex:1 1 auto;min-width:0;font-family:var(--mono)}
.copy-row .btn{flex:0 0 auto}
.nowrap{white-space:nowrap}