:root {
  color-scheme: light;
  --bg: #09111f;
  --panel: #f8fbff;
  --panel-tint: #f5ecd8;
  --text: #18202c;
  --muted: #607082;
  --line: #c9d4e5;
  --accent: #00a7a7;
  --accent-dark: #087070;
  --danger: #b42318;
  --critical: #b42318;
  --high: #c15c18;
  --medium: #75631b;
  --low: #247044;
  --electric-cyan: #00e5ff;
  --electric-lime: #7dff68;
  --electric-pink: #ff2fa3;
  --electric-gold: #ffd166;
  --electric-violet: #8b5cf6;
  --frame-x: clamp(64px, 9vw, 150px);
  --frame-y: clamp(54px, 8.5vh, 112px);
  --task-row-height: 116px;
  --archive-control-width: 98.58px;
  --archive-bubble-height: calc(var(--archive-control-width) * 0.5455);
  --archive-page-control-height: calc(var(--archive-control-width) * 0.4375);
  --archive-page-control-padding-x: calc(var(--archive-control-width) * 0.14);
  --archive-page-control-font-size: calc(var(--archive-control-width) * 0.125);
  --pill-letter-glow: rgb(218 244 255 / 82%);
  --pill-letter-core: rgb(8 14 19 / 92%);
  --pill-master-face:
    repeating-linear-gradient(94deg, rgb(255 255 255 / 16%) 0 1px, rgb(35 45 52 / 7%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(90deg, rgb(255 255 255 / 46%) 0%, rgb(255 255 255 / 14%) 22%, rgb(55 68 76 / 10%) 100%),
    linear-gradient(180deg, #fafafa 0%, #e5e9ea 26%, #cbd3d6 64%, #b1bcc2 100%);
  --pill-master-face-hover:
    repeating-linear-gradient(94deg, rgb(255 255 255 / 19%) 0 1px, rgb(35 45 52 / 6%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(90deg, rgb(255 255 255 / 54%) 0%, rgb(255 255 255 / 18%) 22%, rgb(55 68 76 / 8%) 100%),
    linear-gradient(180deg, #ffffff 0%, #edf1f1 26%, #d3dcdf 64%, #b8c4ca 100%);
  --pill-master-face-active:
    repeating-linear-gradient(94deg, rgb(255 255 255 / 9%) 0 1px, rgb(35 45 52 / 9%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(180deg, #cfd7da 0%, #aeb9c0 48%, #89969e 100%);
  --pill-metal-edge: rgb(132 144 152 / 92%);
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  position: relative !important;
  isolation: isolate;
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px),
    linear-gradient(0deg, rgb(255 255 255 / 4%) 1px, transparent 1px),
    linear-gradient(135deg, #09111f 0%, #0d1830 44%, #121323 100%);
  background-size: 34px 34px, 34px 34px, auto;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: clip;
}

/* Preset: Faded Working Body Border - PCB frame artwork and center glow behind the work body. */
.frame-art {
  position: fixed;
  inset: 0;
  z-index: 0;
  isolation: isolate;
  background:
    url("assets/pcb-border-realistic.png") center / cover no-repeat,
    linear-gradient(135deg, #07101e 0%, #0c1930 50%, #140e28 100%);
  filter: brightness(1.24) contrast(1.08) saturate(1.12);
  pointer-events: none;
}

.pcb-zone {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: none;
  background-image: url("assets/pcb-border-realistic.png");
  background-repeat: no-repeat;
  pointer-events: none;
}

.dones-view .pcb-zone {
  display: none;
}

.frame-art::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 48%, rgb(8 15 28 / 0%) 0 38%, rgb(8 15 28 / 10%) 58%, rgb(8 15 28 / 34%) 100%),
    linear-gradient(180deg, rgb(255 255 255 / 14%), rgb(0 229 255 / 4%) 24%, rgb(0 0 0 / 10%) 100%);
  content: "";
}

.frame-art::after {
  position: absolute;
  inset: calc(var(--frame-y) - 64px) calc(var(--frame-x) - 72px);
  z-index: 1;
  border-radius: 72px;
  background:
    radial-gradient(ellipse at center, rgb(226 207 170 / 24%) 0 26%, rgb(226 207 170 / 14%) 46%, rgb(8 15 28 / 18%) 72%, rgb(8 15 28 / 0%) 100%);
  box-shadow:
    0 0 110px 82px rgb(226 207 170 / 16%),
    0 0 180px 126px rgb(8 15 28 / 16%);
  content: "";
  filter: blur(28px);
}
/* End preset: Faded Working Body Border - PCB frame artwork and center glow behind the work body. */

.dones-view .frame-art {
  background:
    radial-gradient(ellipse at 50% 48%, rgb(255 221 154 / 20%) 0 22%, rgb(30 18 10 / 10%) 44%, rgb(8 6 5 / 72%) 100%),
    linear-gradient(135deg, #1a0e07 0%, #2d190d 48%, #0d0906 100%);
  filter: saturate(1.08) contrast(1.12);
}

.dones-view .frame-art::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgb(255 236 190 / 0%) 0 34%, rgb(38 23 12 / 20%) 55%, rgb(6 4 3 / 72%) 100%),
    radial-gradient(ellipse at 46% 48%, rgb(255 220 145 / 30%) 0 30%, rgb(255 180 82 / 8%) 50%, transparent 70%),
    linear-gradient(135deg, rgb(48 31 20), rgb(20 13 9));
  clip-path: polygon(
    0 0, 100% 0, 100% 16%, 84% 16%, 84% 100%, 100% 100%, 100% 84%, 0 84%,
    0 100%, 16% 100%, 16% 16%, 0 16%
  );
  box-shadow: inset 0 0 120px rgb(0 0 0 / 56%);
}

.dones-view .frame-art::after {
  inset: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 54%) 0 4%, transparent 12% 88%, rgb(0 0 0 / 54%) 96% 100%),
    linear-gradient(180deg, rgb(0 0 0 / 48%) 0 4%, transparent 13% 87%, rgb(0 0 0 / 50%) 96% 100%),
    radial-gradient(ellipse at center, rgb(255 226 166 / 30%) 0 31%, rgb(255 226 166 / 8%) 49%, transparent 70%);
  box-shadow: inset 0 0 170px 58px rgb(0 0 0 / 58%);
  content: "";
  pointer-events: none;
}

.archive-crate-border {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  overflow: hidden;
  pointer-events: none;
}

.dones-view .archive-crate-border {
  display: block;
  background: url("assets/archive-crate-border.png?v=20260806-approved-crate-border") bottom center / cover no-repeat;
}

.dones-view .archive-crate-border > .archive-box {
  display: none;
}

.archive-box {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  height: var(--h);
  --plank-seams: linear-gradient(0deg, rgb(31 22 14 / 0.36) 0 2px, transparent 2px 34%, rgb(31 22 14 / 0.28) 34% calc(34% + 2px), transparent calc(34% + 2px) 68%, rgb(31 22 14 / 0.30) 68% calc(68% + 2px), transparent calc(68% + 2px) 100%);
  --plank-end-shadow: linear-gradient(90deg, rgb(255 235 180 / 0.14) 0 1px, transparent 1px 94%, rgb(28 18 11 / 0.20) 94% 100%);
  --grain-knot-a: radial-gradient(ellipse at 24% 34%, rgb(52 34 20 / 0.18) 0 4%, transparent 7%);
  --grain-knot-b: radial-gradient(ellipse at 76% 66%, rgb(255 235 176 / 0.12) 0 4%, transparent 7%);
  --grain-lines: repeating-linear-gradient(0deg, transparent 0 6px, rgb(42 28 18 / 0.20) 7px, transparent 9px);
  --grain-highlights: repeating-linear-gradient(0deg, rgb(255 238 188 / 0.10) 0 1px, transparent 1px 13px);
  --surface-grain: repeating-linear-gradient(0deg, rgb(39 32 20 / 0.15) 0 1px, transparent 1px 9px);
  --side-grain: repeating-linear-gradient(0deg, rgb(18 13 8 / 0.30) 0 1px, transparent 1px 9px);
  --side-rail: rgb(16 13 10 / 0.76);
  --side-rail-hi: rgb(126 104 66 / 0.20);
  --side-frame:
    linear-gradient(90deg, var(--side-rail) 0 10px, transparent 10px calc(100% - 10px), var(--side-rail) calc(100% - 10px) 100%),
    linear-gradient(0deg, var(--side-rail) 0 9px, transparent 9px calc(100% - 9px), var(--side-rail) calc(100% - 9px) 100%);
  --side-rivets:
    radial-gradient(circle at 7px 7px, var(--rivet-hi) 0 1px, var(--rivet) 1.2px 2.6px, transparent 3px),
    radial-gradient(circle at calc(100% - 7px) 7px, var(--rivet-hi) 0 1px, var(--rivet) 1.2px 2.6px, transparent 3px),
    radial-gradient(circle at 7px calc(100% - 7px), var(--rivet-hi) 0 1px, var(--rivet) 1.2px 2.6px, transparent 3px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), var(--rivet-hi) 0 1px, var(--rivet) 1.2px 2.6px, transparent 3px);
  --box-depth: 18px;
  --top-skew: -24deg;
  --side-skew: 14deg;
  --strap-frame:
    linear-gradient(90deg, var(--strap-dark) 0 7%, transparent 7% 44%, var(--strap-dark) 44% 56%, transparent 56% 93%, var(--strap-dark) 93% 100%),
    linear-gradient(0deg, var(--strap-dark) 0 9%, transparent 9% 91%, var(--strap-dark) 91% 100%);
  --rivet-map:
    radial-gradient(circle at 6% 7%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 16% 7%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 50% 7%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 84% 7%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 94% 7%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 6% 93%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 16% 93%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 50% 93%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 84% 93%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 94% 93%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px);
  isolation: isolate;
  z-index: var(--crate-z, 2);
  border: 1px solid rgb(28 20 14 / 0.86);
  border-radius: 3px;
  box-shadow:
    var(--cast-x, 18px) var(--cast-y, 20px) var(--cast-blur, 26px) rgb(0 0 0 / 0.48),
    0 10px 12px rgb(0 0 0 / 0.34),
    inset 0 2px 0 rgb(255 240 188 / 0.28),
    inset 0 -20px 18px rgb(25 16 10 / 0.32),
    inset 10px 0 14px rgb(255 226 166 / 0.08),
    inset -12px 0 16px rgb(0 0 0 / 0.22);
  transform:
    perspective(var(--perspective, 440px))
    translateZ(var(--lift, 0px))
    rotateX(var(--tilt-x, 2deg))
    rotateY(var(--tilt-y, -4deg))
    rotateZ(var(--r))
    scaleX(var(--scale-x, 1))
    scaleY(var(--scale-y, 1));
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: visible;
  filter: brightness(var(--brightness, 1)) saturate(var(--saturation, 1));
}

.archive-box::before,
.archive-box::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.archive-box::before {
  top: -8px;
  left: calc(100% - 1px);
  z-index: -1;
  width: var(--box-depth);
  height: calc(100% + 8px);
  border: 1px solid rgb(11 8 5 / 0.82);
  border-radius: 0 3px 3px 0;
  background:
    var(--side-frame),
    var(--side-rivets),
    linear-gradient(90deg, rgb(255 234 176 / 0.12) 0 10px, transparent 10px calc(100% - 15px), rgb(0 0 0 / 0.28) calc(100% - 15px) 100%),
    linear-gradient(0deg, rgb(255 234 176 / 0.08) 0 9px, transparent 9px calc(100% - 14px), rgb(0 0 0 / 0.30) calc(100% - 14px) 100%),
    var(--side-grain),
    repeating-linear-gradient(90deg, var(--side-rail-hi) 0 1px, transparent 1px 18px),
    linear-gradient(90deg, var(--side-a), var(--side-b) 48%, var(--side-c));
  box-shadow:
    inset 7px 0 9px rgb(255 232 174 / 0.08),
    inset -12px 0 16px rgb(0 0 0 / 0.40),
    inset 0 -12px 14px rgb(0 0 0 / 0.38);
  opacity: 0.96;
  transform: skewY(var(--side-skew));
  transform-origin: left top;
}

.archive-box::after {
  bottom: calc(100% - 1px);
  left: 7px;
  z-index: -1;
  width: calc(100% + 10px);
  height: var(--box-depth);
  border: 1px solid rgb(11 8 5 / 0.78);
  border-radius: 3px 3px 0 0;
  background:
    var(--side-frame),
    var(--side-rivets),
    linear-gradient(180deg, rgb(255 236 184 / 0.16), transparent 45%, rgb(0 0 0 / 0.30) 100%),
    var(--side-grain),
    linear-gradient(90deg, var(--side-b), var(--side-a) 46%, var(--side-c));
  box-shadow:
    inset 0 5px 9px rgb(255 230 166 / 0.08),
    inset 0 -10px 12px rgb(0 0 0 / 0.36),
    0 -5px 12px rgb(0 0 0 / 0.24);
  transform: skewX(var(--top-skew));
  transform-origin: left bottom;
}

.archive-box.wide {
  --plank-seams: linear-gradient(0deg, rgb(31 22 14 / 0.36) 0 2px, transparent 2px 34%, rgb(31 22 14 / 0.28) 34% calc(34% + 2px), transparent calc(34% + 2px) 68%, rgb(31 22 14 / 0.30) 68% calc(68% + 2px), transparent calc(68% + 2px) 100%);
  --plank-end-shadow: linear-gradient(90deg, rgb(255 235 180 / 0.14) 0 1px, transparent 1px 92%, rgb(28 18 11 / 0.24) 92% 100%);
  --grain-knot-a: radial-gradient(ellipse at 23% 34%, rgb(52 34 20 / 0.18) 0 4%, transparent 7%);
  --grain-knot-b: radial-gradient(ellipse at 77% 64%, rgb(255 235 176 / 0.12) 0 4%, transparent 7%);
  --grain-lines: repeating-linear-gradient(0deg, transparent 0 6px, rgb(42 28 18 / 0.21) 7px, transparent 9px);
  --grain-highlights: repeating-linear-gradient(0deg, rgb(255 238 188 / 0.10) 0 1px, transparent 1px 13px);
  --surface-grain: repeating-linear-gradient(0deg, rgb(39 32 20 / 0.15) 0 1px, transparent 1px 9px);
  --side-grain: repeating-linear-gradient(0deg, rgb(18 13 8 / 0.30) 0 1px, transparent 1px 9px);
  --side-skew: 14deg;
  --top-skew: -24deg;
  --side-frame:
    linear-gradient(90deg, var(--side-rail) 0 10px, transparent 10px calc(100% - 10px), var(--side-rail) calc(100% - 10px) 100%),
    linear-gradient(0deg, var(--side-rail) 0 9px, transparent 9px calc(100% - 9px), var(--side-rail) calc(100% - 9px) 100%);
  --strap-frame:
    linear-gradient(90deg, var(--strap-dark) 0 7%, transparent 7% 44%, var(--strap-dark) 44% 56%, transparent 56% 93%, var(--strap-dark) 93% 100%),
    linear-gradient(0deg, var(--strap-dark) 0 9%, transparent 9% 91%, var(--strap-dark) 91% 100%);
  --rivet-map:
    radial-gradient(circle at 6% 7%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 16% 7%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 50% 7%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 84% 7%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 94% 7%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 6% 93%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 16% 93%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 50% 93%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 84% 93%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 94% 93%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px);
}

.archive-box.tall {
  --plank-seams: linear-gradient(90deg, rgb(31 22 14 / 0.36) 0 2px, transparent 2px 34%, rgb(31 22 14 / 0.28) 34% calc(34% + 2px), transparent calc(34% + 2px) 68%, rgb(31 22 14 / 0.30) 68% calc(68% + 2px), transparent calc(68% + 2px) 100%);
  --plank-end-shadow: linear-gradient(0deg, rgb(255 235 180 / 0.14) 0 1px, transparent 1px 92%, rgb(28 18 11 / 0.24) 92% 100%);
  --grain-knot-a: radial-gradient(ellipse at 34% 24%, rgb(52 34 20 / 0.18) 0 4%, transparent 7%);
  --grain-knot-b: radial-gradient(ellipse at 64% 78%, rgb(255 235 176 / 0.12) 0 4%, transparent 7%);
  --grain-lines: repeating-linear-gradient(90deg, transparent 0 6px, rgb(42 28 18 / 0.21) 7px, transparent 9px);
  --grain-highlights: repeating-linear-gradient(90deg, rgb(255 238 188 / 0.10) 0 1px, transparent 1px 13px);
  --surface-grain: repeating-linear-gradient(90deg, rgb(39 32 20 / 0.15) 0 1px, transparent 1px 9px);
  --side-grain: repeating-linear-gradient(90deg, rgb(18 13 8 / 0.30) 0 1px, transparent 1px 9px);
  --side-skew: -12deg;
  --top-skew: -18deg;
  --side-frame:
    linear-gradient(0deg, var(--side-rail) 0 10px, transparent 10px calc(100% - 10px), var(--side-rail) calc(100% - 10px) 100%),
    linear-gradient(90deg, var(--side-rail) 0 9px, transparent 9px calc(100% - 9px), var(--side-rail) calc(100% - 9px) 100%);
  --strap-frame:
    linear-gradient(0deg, var(--strap-dark) 0 7%, transparent 7% 44%, var(--strap-dark) 44% 56%, transparent 56% 93%, var(--strap-dark) 93% 100%),
    linear-gradient(90deg, var(--strap-dark) 0 9%, transparent 9% 91%, var(--strap-dark) 91% 100%);
  --rivet-map:
    radial-gradient(circle at 7% 6%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 7% 16%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 7% 50%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 7% 84%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 7% 94%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 93% 6%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 93% 16%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 93% 50%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 93% 84%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px),
    radial-gradient(circle at 93% 94%, var(--rivet-hi) 0 1.1px, var(--rivet) 1.2px 3px, transparent 3.4px);
}

.archive-box.cardboard {
  --face-a: #8a7751;
  --face-b: #b09a68;
  --face-c: #675337;
  --side-a: #4f432b;
  --side-b: #6a5937;
  --side-c: #33281a;
  --rivet: rgb(28 29 25 / 0.82);
  --rivet-hi: rgb(214 215 198 / 0.64);
  --strap-dark: rgb(24 23 19 / 0.64);
  --tilt-x: 3deg;
  --tilt-y: -5deg;
  background:
    var(--strap-frame),
    var(--rivet-map),
    var(--plank-seams),
    var(--plank-end-shadow),
    var(--grain-knot-a),
    var(--grain-knot-b),
    var(--grain-lines),
    var(--grain-highlights),
    var(--surface-grain),
    linear-gradient(112deg, rgb(255 248 215 / 0.14), transparent 36%, rgb(26 19 13 / 0.20) 100%),
    linear-gradient(90deg, #8a7751, #b09a68 52%, #675337);
}

.archive-box.wood.pale {
  --face-a: #a98255;
  --face-b: #d1b17d;
  --face-c: #7a5734;
  --side-a: #644626;
  --side-b: #866339;
  --side-c: #3d2a18;
  --rivet: rgb(24 24 22 / 0.78);
  --rivet-hi: rgb(226 224 205 / 0.62);
  --strap-dark: rgb(42 38 30 / 0.56);
  --tilt-x: 2deg;
  --tilt-y: -4deg;
  background:
    var(--strap-frame),
    var(--rivet-map),
    var(--plank-seams),
    var(--plank-end-shadow),
    var(--grain-knot-a),
    var(--grain-knot-b),
    var(--grain-lines),
    var(--grain-highlights),
    var(--surface-grain),
    linear-gradient(103deg, rgb(255 237 178 / 0.13), transparent 35%, rgb(31 17 9 / 0.18) 100%),
    linear-gradient(90deg, #a98255, #d1b17d 48%, #7a5734);
}

.archive-box.wood.dark {
  --face-a: #51402a;
  --face-b: #79623e;
  --face-c: #2f2418;
  --side-a: #2f2418;
  --side-b: #46351f;
  --side-c: #19120c;
  --rivet: rgb(16 16 14 / 0.82);
  --rivet-hi: rgb(189 188 174 / 0.58);
  --strap-dark: rgb(18 18 15 / 0.70);
  --tilt-x: 3deg;
  --tilt-y: 5deg;
  background:
    var(--strap-frame),
    var(--rivet-map),
    var(--plank-seams),
    var(--plank-end-shadow),
    var(--grain-knot-a),
    var(--grain-knot-b),
    var(--grain-lines),
    var(--grain-highlights),
    var(--surface-grain),
    linear-gradient(103deg, rgb(255 237 178 / 0.08), transparent 35%, rgb(0 0 0 / 0.22) 100%),
    linear-gradient(90deg, #51402a, #79623e 52%, #2f2418);
}

.archive-box.cardboard::before {
  background:
    var(--side-frame),
    var(--side-rivets),
    linear-gradient(90deg, rgb(255 234 176 / 0.11) 0 10px, transparent 10px calc(100% - 15px), rgb(0 0 0 / 0.30) calc(100% - 15px) 100%),
    linear-gradient(0deg, rgb(255 234 176 / 0.08) 0 9px, transparent 9px calc(100% - 14px), rgb(0 0 0 / 0.31) calc(100% - 14px) 100%),
    var(--side-grain),
    repeating-linear-gradient(90deg, var(--side-rail-hi) 0 1px, transparent 1px 18px),
    linear-gradient(90deg, #4f432b, #6a5937 48%, #33281a);
}

.archive-box.cardboard::after {
  background:
    var(--side-frame),
    var(--side-rivets),
    linear-gradient(180deg, rgb(255 236 184 / 0.16), transparent 45%, rgb(0 0 0 / 0.30) 100%),
    var(--side-grain),
    linear-gradient(90deg, #6a5937, #4f432b 46%, #33281a);
}

.archive-box.wood::before {
  background:
    var(--side-frame),
    var(--side-rivets),
    linear-gradient(90deg, rgb(255 234 176 / 0.10) 0 10px, transparent 10px calc(100% - 15px), rgb(0 0 0 / 0.32) calc(100% - 15px) 100%),
    linear-gradient(0deg, rgb(255 234 176 / 0.07) 0 9px, transparent 9px calc(100% - 14px), rgb(0 0 0 / 0.34) calc(100% - 14px) 100%),
    var(--side-grain),
    repeating-linear-gradient(90deg, var(--side-rail-hi) 0 1px, transparent 1px 18px),
    linear-gradient(90deg, var(--side-a), var(--side-b) 48%, var(--side-c));
}

.archive-box.wood::after {
  background:
    var(--side-frame),
    var(--side-rivets),
    linear-gradient(180deg, rgb(255 236 184 / 0.13), transparent 45%, rgb(0 0 0 / 0.34) 100%),
    var(--side-grain),
    linear-gradient(90deg, var(--side-b), var(--side-a) 46%, var(--side-c));
}

.archive-box span {
  position: absolute;
  top: var(--label-y, 62%);
  left: var(--label-x, 28%);
  z-index: 3;
  max-width: var(--label-max, 42%);
  border: 0;
  padding: 0;
  color: rgb(21 28 20 / 0.68);
  background:
    repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 9px),
    linear-gradient(currentColor, currentColor);
  background-clip: text;
  font-family: Impact, "Arial Black", "Arial Narrow", Arial, Helvetica, sans-serif;
  font-size: var(--label-size, clamp(9px, 0.68vw, 14px));
  font-weight: 900;
  letter-spacing: 0.15em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.25px rgb(19 24 18 / 0.24);
  filter:
    drop-shadow(0 1px 0 rgb(255 230 166 / 0.10))
    blur(0.12px);
  transform:
    translate(-50%, -50%)
    rotate(var(--label-r, 36deg))
    scaleX(var(--label-scale-x, 0.88));
  transform-origin: center;
}

.archive-box.cardboard span {
  color: rgb(18 23 17 / 0.60);
}

.archive-box.tall span {
  top: var(--label-y, 28%);
  left: var(--label-x, 54%);
  max-width: var(--label-max, 64%);
  transform:
    translate(-50%, -50%)
    rotate(var(--label-r, -38deg))
    scaleX(var(--label-scale-x, 0.86));
}

.crate-mark {
  position: absolute;
  top: var(--mark-y, 62%);
  left: var(--mark-x, 72%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    rotate(var(--mark-r, 36deg));
  transform-origin: center;
}

.crate-mark.freight {
  min-width: 58px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  padding: 2px 4px 1px;
  color: rgb(20 30 24 / 0.50);
  font-family: Impact, "Arial Black", "Arial Narrow", Arial, Helvetica, sans-serif;
  font-size: var(--mark-size, clamp(7px, 0.58vw, 11px));
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  background:
    linear-gradient(90deg, transparent 0 10%, currentColor 10% 13%, transparent 13% 87%, currentColor 87% 90%, transparent 90% 100%);
  opacity: 0.78;
  filter: blur(0.12px);
}

.crate-mark.freight::before,
.crate-mark.freight::after {
  width: 12px;
  height: 1px;
  margin: 0 3px;
  background: currentColor;
  content: "";
  box-shadow:
    0 -3px 0 currentColor,
    0 3px 0 currentColor;
  transform: skewX(-20deg);
}

.crate-mark.stamp {
  min-width: 58px;
  border: 1px solid rgb(76 30 24 / 0.48);
  padding: 4px 5px 3px;
  color: rgb(92 29 25 / 0.58);
  background:
    linear-gradient(135deg, rgb(255 244 204 / 0.52), rgb(231 212 166 / 0.32)),
    repeating-linear-gradient(0deg, rgb(96 42 28 / 0.06) 0 1px, transparent 1px 5px);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.20),
    inset 0 0 0 1px rgb(255 255 255 / 0.18);
  font-family: "Arial Narrow", Impact, Arial, Helvetica, sans-serif;
  font-size: var(--mark-size, clamp(7px, 0.56vw, 10px));
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.crate-mark.stamp::before {
  position: absolute;
  inset: 3px;
  border: 1px dashed rgb(93 32 27 / 0.36);
  content: "";
}

.crate-mark.stamp::after {
  position: absolute;
  inset: -2px 6px auto auto;
  width: 14px;
  height: 7px;
  background: rgb(255 255 255 / 0.26);
  content: "";
  transform: rotate(9deg);
}

.border-light-sweep,
.trace-pulses,
.trace-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.dones-view .border-light-sweep,
.dones-view .trace-pulses,
.dones-view .trace-map {
  opacity: 0.08;
}

.border-light-sweep {
  z-index: 1;
  background:
    linear-gradient(
      105deg,
      transparent 0 24%,
      rgb(255 255 255 / 0%) 35%,
      rgb(120 236 255 / 18%) 43%,
      rgb(255 255 255 / 24%) 49%,
      rgb(255 211 109 / 13%) 55%,
      rgb(255 255 255 / 0%) 64%,
      transparent 100%
    );
  filter: blur(22px);
  mix-blend-mode: screen;
  opacity: 0.58;
  transform: translate3d(-58%, -8%, 0) scale(1.35) rotate(0deg);
  animation: borderLightSweep 12s ease-in-out infinite;
}

.trace-pulses {
  z-index: 1;
  background:
    radial-gradient(circle at 7% 22%, rgb(0 229 255 / 42%) 0 1.1%, transparent 2.4%),
    radial-gradient(circle at 91% 20%, rgb(0 229 255 / 34%) 0 1.2%, transparent 2.6%),
    radial-gradient(circle at 9% 76%, rgb(255 209 102 / 28%) 0 1.1%, transparent 2.8%),
    radial-gradient(circle at 92% 72%, rgb(0 229 255 / 40%) 0 1%, transparent 2.3%),
    radial-gradient(circle at 50% 8%, rgb(255 255 255 / 28%) 0 0.55%, transparent 1.5%),
    radial-gradient(circle at 51% 92%, rgb(255 209 102 / 24%) 0 0.55%, transparent 1.5%);
  mix-blend-mode: screen;
  opacity: 0.35;
  animation: tracePulse 7.5s ease-in-out infinite;
}

.trace-map {
  z-index: 2;
  mix-blend-mode: screen;
  opacity: 0.9;
  -webkit-mask-image:
    linear-gradient(90deg, #000 0 16%, transparent 24% 76%, #000 84% 100%),
    linear-gradient(180deg, #000 0 17%, transparent 25% 75%, #000 83% 100%);
  -webkit-mask-composite: source-over;
  mask-image:
    linear-gradient(90deg, #000 0 16%, transparent 24% 76%, #000 84% 100%),
    linear-gradient(180deg, #000 0 17%, transparent 25% 75%, #000 83% 100%);
  mask-composite: add;
}

.trace-route {
  vector-effect: non-scaling-stroke;
  fill: none;
  stroke: transparent;
  stroke-width: 1;
}

.pulse-layer {
  mix-blend-mode: screen;
}

.led-pulse {
  fill: var(--pulse-color, #55e7ff);
  filter:
    drop-shadow(0 0 3px rgb(255 255 255 / 0.98))
    drop-shadow(0 0 10px var(--pulse-color, #55e7ff))
    drop-shadow(0 0 22px var(--pulse-color, #55e7ff));
}

.spark-splinter {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: miter;
  opacity: 0;
}

@keyframes tracePulse {
  0%,
  100% {
    opacity: 0.24;
    transform: scale(1);
  }

  45% {
    opacity: 0.5;
    transform: scale(1.006);
  }

  68% {
    opacity: 0.32;
  }
}

@keyframes borderLightSweep {
  0%,
  100% {
    opacity: 0.38;
    transform: translate3d(-58%, -8%, 0) scale(1.35) rotate(0deg);
  }

  24% {
    opacity: 0.62;
  }

  50% {
    opacity: 0.7;
    transform: translate3d(58%, 8%, 0) scale(1.35) rotate(0deg);
  }

  76% {
    opacity: 0.56;
  }
}

@media (prefers-reduced-motion: reduce) {
  .border-light-sweep,
  .trace-pulses,
  .led-pulse {
    animation: none;
  }
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

/* Preset: Faded Working Body Border - live dashboard container and masked cream body. */
.shell {
  position: relative !important;
  z-index: 2;
  width: min(1220px, calc(100vw - (var(--frame-x) * 2.15)));
  margin: var(--frame-y) auto;
  padding: 20px clamp(22px, 2.2vw, 44px);
  overflow: visible !important;
  background: transparent;
  border: 0;
  border-radius: 56px;
  box-shadow: none;
}

.shell::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 56px;
  background:
    linear-gradient(180deg, rgb(255 246 224 / 94%), rgb(236 218 184 / 94%));
  content: "";
  opacity: 0.96;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 100%) 5%, rgb(0 0 0 / 100%) 95%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 100%) 7%, rgb(0 0 0 / 100%) 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 100%) 5%, rgb(0 0 0 / 100%) 95%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 100%) 7%, rgb(0 0 0 / 100%) 93%, transparent 100%);
  mask-composite: intersect;
}

.shell::after {
  content: none;
}
/* End preset: Faded Working Body Border - live dashboard container and masked cream body. */

/* Preset: Faded Working Body Border - panels lifted above the faded body field. */
.page-header,
.controls-bar,
.table-wrap {
  position: relative;
  z-index: 1;
}
/* End preset: Faded Working Body Border - panels lifted above the faded body field. */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 8px 8px 18px;
  padding: 18px 18px 16px;
  background:
    linear-gradient(90deg, rgb(0 229 255 / 8%), transparent 30%),
    linear-gradient(180deg, rgb(242 226 194 / 86%), rgb(228 210 174 / 76%));
  border: 1px solid rgb(0 167 167 / 14%);
  border-radius: 8px;
  box-shadow:
    0 0 28px rgb(226 207 170 / 28%),
    inset 0 1px 0 rgb(255 250 236 / 58%);
}

.page-header > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.dones-view .page-header {
  background:
    linear-gradient(90deg, rgb(100 58 27 / 10%), transparent 34%),
    linear-gradient(180deg, rgb(250 235 202 / 97%), rgb(221 184 128 / 94%));
  border-color: rgb(113 69 32 / 34%);
  box-shadow:
    0 0 34px rgb(255 174 78 / 22%),
    inset 0 1px 0 rgb(255 244 211 / 62%);
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 30px;
  font-weight: 700;
}

.page-header p {
  margin-top: 8px;
  color: var(--muted);
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  justify-content: flex-end;
}

.master-button-bank {
  position: relative;
  flex: 0 0 auto;
  width: 560px;
  max-width: 100%;
  aspect-ratio: 1398 / 600;
  overflow: visible;
  border-radius: 18px;
  background: transparent;
  container-name: master-tray;
  container-type: inline-size;
  isolation: isolate;
}

.master-button-tray-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.master-button-grid {
  position: absolute;
  inset: 18px 48px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: repeat(2, max-content);
  align-content: space-between;
  align-items: center;
  justify-content: space-around;
  justify-items: center;
}

.master-button-bank:not(:has(.master-button-grid > button:not([hidden]))) {
  display: none;
}

/* Preset: Faded Working Body Border - sort/filter panel surface. */
.controls-bar {
  display: grid;
  grid-template-columns: minmax(160px, 1.35fr) repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 8px 12px;
  padding: 14px 16px;
  background:
    linear-gradient(90deg, rgb(0 229 255 / 7%), transparent 34%),
    linear-gradient(180deg, rgb(242 226 194 / 84%), rgb(228 210 174 / 78%));
  border: 1px solid rgb(0 167 167 / 14%);
  border-radius: 8px;
  box-shadow:
    0 0 24px rgb(226 207 170 / 24%),
    inset 0 1px 0 rgb(255 250 236 / 54%);
}

.search-control {
  min-width: 0;
}
/* End preset: Faded Working Body Border - sort/filter panel surface. */

.dones-view .controls-bar {
  background:
    linear-gradient(90deg, rgb(100 58 27 / 10%), transparent 34%),
    linear-gradient(180deg, rgb(250 235 202 / 95%), rgb(221 184 128 / 92%));
  border-color: rgb(113 69 32 / 30%);
  box-shadow:
    0 0 28px rgb(255 174 78 / 18%),
    inset 0 1px 0 rgb(255 244 211 / 58%);
}

.dones-view .table-wrap {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.dones-view .table-wrap::before {
  background:
    linear-gradient(90deg, rgb(221 184 128 / 0%) 0%, rgb(221 184 128 / 34%) 8%, rgb(235 213 176 / 94%) 14%, rgb(235 213 176 / 94%) 86%, rgb(221 184 128 / 34%) 92%, rgb(221 184 128 / 0%) 100%),
    linear-gradient(180deg, rgb(250 235 202 / 84%), rgb(221 184 128 / 84%));
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
  color: var(--text);
  background: #f3e6c8;
}

textarea {
  resize: vertical;
}

.primary-button {
  border: 0;
  border-radius: 6px;
  padding: 10px 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #008d8d, #0f766e 52%, #213d91);
  box-shadow: 0 8px 18px rgb(0 167 167 / 24%);
  font-weight: 700;
}

.secondary-button {
  border: 1px solid rgb(108 146 172 / 58%);
  border-radius: 6px;
  padding: 10px 14px;
  color: #172433;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 88%), rgb(224 246 255 / 74%) 48%, rgb(140 202 216 / 72%));
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 90%),
    0 5px 10px rgb(15 33 48 / 16%);
  font-weight: 700;
}

.secondary-button:hover {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 94%), rgb(213 250 255 / 80%) 48%, rgb(118 209 225 / 78%));
}

.header-actions .primary-button,
.header-actions .secondary-button {
  --master-top-height: 36px;
  --master-front-depth: 16px;
  --master-left-width: 13px;
  --master-top-bg:
    repeating-linear-gradient(94deg, rgb(255 255 255 / 16%) 0 1px, rgb(35 45 52 / 7%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(90deg, rgb(255 255 255 / 46%) 0%, rgb(255 255 255 / 14%) 22%, rgb(55 68 76 / 10%) 100%),
    linear-gradient(180deg, #fafafa 0%, #e5e9ea 26%, #cbd3d6 64%, #b1bcc2 100%);
  --master-top-hover-bg:
    repeating-linear-gradient(94deg, rgb(255 255 255 / 19%) 0 1px, rgb(35 45 52 / 6%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(90deg, rgb(255 255 255 / 54%) 0%, rgb(255 255 255 / 18%) 22%, rgb(55 68 76 / 8%) 100%),
    linear-gradient(180deg, #ffffff 0%, #edf1f1 26%, #d3dcdf 64%, #b8c4ca 100%);
  --master-top-active-bg:
    repeating-linear-gradient(94deg, rgb(255 255 255 / 9%) 0 1px, rgb(35 45 52 / 9%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(180deg, #cfd7da 0%, #aeb9c0 48%, #89969e 100%);
  --master-top-border: rgb(132 144 152 / 92%);
  --master-front-bg:
    repeating-linear-gradient(94deg, rgb(255 255 255 / 10%) 0 1px, rgb(18 28 35 / 10%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(180deg, #c1cad0 0%, #929fa7 42%, #62717b 100%);
  --master-front-border: rgb(92 105 115 / 96%);
  --master-left-bg:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 13%) 0 1px, rgb(18 28 35 / 9%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(180deg, #eef1f1 0%, #c5ced2 38%, #87969f 100%);
  --master-left-border: rgb(112 126 136 / 96%);
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: visible !important;
  min-height: calc(var(--master-top-height) + var(--master-front-depth));
  padding: 0 0 var(--master-front-depth);
  border-radius: 2px;
  border: 0;
  color: #101821;
  background: transparent;
  background-clip: padding-box;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 24%),
    0 3px 4px rgb(10 12 16 / 18%);
  text-shadow:
    0 1px 0 rgb(255 255 255 / 62%),
    0 -1px 0 rgb(78 88 96 / 20%);
  transform: translateY(0);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.header-actions .primary-button {
  --master-top-bg:
    repeating-linear-gradient(94deg, rgb(255 255 255 / 16%) 0 1px, rgb(35 45 52 / 7%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(90deg, rgb(255 255 255 / 46%) 0%, rgb(255 255 255 / 14%) 22%, rgb(55 68 76 / 10%) 100%),
    linear-gradient(180deg, #f8faf9 0%, #e2e9e9 26%, #c8d4d7 64%, #adbdc4 100%);
  --master-top-hover-bg:
    repeating-linear-gradient(94deg, rgb(255 255 255 / 19%) 0 1px, rgb(35 45 52 / 6%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(90deg, rgb(255 255 255 / 54%) 0%, rgb(255 255 255 / 18%) 22%, rgb(55 68 76 / 8%) 100%),
    linear-gradient(180deg, #ffffff 0%, #eaf1f1 26%, #cedcdf 64%, #b4c5cc 100%);
  --master-top-active-bg:
    repeating-linear-gradient(94deg, rgb(255 255 255 / 9%) 0 1px, rgb(35 45 52 / 9%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(180deg, #cbd8da 0%, #a9bac0 48%, #84969e 100%);
  --master-top-border: rgb(126 144 152 / 92%);
  --master-front-bg:
    repeating-linear-gradient(94deg, rgb(255 255 255 / 10%) 0 1px, rgb(18 28 35 / 10%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(180deg, #bdcbd0 0%, #899ca4 42%, #586e77 100%);
  --master-front-border: rgb(86 105 114 / 96%);
  --master-left-bg:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 13%) 0 1px, rgb(18 28 35 / 9%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(180deg, #eaf1f1 0%, #bdcdd2 38%, #80959e 100%);
  --master-left-border: rgb(104 126 136 / 96%);
  color: #101821;
}

.header-actions .secondary-button {
  color: #101821;
}

.header-actions .master-button-front,
.header-actions .master-button-left,
.header-actions .master-button-top {
  pointer-events: none;
}

.header-actions .master-button-front,
.header-actions .master-button-left {
  position: absolute;
}

.header-actions .master-button-front {
  right: 0;
  bottom: 0;
  left: var(--master-left-width);
  z-index: 1;
  height: var(--master-front-depth);
  overflow: hidden;
  border: 1px solid var(--master-front-border);
  border-top: 2px solid rgb(84 98 108 / 94%);
  border-radius: 0 0 2px 2px;
  background: var(--master-front-bg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  box-shadow:
    inset 0 1px 0 rgb(250 255 255 / 22%),
    inset 0 -3px 0 rgb(38 50 58 / 28%);
  transform: translate(0, 0);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    bottom 180ms ease,
    box-shadow 180ms ease,
    height 180ms ease,
    left 180ms ease,
    opacity 180ms ease,
    right 180ms ease,
    transform 180ms ease;
}

.header-actions .master-button-left {
  top: 3px;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: var(--master-left-width);
  overflow: hidden;
  border: 1px solid var(--master-left-border);
  border-right: 2px solid rgb(102 118 128 / 88%);
  border-radius: 2px 0 0 2px;
  background: var(--master-left-bg);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 6px);
  box-shadow:
    inset 1px 0 0 rgb(255 255 255 / 30%),
    inset -2px 0 0 rgb(53 67 77 / 22%);
  transform: translate(0, 0);
  transform-origin: bottom right;
  transition:
    background 180ms ease,
    bottom 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    top 180ms ease,
    transform 180ms ease;
}

.header-actions .master-button-top {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--master-top-height);
  margin-left: var(--master-left-width);
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid var(--master-top-border);
  border-bottom: 2px solid rgb(112 126 136 / 94%);
  border-radius: 2px;
  background: var(--master-top-bg);
  clip-path: polygon(1px 0, calc(100% - 1px) 0, 100% 1px, 100% 100%, 0 100%, 0 1px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 72%),
    inset 1px 0 0 rgb(255 255 255 / 22%),
    inset -1px 0 0 rgb(86 100 110 / 20%),
    inset 0 -3px 0 rgb(88 103 113 / 18%);
  transform: translate(0, -1px);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.header-actions .master-button-top::before {
  position: absolute;
  top: 4px;
  bottom: 3px;
  left: 0;
  z-index: 1;
  width: 2px;
  background: rgb(89 105 116 / 70%);
  box-shadow: 1px 0 0 rgb(255 255 255 / 24%);
  content: "";
  pointer-events: none;
}

.header-actions .master-button-top::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(
      96deg,
      transparent 0 38%,
      rgb(255 255 255 / 0%) 44%,
      rgb(255 255 255 / 34%) 50%,
      rgb(255 255 255 / 10%) 58%,
      transparent 68%
    );
  background-position: -160% 0;
  background-size: 260% 100%;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: skewX(-6deg);
}

.header-actions .master-button-label {
  position: relative;
  z-index: 2;
  line-height: 1;
  transform: translate(0, 0);
  transition:
    color 180ms ease,
    text-shadow 180ms ease,
    transform 180ms ease;
}

.header-actions .primary-button:hover,
.header-actions .secondary-button:hover {
  z-index: 1;
  background: transparent;
  box-shadow:
    0 1px 0 rgb(255 250 224 / 10%),
    0 2px 3px rgb(10 12 16 / 10%);
  transform: translateY(-2px);
}

.header-actions .primary-button:hover .master-button-front,
.header-actions .secondary-button:hover .master-button-front {
  box-shadow:
    inset 0 1px 0 rgb(250 255 255 / 28%),
    inset 0 -3px 0 rgb(33 44 52 / 30%);
  transform: translate(0, 1px);
}

.header-actions .primary-button:hover .master-button-left,
.header-actions .secondary-button:hover .master-button-left {
  transform: translate(0, 1px);
}

.header-actions .primary-button:hover .master-button-top,
.header-actions .secondary-button:hover .master-button-top {
  border-color: rgb(238 244 245 / 62%);
  background: var(--master-top-hover-bg);
  transform: translate(1px, -3px);
}

.header-actions .primary-button:hover .master-button-top::after,
.header-actions .secondary-button:hover .master-button-top::after {
  animation: none;
  opacity: 0;
}

.header-actions .primary-button:active,
.header-actions .secondary-button:active {
  z-index: 1;
  box-shadow:
    inset 0 -1px 0 rgb(0 16 24 / 28%),
    0 1px 1px rgb(10 12 16 / 9%);
  transform: translateY(7px);
}

.header-actions .primary-button:active .master-button-front,
.header-actions .secondary-button:active .master-button-front {
  left: calc(var(--master-left-width) + 3px);
  right: 0;
  height: 1px;
  opacity: 0.62;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    inset 0 -1px 2px rgb(51 64 74 / 24%);
  transform: translate(0, 0);
}

.header-actions .primary-button:active .master-button-left,
.header-actions .secondary-button:active .master-button-left {
  opacity: 0.5;
  transform: translate(5px, 10px) scaleY(0.14);
}

.header-actions .primary-button:active .master-button-top,
.header-actions .secondary-button:active .master-button-top {
  background: var(--master-top-active-bg);
  box-shadow:
    inset 0 2px 5px rgb(56 70 80 / 28%),
    inset 1px 0 0 rgb(255 255 255 / 20%),
    inset -1px 0 0 rgb(54 68 78 / 18%),
    inset 0 -1px 0 rgb(255 255 255 / 18%),
    inset 0 6px 12px rgb(59 72 82 / 20%);
  filter: brightness(0.9);
  transform: translate(1px, 13px);
}

.header-actions .primary-button:active .master-button-label,
.header-actions .secondary-button:active .master-button-label {
  transform: translate(0, 0);
}

/* Asset-backed master buttons: realistic brushed block skin replaces CSS bevel faces. */
.header-actions .primary-button,
.header-actions .secondary-button {
  --master-asset-height: 78px;
  --master-recess-lip-height: 8px;
  --master-recess-plane-y: 70px;
  --master-press-plane-y: 62px;
  --master-press-lip-height: 4px;
  min-height: var(--master-asset-height);
  padding: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  outline: 0;
  box-shadow: 0 1px 1px rgb(38 30 17 / 8%);
  text-shadow:
    0 1px 0 rgb(255 255 255 / 58%),
    0 -1px 0 rgb(45 54 60 / 18%);
}

.header-actions .primary-button::before,
.header-actions .secondary-button::before {
  position: absolute;
  right: 8px;
  top: calc(var(--master-press-plane-y) + 2px);
  left: 8px;
  z-index: 3;
  height: 4px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgb(37 25 10 / 22%) 0%, rgb(37 25 10 / 11%) 46%, transparent 78%),
    linear-gradient(180deg, transparent 0%, rgb(37 25 10 / 20%) 50%, transparent 100%);
  box-shadow:
    inset 0 1px 1px rgb(40 29 13 / 20%),
    0 1px 2px rgb(255 248 224 / 12%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.header-actions .primary-button::after,
.header-actions .secondary-button::after {
  position: absolute;
  right: 12px;
  top: var(--master-press-plane-y);
  bottom: auto;
  left: 12px;
  z-index: 4;
  height: var(--master-press-lip-height);
  background:
    linear-gradient(180deg, rgb(239 225 194 / 0%) 0%, rgb(231 213 178 / 24%) 62%, rgb(221 199 160 / 36%) 100%),
    linear-gradient(90deg, rgb(255 251 235 / 0%), rgb(234 218 188 / 24%) 14%, rgb(236 220 190 / 28%) 84%, rgb(177 148 93 / 0%));
  border-top: 0;
  border-radius: 999px 999px 0 0;
  box-shadow:
    inset 0 1px 2px rgb(255 252 238 / 12%),
    0 -1px 3px rgb(66 48 22 / 10%);
  content: "";
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transition:
    top 180ms ease,
    height 180ms ease,
    box-shadow 180ms ease,
    opacity 140ms ease;
}

.header-actions .master-button-front,
.header-actions .master-button-left {
  display: none;
}

.header-actions .master-button-top {
  width: var(--master-button-width, 112px);
  min-height: var(--master-asset-height);
  margin-left: 0;
  padding: 0 12px 18px;
  border: 0;
  border-radius: 0;
  background: var(--master-button-skin);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: none;
  clip-path: none;
  filter: none;
  transform: translate(0, 0);
}

.header-actions .master-button-top::before {
  content: none;
}

.header-actions .master-button-top::after {
  inset: 0;
  border-radius: 0;
  background:
    linear-gradient(
      96deg,
      transparent 0 44%,
      rgb(255 255 255 / 0%) 48%,
      rgb(255 255 255 / 34%) 51%,
      rgb(255 255 255 / 12%) 54%,
      transparent 59%
    );
  background-position: -155% 0;
  background-size: 240% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  transform: none;
}

.header-actions .master-button-label {
  opacity: 0;
  transform: translateY(-5px);
}

#refreshDashboardButton {
  --master-button-width: 148px;
  --master-asset-height: 64px;
  --master-recess-plane-y: 78px;
  --master-recess-lip-height: 8px;
  --master-press-plane-y: 66px;
  --master-press-lip-height: 5px;
  width: var(--master-button-width);
  min-height: var(--master-asset-height);
  position: relative !important;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate !important;
}

#refreshDashboardButton:hover,
#refreshDashboardButton:active,
#refreshDashboardButton.is-refresh-pressing,
#refreshDashboardButton:focus-visible {
  box-shadow: none;
}

#importTaskButton {
  --master-button-width: 165px;
  --master-asset-height: 98px;
  --master-shadow-width: 130px;
  --master-shadow-height: 78px;
  --master-shadow-x: -5px;
  --master-shadow-y: 6px;
  --master-glare-ratio: 1624 / 969;
  --master-glare-mask: url("assets/master-buttons/import-task-button-metal-glow.png?v=20260716-metal-glow");
}

#importTaskFileButton {
  --master-button-width: 165px;
  --master-asset-height: 97px;
  --master-shadow-width: 138px;
  --master-shadow-height: 78px;
  --master-shadow-x: -9px;
  --master-shadow-y: 6px;
  --master-glare-ratio: 1636 / 961;
  --master-glare-mask: url("assets/master-buttons/import-file-button-metal-glow.png?v=20260716-metal-glow");
}

#addTaskButton {
  --master-button-width: 139px;
  --master-asset-height: 85px;
  --master-shadow-width: 130px;
  --master-shadow-height: 78px;
  --master-shadow-x: -5px;
  --master-shadow-y: 6px;
  --master-glare-ratio: 1606 / 979;
  --master-glare-mask: url("assets/master-buttons/add-task-button-metal-glow.png?v=20260716-metal-glow");
}

.header-actions .asset-master-button {
  width: var(--master-button-width);
  min-height: var(--master-asset-height);
  position: relative !important;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate !important;
}

.header-actions .asset-master-button::before,
.header-actions .asset-master-button::after,
.header-actions .asset-master-button:active::before,
.header-actions .asset-master-button:active::after,
.header-actions .asset-master-button.is-master-pressing::before,
.header-actions .asset-master-button.is-master-pressing::after {
  content: none;
  display: none;
}

.header-actions .asset-master-cast-shadow {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 1 !important;
  width: var(--master-shadow-width) !important;
  height: var(--master-shadow-height) !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      180deg,
      rgb(27 29 31 / 42%) 0%,
      rgb(27 29 31 / 34%) 54%,
      rgb(27 29 31 / 46%) 100%
    ) left top / 7px 100% no-repeat,
    linear-gradient(
      90deg,
      rgb(27 29 31 / 46%) 0%,
      rgb(27 29 31 / 38%) 24%,
      rgb(27 29 31 / 30%) 100%
    ) left bottom / 100% 7px no-repeat !important;
  box-shadow: none !important;
  filter: blur(1.5px) !important;
  mix-blend-mode: normal !important;
  opacity: 0.72 !important;
  pointer-events: none !important;
  transform: translate(calc(-50% + var(--master-shadow-x)), calc(-50% + var(--master-shadow-y))) scale(1, 1) !important;
  transform-origin: center bottom !important;
  transition:
    transform 920ms cubic-bezier(0.18, 0.02, 0.16, 1),
    filter 920ms linear,
    opacity 920ms linear !important;
}

.header-actions .asset-master-art {
  position: relative !important;
  z-index: 2 !important;
  display: block;
  width: auto;
  height: var(--master-asset-height);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: none;
  transform: none;
  transition: filter 920ms ease;
}

.header-actions .asset-master-hover-glare {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: auto;
  height: var(--master-asset-height);
  aspect-ratio: var(--master-glare-ratio);
  overflow: hidden;
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate(-50%, -50%);
  -webkit-mask: var(--master-glare-mask) center / 100% 100% no-repeat;
  mask: var(--master-glare-mask) center / 100% 100% no-repeat;
}

.header-actions .asset-master-hover-glare::before {
  position: absolute;
  top: -20%;
  left: 0;
  width: 82%;
  height: 140%;
  background:
    linear-gradient(
      102deg,
      transparent 0%,
      rgb(238 246 249 / 2%) 10%,
      rgb(242 248 250 / 7%) 22%,
      rgb(247 251 253 / 12%) 32%,
      rgb(252 254 255 / 16%) 40%,
      rgb(255 255 255 / 18%) 50%,
      rgb(252 254 255 / 16%) 60%,
      rgb(247 251 253 / 12%) 68%,
      rgb(242 248 250 / 7%) 78%,
      rgb(238 246 249 / 2%) 90%,
      transparent 100%
    );
  content: "";
  opacity: 1;
  pointer-events: none;
  transform: translate3d(-92%, 0, 0);
  will-change: transform;
}

.header-actions .asset-master-button:hover,
.header-actions .asset-master-button:active,
.header-actions .asset-master-button.is-master-pressing,
.header-actions .asset-master-button:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  transform: translateY(0);
}

.header-actions .asset-master-button:hover .asset-master-art {
  filter: brightness(1.025) contrast(1.02);
}

.header-actions .asset-master-button:hover .asset-master-hover-glare::before,
.header-actions .asset-master-button:focus-visible .asset-master-hover-glare::before {
  animation: refreshSingleSheen 2300ms linear infinite;
}

.header-actions .asset-master-button:active .asset-master-art,
.header-actions .asset-master-button.is-master-pressing .asset-master-art {
  filter: brightness(0.92) contrast(1.08) saturate(0.98);
  transform: none;
  transition: filter 920ms ease;
}

.header-actions .asset-master-button:active .asset-master-cast-shadow,
.header-actions .asset-master-button.is-master-pressing .asset-master-cast-shadow {
  filter: blur(0.55px) !important;
  opacity: 0.3 !important;
  transform: translate(calc(-50% - 1px), calc(-50% + 1.5px)) scale(0.995, 0.97) !important;
  transition:
    transform 920ms cubic-bezier(0.18, 0.02, 0.16, 1),
    filter 920ms linear,
    opacity 920ms linear;
}

.header-actions .asset-master-button:focus-visible {
  filter: drop-shadow(0 0 0.3rem rgb(255 252 238 / 72%)) drop-shadow(0 0 0.5rem rgb(42 157 171 / 38%));
}

.header-actions .primary-button:hover,
.header-actions .secondary-button:hover {
  box-shadow: 0 2px 4px rgb(38 30 17 / 11%);
  transform: translateY(0);
}

.header-actions .primary-button:hover .master-button-top,
.header-actions .secondary-button:hover .master-button-top {
  border: 0;
  background: var(--master-button-skin);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(0, -1px);
}

.header-actions .primary-button:hover .master-button-top::after,
.header-actions .secondary-button:hover .master-button-top::after {
  animation: masterButtonShimmer 3600ms ease-in-out infinite;
}

.header-actions .primary-button:active,
.header-actions .secondary-button:active {
  box-shadow: 0 1px 1px rgb(38 30 17 / 6%);
  transform: translateY(0);
}

.header-actions .primary-button:active::after,
.header-actions .secondary-button:active::after,
#refreshDashboardButton.is-refresh-pressing::after {
  top: var(--master-press-plane-y);
  height: var(--master-press-lip-height);
  opacity: 0.5;
  box-shadow:
    inset 0 1px 2px rgb(255 252 238 / 12%),
    0 -1px 3px rgb(66 48 22 / 10%);
}

#refreshDashboardButton.is-refresh-pressing::after {
  opacity: 0;
  box-shadow: none;
}

.header-actions .primary-button:active::before,
.header-actions .secondary-button:active::before {
  opacity: 0;
  box-shadow: none;
}

#refreshDashboardButton::after,
#refreshDashboardButton::before,
#refreshDashboardButton:active::before,
#refreshDashboardButton:active::after,
#refreshDashboardButton.is-refresh-pressing::before,
#refreshDashboardButton.is-refresh-pressing::after {
  content: none;
  background: none;
  box-shadow: none;
  display: none;
  opacity: 0;
}

.header-actions .primary-button:active .master-button-top,
.header-actions .secondary-button:active .master-button-top {
  background: var(--master-button-skin);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: none;
  filter: none;
  transform: translate(0, 14px);
}

#refreshDashboardButton .refresh-cast-shadow {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 1 !important;
  width: 130px !important;
  height: 78px !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      180deg,
      rgb(27 29 31 / 42%) 0%,
      rgb(27 29 31 / 34%) 54%,
      rgb(27 29 31 / 46%) 100%
    ) left top / 7px 100% no-repeat,
    linear-gradient(
      90deg,
      rgb(27 29 31 / 46%) 0%,
      rgb(27 29 31 / 38%) 24%,
      rgb(27 29 31 / 30%) 100%
    ) left bottom / 100% 7px no-repeat !important;
  box-shadow: none !important;
  filter: blur(1.5px) !important;
  mix-blend-mode: normal !important;
  opacity: 0.72 !important;
  pointer-events: none !important;
  transform: translate(calc(-50% - 5px), calc(-50% + 6px)) scale(1, 1) !important;
  transform-origin: center bottom !important;
  transition:
    transform 920ms cubic-bezier(0.18, 0.02, 0.16, 1),
    filter 920ms linear,
    opacity 920ms linear !important;
}

#refreshDashboardButton .refresh-button-art {
  position: relative !important;
  z-index: 2 !important;
  display: block;
  width: auto;
  height: 78px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: none;
  transform: none;
  transition: filter 920ms ease;
}

#refreshDashboardButton .refresh-hover-glare {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: auto;
  height: 78px;
  aspect-ratio: 1183 / 709;
  overflow: hidden;
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate(-50%, -50%);
  -webkit-mask: url("assets/master-buttons/refresh-button-metal-glow-clean.png?v=20260714-refresh-clean") center / 100% 100% no-repeat;
  mask: url("assets/master-buttons/refresh-button-metal-glow-clean.png?v=20260714-refresh-clean") center / 100% 100% no-repeat;
}

#refreshDashboardButton .refresh-hover-glare::before {
  position: absolute;
  top: -20%;
  left: 0;
  width: 82%;
  height: 140%;
  background:
    linear-gradient(
      102deg,
      transparent 0%,
      rgb(238 246 249 / 2%) 10%,
      rgb(242 248 250 / 7%) 22%,
      rgb(247 251 253 / 12%) 32%,
      rgb(252 254 255 / 16%) 40%,
      rgb(255 255 255 / 18%) 50%,
      rgb(252 254 255 / 16%) 60%,
      rgb(247 251 253 / 12%) 68%,
      rgb(242 248 250 / 7%) 78%,
      rgb(238 246 249 / 2%) 90%,
      transparent 100%
    );
  content: "";
  opacity: 1;
  transform: translate3d(-92%, 0, 0);
  will-change: transform;
}

#refreshDashboardButton:hover .refresh-button-art {
  filter: brightness(1.025) contrast(1.02);
}

#refreshDashboardButton:hover .refresh-hover-glare::before,
#refreshDashboardButton:focus-visible .refresh-hover-glare::before {
  animation: refreshSingleSheen 2300ms linear infinite;
}

#refreshDashboardButton:active .refresh-button-art,
#refreshDashboardButton.is-refresh-pressing .refresh-button-art {
  filter: brightness(0.92) contrast(1.08) saturate(0.98);
  transform: none;
  transition: filter 920ms ease;
}

#refreshDashboardButton:active .refresh-cast-shadow,
#refreshDashboardButton.is-refresh-pressing .refresh-cast-shadow {
  filter: blur(0.55px) !important;
  opacity: 0.3 !important;
  transform: translate(calc(-50% - 1px), calc(-50% + 1.5px)) scale(0.995, 0.97) !important;
  transition:
    transform 920ms cubic-bezier(0.18, 0.02, 0.16, 1),
    filter 920ms linear,
    opacity 920ms linear;
}

#refreshDashboardButton:hover,
#refreshDashboardButton:active,
#refreshDashboardButton.is-refresh-pressing,
#refreshDashboardButton:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}


.header-actions .primary-button:active .master-button-label,
.header-actions .secondary-button:active .master-button-label {
  opacity: 0;
  transform: translateY(-5px);
}

.header-actions .primary-button:focus-visible,
.header-actions .secondary-button:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 28%),
    0 1px 2px rgb(38 30 17 / 10%);
}

.header-actions .asset-master-button:hover,
.header-actions .asset-master-button:active,
.header-actions .asset-master-button.is-master-pressing,
.header-actions .asset-master-button:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  transform: translateY(0);
}

.header-actions .asset-master-button:focus-visible {
  filter: drop-shadow(0 0 0.3rem rgb(255 252 238 / 72%)) drop-shadow(0 0 0.5rem rgb(42 157 171 / 38%));
}

@keyframes masterButtonShimmer {
  0% {
    background-position: -155% 0;
    opacity: 0;
  }

  7% {
    opacity: 0.74;
  }

  24% {
    background-position: 170% 0;
    opacity: 0.58;
  }

  32%,
  100% {
    background-position: 170% 0;
    opacity: 0;
  }
}

@keyframes refreshSingleSheen {
  0% {
    transform: translate3d(-92%, 0, 0);
  }

  68% {
    transform: translate3d(105%, 0, 0);
  }

  74% {
    transform: translate3d(111%, 0, 0);
  }

  100% {
    transform: translate3d(111%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-actions .primary-button,
  .header-actions .secondary-button {
    transition: none;
  }

  .header-actions .master-button-front,
  .header-actions .master-button-left,
  .header-actions .master-button-top,
  .header-actions .master-button-label {
    transition: none;
  }

  .header-actions .primary-button:hover .master-button-top::after,
  .header-actions .secondary-button:hover .master-button-top::after,
  .row-button:hover::before {
    animation: none;
    opacity: 0;
  }

}

.border-actions {
  position: fixed;
  top: clamp(28px, 4.2vh, 54px);
  right: clamp(28px, 4vw, 68px);
  z-index: 3;
  display: flex;
  gap: 10px;
  pointer-events: auto;
}

.archive-button {
  position: relative;
  isolation: isolate;
  min-height: 42px;
  overflow: hidden;
  border: 1px solid rgb(108 146 172 / 58%);
  border-radius: 999px;
  padding: 10px 14px;
  color: #172433;
  background:
    radial-gradient(ellipse at 24% 12%, rgb(255 255 255 / 80%) 0 12%, rgb(255 255 255 / 18%) 34%, transparent 56%),
    radial-gradient(ellipse at 82% 92%, rgb(21 59 83 / 28%) 0 18%, transparent 58%),
    linear-gradient(180deg, rgb(255 255 255 / 84%) 0%, rgb(224 246 255 / 70%) 38%, rgb(140 202 216 / 70%) 74%, rgb(78 132 151 / 76%) 100%);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 90%),
    inset 0 -7px 12px rgb(12 53 72 / 22%),
    inset 6px 0 12px rgb(255 255 255 / 26%),
    0 5px 10px rgb(15 33 48 / 20%),
    0 1px 0 rgb(255 255 255 / 62%);
  font-weight: 800;
  text-shadow: 0 1px 0 rgb(255 255 255 / 54%);
  transition:
    background 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.archive-button::before {
  position: absolute;
  inset: 4px 7px auto;
  z-index: -1;
  height: 46%;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 0 18%, rgb(255 255 255 / 58%) 28%, rgb(255 255 255 / 24%) 43%, transparent 58%),
    radial-gradient(ellipse at 35% 18%, rgb(255 255 255 / 64%) 0 16%, rgb(255 255 255 / 16%) 48%, transparent 72%);
  content: "";
  opacity: 0.72;
  pointer-events: none;
}

.archive-button::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 38%), transparent 42%, rgb(12 53 72 / 16%));
  content: "";
  pointer-events: none;
}

.archive-button:hover {
  background:
    radial-gradient(ellipse at 24% 12%, rgb(255 255 255 / 88%) 0 12%, rgb(255 255 255 / 22%) 34%, transparent 56%),
    radial-gradient(ellipse at 82% 92%, rgb(21 59 83 / 30%) 0 18%, transparent 58%),
    linear-gradient(180deg, rgb(255 255 255 / 90%) 0%, rgb(213 250 255 / 76%) 38%, rgb(118 209 225 / 76%) 74%, rgb(61 136 157 / 82%) 100%);
  transform: translateY(-1px);
}

body.dones-view #donesViewButton {
  display: none !important;
}

.border-actions > button[hidden],
body:not(.dones-view) #activeViewButton,
body.dones-view #donesViewButton {
  display: none !important;
}

.archive-memory-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--archive-control-width);
  min-width: 0;
  height: var(--archive-bubble-height);
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1;
  outline: 0;
  text-shadow: none;
}

.archive-memory-button::before,
.archive-memory-button::after {
  content: none;
}

.archive-memory-button:hover {
  background: transparent;
  box-shadow: none;
}

.archive-memory-image {
  position: relative;
  z-index: 3;
  display: block;
  width: var(--archive-control-width);
  height: var(--archive-bubble-height);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transition:
    filter 140ms ease,
    transform 140ms ease;
}

.archive-memory-button:hover .archive-memory-image {
  filter: drop-shadow(0 4px 6px rgb(16 20 26 / 30%)) brightness(1.04);
}

.archive-memory-button:active .archive-memory-image {
  filter: drop-shadow(0 2px 3px rgb(16 20 26 / 24%)) brightness(0.98);
  transform: translateY(1px) scale(0.99);
}

.archive-memory-button:focus-visible .archive-memory-image {
  filter:
    drop-shadow(0 0 0 rgb(255 255 255 / 100%))
    drop-shadow(0 0 4px rgb(85 231 255 / 80%))
    drop-shadow(0 4px 6px rgb(16 20 26 / 26%));
}

.archive-nav-button:hover .archive-memory-image,
.archive-nav-button:active .archive-memory-image,
.archive-nav-button:focus-visible .archive-memory-image {
  filter: none;
  transform: none;
}

.archive-page-control {
  width: var(--archive-control-width);
  min-width: 0;
  height: var(--archive-page-control-height);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(92 58 28 / 48%);
  border-radius: 999px;
  padding: 8px var(--archive-page-control-padding-x);
  color: #3c230d;
  background:
    radial-gradient(ellipse at 22% 16%, rgb(255 248 218 / 86%) 0 13%, rgb(255 248 218 / 26%) 34%, transparent 56%),
    radial-gradient(ellipse at 82% 88%, rgb(74 42 19 / 28%) 0 20%, transparent 62%),
    linear-gradient(180deg, rgb(255 229 171 / 92%) 0%, rgb(227 177 99 / 86%) 50%, rgb(148 91 43 / 88%) 100%);
  box-shadow:
    inset 0 1px 1px rgb(255 250 224 / 80%),
    inset 0 -5px 9px rgb(58 33 17 / 24%),
    inset 4px 0 9px rgb(255 245 211 / 18%),
    0 4px 8px rgb(35 21 12 / 24%),
    0 1px 0 rgb(255 244 211 / 42%);
  font-size: var(--archive-page-control-font-size);
  font-weight: 900;
  letter-spacing: 0;
  text-shadow:
    0 1px 0 rgb(255 244 204 / 44%),
    0 -1px 0 rgb(66 38 17 / 22%);
}

.archive-page-control::before {
  z-index: -1;
  background:
    linear-gradient(112deg, transparent 0 18%, rgb(255 255 255 / 48%) 28%, rgb(255 255 255 / 18%) 43%, transparent 58%),
    radial-gradient(ellipse at 35% 18%, rgb(255 252 232 / 58%) 0 15%, transparent 72%);
}

.archive-page-control::after {
  z-index: -2;
  background:
    radial-gradient(ellipse at 53% 50%, transparent 0 52%, rgb(255 246 214 / 22%) 64%, transparent 76%),
    linear-gradient(180deg, rgb(255 250 224 / 26%), transparent 42%, rgb(55 32 18 / 18%));
}

.archive-page-control:hover {
  background:
    radial-gradient(ellipse at 22% 16%, rgb(255 252 230 / 92%) 0 13%, rgb(255 252 230 / 30%) 34%, transparent 56%),
    radial-gradient(ellipse at 82% 88%, rgb(74 42 19 / 30%) 0 20%, transparent 62%),
    linear-gradient(180deg, rgb(255 238 190 / 96%) 0%, rgb(235 187 108 / 90%) 50%, rgb(158 98 48 / 90%) 100%);
  box-shadow:
    inset 0 1px 1px rgb(255 252 230 / 86%),
    inset 0 -5px 9px rgb(58 33 17 / 26%),
    inset 4px 0 9px rgb(255 245 211 / 20%),
    0 5px 9px rgb(35 21 12 / 28%),
    0 1px 0 rgb(255 244 211 / 46%);
}

.archive-page-control:active {
  box-shadow:
    inset 0 2px 5px rgb(58 33 17 / 32%),
    inset 0 -2px 5px rgb(255 244 211 / 18%),
    0 2px 5px rgb(35 21 12 / 22%);
  transform: translateY(1px);
}

.master-bubble-control.archive-page-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--archive-control-width);
  min-width: 0;
  height: var(--archive-bubble-height);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(115 166 188 / 56%);
  border-radius: 999px;
  padding: 0;
  color: #132838;
  background:
    radial-gradient(ellipse at 28% 16%, rgb(255 255 255 / 82%) 0 12%, rgb(255 255 255 / 26%) 32%, transparent 55%),
    radial-gradient(ellipse at 52% 48%, rgb(255 255 255 / 26%) 0 22%, transparent 52%),
    radial-gradient(ellipse at 82% 86%, rgb(25 64 86 / 28%) 0 18%, transparent 60%),
    linear-gradient(180deg, rgb(251 254 255 / 88%) 0%, rgb(219 247 255 / 74%) 35%, rgb(136 204 222 / 74%) 72%, rgb(69 132 154 / 82%) 100%);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 92%),
    inset 0 -8px 13px rgb(11 53 72 / 24%),
    inset 7px 0 13px rgb(255 255 255 / 24%),
    inset -6px 0 12px rgb(19 68 91 / 14%),
    0 5px 10px rgb(15 33 48 / 20%),
    0 1px 0 rgb(255 255 255 / 58%);
  font-size: calc(var(--archive-control-width) * 0.17);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-shadow:
    0 1px 0 rgb(255 255 255 / 58%),
    0 -1px 0 rgb(23 66 88 / 20%);
}

.master-bubble-control.archive-page-control::before {
  position: absolute;
  inset: 5px 8px auto;
  z-index: -1;
  height: 46%;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 0 18%, rgb(255 255 255 / 58%) 28%, rgb(255 255 255 / 22%) 43%, transparent 58%),
    radial-gradient(ellipse at 35% 18%, rgb(255 255 255 / 64%) 0 16%, rgb(255 255 255 / 16%) 48%, transparent 72%);
  content: "";
  opacity: 0.74;
  pointer-events: none;
}

.master-bubble-control.archive-page-control::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 0 48%, rgb(255 255 255 / 22%) 61%, transparent 76%),
    linear-gradient(180deg, rgb(255 255 255 / 36%), transparent 42%, rgb(12 53 72 / 16%));
  content: "";
  pointer-events: none;
}

.master-bubble-control.archive-page-control:hover {
  background:
    radial-gradient(ellipse at 28% 16%, rgb(255 255 255 / 90%) 0 12%, rgb(255 255 255 / 30%) 32%, transparent 55%),
    radial-gradient(ellipse at 52% 48%, rgb(255 255 255 / 30%) 0 22%, transparent 52%),
    radial-gradient(ellipse at 82% 86%, rgb(25 64 86 / 30%) 0 18%, transparent 60%),
    linear-gradient(180deg, rgb(255 255 255 / 92%) 0%, rgb(210 250 255 / 78%) 35%, rgb(118 211 230 / 78%) 72%, rgb(58 139 164 / 86%) 100%);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 94%),
    inset 0 -8px 13px rgb(11 53 72 / 26%),
    inset 7px 0 13px rgb(255 255 255 / 26%),
    inset -6px 0 12px rgb(19 68 91 / 16%),
    0 6px 11px rgb(15 33 48 / 23%),
    0 1px 0 rgb(255 255 255 / 62%);
  transform: translateY(-1px);
}

.master-bubble-control.archive-page-control:active {
  box-shadow:
    inset 0 2px 5px rgb(12 53 72 / 30%),
    inset 0 -3px 7px rgb(255 255 255 / 20%),
    0 2px 5px rgb(15 33 48 / 20%);
  transform: translateY(1px) scale(0.99);
}

.master-bubble-text {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: perspective(90px) rotateX(1deg);
  transform-origin: center;
  white-space: nowrap;
}

.master-bubble-text span {
  display: inline-block;
  transform-origin: center;
}

.master-bubble-text span:nth-child(1),
.master-bubble-text span:nth-child(6) {
  opacity: 0.84;
  transform: scale(0.82) translateY(0.5px);
}

.master-bubble-text span:nth-child(2),
.master-bubble-text span:nth-child(5) {
  opacity: 0.93;
  transform: scale(0.96);
}

.master-bubble-text span:nth-child(3),
.master-bubble-text span:nth-child(4) {
  transform: scale(1.16) translateY(-0.5px);
}

.active-return-button,
.export-bubble-button {
  width: var(--archive-control-width);
  height: var(--archive-bubble-height);
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  padding: 0;
  color: inherit;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
  text-shadow: none;
}

.active-return-button::before,
.active-return-button::after,
.export-bubble-button::before,
.export-bubble-button::after {
  content: none !important;
}

.active-return-image,
.export-bubble-image {
  position: relative;
  z-index: 3;
  display: block;
  width: var(--archive-control-width);
  height: var(--archive-bubble-height);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transition:
    filter 140ms ease,
    transform 140ms ease;
}

.active-return-button:hover,
.export-bubble-button:hover {
  background: transparent !important;
  box-shadow: none !important;
}

.active-return-button:hover .active-return-image,
.export-bubble-button:hover .export-bubble-image {
  filter: drop-shadow(0 4px 6px rgb(16 20 26 / 30%)) brightness(1.04);
  transform: translateY(-1px);
}

.active-return-button:active,
.export-bubble-button:active {
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
}

.active-return-button:active .active-return-image,
.export-bubble-button:active .export-bubble-image {
  filter: drop-shadow(0 2px 3px rgb(16 20 26 / 24%)) brightness(0.98);
  transform: translateY(1px) scale(0.99);
}

.active-return-button:focus-visible .active-return-image,
.export-bubble-button:focus-visible .export-bubble-image {
  filter:
    drop-shadow(0 0 0 rgb(255 255 255 / 100%))
    drop-shadow(0 0 4px rgb(85 231 255 / 80%))
    drop-shadow(0 4px 6px rgb(16 20 26 / 26%));
}

.active-return-button:hover .active-return-image,
.active-return-button:active .active-return-image,
.active-return-button:focus-visible .active-return-image,
.export-bubble-button:hover .export-bubble-image,
.export-bubble-button:active .export-bubble-image,
.export-bubble-button:focus-visible .export-bubble-image {
  filter: none;
  transform: none;
}

.primary-button:hover {
  background: linear-gradient(135deg, var(--accent-dark), #174ea6);
}

/* Preset: Faded Working Body Border - transparent table wrapper with faded cream backing. */
.table-wrap {
  margin: 0 clamp(18px, 2.2vw, 34px) 8px;
  isolation: isolate;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.table-wrap::before {
  position: absolute;
  inset: -10px -8px -18px;
  z-index: 0;
  background:
    linear-gradient(90deg, rgb(229 211 176 / 0%) 0%, rgb(239 225 197 / 82%) 3%, rgb(239 225 197 / 94%) 5%, rgb(239 225 197 / 94%) 95%, rgb(239 225 197 / 82%) 97%, rgb(229 211 176 / 0%) 100%),
    linear-gradient(180deg, rgb(239 225 197 / 82%), rgb(229 211 176 / 84%));
  content: "";
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 100%) 3%, rgb(0 0 0 / 100%) 97%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 100%) 5%, rgb(0 0 0 / 100%) 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 100%) 3%, rgb(0 0 0 / 100%) 97%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 100%) 5%, rgb(0 0 0 / 100%) 95%, transparent 100%);
  mask-composite: intersect;
}
/* End preset: Faded Working Body Border - transparent table wrapper with faded cream backing. */

table {
  position: relative;
  z-index: 1;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

thead,
tbody,
tr {
  display: grid;
  width: 100%;
}

tr {
  grid-template-columns:
    minmax(54px, 0.34fr)
    minmax(76px, 0.58fr)
    minmax(268px, 2.52fr)
    minmax(104px, 0.78fr)
    minmax(112px, 0.74fr)
    minmax(112px, 0.74fr)
    minmax(194px, 1.28fr);
  grid-template-rows: auto auto;
  align-items: stretch;
}

tbody tr {
  min-height: 100px;
  border-bottom: 1px solid var(--line);
}

th,
td {
  min-width: 0;
  padding: 9px;
  text-align: left;
  overflow-wrap: anywhere;
}

tbody td {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

th {
  color: #415164;
  background:
    linear-gradient(90deg, rgb(0 229 255 / 14%), transparent 28%),
    #e8eef8;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

tbody tr.complete-row {
  background: rgb(190 220 248 / 58%);
}

.dones-view tbody tr.complete-row {
  background: rgb(220 181 117 / 38%);
}

tbody tr.complete-row .task-name {
  text-decoration: line-through;
  color: var(--muted);
}

.done-cell,
.priority-cell,
.status-cell,
.date-cell,
.actions-cell {
  white-space: nowrap;
}

.done-heading,
.done-cell {
  grid-column: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.done-cell,
.priority-cell {
  grid-row: 2;
}

.priority-heading,
.priority-cell {
  grid-column: 2;
}

.task-name {
  grid-column: 3 / -1;
  grid-row: 1;
}

.notes-heading,
.notes {
  grid-column: 3;
  grid-row: 2;
}

.status-heading,
.status-cell {
  grid-column: 4;
  grid-row: 2;
}

.due-heading,
.due-cell {
  grid-column: 5;
  grid-row: 2;
}

.added-heading,
.added-cell {
  grid-column: 6;
  grid-row: 2;
}

.actions-heading,
.actions-cell {
  grid-column: 7;
  grid-row: 2;
}

thead tr {
  grid-template-rows: auto;
  border-bottom: 1px solid var(--line);
}

thead th {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 32px;
  grid-row: 1;
}

thead .done-heading,
thead .priority-heading,
thead .notes-heading,
thead .status-heading,
thead .due-heading,
thead .added-heading,
thead .actions-heading {
  grid-row: 1;
}

.done-heading {
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

thead .done-heading,
thead .priority-heading,
thead .notes-heading,
thead .status-heading,
thead .due-heading,
thead .added-heading,
thead .actions-heading {
  background:
    linear-gradient(90deg, rgb(0 229 255 / 10%), transparent 32%),
    #e8eef8;
}

.done-check-hover-zone {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.done-check-hover-zone.has-completion-date {
  cursor: help;
}

.dones-view .done-check-hover-zone.has-completion-date input {
  pointer-events: none;
}

.done-cell input {
  width: 18px;
  height: 18px;
}

tbody td.done-cell {
  overflow: visible;
}

.completion-bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1000;
  width: 196px;
  height: 118px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-1px, -1px);
  transition:
    opacity 130ms ease,
    visibility 130ms ease;
  visibility: hidden;
}

.done-check-hover-zone:hover .completion-bubble,
.done-check-hover-zone:focus-within .completion-bubble {
  opacity: 1;
  animation: completion-waft 5.6s ease-in-out infinite;
  visibility: visible;
}

.completion-bubble-dot,
.completion-bubble-main {
  position: absolute;
  display: block;
  border: 2px solid rgb(60 39 21 / 78%);
  background:
    radial-gradient(ellipse at 32% 24%, rgb(255 248 220 / 58%) 0 13%, transparent 34%),
    #f4b260;
  box-shadow:
    0 4px 0 rgb(0 0 0 / 30%),
    0 11px 18px rgb(0 0 0 / 22%),
    inset 0 2px 4px rgb(255 255 255 / 42%),
    inset -5px -7px 11px rgb(132 67 18 / 18%);
  content: "";
}

.completion-bubble-dot {
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.25);
  transform-origin: 100% 100%;
}

.completion-bubble-dot-1 {
  top: -2px;
  left: -2px;
  width: 10px;
  height: 10px;
}

.completion-bubble-dot-2 {
  top: -14px;
  left: -14px;
  width: 15px;
  height: 15px;
}

.completion-bubble-dot-3 {
  top: -28px;
  left: -29px;
  width: 21px;
  height: 21px;
}

.completion-bubble-main {
  top: -82px;
  left: -146px;
  min-width: 134px;
  min-height: 62px;
  border-radius: 52% 48% 50% 50% / 47% 52% 48% 53%;
  padding: 12px 15px 11px;
  color: #fffaf0;
  font-family: "Chalkboard SE", "Comic Sans MS", "Bradley Hand", cursive;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-shadow:
    0 2px 0 rgb(0 0 0 / 86%),
    1px 1px 2px rgb(0 0 0 / 74%),
    -1px 1px 2px rgb(0 0 0 / 62%);
  opacity: 0;
  transform: scale(0.45) rotate(-3deg);
  transform-origin: 100% 100%;
}

.done-check-hover-zone:hover .completion-bubble-dot,
.done-check-hover-zone:focus-within .completion-bubble-dot {
  animation: completion-dot-pop 360ms ease forwards;
}

.done-check-hover-zone:hover .completion-bubble-dot-1,
.done-check-hover-zone:focus-within .completion-bubble-dot-1 {
  animation-delay: 20ms;
}

.done-check-hover-zone:hover .completion-bubble-dot-2,
.done-check-hover-zone:focus-within .completion-bubble-dot-2 {
  animation-delay: 95ms;
}

.done-check-hover-zone:hover .completion-bubble-dot-3,
.done-check-hover-zone:focus-within .completion-bubble-dot-3 {
  animation-delay: 170ms;
}

.done-check-hover-zone:hover .completion-bubble-main,
.done-check-hover-zone:focus-within .completion-bubble-main {
  animation: completion-main-pop 520ms cubic-bezier(0.18, 1.32, 0.34, 1) 245ms forwards;
}

.completion-bubble-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0;
}

.completion-bubble-date {
  display: block;
  min-width: 92px;
  font-size: 14px;
  white-space: nowrap;
}

@keyframes completion-dot-pop {
  0% {
    opacity: 0;
    transform: scale(0.25);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes completion-main-pop {
  0% {
    opacity: 0;
    transform: scale(0.45) rotate(-3deg);
  }

  68% {
    opacity: 1;
    transform: scale(1.08) rotate(-2deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(-2deg);
  }
}

@keyframes completion-waft {
  0%,
  100% {
    transform: translate(-1px, -1px) rotate(-0.7deg);
  }

  50% {
    transform: translate(-7px, -4px) rotate(0.8deg);
  }
}

.priority-pill {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 51% 49% 53% 47% / 48% 52% 46% 54%;
  padding: 3px 11px 4px;
  color: var(--priority-ink, #24303d);
  background: transparent;
  box-shadow:
    inset 0 0 1px 1px rgb(255 255 255 / 42%),
    inset 2px 2px 5px rgb(255 255 255 / 18%),
    inset -2px -2px 5px rgb(16 35 42 / 30%),
    0 1px 2px rgb(24 36 31 / 20%),
    0 4px 8px rgb(24 36 31 / 15%);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.priority-pill::before {
  position: absolute;
  top: 3px;
  left: 9px;
  z-index: 2;
  width: 56%;
  height: 28%;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 0 23%, rgb(255 255 255 / 68%) 34%, rgb(255 255 255 / 18%) 48%, transparent 68%),
    radial-gradient(ellipse at 15% 35%, rgb(255 255 255 / 76%) 0 15%, rgb(255 255 255 / 14%) 38%, transparent 72%);
  content: "";
  opacity: 0.78;
  pointer-events: none;
  transform: rotate(-5deg);
}

.priority-pill::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 52% 48%, transparent 0 55%, rgb(255 255 255 / 34%) 63%, transparent 72%),
    radial-gradient(ellipse at 72% 78%, transparent 0 42%, rgb(18 43 52 / 24%) 64%, transparent 76%),
    radial-gradient(ellipse at 20% 30%, rgb(255 255 255 / 18%) 0 8%, transparent 24%);
  content: "";
  backdrop-filter: saturate(1.18) contrast(1.04);
  pointer-events: none;
}

.priority-text {
  position: relative;
  z-index: 0;
  display: inline-block;
  transform: scaleX(1.1) scaleY(1.03);
  transform-origin: center;
  text-shadow:
    -1px 0 0 rgb(255 255 255 / 18%),
    1px 0 0 rgb(22 36 38 / 12%),
    0 1px 0 rgb(255 248 222 / 24%),
    0 2px 2px rgb(33 45 36 / 18%);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
}

.priority-Critical {
  --priority-ink: #6f1912;
}

.priority-High {
  --priority-ink: #79400e;
}

.priority-Medium {
  --priority-ink: #5b4b11;
}

.priority-Low {
  --priority-ink: #185b36;
}

.status-pill {
  color: #24303d;
  background: #e7ebf0;
}

tbody tr.complete-row .status-pill {
  background: #d8ebff;
}

.dones-view tbody tr.complete-row .status-pill {
  background: #efd9ad;
}

.task-name,
.notes {
  min-width: 0;
}

.task-name {
  max-width: none;
  align-items: center;
  min-height: 36px;
  border: 1px solid rgb(0 167 167 / 12%);
  border-radius: 8px;
  margin: 8px 9px 4px;
  padding: 8px 11px;
  background:
    linear-gradient(90deg, rgb(0 229 255 / 8%), transparent 58%),
    linear-gradient(180deg, rgb(255 250 236 / 56%), rgb(232 216 184 / 28%));
  font-weight: 700;
  line-height: 1.24;
  box-shadow: inset 0 1px 0 rgb(255 250 236 / 58%);
}

.task-title,
.notes-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.task-title {
  -webkit-line-clamp: 2;
}

.notes {
  max-width: none;
  overflow: hidden;
  color: #3e4855;
  line-height: 1.4;
  white-space: normal;
}

.notes-preview {
  -webkit-line-clamp: 3;
}

.muted {
  color: var(--muted);
}

.task-action-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 80px !important;
  min-width: 80px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: transparent !important;
  cursor: pointer !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
  transform-origin: center center;
  transition:
    transform 120ms ease,
    filter 120ms ease;
  will-change: transform, filter;
}

.task-action-image,
.task-action-button img {
  display: block !important;
  width: 80px !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  transition:
    transform 120ms ease,
    filter 120ms ease;
  will-change: transform, filter;
}

.task-action-button::before,
.task-action-button::after {
  display: none !important;
  content: none !important;
}

.task-action-button span,
.task-action-button .row-button-label {
  display: none !important;
}

.task-action-button:active {
  transform: none;
}

.task-action-button:hover .task-action-image,
.task-action-button:hover img {
  filter: brightness(1.08) contrast(1.06) saturate(1.03);
  transform: translateY(-1px);
}

.task-action-button:active .task-action-image,
.task-action-button:active img {
  filter: brightness(0.88) contrast(1.12) saturate(0.96);
  transform: translateY(2px) scale(0.972);
}

/* The Restore artwork carries a taller transparent perimeter than the sibling assets.
   Compensate its rendered canvas so the painted metal face shares their visual bounds. */
.task-action-restore .task-action-image {
  transform: scale(1.022044994, 1.128625533);
  transform-origin: center;
}

.task-action-restore:hover .task-action-image {
  transform: translateY(-1px) scale(1.022044994, 1.128625533);
}

.task-action-restore:active .task-action-image {
  transform: translateY(2px) scale(0.993419734, 1.097020018);
}

.task-action-button:focus-visible {
  outline: 2px solid rgba(255, 230, 170, 0.9) !important;
  outline-offset: 2px !important;
  border-radius: 999px !important;
}

.task-action-delete {
  width: 86px !important;
  min-width: 86px !important;
}

.task-action-delete img {
  width: 86px !important;
}

.row-button {
  --row-face: var(--pill-master-face);
  --row-face-hover: var(--pill-master-face-hover);
  --row-face-active: var(--pill-master-face-active);
  --row-edge: var(--pill-metal-edge);
  --row-underlight: var(--pill-letter-glow);
  --row-letter-core: var(--pill-letter-core);
  position: relative;
  isolation: isolate;
  min-width: 46px;
  min-height: 30px;
  overflow: hidden;
  border: 1px solid var(--row-edge);
  border-radius: 999px;
  padding: 6px 8px;
  color: var(--row-letter-core);
  background: var(--row-face);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 72%),
    inset 1px 0 0 rgb(255 255 255 / 22%),
    inset -1px 0 0 rgb(86 100 110 / 20%),
    inset 0 -3px 0 rgb(88 103 113 / 18%),
    0 3px 5px rgb(10 12 16 / 14%);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-shadow: none;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    filter 140ms ease,
    transform 140ms ease;
}

.row-button::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(
      96deg,
      transparent 0 44%,
      rgb(255 255 255 / 0%) 48%,
      rgb(255 255 255 / 28%) 51%,
      rgb(255 255 255 / 10%) 54%,
      transparent 59%
    );
  background-position: -155% 0;
  background-size: 240% 100%;
  content: "";
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: skewX(-6deg);
}

.row-button::after {
  position: absolute;
  inset: 3px 6px 4px;
  z-index: -2;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgb(7 15 21 / 20%), rgb(255 255 255 / 7%) 42%, rgb(225 247 255 / 22%) 100%);
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 28%),
    inset 0 -1px 1px rgb(255 255 255 / 24%);
  content: "";
  opacity: 0.5;
  pointer-events: none;
}

.row-button:hover {
  border-color: rgb(238 244 245 / 62%);
  background: var(--row-face-hover);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 76%),
    inset 1px 0 0 rgb(255 255 255 / 24%),
    inset -1px 0 0 rgb(86 100 110 / 18%),
    inset 0 -3px 0 rgb(88 103 113 / 16%),
    0 4px 7px rgb(10 12 16 / 16%);
  transform: translateY(-1px);
}

.row-button:hover::before {
  animation: masterButtonShimmer 3600ms ease-in-out infinite;
}

.row-button:active {
  background: var(--row-face-active);
  box-shadow:
    inset 0 2px 5px rgb(56 70 80 / 28%),
    inset 1px 0 0 rgb(255 255 255 / 18%),
    inset -1px 0 0 rgb(54 68 78 / 18%),
    inset 0 -1px 0 rgb(255 255 255 / 16%),
    0 1px 3px rgb(10 12 16 / 12%);
  filter: brightness(0.93) saturate(0.96);
  transform: translateY(1px);
}

.row-button-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: var(--row-letter-core);
  letter-spacing: 0;
  text-shadow:
    0 -1px 0 rgb(255 255 255 / 18%),
    0 1px 0 rgb(0 0 0 / 86%),
    0 1px 2px rgb(0 0 0 / 64%),
    0 0 1px rgb(255 255 255 / 62%),
    0 0 4px var(--row-underlight),
    0 0 8px rgb(185 229 255 / 26%);
}

.row-button-label::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  content: attr(data-label);
  text-shadow:
    0 0 2px rgb(255 255 255 / 72%),
    0 0 5px var(--row-underlight),
    0 0 10px rgb(185 229 255 / 22%);
}

.row-button-label::after {
  position: absolute;
  inset: 1px 0 -1px;
  z-index: -2;
  color: rgb(3 8 12 / 72%);
  content: attr(data-label);
  text-shadow:
    0 -1px 0 rgb(255 255 255 / 16%),
    0 1px 1px rgb(0 0 0 / 70%);
}

.danger-button {
  --row-edge: rgb(142 106 96 / 88%);
  --row-face:
    repeating-linear-gradient(94deg, rgb(255 255 255 / 14%) 0 1px, rgb(58 41 37 / 8%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(90deg, rgb(255 255 255 / 38%) 0%, rgb(255 255 255 / 10%) 22%, rgb(78 48 42 / 10%) 100%),
    linear-gradient(180deg, #f8f5f2 0%, #e5ddd9 26%, #cfc0ba 64%, #b9aaa4 100%);
  --row-face-hover:
    repeating-linear-gradient(94deg, rgb(255 255 255 / 17%) 0 1px, rgb(58 41 37 / 7%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(90deg, rgb(255 255 255 / 46%) 0%, rgb(255 255 255 / 14%) 22%, rgb(78 48 42 / 8%) 100%),
    linear-gradient(180deg, #fffdf9 0%, #ece4e0 26%, #d8c8c1 64%, #c2b0a9 100%);
  --row-face-active:
    repeating-linear-gradient(94deg, rgb(255 255 255 / 9%) 0 1px, rgb(58 41 37 / 10%) 1px 2px, rgb(255 255 255 / 0%) 2px 7px),
    linear-gradient(180deg, #d3c7c1 0%, #b6a49c 48%, #8b766e 100%);
  --row-letter-core: rgb(32 14 11 / 94%);
  --row-underlight: rgb(255 225 211 / 74%);
}

.danger-button:hover {
  border-color: rgb(211 178 168 / 70%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 72%),
    inset 1px 0 0 rgb(255 255 255 / 22%),
    inset -1px 0 0 rgb(86 55 48 / 18%),
    inset 0 -3px 0 rgb(94 63 56 / 16%),
    0 4px 7px rgb(10 12 16 / 15%);
}

.actions-cell {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  width: 210px;
  min-width: 210px;
  max-width: 210px;
  overflow: visible;
  vertical-align: middle;
}

.actions-cell .action-button-bank {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  padding: 5px 7px 6px;
  border: 1px solid rgb(90 69 42 / 18%);
  border-radius: 14px;
  background:
    radial-gradient(
      ellipse at 50% 20%,
      rgb(255 236 184 / 10%),
      transparent 58%
    ),
    linear-gradient(
      180deg,
      rgb(36 29 20 / 20%),
      rgb(18 15 12 / 26%)
    );
  box-shadow:
    inset 0 2px 4px rgb(0 0 0 / 24%),
    inset 0 -1px 2px rgb(255 238 180 / 8%),
    0 1px 1px rgb(255 255 255 / 8%);
}

.actions-cell .action-button-bank--archive {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.action-button-bank--archive .action-button-tray {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: block;
  width: calc(100% + 12px);
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, -50%);
}

.action-button-bank--archive .row-control-group {
  position: relative;
  z-index: 1;
}

.actions-cell .action-button-bank--active {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  inline-size: 184px;
  min-inline-size: 0;
  max-inline-size: 100%;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.action-button-bank--active .action-button-tray--active {
  position: absolute;
  top: calc(50% - 1px);
  left: 50%;
  z-index: 0;
  display: block;
  inline-size: calc(100% + 12px);
  min-inline-size: 0;
  max-inline-size: calc(100% + 12px);
  block-size: auto;
  min-block-size: 0;
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, -50%);
}

.action-button-bank--active .row-control-group {
  position: relative;
  z-index: 1;
}

.row-control-group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 0;
  min-width: 0;
}

.actions-cell .row-control-group:last-child {
  margin-bottom: 0;
}

.row-control-group-danger {
  justify-content: center;
}

.action-button-bank--active .task-action-delete {
  position: relative;
  top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .task-action-button,
  .task-action-image,
  .task-action-button img {
    transition: none !important;
  }

  .task-action-button:hover .task-action-image,
  .task-action-button:hover img,
  .task-action-button:active .task-action-image,
  .task-action-button:active img {
    transform: none !important;
  }
}

.empty-state {
  padding: 36px;
  color: var(--muted);
  text-align: center;
}

.details-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.details-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.details-list div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.details-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.details-list dd {
  margin: 0;
  white-space: pre-wrap;
}

dialog {
  width: min(560px, calc(100% - 40px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 20px 70px rgb(20 30 45 / 25%);
}

dialog::backdrop {
  background: rgb(13 20 30 / 45%);
}

#transferDialog {
  width: min(680px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  color: #172033;
  background: #fffaf0;
}

.transfer-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.transfer-panel .dialog-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.transfer-panel h2 {
  margin: 0;
}

.transfer-dialog-body {
  display: grid;
  gap: 12px;
}

.transfer-dialog-body p {
  margin: 0;
  line-height: 1.45;
}

.transfer-facts {
  display: grid;
  grid-template-columns: minmax(130px, 0.45fr) minmax(0, 1fr);
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.transfer-facts dt,
.transfer-facts dd {
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.transfer-facts dt {
  color: #3e536b;
  background: #f1eadc;
  font-weight: 800;
}

.transfer-facts dd {
  overflow-wrap: anywhere;
}

.transfer-facts > :nth-last-child(-n + 2) {
  border-bottom: 0;
}

.transfer-issues {
  display: grid;
  gap: 8px;
  max-height: 190px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.transfer-issues li {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid #d9b7a8;
  border-radius: 7px;
  background: #fff1eb;
}

.transfer-issues span {
  color: #5f4036;
}

.transfer-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.transfer-button {
  min-height: 40px;
  border: 1px solid #8fa1b2;
  border-radius: 7px;
  padding: 9px 14px;
  color: #172033;
  background: #edf2f6;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.transfer-button--primary {
  border-color: #126fa5;
  color: #fff;
  background: #126fa5;
}

.transfer-button--cancel {
  background: #fffaf0;
}

.transfer-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.transfer-message--error {
  border-left: 4px solid #a52f26;
  padding: 8px 10px;
  color: #7d2019;
  background: #fff1eb;
}

#taskDialog {
  --task-dialog-safe-top: var(--frame-y);
  --task-dialog-safe-height: calc(100dvh - (var(--frame-y) * 2));
  --task-dialog-top: var(--task-dialog-safe-top);
  --edit-crate-art: url("assets/edit-window/edit-crate-lid.png.png");
  width: min(1080px, calc(100vw - (var(--frame-x) * 2) - 24px));
  position: fixed;
  inset: auto;
  top: var(--task-dialog-top);
  left: 50%;
  height: auto;
  max-height: var(--task-dialog-safe-height);
  margin: 0;
  overflow: hidden;
  transform: translateX(-50%);
}

#taskDialog::before,
#taskDialog::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

#taskDialog::before {
  inset: 0;
  z-index: 1;
  border-radius: 10px;
  background: var(--edit-crate-art) center / cover no-repeat;
  box-shadow:
    inset 0 0 0 1px rgb(47 35 23 / 36%),
    0 20px 52px rgb(8 8 8 / 42%);
}

#taskDialog::after {
  inset: 0;
  z-index: 2;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgb(255 241 205 / 5%) 0 20%, transparent 34% 66%, rgb(21 14 9 / 8%) 100%),
    linear-gradient(180deg, rgb(255 239 197 / 5%), transparent 22% 78%, rgb(28 18 10 / 9%));
  opacity: 1;
}

#taskForm {
  display: grid;
  gap: 16px;
  padding: 22px;
}

#taskDialog #taskForm {
  position: relative;
  z-index: 3;
  grid-template-columns: minmax(310px, 420px) minmax(240px, 1fr);
  max-height: var(--task-dialog-safe-height);
  min-height: min(690px, var(--task-dialog-safe-height));
  overflow: visible;
  gap: 18px 24px;
  padding: clamp(136px, 18vh, 174px) clamp(72px, 8vw, 102px) clamp(22px, 3vw, 38px) clamp(210px, 19vw, 260px);
  color: #21170f;
  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}

#taskDialog #taskForm::before,
#taskDialog #taskForm::after {
  content: none;
}

#taskDialog #taskForm::before {
}

#taskDialog #taskForm::after {
}

#taskDialog .dialog-header,
#taskDialog label,
#taskDialog .dialog-actions {
  position: relative;
  z-index: 3;
}

#taskDialog .dialog-header {
  grid-column: 1 / -1;
  min-height: 24px;
  margin: 0 120px 0 72px;
  padding: 0;
  border-bottom: 0;
}

#taskDialog .dialog-header h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#taskDialog label {
  grid-column: 1;
  display: block;
  border: 0;
  border-radius: 7px;
  padding: 0;
  color: #2d2117;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  font-size: 12px;
  line-height: 1.1;
}

#taskDialog .field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#taskDialog input,
#taskDialog select,
#taskDialog textarea {
  width: 100%;
  min-height: 38px;
  border-color: rgb(62 42 27 / 44%);
  border-radius: 6px;
  color: #17120d;
  background:
    linear-gradient(180deg, rgb(255 250 235 / 78%), rgb(237 220 187 / 66%));
  box-shadow:
    inset 0 1px 2px rgb(46 31 20 / 18%),
    0 1px 0 rgb(255 255 255 / 28%);
  backdrop-filter: blur(0.8px);
}

#taskDialog textarea {
  line-height: 1.18;
}

#taskDialog .edit-field-priority {
  margin-top: 0;
}

#taskDialog .edit-field-name {
  margin-top: 22px;
}

#taskDialog .edit-field-notes {
  margin-top: 21px;
}

#taskDialog .edit-field-status {
  margin-top: 23px;
}

#taskDialog .edit-field-due {
  margin-top: 20px;
}

#taskDialog button.edit-modal-close-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute !important;
  top: 18px !important;
  right: 24px !important;
  z-index: 50 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  aspect-ratio: 1 / 1;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
}

#taskDialog button.edit-modal-close-button::before,
#taskDialog button.edit-modal-close-button::after {
  content: none !important;
  display: none !important;
}

#taskDialog .edit-modal-close-image {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
}

#taskDialog button.edit-modal-close-button:hover .edit-modal-close-image {
  filter: brightness(1.06) contrast(1.05);
  transform: translateY(-1px);
}

#taskDialog button.edit-modal-close-button:active .edit-modal-close-image {
  filter: brightness(0.92) contrast(1.08);
  transform: translateY(1px) scale(0.98);
}

#taskDialog button.edit-modal-close-button:focus-visible {
  outline: 2px solid rgb(131 14 16 / 82%) !important;
  outline-offset: 3px !important;
}

#notesInput {
  display: block;
  min-height: 0;
  overflow-y: hidden;
  resize: none;
}

.dialog-header,
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dialog-actions {
  justify-content: flex-end;
}

#taskDialog .dialog-actions {
  grid-column: 1 / -1;
  align-self: end;
  justify-content: center;
  gap: clamp(18px, 3vw, 34px);
  margin-top: 8px;
  padding-top: 0;
}

.icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: #fffaf0;
}

#cancelButton {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--text);
  background: #fffaf0;
}

.taskdash-art-button,
#taskDialog .edit-modal-button {
  position: relative;
  display: block;
  width: calc(62px * 318 / 88);
  height: 62px;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 318 / 88;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: transparent;
  background: center / contain no-repeat;
  box-shadow: none;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  text-shadow: none;
}

.taskdash-art-button--cancel,
#taskDialog .edit-cancel-button {
  background-image: url("assets/references/edit-button-cancel-exact-transparent.png");
}

.taskdash-art-button--save,
#taskDialog .edit-save-button {
  width: calc(62px * 374 / 88);
  aspect-ratio: 374 / 88;
  background-image: url("assets/references/edit-button-save-task-exact-transparent.png");
}

#taskDialog .taskdash-art-button--add {
  width: calc(62px * 1291 / 350);
  aspect-ratio: 1291 / 350;
  background-image: url("assets/add-task-button-final.png");
}

.add-task-visual-stage {
  display: none;
}

#taskDialog[data-mode="add"] {
  --task-dialog-scale: 1;
  width: 1080px;
  max-width: none;
  height: 810px;
  max-height: none;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateX(-50%) scale(var(--task-dialog-scale));
  transform-origin: top center;
}

#taskDialog[data-mode="add"]::backdrop {
  background: transparent;
}

#taskDialog[data-mode="add"]::before {
  content: none;
}

#taskDialog[data-mode="add"]::after {
  content: none;
}

#taskDialog[data-mode="add"] .add-task-visual-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: visible;
  isolation: isolate;
  pointer-events: none;
}

#taskDialog[data-mode="add"] .add-task-lid-art,
#taskDialog[data-mode="add"] .add-task-lid-top-leak,
#taskDialog[data-mode="add"] .add-task-lid-spill,
#taskDialog[data-mode="add"] .add-task-lid-ray,
#taskDialog[data-mode="add"] .add-task-lid-contact-shadow {
  position: absolute;
  display: block;
  pointer-events: none;
}

#taskDialog[data-mode="add"] .add-task-lid-top-leak {
  z-index: 1;
  mix-blend-mode: screen;
  transform-origin: 50% 100%;
}

#taskDialog[data-mode="add"] .add-task-lid-top-leak--left-corner {
  top: 4.6%;
  left: 4.7%;
  width: 12.5%;
  height: 8.6%;
  background:
    radial-gradient(ellipse at 63% 91%, rgb(225 252 255 / 82%) 0 2%, rgb(57 210 255 / 61%) 8%, rgb(0 138 255 / 33%) 23%, rgb(0 87 224 / 14%) 46%, transparent 68%);
  filter: blur(7px);
  opacity: 0.82;
  transform: rotate(-2deg);
}

#taskDialog[data-mode="add"] .add-task-lid-top-leak--left-hinges {
  top: 5.5%;
  left: 21.2%;
  width: 13.4%;
  height: 7.4%;
  background:
    radial-gradient(ellipse at 34% 93%, rgb(235 253 255 / 86%) 0 2%, rgb(73 218 255 / 66%) 8%, rgb(0 151 255 / 35%) 23%, transparent 61%),
    radial-gradient(ellipse at 78% 88%, rgb(164 240 255 / 67%) 0 2%, rgb(0 177 255 / 42%) 10%, rgb(0 101 237 / 17%) 33%, transparent 59%);
  filter: blur(5.5px);
  opacity: 0.84;
  transform: rotate(1.5deg);
}

#taskDialog[data-mode="add"] .add-task-lid-top-leak--center-hinge {
  top: 3.9%;
  left: 43.4%;
  width: 13.2%;
  height: 9.5%;
  background:
    radial-gradient(ellipse at 48% 92%, rgb(244 254 255 / 93%) 0 2%, rgb(92 226 255 / 76%) 8%, rgb(0 164 255 / 46%) 24%, rgb(0 96 242 / 20%) 46%, transparent 69%),
    radial-gradient(ellipse at 76% 91%, rgb(177 243 255 / 72%) 0 2%, rgb(0 181 255 / 46%) 10%, transparent 53%);
  filter: blur(6.5px);
  opacity: 0.92;
  transform: rotate(-1deg);
}

#taskDialog[data-mode="add"] .add-task-lid-top-leak--right-hinges {
  top: 5.7%;
  right: 20.6%;
  width: 12.8%;
  height: 7.1%;
  background:
    radial-gradient(ellipse at 67% 92%, rgb(225 252 255 / 81%) 0 2%, rgb(51 210 255 / 61%) 8%, rgb(0 146 255 / 33%) 23%, transparent 60%),
    radial-gradient(ellipse at 25% 87%, rgb(153 237 255 / 63%) 0 2%, rgb(0 170 255 / 38%) 10%, transparent 53%);
  filter: blur(5px);
  opacity: 0.8;
  transform: rotate(-1.5deg);
}

#taskDialog[data-mode="add"] .add-task-lid-top-leak--right-corner {
  top: 4.9%;
  right: 4.8%;
  width: 10.4%;
  height: 8.2%;
  background:
    radial-gradient(ellipse at 38% 91%, rgb(201 248 255 / 73%) 0 2%, rgb(31 199 255 / 53%) 8%, rgb(0 130 255 / 28%) 24%, rgb(0 80 222 / 12%) 44%, transparent 66%);
  filter: blur(7.5px);
  opacity: 0.7;
  transform: rotate(2.5deg);
}

#taskDialog[data-mode="add"] .add-task-lid-art {
  inset: 0;
  background: var(--edit-crate-art) center / contain no-repeat;
}

#taskDialog[data-mode="add"] .add-task-lid-art--body {
  z-index: 4;
  clip-path: polygon(
    6.1% 10.7%,
    93.9% 10.7%,
    94.6% 11.5%,
    94.6% 86.8%,
    93.9% 87.55%,
    6.1% 87.55%,
    5.55% 86.75%,
    5.55% 11.55%
  );
}

#taskDialog[data-mode="add"] .add-task-lid-art--latch {
  z-index: 5;
  clip-path: polygon(
    46.1% 83.2%,
    53.9% 83.2%,
    53.9% 87.55%,
    52.4% 87.55%,
    52.4% 89.35%,
    47.6% 89.35%,
    47.6% 87.55%,
    46.1% 87.55%
  );
}

#taskDialog[data-mode="add"] .add-task-lid-spill {
  z-index: 1;
  mix-blend-mode: screen;
  filter: blur(9px);
  opacity: 0.94;
}

#taskDialog[data-mode="add"] .add-task-lid-spill--lower-left {
  top: 84.1%;
  left: 6.2%;
  width: 28%;
  height: 13.5%;
  background:
    radial-gradient(ellipse at 25% 8%, rgb(226 251 255 / 94%) 0 2%, rgb(67 218 255 / 76%) 7%, rgb(0 146 255 / 45%) 21%, rgb(0 87 222 / 18%) 42%, transparent 64%),
    radial-gradient(ellipse at 78% 11%, rgb(174 241 255 / 80%) 0 2%, rgb(0 177 255 / 53%) 9%, rgb(0 104 255 / 23%) 29%, transparent 54%);
  transform: rotate(2deg);
}

#taskDialog[data-mode="add"] .add-task-lid-spill--lower-right {
  top: 83.8%;
  right: 5.8%;
  width: 26%;
  height: 14%;
  background:
    radial-gradient(ellipse at 26% 10%, rgb(211 249 255 / 91%) 0 2%, rgb(38 205 255 / 72%) 8%, rgb(0 137 255 / 42%) 24%, rgb(0 73 215 / 18%) 43%, transparent 63%),
    radial-gradient(ellipse at 79% 7%, rgb(184 242 255 / 85%) 0 2%, rgb(0 184 255 / 57%) 9%, rgb(0 101 255 / 25%) 28%, transparent 53%);
  transform: rotate(-2.5deg);
}

#taskDialog[data-mode="add"] .add-task-lid-spill--left {
  top: 34%;
  left: 2.2%;
  width: 8.5%;
  height: 22%;
  background:
    radial-gradient(ellipse at 79% 32%, rgb(204 248 255 / 88%) 0 2%, rgb(20 200 255 / 62%) 9%, rgb(0 121 255 / 29%) 28%, transparent 58%),
    radial-gradient(ellipse at 82% 82%, rgb(137 232 255 / 71%) 0 2%, rgb(0 159 255 / 44%) 11%, rgb(0 88 230 / 18%) 32%, transparent 57%);
  filter: blur(8px);
}

#taskDialog[data-mode="add"] .add-task-lid-spill--right {
  top: 49%;
  right: 1.9%;
  width: 8.5%;
  height: 22%;
  background:
    radial-gradient(ellipse at 21% 27%, rgb(211 249 255 / 91%) 0 2%, rgb(29 207 255 / 64%) 9%, rgb(0 126 255 / 30%) 28%, transparent 58%),
    radial-gradient(ellipse at 18% 80%, rgb(147 234 255 / 73%) 0 2%, rgb(0 164 255 / 46%) 11%, rgb(0 91 230 / 19%) 32%, transparent 57%);
  filter: blur(8px);
}

#taskDialog[data-mode="add"] .add-task-lid-spill--latch {
  top: 85.1%;
  left: 44%;
  width: 12%;
  height: 13.5%;
  background:
    radial-gradient(ellipse at 50% 7%, rgb(244 254 255 / 98%) 0 3%, rgb(87 225 255 / 88%) 9%, rgb(0 163 255 / 60%) 27%, rgb(0 95 255 / 28%) 50%, transparent 74%);
  filter: blur(7px);
  opacity: 1;
}

#taskDialog[data-mode="add"] .add-task-lid-ray {
  z-index: 2;
  height: 2.1%;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgb(214 251 255 / 88%), rgb(20 187 255 / 61%) 16%, rgb(0 112 255 / 24%) 58%, transparent 100%);
  filter: blur(2px);
}

#taskDialog[data-mode="add"] .add-task-lid-ray--lower-left {
  top: 88.2%;
  left: 11%;
  width: 11%;
  transform: rotate(6deg);
}

#taskDialog[data-mode="add"] .add-task-lid-ray--lower-right {
  top: 88.3%;
  right: 11%;
  width: 11%;
  background: linear-gradient(270deg, rgb(214 251 255 / 88%), rgb(20 187 255 / 61%) 16%, rgb(0 112 255 / 24%) 58%, transparent 100%);
  transform: rotate(-6deg);
  transform-origin: 100% 50%;
}

#taskDialog[data-mode="add"] .add-task-lid-ray--latch-left {
  top: 89.6%;
  left: 48.5%;
  width: 10%;
  transform: rotate(157deg);
}

#taskDialog[data-mode="add"] .add-task-lid-ray--latch-right {
  top: 89.5%;
  left: 51%;
  width: 10%;
  transform: rotate(23deg);
}

#taskDialog[data-mode="add"] .add-task-lid-contact-shadow {
  top: 85.5%;
  left: 5.5%;
  z-index: 3;
  width: 89%;
  height: 8.5%;
  background:
    radial-gradient(ellipse at 20% 5%, rgb(1 8 18 / 55%) 0 10%, rgb(1 8 18 / 25%) 32%, transparent 57%),
    radial-gradient(ellipse at 51% 6%, rgb(1 7 15 / 60%) 0 8%, rgb(1 7 15 / 25%) 27%, transparent 51%),
    radial-gradient(ellipse at 82% 5%, rgb(1 8 18 / 52%) 0 9%, rgb(1 8 18 / 23%) 31%, transparent 56%);
  filter: blur(6px);
}

#taskDialog[data-mode="add"] #taskForm {
  width: 1080px;
  max-width: none;
  height: 810px;
  min-height: 0;
  max-height: none;
  grid-template-columns: 410px;
  grid-template-rows: 40px 40px 135px 40px 40px;
  grid-template-areas:
    "priority"
    "name"
    "notes"
    "status"
    "due";
  align-content: start;
  align-items: center;
  gap: 40px 0;
  padding: 195px 0 0 270px;
  overflow: visible;
}

#taskDialog[data-mode="add"] .dialog-header {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: -270px;
  width: 1080px;
  height: 810px;
  min-height: 0;
  margin: 0;
  pointer-events: none;
}

#taskDialog[data-mode="add"] button.edit-modal-close-button {
  top: 158px !important;
  right: 146px !important;
  pointer-events: auto;
}

#taskDialog[data-mode="add"] .edit-field-priority {
  grid-area: priority;
}

#taskDialog[data-mode="add"] .edit-field-name {
  grid-area: name;
}

#taskDialog[data-mode="add"] .edit-field-notes {
  grid-area: notes;
  align-self: start;
}

#taskDialog[data-mode="add"] .edit-field-status {
  grid-area: status;
}

#taskDialog[data-mode="add"] .edit-field-due {
  grid-area: due;
}

#taskDialog[data-mode="add"] .edit-field-priority,
#taskDialog[data-mode="add"] .edit-field-name,
#taskDialog[data-mode="add"] .edit-field-notes,
#taskDialog[data-mode="add"] .edit-field-status,
#taskDialog[data-mode="add"] .edit-field-due {
  width: 410px;
  margin: 0;
}

#taskDialog[data-mode="add"] input,
#taskDialog[data-mode="add"] select {
  height: 40px;
  min-height: 40px;
}

#taskDialog[data-mode="add"] #notesInput {
  height: 108px;
  min-height: 108px;
  max-height: 108px;
  overflow-x: hidden;
  overflow-y: auto;
}

#taskDialog[data-mode="add"] .dialog-actions {
  position: absolute;
  right: 0;
  bottom: 14px;
  left: 0;
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  overflow: visible;
  isolation: isolate;
}

#taskDialog[data-mode="add"] .taskdash-art-button--add {
  grid-column: auto;
}

#taskDialog[data-mode="add"] .dialog-actions .taskdash-art-button {
  z-index: 0;
  isolation: isolate;
  background-image: none;
}

#taskDialog[data-mode="add"] .dialog-actions .taskdash-art-button::before,
#taskDialog[data-mode="add"] .dialog-actions .taskdash-art-button::after {
  position: absolute;
  display: block;
  pointer-events: none;
  content: "";
}

#taskDialog[data-mode="add"] .dialog-actions .taskdash-art-button::after {
  inset: 0;
  z-index: 2;
  background: center / contain no-repeat;
}

#taskDialog[data-mode="add"] .dialog-actions .taskdash-art-button--cancel::after {
  background-image: url("assets/references/edit-button-cancel-exact-transparent.png");
}

#taskDialog[data-mode="add"] .dialog-actions .taskdash-art-button--add::after {
  background-image: url("assets/add-task-button-final.png");
}

#taskDialog[data-mode="add"] .dialog-actions .taskdash-art-button::before {
  top: 34%;
  right: -3%;
  bottom: -42%;
  left: -3%;
  z-index: 1;
  background:
    radial-gradient(ellipse at 27% 34%, rgb(224 251 255 / 92%) 0 2%, rgb(38 204 255 / 70%) 8%, rgb(0 137 255 / 39%) 22%, transparent 45%),
    radial-gradient(ellipse at 73% 39%, rgb(166 239 255 / 82%) 0 2%, rgb(0 178 255 / 55%) 9%, rgb(0 99 255 / 27%) 26%, transparent 48%),
    radial-gradient(ellipse at 50% 28%, rgb(1 8 18 / 58%) 0 16%, rgb(1 8 18 / 26%) 32%, transparent 54%);
  filter: blur(4.5px);
  opacity: 0.92;
}

#taskDialog[data-mode="add"] .dialog-actions .taskdash-art-button--add::before {
  top: 28%;
  right: -4%;
  bottom: -48%;
  left: -4%;
  background:
    radial-gradient(ellipse at 22% 34%, rgb(239 253 255 / 98%) 0 2%, rgb(64 218 255 / 80%) 8%, rgb(0 151 255 / 48%) 23%, transparent 47%),
    radial-gradient(ellipse at 78% 36%, rgb(210 249 255 / 94%) 0 2%, rgb(19 198 255 / 72%) 9%, rgb(0 116 255 / 38%) 26%, transparent 50%),
    radial-gradient(ellipse at 50% 66%, rgb(0 146 255 / 42%) 0 7%, rgb(0 84 240 / 19%) 30%, transparent 54%),
    radial-gradient(ellipse at 50% 27%, rgb(1 8 18 / 62%) 0 16%, rgb(1 8 18 / 27%) 32%, transparent 54%);
  filter: blur(4.5px);
  opacity: 0.98;
}

.taskdash-art-button span,
#taskDialog .edit-modal-button span {
  color: transparent;
}

.taskdash-art-button:hover,
#taskDialog .edit-modal-button:hover {
  transform: none;
}

.taskdash-art-button:active,
#taskDialog .edit-modal-button:active {
  transform: translateY(1px);
}

/* Intermediate layout: tighten before the desktop grid reaches its hard minimum. */
@media (max-width: 1320px) {
  .shell {
    width: calc(100% - (var(--frame-x) * 2));
    padding: 16px clamp(14px, 2vw, 26px);
  }

  .page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .header-actions {
    justify-content: center;
  }

  .controls-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  tr {
    grid-template-columns:
      58px
      92px
      minmax(150px, 1fr)
      112px
      112px
      112px;
    grid-template-rows: auto auto auto;
  }

  .task-name {
    grid-column: 3 / -1;
    grid-row: 1;
  }

  .notes-heading,
  .notes {
    grid-column: 3;
  }

  tbody .notes {
    grid-row: 2 / 4;
  }

  .status-heading,
  .status-cell {
    grid-column: 4;
  }

  .due-heading,
  .due-cell {
    grid-column: 5;
  }

  .added-heading,
  .added-cell {
    grid-column: 6;
  }

  .actions-heading {
    display: none;
  }

  .actions-cell {
    grid-column: 4 / 7;
    grid-row: 3;
    align-items: center;
    width: auto;
    min-width: 0;
    max-width: none;
    padding-top: 0;
  }

  thead tr {
    grid-template-rows: auto;
  }
}

/* Compact dashboard: Rectangle's one-third viewport needs contained task cards. */
@media (max-width: 1180px) {
  :root {
    --frame-y: clamp(28px, 4vh, 54px);
    --task-row-height: 104px;
    --compact-beach-gutter: clamp(36px, 3.85vw, 46px);
  }

  .frame-art {
    --pcb-rail-width: clamp(220px, 25vw, 320px);
    overflow: hidden;
    background: linear-gradient(135deg, #07101e 0%, #0c1930 50%, #140e28 100%);
  }

  .pcb-zone {
    display: block;
    background-size: auto 100%;
  }

  .pcb-zone-center {
    background-position: center;
  }

  .pcb-zone-left,
  .pcb-zone-right {
    width: var(--pcb-rail-width);
  }

  .pcb-zone-left {
    right: auto;
    background-position: left center;
    -webkit-mask-image: linear-gradient(90deg, #000 0 72%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0 72%, transparent 100%);
  }

  .pcb-zone-right {
    left: auto;
    background-position: right center;
    -webkit-mask-image: linear-gradient(270deg, #000 0 72%, transparent 100%);
    mask-image: linear-gradient(270deg, #000 0 72%, transparent 100%);
  }

  body {
    min-height: 100dvh;
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
  }

  .border-actions {
    position: relative;
    top: auto;
    right: auto;
    z-index: 4;
    width: calc(100% - (var(--frame-x) * 2));
    margin: calc(env(safe-area-inset-top) + 12px) auto 8px;
    justify-content: flex-end;
  }

  .archive-button {
    min-height: 44px;
    padding: 10px 14px;
  }

  .archive-memory-button {
    width: var(--archive-control-width);
    min-width: 0;
    height: var(--archive-bubble-height);
    min-height: 0;
    padding: 0;
  }

  .archive-memory-image {
    width: var(--archive-control-width);
    height: var(--archive-bubble-height);
  }

  .archive-page-control {
    width: var(--archive-control-width);
    min-width: 0;
    height: var(--archive-page-control-height);
    min-height: 0;
    padding: 8px var(--archive-page-control-padding-x);
  }

  .shell {
    width: calc(100% - (var(--frame-x) * 2));
    margin: 0 auto calc(var(--frame-y) + env(safe-area-inset-bottom));
    padding: 12px;
    border-radius: 24px;
  }

  .shell::before {
    border-radius: 24px;
  }

  .page-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin: 4px var(--compact-beach-gutter) 12px;
    padding: 12px;
  }

  h1 {
    font-size: 24px;
  }

  .header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    justify-content: center;
    width: 100%;
    column-gap: clamp(28px, 5vw, 56px);
    row-gap: 10px;
  }

  .master-button-bank {
    width: 100%;
    max-width: 560px;
  }

  .header-actions .primary-button,
  .header-actions .secondary-button {
    grid-column: auto;
    justify-self: center;
  }

  .primary-button,
  .secondary-button {
    min-height: 44px;
    width: 100%;
  }

  .header-actions .primary-button,
  .header-actions .secondary-button {
    min-height: calc(40px + var(--master-depth));
  }

  .primary-button {
    grid-column: 1 / -1;
  }

  .controls-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 var(--compact-beach-gutter) 10px;
    padding: 10px;
  }

  .controls-bar > label {
    min-width: 0;
  }

  .search-control {
    grid-column: 1 / -1;
  }

  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }

  table {
    display: block;
  }

  .table-wrap {
    margin: 0 var(--compact-beach-gutter) 4px;
    padding: 0;
  }

  .table-wrap::before {
    inset: -8px calc(-1 * var(--compact-beach-gutter)) -14px;
  }

  thead {
    display: none;
  }

  tbody {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
  }

  tbody tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    padding: 12px;
    border: 1px solid rgb(0 167 167 / 14%);
    border-radius: 8px;
    background:
      linear-gradient(90deg, rgb(0 229 255 / 6%), transparent 34%),
      linear-gradient(180deg, rgb(249 236 210 / 94%), rgb(230 214 181 / 92%));
    box-shadow:
      0 8px 16px rgb(15 33 48 / 12%),
      inset 0 1px 0 rgb(255 250 236 / 58%);
  }

  .dones-view tbody tr {
    background:
      linear-gradient(90deg, rgb(100 58 27 / 10%), transparent 34%),
      linear-gradient(180deg, rgb(250 235 202 / 96%), rgb(221 184 128 / 92%));
  }

  tbody tr.complete-row {
    background:
      linear-gradient(90deg, rgb(0 229 255 / 7%), transparent 34%),
      linear-gradient(180deg, rgb(220 238 252 / 92%), rgb(201 224 242 / 90%));
  }

  tbody td {
    display: grid;
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    padding: 0;
    border: 0;
    overflow: visible;
    font-size: 13px;
    line-height: 1.35;
  }

  tbody tr > .done-cell,
  tbody tr > .priority-cell,
  tbody tr > .task-name,
  tbody tr > .notes,
  tbody tr > .status-cell,
  tbody tr > .date-cell,
  tbody tr > .actions-cell {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  tbody td::before {
    color: #526273;
    content: attr(data-label);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  tbody td.done-cell,
  tbody td.actions-cell {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    white-space: normal;
  }

  tbody td.done-cell::before,
  tbody td.actions-cell::before {
    flex: 0 0 74px;
  }

  .task-name {
    display: block;
    grid-column: 1 / -1;
    grid-row: auto;
    margin: 0 0 2px;
    padding: 10px 11px;
    font-size: 15px;
  }

  tbody td.task-name::before {
    content: none;
  }

  .task-title {
    -webkit-line-clamp: 4;
  }

  .notes {
    max-height: none;
  }

  .notes-preview {
    -webkit-line-clamp: 5;
  }

  .priority-pill,
  .status-pill {
    min-height: 28px;
    font-size: 12px;
  }

  .row-button {
    flex: 1 1 72px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    font-size: 12px;
  }

  tbody td.actions-cell {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: start;
    width: 100%;
    min-width: 0;
    max-width: none;
    gap: 10px;
  }

  tbody td.actions-cell::before {
    grid-column: 1;
  }

  .actions-cell .action-button-bank {
    grid-column: 2;
    justify-self: start;
    width: 184px;
    max-width: 100%;
  }

  .task-action-button {
    flex: 0 0 auto !important;
    width: 80px !important;
    min-width: 80px !important;
    justify-self: start;
  }

  .row-control-group {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 0;
  }

  .done-check-hover-zone,
  .done-cell input {
    width: 24px;
    height: 24px;
  }

  .dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  dialog {
    width: min(560px, calc(100% - 24px));
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }

  .details-list div {
    grid-template-columns: 1fr;
  }

  /* Keep every compact card inside the solid center of the original beach fade. */
  tbody tr {
    grid-template-columns:
      52px
      92px
      112px
      84px
      84px
      minmax(96px, 1fr)
      184px;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 8px;
  }

  tbody tr > .task-name {
    grid-column: 1 / 7;
    grid-row: 1;
    width: auto;
  }

  tbody tr > .done-cell {
    grid-column: 1;
    grid-row: 2;
  }

  tbody tr > .priority-cell {
    grid-column: 2;
    grid-row: 2;
  }

  tbody tr > .status-cell {
    grid-column: 3;
    grid-row: 2;
  }

  tbody tr > .due-cell {
    grid-column: 4;
    grid-row: 2;
  }

  tbody tr > .added-cell {
    grid-column: 5;
    grid-row: 2;
  }

  tbody tr > .notes {
    grid-column: 6;
    grid-row: 2;
  }

  tbody tr > .actions-cell {
    grid-column: 7;
    grid-row: 1 / 3;
  }

  tbody tr > .done-cell,
  tbody tr > .priority-cell,
  tbody tr > .notes,
  tbody tr > .status-cell,
  tbody tr > .date-cell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 4px;
    width: auto;
    min-width: 0;
    white-space: normal;
  }

  tbody tr > .done-cell {
    justify-items: center;
  }

  tbody tr > .done-cell::before {
    flex: none;
  }

  tbody tr > .actions-cell {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: auto;
    min-width: 0;
  }

  tbody tr > .actions-cell::before {
    content: none;
  }

  .actions-cell .action-button-bank {
    grid-column: auto;
    justify-self: auto;
    width: 184px;
  }

  .priority-pill,
  .status-pill {
    width: 100%;
    padding-inline: 6px;
    text-align: center;
  }

  .notes-preview {
    -webkit-line-clamp: 4;
  }
}

@media (max-width: 900px) {
  :root {
    --compact-beach-gutter: clamp(22px, 6vw, 32px);
  }

  tbody tr {
    grid-template-columns: minmax(0, 1fr);
  }

  tbody tr > .done-cell,
  tbody tr > .priority-cell,
  tbody tr > .task-name,
  tbody tr > .notes,
  tbody tr > .status-cell,
  tbody tr > .date-cell,
  tbody tr > .actions-cell {
    grid-column: 1;
    grid-row: auto;
  }

  tbody tr > .done-cell,
  tbody tr > .priority-cell,
  tbody tr > .notes,
  tbody tr > .status-cell,
  tbody tr > .date-cell {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
  }

  tbody tr > .done-cell {
    justify-items: stretch;
  }

  tbody tr > .actions-cell {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    justify-content: stretch;
    gap: 10px;
  }

  tbody tr > .actions-cell::before {
    display: block;
    grid-column: 1;
    content: attr(data-label);
  }

  .actions-cell .action-button-bank {
    grid-column: 2;
    justify-self: start;
  }

  .priority-pill,
  .status-pill {
    width: auto;
  }

  body:not(.dones-view) tbody tr > .priority-cell .priority-pill {
    inline-size: min(150px, 100%);
    block-size: 32px;
    min-block-size: 32px;
    justify-self: center;
    border-radius: 999px;
  }
}

@media (max-width: 520px) {
  body:not(.dones-view) tbody tr > .priority-cell .priority-pill {
    inline-size: min(128px, 100%);
  }
}

/* Keep the Active dock compact at intermediate widths while reserving a readable
   Notes row. The tray remains an absolutely positioned decorative child. */
@media (min-width: 901px) and (max-width: 1180px) {
  body:not(.dones-view) tbody tr {
    grid-template-columns: repeat(5, minmax(0, 1fr)) 184px;
    grid-template-rows: auto auto auto;
  }

  body:not(.dones-view) tbody tr > .task-name {
    grid-column: 1 / 6;
    grid-row: 1;
  }

  body:not(.dones-view) tbody tr > .notes {
    grid-column: 1 / 6;
    grid-row: 2;
  }

  body:not(.dones-view) tbody tr > .done-cell {
    grid-column: 1;
    grid-row: 3;
  }

  body:not(.dones-view) tbody tr > .priority-cell {
    grid-column: 2;
    grid-row: 3;
  }

  body:not(.dones-view) tbody tr > .status-cell {
    grid-column: 3;
    grid-row: 3;
  }

  body:not(.dones-view) tbody tr > .due-cell {
    grid-column: 4;
    grid-row: 3;
  }

  body:not(.dones-view) tbody tr > .added-cell {
    grid-column: 5;
    grid-row: 3;
  }

  body:not(.dones-view) tbody tr > .actions-cell {
    grid-column: 6;
    grid-row: 1 / 4;
    align-self: center;
  }
}

@media (max-width: 520px) {
  :root {
    --frame-x: 18px;
    --frame-y: 20px;
  }

  .master-button-bank {
    width: 100%;
    min-width: 246px;
    border-radius: 12px;
  }

  .header-actions,
  .controls-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .search-control {
    grid-column: auto;
  }
}

/* Scale the complete approved tray assembly from its available width. */
@container master-tray (max-width: 559px) {
  .master-button-grid {
    inset: 50% auto auto 50%;
    width: 370px;
    height: 207px;
    align-content: space-between;
    justify-content: space-between;
    transform: translate(-50%, -50%) scale(0.915);
  }
}

@container master-tray (max-width: 519px) {
  .master-button-grid {
    transform: translate(-50%, -50%) scale(0.845);
  }
}

@container master-tray (max-width: 479px) {
  .master-button-grid {
    transform: translate(-50%, -50%) scale(0.775);
  }
}

@container master-tray (max-width: 439px) {
  .master-button-grid {
    transform: translate(-50%, -50%) scale(0.705);
  }
}

@container master-tray (max-width: 399px) {
  .master-button-grid {
    transform: translate(-50%, -50%) scale(0.615);
  }
}

@container master-tray (max-width: 349px) {
  .master-button-grid {
    transform: translate(-50%, -50%) scale(0.59);
  }
}

@container master-tray (max-width: 334px) {
  .master-button-grid {
    transform: translate(-50%, -50%) scale(0.49);
  }

  .header-actions .master-button-grid > button {
    min-height: 90px !important;
  }
}

@container master-tray (max-width: 279px) {
  .master-button-grid {
    transform: translate(-50%, -50%) scale(0.438);
  }

  .header-actions .master-button-grid > button {
    min-height: 101px !important;
  }
}

/* Preserve the approved 184 px Active dock below the label-column threshold. */
@media (max-width: 400px) {
  body:not(.dones-view) tbody tr > .actions-cell {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  body:not(.dones-view) tbody tr > .actions-cell::before,
  body:not(.dones-view) .actions-cell .action-button-bank--active {
    grid-column: 1;
  }

  body:not(.dones-view) .actions-cell .action-button-bank--active {
    justify-self: end;
    inline-size: 184px;
    max-inline-size: 100%;
  }
}

/* Approved Archive crate-card kit.
   The action bank deliberately remains a separate live layer: this rule only
   paints the archived row behind its existing cells. */
body.dones-view tbody tr.complete-row {
  --archive-crate-hinge-left: url("assets/archive-crates/archive-crate-card-hinge-left.png");
  --archive-crate-hinge-right: url("assets/archive-crates/archive-crate-card-hinge-right.png");
  --archive-crate-rail-side: 12px;
  position: relative;
  isolation: isolate;
  border-color: transparent;
  border-radius: 0;
  background-color: #4c3523;
  background-image:
    url("assets/archive-crates/archive-crate-card-corner-top-left.png"),
    url("assets/archive-crates/archive-crate-card-corner-top-right.png"),
    url("assets/archive-crates/archive-crate-card-corner-bottom-right.png"),
    url("assets/archive-crates/archive-crate-card-corner-bottom-left.png"),
    var(--archive-crate-hinge-left),
    var(--archive-crate-hinge-right),
    url("assets/archive-crates/archive-crate-card-latch-center.png"),
    url("assets/archive-crates/archive-crate-card-rail-top.png"),
    url("assets/archive-crates/archive-crate-card-rail-bottom.png"),
    url("assets/archive-crates/archive-crate-card-rail-left.png"),
    url("assets/archive-crates/archive-crate-card-rail-right.png"),
    url("assets/archive-crates/archive-crate-card-wood-center-tile.png");
  background-position:
    left top,
    right top,
    right bottom,
    left bottom,
    22% top,
    78% top,
    center top,
    center top,
    center bottom,
    left center,
    right center,
    center;
  background-size:
    26px 26px,
    26px 26px,
    26px 26px,
    26px 26px,
    24px auto,
    24px auto,
    16px auto,
    auto 10px,
    auto 8px,
    var(--archive-crate-rail-side) auto,
    var(--archive-crate-rail-side) auto,
    256px auto;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat-x,
    repeat-x,
    repeat-y,
    repeat-y,
    repeat;
  box-shadow: none;
}

/* Keep the actual content, including the protected live action bay, above
   the crate art.  No action-bank selector or child geometry is changed here. */
body.dones-view tbody tr.complete-row > td {
  position: relative;
  z-index: 1;
}

/* Desktop/table Archive rows are CSS-grid children, not native table rows.
   Unlike the compact rule above, that layout previously had no row gap, so
   neighboring crate lids could meet at some browser zooms.  Keep separation
   on their outer grid only; no crate, cell, or protected action-bay geometry
   is involved.  Compact cards already use this same 12px gap. */
body.dones-view tbody {
  row-gap: 12px;
}

/* Remove the prior beige task-title capsule so the surrounding wood remains
   visible, while retaining the existing title clamp and content width. */
body.dones-view tbody tr.complete-row .task-name {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body.dones-view tbody tr.complete-row .task-title {
  color: #9bb7c1;
  text-shadow:
    0 1px 0 rgb(20 14 10 / 88%),
    0 0 3px rgb(71 165 255 / 38%);
}

/* Improve the live Archive text contrast over the crate wood without
   changing any field, rail, or protected action-bank geometry. */
body.dones-view thead .done-heading,
body.dones-view thead .priority-heading,
body.dones-view thead .status-heading,
body.dones-view thead .due-heading,
body.dones-view thead .added-heading,
body.dones-view thead .notes-heading,
body.dones-view thead .actions-heading,
body.dones-view tbody td::before {
  color: #35a7ff;
  text-shadow:
    0 1px 0 rgb(27 15 9 / 96%),
    1px 0 0 rgb(27 15 9 / 82%),
    -1px 0 0 rgb(27 15 9 / 82%),
    0 0 3px rgb(20 126 255 / 80%);
}

body.dones-view tbody tr.complete-row .task-title {
  color: #55b8ff;
  text-shadow:
    0 1px 0 rgb(20 14 10 / 95%),
    1px 0 1px rgb(20 14 10 / 88%),
    0 0 3px rgb(20 126 255 / 62%);
}

body.dones-view tbody tr.complete-row .notes-preview,
body.dones-view tbody tr.complete-row .date-cell > span {
  color: #f3dead;
  text-shadow: 0 1px 2px rgb(38 20 8 / 90%);
}

/* Wide Archive rows retain the approved full hardware complement.  The
   title field is pulled clear of the right rail without touching the action
   bay, its tray, or any button canvas. */
@media (min-width: 1181px) {
  body.dones-view tbody tr.complete-row .task-name {
    margin-right: 21px;
  }
}

/* Compact Archive cards retain their measured 74px label column and live
   2x2 bay footprint.  Only the two optional hinge images are hidden. */
@media (max-width: 1180px) {
  body.dones-view tbody tr.complete-row {
    --archive-crate-hinge-left: none;
    --archive-crate-hinge-right: none;
    --archive-crate-rail-side: 12px;
    border-radius: 0;
  }
}

/* Archive priority is a small suspended liquid capsule in the vertical-card
   layout.  Unlike Status, it must not stretch across the value column. */
@media (max-width: 900px) {
  body.dones-view tbody tr.complete-row > .priority-cell .priority-pill {
    inline-size: 134px;
    max-inline-size: 100%;
    justify-self: center;
  }

  body.dones-view tbody tr.complete-row > .priority-cell .priority-text {
    color: var(--priority-ink);
    font-weight: 800;
    -webkit-text-stroke: 0.45px rgb(39 22 10 / 92%);
    text-shadow:
      0 1px 1px rgb(39 22 10 / 96%),
      0 0 1px currentColor;
  }

  body.dones-view tbody tr.complete-row > .priority-cell .priority-Critical {
    --priority-ink: #ff9a87;
  }

  body.dones-view tbody tr.complete-row > .priority-cell .priority-High {
    --priority-ink: #ffad91;
  }

  body.dones-view tbody tr.complete-row > .priority-cell .priority-Medium {
    --priority-ink: #f3d48a;
  }

  body.dones-view tbody tr.complete-row > .priority-cell .priority-Low {
    --priority-ink: #b9e8ff;
  }

  body.dones-view tbody tr.complete-row > .priority-cell .priority-pill:not(.priority-Critical, .priority-High, .priority-Medium, .priority-Low) {
    --priority-ink: #f3dead;
  }
}

@media (max-width: 520px) {
  body.dones-view tbody tr.complete-row > .priority-cell .priority-pill {
    inline-size: 122px;
  }
}