/* Terminal A.
   The visual design is not free-form: the screen is a character grid whose size is
   the profile's declared geometry, so the layout is dictated by --cols and --rows,
   which app.js sets at runtime from /api/pull. Everything else stays out of its way. */

:root {
  --cols: 32;            /* overwritten from the profile at runtime */
  --rows: 6;
  --bg: #0b0d10;
  --panel: #14181d;
  --ink: #e8eaed;
  --muted: #8b949e;
  --line: #232a31;
  --accent: #7ee0c0;
  --warn: #e8b84b;
  --err: #ff8a80;
  --ch: 1ch;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f7f9; --panel: #ffffff; --ink: #12151a; --muted: #5b6470;
    --line: #dde2e8; --accent: #0f8f70; --warn: #8a6300; --err: #b3261e;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

.pane { width: min(100%, 46ch); display: flex; flex-direction: column; gap: 14px; }

/* `display: flex` on a class OUTRANKS the UA stylesheet's [hidden] { display: none },
   so both panes rendered at once and the pairing form -- a password field -- sat on
   top of the live terminal on every load. The attribute was being set correctly the
   whole time; the CSS was quietly ignoring it. Anything that toggles `hidden` needs
   this line, which is why it is not scoped to .pane alone. */
[hidden] { display: none !important; }

h1 { margin: 0; font-size: 1.15rem; letter-spacing: .01em; }
.muted { color: var(--muted); }
.error { color: var(--err); margin: 0; }
.grow { flex: 1; }

/* --- the geometry box -------------------------------------------------- */

.screen {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  /* The box shrink-wraps the frame instead of computing its own width. It used to
     be sized as `--cols * 1ch` resolved HERE, where the font is proportional -- so
     the "32 character" box was 32 of the WRONG character's widths and every full
     line overflowed into a scrollbar. A 32-char line that needs a scrollbar to be
     read is not rendered to a 32-char geometry, whatever the assertions say. */
  inline-size: fit-content;
  max-inline-size: 100%;
  overflow-x: auto;
}

#frame {
  margin: 0;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
  font-size: clamp(13px, 3.6vw, 16px);
  line-height: 1.45;
  white-space: pre;
  color: var(--ink);
  /* 1ch resolves against THIS element's monospace font, which is the only place it
     means what the profile means by chars_per_line. */
  inline-size: calc(var(--cols) * 1ch);
  min-block-size: calc(var(--rows) * 1.45em);
}

/* --- chrome ------------------------------------------------------------ */

.bar { display: flex; align-items: center; gap: 8px; font-size: .78rem; }
.foot { border-top: 1px solid var(--line); padding-top: 10px; }
.under { display: flex; align-items: center; gap: 8px; font-size: .78rem; min-height: 22px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
  font-family: ui-monospace, Consolas, monospace; font-size: .72rem;
}
.chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
#net[data-state="on"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
#net[data-state="off"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

/* --- controls ---------------------------------------------------------- */

.actions { display: flex; gap: 10px; }

button {
  font: inherit; font-size: .9rem;
  padding: 10px 16px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  cursor: pointer; min-height: 44px;   /* a thumb target, not a mouse target */
}
button:hover { border-color: var(--muted); }
button.primary { background: var(--accent); border-color: var(--accent); color: #06120e; font-weight: 600; }
button.link { border: 0; background: none; color: var(--muted); padding: 4px 0; min-height: 0; text-decoration: underline; }

form { display: flex; gap: 8px; }
input {
  flex: 1; font: inherit; padding: 10px 12px; min-height: 44px;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink);
}
input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }