/* ilab styles, after chairs. Every value is a Stellar token (stellar.css).
   Edit this file or stellar.config.json while `task dev` runs and the open
   pages restyle without reloading. */

/* raw tags */

html { color-scheme: light; }
html.dark { color-scheme: dark; }

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--neutral-1);
  color: var(--neutral-1-on);
  font-family: var(--font-sans);
  font-size: var(--font-size-0);
  line-height: var(--font-line-height-0);
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, ul, ol, dl, dd { margin: 0; }
h1 { font-size: var(--font-size-4); line-height: 1.1; }
h2 { font-size: var(--font-size-0); font-weight: var(--font-weight-semi-bold); }
a { color: var(--primary-7); }
code { font-family: var(--font-mono); font-size: var(--font-size--1); }
small { color: var(--neutral-1-dim); font-size: var(--font-size--1); font-weight: var(--font-weight-normal); }
ul, ol { padding: 0; list-style: none; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--size--2) var(--size-0); border-bottom: var(--border-width-1) solid var(--neutral-3); }
th { color: var(--neutral-1-dim); font-weight: var(--font-weight-medium); font-size: var(--font-size--1); }
.num { text-align: right; }

input {
  font: inherit;
  color: inherit;
  background: var(--neutral-2);
  border: var(--border-width-1) solid var(--neutral-4);
  border-radius: var(--border-radius-1);
  padding: var(--size--2) var(--size--1);
  min-block-size: 2.75rem;
  width: 100%;
  min-width: 8ch;
}
input:focus-visible { outline: var(--border-width-2) solid var(--primary-7); outline-offset: 1px; }

.quiet, .lede { color: var(--neutral-1-dim); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.info { background: color-mix(in oklab, var(--tertiary-3) 55%, var(--neutral-2)); color: var(--neutral-1-on); padding: var(--size--1) var(--size-0); border-radius: var(--border-radius-2); }
.error { background: var(--error-3); color: var(--error-3-on); padding: var(--size--1) var(--size-0); border-radius: var(--border-radius-2); }

/* masthead: after stardustdb.com's top bar */

/* A sticky bar of translucent glass: content scrolling under it is blurred,
   not hidden. A phone gets two rows (tools, then the links as full-width
   cells); from 48rem it is one row. Labels are uppercase and tracked, like
   stardustdb's; touch targets are 2.75rem. */
.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(4rem, auto) 3rem;
  grid-template-areas: "tools" "links";
  border-bottom: var(--border-width-1) solid var(--neutral-3);
  background: color-mix(in oklab, var(--neutral-1) 78%, transparent);
  backdrop-filter: blur(8px) saturate(1.2);
}
.masthead:not(:has(.links)) { grid-template-rows: minmax(4rem, auto); grid-template-areas: "tools"; }
.masthead .brand {
  grid-area: brand;
  align-self: center;
  padding-inline: var(--size-2);
  color: inherit;
  text-decoration: none;
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.masthead .tools { grid-area: tools; display: flex; justify-content: flex-end; align-items: center; gap: var(--size--1); padding-inline: var(--size-0); }
.masthead .links { grid-area: links; display: flex; border-top: var(--border-width-1) solid var(--neutral-3); }
.masthead .links a {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--neutral-1-dim);
  text-decoration: none;
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.masthead .links a + a { border-inline-start: var(--border-width-1) solid var(--neutral-3); }
.masthead .links a:hover { color: var(--neutral-1-on); background: color-mix(in oklab, var(--primary-6) 10%, transparent); }
.masthead .links a[aria-current] { color: var(--neutral-1-on); box-shadow: inset 0 calc(-1 * var(--border-width-3)) var(--primary-7); }
@media (min-width: 48rem) {
  .masthead { display: flex; align-items: stretch; min-height: 4rem; }
  .masthead .links { border-top: 0; }
  .masthead .links a { flex: none; padding-inline: var(--size-2); font-size: var(--font-size-0); }
  .masthead .links { padding-inline-start: var(--size-0); }
  .masthead .links a + a { border-inline-start: 0; }
  .masthead .tools { margin-inline-start: auto; padding-inline: var(--size-1); }
}

/* icon buttons: square, framed, and as pressable as the rest */
.icon-button {
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  color: var(--neutral-1-on);
  background: var(--neutral-2);
  border: var(--border-width-1) solid var(--neutral-4);
  border-radius: var(--border-radius-2);
  cursor: pointer;
  transition: filter 120ms, transform 120ms, box-shadow 120ms;
}
.icon-button:hover { border-color: var(--primary-6); box-shadow: 0 0 10px color-mix(in oklab, var(--primary-6) 45%, transparent); }
.icon-button:active { transform: translateY(1px); filter: brightness(1.15); }
.icon-button:focus-visible { outline: var(--border-width-2) solid var(--primary-7); outline-offset: 2px; }
.icon-button svg { inline-size: 1.4rem; block-size: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.icon-button .fill { fill: currentColor; stroke: none; }

/* theme toggle: the icon of the current choice; <html data-theme> holds it */
.theme-toggle > svg, .theme-toggle > span { display: none; }
html[data-theme="system"] .theme-toggle .system,
html[data-theme="light"] .theme-toggle .light,
html[data-theme="dark"] .theme-toggle .dark { display: block; }

/* .who: your email, a button to your access page; lowercase, it is an address. */
.masthead .who { text-transform: none; letter-spacing: 0; font-weight: var(--font-weight-medium); max-inline-size: 26ch; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 2.6rem; }
.masthead .who[aria-current] { border-color: var(--primary-7); }

/* buttons */

/* After stardustdb's controls. */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size--2);
  min-block-size: 2.75rem;
  padding: 0 var(--size-1);
  font: inherit;
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-7-on);
  background: var(--primary-7);
  border: var(--border-width-2) solid var(--primary-8);
  border-radius: var(--border-radius-2);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: filter 120ms, transform 120ms, box-shadow 120ms;
}
button:hover, .button:hover { filter: brightness(1.12); box-shadow: 0 0 12px color-mix(in oklab, var(--primary-6) 55%, transparent); }
button:active, .button:active { transform: translateY(1px); filter: brightness(1.25); }
button:focus-visible, .quiet-button:focus-visible { outline: var(--border-width-2) solid var(--primary-7); outline-offset: 2px; }
.quiet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding: 0 var(--size-0);
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--neutral-1-on);
  background: var(--neutral-2);
  border: var(--border-width-1) solid var(--neutral-4);
  border-radius: var(--border-radius-2);
  text-decoration: none;
}
.quiet-button:hover { border-color: var(--primary-6); filter: none; box-shadow: 0 0 10px color-mix(in oklab, var(--primary-6) 40%, transparent); }
.danger-button {
  min-block-size: 2.25rem;
  font-size: var(--font-size--1);
  color: var(--error-8);
  background: none;
  border: var(--border-width-1) solid var(--error-5);
  padding: 0 var(--size--1);
}
.danger-button:hover { background: var(--error-2); filter: none; box-shadow: 0 0 10px color-mix(in oklab, var(--error-6) 45%, transparent); }

select {
  font: inherit;
  color: inherit;
  background: var(--neutral-2);
  border: var(--border-width-1) solid var(--neutral-4);
  border-radius: var(--border-radius-1);
  padding: var(--size--2) var(--size--1);
  min-block-size: 2.75rem;
  inline-size: 100%;
}
label { display: grid; gap: var(--size--3); font-size: var(--font-size--1); color: var(--neutral-1-dim); }
label > input, label > select { font-size: var(--font-size-0); color: var(--neutral-1-on); }

/* page frame */

.content {
  display: grid;
  gap: var(--size-2);
  inline-size: 100%;
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: var(--size-2);
}
.content.narrow { max-inline-size: 32rem; padding-block-start: var(--size-4); }
.intro { display: grid; gap: var(--size--2); }
.lede { font-size: var(--font-size-1); }

.panel {
  display: grid;
  gap: var(--size--1);
  align-content: start;
  background: var(--neutral-2);
  color: var(--neutral-2-on);
  border-radius: var(--border-radius-3);
  padding: var(--size-1);
  min-inline-size: 0;
}
.panel h1 { font-size: var(--font-size-3); }
.panel .quiet, .panel small { color: var(--neutral-2-dim); }
.panel input, .panel select { background: var(--neutral-1); }

/* project cards */

.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--size-1); }
.project > a {
  display: grid;
  align-content: start;
  gap: var(--size--2);
  block-size: 100%;
  padding: var(--size-1);
  color: inherit;
  text-decoration: none;
  background: var(--neutral-2);
  border: var(--border-width-1) solid var(--neutral-3);
  border-radius: var(--border-radius-3);
}
.project > a:hover { border-color: var(--primary-6); }
.project > a:focus-visible { outline: var(--border-width-2) solid var(--primary-7); outline-offset: 2px; }
.project h2 { font-size: var(--font-size-2); line-height: 1.15; }
.project p { color: var(--neutral-2-dim); }
.project .word { justify-self: start; font-size: var(--font-size--1); font-weight: var(--font-weight-semi-bold); text-transform: uppercase; letter-spacing: var(--font-letter-spacing-2); color: var(--secondary-8); }
.project[data-status="failed"] > a, .project[data-status="inactive"] > a { border-color: var(--error-6); border-style: dashed; }
.project[data-status="failed"] .word, .project[data-status="inactive"] .word { color: var(--error-8); }

.tag, .chip, .pill {
  display: inline-block;
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-medium);
  padding: 0 var(--size--2);
  border-radius: var(--border-radius-6);
  background: var(--tertiary-3);
  color: var(--tertiary-3-on);
  white-space: nowrap;
}
.chip { background: var(--primary-3); color: var(--primary-3-on); margin: 0 var(--size--3) var(--size--3) 0; }
.pill[data-status="revoked"], .pill[data-status="expired"] { background: var(--error-3); color: var(--error-3-on); }
.pill[data-status="used up"] { background: var(--secondary-3); color: var(--secondary-3-on); }
tr[data-status="revoked"] td, tr[data-status="expired"] td { opacity: 0.55; }

/* forms */

.stack { display: grid; gap: var(--size-0); }
.stack button { justify-self: start; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--size-0); align-items: end; }
@media (min-width: 40rem) { .grid-form { grid-template-columns: 1fr 1fr; } }
.grid-form button { justify-self: start; }
.row-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--size--2); }
@media (pointer: coarse) {
  input, select, button, .quiet-button { min-block-size: 2.75rem; }
}

/* admin */

.forms, .two { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--size-2); }
@media (min-width: 64rem) {
  .forms { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.table-wrap { overflow-x: auto; }
.panel th, .panel td { border-bottom-color: var(--neutral-3); }
.panel td { vertical-align: top; }
.copy { display: flex; align-items: center; gap: var(--size--3); min-inline-size: 0; }
.copy code { overflow-wrap: anywhere; }
/* An invite's link: the address with its copy button, the QR code beside
   it. On a phone it takes the card's full width, not the value column. */
.invite-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "qr link" "note note";
  gap: var(--size--2) var(--size--1);
  align-items: start;
  min-inline-size: 18rem;
}
.invite-link .copy {
  grid-area: link;
  justify-content: space-between;
  padding: var(--size--3) var(--size--3) var(--size--3) var(--size--1);
  background: var(--neutral-2);
  border: var(--border-width-1) solid var(--neutral-4);
  border-radius: var(--border-radius-1);
}
.invite-link sb-qr-code { grid-area: qr; inline-size: 5.5rem; }
.invite-link small { grid-area: note; }
.hidden-at b { font-variant-numeric: tabular-nums; color: var(--neutral-1-on); }
.actions { display: flex; gap: var(--size--2); justify-content: flex-end; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
/* The members table's actions wrap rather than widen the table: a role is
   a toggle the size of its chip, pressed when held, and Remove is quiet. */
.members-table .actions { flex-wrap: wrap; row-gap: var(--size--3); }
.members-table .actions .quiet-button { min-block-size: 2.25rem; padding: 0 var(--size--1); }
.quiet-button.danger { color: var(--error-8); }
.quiet-button.danger:hover { border-color: var(--error-5); box-shadow: 0 0 10px color-mix(in oklab, var(--error-6) 45%, transparent); }
.role {
  min-block-size: 2.25rem;
  padding: 0 var(--size--1);
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-medium);
  text-transform: none;
  letter-spacing: normal;
  color: var(--neutral-1-on);
  background: var(--neutral-2);
  border: var(--border-width-1) solid var(--neutral-4);
  border-radius: var(--border-radius-6);
}
.role:hover { border-color: var(--primary-6); filter: none; box-shadow: 0 0 10px color-mix(in oklab, var(--primary-6) 40%, transparent); }
.role[aria-pressed="true"] { color: var(--primary-3-on); background: var(--primary-3); border-color: var(--primary-5); font-weight: var(--font-weight-semi-bold); }
.role::before { content: ""; inline-size: 0.45em; block-size: 0.45em; margin-inline-end: 0.5em; border-radius: 50%; background: var(--neutral-5); }
.role[aria-pressed="true"]::before { background: var(--primary-7); }
@media (max-width: 48rem) {
  .cards-on-phone td.link-cell { padding-inline-start: 0; }
  .cards-on-phone td.link-cell::before { content: none; }
  .invite-link { min-inline-size: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "link" "qr" "note"; padding-block: var(--size--2); }
  .invite-link sb-qr-code { inline-size: 9rem; justify-self: center; }
  .actions { justify-content: flex-start; margin-block-start: var(--size--3); }
}
/* Sortable headers (render.go sortTH): the whole cell is the button, and
   the arrow says which way the table goes. A header click posts the sort;
   the page's next frame is the sorted table (views.go). */
th.sortable { padding: 0; }
th.sortable .sort {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--size--3);
  inline-size: 100%;
  padding: var(--size--2) var(--size-0);
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
th.num.sortable .sort { justify-content: flex-end; }
th.sortable .sort:hover { color: var(--neutral-1-on); }
th.sortable .sort:focus-visible { outline: var(--border-width-2) solid var(--primary-7); outline-offset: -2px; border-radius: var(--border-radius-1); }
th.sortable .sort::after { content: ""; flex: none; inline-size: 0.5em; block-size: 0.5em; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: currentColor; opacity: 0; transition: opacity 0.15s, transform 0.15s; }
th.sortable:hover .sort::after { opacity: 0.35; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--neutral-1-on); }
th[aria-sort="ascending"] .sort::after, th[aria-sort="descending"] .sort::after { opacity: 1; }
th[aria-sort="descending"] .sort::after { transform: rotate(180deg); }

/* A panel's heading with its table's filter beside it. */
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--size--2) var(--size-0); }
.panel-head h2 { margin: 0; }
.filter input { inline-size: 14rem; max-inline-size: 100%; min-block-size: 2.25rem; padding-block: var(--size--3); }
@media (max-width: 48rem) { .filter, .filter input { inline-size: 100%; } }

/* Under a cut table: what is shown, and the rest on request. */
.more { display: flex; justify-content: center; align-items: center; gap: var(--size--1); padding-block-start: var(--size--1); }

.feed { display: grid; }
.feed li { padding-block: var(--size--2); border-bottom: var(--border-width-1) solid var(--neutral-3); }
.feed li:last-child { border-bottom: 0; }
.feed small { margin-inline-end: var(--size--3); }
.members li { display: flex; justify-content: space-between; align-items: center; gap: var(--size-0); }
.more { text-align: center; }

/* tables that become cards on a phone */

/* Each cell carries its column name in data-label; under 48rem a row is a
   small card of label: value lines, so nothing scrolls sideways. */
@media (max-width: 48rem) {
  .cards-on-phone thead:not(:has(.sortable)) { display: none; }
  /* With sortable columns, the header row is the card list's sort bar: the
     same buttons, as chips, after the word "Sort". */
  .cards-on-phone thead, .cards-on-phone thead tr, .cards-on-phone thead th.sortable { display: block; }
  .cards-on-phone thead tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size--3); padding-block: 0 var(--size--1); border-bottom: 0; }
  .cards-on-phone thead tr::before { content: "Sort by"; color: var(--neutral-2-dim); font-size: var(--font-size--1); margin-inline-end: var(--size--2); }
  .cards-on-phone thead th { display: none; }
  .cards-on-phone thead th.sortable { padding: 0; border: 0; }
  .cards-on-phone th.sortable .sort { inline-size: auto; min-block-size: 2.25rem; padding: var(--size--3) var(--size--2); border: var(--border-width-1) solid var(--neutral-4); border-radius: var(--border-radius-1); }
  .cards-on-phone th[aria-sort="ascending"] .sort, .cards-on-phone th[aria-sort="descending"] .sort { border-color: var(--primary-6); }
  .cards-on-phone tr { display: grid; gap: var(--size--3); padding-block: var(--size--1); border-bottom: var(--border-width-1) solid var(--neutral-3); }
  .cards-on-phone td { display: block; position: relative; padding: 0 0 0 6.5rem; border: 0; text-align: left; }
  .cards-on-phone td::before { content: attr(data-label); position: absolute; inset-inline-start: 0; color: var(--neutral-2-dim); font-size: var(--font-size--1); line-height: inherit; }
  .cards-on-phone td:not([data-label]) { padding-inline-start: 0; }
  .cards-on-phone td:empty { display: none; }
  .cards-on-phone td > button { margin-block-start: var(--size--3); }
  .cards-on-phone .copy { min-inline-size: 0; }
  .masthead .who { max-inline-size: 12ch; }
}
.masthead .tools { gap: var(--size--1); }

/* your access */

.facts { display: grid; gap: var(--size--2); }
.facts > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--size--1); align-items: baseline; }
.facts dt { color: var(--neutral-2-dim); }
.facts dd { font-weight: var(--font-weight-semi-bold); text-align: right; }
.countdown .clock { font-size: var(--font-size-6); font-weight: var(--font-weight-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown[data-urgent="true"] { background: var(--secondary-3); color: var(--secondary-3-on); }

.grid-form .wide { grid-column: 1 / -1; }
.prefix-input { display: flex; align-items: stretch; }
.prefix-input > span { display: grid; place-items: center; padding-inline: var(--size--2); color: var(--neutral-2-dim); background: var(--neutral-3); border: var(--border-width-1) solid var(--neutral-4); border-inline-end: 0; border-radius: var(--border-radius-1) 0 0 var(--border-radius-1); font-size: var(--font-size--1); white-space: nowrap; }
.prefix-input > input { border-start-start-radius: 0; border-end-start-radius: 0; min-inline-size: 0; }
@media (max-width: 30rem) { .prefix-input > span { display: none; } }

/* Narrow pages: login, invite, /me. */
.content.narrow { max-inline-size: 26rem; padding-block-start: var(--size-6); }
.narrow .stack { gap: var(--size--1); }
.narrow .stack button { justify-self: stretch; }
.narrow input { font-size: var(--font-size-1); }

/* presence: a green dot that means someone is here this minute, with where
   beside it. One inline unit, centered on its own line box, so it sits level
   with names and chips around it. Stellar's named "online" green; named
   colors do not flip for dark mode, so the text takes the light end there. */
.live {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  vertical-align: middle;
  white-space: nowrap;
  font-size: var(--font-size--1);
  font-weight: var(--font-weight-semi-bold);
  line-height: 1;
  color: var(--named-online--2);
}
html.dark .live { color: var(--named-online-2); }
.live::before {
  content: "";
  flex: none;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
  background: var(--named-online-0);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--named-online-0) 28%, transparent), 0 0 8px var(--named-online-0);
}
.live small { font-size: inherit; font-weight: var(--font-weight-normal); color: inherit; margin: 0; }
.who-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size--2); }
.who-line a { color: inherit; text-decoration: none; }
.who-line a:hover { text-decoration: underline; }
.chip { margin: 0; line-height: 1.5; }
.members li { align-items: flex-start; }
.members p { margin-block-end: var(--size--3); }

.panel td { vertical-align: middle; }
.panel td > small { display: inline-block; margin-block-start: 2px; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
.panel td.act { text-align: right; white-space: nowrap; }
@media (max-width: 48rem) { .cards-on-phone td.num, .cards-on-phone td.act { text-align: left; } }

/* /me: a button per project this browser can open. */
.open-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--size--1); }
.open-projects .button { min-block-size: 3.25rem; font-size: var(--font-size-0); }

/* Starbase components (web/static/sb): their tokens, from ours */

/* The confirm dialog's buttons are plain light DOM until <sb-modal> loads:
   hidden until then, or every page flashes them. */
sb-modal:not(:defined) { display: none; }

:root {
  --sb-brand: var(--primary-7);
  --sb-accent: var(--primary-7);
  --sb-text-1: var(--neutral-1-on);
  --sb-text-2: var(--neutral-1-dim);
  --sb-text-muted: var(--neutral-1-dim);
  --sb-surface-raised: var(--neutral-2);
  --sb-surface-overlay: var(--neutral-1);
  --sb-surface-inset: var(--neutral-12);
  --sb-border: var(--neutral-3);
  --sb-border-strong: var(--neutral-5);
  --sb-radius: var(--border-radius-2);
  --sb-radius-sm: var(--border-radius-1);
  --sb-ok: var(--named-online-0);
  --sb-info: var(--tertiary-7);
  --sb-warn: var(--secondary-7);
  --sb-danger: var(--error-7);
  --sb-text-on-danger: var(--error-7-on);
  --sb-focus-ring: var(--primary-7);
  --sb-shadow-overlay: var(--shadow-3);
  --sb-z-toast: 50;
  /* Dark on light in either theme: phones read that best. */
  --sb-qr-color: #111;
  --sb-qr-background: #fff;
  --sb-qr-accent: var(--primary-8);
}

/* present: one invite on a projector */

.present {
  --sb-surface-inset: #04060c;
  --sb-starfield-height: 100dvh;
  min-block-size: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--size-1);
  background: #04060c;
  color: #f4f6fb;
}
.present sb-starfield { position: fixed; inset: 0; z-index: 0; --sb-radius: 0; }
.present-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--size-0);
  text-align: center;
}
.present sb-qr-code {
  --qr: min(62dvh, 86vw);
  display: block;
  inline-size: var(--qr);
  block-size: var(--qr);
  border-radius: var(--border-radius-3);
  overflow: hidden;
  box-shadow: 0 0 60px color-mix(in oklab, var(--primary-6) 40%, transparent);
}
.present-link { font-family: var(--font-mono); font-size: clamp(1.5rem, 5vmin, 4rem); font-weight: var(--font-weight-semi-bold); overflow-wrap: anywhere; }
.present-count { font-size: clamp(1.25rem, 4vmin, 3rem); display: flex; gap: 0.4em; align-items: baseline; }
.present-count sb-odometer { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.present-ends { color: #b9c0d0; font-size: clamp(1rem, 2.5vmin, 1.5rem); }
.present-back.quiet-button {
  position: fixed; inset-block-start: var(--size-0); inset-inline-start: var(--size-0); z-index: 2;
  color: #f4f6fb; background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.25);
}
.present-back small { color: #b9c0d0; margin-inline-start: 0.4em; }
sb-copy-button { flex: none; vertical-align: middle; }
.copy pre { margin: 0; flex: 1; min-inline-size: 0; overflow-x: auto; }
pre { overflow-x: auto; max-inline-size: 100%; }
.feed li { overflow-wrap: anywhere; }

/* times (ilab-time): a countdown over its exact date */
ilab-time { font-variant-numeric: tabular-nums; }
.ends { display: inline-grid; justify-items: start; line-height: 1.25; }
.ends ilab-time { font-weight: var(--font-weight-semi-bold); }
.ends small { white-space: nowrap; }
.clock .ends { gap: var(--size--3); }
.present-ends .ends { display: inline-flex; gap: 0.6em; align-items: baseline; }
.present-ends .ends small { color: inherit; font-size: inherit; }
.clock .ends small { font-size: var(--font-size-0); font-weight: var(--font-weight-normal); }