/* appmosphe.re — project rules on top of supram. Unlayered, so it wins. */

/* In the light scheme, chrome sits on teal tint where supram would use its
   warm white; dark keeps supram's values. Other surfaces take other tints so
   the page isn't one colour: cards are white with a hairline, panels take a
   hue each, the footer sits on the cool grey. */
:root {
  --surface: var(--teal-tint);
  --panel-teal: var(--teal-tint);
  --panel-cobalt: var(--cobalt-tint);
  --panel-gold: var(--gold-tint);
  --panel-emerald: var(--emerald-tint);
  --panel-amber: var(--amber-tint);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #1d2027;
    --panel-teal: var(--subtle);
    --panel-cobalt: var(--subtle);
    --panel-gold: var(--subtle);
    --panel-emerald: var(--subtle);
    --panel-amber: var(--subtle);
  }
}
:root[data-theme="dark"] {
  --surface: #1d2027;
  --panel-teal: var(--subtle);
  --panel-cobalt: var(--subtle);
  --panel-gold: var(--subtle);
  --panel-emerald: var(--subtle);
  --panel-amber: var(--subtle);
}

/* ── type: a lighter hand ────────────────────────────────────────────── */
h1, h2, h3, h4 { font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
.hero h1 { font-size: var(--text-2xl); max-width: 24ch; }
.lede { font-weight: var(--weight-light); }
strong { font-weight: var(--weight-semibold); }
.label { font-weight: var(--weight-medium); }

/* ── header & footer ─────────────────────────────────────────────────── */
.header-row {
  gap: var(--space-2) var(--space-4);
  align-items: center;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  color: var(--fg);
  font-size: var(--text-md);
}
.brand .mark { flex: none; }
.site-nav { gap: var(--space-2) var(--space-3); }
.site-nav a { text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current] { text-decoration: underline; }
.search { gap: var(--space-1); flex: 1 1 16rem; justify-content: flex-end; }
.search input { flex: 1 1 10rem; min-width: 0; max-width: 24rem; }
.search-big input { flex: 1 1 20rem; }
.site-footer { background: var(--subtle); }
.site-footer .cluster { gap: var(--space-2) var(--space-4); }

/* ── forms ───────────────────────────────────────────────────────────── */
input[type="search"], input[type="text"], input[type="number"], input:not([type]), textarea, select {
  font: inherit;
  font-size: var(--text-sm);
  padding: 0.45em 0.7em;
  border: var(--rule-w) solid var(--hairline);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  max-width: 100%;
}
textarea { width: 100%; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
label { display: block; font-size: var(--text-sm); }
label > input, label > textarea, label > select { display: block; width: 100%; margin-top: 0.25em; }
label.cluster > input, label.cluster > select { display: inline-block; width: auto; margin-top: 0; }
label.cluster { align-items: center; gap: var(--space-1); }
button, .button {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: 0.45em 0.9em;
  border: var(--rule-w) solid var(--fg);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: var(--leading-snug);
}
button.bg-teal, .button.bg-teal { border-color: var(--teal-glass); }
button:hover, .button:hover { border-color: var(--teal-ink); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.actions { gap: var(--space-1); }

/* ── panels: one hue each ────────────────────────────────────────────── */
.panel { padding: var(--space-3); border-top: var(--rule-w-bold) solid var(--panel-rule, var(--hairline)); }
.panel .label { color: var(--panel-ink, var(--muted)); }
.panel-teal { background: var(--panel-teal); --panel-rule: var(--teal-glass); --panel-ink: var(--teal-text); }
.panel-cobalt { background: var(--panel-cobalt); --panel-rule: var(--cobalt-glass); --panel-ink: var(--cobalt-text); }
.panel-gold { background: var(--panel-gold); --panel-rule: var(--gold-glass); --panel-ink: var(--gold-text); }
.panel-emerald { background: var(--panel-emerald); --panel-rule: var(--emerald-glass); --panel-ink: var(--emerald-text); }
.panel-amber { background: var(--panel-amber); --panel-rule: var(--amber-glass); --panel-ink: var(--amber-text); }

/* ── cards ───────────────────────────────────────────────────────────── */
.tile-grid { --stack-gap: var(--space-1); }
.tile-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--hairline);
}
.tile-card-body { --stack-gap: var(--space-1); flex: 1; }
.tile-card h3 { margin: 0; font-weight: var(--weight-medium); }
.tile-card h3 a, .shortid a { text-decoration: none; color: inherit; }
.tile-card h3 a:hover { text-decoration: underline; }
.shortid {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
  margin: 0;
}
.byline { margin-top: auto; }
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.thumb {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--tile-bg, var(--subtle));
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-icon img { object-fit: contain; padding: 12%; }
.monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-glass);
  font-weight: var(--weight-medium);
  font-size: var(--text-3xl);
  text-decoration: none;
}
.chip {
  display: inline-block;
  padding: 0.15em 0.6em;
  text-decoration: none;
  font-size: var(--text-sm);
}
.chip:hover { text-decoration: underline; }

/* ── tile page ───────────────────────────────────────────────────────── */
.tile-run {
  background: var(--subtle);
  padding: var(--space-2);
  margin-bottom: var(--space-4);
}
.tile-run .tile-mount { margin: 0 auto; max-width: var(--tile-w, 100%); background: var(--tile-bg, var(--bg)); }
.tile-run iframe { display: block; width: 100%; border: 0; }
.tile-run .tile-status { margin: 0; padding: var(--space-6) var(--space-2); text-align: center; }
.tile-head { --stack-gap: var(--space-2); }
.author-chip a { text-decoration: none; color: inherit; align-items: center; gap: var(--space-1); }
.author-chip a:hover strong { text-decoration: underline; }
.avatar { border-radius: 50%; object-fit: cover; flex: none; width: var(--size, 48px); height: var(--size, 48px); }
.avatar.monogram { font-size: calc(var(--size, 48px) * 0.5); }
.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
}
.kv dt { font-weight: var(--weight-medium); color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cid { overflow-wrap: anywhere; }
.swatch { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; border: 1px solid var(--hairline); }
.pics { gap: var(--space-1); }
.pics img, .pics .icon-small { border: 1px solid var(--hairline); background: var(--subtle); }
.pics img { max-height: 10rem; width: auto; }
.table-wrap { overflow-x: auto; }
.resources { width: 100%; border-collapse: collapse; }
.resources th, .resources td { text-align: left; vertical-align: top; padding: 0.4em 0.6em; border-bottom: 1px solid var(--hairline); }
.resources th { font-weight: var(--weight-medium); }
.resources .num { text-align: right; white-space: nowrap; }
.resources input.ct { width: 14rem; padding: 0.2em 0.4em; }
.record, pre.code {
  background: var(--subtle);
  padding: var(--space-2);
  overflow-x: auto;
  font-size: var(--text-xs);
  max-height: 32rem;
}
details summary { cursor: pointer; font-weight: var(--weight-medium); }

/* ── author pages ────────────────────────────────────────────────────── */
.author-head { padding: var(--space-3); border: 1px solid var(--hairline); }
.author-head .cluster { align-items: flex-start; gap: var(--space-3); }
.author-head .stack { --stack-gap: var(--space-1); min-width: 0; }
.bio { white-space: pre-line; }
.author-card { text-decoration: none; color: inherit; align-items: center; gap: var(--space-2); background: var(--bg); border: 1px solid var(--hairline); }
.author-card:hover strong { text-decoration: underline; }
.author-card-text { --stack-gap: 0; min-width: 0; }
.author-card-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── publish ─────────────────────────────────────────────────────────── */
.publish section { margin-bottom: var(--space-4); }
.publish .step { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.publish #preview iframe { width: 100%; border: 1px solid var(--hairline); }
.publish #log { min-height: 4rem; white-space: pre-wrap; }
.publish #issues { color: var(--ruby-text); font-size: var(--text-sm); }
.publish .needs-source, .publish .needs-signin { display: none; }
.publish.has-source .needs-source { display: block; }
.publish.signed-in .needs-signin { display: block; }
.publish .grid label { margin: 0; }
.publish .grid { --gutter: var(--space-2); row-gap: var(--space-2); }
.file-pick { display: inline-block; padding: var(--space-2) var(--space-3); border: 1px dashed var(--hairline); cursor: pointer; }
.file-pick:hover { border-color: var(--teal-glass); }
.file-pick input { display: none; }

/* ── docs ────────────────────────────────────────────────────────────── */
.docs h2 { margin-top: var(--space-6); }
.docs pre { font-size: var(--text-xs); }
.docs .toc { font-size: var(--text-sm); }
.docs table { font-size: var(--text-sm); }

/* ── misc ────────────────────────────────────────────────────────────── */
.hero { --stack-gap: var(--space-2); }
.find-more .stack { --stack-gap: var(--space-2); }
.notice { border-left: var(--rule-w-bold) solid var(--teal-glass); }
.notice.bg-ruby-tint { border-color: var(--ruby-glass); }
.notice.bg-emerald-tint { border-color: var(--emerald-glass); }
ul.plain { list-style: none; padding: 0; margin: 0; }
.pager a { text-decoration: none; }
sup { font-size: 0.7em; }