/* The admin page: the app's tokens and pieces (css/app.css), in tabs of boxes. Numbers sit in label / value rows;
   tables turn into label / value cards on a phone. */

.admin { max-width: 1000px; margin: 0 auto; padding: 1rem 16px 3rem; }
.admin-top { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0 0.8rem; }
.admin-top .brand { font-size: 1.7rem; }
.admin-top small { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.admin-top .grow { flex: 1; }
.admin-top .credits { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.admin-top .credits.low { color: var(--danger); }
a.btn { text-decoration: none; }
.btn.small { padding: 0.4rem 0.9rem; font-size: 0.85rem; }

/* tabs: two full-width bars, the open one raised: the admin's own (Home, Members, Invites, Usage), then the tools
   members use (Voice, Image); Usage and Voice have smaller pill sub-tabs */
.admin-tabs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 4px; margin-bottom: 1.2rem;
}
.admin-tabs a {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem 0.5rem; border-radius: 12px; color: var(--ink-3); font-weight: 600; text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.admin-tabs a:hover { color: var(--ink); }
.admin-tabs a[aria-current='true'] { background: var(--accent-soft); color: var(--ink); }
.admin-tabs svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-tabs a[aria-current='true'] svg { color: var(--accent); }
.admin-tabs .count { margin-left: -0.15rem; }
.admin-tabs.tools { grid-template-columns: repeat(5, 1fr); }
.admin-tabs:has(+ .admin-tabs) { margin-bottom: 6px; }

.subtabs { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 4px; gap: 2px; margin-bottom: 1rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.subtabs a {
  border-radius: 999px; padding: 0.4rem 1.1rem; white-space: nowrap; flex: none;
  font-weight: 600; font-size: 0.9rem; color: var(--ink-3); text-decoration: none;
}
.back { display: inline-block; margin: 0 0 0.6rem; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.back:hover { color: var(--ink); }
.member-name { font-size: 1.15rem; margin: 0.4rem 0 0.7rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.name-link { color: inherit; text-decoration: none; }
.name-link:hover { text-decoration: underline; }
.subtabs a[aria-selected='true'] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.seg { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.seg button {
  border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 0.3rem 0.85rem;
  font-weight: 600; font-size: 0.82rem; color: var(--ink-3);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed='true'] { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

.box { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.1rem 0.9rem; margin-bottom: 1rem; }
.box h2 { font-size: 1rem; margin: 0 0 0.8rem; display: flex; align-items: center; gap: 0.5rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.count { background: var(--accent); color: var(--accent-ink); border-radius: 999px; font-size: 0.72rem; padding: 0.05rem 0.5rem; }
.count:empty { display: none; }
.none { color: var(--ink-3); font-size: 0.9rem; margin: 0 0 0.3rem; }
.alert { background: var(--surface); border: 1px solid var(--danger); color: var(--danger); font-weight: 600; border-radius: var(--radius); padding: 0.8rem 1.1rem; margin: 0 0 1rem; }
.meta { color: var(--ink-3); font-size: 0.85rem; margin: -0.4rem 0 0.6rem; }

/* label / value rows: labels left, values right beside them, both left-aligned */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.4rem; margin: 0; }
.kv.two { grid-template-columns: max-content 1fr max-content 1fr; }
.kv dt { color: var(--ink-3); font-size: 0.88rem; }
.kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* the ⓘ: a title and short lines, under its heading */
.info { font-weight: 400; }
.info summary {
  list-style: none; cursor: pointer; width: 20px; height: 20px; border-radius: 999px;
  display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink-3);
  font: italic 600 0.8rem/1 var(--serif);
}
.info summary::-webkit-details-marker { display: none; }
.info[open] summary { color: var(--accent); border-color: var(--accent); }
.info .tip {
  position: absolute; z-index: 5; left: 1.1rem; right: 1.1rem; top: 2.7rem; max-width: 22rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  padding: 0.7rem 0.9rem; display: grid; gap: 0.25rem; font-size: 0.85rem;
}
.info .tip b { margin-bottom: 0.15rem; }
.info .tip span { color: var(--ink-2); }
.info .tip em { font-style: normal; font-weight: 600; color: var(--ink); }

/* Image › Flow: a column of steps with arrows between them; where it branches, the ways side by side; chips say what
   is an AI model, what the member picks, and what can be changed in Settings; a speech icon opens the words we add */
.flow h2 { margin-bottom: 0.9rem; }
.fsteps { list-style: none; margin: 0; padding: 0; display: grid; justify-items: stretch; }
.fsteps > li + li { position: relative; margin-top: 26px; }
.fsteps > li + li::before { content: ''; position: absolute; top: -22px; left: calc(50% - 1px); width: 2px; height: 14px; background: var(--ink-3); opacity: 0.5; }
.fsteps > li + li::after {
  content: ''; position: absolute; top: -9px; left: calc(50% - 5px); border: 5px solid transparent; border-top-color: var(--ink-3); opacity: 0.5;
}
.fstep {
  display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.65rem 0.8rem; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--line);
}
.fstep.model { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 45%, var(--bg)); }
.ftext { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }
.ftext b { font-weight: 600; }
.fnote { flex-basis: 100%; color: var(--ink-3); font-size: 0.82rem; }
.chip { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; text-decoration: none; }
.chip.model { background: var(--accent); color: var(--accent-ink); }
.chip.member { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.chip.setting { background: var(--accent-soft); color: var(--accent); }
.chip.setting:hover { text-decoration: underline; }
.fbranch { display: grid; gap: 0.5rem; }
.fq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; }
.fq b { padding: 0.25rem 0.8rem; border-radius: 999px; border: 1px dashed var(--ink-3); font-size: 0.85rem; }
.fways { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.7rem; }
.fway { display: grid; gap: 0.35rem; align-content: start; padding: 0.55rem; border-radius: 14px; background: var(--surface-2); }
.fwlabel { justify-self: center; font-size: 0.78rem; font-weight: 700; color: var(--ink-2); }
.fstep { position: relative; }
.info.say summary { width: 30px; height: 30px; font: inherit; }
.info.say summary svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fstep .info .tip { left: auto; right: 0; top: calc(100% + 6px); width: min(34rem, 86vw); max-width: none; }
.fstep .info .tip pre { margin: 0; white-space: pre-wrap; font: 0.82rem/1.45 ui-monospace, Consolas, monospace; color: var(--ink-2); }

/* lists of people and codes */
.item { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.65rem 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; padding-top: 0; }
.item .who { flex: 1; min-width: 10rem; }
.item .who b { display: block; }
.item .who > span { color: var(--ink-3); font-size: 0.8rem; }
.item .actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.item .btn { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.btn.no { background: transparent; color: var(--danger); border-color: var(--line); }
.tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.5rem; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); }
.tag.approved { background: var(--accent-soft); color: var(--accent); }
.tag.rejected, .tag.closed { color: var(--danger); }
.code { font-family: var(--mono); font-weight: 700; letter-spacing: 0.06em; }

/* forms */
.inline { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; }
.mini { display: grid; gap: 0.3rem; }
.mini.grow { flex: 1; min-width: 12rem; }
.mini span { font-size: 0.75rem; font-weight: 600; color: var(--ink-3); }
.mini input, .mini select { padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); outline: none; min-width: 0; }
.mini input[type='number'] { width: 5.5rem; }
.mini input:focus, .mini select:focus { border-color: var(--accent); }
.picker { margin-bottom: 1rem; max-width: 22rem; }

/* Voice: settings as rows (what on the left, the choice on the right), a quiet "Saved" by the sub-tabs, and the
   speed of each step */
.subbar { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.saved { margin-bottom: 1rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-3); }
.sets { display: grid; gap: 1rem; padding-bottom: 1.1rem; }
.set { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: 0.5rem 1rem; }
.set > span:first-child { color: var(--ink-3); font-size: 0.88rem; }
.set .seg { margin: 0; }
.set select { padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); max-width: 22rem; width: 100%; }
.set select:focus { border-color: var(--accent); outline: none; }
.set .tool-msg { padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; max-width: 22rem; width: 100%; box-sizing: border-box; }
.set .tool-msg:focus { border-color: var(--accent); outline: none; }
/* Communication › Mail: the form, and beside it (below on a phone) the email as it will look */
.mail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; align-items: start; }
@media (min-width: 1100px) { .mail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mail-view { position: sticky; top: 1rem; } }
.mail .set input, .mail .set textarea, .mail .set select { padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; width: 100%; box-sizing: border-box; }
.mail .set textarea { resize: vertical; min-height: 12rem; }
.mail .set select { max-width: 22rem; }
.mail .set input:focus, .mail .set textarea:focus, .mail .set select:focus { border-color: var(--accent); outline: none; }
.mail .set.top { align-items: start; }
.mail .set.top > span:first-child { padding-top: 0.6rem; }
.mail-from { font-size: 0.92rem; }
.mail-to { display: grid; gap: 0.5rem; min-width: 0; }
.mail-to .with { max-width: none; flex-wrap: wrap; }
.mail-to .with select { flex: 1 1 15rem; min-width: min(100%, 15rem); }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; padding: 0.35rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); min-height: 2.6rem; box-sizing: border-box; cursor: text; }
.chips:focus-within { border-color: var(--accent); }
.mail .chips input { flex: 1 1 10rem; min-width: 8rem; border: 0; padding: 0.3rem 0.4rem; background: transparent; }
.mail .chips input:focus { outline: none; }
.chip { display: inline-flex; align-items: center; gap: 0.2rem; max-width: 100%; padding: 0.2rem 0.25rem 0.2rem 0.65rem; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-size: 0.86rem; }
.chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.bad { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.chip .x { border: 0; background: none; color: inherit; font-size: 1.05rem; line-height: 1; padding: 0 0.35rem; cursor: pointer; opacity: 0.7; }
.chip .x:hover { opacity: 1; }
.mail-count { font-size: 0.82rem; color: var(--ink-3); }
.mail-count.bad { color: var(--danger); }
.mail-hint { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--ink-3); }
.mail-acts { display: flex; align-items: center; gap: 0.6rem 0.9rem; flex-wrap: wrap; padding-bottom: 0.3rem; }
.mail-said { font-size: 0.88rem; color: var(--ink-3); flex: 1 1 14rem; }
.mail-said.bad { color: var(--danger); }
.mail-view h2 { flex-wrap: wrap; }
.mail-view-for { font-weight: 500; font-size: 0.85rem; color: var(--ink-3); }
.mail-view-subject { margin: -0.3rem 0 0.7rem; font-size: 0.9rem; color: var(--ink-2); }
.mail-view iframe { display: block; width: 100%; height: 480px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.mail-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1.4fr) 4.5rem; gap: 0.3rem 0.8rem; padding: 0.55rem 0; border-top: 1px solid var(--line); font-size: 0.88rem; }
.mail-row > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row .when { color: var(--ink-3); }
.mail-row .ok { color: var(--ink-3); text-align: right; }
.mail-row .ok.bad { color: var(--danger); }
.set .with { display: flex; gap: 0.5rem; align-items: center; max-width: 22rem; }
.set .with select { flex: 1; }
.set .icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
.set .icon-btn[aria-busy='true'] { opacity: 0.5; }
.seg button:disabled { opacity: 0.4; cursor: default; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; }
.steps div { display: grid; gap: 0.15rem; }
.steps dt { color: var(--ink-3); font-size: 0.78rem; }
.steps dd { margin: 0; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.steps .total dd { color: var(--accent); }
.made { background: var(--accent-soft); border-radius: 10px; padding: 0.7rem 0.9rem; margin: 0.9rem 0 0; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.made .code { font-size: 1.2rem; }

/* tables: left-aligned cells; a row that opens something is clickable */
.grid { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.grid th { text-align: left; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); padding: 0 0.6rem 0.5rem; }
.grid td { text-align: left; padding: 0.6rem; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.bleed { margin: 0 -0.6rem; }
.bleed > .none { padding: 0 0.6rem; }
.grid td:first-child { font-weight: 600; }
.grid tr.go { cursor: pointer; }
.grid tr.go:hover td { background: var(--surface-2); }
.grid tr.on td { background: var(--accent-soft); }
.model { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; overflow-wrap: anywhere; }

/* one chat in full */
.transcript-top { display: flex; align-items: flex-start; gap: 0.8rem; }
.transcript-top h2 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.line { padding: 0.9rem 0; border-top: 1px solid var(--line); }
.line header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; margin-bottom: 0.4rem; font-size: 0.85rem; }
.line header span { color: var(--ink-3); }
.line header .cost { font-family: var(--mono); font-size: 0.78rem; }
.line.ai header b { color: var(--accent); }
.line.failed { border-left: 3px solid var(--danger); padding-left: 0.8rem; }
.line .why { margin: 0 0 0.4rem; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-2); overflow-wrap: anywhere; }
.line .why b { color: var(--danger); }
.bad { color: var(--danger); }
.line .text { overflow-wrap: anywhere; min-width: 0; }
.line.me .text { background: var(--me); border-radius: 12px; padding: 0.6rem 0.85rem; white-space: pre-wrap; }
.line.ai .text > :first-child { margin-top: 0; }
.line.ai .text > :last-child { margin-bottom: 0; }
.line.ai .text p, .line.ai .text ul, .line.ai .text ol, .line.ai .text pre, .line.ai .text blockquote, .line.ai .text table { margin: 0 0 0.7rem; }
.line.ai .text ul, .line.ai .text ol { padding-left: 1.4rem; }
.line.ai .text code { font-family: var(--mono); font-size: 0.88em; background: var(--surface-2); padding: 0.1em 0.35em; border-radius: 5px; }
.line.ai .text pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.9rem; overflow-x: auto; }
.line.ai .text pre code { background: none; padding: 0; }
.line.ai .text table { border-collapse: collapse; display: block; overflow-x: auto; }
.line.ai .text th, .line.ai .text td { border: 1px solid var(--line); padding: 0.3rem 0.55rem; text-align: left; }

/* phone: one column; tables become label / value cards */
@media (max-width: 760px) {
  .admin-tabs a { flex-direction: column; gap: 0.25rem; padding: 0.55rem 0.2rem 0.5rem; font-size: 0.78rem; }
  .admin-tabs svg { width: 20px; height: 20px; }
  /* a member card's four tabs fit a phone */
  .subtabs a { padding: 0.4rem 0.62rem; font-size: 0.86rem; }
  .admin-tabs .count { position: absolute; top: 4px; right: calc(50% - 22px); margin: 0; font-size: 0.65rem; padding: 0 0.4rem; }
  .pair { grid-template-columns: 1fr; }
  .kv.two { grid-template-columns: max-content 1fr; }
  .set { grid-template-columns: 1fr; }
  .mail .set.top > span:first-child { padding-top: 0; }
  .mail-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mail-row .when { grid-column: 1 / -1; font-size: 0.8rem; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 0.9rem; }
  .grid, .grid tbody, .grid tr, .grid td { display: block; }
  .grid thead { display: none; }
  .bleed { margin: 0; }
  .bleed > .none { padding: 0; }
  .grid tr { border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.8rem; margin-bottom: 0.6rem; }
  .grid td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.8rem; border: 0; padding: 0.2rem 0; }
  .grid td::before { content: attr(data-label); color: var(--ink-3); font-weight: 400; font-size: 0.82rem; }
  .grid tr.go:hover td, .grid tr.on td { background: none; }
  .grid tr.on { background: var(--accent-soft); }
}

/* a member's images: a card each, the image on top (an edit's own picture small in its corner), then the words and
   what it took */
.pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pic { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.pic.failed { border-left: 3px solid var(--danger); }
.pic-media { position: relative; aspect-ratio: 1; background: var(--surface-2); }
.pic-out, .pic-out img { display: block; width: 100%; height: 100%; }
.pic-out img { object-fit: contain; }
.pic-in { position: absolute; left: 8px; bottom: 8px; width: 30%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 2px solid var(--surface); box-shadow: var(--shadow); }
.pic-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pic-none { display: grid; place-items: center; height: 100%; color: var(--ink-3); font-size: 0.85rem; }
.pic-body { padding: 0.75rem 0.85rem 0.85rem; display: grid; gap: 0.45rem; }
.pic-body header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.pic-body .when { margin-left: auto; color: var(--ink-3); font-size: 0.78rem; }
.pic-prompt { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92rem; }
.pic-mark { display: flex; gap: 0.5rem; align-items: baseline; }
.pic-mark b { flex: none; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #e0352b; color: #fff; font-size: 0.72rem; }
.pic-facts { margin: 0; font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); overflow-wrap: anywhere; }
.pic .why { margin: 0; font-family: var(--mono); font-size: 0.76rem; color: var(--ink-2); overflow-wrap: anywhere; }
.pic .why b { color: var(--danger); }

/* Voice › Memory: each read of the AI's memory, newest first: when and what the member said, what it asked for (chips),
   what it got (its rows: type and title; the text under them when it asked for it). */
.reads { display: grid; gap: 0.2rem; }
.read { padding: 0.75rem 0; border-top: 1px solid var(--line); display: grid; gap: 0.4rem; }
.read:first-child { border-top: 0; padding-top: 0; }
.read .said { margin: 0; font-size: 0.95rem; }
.read .said span { color: var(--ink-3); font-size: 0.8rem; margin-right: 0.5rem; }
.read .asked { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.read .asked .chip { font-size: 0.75rem; }
.read ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; }
.read li { font-size: 0.88rem; }
.read li b { font-weight: 600; color: var(--ink-3); font-size: 0.75rem; margin-right: 0.4rem; text-transform: uppercase; letter-spacing: 0.04em; }
.read li p { margin: 0.15rem 0 0.3rem; color: var(--ink-2); font-size: 0.85rem; }
.read .nothing { color: var(--danger); font-size: 0.88rem; margin: 0; }
/* Voice › Feedback: the words, then what was said and what was on screen, quieter */
.read .ctx { margin: 0; color: var(--ink-3); font-size: 0.82rem; }
.fb-from { margin-bottom: 0.9rem; }

/* Voice › Persona: the instructions, edited in place; what every turn adds, as it is now. */
textarea.persona { width: 100%; box-sizing: border-box; min-height: 22rem; resize: vertical; padding: 0.8rem; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font: 0.9rem/1.55 var(--sans); }
.persona-acts { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; margin-top: 0.7rem; }
.persona-acts .meta { margin: 0 auto 0 0; }
.added { display: grid; gap: 0.8rem; }
.added h3 { margin: 0 0 0.2rem; font-size: 0.8rem; color: var(--ink-3); font-weight: 600; }
.added pre { margin: 0; white-space: pre-wrap; font: 0.85rem/1.5 var(--sans); color: var(--ink-2); }

#v-tune { display: grid; gap: 0.7rem; }
#voice-words .set { grid-template-columns: 9.5rem 1fr; }
/* Voice › Words: a tuning row: its slider, the value (or "Model's own" when not set: the slider is faint) and × to
   go back to the model's own. */
.tune .slide { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.tune input[type=range] { width: 14rem; max-width: 50vw; accent-color: var(--accent); }
.tune.unset input[type=range] { opacity: 0.35; }
.tune output { min-width: 6.5rem; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.tune.unset output { color: var(--ink-3); }
.tune .clear { border: 0; background: none; color: var(--ink-3); font-size: 1.1rem; line-height: 1; padding: 0.2rem 0.4rem; cursor: pointer; }
.tune.unset .clear { visibility: hidden; }

/* a member's videos (admin.js loadVideos): their people with the photos and the phone's score on each, then the videos */
.person { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.person:first-child { border-top: 0; }
.person-photos { display: flex; gap: 6px; flex-basis: 100%; overflow-x: auto; }
.person-photos a { position: relative; flex: none; width: 64px; height: 80px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.person-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-photos span { position: absolute; right: 3px; bottom: 3px; font-size: 0.68rem; font-weight: 700; padding: 0 5px; border-radius: 6px; background: rgb(0 0 0 / 60%); color: #fff; }
.pic-media.vid { aspect-ratio: 9 / 16; max-height: 420px; background: #000; }
.pic-media.vid video { width: 100%; height: 100%; object-fit: contain; display: block; }
.pics.vids { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 12px; }
details.words { margin: 0.4rem 0; }
details.words summary { cursor: pointer; color: var(--ink-2); font-size: 0.85rem; font-weight: 600; }
details.words pre { white-space: pre-wrap; font-size: 0.8rem; background: var(--surface-2); padding: 0.6rem 0.7rem; border-radius: 8px; margin: 0.4rem 0 0; }

/* a member's personas (admin.js loadPersonas): the photos each has now, then the earlier ones */
.persona h2 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 0.6rem; }
.ptile { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.ptile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptile.earlier { opacity: 0.8; }
.ptile .pslot, .ptile .pwhen { position: absolute; left: 0; right: 0; padding: 3px 6px; font-size: 0.68rem; font-weight: 600; color: #fff; background: rgb(0 0 0 / 55%); }
.ptile .pslot { bottom: 0; }
.ptile .pwhen { top: 0; font-weight: 500; }
.ptile .pscore { position: absolute; right: 4px; bottom: 22px; font-size: 0.72rem; font-weight: 700; padding: 0 6px; border-radius: 6px; background: rgb(0 0 0 / 62%); color: #fff; }