/* Styles live in their own file so the page needs no 'unsafe-inline' in
   its Content-Security-Policy - the stored session key makes XSS a real
   threat, not a theoretical one. */

:root {
  --bg: #0d1117;
  --panel: #161b22;
  --raised: #21262d;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  /* White on #2f81f7 is 3.8:1 - under the 4.5:1 AA needs for button text.
     This is 4.6:1 and reads the same at a glance. */
  --accent: #1f6feb;
  /* Too light to put white text on, but that is what makes it a focus ring the
     eye actually catches on this ground. */
  --focus: #58a6ff;
  --ok: #3fb950;
  --warn: #d29922;
  --err: #f85149;
  /* The soft keyboard shrinks the visual viewport, not the layout viewport,
     so the real height is measured in JS and written here. */
  --app-height: 100dvh;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Every control here sits on a dark panel, where the browser's default focus
   ring is often invisible. :focus-visible so a tap never draws one. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
html, body {
  margin: 0; height: 100%; overflow: hidden;
  overscroll-behavior: none;               /* no pull-to-refresh mid-session */
  background: var(--bg); color: var(--text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
#app {
  display: flex; flex-direction: column;
  height: var(--app-height);
  position: fixed; inset: 0;               /* kills iOS rubber-banding */
}

/* ------------------------------------------------------------- pairing -- */
#pairing {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 16px; padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
#logo { width: 56px; height: 56px; }
#pairing h1 { margin: 0; font-size: 26px; letter-spacing: -0.5px; }
#pairing p { margin: 0; color: var(--muted); text-align: center; max-width: 32ch; }
#code {
  width: 100%; max-width: 320px; padding: 16px; text-align: center;
  font: 600 30px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 8px; text-transform: uppercase;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
}
#code:focus { border-color: var(--focus); }
.btn {
  width: 100%; max-width: 320px; padding: 14px; border: 0; border-radius: 12px;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 600;
}
.btn:disabled { opacity: 0.4; }
.btn.secondary { background: var(--panel); color: var(--text); border: 1px solid var(--border); }
#pairError { color: var(--err); min-height: 1.4em; text-align: center; max-width: 34ch; }
#scanner { width: 100%; max-width: 320px; border-radius: 12px; display: none; background: #000; }
#resume {
  display: none; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; max-width: 320px; padding: 16px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
}
#resume p { color: var(--text); }
.hint { font-size: 12px; color: var(--muted); text-align: center; max-width: 34ch; }

/* ------------------------------------------------------------ session -- */
#session { flex: 1; display: none; flex-direction: column; min-height: 0; }
#bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--panel); border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--muted); flex: none;
}
#dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
#dot.ok { background: var(--ok); }
#dot.err { background: var(--err); }
#status { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Was 10px at 0.7 opacity, which put it under 4:1 against the bar. */
#fp { font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.icon-btn {
  background: none; border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 7px 10px; font-size: 12px; flex: none;
  min-width: 40px; min-height: 32px;
}
#termWrap { flex: 1; min-height: 0; position: relative; }
/* The CLI's grid, at the smallest readable text, is still wider than the
   screen. Panning is the only way left to reach the right-hand columns. */
#termWrap.panned #term { overflow-x: auto; }
#term { position: absolute; inset: 0; padding: 4px; }
#banner {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 8px; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 5px 6px 5px 14px; border-radius: 999px;
  background: rgba(210, 153, 34, 0.15); border: 1px solid var(--warn);
  color: var(--warn); font-size: 12px;
  max-width: calc(100% - 24px);
}
#banner[hidden] { display: none; }
#bannerText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Whatever the banner is offering - a retry, a reload onto a new build - is a
   real button anyone can reach, not a tap target hidden in a status message. It
   only appears when there is something to act on. */
#bannerAction {
  flex: none; padding: 5px 11px; border-radius: 999px;
  background: var(--raised); color: var(--text);
  border: 1px solid var(--border); font: inherit; font-size: 12px;
  cursor: pointer; white-space: nowrap;
}
#banner.err { background: rgba(248, 81, 73, 0.15); border-color: var(--err); color: var(--err); }

/* Output arriving below a scrolled-up viewport is otherwise invisible: there is
   no scrollbar on a phone to hint that the buffer moved on. */
#toBottom {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 10px; z-index: 5;
  padding: 8px 16px; border-radius: 999px;
  background: var(--raised); color: var(--text);
  border: 1px solid var(--border); font: inherit; font-size: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); cursor: pointer;
}

/* A TUI needs Esc, Tab and Ctrl, and no phone keyboard offers them. */
#keys {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid var(--border);
  scrollbar-width: none; flex: none;
}
#keys::-webkit-scrollbar { display: none; }
#keys button {
  flex: none; min-width: 46px; padding: 11px 12px;
  background: var(--raised); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font: 500 13px ui-monospace, Menlo, monospace;
  touch-action: manipulation;
}
#keys button:active { background: var(--accent); border-color: var(--accent); color: #fff; }
#keys button.latched { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------------------------------------------------------------- menu -- */
#menu {
  display: none; position: absolute; right: 10px;
  top: calc(46px + env(safe-area-inset-top)); z-index: 10;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 6px; min-width: 190px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
#menu button {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px; background: none; border: 0;
  color: var(--text); font-size: 14px; text-align: left; border-radius: 6px;
}
#menu button:active { background: var(--raised); }
#menu button.danger { color: var(--err); }
#menu .sep { height: 1px; background: var(--border); margin: 5px 2px; }
#menu .val { color: var(--muted); font-size: 12px; font-family: ui-monospace, Menlo, monospace; }