/* Tele Help. Values from the Tele design system: light is its surface, dark is teleportez.moi's night. */
:root {
  --surface: #f5f5f7; --card: #fff; --tile: #fff;
  --label: #1d1d1f; --label-2: #636366; --label-3: #6e6e73;
  --sep: rgba(0,0,0,.09); --sep-strong: rgba(0,0,0,.14);
  --fill: rgba(0,0,0,.05); --fill-strong: rgba(0,0,0,.08); --fill-selected: #fff; --hover: rgba(0,0,0,.04);
  --accent: #007aff; --accent-tint: rgba(0,122,255,.10); --link: #0064d2;
  --success: #34c759; --warning: #ff9500; --danger-text: #d70015;
  --glass: rgba(246,246,248,.78);
  --shadow-card: 0 0 0 .5px rgba(0,0,0,.08);
  --night: #2b2f8f; --night-deep: #0b0c2a; --teleport: #7ce7ff; --cloud: #fff;
  --mac-blue: #007aff; --mac-teal: #30b0c7; --mac-orange: #ff9500; --mac-purple: #af52de; --mac-indigo: #5856d6; --mac-green: #34c759;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
  --gutter: 16px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #05061a; --card: rgba(255,255,255,.07); --tile: rgba(255,255,255,.08);
    --label: #f5f5f7; --label-2: #aeaeb2; --label-3: #9a9aa2;
    --sep: rgba(255,255,255,.10); --sep-strong: rgba(255,255,255,.18);
    --fill: rgba(255,255,255,.07); --fill-strong: rgba(255,255,255,.12); --fill-selected: rgba(255,255,255,.16); --hover: rgba(255,255,255,.05);
    --accent: #0a84ff; --accent-tint: rgba(10,132,255,.16); --link: #409cff;
    --success: #30d158; --warning: #ff9f0a; --danger-text: #ff453a;
    --glass: rgba(10,11,34,.72);
    --shadow-card: 0 0 0 .5px rgba(255,255,255,.14);
    --mac-blue: #0a84ff; --mac-teal: #40c8e0; --mac-orange: #ff9f0a; --mac-purple: #bf5af2; --mac-indigo: #5e5ce6; --mac-green: #30d158;
  }
}
@media (min-width: 900px) { :root { --gutter: 48px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--surface); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--label); background: var(--surface); font: 400 16px/24px var(--sans); -webkit-font-smoothing: antialiased; }
main { flex: 1; }
h1, h2, h3, p, ul, ol, fieldset { margin: 0; padding: 0; border: 0; }
ul { list-style: none; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 20; padding: 8px 14px; border-radius: 999px; background: var(--accent); color: #fff; }
.skip:focus { top: 10px; }

/* Only in the look pages made by scripts/look.ts */
.sample { padding: 6px 16px; text-align: center; font: 500 13px/18px var(--sans); color: var(--label-2); background: var(--fill-strong); }

/* Bar */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--glass); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); box-shadow: 0 .5px 0 var(--sep); }
.bar-in { max-width: 1136px; margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); min-height: 56px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo end" "nav nav"; align-items: center; column-gap: 16px; }
.lockup { grid-area: logo; display: inline-flex; align-items: center; gap: 8px; padding: 14px 0 6px; font: 700 19px/1 var(--display); letter-spacing: -.03em; color: var(--label); justify-self: start; }
.lockup:hover { text-decoration: none; }
.lockup-sub { font-weight: 400; color: var(--label-2); margin-left: -3px; }
.nav { grid-area: nav; display: flex; gap: 2px; margin: 0 -10px; padding-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.nav a, .nav-end { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 999px; font: 500 14px/18px var(--sans); color: var(--label-2); white-space: nowrap; }
.nav a:hover, .nav-end:hover { color: var(--label); background: var(--hover); text-decoration: none; }
.nav a[aria-current] { color: var(--label); background: var(--fill-strong); }
.bar-end { grid-area: end; padding-top: 8px; }
.nav-end { color: var(--link); margin-right: -10px; }
@media (min-width: 720px) {
  .bar-in { grid-template-columns: auto 1fr auto; grid-template-areas: "logo nav end"; }
  .lockup { padding: 0; }
  .nav { margin: 0 0 0 20px; padding: 0; }
  .bar-end { padding: 0; }
}

/* Night band: the icon's own gradient. Cyan appears only here. */
.band { position: relative; overflow: hidden; background: linear-gradient(168deg, var(--night), var(--night-deep) 82%); color: var(--cloud); }
.pixels { position: absolute; right: 0; top: 0; width: min(44%, 520px); height: 100%; pointer-events: none; }
@media (max-width: 719px) { .pixels { width: 58%; opacity: .7; } }
.band-in { position: relative; max-width: 1136px; margin: 0 auto; padding: 44px max(var(--gutter), env(safe-area-inset-right)) 48px max(var(--gutter), env(safe-area-inset-left)); }
.eyebrow { font: 600 13px/16px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--teleport); }
.band h1 { margin-top: 10px; font: 700 clamp(34px, 6vw, 52px)/1.08 var(--display); letter-spacing: -.03em; }
@media (min-width: 900px) { .band-in { padding-top: 72px; padding-bottom: 76px; } }

/* Search */
.search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--fill); box-shadow: inset 0 0 0 .5px var(--sep); color: var(--label-2); min-width: 0; }
.search:focus-within { box-shadow: inset 0 0 0 .5px var(--sep), 0 0 0 3px var(--accent); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; outline: 0; color: var(--label); font: 400 15px/20px var(--sans); -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--label-3); opacity: 1; }
.search svg { flex: none; }
.search-lg { margin-top: 22px; max-width: 560px; height: 52px; padding: 0 20px; gap: 10px; color: rgba(255,255,255,.8); background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.28); }
.search-lg:focus-within { box-shadow: inset 0 0 0 .5px rgba(255,255,255,.28), 0 0 0 3px var(--teleport); }
.search-lg input { font-size: 17px; color: #fff; }
.search-lg input::placeholder { color: rgba(255,255,255,.76); }

/* Page frames */
.shell { max-width: 1136px; margin: 0 auto; padding: 28px max(var(--gutter), env(safe-area-inset-right)) 56px max(var(--gutter), env(safe-area-inset-left)); }
.narrow { max-width: calc(720px + 2 * var(--gutter)); }
.tiny { max-width: calc(420px + 2 * var(--gutter)); padding-top: 40px; }
.stack { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.stack-lg { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); }
.stack-sm { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .shell { padding-top: 40px; padding-bottom: 72px; } .stack-lg { gap: 44px; } }
h1 { font: 700 clamp(28px, 4.4vw, 36px)/1.14 var(--display); letter-spacing: -.025em; }
.lead { margin-top: 6px; font-size: 17px; line-height: 25px; color: var(--label-2); }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.h-sec { font: 700 15px/20px var(--display); }
section > .h-sec, .h-row { margin-bottom: 10px; }
.h-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.h-row .h-sec { margin: 0; }
.more { font-size: 14px; line-height: 20px; }
.hint { font-size: 14px; line-height: 20px; color: var(--label-2); }
.back { justify-self: start; display: inline-flex; align-items: center; gap: 2px; margin-left: -3px; font-size: 14px; line-height: 20px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; font: 500 15px/20px var(--sans); white-space: nowrap; cursor: pointer; transition: background .12s ease-out; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
.btn-secondary { background: var(--fill-strong); color: var(--label); }
.btn-secondary:hover { background: color-mix(in srgb, var(--fill-strong) 100%, var(--label) 8%); }
.btn-sm { min-height: 32px; padding: 0 14px; font-size: 14px; }
.btn-wide { width: 100%; }
@media (pointer: coarse) { .btn { min-height: 44px; } .btn-sm { min-height: 40px; } }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.tile { height: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card); color: var(--label); transition: background .12s ease-out; }
.tile:hover { text-decoration: none; background: color-mix(in srgb, var(--card) 100%, var(--label) 4%); }
.tile-icon { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--c); }
.tile-text { display: grid; gap: 1px; min-width: 0; }
.tile-text b { font: 600 15px/20px var(--sans); }
.tile-text span { font-size: 14px; line-height: 19px; color: var(--label-2); }

/* Grouped lists */
.split { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.group { border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card); overflow: hidden; }
.group > li + li { box-shadow: 0 -.5px 0 var(--sep); }
.group-flat { background: var(--fill); box-shadow: none; border-radius: 12px; }
.row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; color: var(--label); font-size: 15px; line-height: 20px; }
.row > span:first-child { flex: 1; min-width: 0; }
.row:hover { text-decoration: none; background: var(--hover); }
.row .icon { flex: none; color: var(--label-3); }
.row-req { min-height: 60px; }
.row-req > span:first-child { flex: none; }
.row-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.count { flex: none; width: 40px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--fill); font: 600 14px/18px var(--sans); font-variant-numeric: tabular-nums; }
.count-sm { flex: none; font-size: 13px; line-height: 18px; color: var(--label-2); font-variant-numeric: tabular-nums; }

/* Status: always a word; the dot is only a help */
.status { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--sans); color: var(--label-2); white-space: nowrap; }
.status i, .col-head i { width: 7px; height: 7px; border-radius: 4px; background: var(--label-3); }
[data-status="planned"] i { background: var(--accent); }
[data-status="in-progress"] i { background: var(--warning); }
[data-status="done"] i { background: var(--success); }
[data-status="not-planned"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--label-3); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--fill); font: 500 12px/16px var(--sans); color: var(--label-2); }
.meta-c { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; color: var(--label-2); font-variant-numeric: tabular-nums; }

/* CTA */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 20px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card); }
.cta h2 { font: 700 17px/22px var(--display); }
.cta p { margin-top: 2px; font-size: 15px; line-height: 21px; color: var(--label-2); }

/* Requests */
.tools { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.chips { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); }
.chip { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--fill); color: var(--label); font: 500 14px/18px var(--sans); }
.chip:hover { text-decoration: none; background: var(--fill-strong); }
.chip[aria-current] { background: var(--fill-selected); box-shadow: inset 0 0 0 .5px var(--sep-strong), 0 1px 2px rgba(0,0,0,.08); font-weight: 600; }
.chips-sep { flex: none; width: .5px; height: 18px; margin: 0 4px; background: var(--sep-strong); }
@media (min-width: 900px) {
  .tools { grid-template-columns: 300px minmax(0, 1fr); align-items: center; }
  .chips { margin: 0; padding: 2px; justify-content: flex-end; }
}
.req { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }
.req-main { flex: 1; min-width: 0; }
.req-title { display: block; color: var(--label); font: 600 16px/22px var(--sans); }
.req-sum { color: var(--label-2); font-size: 15px; line-height: 21px; }
.req .meta { margin-top: 6px; }
.vote { flex: none; width: 48px; height: 56px; display: inline-grid; place-items: center; align-content: center; gap: 0; border: 0; padding: 0; border-radius: 12px; background: var(--fill); color: var(--label); cursor: pointer; font: 600 15px/18px var(--sans); font-variant-numeric: tabular-nums; transition: background .12s ease-out; }
.vote:hover { background: var(--fill-strong); text-decoration: none; }
.vote[aria-pressed="true"] { background: var(--accent-tint); color: var(--link); box-shadow: inset 0 0 0 1px var(--accent); }
.vote b { font-weight: 600; }
.vote-lg { width: 64px; height: 84px; font-size: 19px; line-height: 24px; }
.vote-lg span { font: 500 12px/14px var(--sans); }
.req-head { display: flex; align-items: flex-start; gap: 14px; }
.req-head h1 { font-size: clamp(24px, 4vw, 30px); }
.req-head .meta { margin-top: 8px; }
.body-text { font-size: 17px; line-height: 26px; white-space: pre-line; overflow-wrap: anywhere; }
.official { padding: 16px 18px; border-radius: 16px; background: var(--accent-tint); box-shadow: inset 0 0 0 .5px var(--sep); display: grid; gap: 8px; }
.official-by { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; line-height: 18px; color: var(--label-2); }
.official-by b { font: 600 15px/20px var(--sans); color: var(--label); }
.comments { display: grid; gap: 16px; }
.comments li { display: flex; gap: 10px; }
.badge { flex: none; width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; font: 700 13px/1 var(--sans); color: #fff; background: var(--c); }
.comment-by { font-size: 14px; line-height: 20px; }
.comment-by b { font-weight: 600; }
.comment-by time { color: var(--label-2); margin-left: 6px; }
.comments li > div { min-width: 0; }
.comments li p:not(.comment-by), .official > p:last-child { white-space: pre-line; overflow-wrap: anywhere; }

/* Roadmap */
.columns { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.col-head { display: flex; align-items: center; gap: 8px; height: 24px; margin-bottom: 8px; padding: 0 4px; }
.col-head h2 { font: 700 15px/20px var(--display); }
.col-head span { margin-left: auto; font-size: 13px; color: var(--label-2); font-variant-numeric: tabular-nums; }
.col-list { display: grid; gap: 8px; }
.col-card { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-card); color: var(--label); }
.col-card:hover { text-decoration: none; background: color-mix(in srgb, var(--card) 100%, var(--label) 4%); }
.col-card b { font: 600 15px/20px var(--sans); }
.col-none { padding: 18px 14px; border-radius: 12px; box-shadow: inset 0 0 0 .5px var(--sep-strong); font-size: 14px; line-height: 20px; color: var(--label-2); }

/* Empty */
.empty { display: grid; justify-items: center; gap: 6px; padding: 44px 20px; text-align: center; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card); }
.empty h2 { margin-top: 8px; font: 700 17px/22px var(--display); }
.empty p { max-width: 380px; color: var(--label-2); }

/* Articles */
.reading { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.toc ul { display: none; }
@media (min-width: 960px) {
  .reading { grid-template-columns: 220px minmax(0, 680px); gap: 56px; justify-content: center; }
  .toc { position: sticky; top: 80px; align-self: start; }
  .toc ul { display: grid; gap: 2px; margin-top: 12px; }
  .toc li a { display: block; padding: 6px 10px; margin-left: -10px; border-radius: 8px; color: var(--label-2); font-size: 14px; line-height: 19px; }
  .toc li a:hover { background: var(--hover); color: var(--label); text-decoration: none; }
  .toc li a[aria-current] { background: var(--fill-strong); color: var(--label); font-weight: 500; }
}
.prose { min-width: 0; font-size: 17px; line-height: 27px; }
.prose > * + * { margin-top: 14px; }
.prose h2 { margin-top: 30px; font: 700 21px/27px var(--display); letter-spacing: -.01em; }
.prose ol, .prose ul { display: grid; gap: 8px; padding-left: 24px; }
.prose ul { list-style: disc; }
.prose ol li::marker { color: var(--label-2); font-variant-numeric: tabular-nums; }
.prose b { font-weight: 600; }
.prose .lead { margin-top: 8px; font-size: 19px; line-height: 28px; }
.note { padding: 14px 16px; border-radius: 12px; background: var(--fill); font-size: 15px; line-height: 22px; }
.updated { margin-top: 26px !important; font-size: 13px; line-height: 18px; color: var(--label-2); }
.helpful { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; padding: 14px 0; border-block: .5px solid var(--sep); font-size: 15px; line-height: 20px; }
.helpful p { margin-right: 6px; font-weight: 500; }

/* Forms */
.card { padding: 20px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-card); }
.card-center { justify-items: center; text-align: center; padding: 28px 24px; }
.card-center .field { justify-self: stretch; text-align: left; }
.card-center h1 { font-size: 26px; line-height: 32px; margin-top: -2px; }
.sub { margin-top: -6px; font-size: 15px; line-height: 21px; color: var(--label-2); }
.sub b { color: var(--label); font-weight: 600; overflow-wrap: anywhere; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span, .field > legend { font: 600 14px/18px var(--sans); padding: 0; }
.field > legend { margin-bottom: 6px; }
.field small { font-size: 13px; line-height: 18px; color: var(--label-2); }
input:not([type="radio"]):not([type="checkbox"]):not([type="search"]), textarea, select { width: 100%; border: 0; border-radius: 10px; background: var(--tile); box-shadow: inset 0 0 0 .5px var(--sep-strong), inset 0 0 0 1px var(--sep); color: var(--label); font: 400 16px/22px var(--sans); }
input:not([type="radio"]):not([type="checkbox"]):not([type="search"]), select { height: 42px; padding: 0 12px; }
textarea { display: block; padding: 10px 12px; resize: vertical; min-height: 88px; }
::placeholder { color: var(--label-3); opacity: 1; }
input:focus, textarea:focus, select:focus { outline: 3px solid var(--accent); outline-offset: 0; }
.search input:focus { outline: 0; }
select { -webkit-appearance: none; appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238e8e93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5-3 3.5 3M4.5 9.5l3.5 3 3.5-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.seg { display: inline-flex; justify-self: start; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; border-radius: 999px; background: var(--fill); }
.seg input { position: absolute; opacity: 0; }
.seg span { display: inline-flex; align-items: center; height: 30px; padding: 0 16px; white-space: nowrap; border-radius: 999px; font: 500 14px/18px var(--sans); color: var(--label-2); cursor: pointer; }
.seg input:checked + span { background: var(--fill-selected); color: var(--label); box-shadow: 0 0 0 .5px var(--sep-strong), 0 1px 2px rgba(0,0,0,.08); }
.seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 1px; }
.similar { display: grid; gap: 8px; }
.form-end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.trap { position: absolute; left: -9999px; height: 0; overflow: hidden; }
input.digits { height: 60px; padding: 0 0 0 .5em; border-radius: 12px; text-align: center; font: 600 30px/36px var(--mono); letter-spacing: .5em; font-variant-numeric: tabular-nums; }

.notice { padding: 10px 14px; border-radius: 12px; background: var(--fill); font-size: 14px; line-height: 20px; }
.notice[data-kind="error"] { color: var(--danger-text); background: color-mix(in srgb, var(--danger-text) 10%, transparent); }
.notice[data-kind="done"] { background: var(--accent-tint); }
.card-center .notice { justify-self: stretch; text-align: left; }
.turnstile { min-height: 65px; justify-self: stretch; display: grid; justify-items: center; }
.link-button { border: 0; padding: 0; background: none; color: var(--link); font: inherit; cursor: pointer; }
.link-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.switch-row { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 21px; }
.switch-row input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }

/* Tickets */
[data-status="open"] i { background: var(--accent); }
[data-status="waiting"] i { background: var(--warning); }
[data-status="closed"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--label-3); }
.thread { list-style: none; display: grid; gap: 10px; }
.msg { padding: 12px 14px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-card); }
.msg[data-author="support"] { background: var(--accent-tint); }
.msg[data-author="note"] { background: color-mix(in srgb, var(--warning) 12%, transparent); }
.msg-text { margin-top: 4px; white-space: pre-line; overflow-wrap: anywhere; }
.row-two > span:first-child { display: grid; gap: 1px; }
.row-two b { font-weight: 600; }
.row-two > span:first-child > span { font-size: 14px; line-height: 19px; color: var(--label-2); }
details.card summary { cursor: pointer; font: 600 15px/20px var(--sans); }
details.card form { margin-top: 12px; }

/* Admin */
.subnav { display: flex; flex-wrap: wrap; gap: 6px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.stat { padding: 14px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow-card); font-size: 14px; line-height: 19px; color: var(--label-2); }
.stat b { display: block; font: 700 26px/32px var(--display); color: var(--label); font-variant-numeric: tabular-nums; }
.form-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-danger { background: var(--fill-strong); color: var(--danger-text); }
.inline-form { display: inline; }

/* Footer */
.foot { box-shadow: 0 -.5px 0 var(--sep); }
.foot-in { max-width: 1136px; margin: 0 auto; padding: 20px max(var(--gutter), env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.signature { font: 300 19px/1 var(--display); letter-spacing: -.02em; }
.signature b { font-weight: 700; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-links a { font-size: 13px; line-height: 20px; color: var(--label-2); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }