/* ===========================================================================
   playground — skalets utseende: login, lösenordsbyte, admin, skrivbord.

   ⚠️ Bara skalet. Apparna under /projects/ laddar INTE den här filen och ska
      inte göra det heller — varje app ritar om hela sitt utseende. Lägg därför
      aldrig till något appspecifikt här.

   Uttrycket är eget för playground och avsiktligt inte PoleMates: ritpapper,
   monospace-etiketter, hårda skuggor, en blinkande markör. Verkstad snarare
   än produkt. Det ska synas att det är en testbädd.

   ── LJUST OCH MÖRKT ────────────────────────────────────────────────────────
   Sidan följer systemets inställning via prefers-color-scheme. Mörkt är
   grunddräkten och ligger på :root; @media-blocket längst ner byter enbart
   variabler, aldrig regler.

   ⚠️ Skriv därför ALDRIG en färg direkt i en regel. Varje färg — även en
      rgba() för en skugga eller en rutnätslinje — ska vara en variabel, annars
      följer den inte med i det ljusa läget. Det är hela anledningen till att
      listan nedan är så lång.

   Accenten --arc är playgrounds egen (polemate.se/CLAUDE.md). Den byter ton
   mellan lägena: #5eead4 lyser på svart men är oläsbar på vitt, så det ljusa
   läget använder en mörkare teal med samma karaktär.
   =========================================================================== */

:root{
  color-scheme: dark light;   /* rullister, fältramar och kryssrutor följer med */

  /* ── Ytor ── */
  --ink:       #07090f;   /* botten */
  --surface:   #0d121c;   /* kort */
  --surface-2: #121a28;   /* fält, rader */
  --line:      #1c2637;
  --line-lit:  #2b3a52;
  --bar-bg:    rgba(7,9,15,.72);

  /* ── Text ── */
  --text:      #e7eefa;
  --muted:     #7d8ca3;
  --faint:     #4d5b70;

  /* ── Accenter ── */
  --arc:       #5eead4;   /* playgrounds accent */
  --violet:    #a78bfa;
  --amber:     #fbbf24;
  --rose:      #fb7185;
  --lime:      #a3e635;

  /* ── Knappar ── */
  --btn-bg:     #5eead4;
  --btn-bg-hi:  #7df3e0;
  --btn-ink:    #04211c;
  --btn-shadow: rgba(94,234,212,.22);

  /* ── Toningar bakom meddelanden och märken ── */
  --tint-ok:    rgba(94,234,212,.06);
  --tint-warn:  rgba(251,191,36,.08);
  --tint-error: rgba(251,113,133,.07);
  --edge-ok:    rgba(94,234,212,.35);
  --edge-warn:  rgba(251,191,36,.45);
  --edge-error: rgba(251,113,133,.40);

  /* ── Ljus och skuggor ── */
  --glow:          rgba(94,234,212,.10);
  --mark-glow:     rgba(94,234,212,.75);
  --shadow-accent: rgba(94,234,212,.10);
  --shadow-ghost:  rgba(43,58,82,.35);
  --shadow-rose:   rgba(251,113,133,.16);
  --shadow-lift:   rgba(0,0,0,.45);
  --shadow-card:   rgba(0,0,0,.50);

  /* ── Ritpappret ── */
  --grid-fine:  rgba(120,160,210,.045);
  --grid-bold:  rgba(120,160,210,.075);

  --sans: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --mono: ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,Consolas,monospace;

  --r:    14px;           /* radie på kort */
  --gap:  clamp(1rem,2.2vw,1.6rem);
}

/* ── Ljust läge ────────────────────────────────────────────────────────────
   Bara variabler. Samma verkstadskänsla, fast ritpapper i stället för
   blåkopia: kallvit yta, blå rutnätslinjer, mörkare teal.

   ⚠️ Accentfärgerna är INTE samma hexvärden som i mörkt läge, och det är
      poängen. #5eead4 mot vitt ger ungefär 1.4:1 kontrast — obrukbart för
      text. Byt aldrig tillbaka "för konsekvensens skull".                    */
@media (prefers-color-scheme: light){
  :root{
    --ink:       #eef1f7;
    --surface:   #ffffff;
    --surface-2: #f3f6fb;
    --line:      #dde3ee;
    --line-lit:  #b6c1d4;
    --bar-bg:    rgba(255,255,255,.78);

    --text:      #101822;
    --muted:     #56637a;
    --faint:     #8792a5;

    --arc:       #0d9488;
    --violet:    #7c3aed;
    --amber:     #b45309;
    --rose:      #e11d48;
    --lime:      #4d7c0f;

    --btn-bg:     #0d9488;
    --btn-bg-hi:  #0f766e;
    --btn-ink:    #ffffff;
    --btn-shadow: rgba(13,148,136,.22);

    --tint-ok:    rgba(13,148,136,.07);
    --tint-warn:  rgba(180,83,9,.08);
    --tint-error: rgba(225,29,72,.07);
    --edge-ok:    rgba(13,148,136,.40);
    --edge-warn:  rgba(180,83,9,.45);
    --edge-error: rgba(225,29,72,.40);

    --glow:          rgba(13,148,136,.09);
    --mark-glow:     rgba(13,148,136,.45);
    --shadow-accent: rgba(13,148,136,.14);
    --shadow-ghost:  rgba(120,133,155,.32);
    --shadow-rose:   rgba(225,29,72,.16);
    --shadow-lift:   rgba(16,24,34,.14);
    --shadow-card:   rgba(16,24,34,.10);

    --grid-fine:  rgba(30,64,120,.055);
    --grid-bold:  rgba(30,64,120,.095);
  }
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* Ritpapper. Ett millimeterrutnät som tonar bort mot kanterna — det är hela
   bakgrunden, inga bilder och inget som laddas utifrån (CSP:n tillåter ändå
   bara 'self'). */
.paper{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,  var(--grid-fine) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-fine) 1px, transparent 1px),
    linear-gradient(to right,  var(--grid-bold) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-bold) 1px, transparent 1px);
  background-size:26px 26px,26px 26px,130px 130px,130px 130px;
  mask-image:radial-gradient(ellipse 95% 80% at 50% 30%,#000 25%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 95% 80% at 50% 30%,#000 25%,transparent 80%);
}
/* Ett svagt ljus uppe till vänster så ytan inte är helt platt. */
body::before{
  content:"";position:fixed;z-index:0;pointer-events:none;
  width:70vmax;height:70vmax;left:-26vmax;top:-32vmax;border-radius:50%;
  background:radial-gradient(circle,var(--glow),transparent 65%);
  filter:blur(70px);
}

/* ── Typografiska grundformer ─────────────────────────────────────────── */

h1,h2,h3{margin:0;font-weight:660;letter-spacing:-.025em;line-height:1.15}
h1{font-size:clamp(1.5rem,1rem + 2vw,2.1rem)}
h2{font-size:1.05rem}
p{margin:0}
a{color:var(--arc)}

/* Mikroetikett: versaler, monospace, glest. Sitter över rubriker och fält och
   är det som ger sidan sin ton. */
.eyebrow{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ── Sidhuvud ─────────────────────────────────────────────────────────── */

.bar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  padding:.9rem clamp(1rem,4vw,2.4rem);
  border-bottom:1px solid var(--line);
  background:var(--bar-bg);
  backdrop-filter:blur(8px);
}

.mark{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--text);
  text-decoration:none;
}
.mark__dot{
  width:9px;height:9px;border-radius:3px;
  background:var(--arc);
  box-shadow:0 0 12px var(--mark-glow);
}
.mark__caret{color:var(--arc);animation:blink 1.15s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Märket som rubrik över inloggningskortet — där finns inget sidhuvud. */
.mark--lead{
  justify-content:center;
  margin:0 0 1.1rem;
  font-size:1.05rem;
  letter-spacing:.02em;
}

.bar__nav{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}

.who{display:inline-flex;align-items:center;gap:.5rem;margin-right:.6rem}
.who__name{font-family:var(--mono);font-size:.85rem;color:var(--text)}

.tag{
  font-family:var(--mono);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.18rem .45rem;border-radius:4px;
  border:1px solid var(--line-lit);
  color:var(--muted);
}
.tag--admin{
  border-color:var(--edge-warn);
  color:var(--amber);
  background:var(--tint-warn);
}

.lnk{
  padding:.42rem .7rem;border-radius:8px;
  font-size:.85rem;color:var(--muted);text-decoration:none;
  border:1px solid transparent;
}
.lnk:hover{color:var(--text);background:var(--surface-2);border-color:var(--line)}
.lnk--out:hover{color:var(--rose);border-color:var(--edge-error)}

/* ── Ytor ─────────────────────────────────────────────────────────────── */

.wrap{
  position:relative;z-index:2;
  flex:1;
  width:100%;
  max-width:1040px;
  margin-inline:auto;
  padding:clamp(1.6rem,4vw,3rem) clamp(1rem,4vw,2.4rem) 4rem;
}

/* Centrerad kortsida — login och lösenordsbyte. */
.v-auth .wrap{
  max-width:430px;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(2rem,8vh,5rem);
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(1.3rem,3vw,1.9rem);
}

/* Kortet på inloggningssidan har en accentskena i överkant och en hård
   skugga i stället för en mjuk — det är den lekfulla detaljen. */
.card--auth{
  position:relative;
  box-shadow:6px 6px 0 var(--shadow-accent), 0 24px 60px var(--shadow-card);
}
.card--auth::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
  border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg,var(--arc),var(--violet) 55%,var(--amber));
}

.stack{display:flex;flex-direction:column;gap:1rem}
.stack--tight{gap:.6rem}

.lede{color:var(--muted);font-size:.92rem}

.head{margin-bottom:1.6rem}
.head h1{margin-top:.35rem}
.head .lede{margin-top:.5rem}

/* ── Formulär ─────────────────────────────────────────────────────────── */

label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:.32rem}

input[type=text],input[type=password],select{
  width:100%;
  padding:.66rem .78rem;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--text);
  font:inherit;
  font-size:.95rem;
}
input[type=password]{font-family:var(--mono);letter-spacing:.06em}
input::placeholder{color:var(--faint)}

input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--arc);
  outline-offset:2px;
}
input:focus{border-color:var(--line-lit)}

.hint{margin-top:.35rem;font-size:.76rem;color:var(--faint)}

/* Knappar. Fyrkantiga axlar och en hård skugga som trycks in vid klick —
   leksaken i ett annars stramt gränssnitt. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.62rem 1.05rem;
  border:1px solid transparent;
  border-radius:9px;
  background:var(--btn-bg);
  color:var(--btn-ink);
  font:inherit;font-size:.9rem;font-weight:640;
  letter-spacing:.01em;
  cursor:pointer;
  text-decoration:none;
  box-shadow:3px 3px 0 var(--btn-shadow);
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.btn:hover{background:var(--btn-bg-hi)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 rgba(0,0,0,0)}
.btn--wide{width:100%}

.btn--ghost{
  background:transparent;color:var(--text);
  border-color:var(--line-lit);
  box-shadow:3px 3px 0 var(--shadow-ghost);
}
.btn--ghost:hover{background:var(--surface-2)}

.btn--danger{
  background:transparent;color:var(--rose);
  border-color:var(--edge-error);
  box-shadow:3px 3px 0 var(--shadow-rose);
}
.btn--danger:hover{background:var(--tint-error)}

.btn--sm{padding:.36rem .6rem;font-size:.78rem;box-shadow:2px 2px 0 var(--shadow-ghost)}
.btn--sm:active{transform:translate(2px,2px)}

/* ── Meddelanden ──────────────────────────────────────────────────────── */

.note{
  border:1px solid var(--line);
  border-left:3px solid var(--muted);
  border-radius:9px;
  padding:.8rem .95rem;
  margin-bottom:1.1rem;
  font-size:.9rem;
  background:var(--surface);
}
.note--ok   {border-left-color:var(--arc);   background:var(--tint-ok)}
.note--warn {border-left-color:var(--amber); background:var(--tint-warn)}
.note--error{border-left-color:var(--rose);  background:var(--tint-error)}

.note__code{margin-top:.6rem}
.note__code code{
  display:inline-block;
  font-family:var(--mono);
  font-size:1.15rem;
  letter-spacing:.09em;
  padding:.42rem .7rem;
  border-radius:7px;
  background:var(--ink);
  border:1px dashed var(--line-lit);
  color:var(--amber);
  user-select:all;              /* ett klick markerar hela lösenordet */
}

/* ── Skrivbordet ──────────────────────────────────────────────────────── */

.desk{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(198px,1fr));
  gap:var(--gap);
  margin-top:1.6rem;
}

/* Rutan. Kvadratisk, med appens accent, ett spöknummer i bakgrunden och ett
   lyft vid hover.

   Appens accent kommer som ett fast hexvärde från pg_projects() och kan inte
   ha två varianter. --accent-ink är därför en mörkad version för TEXT i ljust
   läge; skenan och ringen använder råfärgen, som klarar sig som yta.
   color-mix saknas i riktigt gamla webbläsare — då gäller raden ovanför, och
   texten blir ljusare än ideal men inte trasig. */
.tile{
  --accent-ink:var(--accent,var(--arc));
  position:relative;
  aspect-ratio:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:.3rem;
  padding:1.05rem;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  overflow:hidden;
  isolation:isolate;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), border-color .16s, box-shadow .16s;
}
@media (prefers-color-scheme: light){
  .tile{--accent-ink:color-mix(in srgb, var(--accent,var(--arc)) 72%, #0a1a24)}
}
.tile::before{               /* accentskenan */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--accent,var(--arc));
  opacity:.85;
}
.tile::after{                /* spöknumret */
  content:attr(data-glyph);
  position:absolute;right:.5rem;top:.1rem;z-index:-1;
  font-family:var(--mono);font-size:4.6rem;font-weight:700;
  color:var(--accent-ink);
  opacity:.09;
  letter-spacing:-.06em;
}
.tile:hover{
  transform:translateY(-4px);
  border-color:var(--accent,var(--arc));
  box-shadow:0 14px 34px var(--shadow-lift);
}
.tile__name{font-size:1.02rem;font-weight:640;letter-spacing:-.02em}
.tile__tagline{font-size:.79rem;color:var(--muted);line-height:1.4}
.tile__status{
  position:absolute;left:1.05rem;top:1.05rem;
  display:inline-flex;align-items:center;gap:.38rem;
  font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);
}
.tile__status::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent,var(--arc));
}

/* Tom plats. Streckad ram — det ska se ut som en plats som väntar, inte som
   ett fel. */
.tile--empty{
  border-style:dashed;
  border-color:var(--line);
  background:transparent;
  align-items:center;justify-content:center;
  color:var(--faint);
  font-family:var(--mono);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;
  cursor:default;
}
.tile--empty:hover{transform:none;border-color:var(--line);box-shadow:none}

/* ── Tabell (användaradmin) ───────────────────────────────────────────── */

.tbl-scroll{overflow-x:auto;margin-inline:-.4rem;padding-inline:.4rem}

table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:640px}
th{
  text-align:left;
  padding:.55rem .6rem;
  font-family:var(--mono);
  font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
td{padding:.6rem;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}

.u-name{font-family:var(--mono);font-weight:600}
.u-me{color:var(--faint);font-size:.75rem;margin-left:.35rem}
.u-when{color:var(--muted);white-space:nowrap;font-size:.82rem}
.u-acts{display:flex;gap:.35rem;justify-content:flex-end;flex-wrap:wrap}
td.u-acts{text-align:right}

.pill{
  display:inline-block;
  font-family:var(--mono);font-size:.6rem;
  letter-spacing:.13em;text-transform:uppercase;
  padding:.16rem .42rem;border-radius:4px;
  border:1px solid var(--line-lit);color:var(--muted);
  white-space:nowrap;
}
.pill--wait{border-color:var(--edge-warn); color:var(--amber);background:var(--tint-warn)}
.pill--off {border-color:var(--edge-error);color:var(--rose); background:var(--tint-error)}
.pill--ok  {border-color:var(--edge-ok);   color:var(--arc);  background:var(--tint-ok)}

/* ── Sektion ──────────────────────────────────────────────────────────── */

.sect{margin-top:2.2rem}
.sect__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  margin-bottom:.9rem;
}

.row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end}
.row > *{flex:1 1 170px}
.row > .row__btn{flex:0 0 auto}

/* ── Sidfot ───────────────────────────────────────────────────────────── */

.foot{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  padding:1.1rem clamp(1rem,4vw,2.4rem);
  padding-bottom:max(1.1rem,env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);
}
.foot__mode{color:var(--muted)}

/* ── Små skärmar ──────────────────────────────────────────────────────── */

@media (max-width:560px){
  .bar{padding-inline:1rem}
  .who{margin-right:.2rem}
  .desk{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .tile::after{font-size:3.4rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tile:hover{transform:none}
  .btn:active{transform:none}
}