/* The sculpted system: planes with lit top edges and shadowed
   undersides, fields cut into surfaces, one slow light over a
   grained ground. Colours come from a generated theme block; this
   file never names one. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./fonts/fraunces-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(./fonts/fraunces-italic.woff2) format("woff2");
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./fonts/karla-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Karla";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(./fonts/karla-italic.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(./fonts/jetbrainsmono.woff2) format("woff2");
}

:root {
  --sans: "Karla", "Trebuchet MS", sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --shadow-card: 0 22px 50px -18px rgba(0, 0, 0, .55),
                 0 2px 6px rgba(0, 0, 0, .25);
  --edge-lit: hsl(var(--light) / .22);
  --inset-top: rgba(0, 0, 0, .35);
  --inset-shadow: 0 1px 2px rgba(0, 0, 0, .35) inset;
  --tooth-a: rgba(255, 255, 255, .022);
  --tooth-b: rgba(0, 0, 0, .05);
  --beam-a: .34;
  --beam-b: .20;
  --grain: .04;
}

[data-mode="light"] {
  --shadow-card: 0 20px 44px -20px rgba(40, 30, 20, .28),
                 0 1px 3px rgba(40, 30, 20, .12);
  --edge-lit: #ffffff;
  --inset-top: rgba(90, 70, 55, .35);
  --inset-shadow: 0 1px 2px rgba(60, 45, 30, .10) inset;
  --tooth-a: rgba(0, 0, 0, .02);
  --tooth-b: rgba(0, 0, 0, .022);
  --beam-a: 1;
  --beam-b: .8;
  --grain: .03;
}
@media (prefers-color-scheme: light) {
  [data-mode="system"] {
    --shadow-card: 0 20px 44px -20px rgba(40, 30, 20, .28),
                   0 1px 3px rgba(40, 30, 20, .12);
    --edge-lit: #ffffff;
    --inset-top: rgba(90, 70, 55, .35);
    --inset-shadow: 0 1px 2px rgba(60, 45, 30, .10) inset;
    --tooth-a: rgba(0, 0, 0, .02);
    --tooth-b: rgba(0, 0, 0, .022);
    --beam-a: 1;
    --beam-b: .8;
    --grain: .03;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  display: grid;
  isolation: isolate;
}

body[data-layout="centre"] { place-items: center; padding: 48px 20px; }
body[data-layout="beside"] {
  grid-template-columns: 1.05fr .95fr;
  padding: 0;
}
body[data-layout="shell"] {
  display: flex;
  flex-direction: column;
  font-size: 14.5px;
  line-height: 1.55;
}
body[data-layout="shell"] main {
  width: 100%;
  padding: 40px 28px;
  display: grid;
  gap: 20px;
  align-content: start;
}
body[data-layout="shell"] main.narrow {
  max-width: 680px;
  margin: 0 auto;
}
body[data-layout="shell"] main h1 { margin: 0; }

.lighting {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.lighting .beam {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(52% 46% at 72% 26%,
      hsl(var(--light) / var(--beam-a)), transparent 66%),
    radial-gradient(44% 52% at 22% 84%,
      hsl(var(--light) / var(--beam-b)), transparent 68%);
  animation: wander 44s ease-in-out infinite;
}
@keyframes wander {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  35% { transform: translate3d(6%, 4%, 0) scale(1.08); }
  70% { transform: translate3d(-5%, -3%, 0) scale(1.03); }
}
.lighting .tooth {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    repeating-linear-gradient(0deg,
      var(--tooth-a) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,
      var(--tooth-b) 0 1px, transparent 1px 3px);
}
[data-motion="still"] .beam { animation: none; }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: var(--grain);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

.aside {
  position: relative;
  isolation: isolate;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px 44px 38px;
  background:
    linear-gradient(180deg, hsl(var(--light) / .07),
      transparent 42%),
    var(--plane);
  border-right: 1px solid var(--edge);
  overflow: hidden;
}
body[data-layout="beside"] .aside { display: flex; }
body[data-layout="beside"] .panel {
  display: grid;
  place-items: center;
  padding: 44px 40px;
}

.aside .statement {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.16;
  letter-spacing: -.02em;
  margin: 0;
  max-width: 15ch;
  text-wrap: balance;
}
.aside .footnote {
  color: var(--dim);
  font-size: 13.5px;
  margin: 14px 0 0;
  max-width: 34ch;
}
.relief {
  position: absolute;
  right: -6%;
  bottom: 6%;
  width: 58%;
  opacity: .085;
  z-index: -1;
}
[data-mode="light"] .relief { opacity: .13; }
.relief svg { width: 100%; height: auto; display: block; }

.emblem {
  position: fixed;
  right: -6%;
  bottom: -8%;
  width: min(44vw, 560px);
  z-index: -1;
  color: var(--accent);
  opacity: .07;
  pointer-events: none;
}
[data-mode="light"] .emblem { opacity: .1; }
.emblem svg { width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  .beam { animation: none !important; }
}
@media (max-width: 900px) {
  body[data-layout="beside"] {
    grid-template-columns: 1fr;
    place-items: center;
    padding: 48px 20px;
  }
  body[data-layout="beside"] .aside { display: none; }
}
:focus-visible { outline: 2px solid var(--accent);
                 outline-offset: 2px; }

/* Cards, fields and controls carved from the palette's planes.
   Colours come from a generated theme block; this file never
   names one. */

.card {
  width: 100%;
  background:
    linear-gradient(180deg, hsl(var(--light) / .05),
      transparent 120px),
    var(--plane);
  border: 1px solid var(--edge);
  border-top-color: var(--edge-lit);
  border-radius: 10px;
  padding: 32px 30px 26px;
  box-shadow: 0 1px 0 hsl(var(--light) / .10) inset,
              var(--shadow-card);
}
.card.narrow { max-width: 392px; }
.card.flush { padding: 0; overflow: hidden; }
[data-motion="full"] .card {
  animation: settle .55s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes settle {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.mark { display: flex; align-items: center; gap: 11px;
        margin-bottom: 22px; }
.mark .sigil { width: 34px; height: 34px; flex: none; }
.mark .sigil svg, .mark .sigil img {
  width: 100%; height: 100%; display: block;
}
.mark .who { font-weight: 700; font-size: 15.5px; }
.mark .who small {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--dim);
  letter-spacing: .06em;
  text-transform: uppercase;
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
.sub { color: var(--dim); font-size: 15px; margin: 0 0 22px; }
.sub b { color: var(--ink); font-weight: 600; }

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 6px;
}
.input {
  --edge-paint: linear-gradient(180deg,
    var(--inset-top), var(--edge) 10px);
  width: 100%;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 11px 12px;
  font-family: var(--sans);
  font-size: 15px;
  background:
    linear-gradient(var(--carve), var(--carve)) padding-box,
    var(--edge-paint) border-box,
    linear-gradient(var(--carve), var(--carve)) border-box;
  box-shadow: var(--inset-shadow);
  transition: box-shadow .16s ease;
}
.input:focus {
  --edge-paint: linear-gradient(var(--accent), var(--accent));
  outline: none;
  box-shadow: var(--inset-shadow),
    0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}
.field.wrong .input {
  --edge-paint: linear-gradient(var(--danger), var(--danger));
}
[data-motion="full"] .field.wrong { animation: nudge .3s ease; }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
}
.hint { font-size: 12.8px; color: var(--danger); margin-top: 7px; }
.help { font-size: 12.8px; color: var(--dim); margin-top: 7px; }

.btn {
  width: 100%;
  border: 1px solid var(--accent-deep);
  border-radius: 7px;
  padding: 11px 16px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset,
              0 4px 12px -4px rgba(0, 0, 0, .5);
  transition: filter .16s ease, transform .1s ease;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn.snug { width: auto; display: inline-flex; }
.actions { display: flex; gap: 10px; }
.btn.ghost {
  background: var(--raised);
  color: var(--ink);
  border-color: var(--edge);
  border-top-color: hsl(var(--light) / .18);
  box-shadow: 0 1px 0 hsl(var(--light) / .10) inset,
              0 3px 8px -4px rgba(0, 0, 0, .45);
  font-weight: 600;
}
.btn.ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  filter: none;
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 15px 0;
  color: var(--dim);
  font-size: 12px;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--edge);
}

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 19px;
  font-size: 13px;
}
.foot a { color: var(--accent); text-decoration: none;
          font-weight: 600; }
.foot a:hover { text-decoration: underline; }
.foot .by { color: var(--dim); font-size: 12px; }

.notice {
  border: 1px solid var(--edge);
  border-left: 3px solid var(--accent);
  background: var(--raised);
  border-radius: 6px;
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--dim);
  margin-bottom: 20px;
}
.notice b { color: var(--ink); }
.notice.bad { border-left-color: var(--danger); }
.notice.ok { border-left-color: var(--ok); }

.done { text-align: center; padding: 6px 0 2px; }
.done .tick {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid var(--accent);
}
.done .tick svg { width: 26px; height: 26px; }
[data-motion="full"] .done .tick svg path {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: draw .45s .08s ease forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.scopes { list-style: none; margin: 0 0 20px; padding: 0; }
.scopes li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--edge);
  font-size: 14.5px;
}
.scopes li:last-child { border-bottom: none; }
.scopes .glyph { color: var(--accent); flex: none; margin-top: 2px; }
.scopes b { display: block; font-weight: 600; }
.scopes li span span { color: var(--dim); font-size: 13px; }

.folds { display: grid; }
.fold + .fold { border-top: 1px solid var(--edge); }
.fold summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary:hover { background: hsl(var(--light) / .05); }
.fold summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-right: 1.6px solid var(--dim);
  border-bottom: 1.6px solid var(--dim);
  transform: rotate(45deg);
  transition: transform .16s ease;
}
.fold[open] summary::after { transform: rotate(225deg); }
.fold .body {
  padding: 2px 20px 15px;
  font-size: 13.5px;
}
.fold .body p { margin: 0 0 8px; }
.fold .body p:last-child { margin-bottom: 0; }

.meter { display: flex; gap: 5px; margin-top: 9px; }
.meter i {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--edge);
}
.meter i.on { background: var(--accent); }
.meter i.weak { background: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  .card, .field.wrong, .done .tick svg path {
    animation: none !important;
  }
}

/* The app shell: bars, strips and rows for full pages. Colours
   come from a generated theme block; this file never names one. */

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); }
.grow { flex: 1; }
.glyph { display: flex; align-items: center; }
.glyph svg { display: block; }

.topbar {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 13px 28px;
  background:
    linear-gradient(180deg, hsl(var(--light) / .06), transparent),
    var(--plane);
  border-bottom: 1px solid var(--edge);
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
  font-size: 16.5px;
}
.topbar .brand:hover { text-decoration: none; }
.topbar .brand svg, .topbar .brand img {
  width: 26px;
  height: 26px;
  display: block;
  color: var(--accent);
}
.topbar nav { display: flex; gap: 20px; }

.navlink {
  color: var(--dim);
  font-weight: 600;
  font-size: 13.5px;
}
.navlink:hover { color: var(--ink); text-decoration: none; }
.navlink.on { color: var(--ink); }

.footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 16px 28px;
  border-top: 1px solid var(--edge);
  color: var(--dim);
  font-size: 12.5px;
}

.pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 1px 9px;
  color: var(--dim);
  background: var(--raised);
}
.pill.ok {
  color: var(--ok);
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}
.pill.accent {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  background: var(--carve);
  border: 1px solid var(--edge);
  border-radius: 5px;
  padding: 2px 8px;
  color: var(--dim);
}
.chip.ref { color: var(--accent); }

details.menu { position: relative; }
.menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--raised);
  color: var(--dim);
  border: 1px solid var(--edge);
  border-top-color: hsl(var(--light) / .18);
  border-radius: 7px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  user-select: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { color: var(--ink); }
.menu > summary::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-top: -2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform .16s ease;
}
.menu[open] > summary::after {
  margin-top: 2px;
  transform: rotate(225deg);
}
.menu .sheet {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 10;
  min-width: 180px;
  padding: 6px;
  background: var(--raised);
  border: 1px solid var(--edge);
  border-top-color: var(--edge-lit);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.menu.right .sheet { left: auto; right: 0; }
.menu .item {
  display: block;
  padding: 7px 11px;
  border-radius: 7px;
  color: var(--ink);
  font-weight: 600;
  font-size: 13.5px;
}
.menu .item:hover {
  text-decoration: none;
  color: var(--accent);
  background:
    color-mix(in srgb, var(--accent) 10%, transparent);
}
.menu .divider { margin: 6px 5px; gap: 0; }

.tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--edge);
}
.tab {
  color: var(--dim);
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 2px;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.tab .count {
  background: var(--raised);
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  margin-left: 3px;
}

.tabbed > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tabbed .tab { cursor: pointer; }
.tabbed > .view { display: none; padding-top: 16px; }
.tabbed > input:nth-of-type(1):checked ~ .tabs
  .tab:nth-of-type(1),
.tabbed > input:nth-of-type(2):checked ~ .tabs
  .tab:nth-of-type(2),
.tabbed > input:nth-of-type(3):checked ~ .tabs
  .tab:nth-of-type(3),
.tabbed > input:nth-of-type(4):checked ~ .tabs
  .tab:nth-of-type(4) {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.tabbed > input:nth-of-type(1):checked
  ~ .view:nth-of-type(1),
.tabbed > input:nth-of-type(2):checked
  ~ .view:nth-of-type(2),
.tabbed > input:nth-of-type(3):checked
  ~ .view:nth-of-type(3),
.tabbed > input:nth-of-type(4):checked
  ~ .view:nth-of-type(4) {
  display: block;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
}
.crumbs a { color: var(--dim); font-weight: 600; }
.crumbs a:hover { color: var(--ink); text-decoration: none; }
.crumbs .sep { color: var(--dim); opacity: .55; }
.crumbs b { color: var(--ink); font-weight: 600; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--edge);
  font-size: 13.5px;
}
.row:last-child { border-bottom: none; }
.row.stack {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}
.row .glyph { color: var(--accent); flex: none; }
.row .meta { color: var(--dim); font-size: 12.5px; }

.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--raised);
  border: 1px solid var(--edge);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
  color: var(--dim);
  flex: none;
}
.avatar.self {
  color: var(--accent);
  border-color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 22%, var(--raised));
}

.role {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 1px 9px;
  color: var(--dim);
  background: var(--raised);
}
.role.adm {
  color: var(--accent);
  border-color: var(--accent-deep);
}

.gate {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--edge);
  font-size: 13.5px;
}
.gate:last-child { border-bottom: none; }
.gate .glyph { flex: none; color: var(--dim); }
.gate.ok .glyph { color: var(--ok); }
.gate.bad .glyph { color: var(--danger); }

.dline {
  display: grid;
  grid-template-columns: 44px 44px 1fr;
  font-family: var(--mono);
  font-size: 12.3px;
  line-height: 1.75;
}
.dline .no {
  color: var(--dim);
  text-align: right;
  padding-right: 10px;
  opacity: .6;
}
.dline .tx { padding-left: 14px; white-space: pre; }
.dline.add {
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}
.dline.add .tx {
  color: color-mix(in srgb, var(--ok) 45%, var(--ink));
}
.dline.del {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.dline.del .tx {
  color: color-mix(in srgb, var(--danger) 45%, var(--ink));
}

.side {
  display: block;
  color: var(--dim);
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 14px;
  border-radius: 7px;
  border-left: 2px solid transparent;
}
.side:hover { color: var(--ink); text-decoration: none; }
.side.on {
  color: var(--ink);
  background: var(--raised);
  border-left-color: var(--accent);
}

.sidebar {
  flex: none;
  width: 216px;
  padding: 24px 14px;
  border-right: 1px solid var(--edge);
}
.sidebar .side { margin-bottom: 2px; }
.sidebar .heading {
  display: block;
  padding: 0 14px;
  margin: 22px 0 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}
.sidebar .heading:first-child { margin-top: 0; }