/* ───────── Piksel: an 8-bit game; a day sky with white panels, a night one with black ───────── */

:root[data-skin="piksel"] {
  --background: 219 96% 67%;
  --foreground: 0 0% 0%;
  --card: 0 0% 99%;
  --card-foreground: 0 0% 0%;
  --popover: 0 0% 99%;
  --popover-foreground: 0 0% 0%;
  --primary: 40 97% 61%;
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 99%;
  --secondary-foreground: 0 0% 0%;
  --muted: 0 0% 89%;
  --muted-foreground: 224 46% 21%;
  --accent: 43 95% 82%;
  --accent-foreground: 0 0% 0%;
  --destructive: 337 100% 45%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 0%;
  --input: 0 0% 0%;
  --ring: 0 0% 0%;
  --radius: 0rem;
  --px: 0 0% 0%;
  --shade: rgb(0 0 0 / 0.22);
  /* An outline of square pixels: the corners stay open, as on an 8-bit screen. */
  --px2: 0 -2px 0 0 hsl(var(--px)), 0 2px 0 0 hsl(var(--px)), -2px 0 0 0 hsl(var(--px)), 2px 0 0 0 hsl(var(--px));
  --px3: 0 -3px 0 0 hsl(var(--px)), 0 3px 0 0 hsl(var(--px)), -3px 0 0 0 hsl(var(--px)), 3px 0 0 0 hsl(var(--px));
  --px4: 0 -4px 0 0 hsl(var(--px)), 0 4px 0 0 hsl(var(--px)), -4px 0 0 0 hsl(var(--px)), 4px 0 0 0 hsl(var(--px));
  --font-body: "Pixelify Sans Variable", "Courier New", monospace;
  --font-display: "Press Start 2P", var(--font-body);
  --font-label: var(--font-body);
}

:root.dark[data-skin="piksel"] {
  --background: 228 55% 12%;
  --foreground: 0 0% 99%;
  --card: 0 0% 0%;
  --card-foreground: 0 0% 99%;
  --popover: 0 0% 0%;
  --popover-foreground: 0 0% 99%;
  --primary: 40 97% 61%;
  --primary-foreground: 0 0% 0%;
  --secondary: 228 40% 20%;
  --secondary-foreground: 0 0% 99%;
  --muted: 228 40% 20%;
  --muted-foreground: 220 30% 80%;
  --accent: 228 40% 24%;
  --accent-foreground: 0 0% 99%;
  --destructive: 340 100% 62%;
  --destructive-foreground: 0 0% 0%;
  --border: 0 0% 99%;
  --input: 0 0% 99%;
  --ring: 40 97% 61%;
  --px: 0 0% 99%;
  --shade: rgb(255 255 255 / 0.18);
}

:root[data-skin="piksel"] body {
  font-size: 1.05rem;
}

/* Inside a panel the ground is the panel's: what is drawn on the page's colour there
   (an editor, a select) stays off the sky. */
:root[data-skin="piksel"] :is([data-slot="card"], [data-slot="dialog"], [data-slot="overlay"], [data-slot="project-header"], [data-slot="table-frame"]) {
  --background: var(--card);
}

/* The arcade face for titles, set smaller: its letters fill the whole em box. */
:root[data-skin="piksel"] .font-display {
  font-size-adjust: ex-height 0.42;
  font-weight: 400;
  line-height: 1.35;
  text-shadow: 0.12em 0.12em 0 hsl(var(--primary));
}

:root[data-skin="piksel"] [data-slot="button"] {
  transition: transform 0.06s steps(1);
}
:root[data-skin="piksel"] [data-slot="button"]:is([data-variant="default"], [data-variant="destructive"], [data-variant="secondary"], [data-variant="outline"]) {
  border: 0;
  box-shadow: var(--px3), inset -3px -3px 0 0 var(--shade);
  font-weight: 600;
}
:root[data-skin="piksel"] [data-slot="button"][data-variant="outline"] {
  background-color: hsl(var(--card));
}
:root[data-skin="piksel"] [data-slot="button"]:is([data-variant="default"], [data-variant="destructive"], [data-variant="secondary"], [data-variant="outline"]):hover {
  transform: translateY(-2px);
}
:root[data-skin="piksel"] [data-slot="button"]:is([data-variant="default"], [data-variant="destructive"], [data-variant="secondary"], [data-variant="outline"]):active {
  transform: translateY(2px);
  box-shadow: var(--px3);
}

:root[data-skin="piksel"] [data-slot="card"] {
  border: 0;
  box-shadow: var(--px4);
}

:root[data-skin="piksel"] [data-slot="badge"] {
  margin-inline: 2px;
  border: 0;
  box-shadow: var(--px2);
  font-weight: 600;
}

:root[data-skin="piksel"] [data-slot="input"] {
  border: 0;
  background-color: hsl(var(--card));
  box-shadow: var(--px3);
}

:root[data-skin="piksel"] [data-slot="tabs-list"] {
  height: auto;
  gap: 0.75rem;
  padding: 3px;
  background: transparent;
}
:root[data-skin="piksel"] [data-slot="tabs-trigger"] {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  box-shadow: var(--px3), inset -3px -3px 0 0 var(--shade);
  font-weight: 600;
}
:root[data-skin="piksel"] [data-slot="tabs-trigger"][data-state="active"] {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: var(--px3), inset -3px -3px 0 0 rgb(0 0 0 / 0.22);
}

:root[data-skin="piksel"] [data-slot="table-container"] {
  background-color: hsl(var(--card));
}
:root[data-skin="piksel"] [data-slot="table"] thead tr {
  border-bottom: 0;
  background-color: hsl(var(--foreground));
}
:root[data-skin="piksel"] [data-slot="table"] th {
  color: hsl(var(--card));
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-size-adjust: none;
  font-weight: 400;
}
:root[data-skin="piksel"] [data-slot="table"] tbody tr {
  border-bottom: 3px dashed hsl(var(--px));
}

:root[data-skin="piksel"] :is([data-slot="overlay"], [data-slot="dialog"]) {
  border: 0;
  background-color: hsl(var(--card));
  box-shadow: var(--px4);
}
:root[data-skin="piksel"] [data-slot="tooltip"] {
  border: 0;
  box-shadow: var(--px2);
}

:root[data-skin="piksel"] [data-slot="avatar"] {
  margin: 2px;
  border: 0;
  box-shadow: var(--px2);
  font-weight: 700;
}

:root[data-skin="piksel"] [data-slot="checkbox"] {
  border-width: 2px;
  border-color: hsl(var(--px));
}

/* ── The pages' own parts ── */

/* Piksel has no rounded corners at all. */
:root[data-skin="piksel"] *,
:root[data-skin="piksel"] *::before,
:root[data-skin="piksel"] *::after {
  border-radius: 0 !important;
}

:root[data-skin="piksel"] [data-slot="app-header"] {
  border-bottom: 0;
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  box-shadow: 0 4px 0 0 hsl(var(--px));
}
:root[data-skin="piksel"] [data-slot="nav-bar"] {
  border-top: 3px dashed hsl(var(--px) / 0.35);
  background: transparent;
}
:root[data-skin="piksel"] [data-slot="nav-link"] {
  font-weight: 600;
}
:root[data-skin="piksel"] [data-slot="nav-link"]:is([aria-current="page"], [data-active]) {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: var(--px2);
}
:root[data-skin="piksel"] [data-slot="nav-link"][aria-current="page"]::before {
  content: "▶ ";
}
:root[data-skin="piksel"] [data-slot="logo"] {
  box-shadow: var(--px3);
  image-rendering: pixelated;
}

/* A project's name, dates and team on a panel of their own, as in a game's status screen. */
:root[data-skin="piksel"] [data-slot="project-header"] {
  padding: 1rem 1.25rem;
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  box-shadow: var(--px4), inset -5px -5px 0 0 var(--shade);
}

:root[data-skin="piksel"] [data-slot="project-icon"] {
  border: 0;
  box-shadow: var(--px4);
}

/* An experience bar: ten blocks filling in green. */
:root[data-skin="piksel"] [data-slot="progress"] {
  background-color: hsl(var(--foreground) / 0.25);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%);
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%);
}
:root[data-skin="piksel"] [data-slot="progress-fill"] {
  background-color: #00c800;
  box-shadow: inset 0 -4px 0 0 rgb(0 0 0 / 0.25);
}

:root[data-skin="piksel"] [data-slot="stat"][data-tone] {
  margin-inline: 2px;
  background-color: hsl(var(--card));
  box-shadow: var(--px2);
}

/* The warnings in a game's dialogue box; an overdue delivery stays red. */
:root[data-skin="piksel"] [data-slot="banner"] {
  border: 0;
  box-shadow: var(--px3);
}
:root[data-skin="piksel"] [data-slot="banner"]:not([role="alert"]) {
  background-color: #000;
  color: #fcfcfc;
  box-shadow: 0 -4px 0 0 #fcfcfc, 0 4px 0 0 #fcfcfc, -4px 0 0 0 #fcfcfc, 4px 0 0 0 #fcfcfc, inset 0 0 0 3px #000, inset 0 0 0 5px #fcfcfc;
}

:root[data-skin="piksel"] [data-slot="table-frame"] {
  border: 0;
  background-color: hsl(var(--card));
  box-shadow: var(--px4);
}

:root[data-skin="piksel"] [data-slot="board-column"] {
  border: 0;
  background-color: hsl(var(--card) / 0.85);
  box-shadow: var(--px3);
}

:root[data-skin="piksel"] [data-slot="segmented"] {
  gap: 6px;
  padding: 3px;
  background: transparent;
}
:root[data-skin="piksel"] [data-slot="segmented"] > button {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  box-shadow: var(--px3);
}
:root[data-skin="piksel"] [data-slot="segmented"] > [aria-pressed="true"] {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}