/* viha: one monotone look everywhere. Grey Windows 95 chrome around black keygen panels, one monospace pixel font. */

/* Kaamos, the plain look; .theme-kaamos too, so its card in the dashboard keeps it whatever the dashboard wears */
:root, .theme-kaamos {
  --page: #000;
  --face: #c0c0c0;
  --hi: #ffffff;
  --mid: #dfdfdf;
  --shade: #808080;
  --lo: #0a0a0a;
  --ink: #000;
  --dim: #3a3a3a;
  --well: #ffffff;
  --title-a: #0a0a0a;
  --title-b: #7b7b7b;
  --title-ink: #fff;
  --sel: #000;
  --sel-ink: #fff;
  /* Read by fx.js for the canvas effects */
  --logo: #ffffff;
  --dither: #000000 #555555 #aaaaaa #ffffff;
  --star: #ffffff;
  /* The black keygen panels (banners, cards, the name over the banner) and the shadow under a window */
  --panel: #000;
  --panel-ink: #e4e4e4;
  --panel-hi: #ffffff;
  --panel-mid: #c4c4c4;
  --panel-soft: #c0c0c0;
  --panel-dim: #9a9a9a;
  --panel-edge: #3a3a3a;
  --drop: rgba(0, 0, 0, .8);
  /* What is unsaved: the status text on its panel, and the star on a group's name */
  --alert: #ff4d4d;
  --mark: #9a0000;

  --mono: "VT323", ui-monospace, Consolas, monospace;
  color-scheme: light;
}

/* A page's theme (lib/themes.js): the same windows in other shades, never a colour. Set on the page's <html>, so the
   page behind the window and the starfield take it too; the dashboard draws each in a little window of its own.
   Kaamos is :root above. Every pair of text and its ground keeps at least 4.5:1. */
.theme-hiili {
  --page: #000;
  --face: #262626;
  --hi: #4d4d4d;
  --mid: #363636;
  --shade: #111111;
  --lo: #000;
  --ink: #dcdcdc;
  --dim: #a0a0a0;
  --well: #121212;
  --title-a: #000;
  --title-b: #404040;
  --title-ink: #e4e4e4;
  --sel: #dcdcdc;
  --sel-ink: #000;
  --panel: #3a3a3a;
  --panel-ink: #e4e4e4;
  --panel-hi: #ffffff;
  --panel-mid: #cfcfcf;
  --panel-soft: #cfcfcf;
  --panel-dim: #aaaaaa;
  --panel-edge: #5a5a5a;
  --alert: #ff8080;
  --mark: #ff6b6b;
  color-scheme: dark;
}
.theme-lumi {
  --page: #f2f2f2;
  --face: #e6e6e6;
  --hi: #ffffff;
  --mid: #f3f3f3;
  --shade: #a0a0a0;
  --lo: #505050;
  --ink: #000;
  --dim: #474747;
  --well: #ffffff;
  --title-a: #ffffff;
  --title-b: #a8a8a8;
  --title-ink: #000;
  --sel: #000;
  --sel-ink: #fff;
  --logo: #000000;
  --star: #9a9a9a;
  --panel: #ffffff;
  --panel-ink: #1a1a1a;
  --panel-hi: #000;
  --panel-mid: #333333;
  --panel-soft: #333333;
  --panel-dim: #5a5a5a;
  --panel-edge: #c8c8c8;
  --drop: rgba(0, 0, 0, .25);
  --alert: #b00000;
  --mark: #9a0000;
}
.theme-tuhka {
  --page: #1a1a1a;
  --face: #8e8e8e;
  --hi: #b4b4b4;
  --mid: #a2a2a2;
  --shade: #646464;
  --lo: #262626;
  --ink: #141414;
  --dim: #262626;
  --well: #b8b8b8;
  --title-a: #262626;
  --title-b: #5a5a5a;
  --title-ink: #d2d2d2;
  --sel: #262626;
  --sel-ink: #d2d2d2;
  --logo: #c8c8c8;
  --star: #8c8c8c;
  --dither: #1e1e1e #4a4a4a #8a8a8a #c8c8c8;
  --panel: #222222;
  --panel-ink: #b8b8b8;
  --panel-hi: #d6d6d6;
  --panel-mid: #a6a6a6;
  --panel-soft: #a6a6a6;
  --panel-dim: #8a8a8a;
  --panel-edge: #444444;
  --alert: #ff6b6b;
  --mark: #4a0000;
  color-scheme: dark;
}

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

html { background: var(--page); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.25rem;
  line-height: 1.2;
  overflow-x: hidden;
}

input, textarea, button { font: inherit; color: inherit; }
p { text-wrap: pretty; }
::selection { background: var(--sel); color: var(--sel-ink); }
a { color: inherit; text-underline-offset: .15em; }
:focus-visible { outline: 1px dotted var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

canvas.stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.screen {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* never wider than the screen, whatever a window holds on one line */
  place-items: center;
  padding: 2rem 1rem;
}

/* Bevels: raised for windows and buttons, sunken for fields and black panels */
.kg, .kbtn, .links a, .socials a, .case-opt {
  border: 2px solid;
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow: inset -1px -1px 0 var(--shade), inset 1px 1px 0 var(--mid);
}
.well, .kg-banner, .pic .avatar, .pic .pic-fx, .check span::before, .nfo, .social-icon, .case-eg {
  border: 2px solid;
  border-color: var(--shade) var(--hi) var(--hi) var(--shade);
  box-shadow: inset 1px 1px 0 var(--lo);
  border-radius: 0;
}

/* The window */

.kg {
  width: min(100%, 31rem);
  background: var(--face);
  box-shadow: inset -1px -1px 0 var(--shade), inset 1px 1px 0 var(--mid), 0 0 0 1px #000, 0 1.5rem 4rem var(--drop);
}
.kg.desk-win { width: min(100%, 78rem); }
.kg.dialog { width: min(100%, 27rem); }

.kg-title {
  display: flex;
  align-items: center;
  gap: 1ch;
  margin: 3px;
  padding: 2px 8px;
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
  color: var(--title-ink);
  font-size: 1.125rem;
  letter-spacing: .04em;
}
.kg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kg-banner {
  position: relative;
  height: 9rem;
  margin: 0 6px;
  overflow: hidden;
  background: var(--panel);
}
.banner-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The logo banner is as tall as the art: the text without JavaScript, fx.js sets it otherwise */
.logo-banner { height: auto; }
.js .logo-banner { height: 18rem; }

/* Without JavaScript the block logo shows as text */
.nfo-logo {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  padding: .75rem 0;
  max-width: 100%;
  overflow: hidden;
  font-family: Consolas, "DejaVu Sans Mono", monospace;
  font-size: 6px;   /* the art is 98 columns: this fits a phone */
  line-height: 1;
  color: #fff;
}
.js .nfo-logo { display: none; }

.kg-body { padding: .9rem 1rem 1rem; }

.kg-status {
  display: flex;
  gap: 3px;
  padding: 0 4px 4px;
  font-size: 1.0625rem;
  color: var(--dim);
}
.kg-status > span {
  flex: 1 0 auto;
  min-width: 0;
  padding: 1px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid;
  border-color: var(--shade) var(--hi) var(--hi) var(--shade);
}
/* The last cell is the one that gives way: a long one (the editor's list of addresses) ends in an ellipsis */
.kg-status > span:last-child { flex: 0 1 auto; }

/* Fields */

.pitch { margin: 0 0 .9rem; color: var(--dim); }

.field {
  display: grid;
  grid-template-columns: 10ch minmax(0, 1fr);
  align-items: center;
  gap: 0 1ch;
  margin-bottom: .5rem;
}
.field > label, .field > .label { color: var(--dim); }

.well {
  width: 100%;
  margin: 0;
  padding: 2px 6px;
  background: var(--well);
  color: var(--ink);
  font-size: 1.375rem;
  outline: none;
}
.well:focus, .name-well:focus-within { box-shadow: inset 1px 1px 0 var(--lo), 0 0 0 1px var(--ink); }
.name-well { display: flex; align-items: baseline; }
.name-well .prefix { flex: none; color: var(--dim); }
.name-well input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; outline: none; }

/* Status lines are little black keygen displays */
.lcd {
  min-height: 1.75em;
  background: var(--panel);
  color: var(--panel-ink);
  font-size: 1.25rem;
  overflow-wrap: anywhere;
}

.note { margin: .5rem 0 0; color: var(--dim); font-size: 1.125rem; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Buttons */

.kbtn {
  display: inline-block;
  padding: 3px 12px;
  background: var(--face);
  color: var(--ink);
  border-radius: 0;
  font-size: 1.375rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
}
/* With a letter case picked (a page's window, or the dashboard wearing it), what is drawn in capitals wears that one
   instead (lib/case.js) */
.cased .kbtn, .cased .group legend, .cased .ed-more h2 { text-transform: none; }
.cased .tag, .cased .swap-kind { text-transform: none; }
.kbtn:active {
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow: inset 1px 1px 0 var(--shade);
  padding: 4px 11px 2px 13px;
}
.kbtn:focus-visible { outline: 1px dotted var(--ink); outline-offset: -6px; }
/* The default button carries the extra black frame, as in Windows 95 */
.kbtn.primary { box-shadow: 0 0 0 1px #000, inset -1px -1px 0 var(--shade), inset 1px 1px 0 var(--mid); }
.kbtn:disabled { color: var(--shade); text-shadow: 1px 1px 0 var(--hi); cursor: progress; }
.kbtn.small { padding: 1px 8px; font-size: 1.125rem; }
.kbtn.small:active { padding: 2px 7px 0 9px; }

.buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: .9rem; }
.buttons.two { grid-template-columns: repeat(2, 1fr); }
.buttons.one { grid-template-columns: 1fr; }

.nfo {
  margin: .8rem 0 0;
  padding: 6px 8px;
  background: var(--well);
  color: var(--dim);
  white-space: pre-line;
}
.nfo p { margin: 0; }

/* A bio page */

.bio-banner { height: auto; min-height: 9rem; display: flex; align-items: center; }
.bio-head { position: relative; display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1rem; }
.bio-id { min-width: 0; }
.who {
  margin: 0;
  font-weight: 400;
  font-size: clamp(2.25rem, 9vw, 3rem);
  line-height: .95;
  overflow-wrap: anywhere;
  color: var(--panel-hi);
  text-shadow: 2px 2px 0 var(--panel);
}
.who-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; }
.uid { color: var(--panel-soft); text-shadow: 1px 1px 0 var(--panel); white-space: nowrap; }
/* The page's other names, which all lead here */
.aka { margin: .45rem 0 0; color: var(--panel-dim); text-shadow: 1px 1px 0 var(--panel); overflow-wrap: anywhere; }
.aka-names { color: var(--panel-ink); }
.pic { flex: none; margin: 0; line-height: 0; }
.pic .avatar, .pic .pic-fx { width: 96px; height: 96px; background: var(--panel); object-fit: cover; }
.pic-fx { display: none; image-rendering: pixelated; }
.js .dithered .avatar { display: none; }
.js .dithered .pic-fx { display: block; }

.bio-text { font-size: 1.25rem; color: var(--ink); }

.links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin: .9rem 0 0; padding: 0; list-style: none; }
.links li { min-width: 0; }
.links a {
  display: flex;
  align-items: baseline;
  padding: 3px 10px;
  background: var(--face);
  text-decoration: none;
  font-size: 1.375rem;
}
/* Label and site both give way on narrow screens, ending in an ellipsis instead of running out of the button */
.l-label { flex: 0 1 auto; min-width: 0; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead { flex: 1 1 0; min-width: 2ch; margin: 0 1ch; overflow: hidden; white-space: nowrap; color: var(--shade); }
.lead::before { content: "................................................................................"; }
.l-site { flex: 0 1 auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font-size: 1.125rem; }
.links a:hover, .links a:focus-visible { background: var(--sel); color: var(--sel-ink); outline: none; }
.links a:hover .lead, .links a:hover .l-site, .links a:focus-visible .lead, .links a:focus-visible .l-site { color: inherit; }
.links a:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); }

/* Pixel icons: 16×16 bitmaps at 2×, the same pixel size as the text and pictures */
.px { display: block; width: 32px; height: 32px; fill: currentColor; shape-rendering: crispEdges; }

.socials { display: flex; flex-wrap: wrap; gap: 5px; margin: .9rem 0 0; padding: 0; list-style: none; }
.socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--face);
  color: var(--ink);
}
.socials a:hover, .socials a:focus-visible { background: var(--sel); color: var(--sel-ink); outline: none; }
.socials a:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); box-shadow: inset 1px 1px 0 var(--shade); }

/* Embeds: live cards in black keygen panels, pictures dithered at 2× */
.embeds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: .9rem 0 0; padding: 0; list-style: none; }
.embed {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px 6px 6px;
  background: var(--panel);
  color: var(--panel-ink);
  border: 2px solid;
  border-color: var(--shade) var(--hi) var(--hi) var(--shade);
}
.embed-pic { width: 64px; height: 64px; margin: 0; }
.embed .pic .avatar, .embed .pic .pic-fx { width: 64px; height: 64px; border: 0; box-shadow: none; }
.embed-noimg { display: grid; place-items: center; color: var(--panel-hi); border: 1px solid var(--panel-edge); }
.embed-text { min-width: 0; }
.embed-text p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embed-kind { font-size: 1rem; color: var(--panel-dim); }
.embed-title { font-size: 1.375rem; color: var(--panel-hi); }
.embed-sub { color: var(--panel-mid); }
.embed-go { align-self: center; }

/* Discord status as a little square: full, half, crossed, empty */
.dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 2px solid var(--panel-hi); vertical-align: 0; }
.dot.online { background: var(--panel-hi); }
.dot.idle { background: linear-gradient(135deg, var(--panel-hi) 50%, transparent 50%); }
.dot.dnd { background: linear-gradient(var(--panel-hi), var(--panel-hi)) center / 100% 2px no-repeat; }

/* Dashboard: a toolbar that stays at the top (save and its status, the page, log out) over three columns; two on
   a tablet; one on a phone, where the save bar runs along the bottom of the screen */

.ed-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -.9rem -1rem .9rem;
  padding: 6px 1rem;
  background: var(--face);
  border-bottom: 1px solid var(--shade);
  box-shadow: 0 1px 0 var(--hi);
}
.ed-save { display: flex; gap: 6px; flex: 1 1 30rem; min-width: 0; margin: 0; }
.ed-save .lcd { flex: 1 1 auto; min-width: 0; min-height: 0; margin: 0; display: flex; align-items: center; }
.ed-nav { display: flex; gap: 6px; }

/* Unsaved: the status turns red and says what, and each group with changes is starred */
.lcd.alert { color: var(--alert); }
.lcd.alert::before { content: "■"; margin-right: 1ch; }
.group.changed > legend::after { content: "*"; margin-left: .6ch; color: var(--mark); }

.ed-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; align-items: start; }
.ed-col { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.ed-col > .group { margin: 0; }
/* The columns follow the dashboard window's own width, which the preview beside it takes from on a wide screen */
.desk-win { container: desk / inline-size; }
@container desk (min-width: 45rem) {
  .ed-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-areas: "a b" "c b"; }
  .ed-a { grid-area: a; }
  .ed-b { grid-area: b; }
  .ed-c { grid-area: c; }
}
@container desk (min-width: 72rem) {
  .ed-cols { grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr) minmax(16rem, 22rem); grid-template-areas: "a b c"; }
  /* The side column is too narrow for the address and its button side by side */
  .ed-c .mail-row { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}
@media (max-width: 47.99rem) {
  .desk .screen { padding-bottom: 6rem; }
  .ed-bar { position: static; }
  .ed-nav { flex: 1 1 100%; }
  .ed-nav .kbtn { flex: 1 1 0; }
  .ed-save {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    flex-direction: row-reverse;
    padding: 8px;
    background: var(--face);
    border-top: 2px solid var(--hi);
    box-shadow: 0 -1px 0 var(--shade), 0 -8px 24px rgba(0, 0, 0, .6);
  }
  /* Fingers, not a mouse */
  .desk .kbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  .desk .well { min-height: 44px; }
  .desk .kbtn.icon { width: 44px; }
  .desk .check { min-height: 44px; }
}

/* On a wide screen the page shows beside the dashboard in a window of its own, as what is picked and typed so far
   would make it (app.js keeps it current). The toolbar's Esikatselu puts it away and brings it back. */
.preview-win, .desk .ed-nav .pv-toggle { display: none; }
@media (min-width: 70rem) {
  .desk .ed-nav .pv-toggle { display: inline-block; }
  .desk-screen.with-preview {
    grid-template-columns: minmax(0, 78rem) minmax(22rem, 31rem);
    justify-content: center;
    place-items: start stretch;
    gap: 1.25rem;
  }
  .desk-screen.with-preview .desk-win { width: 100%; }
  .desk-screen.with-preview .preview-win { display: block; position: sticky; top: 1rem; width: 100%; }
}
.pv-toggle[aria-pressed="true"] {
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow: inset 1px 1px 0 var(--shade);
  background: repeating-conic-gradient(var(--hi) 0 25%, var(--face) 0 50%) 0 0 / 2px 2px;
}
/* Just the page's window, on the dashboard's background (the page's own); scrolls by itself when taller than the screen */
.pv-page { max-height: calc(100vh - 2rem); overflow-y: auto; }
.pv-page > .kg { margin: 0 auto; }

/* Etched group boxes */
.group {
  margin: 0 0 .9rem;
  padding: .6rem .8rem .8rem;
  border: 1px solid var(--shade);
  box-shadow: 1px 1px 0 var(--hi), inset 1px 1px 0 var(--hi);
}
.group legend { padding: 0 .4rem; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; }
.group > label, .ed-more form > label { display: block; margin: .6rem 0 .2rem; color: var(--dim); }
.group > label:first-of-type { margin-top: 0; }
.group > label.check { margin: 0; color: var(--ink); }
.group textarea { resize: vertical; line-height: 1.15; }
.group .lcd { margin-top: .6rem; }
.group .note { margin: 0 0 .4rem; }

.avatar-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.avatar-tools { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.avatar-tools:has(input[type=file]:focus-visible) label.kbtn { outline: 1px dotted var(--ink); outline-offset: -6px; }
.group > .avatar-row + label.check { margin-top: .5rem; }
#avatar-status:empty { display: none; }

.links-edit { margin: 0 0 .5rem; padding: 0; list-style: none; }
.link-row { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 5px; margin-bottom: 5px; }
.row-tools { display: flex; gap: 3px; }
.kbtn.icon { width: 2.2rem; padding: 2px 0; text-transform: none; }

.social-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px; align-items: stretch; margin-bottom: 5px; }
.social-icon { display: grid; place-items: center; width: 40px; background: var(--panel); color: var(--panel-hi); }

/* Where a Discord profile card comes from: the server's icon, what to do there, and the way in */
.discord-hint { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 10px; align-items: start; margin: .2rem 0 .7rem; }
.discord-hint .social-icon { height: 40px; }
.discord-hint .kbtn { grid-column: 2; justify-self: start; }
.group .discord-hint .note { margin: 0; }

.mail-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: .3rem; }
.mail-addresses { margin: .5rem 0 0; }
.group .mail-spam { margin: .4rem 0 0; }
.mail-tools { display: flex; gap: 6px; margin-top: .6rem; }

/* Checkboxes, skinned */
.check { position: relative; display: flex; align-items: center; padding: 2px 0; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check span::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  vertical-align: -2px;
  background: var(--well);
}
.check input:checked + span::before { box-shadow: inset 1px 1px 0 var(--lo), inset 0 0 0 3px var(--well), inset 0 0 0 8px var(--ink); }
.check small { color: var(--dim); font-size: 1.0625rem; }
.check:has(input:focus-visible) span { outline: 1px dotted var(--ink); outline-offset: 2px; }
.check.locked { cursor: default; color: var(--dim); }

/* Letter case: a card per choice, raised until picked and pressed in once it is (checkered, like a Windows 95 toggle
   that is on). Its name is written in its own case, over the owner's name as the page will show it. */
.case-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 6px; }
.case-opt { position: relative; display: grid; gap: 4px; min-width: 0; padding: 4px 6px 6px; background: var(--face); cursor: pointer; }
.case-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.case-name { display: flex; align-items: center; color: var(--dim); font-size: 1.125rem; }
.case-name::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2px solid;
  border-color: var(--shade) var(--hi) var(--hi) var(--shade);
  border-radius: 50%;
  background: var(--well);
  box-shadow: inset 1px 1px 0 var(--lo);
}
.case-eg {
  display: block;
  padding: 1px 8px 2px;
  background: var(--panel);
  color: var(--panel-dim);
  font-size: 1.625rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.case-opt:hover .case-eg { color: var(--panel-mid); }
.case-opt:has(input:checked) {
  padding: 5px 5px 5px 7px;
  background: repeating-conic-gradient(var(--hi) 0 25%, var(--face) 0 50%) 0 0 / 2px 2px;
  border-color: var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow: inset 1px 1px 0 var(--shade);
}
.case-opt:has(input:checked) .case-name { color: var(--ink); }
.case-opt:has(input:checked) .case-name::before { box-shadow: inset 1px 1px 0 var(--lo), inset 0 0 0 3px var(--well), inset 0 0 0 6px var(--ink); }
.case-opt:has(input:checked) .case-eg { color: var(--panel-hi); }
.case-opt:has(input:focus-visible) .case-name { outline: 1px dotted var(--ink); outline-offset: 1px; }

/* Theme: the same cards, each with a little window in its theme's shades (its class sets them for that window):
   the page around it, the title bar, the banner with the name, a link */
.theme-eg {
  display: grid;
  gap: 4px;
  margin: 5px;
  padding: 4px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow: 0 0 0 5px var(--page);
}
.theme-eg-bar { height: 8px; background: linear-gradient(90deg, var(--title-a), var(--title-b)); }
.theme-eg-banner {
  padding: 2px 6px;
  background: var(--panel);
  color: var(--panel-hi);
  font-size: 1.375rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.theme-eg-link {
  height: 14px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow: inset -1px -1px 0 var(--shade), inset 1px 1px 0 var(--mid);
}

/* Background: the same cards, smaller, each running its animation as a preview on a black panel */
.fx-opts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); }
.fx-eg { display: block; width: 100%; height: 44px; background: var(--panel); }

/* Emoticons: a black panel of them under the bio, shut until opened */
.emo { margin-top: 6px; }
.emo-panel {
  margin-top: 6px;
  max-height: 16rem;
  overflow-y: auto;
  padding: 4px 8px 8px;
  background: var(--panel);
  border: 2px solid;
  border-color: var(--shade) var(--hi) var(--hi) var(--shade);
}
.emo-group { margin: 6px 0 4px; color: var(--panel-dim); font-size: 1rem; }
.emo-list { display: flex; flex-wrap: wrap; gap: 4px; }
.emo-pick {
  min-width: 2.4rem;
  padding: 2px 8px;
  background: transparent;
  color: var(--panel-ink);
  border: 1px solid var(--panel-edge);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.emo-pick:hover, .emo-pick:focus-visible { background: var(--panel-ink); color: var(--panel); outline: none; }
@media (max-width: 47.99rem) { .emo-pick { min-height: 44px; } }

/* Names: the main one tagged, each other one with its buttons and whatever is under way with it, offers to answer on a
   black panel, and room for more */
.names-list { margin: 0 0 .5rem; padding: 0; list-style: none; }
.name-row { padding: 6px 0; border-bottom: 1px solid var(--shade); box-shadow: 0 1px 0 var(--hi); }
.name-addr { font-size: 1.375rem; overflow-wrap: anywhere; }
.tag { display: inline-block; margin-left: .6ch; padding: 0 6px; background: var(--panel); color: var(--panel-hi); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; vertical-align: .15em; }
.name-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.name-note { margin: 5px 0 0; color: var(--dim); font-size: 1.0625rem; }
.name-note .kbtn { margin-left: .4ch; }
.offer-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  margin: 0 0 .5rem;
  padding: 6px 8px;
  background: var(--panel);
  color: var(--panel-ink);
  border: 2px solid;
  border-color: var(--shade) var(--hi) var(--hi) var(--shade);
}
.offer-in p { margin: 0; overflow-wrap: anywhere; }
.offer-in p::before { content: "■"; margin-right: 1ch; color: var(--alert); }
.names-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.names-tools .kbtn:disabled { cursor: default; }
.names-count { margin-left: auto; color: var(--dim); }
.group .names-tools + .note { margin: .4rem 0 0; }
#names-status:empty { display: none; }

/* The names' dialogs: windows over the dashboard, which dims behind them */
.kg.dlg { width: min(calc(100% - 1rem), 30rem); max-height: calc(100vh - 1rem); padding: 0; overflow: auto; color: var(--ink); }
.dlg::backdrop { background: rgba(0, 0, 0, .55); }
.dlg h2 { margin: 0 0 .3rem; font-weight: 400; font-size: 1.5rem; }
.dlg .note { margin: .3rem 0 .6rem; }
.dlg form > label, .give-ask > label, .give-code > .label { display: block; margin: .6rem 0 .2rem; color: var(--dim); }
.dlg .lcd { margin: .6rem 0 0; }
.dlg .field .lcd { margin: 0; }
.dlg [data-status]:empty { display: none; }
.dlg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.dlg-row .lcd { margin: 0; }
.dlg-foot { padding-top: .5rem; border-top: 1px solid var(--shade); box-shadow: inset 0 1px 0 var(--hi); }
.code { letter-spacing: .12em; }
output.code { display: flex; align-items: center; justify-content: center; margin: 0; font-size: 1.75rem; color: var(--panel-hi); }
input.code { font-size: 1.625rem; text-align: center; text-transform: uppercase; }
.swap-give { margin: 0; font-size: 1.375rem; overflow-wrap: anywhere; }
.swap-cards { display: grid; gap: 6px; margin: .6rem 0 0; }
.swap-card {
  display: grid;
  grid-template-columns: 6ch minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
  padding: 6px 10px;
  background: var(--panel);
  color: var(--panel-ink);
  border: 2px solid;
  border-color: var(--shade) var(--hi) var(--hi) var(--shade);
}
.swap-card p { margin: 0; }
.swap-kind { grid-row: span 2; color: var(--panel-dim); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; }
.swap-name { color: var(--panel-hi); font-size: 1.5rem; overflow-wrap: anywhere; }
.swap-sub { color: var(--panel-mid); font-size: 1.0625rem; }

.ed-more summary { color: var(--dim); cursor: pointer; }
.ed-more h2 { margin: .9rem 0 .3rem; font-size: 1.25rem; font-weight: 400; text-transform: uppercase; }
.ed-more .kbtn { margin-top: .6rem; }
.ed-more .status { min-height: 1.2em; margin: .4rem 0 0; }

/* Dialogs: errors and confirmations */

.err-row { display: flex; gap: 1rem; align-items: flex-start; }
.err-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  border: 2px solid var(--shade);
  font-size: 2rem;
  line-height: 1;
}
.err-icon.ok { border-radius: 0; font-size: 1.75rem; }
.err-row h1 { margin: 0; font-weight: 400; font-size: 1.75rem; }
.err-row h2 { margin: 0; }
.err-row p { margin: .4rem 0 0; overflow-wrap: anywhere; }

@media (max-width: 34rem) {
  .screen { padding: 1rem .5rem; place-items: start center; }
  .kg-body { padding: .8rem .7rem .9rem; }
  .field { grid-template-columns: minmax(0, 1fr); }
  .field > label, .field > .label { margin-bottom: 2px; }
  .buttons { grid-template-columns: 1fr 1fr; }
  .buttons .kbtn:last-child:nth-child(3) { grid-column: 1 / -1; }
  .link-row { grid-template-columns: 1fr auto; }
  .link-row [name=url] { grid-column: 1 / -1; grid-row: 2; }
  .link-row .row-tools { grid-column: 2; grid-row: 1; }
  .embed { grid-template-columns: 64px minmax(0, 1fr); }
  .embed-go { grid-column: 2; justify-self: start; }
  .social-row { grid-template-columns: auto 1fr; }
  .social-row .row-tools { grid-column: 2; justify-self: end; }
  .mail-row { grid-template-columns: 1fr; }
  .offer-in { grid-template-columns: 1fr; }
  .offer-in .kbtn { justify-self: start; }
  .ed-bar { margin: -.8rem -.7rem .9rem; padding: 6px .7rem; }
  .bio-head { gap: .75rem; padding: .75rem; }
}