/*
 * The style of the console of the administration of the battery passport:
 * an app shell in the ink of Sunlight with cards on porcelain and a charge
 * bar of blue cells with a yellow tip as its signature, light and dark as
 * the reader sets it, a top bar on a phone.
 */

/* Tokens */

:root {
   color-scheme: light dark;
   --ink: #100F22;
   --blue: #175CF2;
   --yellow: #FDD041;
   --font: Inter, "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Ubuntu Sans", system-ui, Roboto, "Noto Sans", Cantarell, "Helvetica Neue", Arial, sans-serif;
   --font-display: "Inter Display", Inter, "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Ubuntu Sans", system-ui, Roboto, "Noto Sans", Cantarell, sans-serif;
   --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Ubuntu Sans Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, "Noto Sans Mono", "DejaVu Sans Mono", monospace;
   --side-w: 13rem;
   --pad: 16px;
   --radius: 14px;
   --radius-s: 10px;
   --label-w: 11.5rem;
   --ease: cubic-bezier(.2,.7,.2,1);
   --charge: linear-gradient(90deg,#175CF2,#5288FF 75%,#FDD041 75%);
   --cells: repeating-linear-gradient(90deg,#000 0 calc(25% - 3px),transparent calc(25% - 3px) 25%);
   --canvas: #F3F5F9;
   --glow: radial-gradient(60rem 24rem at 30% -7rem,rgb(23 92 242 / 0.11),transparent 70%), radial-gradient(34rem 16rem at 100% -5rem,rgb(253 208 65 / 0.12),transparent 70%);
   --card: #FFFFFF;
   --card-2: #F7F8FB;
   --card-line: #E1E5ED;
   --sheen: linear-gradient(transparent,transparent);
   --line: #E9ECF2;
   --line-strong: #D3D9E3;
   --control-line: #808A9D;
   --control-hover: #5E687C;
   --field: #FFFFFF;
   --text: #0E1020;
   --text-2: #3D4456;
   --muted: #5B6375;
   --link: #175CF2;
   --link-line: rgb(23 92 242 / 0.4);
   --accent: #175CF2;
   --accent-soft: #EBF1FF;
   --accent-line: #B5C9F9;
   --accent-text: #1146C4;
   --focus: #175CF2;
   --focus-halo: rgb(23 92 242 / 0.16);
   --danger: #C42B1C;
   --danger-text: #A8200F;
   --danger-soft: #FEF3F2;
   --danger-line: #F2B8B1;
   --danger-fill: #D92D20;
   --success: #0B6B3A;
   --success-soft: #ECF8F1;
   --success-line: #A9DEC1;
   --success-fill: #12A85F;
   --row-hover: #F7F9FD;
   --row-picked: #F0F5FF;
   --code: #F5F7FB;
   --shadow-s: 0 1px 2px rgb(16 15 34 / 0.05);
   --shadow: 0 1px 2px rgb(16 15 34 / 0.04), 0 4px 8px -4px rgb(16 15 34 / 0.04), 0 16px 32px -16px rgb(16 15 34 / 0.10);
   --shadow-l: 0 2px 4px rgb(16 15 34 / 0.05), 0 24px 48px -20px rgb(16 15 34 / 0.26);
   --side: #100F22;
   --side-glow: #1B1850;
   --side-text: rgb(255 255 255 / 0.78);
   --side-dim: rgb(255 255 255 / 0.6);
   --side-line: rgb(255 255 255 / 0.08);
   --side-edge: #232234;
   --side-hover: rgb(255 255 255 / 0.07);
   --side-shadow: none;
   --on-ink-focus: #FDD041;
   --band: #100F22;
   --band-glow: radial-gradient(52rem 20rem at 88% -4rem,rgb(46 107 255 / 0.42),transparent 70%), radial-gradient(30rem 14rem at 100% 0,rgb(253 208 65 / 0.10),transparent 70%);
   --toast: rgb(16 15 34 / 0.94);
   --toast-line: rgb(255 255 255 / 0.12);
   --toast-alarm: rgb(58 14 26 / 0.95);
   --dock: linear-gradient(160deg,#1E1B4D,#100F22 64%);
   --dock-line: #100F22;
   --c-active: #12B76A;
   --c-disabled: #F04438;
   --c-expired: #F97316;
   --c-keyless: #7A5AF8;
   --c-linked: #2E6BFF;
   --c-lapsed: #DD2590;
   --c-dormant: #8A93A6;
   --c-incomplete: #E8B400;
   --r-workshop: #0EA5A0;
   --r-authority: #5B5FE8;
   --r-customer: #0EA5E9;
   --r-manufacturer: #FDD041;
   --t-active-fg: #0B6B3A;
   --t-active-bg: #E9F7EF;
   --t-active-ring: #BFE6D0;
   --t-disabled-fg: #B42318;
   --t-disabled-bg: #FDEDEC;
   --t-disabled-ring: #F7C6C1;
   --t-expired-fg: #A3410B;
   --t-expired-bg: #FFF1E6;
   --t-expired-ring: #FAD3B5;
   --t-keyless-fg: #5B2FC9;
   --t-keyless-bg: #F3EFFF;
   --t-keyless-ring: #D9CEFD;
   --t-linked-fg: #1748C0;
   --t-linked-bg: #ECF2FF;
   --t-linked-ring: #C7D7FB;
   --t-lapsed-fg: #A1186E;
   --t-lapsed-bg: #FCEEF7;
   --t-lapsed-ring: #F5C6E3;
   --t-dormant-fg: #4A5165;
   --t-dormant-bg: #EFF1F5;
   --t-dormant-ring: #D8DCE5;
   --t-incomplete-fg: #7A5600;
   --t-incomplete-bg: #FFF7DB;
   --t-incomplete-ring: #F6DF94;
   --t-workshop-fg: #0B6E6E;
   --t-workshop-bg: #E4F6F5;
   --t-workshop-ring: #B8E5E2;
   --t-authority-fg: #3B3FB6;
   --t-authority-bg: #EEEFFF;
   --t-authority-ring: #CDD0FB;
   --t-customer-fg: #075985;
   --t-customer-bg: #E6F4FC;
   --t-customer-ring: #BEE3F8;
   --t-maker-bg: linear-gradient(135deg,#2A2766,#100F22);
   --t-maker-ring: rgb(16 15 34 / 0.6);
   --av-blue: linear-gradient(135deg,#2F6BEA,#1745C2);
   --av-ink: linear-gradient(135deg,#37336F,#100F22);
   --av-slate: linear-gradient(135deg,#55658A,#2F3A57);
   --av-azure: linear-gradient(135deg,#1170C4,#0A4C8A);
   --av-indigo: linear-gradient(135deg,#3F4AB8,#1F2470);
   --expired-text: #A3410B;
}

@media screen and (prefers-color-scheme: dark) {
   :root {
      --canvas: #080A12;
      --glow: radial-gradient(64rem 26rem at 28% -9rem,rgb(23 92 242 / 0.24),transparent 70%), radial-gradient(34rem 16rem at 100% -6rem,rgb(253 208 65 / 0.08),transparent 70%);
      --card: #11142A;
      --card-2: #0D1023;
      --card-line: #22283F;
      --sheen: linear-gradient(90deg,rgb(150 180 255 / 0),rgb(150 180 255 / 0.32) 30%,rgb(150 180 255 / 0.32) 70%,rgb(150 180 255 / 0)) top / 100% 1px no-repeat;
      --line: #1D2236;
      --line-strong: #2C3350;
      --control-line: #6B7493;
      --control-hover: #9099B2;
      --field: #0A0D1C;
      --text: #E9ECF5;
      --text-2: #BAC0D2;
      --muted: #9099B0;
      --link: #8AADFF;
      --link-line: rgb(138 173 255 / 0.45);
      --accent: #5B8CFF;
      --accent-soft: rgb(61 123 255 / 0.15);
      --accent-line: rgb(110 152 255 / 0.42);
      --accent-text: #AAC4FF;
      --focus: #8DB1FF;
      --focus-halo: rgb(125 165 255 / 0.24);
      --danger: #FF8B82;
      --danger-text: #FFA9A2;
      --danger-soft: rgb(240 68 56 / 0.12);
      --danger-line: rgb(255 139 130 / 0.38);
      --success: #6CE0A5;
      --success-soft: rgb(18 183 106 / 0.12);
      --success-line: rgb(108 224 165 / 0.32);
      --success-fill: #1DB46B;
      --row-hover: #151935;
      --row-picked: #16204A;
      --code: #0A0D1C;
      --shadow-s: 0 1px 2px rgb(0 0 0 / 0.4);
      --shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 1px 2px rgb(0 0 0 / 0.5), 0 18px 36px -18px rgb(0 0 0 / 0.8);
      --shadow-l: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 24px 48px -16px rgb(0 0 0 / 0.85);
      --side: #0E0D25;
      --side-glow: #1D1A58;
      --side-line: rgb(255 255 255 / 0.07);
      --side-edge: #2B2A57;
      --side-shadow: 1px 0 0 rgb(140 170 255 / 0.10), 16px 0 48px -16px rgb(23 92 242 / 0.28);
      --band: #0F0E28;
      --band-glow: radial-gradient(52rem 20rem at 88% -4rem,rgb(46 107 255 / 0.36),transparent 70%), radial-gradient(30rem 14rem at 100% 0,rgb(253 208 65 / 0.08),transparent 70%);
      --toast: rgb(30 34 66 / 0.94);
      --toast-line: rgb(140 175 255 / 0.24);
      --toast-alarm: rgb(74 20 34 / 0.95);
      --dock: linear-gradient(160deg,#1C2050,#141836 64%);
      --dock-line: #2C3466;
      --t-active-fg: #7CE3AE;
      --t-active-bg: rgb(18 183 106 / 0.13);
      --t-active-ring: rgb(18 183 106 / 0.32);
      --t-disabled-fg: #FFA39C;
      --t-disabled-bg: rgb(240 68 56 / 0.15);
      --t-disabled-ring: rgb(240 68 56 / 0.36);
      --t-expired-fg: #FDB27A;
      --t-expired-bg: rgb(249 115 22 / 0.14);
      --t-expired-ring: rgb(249 115 22 / 0.34);
      --t-keyless-fg: #C2B1FF;
      --t-keyless-bg: rgb(122 90 248 / 0.17);
      --t-keyless-ring: rgb(122 90 248 / 0.4);
      --t-linked-fg: #9BBBFF;
      --t-linked-bg: rgb(46 107 255 / 0.16);
      --t-linked-ring: rgb(46 107 255 / 0.4);
      --t-lapsed-fg: #F5A3D3;
      --t-lapsed-bg: rgb(221 37 144 / 0.15);
      --t-lapsed-ring: rgb(221 37 144 / 0.38);
      --t-dormant-fg: #BAC2D3;
      --t-dormant-bg: rgb(148 160 184 / 0.13);
      --t-dormant-ring: rgb(148 160 184 / 0.3);
      --t-incomplete-fg: #FDD041;
      --t-incomplete-bg: rgb(253 208 65 / 0.12);
      --t-incomplete-ring: rgb(253 208 65 / 0.32);
      --t-workshop-fg: #6EE0D3;
      --t-workshop-bg: rgb(20 184 166 / 0.14);
      --t-workshop-ring: rgb(20 184 166 / 0.34);
      --t-authority-fg: #B4B7FF;
      --t-authority-bg: rgb(99 102 241 / 0.18);
      --t-authority-ring: rgb(99 102 241 / 0.42);
      --t-customer-fg: #84D3FA;
      --t-customer-bg: rgb(56 189 248 / 0.14);
      --t-customer-ring: rgb(56 189 248 / 0.34);
      --t-maker-bg: linear-gradient(135deg,#302C78,#1A1845);
      --t-maker-ring: rgb(140 130 255 / 0.34);
      --expired-text: #FDB27A;
   }
}

/* Base */

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

html {
   background: var(--canvas);
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
   scroll-padding-top: 1.5rem;
   scroll-padding-bottom: 1.5rem;
}

html:has(#status:not(:empty)) {
   scroll-padding-bottom: 7rem;
}

body {
   margin: 0;
   min-height: 100vh;
   font: 400 0.9375rem/1.55 var(--font);
   color: var(--text);
   background: var(--glow) no-repeat;
   font-kerning: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-wrap: break-word;
}

::selection {
   background: rgb(23 92 242 / 0.22);
}

a {
   color: var(--link);
   text-decoration-line: underline;
   text-decoration-thickness: 1px;
   text-decoration-color: var(--link-line);
   text-underline-offset: 0.22em;
   transition: color .15s, text-decoration-color .15s;
}

a:hover {
   text-decoration-color: currentColor;
}

:focus-visible {
   outline: 2px solid var(--focus);
   outline-offset: 2px;
}

h1,
h2,
h3 {
   margin: 0;
   color: var(--text);
   text-wrap: balance;
}

h1 {
   font: 600 1.875rem/1.12 var(--font-display);
   letter-spacing: -0.028em;
}

h1::after {
   content: "";
   display: block;
   width: 3.25rem;
   height: 4px;
   margin-top: 14px;
   border-radius: 1px;
   background: var(--charge);
   -webkit-mask-image: var(--cells);
   mask-image: var(--cells);
}

h2 {
   font: 600 1rem/1.4 var(--font);
   letter-spacing: -0.011em;
}

h3 {
   font: 600 0.8125rem/1.4 var(--font);
   color: var(--text-2);
}

p {
   margin: 0 0 16px;
}

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

svg.icon {
   flex: none;
}

time {
   white-space: nowrap;
}

dd time {
   white-space: normal;
}

.number,
td.members,
td.grants,
p.count {
   font-variant-numeric: tabular-nums;
}

.sep,
.skip:not(:focus) {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
}

.skip:focus {
   position: fixed;
   top: 12px;
   left: 12px;
   z-index: 100;
   padding: 10px 16px;
   border-radius: var(--radius-s);
   background: var(--yellow);
   color: var(--ink);
   font-weight: 600;
   text-decoration: none;
   box-shadow: var(--shadow-l);
   outline: 2px solid var(--ink);
}

/* Shell */

body > header {
   --logo-mark: #FFFFFF;
   color: var(--side-text);
}

body > header a {
   text-decoration: none;
}

body > header :focus-visible {
   outline-color: var(--on-ink-focus);
}

body.signed > header {
   position: relative;
   z-index: 20;
   display: grid;
   grid-template-columns: minmax(0,1fr) auto auto;
   grid-template-rows: 40px auto;
   grid-template-areas: "brand languages who" "menu menu menu";
   align-items: center;
   column-gap: 10px;
   padding: 8px var(--pad) 0;
   background: radial-gradient(120% 160% at 0% 0%,rgb(23 92 242 / 0.30),transparent 55%), linear-gradient(180deg,var(--side-glow),var(--side));
   box-shadow: inset 0 -1px 0 var(--side-line);
}

.brand {
   grid-area: brand;
   margin: 0;
}

.brand a {
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 6px;
   max-width: 100%;
   border-radius: 6px;
   color: inherit;
}

.brand svg {
   display: block;
   width: 7.25rem;
   max-width: 100%;
   height: auto;
}

.brand span {
   color: var(--side-dim);
   font-size: 0.75rem;
   font-weight: 500;
   line-height: 1.35;
}

body.signed .brand span {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   white-space: nowrap;
}

.menu {
   grid-area: menu;
   margin: 4px calc(0px - var(--pad)) 0;
   overflow-x: auto;
   scrollbar-width: none;
   scroll-padding-inline: 40px;
   -webkit-mask-image: linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 28px),transparent);
   mask-image: linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 28px),transparent);
}

.menu:focus-within {
   -webkit-mask-image: none;
   mask-image: none;
}

.menu::-webkit-scrollbar {
   display: none;
}

.menu ul,
.languages ul {
   display: flex;
   margin: 0;
   padding: 0;
   list-style: none;
}

.menu ul {
   gap: 4px;
   width: max-content;
   padding: 4px var(--pad) 10px;
}

.menu a {
   position: relative;
   display: flex;
   align-items: center;
   gap: 8px;
   min-height: 36px;
   padding: 6px 13px 6px 10px;
   border-radius: 999px;
   color: var(--side-text);
   font-size: 0.8125rem;
   font-weight: 500;
   white-space: nowrap;
   transition: background-color .15s, color .15s, box-shadow .2s;
}

.menu .icon {
   width: 18px;
   height: 18px;
   color: var(--side-dim);
   transition: color .15s;
}

.menu a:hover {
   color: #FFFFFF;
   background: var(--side-hover);
}

.menu a:hover .icon {
   color: #FFFFFF;
}

.menu a[aria-current] {
   color: #FFFFFF;
   scroll-initial-target: nearest;
}

.menu a[aria-current] .icon {
   color: var(--yellow);
}

.menu a[aria-current="page"] {
   background: linear-gradient(180deg,rgb(70 128 255 / 0.44),rgb(23 92 242 / 0.22));
   box-shadow: inset 0 0 0 1px rgb(140 175 255 / 0.36), 0 6px 20px -8px rgb(23 92 242 / 0.9);
}

.menu a[aria-current="true"] {
   background: rgb(255 255 255 / 0.08);
   box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.10);
}

.who {
   grid-area: who;
   margin: 0;
}

.who a {
   position: relative;
   display: block;
   width: 36px;
   height: 36px;
   overflow: hidden;
   border-radius: 50%;
   color: var(--side-text);
   white-space: nowrap;
   text-indent: 100%;
}

.who a::before {
   position: absolute;
   inset: 3.5px;
   width: auto;
   height: auto;
   text-indent: 0;
   box-shadow: 0 0 0 2px var(--side), 0 0 0 3.5px rgb(253 208 65 / 0.85);
}

.languages {
   grid-area: languages;
}

.languages ul {
   gap: 2px;
   padding: 3px;
   border-radius: 10px;
   background: rgb(255 255 255 / 0.06);
   box-shadow: inset 0 0 0 1px var(--side-line);
}

.languages a {
   display: block;
   padding: 4px 9px;
   border-radius: 7px;
   color: var(--side-text);
   font-size: 0.75rem;
   font-weight: 500;
   line-height: 1.4;
   text-align: center;
   transition: background-color .15s, color .15s;
}

.languages a:hover {
   color: #FFFFFF;
   background: var(--side-hover);
}

.languages a[aria-current="true"] {
   color: var(--ink);
   background: #FFFFFF;
   box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

/* Page */

body.signed > main {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
   align-items: flex-start;
   column-gap: 16px;
   padding: 24px var(--pad) 96px;
}

body.signed > main > * {
   flex: 1 1 100%;
   min-width: 0;
   margin-top: 0;
   margin-bottom: 16px;
}

body.signed > main > h1 {
   margin-bottom: 24px;
}

body.signed > main > h1:has(+ p.export) {
   flex: 1 1 auto;
}

body.signed > main > p.count {
   flex: 1 1 auto;
}

body.signed > main > p.export {
   flex: 0 0 auto;
}

body.signed > main > h1 + p.export {
   align-self: flex-end;
   margin-bottom: 24px;
}

main > p:not([class]),
main > p.hint {
   max-width: 46rem;
}

main > p:not([class]) {
   color: var(--text-2);
}

p.hint,
.hint {
   color: var(--muted);
   font-size: 0.8125rem;
}

p.count {
   align-self: center;
   color: var(--muted);
   font-size: 0.8125rem;
   font-weight: 500;
}

body.signed > main:has(> ul.figures)::before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   z-index: -1;
   height: 11.5rem;
   background: linear-gradient(90deg,transparent,rgb(91 140 255 / 0.9) 25%,rgb(253 208 65 / 0.95) 75%,transparent) bottom / 100% 2px no-repeat, linear-gradient(0deg,rgb(91 140 255 / 0.16),transparent 28px) bottom / 100% 28px no-repeat, var(--band-glow), var(--band);
   box-shadow: 0 0 0 100vmax var(--band);
   clip-path: inset(0 -100vmax);
}

body.signed > main:has(> ul.figures) > h1 {
   color: #FFFFFF;
}

/* Cards */

main section,
main > dl,
main > ul.items,
main > ul.log,
div.table {
   background: var(--sheen), var(--card);
   border: 1px solid var(--card-line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
}

main > form:has(> p > input) {
   overflow: clip;
   background: var(--sheen), var(--card);
   border: 1px solid var(--card-line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
}

main section {
   overflow: clip;
}

main section {
   padding: 0 var(--pad) 20px;
}

main section > h2 {
   position: relative;
   margin: 0 calc(0px - var(--pad)) 16px;
   padding: 14px var(--pad) 12px;
   border-bottom: 1px solid var(--line);
}

main section > h2::after {
   content: "";
   position: absolute;
   bottom: -1px;
   left: var(--pad);
   width: 24px;
   height: 2px;
   border-radius: 1px;
   background: var(--accent);
}

main section > :last-child,
main section form > :last-child,
div.bulk > :last-child {
   margin-bottom: 0;
}

main section > p:not([class]) {
   color: var(--text-2);
   max-width: 46rem;
}

main section:has(> h2 + form:last-child > p:only-child > button:only-child) {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 12px 24px;
   padding: 12px 12px 12px var(--pad);
}

main section:has(> h2 + form:last-child > p:only-child > button:only-child) > h2 {
   margin: 0;
   padding: 0;
   border: 0;
}

main section:has(> h2 + form:last-child > p:only-child > button:only-child) > h2::after {
   content: none;
}

main section.danger {
   border-color: var(--danger-line);
   background: var(--sheen), linear-gradient(180deg,var(--danger-soft),var(--card) 72px);
}

main section.danger > h2 {
   display: flex;
   align-items: center;
   gap: 10px;
   color: var(--danger-text);
   border-bottom-color: var(--danger-line);
}

main section.danger > h2::after {
   background: var(--danger);
}

main section.danger > h2::before {
   content: "!";
   content: "!" / "";
   display: inline-grid;
   place-items: center;
   flex: none;
   width: 20px;
   height: 20px;
   border-radius: 6px;
   background: var(--danger-fill);
   color: #FFFFFF;
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1;
   box-shadow: 0 0 0 3px var(--danger-soft);
}

main > form:has(> p > input) {
   padding: 20px var(--pad);
   margin-bottom: 24px;
}

main form {
   margin: 0;
}

main section > form,
main > form:not(.filters),
div.bulk {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   column-gap: 16px;
}

main section > form > *,
main > form:not(.filters) > *,
div.bulk > * {
   flex: 1 1 100%;
   min-width: 0;
}

main form > p:has(> button:only-child),
div.bulk > p:has(> button:only-child) {
   flex: 0 1 auto;
   min-width: 0;
   order: 1;
}

main form > p.confirm,
div.bulk > p.confirm {
   flex: 1 1 14rem;
   order: 2;
}

/* Fields */

main p > label:first-child {
   display: block;
   margin-bottom: 6px;
   color: var(--text-2);
   font-size: 0.8125rem;
   font-weight: 600;
}

main p > label:first-child + br {
   display: none;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="date"],
input:not([type]),
textarea {
   width: min(100%,26rem);
   min-height: 40px;
   padding: 8px 12px;
   border: 1px solid var(--control-line);
   border-radius: var(--radius-s);
   background: var(--field);
   color: var(--text);
   box-shadow: inset 0 1px 2px rgb(16 15 34 / 0.05);
   transition: border-color .15s, box-shadow .15s;
}

input[type="date"] {
   width: auto;
   min-width: 10.5rem;
}

input:hover,
textarea:hover {
   border-color: var(--control-hover);
}

input:focus-visible,
textarea:focus-visible {
   border-color: var(--focus);
   outline-offset: 1px;
   box-shadow: 0 0 0 5px var(--focus-halo);
}

input[type="search"] {
   padding-left: 36px;
   background-image: radial-gradient(circle at 17px 47%,transparent 4.6px,var(--muted) 5.2px 6.6px,transparent 7.2px), linear-gradient(to top right,transparent calc(50% - 0.9px),var(--muted) calc(50% - 0.9px) calc(50% + 0.9px),transparent calc(50% + 0.9px));
   background-size: auto, 6px 6px;
   background-position: 0 0, 21px calc(50% + 4px);
   background-repeat: no-repeat;
}

textarea {
   display: block;
   width: min(100%,46rem);
   min-height: 8rem;
   line-height: 1.5;
   resize: vertical;
}

textarea[cols] {
   font: 0.8125rem/1.6 var(--mono);
}

main p:has(> .hint) {
   display: grid;
   grid-template-columns: minmax(0,1fr);
   justify-content: start;
   align-items: center;
   column-gap: 10px;
}

main p:has(> .hint) > label {
   grid-column: 1 / -1;
}

main p > .hint {
   margin-top: 6px;
}

main > form.filters {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   gap: 16px 24px;
}

main > form.filters > * {
   flex: 0 1 auto;
   margin: 0;
}

main > form.filters > p:has(> input:not([type="checkbox"])) {
   flex: 1 1 15rem;
}

main > form.filters > p:last-child {
   margin-left: auto;
}

main > form.filters p > input:not([type="checkbox"]) {
   width: 100%;
}

input[type="checkbox"] {
   width: 18px;
   height: 18px;
   margin: 0;
   accent-color: var(--accent);
   cursor: pointer;
}

main p:has(> input[type="checkbox"]:first-child) {
   display: flex;
   align-items: center;
   gap: 10px;
   min-height: 40px;
}

/* Chips */

fieldset {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   min-width: 0;
   margin: 0 0 20px;
   padding: 0;
   border: 0;
}

legend {
   float: left;
   width: 100%;
   margin: 0 9px 0 0;
   padding: 0;
   color: var(--text-2);
   font-size: 0.8125rem;
   font-weight: 600;
}

fieldset > input[type="radio"] {
   flex: none;
   width: 1px;
   height: 36px;
   margin: 0 -9px 0 0;
   padding: 0;
   border: 0;
   opacity: 0;
   pointer-events: none;
   -webkit-appearance: none;
   appearance: none;
}

fieldset > input[type="radio"] + label {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   min-height: 36px;
   padding: 6px 14px 6px 10px;
   border: 1px solid var(--line-strong);
   border-radius: 999px;
   background: var(--card);
   color: var(--text-2);
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.3;
   cursor: pointer;
   box-shadow: var(--shadow-s);
   transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s;
}

fieldset > input[type="radio"] + label::before {
   content: "";
   order: -2;
   flex: none;
   width: 14px;
   height: 14px;
   border: 1.5px solid var(--control-line);
   border-radius: 50%;
   background: var(--field);
   transition: border-color .15s, background-color .15s, box-shadow .15s;
}

fieldset > input[type="radio"] + label::after {
   order: -1;
   flex: none;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--dot);
}

fieldset > input[type="radio"] + label:hover {
   border-color: var(--control-line);
   color: var(--text);
}

fieldset > input[type="radio"]:checked + label {
   border-color: var(--accent);
   background: var(--accent-soft);
   color: var(--accent-text);
   box-shadow: inset 0 0 0 1px var(--accent);
}

fieldset > input[type="radio"]:checked + label::before {
   border-color: var(--accent);
   background: var(--accent);
   box-shadow: inset 0 0 0 3px var(--field);
}

fieldset > input[type="radio"]:focus-visible + label {
   outline: 2px solid var(--focus);
   outline-offset: 2px;
}

fieldset > input[name="action"][value="disable"]:checked + label {
   border-color: var(--danger);
   background: var(--danger-soft);
   color: var(--danger-text);
   box-shadow: inset 0 0 0 1px var(--danger);
}

fieldset > input[name="action"][value="disable"]:checked + label::before {
   border-color: var(--danger);
   background: var(--danger);
}

fieldset > input[value="active"] + label,
.tag.active,
ul.figures a[href*="condition=active"] {
   --dot: var(--c-active);
}

fieldset > input[value="disabled"] + label,
.tag.disabled,
ul.figures a[href*="condition=disabled"] {
   --dot: var(--c-disabled);
}

fieldset > input[value="expired"] + label,
.tag.expired,
ul.figures a[href*="condition=expired"] {
   --dot: var(--c-expired);
}

fieldset > input[value="keyless"] + label,
.tag.keyless,
ul.figures a[href*="condition=keyless"] {
   --dot: var(--c-keyless);
}

fieldset > input[value="linked"] + label,
.tag.linked,
ul.figures a[href*="condition=linked"] {
   --dot: var(--c-linked);
}

fieldset > input[value="lapsed_link"] + label,
.tag.lapsed_link,
ul.figures a[href*="condition=lapsed_link"] {
   --dot: var(--c-lapsed);
}

fieldset > input[value="dormant"] + label,
.tag.dormant,
ul.figures a[href*="condition=dormant"] {
   --dot: var(--c-dormant);
}

fieldset > input[value="incomplete"] + label,
.tag.incomplete,
ul.figures a[href*="condition=incomplete"] {
   --dot: var(--c-incomplete);
}

fieldset > input[value="workshop"] + label,
.role.workshop {
   --dot: var(--r-workshop);
}

fieldset > input[value="authority"] + label,
.role.authority {
   --dot: var(--r-authority);
}

fieldset > input[value="customer"] + label,
.role.customer {
   --dot: var(--r-customer);
}

fieldset > input[value="manufacturer"] + label,
.role.manufacturer {
   --dot: var(--r-manufacturer);
}

fieldset > input:is([name="condition"],[name="role"],[name="kind"]):not([value=""]) + label::after {
   content: "";
}

fieldset > input:is([name="role"],[name="kind"]):not([value=""]) + label::after {
   width: 7px;
   height: 7px;
   margin: 0 1px;
   border-radius: 1.5px;
   transform: rotate(45deg);
}

fieldset:has(> input[type="radio"]:nth-of-type(13)) {
   position: static;
   display: block;
   max-height: 22rem;
   margin-top: 28px;
   overflow-y: auto;
   padding: 6px;
   border: 1px solid var(--line-strong);
   border-radius: 12px;
   background: var(--card-2);
   overscroll-behavior: contain;
   scrollbar-width: thin;
}

fieldset:has(> input[type="radio"]:nth-of-type(13)) > legend {
   position: absolute;
   width: auto;
   margin: -34px 0 0 -7px;
}

fieldset:has(> input[type="radio"]:nth-of-type(13)) > input[type="radio"] {
   display: block;
   height: 34px;
   margin: 0 0 -34px;
}

fieldset:has(> input[type="radio"]:nth-of-type(13)) > input + label {
   display: flex;
   min-height: 34px;
   margin: 0 0 2px;
   border-color: transparent;
   border-radius: 8px;
   background: transparent;
   box-shadow: none;
}

fieldset:has(> input[type="radio"]:nth-of-type(13)) > input + label:hover {
   background: var(--card);
}

fieldset:has(> input[type="radio"]:nth-of-type(13)) > input:checked + label {
   position: sticky;
   top: 0;
   bottom: 0;
   z-index: 1;
   background: var(--card);
   box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 6px var(--card-2);
}

fieldset:has(> input[type="radio"]:nth-of-type(13)) > input:focus-visible + label {
   outline-offset: -2px;
}

/* Buttons */

button,
a.button,
a.back,
p.export a,
p.pages a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 40px;
   padding: 9px 18px;
   border: 1px solid transparent;
   border-radius: var(--radius-s);
   font-size: 0.875rem;
   font-weight: 600;
   line-height: 1.25;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s, transform .2s var(--ease);
}

button:not(.quiet):not(.danger),
a.button {
   color: #FFFFFF;
   background: linear-gradient(180deg,#2B67F7,#175CF2);
   border-color: #1352DA;
   box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 1px 2px rgb(16 15 34 / 0.18), 0 6px 16px -6px rgb(23 92 242 / 0.6);
}

button:not(.quiet):not(.danger):hover,
a.button:hover {
   background: linear-gradient(180deg,#2B67F7,#0F52E6);
   box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.24), 0 2px 4px rgb(16 15 34 / 0.18), 0 12px 24px -8px rgb(23 92 242 / 0.7);
   transform: translateY(-1px);
}

button.quiet,
a.back,
p.export a,
p.pages a {
   color: var(--text);
   background: var(--card);
   border-color: var(--control-line);
   box-shadow: var(--shadow-s);
}

button.quiet:hover,
a.back:hover,
p.export a:hover,
p.pages a:hover {
   background: var(--card-2);
   border-color: var(--control-hover);
}

button.danger {
   color: var(--danger-text);
   background: var(--card);
   border-color: var(--danger);
   box-shadow: var(--shadow-s);
}

button.danger:hover {
   color: #FFFFFF;
   background: linear-gradient(180deg,#D63A2A,#B8271A);
   border-color: #A3200F;
   box-shadow: 0 8px 18px -8px rgb(196 43 28 / 0.6);
}

button:active,
a.button:active,
a.back:active {
   transform: translateY(0);
}

button:disabled {
   cursor: progress;
   opacity: 0.55;
   transform: none;
}

button .icon {
   width: 18px;
   height: 18px;
}

a.back::before {
   content: "\2190";
   content: "\2190" / "";
}

p.export a,
p.pages a {
   min-height: 34px;
   padding: 6px 14px;
   font-size: 0.8125rem;
}

p.export a[href*="format=csv"]::before {
   content: "\2193";
   content: "\2193" / "";
}

p.export a[href*="check=yes"]::before {
   content: "\2713";
   content: "\2713" / "";
}

p.pages {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
}

/* Notes */

p.notice,
p.alert,
p.saved {
   position: relative;
   padding: 13px 16px 13px 46px;
   border: 1px solid;
   border-radius: 12px;
   font-size: 0.875rem;
   font-weight: 500;
}

p.notice::before,
p.alert::before,
p.saved::before {
   position: absolute;
   top: 14px;
   left: 16px;
   display: grid;
   place-items: center;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   color: #FFFFFF;
   font-size: 0.75rem;
   font-weight: 700;
   line-height: 1;
}

p.notice {
   color: var(--accent-text);
   background: var(--accent-soft);
   border-color: var(--accent-line);
}

p.notice::before {
   content: "i";
   content: "i" / "";
   background: var(--blue);
}

p.alert {
   color: var(--danger-text);
   background: var(--danger-soft);
   border-color: var(--danger-line);
}

p.alert::before {
   content: "!";
   content: "!" / "";
   background: var(--danger-fill);
}

p.saved {
   color: var(--success);
   background: var(--success-soft);
   border-color: var(--success-line);
}

p.saved::before {
   content: "";
   background: var(--success-fill);
}

p.saved::after {
   content: "";
   position: absolute;
   top: 18px;
   left: 23.5px;
   width: 5px;
   height: 9px;
   border: solid #FFFFFF;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}

p.empty {
   padding: 28px 24px;
   border: 1px dashed var(--line-strong);
   border-radius: var(--radius);
   background: var(--card-2);
   color: var(--muted);
   text-align: center;
   font-weight: 500;
}

p.empty::before {
   content: "";
   display: block;
   width: 44px;
   height: 44px;
   margin: 0 auto 12px;
   border-radius: 14px;
   background: radial-gradient(circle at 50% 50%,transparent 7px,var(--control-line) 7.5px 9px,transparent 9.5px), linear-gradient(var(--card),var(--card));
   box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-s);
}

section p.empty {
   padding: 16px;
   text-align: left;
}

section p.empty::before {
   display: none;
}

p.confirm {
   display: flex;
   align-items: center;
   gap: 10px;
   color: var(--muted);
   font-size: 0.8125rem;
}

p.confirm .icon {
   width: 28px;
   height: 28px;
   padding: 5px;
   border-radius: 8px;
   color: var(--accent-text);
   background: var(--accent-soft);
   box-shadow: inset 0 0 0 1px var(--accent-line);
}

noscript p {
   color: var(--muted);
   font-size: 0.8125rem;
}

/* Tags and avatars */

.tag,
.role {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   min-height: 22px;
   padding: 2px 9px 2px 8px;
   border-radius: 999px;
   color: var(--t-fg,var(--text-2));
   background: var(--t-bg,var(--card-2));
   box-shadow: inset 0 0 0 1px var(--t-ring,var(--line-strong));
   font-size: 0.75rem;
   font-weight: 600;
   line-height: 1.3;
   white-space: nowrap;
   vertical-align: middle;
}

.tag::before,
.role::before {
   content: "";
   flex: none;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--dot,currentColor);
}

.role {
   padding: 2px 8px 2px 8px;
   border-radius: 6px;
}

.role::before {
   width: 6px;
   height: 6px;
   margin: 0 1px;
   border-radius: 1px;
   transform: rotate(45deg);
}

.tag.active {
   --t-fg: var(--t-active-fg);
   --t-bg: var(--t-active-bg);
   --t-ring: var(--t-active-ring);
}

.tag.disabled {
   --t-fg: var(--t-disabled-fg);
   --t-bg: var(--t-disabled-bg);
   --t-ring: var(--t-disabled-ring);
}

.tag.expired {
   --t-fg: var(--t-expired-fg);
   --t-bg: var(--t-expired-bg);
   --t-ring: var(--t-expired-ring);
}

.tag.keyless {
   --t-fg: var(--t-keyless-fg);
   --t-bg: var(--t-keyless-bg);
   --t-ring: var(--t-keyless-ring);
}

.tag.linked {
   --t-fg: var(--t-linked-fg);
   --t-bg: var(--t-linked-bg);
   --t-ring: var(--t-linked-ring);
}

.tag.lapsed_link {
   --t-fg: var(--t-lapsed-fg);
   --t-bg: var(--t-lapsed-bg);
   --t-ring: var(--t-lapsed-ring);
}

.tag.dormant {
   --t-fg: var(--t-dormant-fg);
   --t-bg: var(--t-dormant-bg);
   --t-ring: var(--t-dormant-ring);
}

.tag.incomplete {
   --t-fg: var(--t-incomplete-fg);
   --t-bg: var(--t-incomplete-bg);
   --t-ring: var(--t-incomplete-ring);
}

.role.workshop {
   --t-fg: var(--t-workshop-fg);
   --t-bg: var(--t-workshop-bg);
   --t-ring: var(--t-workshop-ring);
}

.role.authority {
   --t-fg: var(--t-authority-fg);
   --t-bg: var(--t-authority-bg);
   --t-ring: var(--t-authority-ring);
}

.role.customer {
   --t-fg: var(--t-customer-fg);
   --t-bg: var(--t-customer-bg);
   --t-ring: var(--t-customer-ring);
}

.role.manufacturer {
   --t-fg: #FFFFFF;
   --t-bg: var(--t-maker-bg);
   --t-ring: var(--t-maker-ring);
}

.tags .tag {
   margin: 2px 4px 2px 0;
}

[data-initials]::before {
   content: attr(data-initials);
   content: attr(data-initials) / "";
   display: inline-grid;
   place-items: center;
   flex: none;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: var(--avatar,var(--av-blue));
   color: var(--avatar-text,#FFFFFF);
   font: 600 0.75rem/1 var(--font);
   letter-spacing: 0.02em;
   text-decoration: none;
   box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18), 0 1px 2px rgb(16 15 34 / 0.18);
}

[data-initials^="A"],
[data-initials^="G"],
[data-initials^="M"],
[data-initials^="S"],
[data-initials^="Y"] {
   --avatar: var(--av-blue);
}

[data-initials^="B"],
[data-initials^="H"],
[data-initials^="N"],
[data-initials^="T"],
[data-initials^="Z"] {
   --avatar: var(--av-indigo);
}

[data-initials^="C"],
[data-initials^="I"],
[data-initials^="O"],
[data-initials^="U"] {
   --avatar: var(--av-ink);
   --avatar-text: #FDD041;
}

[data-initials^="D"],
[data-initials^="J"],
[data-initials^="P"],
[data-initials^="V"] {
   --avatar: var(--av-slate);
}

[data-initials^="E"],
[data-initials^="K"],
[data-initials^="Q"],
[data-initials^="W"] {
   --avatar: var(--av-azure);
}

[data-initials^="F"],
[data-initials^="L"],
[data-initials^="R"],
[data-initials^="X"] {
   --avatar: var(--av-ink);
}

/* Tables */

div.table {
   position: relative;
   overflow-x: auto;
   margin-bottom: 24px;
   overscroll-behavior-x: contain;
   container-type: inline-size;
   background: linear-gradient(90deg,var(--card) 30%,transparent) left / 40px 100% no-repeat local, linear-gradient(270deg,var(--card) 30%,transparent) right / 40px 100% no-repeat local, radial-gradient(farthest-side at 0 50%,rgb(16 15 34 / 0.16),transparent) left / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%,rgb(16 15 34 / 0.16),transparent) right / 14px 100% no-repeat scroll, var(--card);
}

table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   font-size: 0.8125rem;
}

th {
   padding: 10px 8px;
   border-bottom: 1px solid var(--card-line);
   background: var(--card-2);
   color: var(--muted);
   font-size: 0.75rem;
   font-weight: 600;
   line-height: 1.35;
   text-align: left;
   vertical-align: bottom;
}

th a {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   color: inherit;
   text-decoration: none;
}

th a::after {
   content: "\2195";
   content: "\2195" / "";
   opacity: 0.5;
   transition: opacity .15s;
}

th a:hover {
   color: var(--text);
}

th a:hover::after {
   opacity: 1;
}

th[aria-sort] {
   color: var(--text);
}

th[aria-sort] a::after {
   color: var(--accent);
   opacity: 1;
}

th[aria-sort="ascending"] a::after {
   content: "\2191";
   content: "\2191" / "";
}

th[aria-sort="descending"] a::after {
   content: "\2193";
   content: "\2193" / "";
}

div.table a:focus-visible {
   position: relative;
   z-index: 2;
   border-radius: 4px;
   background: var(--card-2);
}

td {
   padding: 12px 8px;
   border-bottom: 1px solid var(--line);
   vertical-align: top;
   transition: background-color .15s;
}

th:first-child,
td:first-child {
   padding-left: 16px;
}

th:last-child,
td:last-child {
   padding-right: 16px;
}

tbody tr:last-child > td {
   border-bottom: 0;
}

tbody tr:hover > td {
   background: var(--row-hover);
}

tbody tr:has(> td.pick input:checked) > td {
   background: var(--row-picked);
}

tbody tr:has(> td.pick input:checked) > td:first-child {
   box-shadow: inset 3px 0 0 var(--accent);
}

th.pick,
td.pick {
   width: 1%;
   white-space: nowrap;
}

td.pick input {
   margin: 0 8px 0 0;
   vertical-align: -4px;
}

td.pick label {
   color: var(--text-2);
   font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;
}

td.person {
   position: relative;
   padding-left: 44px;
   color: var(--muted);
   font-size: 0.75rem;
}

td.person::before {
   position: absolute;
   top: 11px;
   left: 8px;
   width: 28px;
   height: 28px;
   font-size: 0.75rem;
   letter-spacing: 0;
}

td.person a {
   color: var(--text);
   font-size: 0.875rem;
   font-weight: 600;
   text-decoration: none;
}

td.person a:hover {
   color: var(--link);
   text-decoration-line: underline;
}

tr:has(.tag.disabled) td.person::before {
   filter: grayscale(1);
   opacity: 0.55;
}

td.access .reach {
   display: block;
   margin-top: 6px;
   color: var(--muted);
   font: 0.75rem/1.4 var(--mono);
}

td.organisation .kind {
   display: block;
   margin-top: 2px;
   color: var(--muted);
   font-size: 0.75rem;
}

td.passkeys .number {
   display: inline-grid;
   place-items: center;
   min-width: 24px;
   height: 22px;
   padding: 0 6px;
   border-radius: 6px;
   background: var(--card-2);
   box-shadow: inset 0 0 0 1px var(--line-strong);
   font-size: 0.8125rem;
   font-weight: 600;
}

tr:has(.tag.keyless) td.passkeys .number {
   color: var(--t-keyless-fg);
   background: var(--t-keyless-bg);
   box-shadow: inset 0 0 0 1px var(--t-keyless-ring);
}

td.passkeys {
   width: calc(6.75rem + 16px);
   min-width: calc(6.75rem + 16px);
}

td.passkeys .used {
   display: block;
   margin-top: 6px;
   color: var(--muted);
   font-size: 0.75rem;
}

td.link {
   width: calc(11.5em + 16px);
   min-width: calc(11.5em + 16px);
   color: var(--muted);
   font-size: 0.75rem;
}

td.link time,
td.until {
   color: var(--text-2);
}

tr:has(.tag.expired) td.until {
   color: var(--expired-text);
   font-weight: 600;
}

td.organisation a {
   color: var(--text);
   font-weight: 600;
   text-decoration: none;
}

td.organisation a:hover {
   color: var(--link);
   text-decoration-line: underline;
}

td.organisation .slug {
   display: block;
   margin-top: 2px;
   color: var(--muted);
   font: 0.75rem/1.4 var(--mono);
}

td.domains {
   color: var(--text-2);
   font: 0.8125rem/1.5 var(--mono);
}

td.members,
td.grants {
   color: var(--text-2);
   font-weight: 600;
   white-space: nowrap;
}

td.tags:lang(el) .tag {
   white-space: normal;
   border-radius: 9px;
}

table.rows td:first-child {
   color: var(--muted);
   font-variant-numeric: tabular-nums;
}

table.rows td:last-child {
   font-weight: 600;
   white-space: nowrap;
}

tr.fine > td:last-child {
   color: var(--success);
}

tr.fine > td:last-child::before,
tr.fault > td:last-child::before {
   content: "";
   display: inline-block;
   width: 7px;
   height: 7px;
   margin: 0 7px 1px 0;
   border-radius: 50%;
   background: var(--success-fill);
   box-shadow: 0 0 0 3px var(--success-soft);
}

tr.fault > td {
   background: var(--danger-soft);
}

tr.fault > td:last-child {
   color: var(--danger-text);
   white-space: normal;
}

tr.fault > td:last-child::before {
   background: var(--danger-fill);
   box-shadow: 0 0 0 3px var(--danger-soft);
}

table.found td.person {
   color: var(--text);
   font-size: 0.875rem;
   vertical-align: middle;
}

table.found td {
   vertical-align: middle;
}

table.found td.person::before {
   top: 50%;
   margin-top: -14px;
}

/* Facts */

main > dl {
   display: grid;
   grid-template-columns: minmax(0,1fr);
   margin: 0 0 24px;
   padding: 4px 0;
}

main > dl > dt {
   padding: 12px 20px 2px;
   color: var(--muted);
   font-size: 0.8125rem;
   font-weight: 500;
}

main > dl > dd {
   margin: 0;
   padding: 0 20px 12px;
   border-bottom: 1px solid var(--line);
   font-weight: 600;
   overflow-wrap: anywhere;
}

main > dl > dd:last-of-type {
   border-bottom: 0;
}

main > pre + dl > dd:first-of-type {
   color: var(--text);
   font: 600 2rem/1.2 var(--mono);
   letter-spacing: 0.16em;
}

section > dl {
   display: grid;
   grid-template-columns: fit-content(50%) minmax(0,1fr);
   gap: 0 24px;
   margin: 0;
}

section > dl > dt,
section > dl > dd {
   padding: 10px 0;
   border-top: 1px solid var(--line);
}

section > dl > dt:first-of-type,
section > dl > dd:first-of-type {
   border-top: 0;
}

section > dl > dt {
   color: var(--muted);
}

section > dl > dd {
   margin: 0;
   font-weight: 600;
}

/* Lists */

ul.items {
   margin: 0 0 16px;
   padding: 0;
   list-style: none;
}

main > ul.items {
   padding: 0 var(--pad);
   margin-bottom: 24px;
}

ul.items > li {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px 12px;
   padding: 14px 0;
   border-top: 1px solid var(--line);
}

ul.items > li:first-child {
   border-top: 0;
}

section ul.items > li:first-child {
   padding-top: 2px;
}

section ul.items:last-child > li:last-child {
   padding-bottom: 0;
}

section div.table {
   margin: -4px calc(0px - var(--pad)) 20px;
   border-width: 1px 0;
   border-radius: 0;
   box-shadow: none;
}

section > h2 + form > div.table:first-child {
   margin-top: -16px;
   border-top: 0;
}

main > form > div.table:has(+ div.bulk),
section form > div.table:has(+ div.bulk) {
   margin-bottom: 0;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
}

ul.items > li > strong {
   flex: 1 1 auto;
   font-weight: 600;
}

ul.items > li > .told {
   order: 2;
   flex: 1 1 100%;
   color: var(--muted);
   font-size: 0.8125rem;
}

ul.items > li > form,
ul.items > li > button {
   order: 1;
   flex: 0 0 auto;
}

ul.items > li > form + form {
   order: 3;
   flex: 1 1 100%;
   margin-top: 6px;
}

ul.items > li:has(> a > strong) > form + form {
   order: 1;
   flex: 0 0 auto;
   margin-top: 0;
}

ul.items form {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   gap: 8px;
}

ul.items form > p {
   margin: 0;
}

ul.items form > p:has(> input) {
   flex: 0 1 18rem;
}

ul.items form > p:has(> input + button) {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px 10px;
   flex-basis: auto;
}

ul.items form input[type="text"] {
   width: 100%;
}

ul.items button {
   min-height: 34px;
   padding: 6px 13px;
   font-size: 0.8125rem;
}

ul.items form p > label:first-child {
   margin-bottom: 4px;
   font-size: 0.75rem;
   font-weight: 500;
}

ul.items form p:has(> input + button) > label:first-child {
   margin: 0;
   color: var(--muted);
   font-size: 0.8125rem;
}

ul.items form p:has(> input + button) > input {
   min-height: 34px;
   padding-block: 5px;
}

ul.items > li > a[data-initials] {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: var(--text);
   font-weight: 600;
   text-decoration: none;
}

ul.items > li > a[data-initials]:has(> strong) {
   display: grid;
   grid-template-columns: auto minmax(0,1fr);
   align-items: center;
   column-gap: 12px;
   flex: 1 1 18rem;
}

ul.items > li > a:has(> strong)::before {
   grid-row: 1 / span 2;
   width: 36px;
   height: 36px;
}

ul.items > li > a:has(> strong) > strong {
   font-weight: 600;
}

ul.items > li > a:has(> strong) > .told {
   color: var(--muted);
   font-size: 0.8125rem;
   font-weight: 400;
}

@supports not selector(:has(*)) {
   .told time {
      white-space: normal;
   }
}

ul.items > li > a:hover strong,
ul.items > li > a[data-initials]:hover {
   color: var(--link);
}

ul.items > li > .tags {
   margin-left: auto;
}

ul.items > li:not(:has(> *)) {
   font-family: var(--mono);
   font-size: 0.8125rem;
}

ul.items > li > a:only-child:not([data-initials]) {
   font-weight: 500;
}

ul.log {
   margin: 0;
   padding: 0;
   list-style: none;
   font-size: 0.8125rem;
}

main > ul.log {
   padding: 6px 0;
   margin-bottom: 24px;
}

section > ul.log {
   margin: -4px calc(0px - var(--pad)) -20px;
   padding-bottom: 6px;
}

ul.log > li {
   position: relative;
   display: grid;
   grid-template-columns: auto minmax(0,1fr);
   align-items: baseline;
   gap: 2px 10px;
   padding: 10px var(--pad) 10px 40px;
}

ul.log > li + li {
   border-top: 1px solid var(--line);
}

ul.log > li::before {
   content: "";
   position: absolute;
   top: 16px;
   left: 17px;
   z-index: 1;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--card);
   box-shadow: inset 0 0 0 2px var(--accent);
}

ul.log > li::after {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: 21px;
   width: 1px;
   background: var(--line-strong);
}

ul.log > li:first-child::after {
   top: 20px;
}

ul.log > li:last-child::after {
   bottom: calc(100% - 20px);
}

ul.log > li:only-child::after {
   display: none;
}

ul.log .event {
   grid-column: 1;
   grid-row: 1;
   justify-self: start;
   padding: 1px 7px;
   border-radius: 6px;
   background: var(--accent-soft);
   color: var(--accent-text);
   font: 500 0.75rem/1.5 var(--mono);
}

ul.log .what {
   grid-column: 2;
   grid-row: 1;
   color: var(--text);
}

ul.log time {
   grid-column: 1;
   grid-row: 2;
   color: var(--muted);
   font: 0.75rem/1.5 var(--mono);
}

ul.log .by {
   grid-column: 2;
   grid-row: 2;
   color: var(--muted);
   font-size: 0.75rem;
}

ul.log:not(:has(li))::before {
   content: "\2013";
   content: "\2013" / "";
   display: block;
   padding: 10px var(--pad);
   color: var(--muted);
}

section.due > ul {
   margin: 0 0 16px;
   padding: 0;
   list-style: none;
}

section.due > h3 {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0 0 4px;
}

section.due > h3::before {
   content: "";
   flex: none;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--c-expired);
   box-shadow: 0 0 0 3px rgb(249 115 22 / 0.18);
}

section.due > ul > li {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 2px 6px;
   padding: 8px 0;
   border-bottom: 1px solid var(--line);
   color: var(--muted);
   font-size: 0.8125rem;
}

section.due > ul > li:last-child {
   border-bottom: 0;
}

section.due > ul > li > time {
   display: contents;
}

section.due > ul > li > a {
   color: var(--text);
   font-size: 0.875rem;
   font-weight: 600;
}

section.due > ul > li > a:hover {
   color: var(--link);
}

section.due .when {
   margin-left: auto;
   padding: 1px 8px;
   border-radius: 999px;
   background: var(--card-2);
   box-shadow: inset 0 0 0 1px var(--line-strong);
   color: var(--text-2);
   font-size: 0.75rem;
}

ul.figures {
   display: grid;
   grid-template-columns: repeat(2,minmax(0,1fr));
   gap: 12px;
   margin: 0 0 24px;
   padding: 0;
   list-style: none;
}

ul.figures > li:first-child {
   grid-column: 1 / -1;
}

ul.figures a {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   gap: 2px;
   height: 100%;
   min-height: 92px;
   padding: 14px 16px;
   border: 1px solid var(--card-line);
   border-radius: var(--radius);
   background: var(--sheen), var(--card);
   color: var(--text-2);
   font-size: 0.8125rem;
   font-weight: 500;
   line-height: 1.3;
   text-decoration: none;
   box-shadow: var(--shadow);
   transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
}

ul.figures a:hover {
   border-color: var(--accent-line);
   box-shadow: var(--shadow-l);
   transform: translateY(-2px);
}

ul.figures strong {
   color: var(--text);
   font: 600 1.75rem/1.1 var(--font-display);
   letter-spacing: -0.02em;
   font-variant-numeric: tabular-nums;
}

ul.figures > li:not(:first-child) a::before {
   content: "";
   position: absolute;
   top: 16px;
   right: 16px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--dot);
   box-shadow: 0 0 0 4px color-mix(in srgb,var(--dot) 18%,transparent);
}

ul.figures > li:first-child a {
   min-height: 120px;
   border-color: rgb(140 175 255 / 0.5);
   color: #FFFFFF;
   background: repeating-radial-gradient(circle at 100% 0%,transparent 0 23px,rgb(255 255 255 / 0.06) 23px 24px), radial-gradient(120% 120% at 100% 0%,rgb(120 165 255 / 0.55),transparent 60%), linear-gradient(150deg,#2D6BFF,#175CF2 40%,#0E3FB4);
   box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 1px 2px rgb(16 15 34 / 0.2), 0 24px 44px -20px rgb(23 92 242 / 0.75);
}

ul.figures > li:first-child strong {
   color: #FFFFFF;
   font-size: 2.75rem;
}

ul.figures > li:first-child a::after {
   content: "";
   position: absolute;
   top: 18px;
   right: 18px;
   width: 46px;
   height: 8px;
   background: linear-gradient(90deg,#FFFFFF 75%,var(--yellow) 75%);
   -webkit-mask-image: var(--cells);
   mask-image: var(--cells);
}

ul.figures > li.zero a {
   border-style: dashed;
   border-color: var(--line-strong);
   background: var(--card-2);
   color: var(--muted);
   box-shadow: none;
}

ul.figures > li.zero a:hover {
   border-color: var(--accent-line);
   box-shadow: var(--shadow);
}

ul.figures > li.zero strong {
   color: var(--muted);
}

ul.figures > li.zero a::before {
   background: none;
   box-shadow: inset 0 0 0 1.5px var(--dot);
}

ul.figures > li.zero a::after {
   background: var(--line-strong);
}

/* Dock */

div.bulk {
   --card: rgb(255 255 255 / 0.05);
   --card-2: rgb(255 255 255 / 0.08);
   --line: rgb(255 255 255 / 0.10);
   --line-strong: rgb(255 255 255 / 0.18);
   --control-line: rgb(255 255 255 / 0.56);
   --control-hover: rgb(255 255 255 / 0.8);
   --field: #0C0B20;
   --text: #FFFFFF;
   --text-2: rgb(255 255 255 / 0.84);
   --muted: rgb(255 255 255 / 0.68);
   --accent: #7FA4FF;
   --accent-soft: rgb(91 140 255 / 0.20);
   --accent-line: rgb(127 164 255 / 0.5);
   --accent-text: #D2DFFF;
   --focus: #FDD041;
   --focus-halo: rgb(253 208 65 / 0.22);
   --danger: #FF8B82;
   --danger-soft: rgb(240 68 56 / 0.20);
   --danger-text: #FFB8B2;
   --shadow-s: none;
   align-items: flex-end;
   gap: 16px 20px;
   margin-bottom: 24px;
   padding: 20px var(--pad) 22px;
   border: 1px solid var(--dock-line);
   border-radius: var(--radius);
   background: radial-gradient(30rem 10rem at 100% 0,rgb(46 107 255 / 0.30),transparent 70%), radial-gradient(20rem 8rem at 0 100%,rgb(253 208 65 / 0.07),transparent 70%), var(--dock);
   color: var(--text);
   box-shadow: var(--shadow);
   color-scheme: dark;
}

div.bulk > fieldset {
   margin: 0;
}

div.bulk > p {
   margin: 0;
}

div.bulk > p:has(> input) {
   flex: 0 0 auto;
}

div.bulk > p:has(> input) > label:first-child {
   color: var(--text-2);
}

div.bulk > p.confirm {
   align-self: center;
}

div.bulk input[type="date"] {
   min-height: 40px;
   box-shadow: none;
}

main form > div.table + div.bulk {
   border-top: 0;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   box-shadow: var(--shadow), inset 0 1px 0 rgb(255 255 255 / 0.06);
}

section form > div.table + div.bulk {
   margin: 0 calc(0px - var(--pad)) -20px;
   border-width: 0;
   border-radius: 0;
   box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

/* Link and letter */

pre {
   margin: 0 0 16px;
   padding: 14px 16px;
   border: 1px solid var(--line-strong);
   border-radius: 12px;
   background: var(--code);
   color: var(--text);
   font: 500 0.8125rem/1.6 var(--mono);
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   -webkit-user-select: all;
   user-select: all;
}

body.signed > main > pre {
   padding: 18px 20px;
   border: 1px solid var(--accent-line);
   background: var(--card);
   font-size: 0.875rem;
   box-shadow: var(--shadow), inset 3px 0 0 var(--accent);
}

section.letter {
   padding-bottom: 24px;
}

section.letter > :not(h2) {
   max-width: 42rem;
}

section.letter > p {
   line-height: 1.7;
}

p.subject {
   padding: 10px 14px;
   border-radius: 10px;
   background: var(--card-2);
   box-shadow: inset 0 0 0 1px var(--line);
   font-weight: 600;
}

/* Status */

#status {
   position: fixed;
   bottom: 20px;
   left: 50%;
   z-index: 60;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px 14px;
   width: max-content;
   max-width: min(40rem,calc(100vw - 32px));
   margin: 0;
   padding: 12px 16px 12px 42px;
   overflow: hidden;
   border-radius: 14px;
   background: var(--toast);
   color: #FFFFFF;
   font-size: 0.875rem;
   font-weight: 500;
   text-wrap: pretty;
   transform: translateX(-50%);
   box-shadow: inset 0 0 0 1px var(--toast-line), 0 18px 40px -12px rgb(16 15 34 / 0.55);
   -webkit-backdrop-filter: blur(12px) saturate(1.4);
   backdrop-filter: blur(12px) saturate(1.4);
   animation: rise .35s var(--ease) both;
}

#status::before {
   content: "";
   position: absolute;
   top: 18px;
   left: 18px;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--yellow);
   box-shadow: 0 0 0 4px rgb(253 208 65 / 0.18), 0 0 12px rgb(253 208 65 / 0.6);
}

#status::after {
   content: "";
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   height: 2px;
   background: var(--charge);
   opacity: 0.9;
}

#status[data-state="waiting"]::before {
   animation: pulse 1.4s ease-in-out infinite;
}

#status:is([data-state="refusal"],[data-state="unlocked"]) {
   background: var(--toast-alarm);
   box-shadow: inset 0 0 0 1px rgb(255 120 108 / 0.55), 0 18px 40px -12px rgb(16 15 34 / 0.55);
}

#status:is([data-state="refusal"],[data-state="unlocked"])::before {
   background: #FF6B5E;
   box-shadow: 0 0 0 4px rgb(255 107 94 / 0.2), 0 0 12px rgb(255 107 94 / 0.6);
}

#status:is([data-state="refusal"],[data-state="unlocked"])::after {
   background: linear-gradient(90deg,#F04438,#FF8B82);
}

#status[data-state="confirmed"] {
   box-shadow: inset 0 0 0 1px rgb(74 222 155 / 0.4), 0 18px 40px -12px rgb(16 15 34 / 0.55);
}

#status[data-state="confirmed"]::before {
   background: #4ADE9B;
   box-shadow: 0 0 0 4px rgb(74 222 155 / 0.18), 0 0 12px rgb(74 222 155 / 0.6);
}

#status:empty {
   padding: 0;
   border: 0;
   width: 0;
   height: 0;
   overflow: hidden;
   background: none;
   box-shadow: none;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
   animation: none;
}

#status:empty::before,
#status:empty::after {
   content: none;
}

#status button {
   --focus: #9DBBFF;
   min-height: 32px;
   padding: 5px 14px;
   font-size: 0.8125rem;
}

@keyframes rise {
   from {
      opacity: 0;
      transform: translate(-50%,10px);
   }
}

@keyframes pulse {
   0%,
   100% {
      opacity: 1;
      box-shadow: 0 0 0 3px rgb(253 208 65 / 0.3), 0 0 12px rgb(253 208 65 / 0.8);
   }
   50% {
      opacity: 0.55;
      box-shadow: 0 0 0 7px rgb(253 208 65 / 0.06), 0 0 18px rgb(253 208 65 / 0.4);
   }
}

@keyframes charge {
   from {
      background-size: 100% 100%, 0% 100%, 100% 100%;
   }
}

/* Gate */

body.gate {
   position: relative;
   overflow-x: clip;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   padding: 56px 16px 64px;
   background: radial-gradient(60rem 34rem at 50% -8%,rgb(23 92 242 / 0.50),transparent 64%), radial-gradient(46rem 26rem at 50% 116%,rgb(253 208 65 / 0.14),transparent 62%), radial-gradient(30rem 30rem at 0% 100%,rgb(23 92 242 / 0.16),transparent 70%), linear-gradient(180deg,#17144A,#0B0A1A 64%);
}

body.gate::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgb(255 255 255 / 0.045) 1px,transparent 1px), linear-gradient(90deg,rgb(255 255 255 / 0.045) 1px,transparent 1px);
   background-size: 44px 44px;
   background-position: center top;
   -webkit-mask-image: radial-gradient(ellipse 70% 52% at 50% 24%,#000,transparent);
   mask-image: radial-gradient(ellipse 70% 52% at 50% 24%,#000,transparent);
   pointer-events: none;
}

body.gate > header {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: min(100%,28rem);
   padding: 0 0 28px;
}

body.gate > header::after {
   content: "";
   display: block;
   width: 15rem;
   height: 38px;
   margin: 30px 8px 0 0;
   padding: 4px;
   border: 2px solid rgb(255 255 255 / 0.38);
   border-radius: 10px;
   background: repeating-linear-gradient(90deg,transparent 0 calc(100% / 24 - 3px),#0D0C24 calc(100% / 24 - 3px) calc(100% / 24)) left / 100% 100% no-repeat content-box, linear-gradient(90deg,#175CF2,#4F86FF 85.7%,#FDD041 85.7%) left / 87.5% 100% no-repeat content-box, linear-gradient(rgb(255 255 255 / 0.08),rgb(255 255 255 / 0.08)) left / 100% 100% no-repeat content-box, #0D0C24;
   box-shadow: 14px 0 0 -10px rgb(255 255 255 / 0.38), 0 0 0 1px rgb(0 0 0 / 0.2), 0 0 44px -6px rgb(23 92 242 / 0.65);
   animation: charge 1.4s var(--ease) .2s both;
}

body.gate .brand a {
   align-items: center;
   gap: 10px;
}

body.gate .brand svg {
   width: 10.5rem;
}

body.gate .brand span {
   color: rgb(255 255 255 / 0.7);
   font-size: 0.8125rem;
   letter-spacing: 0.03em;
}

body.gate .languages {
   position: absolute;
   top: 16px;
   right: 16px;
}

body.gate > main {
   position: relative;
   width: min(100%,28rem);
   padding: 32px 28px 28px;
   border-radius: 20px;
   background: var(--sheen), var(--card);
   box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 30px 80px -24px rgb(0 0 0 / 0.7), 0 0 120px -30px rgb(23 92 242 / 0.55);
}

body.gate > main::before {
   content: "";
   position: absolute;
   top: -1px;
   right: 28px;
   left: 28px;
   height: 2px;
   border-radius: 2px;
   background: linear-gradient(90deg,transparent,rgb(120 160 255 / 0.95) 25%,rgb(253 208 65 / 0.95) 75%,transparent);
   box-shadow: 0 0 16px 1px rgb(91 140 255 / 0.55);
}

body.gate > main::after {
   content: "";
   position: absolute;
   top: 0;
   left: 50%;
   width: 100vw;
   height: 1px;
   margin-left: -50vw;
   background: linear-gradient(90deg,transparent 4%,rgb(110 150 255 / 0.55) 32%,rgb(253 208 65 / 0.5) 68%,transparent 96%);
   -webkit-mask-image: linear-gradient(90deg,#000 calc(50% - 14rem - 24px),transparent calc(50% - 14rem) calc(50% + 14rem),#000 calc(50% + 14rem + 24px));
   mask-image: linear-gradient(90deg,#000 calc(50% - 14rem - 24px),transparent calc(50% - 14rem) calc(50% + 14rem),#000 calc(50% + 14rem + 24px));
   pointer-events: none;
}

body.gate > main > h1 {
   margin-bottom: 12px;
   font-size: 1.75rem;
}

body.gate > main > h1::after {
   display: none;
}

body.gate > main > p:not([class]):not(:has(> button, > a.button)) {
   color: var(--text-2);
}

body.gate main p > button,
body.gate main p > a.button {
   width: 100%;
   min-height: 48px;
   font-size: 0.9375rem;
}

body.gate > main > p.hint {
   margin: 20px 0 0;
   padding-top: 16px;
   border-top: 1px solid var(--line);
   font-size: 0.8125rem;
   line-height: 1.6;
}

body.gate main section {
   margin: 20px 0 0;
   padding: 20px 0 0;
   overflow: visible;
   border: 0;
   border-top: 1px solid var(--line);
   border-radius: 0;
   background: none;
   box-shadow: none;
}

body.gate main section > h2 {
   margin: 0 0 8px;
   padding: 0;
   border: 0;
}

body.gate main section > h2::after {
   content: none;
}

body.gate main section > p:not(:has(> button)) {
   color: var(--text-2);
   font-size: 0.875rem;
}

#code {
   width: 100%;
   min-height: 56px;
   padding-left: 0.6em;
   font: 600 1.5rem/1 var(--mono);
   letter-spacing: 0.6em;
   text-align: center;
}

body.gate #status {
   position: relative;
   top: auto;
   bottom: auto;
   left: auto;
   width: auto;
   max-width: none;
   margin: 16px 0 0;
   color: var(--text);
   background: var(--card-2);
   box-shadow: inset 0 0 0 1px var(--line-strong);
   transform: none;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
   animation: none;
}

body.gate #status::before {
   background: #E2A400;
   box-shadow: 0 0 0 4px rgb(226 164 0 / 0.18);
}

body.gate #status:is([data-state="refusal"],[data-state="unlocked"]) {
   color: var(--danger-text);
   background: var(--danger-soft);
   box-shadow: inset 0 0 0 1px var(--danger-line);
}

body.gate #status:is([data-state="refusal"],[data-state="unlocked"])::before {
   background: var(--danger-fill);
   box-shadow: 0 0 0 4px rgb(240 68 56 / 0.18);
}

body.gate #status:empty {
   margin: 0;
   box-shadow: none;
   background: none;
}

/* Wider */

@media (min-width: 40rem) {
   :root {
      --pad: 24px;
   }

   body.signed > main {
      padding: 32px 28px 96px;
   }

   h1 {
      font-size: 2.25rem;
   }

   main section > h2 {
      padding: 16px var(--pad) 14px;
      margin-bottom: 20px;
   }

   main section {
      padding-bottom: 24px;
   }

   main > form:has(> p > input) {
      padding: 24px;
   }

   section > h2 + form > div.table:first-child {
      margin-top: -20px;
   }

   section > ul.log {
      margin: -8px calc(0px - var(--pad)) -24px;
   }

   ul.log > li {
      grid-template-columns: 10.5rem 10rem minmax(0,1fr) auto;
      padding: 10px var(--pad) 10px 48px;
   }

   ul.log > li::before {
      left: 25px;
   }

   ul.log > li::after {
      left: 29px;
   }

   ul.log time,
   ul.log .event,
   ul.log .what,
   ul.log .by {
      grid-row: 1;
   }

   ul.log time {
      grid-column: 1;
   }

   ul.log .event {
      grid-column: 2;
   }

   ul.log .what {
      grid-column: 3;
   }

   ul.log .by {
      grid-column: 4;
      white-space: nowrap;
   }

   main p:has(> .hint) {
      grid-template-columns: minmax(0,26rem) auto;
   }

   main > form.filters > p:has(> .hint) {
      grid-template-columns: minmax(0,1fr) auto;
   }

   main p > .hint {
      margin-top: 0;
   }

   ul.figures {
      grid-template-columns: repeat(4,minmax(0,1fr));
   }

   main > dl {
      grid-template-columns: repeat(2,minmax(0,1fr));
      grid-auto-flow: row dense;
      padding: 0;
   }

   main > dl > dt:nth-of-type(odd),
   main > dl > dd:nth-of-type(odd) {
      grid-column: 1;
   }

   main > dl > dt:nth-of-type(even),
   main > dl > dd:nth-of-type(even) {
      grid-column: 2;
      border-left: 1px solid var(--line);
   }

   main > dl > dt {
      padding: 14px 24px 2px;
   }

   main > dl > dd {
      padding: 0 24px 14px;
   }

   main > dl > dd:last-of-type {
      border-bottom: 1px solid var(--line);
   }

   div.table:has(td.tags) {
      scroll-padding-inline: 10rem 11rem;
   }

   section.due {
      display: grid;
      grid-template-columns: minmax(9rem,13rem) minmax(0,1fr);
      column-gap: 24px;
   }

   section.due > h2 {
      grid-column: 1 / -1;
   }

   section.due > h3 {
      grid-column: 1;
      align-items: flex-start;
      margin: 0;
      padding: 12px 0;
      border-top: 1px solid var(--line-strong);
   }

   section.due > h3::before {
      margin-top: 5px;
   }

   section.due > ul {
      grid-column: 2;
      margin: 0;
      padding: 2px 0;
      border-top: 1px solid var(--line-strong);
   }

   section.due > h3:first-of-type,
   section.due > h3:first-of-type + ul {
      border-top: 0;
   }

   body.signed > main:has(> ul.figures)::before {
      height: 12.5rem;
   }

   section form > div.table + div.bulk {
      margin-bottom: -24px;
   }
}

@media (min-width: 40rem) and (max-width: 74.99rem) {
   main > dl > dd:nth-of-type(odd):nth-last-of-type(-n+2),
   main > dl > dd:nth-of-type(odd):nth-last-of-type(-n+2) ~ dd {
      border-bottom: 0;
   }
}

@container (max-width: 73.5rem) {
   th.pick,
   td.pick {
      position: sticky;
      left: 0;
      z-index: 1;
      background: var(--card);
      box-shadow: inset -1px 0 0 var(--line), 10px 0 14px -12px rgb(16 15 34 / 0.3);
   }

   th.pick {
      background: var(--card-2);
   }

   th.condition,
   td.tags {
      position: sticky;
      right: 0;
      z-index: 1;
      background: var(--card);
      box-shadow: inset 1px 0 0 var(--line), -10px 0 14px -12px rgb(16 15 34 / 0.3);
   }

   th.condition {
      background: var(--card-2);
   }

   tbody tr:hover > td.pick,
   tbody tr:hover > td.tags {
      background: var(--row-hover);
   }

   tbody tr:has(> td.pick input:checked) > td.pick,
   tbody tr:has(> td.pick input:checked) > td.tags {
      background: var(--row-picked);
   }

   tbody tr:has(> td.pick input:checked) > td.pick {
      box-shadow: inset 3px 0 0 var(--accent), inset -1px 0 0 var(--line), 10px 0 14px -12px rgb(16 15 34 / 0.3);
   }
}

@container (max-width: 35.99rem) {
   th.pick,
   td.pick,
   th.condition,
   td.tags {
      position: static;
      box-shadow: none;
   }
}

@container (max-width: 46.75rem) {
   table.rows td:nth-child(n+2):nth-last-child(n+2),
   table.rows th:nth-child(n+2):nth-last-child(n+2) {
      padding-right: 4px;
      padding-left: 4px;
   }
}

@media (max-width: 56.24rem) {
   .menu:has(a:focus-visible) ul {
      flex-wrap: wrap;
      width: auto;
   }
}

@media (max-width: 56.24rem) and (min-height: 32rem) {
   html {
      scroll-padding-top: 76px;
   }

   body.signed > header {
      position: sticky;
      top: -48px;
   }

   body.signed > header:focus-within {
      top: 0;
   }
}

@media (min-width: 56.25rem) {
   body.signed {
      display: grid;
      grid-template-columns: var(--side-w) minmax(0,1fr);
      background: linear-gradient(90deg,var(--side) calc(var(--side-w) - 1px),var(--side-edge) calc(var(--side-w) - 1px) var(--side-w),transparent var(--side-w)), var(--glow);
      background-repeat: no-repeat;
   }

   body.signed > header {
      position: sticky;
      top: 0;
      grid-column: 1;
      grid-row: 1;
      align-self: start;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      height: 100vh;
      padding: 22px 12px 16px;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: rgb(255 255 255 / 0.2) transparent;
      background: radial-gradient(140% 46% at 0% 0%,rgb(23 92 242 / 0.28),transparent 60%), radial-gradient(120% 30% at 100% 100%,rgb(253 208 65 / 0.06),transparent 70%), linear-gradient(180deg,var(--side-glow),var(--side) 55%);
      box-shadow: inset -1px 0 0 var(--side-line), var(--side-shadow);
   }

   body.signed > main {
      grid-column: 2;
      grid-row: 1;
      justify-self: center;
      width: 100%;
      max-width: 86rem;
      padding: 36px 24px 96px;
   }

   body.signed .brand {
      margin: 0 0 16px;
      padding: 2px 6px 20px;
      border-bottom: 1px solid var(--side-line);
   }

   body.signed .brand svg {
      width: 8.75rem;
   }

   body.signed .brand span {
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip: auto;
      clip-path: none;
      white-space: normal;
   }

   .menu {
      margin: 0;
      overflow: visible;
      -webkit-mask-image: none;
      mask-image: none;
   }

   .menu ul {
      flex-direction: column;
      gap: 2px;
      width: auto;
      padding: 0;
   }

   .menu li:nth-child(2),
   .menu li:nth-child(4),
   .menu li:nth-child(6),
   .menu li:nth-child(7),
   .menu li:nth-child(9) {
      margin-top: 10px;
   }

   .menu a {
      gap: 11px;
      min-height: 38px;
      padding: 8px 10px;
      border-radius: 10px;
      font-size: 0.875rem;
      white-space: normal;
   }

   .menu a[aria-current] {
      scroll-initial-target: none;
   }

   .menu .icon {
      width: 20px;
      height: 20px;
   }

   .menu a[aria-current="page"]::before {
      content: "";
      position: absolute;
      top: 9px;
      bottom: 9px;
      left: -12px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: linear-gradient(180deg,#7FA4FF 70%,var(--yellow) 70%);
      box-shadow: 0 0 12px 1px rgb(91 140 255 / 0.9);
   }

   .who {
      margin-top: auto;
      padding-top: 20px;
   }

   .who a {
      width: auto;
      height: auto;
      min-height: 58px;
      overflow: visible;
      padding: 10px 28px 10px 54px;
      border-radius: 12px;
      background: rgb(255 255 255 / 0.04);
      box-shadow: inset 0 0 0 1px var(--side-line);
      color: #FFFFFF;
      font-size: 0.8125rem;
      font-weight: 600;
      line-height: 1.35;
      white-space: normal;
      text-indent: 0;
      transition: background-color .15s;
   }

   .who strong {
      display: block;
      font-weight: 600;
   }

   .who .caption {
      display: block;
      color: var(--side-dim);
      font-size: 0.75rem;
      font-weight: 500;
   }

   .who .account {
      display: block;
   }

   .who .account::before {
      content: "(";
      content: "(" / "";
   }

   .who .account::after {
      content: ")";
      content: ")" / "";
   }

   .who a::before {
      inset: auto;
      top: 50%;
      left: 10px;
      width: 34px;
      height: 34px;
      margin-top: -17px;
      font-size: 0.75rem;
   }

   .who a::after {
      content: "\203A";
      content: "\203A" / "";
      position: absolute;
      top: 50%;
      right: 12px;
      margin-top: -10px;
      color: var(--side-dim);
      font-size: 1.125rem;
      line-height: 1;
   }

   .who a:hover {
      background: rgb(255 255 255 / 0.08);
   }

   .who a[aria-current="page"] {
      background: rgb(70 128 255 / 0.18);
      box-shadow: inset 0 0 0 1px rgb(140 175 255 / 0.34);
   }

   body.signed .languages {
      margin-top: 10px;
   }

   body.signed .languages li {
      flex: 1 1 0;
   }

   body.signed .languages a {
      padding: 5px 8px;
   }

   #status {
      left: calc(50% + var(--side-w) / 2);
   }

   body.signed > main:has(> ul.figures)::before {
      height: 13rem;
   }
}

@media (min-width: 64rem) {
   body.signed section > form > p:has(> label:first-child),
   body.signed > main > form:not(.filters) > p:has(> label:first-child) {
      display: grid;
      grid-template-columns: var(--label-w) minmax(0,26rem) auto;
      align-items: center;
      column-gap: 16px;
   }

   body.signed section > form > p:has(> label:first-child):has(> textarea) {
      grid-template-columns: var(--label-w) minmax(0,40rem);
      align-items: start;
   }

   body.signed section > form > p > label:first-child,
   body.signed > main > form:not(.filters) > p > label:first-child {
      grid-column: 1;
      margin: 0;
   }

   body.signed section > form > p:has(> textarea) > label:first-child {
      padding-top: 10px;
   }

   body.signed > main > form:not(.filters) > p > .hint {
      margin: 0;
   }

   body.signed section > form > fieldset,
   body.signed > main > form:not(.filters) > fieldset {
      padding-left: calc(var(--label-w) + 16px);
   }

   body.signed section > form > fieldset > legend,
   body.signed > main > form:not(.filters) > fieldset > legend {
      position: absolute;
      top: 9px;
      left: 0;
      width: var(--label-w);
   }

   body.signed section > form > fieldset:has(> input[type="radio"]:nth-of-type(13)) {
      margin-top: 0;
      margin-left: calc(var(--label-w) + 16px);
      padding-left: 6px;
   }

   body.signed section > form > fieldset:has(> input[type="radio"]:nth-of-type(13)) > legend {
      top: auto;
      left: auto;
      margin: 3px 0 0 calc(-7px - 16px - var(--label-w));
   }

   body.signed section > form:has(> p > label:first-child,> fieldset) > p:has(> button:only-child),
   body.signed > main > form:not(.filters):has(> p > label:first-child,> fieldset) > p:has(> button:only-child) {
      margin-left: calc(var(--label-w) + 16px);
   }

   body.signed main section > form:has(> p.confirm) > p:has(> button:only-child),
   body.signed main section > form:has(> p > label:first-child) > p:has(> button:only-child),
   body.signed > main > form:not(.filters):has(> p.confirm) > p:has(> button:only-child) {
      padding-top: 18px;
      border-top: 1px solid transparent;
      border-image: linear-gradient(var(--line) 0 1px,var(--card-2) 1px) 1 0 0 fill / 1px 0 0 / 0 100vw 24px;
   }

   body.signed main section > form:has(> p.confirm) > p.confirm,
   body.signed > main > form:not(.filters):has(> p.confirm) > p.confirm {
      padding-top: 18px;
   }
}

@media (min-width: 75rem) {
   h1 {
      font-size: 2.5rem;
   }

   body.signed > main {
      padding-top: 40px;
   }

   ul.figures {
      grid-template-columns: repeat(6,minmax(0,1fr));
   }

   ul.figures > li:first-child {
      grid-column: span 2;
      grid-row: span 2;
   }

   ul.figures > li:first-child strong {
      font-size: 3.75rem;
   }

   main > dl {
      grid-template-columns: repeat(3,minmax(0,1fr));
   }

   main > dl > dt:nth-of-type(n),
   main > dl > dd:nth-of-type(n) {
      border-left: 0;
   }

   main > dl > dt:nth-of-type(3n+1),
   main > dl > dd:nth-of-type(3n+1) {
      grid-column: 1;
   }

   main > dl > dt:nth-of-type(3n+2),
   main > dl > dd:nth-of-type(3n+2) {
      grid-column: 2;
      border-left: 1px solid var(--line);
   }

   main > dl > dt:nth-of-type(3n+3),
   main > dl > dd:nth-of-type(3n+3) {
      grid-column: 3;
      border-left: 1px solid var(--line);
   }

   main > dl > dd:nth-of-type(3n+1):nth-last-of-type(-n+3),
   main > dl > dd:nth-of-type(3n+1):nth-last-of-type(-n+3) ~ dd {
      border-bottom: 0;
   }

   body.signed > main > section.due {
      flex: 2 1 36rem;
   }

   body.signed > main > section.due + section {
      flex: 1 1 18rem;
   }

   body.signed > main:has(> ul.figures)::before {
      height: 11rem;
   }
}

@media (min-width: 80rem) {
   body.signed > main:has(> dl + section) {
      display: grid;
      grid-template-columns: minmax(0,1fr) 19rem;
      column-gap: 24px;
      align-items: start;
   }

   body.signed > main:has(> dl + section) > * {
      grid-column: 1;
   }

   body.signed > main:has(> dl + section) > h1 {
      grid-column: 1 / -1;
   }

   body.signed > main:has(> dl + section) > dl {
      grid-column: 2;
      grid-row: 2 / span 40;
      grid-template-columns: minmax(0,1fr);
      padding: 6px 0;
      background: linear-gradient(90deg,#175CF2 75%,#FDD041 75%) top / 100% 3px no-repeat, var(--sheen), var(--card);
   }

   body.signed > main:has(> dl + section) > dl > :is(dt,dd) {
      grid-column: 1;
      border-left: 0;
   }

   body.signed > main:has(> dl + section) > dl > dt {
      padding: 12px 20px 2px;
   }

   body.signed > main:has(> dl + section) > dl > dd {
      padding: 0 20px 12px;
      border-bottom: 1px solid var(--line);
   }

   body.signed > main:has(> dl + section) > dl > dd:last-of-type {
      border-bottom: 0;
   }
}

@media (min-width: 80rem) and (min-height: 40rem) {
   body.signed > main:has(> dl + section) > dl {
      position: sticky;
      top: 24px;
      max-height: calc(100vh - 48px);
      overflow-y: auto;
      scrollbar-width: thin;
   }
}

@media (min-width: 100rem) {
   :root {
      --side-w: 15rem;
   }

   body.signed > main {
      padding: 44px 40px 96px;
   }
}

/* Motion, contrast and print */

@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
   }
}

@media (forced-colors: active) {
   fieldset > input[type="radio"]:checked + label {
      border: 2px solid Highlight;
   }

   fieldset > input[type="radio"]:checked + label::before {
      background: Highlight;
   }

   .tag,
   .role,
   #status:not(:empty) {
      border: 1px solid CanvasText;
   }

   .menu a[aria-current],
   .languages a[aria-current="true"],
   .who a[aria-current="page"] {
      outline: 2px solid Highlight;
   }

   body > header {
      --logo-mark: CanvasText;
   }

   .menu .icon,
   .menu a:hover .icon,
   .menu a[aria-current] .icon {
      color: inherit;
   }

   h1::after,
   body.gate > header::after {
      display: none;
   }

   body.signed > main:has(> ul.figures)::before {
      display: none;
   }
}

@media print {
   :root {
      --card: #FFFFFF;
      --card-2: #FFFFFF;
      --card-line: #999999;
      --line: #CCCCCC;
      --line-strong: #999999;
      --field: #FFFFFF;
      --text: #000000;
      --text-2: #222222;
      --muted: #444444;
      --code: #FFFFFF;
      --sheen: linear-gradient(transparent,transparent);
   }

   html,
   body.signed,
   body.gate {
      background: #FFFFFF;
      color: #000000;
   }

   body.signed,
   body.gate {
      display: block;
      padding: 0;
   }

   body.gate::before,
   body.gate > header::after,
   body.gate > main::after,
   .menu,
   .who,
   .languages,
   #status,
   #sign-out,
   #sign-in,
   #add {
      display: none;
   }

   body.signed > header,
   body.gate > header {
      --logo-mark: #100F22;
      position: static;
      display: block;
      width: auto;
      height: auto;
      padding: 0 0 12px;
      background: none;
      box-shadow: none;
      color: #000000;
   }

   body.signed .brand,
   body.gate .brand {
      margin: 0;
      padding: 0;
      border: 0;
   }

   body.signed .brand span,
   body.gate .brand span {
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      clip: auto;
      clip-path: none;
      color: #000000;
   }

   body.gate > main::before {
      display: none;
   }

   body.signed > main,
   body.gate > main {
      display: block;
      width: auto;
      max-width: none;
      padding: 0;
      box-shadow: none;
   }

   body.signed > main:has(> ul.figures) > h1 {
      color: #000000;
   }

   body.signed > main:has(> ul.figures)::before {
      display: none;
   }

   main section,
   main > form,
   main > dl,
   main > ul.items,
   main > ul.log,
   div.table,
   div.bulk,
   ul.figures a {
      margin-bottom: 12px;
      border: 1px solid #999999;
      background: #FFFFFF;
      box-shadow: none;
      break-inside: avoid;
   }

   div.table {
      overflow: visible;
   }

   ul.figures a,
   ul.figures strong,
   div.bulk,
   div.bulk legend,
   div.bulk label {
      color: #000000;
   }

   th.pick,
   td.pick,
   th.condition,
   td.tags {
      position: static;
   }

   ul.figures > li:first-child a,
   .role.manufacturer,
   button:not(.quiet):not(.danger),
   a.button {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }

   div.bulk {
      --text: #000000;
      --text-2: #222222;
      --muted: #444444;
      --field: #FFFFFF;
      --line-strong: #999999;
      --control-line: #808A9D;
      --accent-text: #1146C4;
      color-scheme: light;
   }
}