/*
  fTelnet: theme-aware stylesheet
  Copyright (C) Rick Parrish, R&M Software

  Phase 3 introduces CSS custom properties (variables) for all
  chrome colors, fonts, spacing, and shape. Themes override the
  variables; the base rules below read them.

  Active theme is controlled by `data-theme` on the fTelnet
  container (and on the menu popup, since the popup escapes the
  container by living on body for overflow reasons).

  Built-in themes:
    - classic     (default) — the original Phase 1 look
    - dos-classic — Windows 3.1-era gray bevels, CGA accents
*/

/* ──────────────────────────────────────────────────────────
   CJK chrome font (Japanese, beta.21)

   The UI chrome's normal fonts (Courier New, Georgia, etc.) have no
   Japanese glyphs. This is a Noto Sans JP face SUBSET to only the
   characters used by the Japanese catalog (~190 chars, ~18 KB), so
   it adds negligible weight. It is appended as a FALLBACK on the
   chrome containers below — Latin/Cyrillic/Greek text keeps using
   the existing fonts; only codepoints those fonts lack (i.e. the
   Japanese ones) fall through to this face.

   IMPORTANT: this affects ONLY the HTML chrome. The terminal canvas
   still renders the retro CP437/PETSCII/Topaz bitmap fonts and is
   completely untouched by this.

   If the Japanese catalog (src/i18n/ja.ts) gains new characters,
   the subset must be regenerated to include them (see the release
   notes), or those new glyphs will fall back to a system font.
   ────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Noto Sans JP Subset';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/noto-sans-jp-subset.woff2') format('woff2');
}

/* Append the Japanese subset face as a trailing fallback on the
   chrome containers that hold translatable text. The browser uses
   it only for codepoints the primary font lacks, so non-Japanese
   languages are visually unchanged. The terminal canvas is not a
   text element and is unaffected. */
.fTelnetStatusBar,
.fTelnetMenuButton,
.fTelnetMenuPopup,
.fTelnetMenuButtons,
.fTelnetSettingsPanel,
.fTelnetInfoDialog,
.fTelnetUploadConfirm,
.fTelnetDropOverlayMessage,
.fTelnetUserManual {
  font-family: var(--ft-ui-font-family, 'Courier New', monospace),
    'Noto Sans JP Subset';
}

/* ──────────────────────────────────────────────────────────
   Theme: classic (default)

   Active when `data-theme="classic"` is set on an ancestor.
   fTelnetClient sets this attribute on both the container and
   the menu popup at construction time, so it's effectively the
   default.

   (Earlier drafts of this CSS had a `:not([data-theme])` fallback
   selector that matched inner divs without the attribute — but
   that caused a bug: the inner `.fTelnetMenuButtons` div inside
   `<f-menu-popup data-theme="dos-classic">` would re-inherit
   classic-theme variables via the fallback selector matching
   itself, defeating the parent's theme. Removed.)
   ────────────────────────────────────────────────────────── */
[data-theme='classic'] {
  /* Colors */
  --ft-ui-bg: white;
  --ft-tooltip-bg: #1565c0;
  --ft-tooltip-fg: #ffffff;
  --ft-ui-fg: black;
  --ft-ui-border: #000;
  --ft-ui-border-soft: #666;

  --ft-status-active-bg: blue;
  --ft-status-active-fg: white;
  --ft-status-active-border: blue;

  --ft-status-error-bg: red;
  --ft-status-error-fg: white;
  --ft-status-error-border: red;

  --ft-focus-warning-bg: red;
  --ft-focus-warning-fg: white;
  --ft-focus-warning-border: red;

  --ft-scrollback-bg: green;
  --ft-scrollback-fg: white;
  --ft-scrollback-border: green;
  --ft-scrollback-link-fg: white;

  --ft-popup-bg: white;
  --ft-popup-fg: black;
  --ft-popup-border: #666;
  --ft-popup-button-bg: white;
  --ft-popup-button-fg: black;
  --ft-popup-button-border: black;

  /* Popup header strip — colored band across the top of dialogs
     (FUploadConfirm and any future titled-dialog component).
     Classic = blue chrome, matching the status bar's active state. */
  --ft-popup-header-bg: blue;
  --ft-popup-header-fg: white;

  /* Warning callout — soft yellow-on-white "attention" box.
     Used for content cautions like "uploads via fTelnetProxy". */
  --ft-warning-bg: rgba(255, 215, 0, 0.18);
  --ft-warning-border: #d4a400;
  --ft-warning-fg: #5a4400;

  /* Typography */
  --ft-ui-font: 14px Arial, Helvetica, sans-serif;
  --ft-ui-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);

  /* Shape & spacing */
  --ft-button-radius: 5px;
  --ft-button-border-width: 1px;
  --ft-button-padding: 8px 12px;

  /* Bevel — classic theme has no bevel, but vars must exist so
     the base rules can reference them unconditionally. The
     dos-classic theme overrides these. */
  --ft-bevel-light: transparent;
  --ft-bevel-shadow: transparent;
  --ft-bevel-outer-dark: transparent;
}

/* ──────────────────────────────────────────────────────────
   Theme: dos-classic (Windows 3.1-era gray bevels + CGA accents)
   ────────────────────────────────────────────────────────── */
[data-theme='dos-classic'] {
  /* The 25%-gray Windows 3.1 panel color. Every panel-shareware
     program of '88-'95 used this exact shade (#c0c0c0); it's
     recognizable on sight to anyone over 35. */
  --ft-ui-bg: #c0c0c0;
  --ft-tooltip-bg: #000080;
  --ft-tooltip-fg: #ffffff;
  --ft-ui-fg: #000000;
  --ft-ui-border: #000000;
  --ft-ui-border-soft: #808080;

  /* Status bar: gray panel with a CGA-blue accent border.
     Error state replaces blue with red. */
  --ft-status-active-bg: #c0c0c0;
  --ft-status-active-fg: #000000;
  --ft-status-active-border: #000080; /* CGA dark blue */

  --ft-status-error-bg: #c0c0c0;
  --ft-status-error-fg: #800000;
  --ft-status-error-border: #800000; /* CGA dark red */

  /* Focus warning: yellow-on-black warning strip. DOS apps used
     yellow heavily for "attention" callouts (e.g. PKZIP's
     "OK to overwrite?" prompts). */
  --ft-focus-warning-bg: #000000;
  --ft-focus-warning-fg: #ffff00; /* CGA yellow */
  --ft-focus-warning-border: #ffff00;

  /* Scrollback bar: dark cyan / black, mimicking the Norton
     Commander info bars. */
  --ft-scrollback-bg: #008080; /* CGA dark cyan */
  --ft-scrollback-fg: #ffffff;
  --ft-scrollback-border: #008080;
  --ft-scrollback-link-fg: #ffff00;

  /* Popup menu: gray panel with beveled buttons. */
  --ft-popup-bg: #c0c0c0;
  --ft-popup-fg: #000000;
  --ft-popup-border: #000000;
  --ft-popup-button-bg: #c0c0c0;
  --ft-popup-button-fg: #000000;
  --ft-popup-button-border: transparent; /* bevels do the work */

  /* Popup header: CGA dark blue with white — the unmistakable
     Windows 3.1 / Norton Commander dialog title bar. Preserves
     the pre-theming hardcoded look exactly. */
  --ft-popup-header-bg: #000080;
  --ft-popup-header-fg: #ffffff;

  /* Warning callout: CGA yellow on dim yellow. The "attention"
     palette that every DOS shareware installer used. */
  --ft-warning-bg: rgba(255, 255, 85, 0.2);
  --ft-warning-border: #ffff55;
  --ft-warning-fg: #000000;

  /* Typography: keep system sans-serif (Win 3.1 used MS Sans
     Serif, which on modern systems falls back to whatever the
     system has). Bolder text-shadow killed. */
  --ft-ui-font: 11px 'MS Sans Serif', Tahoma, Geneva, sans-serif;
  --ft-ui-text-shadow: none;

  /* Shape: square corners, slightly tighter padding. */
  --ft-button-radius: 0;
  --ft-button-border-width: 2px;
  --ft-button-padding: 4px 12px;

  /* Bevel colors — light edge on top/left, shadow on bottom/right.
     The classic 4-color bevel for a "raised" element. */
  --ft-bevel-light: #ffffff;
  --ft-bevel-shadow: #808080;
  --ft-bevel-outer-dark: #000000;
}

/* ──────────────────────────────────────────────────────────
   Base styles — all read through CSS variables
   ────────────────────────────────────────────────────────── */

.fTelnetContainer {
  box-sizing: content-box;
  margin: auto;
}

.fTelnetContainer .fTelnetButtons,
.fTelnetContainer .fTelnetScrollback,
.fTelnetContainer .fTelnetFocusWarning,
.fTelnetContainer .fTelnetClientContainer,
.fTelnetContainer .fTelnetStatusBar {
  box-sizing: content-box;
}

.fTelnetContainer canvas {
  display: block;
  margin: auto;
}

.fTelnetClientContainer {
  border: 1px solid var(--ft-ui-border);
  position: relative;
  margin: auto;
}

.fTelnetCrtCanvas {
  cursor: text;
  display: block;
  margin: auto;
}

/* ── Status bar ── */

/* Base rule: shared properties regardless of state */
.fTelnetStatusBar {
  border-width: var(--ft-button-border-width);
  border-style: solid;
  font: var(--ft-ui-font);
  margin: auto;
  padding: 5px;
  text-align: left;
}

/* Idle / active states (initial + connecting + connected): use
   the "active" palette. Most of the lifetime is spent here. */
.fTelnetStatusBar[data-state='idle'],
.fTelnetStatusBar[data-state='active'] {
  background-color: var(--ft-status-active-bg);
  border-color: var(--ft-status-active-border);
  color: var(--ft-status-active-fg);
}

/* Error state (security failure or disconnect): error palette. */
.fTelnetStatusBar[data-state='error'] {
  background-color: var(--ft-status-error-bg);
  border-color: var(--ft-status-error-border);
  color: var(--ft-status-error-fg);
}

/* dos-classic: bevel the status bar (sunken / inverted bevel,
   like an old TUI "info bar"). The bevel color overrides the
   border-color set by the state rules above. */
[data-theme='dos-classic'] .fTelnetStatusBar {
  border-top-color: var(--ft-bevel-shadow);
  border-left-color: var(--ft-bevel-shadow);
  border-bottom-color: var(--ft-bevel-light);
  border-right-color: var(--ft-bevel-light);
}

/* dos-classic error state: keep the bevel, but also add an
   accent border so the error is visible (the bevel-only look
   reads as "still normal"). We use box-shadow as a "second
   border" since the actual border is the bevel. */
[data-theme='dos-classic'] .fTelnetStatusBar[data-state='error'] {
  box-shadow: inset 0 0 0 1px var(--ft-status-error-border);
  color: var(--ft-status-error-fg);
}

.fTelnetMenuButton,
.fTelnetConnectButton {
  background-color: var(--ft-ui-bg);
  border: var(--ft-button-border-width) solid var(--ft-ui-border);
  border-radius: var(--ft-button-radius);
  color: var(--ft-ui-fg);
  display: inline-block;
  font: var(--ft-ui-font);
  margin-right: 10px;
  padding: var(--ft-button-padding);
  text-align: center;
  text-decoration: none;
  text-shadow: var(--ft-ui-text-shadow);
  cursor: pointer;
}

/* dos-classic: beveled buttons. Border becomes the bevel; press
   state inverts the bevel for a "pressed" look. */
[data-theme='dos-classic'] .fTelnetMenuButton,
[data-theme='dos-classic'] .fTelnetConnectButton {
  border-color: var(--ft-bevel-light) var(--ft-bevel-outer-dark) var(--ft-bevel-outer-dark)
    var(--ft-bevel-light);
  box-shadow: inset 1px 1px 0 0 var(--ft-bevel-light),
    inset -1px -1px 0 0 var(--ft-bevel-shadow);
}

[data-theme='dos-classic'] .fTelnetMenuButton:active,
[data-theme='dos-classic'] .fTelnetConnectButton:active {
  border-color: var(--ft-bevel-outer-dark) var(--ft-bevel-light) var(--ft-bevel-light)
    var(--ft-bevel-outer-dark);
  box-shadow: inset 1px 1px 0 0 var(--ft-bevel-shadow),
    inset -1px -1px 0 0 var(--ft-bevel-light);
}

/* ── Focus warning ── */

.fTelnetFocusWarning {
  background-color: var(--ft-focus-warning-bg);
  border: var(--ft-button-border-width) solid var(--ft-focus-warning-border);
  color: var(--ft-focus-warning-fg);
  font: var(--ft-ui-font);
  margin: auto;
  padding: 5px;
  text-align: center;
}

/* ── Scrollback bar ── */

.fTelnetScrollback {
  background-color: var(--ft-scrollback-bg);
  border: var(--ft-button-border-width) solid var(--ft-scrollback-border);
  color: var(--ft-scrollback-fg);
  font: var(--ft-ui-font);
  margin: auto;
  padding: 5px;
  text-align: center;
}

.fTelnetScrollback a {
  color: var(--ft-scrollback-link-fg);
  padding: 0 5px;
  text-decoration: none;
}

/* ── Menu popup ── */

.fTelnetMenuButtons {
  background-color: var(--ft-popup-bg);
  border: 1px solid var(--ft-popup-border);
  color: var(--ft-popup-fg);
  margin-right: 10px;
  padding: 8px 12px;
  position: absolute;
  text-decoration: none;
  text-shadow: var(--ft-ui-text-shadow);
  /* Phase 3 Stage 1: moved from inline style.zIndex='1500' in
     fTelnetClient.ts to CSS. Same value. */
  z-index: 1500;
}

/* dos-classic: bevel the popup container itself */
[data-theme='dos-classic'] .fTelnetMenuButtons {
  border-color: var(--ft-bevel-light) var(--ft-bevel-outer-dark) var(--ft-bevel-outer-dark)
    var(--ft-bevel-light);
  border-width: 2px;
  box-shadow: inset 1px 1px 0 0 var(--ft-bevel-light),
    inset -1px -1px 0 0 var(--ft-bevel-shadow);
}

.fTelnetMenuButtons a {
  background-color: var(--ft-popup-button-bg);
  border: var(--ft-button-border-width) solid var(--ft-popup-button-border);
  border-radius: var(--ft-button-radius);
  color: var(--ft-popup-button-fg);
  display: block;
  font: var(--ft-ui-font);
  padding: var(--ft-button-padding);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* dos-classic: bevel popup buttons too */
[data-theme='dos-classic'] .fTelnetMenuButtons a {
  border-color: var(--ft-bevel-light) var(--ft-bevel-outer-dark) var(--ft-bevel-outer-dark)
    var(--ft-bevel-light);
  box-shadow: inset 1px 1px 0 0 var(--ft-bevel-light),
    inset -1px -1px 0 0 var(--ft-bevel-shadow);
}

[data-theme='dos-classic'] .fTelnetMenuButtons a:active {
  border-color: var(--ft-bevel-outer-dark) var(--ft-bevel-light) var(--ft-bevel-light)
    var(--ft-bevel-outer-dark);
  box-shadow: inset 1px 1px 0 0 var(--ft-bevel-shadow),
    inset -1px -1px 0 0 var(--ft-bevel-light);
}

.fTelnetMenuButtons select {
  background-color: var(--ft-ui-bg);
  border: var(--ft-button-border-width) solid var(--ft-ui-border);
  border-radius: var(--ft-button-radius);
  color: var(--ft-ui-fg);
  display: block;
  font: var(--ft-ui-font);
  padding: var(--ft-button-padding);
  width: 100%;
}

/* Option styling — most browsers respect these on <option>, though
   the native popup list rendering varies wildly across browser+OS.
   This gets us readable text in Firefox on Windows; Chrome/Safari
   on macOS may still use system styling. A custom dropdown
   component would be the only fully-portable solution. */
.fTelnetMenuButtons select option {
  background-color: var(--ft-ui-bg);
  color: var(--ft-ui-fg);
}

/* dos-classic: sunken-bevel select (inverted from the buttons) */
[data-theme='dos-classic'] .fTelnetMenuButtons select {
  background-color: var(--ft-ui-bg);
  border-color: var(--ft-bevel-shadow) var(--ft-bevel-light) var(--ft-bevel-light)
    var(--ft-bevel-shadow);
  border-width: 2px;
}

.fTelnetMenuButtons table {
  background-color: var(--ft-popup-bg);
}

.fTelnetMenuButtons td {
  padding: 2px;
}

/* ── Hover effects: classic has none; dos-classic adds a subtle
      tint so modern mouse users can locate the cursor. ── */

[data-theme='dos-classic'] .fTelnetMenuButton:hover,
[data-theme='dos-classic'] .fTelnetConnectButton:hover,
[data-theme='dos-classic'] .fTelnetMenuButtons a:hover {
  /* Win 3.1 didn't have hover states (the focus model predated
     them), but a faint tint helps locate the cursor. */
  background-color: #cccccc;
}

/* ──────────────────────────────────────────────────────────
   Settings panel (Phase 3 Stage 2)

   Lives at the top of the z-stack, like the menu popup. Default
   styles are deliberately plain — the panel inherits theme
   variables and looks like the surrounding chrome.
   ────────────────────────────────────────────────────────── */

.fTelnetSettingsPanel {
  background-color: var(--ft-popup-bg);
  border: 1px solid var(--ft-popup-border);
  color: var(--ft-popup-fg);
  font: var(--ft-ui-font);
  /* Phase 5 (beta.6): panel is a two-row grid, three columns each:
       Row 1:  Theme | Protocol | Language (wide)
       Row 2:  Sound | Touch    | placeholder (wide)
     About spans full width below. The third column of each row is
     wider (flex 2 vs 1) to fit the Language picker's two internal
     sub-columns. The Theme column (six radios) is the tallest box
     and sets row 1's height; the other boxes in each row stretch
     to match so bottom edges align. Width widened from the earlier
     three-equal-column layout to accommodate the wide column. */
  min-width: 680px;
  max-width: 900px;
  padding: 12px;
  position: absolute;
  text-shadow: var(--ft-ui-text-shadow);
  /* Sits above the menu popup; the menu may still be open when
     Settings... is clicked, though fTelnetClient closes it. */
  z-index: 1600;
}

/* Two-row grid (Phase 5 beta.6). Each row is a flex container of
   three columns:
     Row 1:  Theme | Protocol | Language (wide)
     Row 2:  Sound | Touch    | placeholder (wide)
   The third column in each row is WIDER (the Language picker needs
   room for its two internal sub-columns). The two rows are stacked
   with a gap; About spans full width below. */
/* Two-row settings layout on a shared 4-column grid so every column
   edge snaps to the same vertical grid lines in BOTH rows. (The old
   flexbox approach couldn't align the rows: a 3-box row subtracts 2
   gaps while a 4-box row subtracts 3, so the 1:1:2 vs 1:1:1:1 splits
   drifted apart. A fixed grid template fixes this — identical tracks,
   identical gap, both rows.)

   Row 1:  Theme(1) | Protocol(1) | Language(spans 2)
   Row 2:  Sound(1) | Touch(1) | Terminal(1) | placeholder(1)        */
.fTelnetSettingsPanelColumns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
  align-items: stretch;
}

/* Terminal group options — Option 4 grid. Each option label is
   `display: contents` so its checkbox and text become direct grid
   cells: checkbox / label / checkbox / label across two option-columns.
   This makes the checkboxes form two true vertical lines and the labels
   start at the same x within each column, regardless of label width. */
.fTelnetSettingsPanelOptionGrid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 8px 12px;
  align-items: center;
  /* The Terminal box shares the centered group class with Sound/Touch
     (for equal height), but its option grid must stay LEFT-justified:
     labels sit immediately right of their checkboxes, not centered.
     Override the parent's centering here. */
  justify-items: start;
  text-align: left;
  align-self: stretch;
  width: 100%;
}
.fTelnetSettingsPanelGridOption {
  display: contents;
  cursor: pointer;
}
.fTelnetSettingsPanelGridOption > input {
  margin: 0;
}

/* Tooltips (Style A): a filled rounded box that appears ABOVE the
   hovered item with a small centered pointer arrow below it. Pure CSS,
   shown on hover. Two anchor classes: `...Tip` (on a span, used inside
   the contents-grid Terminal options) and `...TipOption` (on a label,
   used for the single Sound/Touch/Protocol items). Both get a relative
   position so the absolutely-positioned tooltip anchors to them.
   Per-theme colours are set below in each theme block; these are the
   neutral defaults. */
.fTelnetSettingsPanelTip,
.fTelnetSettingsPanelTipOption {
  position: relative;
}
.fTelnetSettingsPanelTip[data-tooltip]::before,
.fTelnetSettingsPanelTip[data-tooltip]::after,
.fTelnetSettingsPanelTipOption[data-tooltip]::before,
.fTelnetSettingsPanelTipOption[data-tooltip]::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease-in;
  z-index: 50;
}
/* The box */
.fTelnetSettingsPanelTip[data-tooltip]::before,
.fTelnetSettingsPanelTipOption[data-tooltip]::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 5px;
  font: var(--ft-ui-font);
  font-size: 12px;
  line-height: 1.2;
  background: var(--ft-tooltip-bg, #1565c0);
  color: var(--ft-tooltip-fg, #ffffff);
  box-shadow: none;
}
/* The pointer arrow */
.fTelnetSettingsPanelTip[data-tooltip]::after,
.fTelnetSettingsPanelTipOption[data-tooltip]::after {
  content: '';
  bottom: calc(100% + 3px);
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--ft-tooltip-bg, #1565c0);
}
/* Empty tooltips draw nothing */
.fTelnetSettingsPanelTip[data-tooltip='']::before,
.fTelnetSettingsPanelTip[data-tooltip='']::after,
.fTelnetSettingsPanelTipOption[data-tooltip='']::before,
.fTelnetSettingsPanelTipOption[data-tooltip='']::after {
  content: none;
}
/* Reveal on hover */
.fTelnetSettingsPanelTip[data-tooltip]:hover::before,
.fTelnetSettingsPanelTip[data-tooltip]:hover::after,
.fTelnetSettingsPanelTipOption[data-tooltip]:hover::before,
.fTelnetSettingsPanelTipOption[data-tooltip]:hover::after {
  opacity: 1;
}

/* Row 2 boxes (Sound, Touch, Terminal) center their contents so the
   short boxes look balanced next to the taller Terminal box. The grid's
   align-items:stretch already gives them equal height; this centers the
   text within that height, horizontally and vertically. */
.fTelnetSettingsPanelGroupCentered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Second row sits directly above About; keep its bottom margin so
   it doesn't crowd the About fieldset. (Both rows use the same
   class, so the margin is uniform — the About fieldset's own
   spacing handles the rest.) */

.fTelnetSettingsPanelColumn {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The wide column (Language in row 1) spans two grid tracks, so its
   left edge aligns with Terminal below and its right edge aligns
   with the placeholder below — both flush to the panel edge. */
.fTelnetSettingsPanelColumnWide {
  grid-column: span 2;
}

/* Language fieldset: side-by-side sub-columns of radios. Functional
   languages are chunked into columns of at most 5 (see
   FSettingsPanel.languageColumns()). With 11 languages that's three
   columns: [5 langs] [5 langs] [1 lang].

   The columns are spread evenly across the full fieldset width —
   each takes an equal share — so they fill the box rather than
   bunching on the left. (Earlier, while a fourth "Other" placeholder
   column existed, the columns were content-sized and tightly packed
   to fit; the placeholders are gone now, so the real language
   columns get the whole width.) */
.fTelnetSettingsPanelLanguageColumns {
  display: flex;
  gap: 16px;
}

.fTelnetSettingsPanelLanguageColumn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Fieldsets inside columns no longer need the bottom margin
   since the parent .fTelnetSettingsPanelColumn provides the gap. */
.fTelnetSettingsPanelColumn .fTelnetSettingsPanelGroup {
  margin-bottom: 0;
}

/* Make the only/last fieldset in each column stretch to fill the
   row's height, so all boxes in a row share the same bottom edge
   regardless of content height. In row 1 the Theme box (6 radios) is
   tallest and Protocol/Language stretch to match; in row 2 the
   shorter boxes stretch to the row height. Targeting :last-child
   keeps this robust as content changes. The column itself is a flex
   child of the grid cell (align-items: stretch above), so it fills
   the cell height; this makes its inner fieldset fill the column. */
.fTelnetSettingsPanelColumn .fTelnetSettingsPanelGroup:last-child {
  flex: 1 1 auto;
}


/* The About fieldset spans full width below the two columns. */
.fTelnetSettingsPanelGroupFullWidth {
  margin-top: 8px;
}

/* Phase 5: The Protocol column has a bold sub-header above the
   default-protocol radios ("Default") and a horizontal divider
   separating those from the Auto Detect checkbox below. The
   sub-header is a plain text node — NOT a nested fieldset legend
   — to keep the visual weight light (a double border around the
   radios would look heavier than the rest of the panel). */
.fTelnetSettingsPanelSubheader {
  font-weight: bold;
  margin: 2px 0 4px;
}

.fTelnetSettingsPanelDivider {
  border-top: 1px solid var(--ft-ui-border-soft);
  margin: 6px 0;
}

[data-theme='dos-classic'] .fTelnetSettingsPanelDivider {
  /* Sunken-bevel mini line, matching the fieldset's TUI bevel. */
  border-top-color: var(--ft-bevel-shadow);
  box-shadow: 0 1px 0 var(--ft-bevel-light);
}

/* Disabled placeholder radio in the Protocol column — reserved
   slot for a future protocol option. Visible but greyed; pointer
   is the not-allowed cursor so users get the hint. The label text
   is rendered as an empty placeholder span so the row keeps
   vertical rhythm with the other two radios. */
.fTelnetSettingsPanelOptionDisabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.fTelnetSettingsPanelOptionDisabled input[type='radio'] {
  cursor: not-allowed;
}

.fTelnetSettingsPanelPlaceholder {
  /* Reserve the same vertical space a label would, so the
     placeholder row aligns with the other radios above. About one
     line-height of empty inline content. */
  display: inline-block;
  min-height: 1em;
  min-width: 0;
}

/* Empty placeholder fieldset at the bottom of the third column
   (below Sound and Touch). Bordered, no legend — reserved room for
   a future setting without dedicating a whole fourth column to it.
   As the :last-child of its column it stretches (flex: 1 1 auto,
   set above) to fill the leftover vertical space so its bottom
   edge aligns with the taller Theme column. The min-height keeps
   it from collapsing to nothing on very short panels. */
.fTelnetSettingsPanelGroupReserved {
  min-height: 40px;
}

/* About section sub-columns for left/right info split. */
.fTelnetSettingsPanelAboutColumns {
  display: flex;
  gap: 24px;
}

.fTelnetSettingsPanelAboutColumn {
  flex: 1 1 0;
  min-width: 0;
}

/* dos-classic: bevel the panel container, like the popup. */
[data-theme='dos-classic'] .fTelnetSettingsPanel {
  border-color: var(--ft-bevel-light) var(--ft-bevel-outer-dark) var(--ft-bevel-outer-dark)
    var(--ft-bevel-light);
  border-width: 2px;
  box-shadow: inset 1px 1px 0 0 var(--ft-bevel-light),
    inset -1px -1px 0 0 var(--ft-bevel-shadow);
}

.fTelnetSettingsPanelHeader {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 8px;
  text-align: center;
}

/* dos-classic: header gets the classic Windows-3.1 blue title bar */
[data-theme='dos-classic'] .fTelnetSettingsPanelHeader {
  background-color: #000080;
  color: #ffffff;
  font-weight: bold;
  margin: -8px -8px 8px -8px;
  padding: 4px 8px;
  text-align: left;
}

.fTelnetSettingsPanelGroup {
  border: 1px solid var(--ft-ui-border-soft);
  margin: 0 0 8px;
  padding: 8px;
}

[data-theme='dos-classic'] .fTelnetSettingsPanelGroup {
  /* Grouped fieldset gets a sunken bevel — TUI style */
  border-color: var(--ft-bevel-shadow) var(--ft-bevel-light) var(--ft-bevel-light)
    var(--ft-bevel-shadow);
  border-width: 2px;
}

.fTelnetSettingsPanelGroup legend {
  padding: 0 4px;
}

.fTelnetSettingsPanelOption {
  cursor: pointer;
  display: block;
  padding: 2px 0;
}

.fTelnetSettingsPanelNumber {
  border: var(--ft-button-border-width) solid var(--ft-ui-border);
  font: var(--ft-ui-font);
  width: 60px;
}

[data-theme='dos-classic'] .fTelnetSettingsPanelNumber {
  /* Sunken bevel for the number input */
  border-color: var(--ft-bevel-shadow) var(--ft-bevel-light) var(--ft-bevel-light)
    var(--ft-bevel-shadow);
  border-width: 2px;
  background-color: var(--ft-ui-bg);
}

.fTelnetSettingsPanelFooter {
  margin-top: 8px;
  text-align: right;
}

/* About section — attribution + version info. Tighter, smaller,
   muted color to feel like metadata rather than a control. Links
   inherit body foreground color and rely on underline + bold for
   differentiation, so they're readable in every theme without
   depending on theme-accent vars that may collide with the panel
   background (early DOS-Classic bug: --ft-popup-button-bg evaluated
   to #c0c0c0 which was identical to the panel bg, making links
   invisible). */
.fTelnetSettingsPanelAbout {
  font: var(--ft-ui-font);
  /* Was 0.92em — too small to read comfortably. The About box has
     structured info (copyright, attribution, links) that benefits
     from a slightly more generous size + line-height than the
     dense form controls above. 1.1em gives ~15px in classic theme
     (14px base) and ~12px in dos-classic (11px base) — both
     comfortably readable. line-height bumped to match. */
  font-size: 1.1em;
  line-height: 1.5;
  color: var(--ft-ui-fg);
  opacity: 0.9;
}

.fTelnetSettingsPanelAboutLine {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fTelnetSettingsPanelAboutSpacer {
  height: 0.5em;
}

.fTelnetSettingsPanelAbout a {
  color: inherit;
  font-weight: bold;
  text-decoration: underline;
}

.fTelnetSettingsPanelAbout a:hover {
  text-decoration: none;
}

.fTelnetSettingsPanelClose {
  background-color: var(--ft-popup-button-bg);
  border: var(--ft-button-border-width) solid var(--ft-popup-button-border);
  border-radius: var(--ft-button-radius);
  color: var(--ft-popup-button-fg);
  cursor: pointer;
  display: inline-block;
  font: var(--ft-ui-font);
  padding: var(--ft-button-padding);
  text-decoration: none;
}

[data-theme='dos-classic'] .fTelnetSettingsPanelClose {
  border-color: var(--ft-bevel-light) var(--ft-bevel-outer-dark) var(--ft-bevel-outer-dark)
    var(--ft-bevel-light);
  box-shadow: inset 1px 1px 0 0 var(--ft-bevel-light),
    inset -1px -1px 0 0 var(--ft-bevel-shadow);
}

[data-theme='dos-classic'] .fTelnetSettingsPanelClose:active {
  border-color: var(--ft-bevel-outer-dark) var(--ft-bevel-light) var(--ft-bevel-light)
    var(--ft-bevel-outer-dark);
  box-shadow: inset 1px 1px 0 0 var(--ft-bevel-shadow),
    inset -1px -1px 0 0 var(--ft-bevel-light);
}

[data-theme='dos-classic'] .fTelnetSettingsPanelClose:hover {
  background-color: #cccccc;
}

/* ──────────────────────────────────────────────────────────
   Phase 5: Upload UI — drop overlay + confirm dialog

   Drop overlay: full-viewport translucent dim layer with a
   centered "Drop file here" message. Appears while the user is
   dragging a file over the page; disappears on drop or
   dragleave-out-of-page. z-index: 2000 puts it above menu/
   settings popups (1500/1600) so it's visible during any state.

   Confirm dialog: viewport-centered modal shown after the user
   drops or picks a file. Same positioning approach as
   FSettingsPanel.
   ────────────────────────────────────────────────────────── */

.fTelnetDropOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  pointer-events: none; /* don't intercept the drop itself */
}

.fTelnetDropOverlayMessage {
  text-align: center;
  color: #ffffff;
  font-family: var(--ft-ui-font-family, 'Courier New', monospace);
  border: 3px dashed #55ffff;
  border-radius: 8px;
  padding: 48px 64px;
  background: rgba(0, 0, 170, 0.4);
}

.fTelnetDropOverlayIcon {
  font-size: 64px;
  margin-bottom: 16px;
}

.fTelnetDropOverlayTitle {
  font-size: 28px;
  font-weight: bold;
  color: #ffff55;
  margin-bottom: 8px;
}

.fTelnetDropOverlaySubtitle {
  font-size: 18px;
  color: #55ffff;
}

/* ───── User Manual popup (Phase 5 beta.3) ───── */

/*
 * Floating, draggable, resizable popup that displays the user
 * manual. Independent of the menu popup and the settings panel;
 * stays open across menu/settings interactions; closes only when
 * the user dismisses it or the session disconnects.
 *
 * Geometry (left/top/width/height) is applied inline by the
 * component; this stylesheet only defines appearance, font sizes,
 * and the resizer affordance.
 */
.fTelnetUserManual {
  position: fixed;
  background-color: var(--ft-popup-bg);
  border: 1px solid var(--ft-popup-border);
  color: var(--ft-popup-fg);
  font: var(--ft-ui-font);
  text-shadow: var(--ft-ui-text-shadow);
  /* User can grab the bottom-right corner to resize. min-width /
     min-height keep the popup readable; max keep it from spilling
     way past the viewport on small screens. */
  resize: both;
  overflow: hidden;
  min-width: 400px;
  min-height: 300px;
  max-width: 95vw;
  max-height: 95vh;
  /* Above the menu popup and the settings panel — the manual is
     a separate top-level surface and shouldn't be obscured. */
  z-index: 1700;
  /* Subtle shadow to lift it off the BBS screen. Themes can
     override or disable. */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  /* Flex column so the body grows to fill below the title bar. */
  display: flex;
  flex-direction: column;
}

/*
 * Title bar — drag handle, contains the title and close button.
 * cursor:move signals to the user that it's draggable. The close
 * button gets cursor:pointer overriding that.
 */
.fTelnetUserManualHeader {
  background-color: var(--ft-popup-header-bg, #000080);
  color: var(--ft-popup-header-fg, #ffffff);
  padding: 6px 12px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
  user-select: none;
  flex-shrink: 0;
}

.fTelnetUserManualTitle {
  /* Empty rule reserved for theme overrides. */
}

/*
 * Close button — '✕' in the title bar. Styled as a plain link to
 * match the look of close buttons elsewhere in the chrome, but
 * with its own click handler that dispatches `manual-close`.
 */
.fTelnetUserManualClose {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  padding: 0 4px;
  /* Slightly larger hit area for touch users. */
  min-width: 20px;
  text-align: center;
}

.fTelnetUserManualClose:hover {
  color: var(--ft-popup-header-fg-hover, #ffff00);
}

/*
 * Scrollable body. Larger font size than the rest of the UI
 * chrome because this is reading material — users explicitly
 * told us they don't want small print. 14px is roughly 1.2x the
 * usual UI font.
 */
.fTelnetUserManualBody {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 18px;
  font-size: 14px;
  line-height: 1.5;
}

.fTelnetUserManualBody h1 {
  font-size: 20px;
  margin: 8px 0 12px;
}

.fTelnetUserManualBody h2 {
  font-size: 18px;
  margin: 20px 0 8px;
  /* Slight border-top to visually separate sections. Themes can
     override the color. */
  padding-top: 12px;
  border-top: 1px solid var(--ft-ui-border-soft, rgba(255, 255, 255, 0.2));
}

.fTelnetUserManualBody h2:first-of-type {
  /* First H2 (the "Contents" header) sits right under the intro,
     no extra separator needed. */
  border-top: none;
  padding-top: 0;
}

.fTelnetUserManualBody p {
  margin: 8px 0;
}

.fTelnetUserManualBody ul {
  margin: 8px 0;
  padding-left: 24px;
}

.fTelnetUserManualBody li {
  margin: 4px 0;
}

.fTelnetUserManualBody code {
  background-color: var(--ft-ui-border-soft, rgba(255, 255, 255, 0.15));
  padding: 1px 4px;
  border-radius: 2px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

/*
 * Table of contents — anchor links that scroll within the popup's
 * own body to the matching section. Styled like a list of links
 * with a tighter line-height to fit comfortably without dominating
 * the first screen of content.
 */
.fTelnetUserManualToc {
  margin: 8px 0 24px;
  padding-left: 24px;
}

.fTelnetUserManualToc li {
  margin: 2px 0;
}

.fTelnetUserManualToc a {
  /* Red instead of the theme's --ft-link-fg (cyan in most themes)
     — cyan-on-gray failed accessibility for a lot of users. This
     bright red reads cleanly against every theme's popup
     background and stays visually distinct from the bold-text
     emphasis in section headings. Gothic gets a brighter override
     below since its near-black-with-red-tint bg would mute a
     mid-red. */
  color: #dd2222;
  text-decoration: none;
}

.fTelnetUserManualToc a:hover {
  text-decoration: underline;
}

[data-theme='gothic'] .fTelnetUserManualToc a {
  /* Gothic's --ft-popup-bg is #0a0000 (near-black, faintly red).
     A mid-red would blend; pump to near-pure brightness. */
  color: #ff5555;
}

[data-theme='crt-green'] .fTelnetUserManualToc a {
  /* CRT-Green's --ft-popup-bg is #001a00 (very dark green).
     Red gets muddied against the green; white is the natural
     CRT-on-phosphor link affordance and pairs with the
     theme's text-shadow glow elsewhere. */
  color: #ffffff;
}

/* ─────  Per-theme manual variants  ─────
 *
 * The manual's base CSS already pulls theme tokens (popup-bg,
 * popup-fg, popup-border, ui-font, text-shadow) so every theme
 * gets the right palette and font automatically. These overrides
 * add the signature touches each theme is known for: the TUI
 * sunken-bevel for dos-classic, phosphor glow for crt-green,
 * uppercase HUD for cyberpunk, etc.
 */

/* dos-classic — Win 3.1 TUI bevels */
[data-theme='dos-classic'] .fTelnetUserManual {
  border: 2px outset var(--ft-bevel-light, #ffffff);
  box-shadow: 2px 2px 0 var(--ft-bevel-shadow, #000000);
}

[data-theme='dos-classic'] .fTelnetUserManualBody h2 {
  border-top-color: var(--ft-bevel-shadow);
}

/* crt-green — phosphor glow on body text, brighter heading
   shadow to feel like a CRT scanning across them */
[data-theme='crt-green'] .fTelnetUserManualBody,
[data-theme='crt-green'] .fTelnetUserManualHeader,
[data-theme='crt-green'] .fTelnetUserManualClose {
  text-shadow: var(--ft-ui-text-shadow);
}

[data-theme='crt-green'] .fTelnetUserManualBody h1,
[data-theme='crt-green'] .fTelnetUserManualBody h2 {
  /* Beefier glow on the green headings — they're the
     "look-at-me" elements in a CRT aesthetic. */
  text-shadow:
    0 0 4px currentColor,
    0 0 8px currentColor;
}

/* cyberpunk — uppercase title and TOC, neon letter-spacing */
[data-theme='cyberpunk'] .fTelnetUserManualHeader {
  text-transform: uppercase;
  letter-spacing: 2px;
}

[data-theme='cyberpunk'] .fTelnetUserManualBody h1,
[data-theme='cyberpunk'] .fTelnetUserManualBody h2 {
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* gothic — let the deeper red blood-red title bar speak for
   itself; just emphasize headings with the theme's accent. The
   TOC override above already handles the link contrast. */
[data-theme='gothic'] .fTelnetUserManualBody h1,
[data-theme='gothic'] .fTelnetUserManualBody h2 {
  color: var(--ft-popup-header-bg);
}

/* cartoon — thick borders, rounded corners, Comic Sans (already
   inherited via popup font token) */
[data-theme='cartoon'] .fTelnetUserManual {
  border-width: 3px;
  border-radius: 12px;
}

[data-theme='cartoon'] .fTelnetUserManualHeader {
  border-radius: 9px 9px 0 0;
}

[data-theme='cartoon'] .fTelnetUserManualBody h1,
[data-theme='cartoon'] .fTelnetUserManualBody h2 {
  /* Beefier text outline feel — cartoon themes love thick
     bordered text. */
  -webkit-text-stroke: 0.5px currentColor;
}

/* Confirm dialog */
.fTelnetUploadConfirm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--ft-popup-bg);
  border: 1px solid var(--ft-popup-border);
  color: var(--ft-popup-fg);
  font: var(--ft-ui-font);
  min-width: 400px;
  max-width: 600px;
  padding: 0;
  text-shadow: var(--ft-ui-text-shadow);
  z-index: 1700; /* above settings (1600) and menu (1500) */
}

[data-theme='dos-classic'] .fTelnetUploadConfirm {
  border-color: var(--ft-bevel-light) var(--ft-bevel-outer-dark)
    var(--ft-bevel-outer-dark) var(--ft-bevel-light);
  border-width: 2px;
  box-shadow: inset 1px 1px 0 0 var(--ft-bevel-light),
    inset -1px -1px 0 0 var(--ft-bevel-shadow);
}

.fTelnetUploadConfirmHeader {
  font-weight: bold;
  font-size: 1.1em;
  padding: 4px 12px;
  background-color: var(--ft-popup-header-bg);
  color: var(--ft-popup-header-fg);
}

.fTelnetUploadConfirmBody {
  padding: 12px;
}

.fTelnetUploadConfirmRow {
  margin-bottom: 6px;
  display: flex;
  gap: 8px;
}

.fTelnetUploadConfirmLabel {
  font-weight: bold;
  min-width: 80px;
}

.fTelnetUploadConfirmValue {
  flex: 1 1 auto;
  word-break: break-all;
}

/* Phase 5 Delta 3: multi-file batch UI.

   The details toggle is an inline link that flips between
   "▸ Show details" and "▾ Hide details" to expand/collapse the
   per-file list. Styled like the existing about-section links
   (inherited fg color, underline) so it looks native to any
   theme without per-theme overrides.

   The file list itself is a vertical stack of compact rows
   (index + name + size) with a fixed max-height + scrollbar so
   batches of 50+ files don't blow out the dialog. */
.fTelnetUploadConfirmDetailsToggle {
  color: inherit;
  text-decoration: underline;
  font-size: 0.9em;
  cursor: pointer;
}

.fTelnetUploadConfirmDetailsToggle:hover {
  text-decoration: none;
}

.fTelnetUploadConfirmFileList {
  margin-top: 4px;
  max-height: 12em;
  overflow-y: auto;
  border: 1px solid var(--ft-ui-border-soft);
  padding: 4px;
  font-size: 0.9em;
}

.fTelnetUploadConfirmFileRow {
  display: flex;
  gap: 8px;
  padding: 2px 4px;
  align-items: baseline;
}

.fTelnetUploadConfirmFileRow:nth-child(even) {
  background: var(--ft-warning-bg);
  /* Reuse warning-bg as a zebra-stripe accent. It's a soft tinted
     fill in every theme, so it provides just enough row separation
     without introducing yet another token. */
  opacity: 0.7;
}

.fTelnetUploadConfirmFileIndex {
  flex: 0 0 auto;
  min-width: 2em;
  text-align: right;
  opacity: 0.6;
}

.fTelnetUploadConfirmFileName {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fTelnetUploadConfirmFileSize {
  flex: 0 0 auto;
  opacity: 0.7;
}

.fTelnetUploadConfirmWarning {
  margin-top: 12px;
  padding: 8px;
  background: var(--ft-warning-bg);
  border: 1px solid var(--ft-warning-border);
  color: var(--ft-warning-fg);
  font-size: 0.9em;
}

.fTelnetUploadConfirmFooter {
  padding: 8px 12px;
  text-align: right;
  border-top: 1px solid var(--ft-ui-border-soft);
}

.fTelnetUploadConfirmCancel,
.fTelnetUploadConfirmSend {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 16px;
  background-color: var(--ft-popup-button-bg);
  color: var(--ft-popup-button-fg);
  text-decoration: none;
  border: 1px solid var(--ft-popup-border);
}

.fTelnetUploadConfirmSend {
  font-weight: bold;
}

[data-theme='dos-classic'] .fTelnetUploadConfirmCancel,
[data-theme='dos-classic'] .fTelnetUploadConfirmSend {
  border-color: var(--ft-bevel-light) var(--ft-bevel-outer-dark)
    var(--ft-bevel-outer-dark) var(--ft-bevel-light);
  border-width: 2px;
  border-radius: 0;
  padding: 2px 14px;
}

[data-theme='dos-classic'] .fTelnetUploadConfirmCancel:active,
[data-theme='dos-classic'] .fTelnetUploadConfirmSend:active {
  border-color: var(--ft-bevel-outer-dark) var(--ft-bevel-light)
    var(--ft-bevel-light) var(--ft-bevel-outer-dark);
}

.fTelnetUploadConfirmCancel:hover,
.fTelnetUploadConfirmSend:hover {
  background-color: var(--ft-popup-button-bg-hover, var(--ft-popup-button-bg));
}

/* ──────────────────────────────────────────────────────────
   FUploadConfirm: per-theme cosmetic touches

   The base rules above pull every color from theme tokens, so
   the dialog already looks coherent in every theme. These
   add-ons just match the typographic/border idioms each theme
   uses elsewhere — uppercase HUD labels in cyberpunk, italic
   serif headers in gothic, thick black border under the cartoon
   header strip, the CRT phosphor glow for crt-green.
   ────────────────────────────────────────────────────────── */

[data-theme='crt-green'] .fTelnetUploadConfirmHeader,
[data-theme='crt-green'] .fTelnetUploadConfirmBody,
[data-theme='crt-green'] .fTelnetUploadConfirmFooter,
[data-theme='crt-green'] .fTelnetUploadConfirmCancel,
[data-theme='crt-green'] .fTelnetUploadConfirmSend {
  text-shadow: var(--ft-ui-text-shadow);
}

[data-theme='cyberpunk'] .fTelnetUploadConfirmHeader {
  text-transform: uppercase;
  letter-spacing: 2px;
}

[data-theme='cyberpunk'] .fTelnetUploadConfirmCancel,
[data-theme='cyberpunk'] .fTelnetUploadConfirmSend {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
}

[data-theme='cyberpunk'] .fTelnetUploadConfirmCancel:hover,
[data-theme='cyberpunk'] .fTelnetUploadConfirmSend:hover {
  background-color: #ff00aa;
  color: #0a0014;
}

[data-theme='gothic'] .fTelnetUploadConfirmHeader {
  font-style: italic;
  font-family: 'Georgia', 'Garamond', serif;
  border-bottom: 1px solid #8b0000;
}

[data-theme='gothic'] .fTelnetUploadConfirmCancel:hover,
[data-theme='gothic'] .fTelnetUploadConfirmSend:hover {
  background-color: #2a0000;
  color: #ff6666;
}

[data-theme='cartoon'] .fTelnetUploadConfirm {
  border-width: 3px;
  border-radius: 8px;
  /* Clip the rounded corners around the header strip too. */
  overflow: hidden;
}

[data-theme='cartoon'] .fTelnetUploadConfirmHeader {
  border-bottom: 3px solid #000000;
}

[data-theme='cartoon'] .fTelnetUploadConfirmWarning {
  border-width: 3px;
  border-radius: 4px;
}

[data-theme='cartoon'] .fTelnetUploadConfirmCancel,
[data-theme='cartoon'] .fTelnetUploadConfirmSend {
  border-radius: 8px;
  border-width: 3px;
}

/* ───── Info Dialog (Phase 5 beta.4) ─────
 *
 * Themed replacement for the browser's built-in alert() for
 * informational messages. Title bar + larger readable body text +
 * theme-aware chrome, matching the rest of the fTelnet popups.
 * Acknowledge-only: a single OK button (Escape/Enter/click-outside
 * also dismiss). Geometry centers on the viewport like
 * FUploadConfirm. Body font is bumped above the chrome default
 * because this is reading material, per user feedback that the
 * native alert text was too small.
 */
.fTelnetInfoDialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--ft-popup-bg);
  border: 1px solid var(--ft-popup-border);
  color: var(--ft-popup-fg);
  font: var(--ft-ui-font);
  min-width: 360px;
  max-width: 520px;
  padding: 0;
  text-shadow: var(--ft-ui-text-shadow);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  /* Above settings (1600) and the upload confirm (1700) — an info
     dialog is the topmost thing when shown. */
  z-index: 1750;
}

.fTelnetInfoDialogHeader {
  font-weight: bold;
  font-size: 1.1em;
  padding: 6px 14px;
  background-color: var(--ft-popup-header-bg);
  color: var(--ft-popup-header-fg);
}

.fTelnetInfoDialogBody {
  padding: 14px 16px;
  /* Larger than the chrome default — this is reading material, and
     the native alert it replaces was uncomfortably small. */
  font-size: 15px;
  line-height: 1.5;
}

.fTelnetInfoDialogParagraph {
  margin: 0 0 10px;
}

.fTelnetInfoDialogParagraph:last-child {
  margin-bottom: 0;
}

.fTelnetInfoDialogFooter {
  padding: 0 16px 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.fTelnetInfoDialogOk {
  background-color: var(--ft-popup-header-bg);
  color: var(--ft-popup-header-fg);
  border: 1px solid var(--ft-popup-border);
  font: var(--ft-ui-font);
  font-size: 14px;
  padding: 5px 18px;
  cursor: pointer;
}

.fTelnetInfoDialogOk:hover {
  filter: brightness(1.15);
}

/* Cancel button in the confirm dialog: reuses the OK button's themed
   shape but reads as a secondary/neutral action — softer body colors
   instead of the accented header colors, so the primary (OK) button
   stays visually dominant. Themed via the same CSS variables, so it
   adapts across all themes automatically. */
.fTelnetConfirmDialogCancel {
  background-color: var(--ft-ui-bg);
  color: var(--ft-ui-fg);
}

/* dos-classic — TUI bevel border + raised OK button. */
[data-theme='dos-classic'] .fTelnetInfoDialog {
  border-color: var(--ft-bevel-light) var(--ft-bevel-outer-dark)
    var(--ft-bevel-outer-dark) var(--ft-bevel-light);
  border-width: 2px;
  box-shadow: inset 1px 1px 0 0 var(--ft-bevel-light),
    inset -1px -1px 0 0 var(--ft-bevel-shadow);
}

[data-theme='dos-classic'] .fTelnetInfoDialogOk {
  border-color: var(--ft-bevel-light) var(--ft-bevel-outer-dark)
    var(--ft-bevel-outer-dark) var(--ft-bevel-light);
  border-width: 2px;
}

[data-theme='dos-classic'] .fTelnetInfoDialogOk:active {
  border-color: var(--ft-bevel-outer-dark) var(--ft-bevel-light)
    var(--ft-bevel-light) var(--ft-bevel-outer-dark);
}

/* crt-green — phosphor glow on text. */
[data-theme='crt-green'] .fTelnetInfoDialogHeader,
[data-theme='crt-green'] .fTelnetInfoDialogBody,
[data-theme='crt-green'] .fTelnetInfoDialogOk {
  text-shadow: var(--ft-ui-text-shadow);
}

/* cyberpunk — uppercase HUD header + OK. */
[data-theme='cyberpunk'] .fTelnetInfoDialogHeader {
  text-transform: uppercase;
  letter-spacing: 2px;
}

[data-theme='cyberpunk'] .fTelnetInfoDialogOk {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
}

/* cartoon — thick rounded border + rounded OK button. */
[data-theme='cartoon'] .fTelnetInfoDialog {
  border-width: 3px;
  border-radius: 12px;
}

[data-theme='cartoon'] .fTelnetInfoDialogHeader {
  border-radius: 9px 9px 0 0;
}

[data-theme='cartoon'] .fTelnetInfoDialogOk {
  border-radius: 8px;
  border-width: 3px;
}

/* ──────────────────────────────────────────────────────────
   Theme: crt-green (Phase 3 Stage 3)

   Phosphor-green-on-black terminal nostalgia. The look of every
   movie hacker scene from "WarGames" to "Mr. Robot." Monospace
   chrome (matches the BBS canvas font); subtle text-shadow glow
   to mimic CRT bleed; thin bright-green borders.

   Glow intensity is deliberately mild — anything stronger
   becomes eye-strain over a long session. The 4px + 8px halo
   pair gives "tube screen at twilight" without "lasers in eyes."
   ────────────────────────────────────────────────────────── */
[data-theme='crt-green'] {
  /* Phosphor green: bright on hot, dim on cool. #00ff00 is the
     traditional terminal green; #003000 is the dim "off" state. */
  --ft-ui-bg: #001a00;
  --ft-tooltip-bg: #00ff00;
  --ft-tooltip-fg: #001a00;
  --ft-ui-fg: #00ff00;
  --ft-ui-border: #00ff00;
  --ft-ui-border-soft: #006600;

  --ft-status-active-bg: #001a00;
  --ft-status-active-fg: #00ff00;
  --ft-status-active-border: #00ff00;

  --ft-status-error-bg: #1a0000;
  --ft-status-error-fg: #ff4040;
  --ft-status-error-border: #ff4040;

  --ft-focus-warning-bg: #1a1a00;
  --ft-focus-warning-fg: #ffff00;
  --ft-focus-warning-border: #ffff00;

  --ft-scrollback-bg: #001a00;
  --ft-scrollback-fg: #00ff00;
  --ft-scrollback-border: #00ff00;
  --ft-scrollback-link-fg: #00ffff;

  --ft-popup-bg: #001a00;
  --ft-popup-fg: #00ff00;
  --ft-popup-border: #00ff00;
  --ft-popup-button-bg: #002a00;
  --ft-popup-button-fg: #00ff00;
  --ft-popup-button-border: #00ff00;

  /* Popup header: brighter green-on-dark-green strip. Inverted
     contrast versus the body, the same trick a real VT/CRT did
     when emphasizing a heading. */
  --ft-popup-header-bg: #003300;
  --ft-popup-header-fg: #00ff00;

  /* Warning callout: amber. The only color that ever appeared
     beside phosphor green on a real monochrome terminal —
     "press any key" prompts, error overlays, etc. */
  --ft-warning-bg: #1a1400;
  --ft-warning-border: #ffaa00;
  --ft-warning-fg: #ffcc00;

  /* Monospace UI font matches the BBS canvas — full terminal
     aesthetic top to bottom. */
  --ft-ui-font: 12px 'Courier New', Consolas, 'Lucida Console', monospace;
  /* The glow: two halos at different radii create the
     phosphor-bleed look. */
  --ft-ui-text-shadow: 0 0 4px #00ff00, 0 0 8px #00cc00;

  --ft-button-radius: 0;
  --ft-button-border-width: 1px;
  --ft-button-padding: 4px 10px;

  --ft-bevel-light: transparent;
  --ft-bevel-shadow: transparent;
  --ft-bevel-outer-dark: transparent;
}

/* crt-green needs the glow to apply to the popup buttons too —
   they're inside <f-menu-popup> which has its own data-theme,
   so the variable propagates correctly, but the base
   `.fTelnetMenuButtons a` rule doesn't apply text-shadow.
   Add it here. */
[data-theme='crt-green'] .fTelnetMenuButtons a,
[data-theme='crt-green'] .fTelnetMenuButton,
[data-theme='crt-green'] .fTelnetConnectButton,
[data-theme='crt-green'] .fTelnetStatusBarLabel,
[data-theme='crt-green'] .fTelnetSettingsPanelClose {
  text-shadow: var(--ft-ui-text-shadow);
}

/* Hover: brighten the green slightly */
[data-theme='crt-green'] .fTelnetMenuButton:hover,
[data-theme='crt-green'] .fTelnetConnectButton:hover,
[data-theme='crt-green'] .fTelnetMenuButtons a:hover,
[data-theme='crt-green'] .fTelnetSettingsPanelClose:hover {
  background-color: #003a00;
  color: #00ffaa;
}

/* ──────────────────────────────────────────────────────────
   Theme: cyberpunk (Phase 3 Stage 3)

   Neon magenta + cyan on near-black. Blade Runner / Cyberpunk
   2077 / Neuromancer aesthetic. Bright, aggressive, slightly
   hostile. Uppercase labels with letter-spacing for that
   "corp-overlay HUD" feel.
   ────────────────────────────────────────────────────────── */
[data-theme='cyberpunk'] {
  /* Two-tone neon: magenta (#ff00aa) is the "hot" accent,
     cyan (#00ffff) is the "info" accent. Background is a deep
     purple-black for warmth. */
  --ft-ui-bg: #0a0014;
  --ft-tooltip-bg: #ff00aa;
  --ft-tooltip-fg: #ffffff;
  --ft-ui-fg: #00ffff;
  --ft-ui-border: #ff00aa;
  --ft-ui-border-soft: #660044;

  --ft-status-active-bg: #1a0033;
  --ft-status-active-fg: #00ffff;
  --ft-status-active-border: #ff00aa;

  --ft-status-error-bg: #330011;
  --ft-status-error-fg: #ffff00; /* yellow alert */
  --ft-status-error-border: #ff0044;

  --ft-focus-warning-bg: #1a0033;
  --ft-focus-warning-fg: #ffff00;
  --ft-focus-warning-border: #ff00aa;

  --ft-scrollback-bg: #0a0014;
  --ft-scrollback-fg: #00ffff;
  --ft-scrollback-border: #ff00aa;
  --ft-scrollback-link-fg: #ffff00;

  --ft-popup-bg: #1a0033;
  --ft-popup-fg: #00ffff;
  --ft-popup-border: #ff00aa;
  --ft-popup-button-bg: #0a0014;
  --ft-popup-button-fg: #ff00aa;
  --ft-popup-button-border: #00ffff;

  /* Popup header: solid magenta on deep-purple text. Same look
     as `.fTelnetSettingsPanelHeader` (which has its own
     hardcoded rule below) — but now exposed as a token so the
     upload-confirm header inherits it for free. */
  --ft-popup-header-bg: #ff00aa;
  --ft-popup-header-fg: #0a0014;

  /* Warning callout: cyan-on-dark. In cyberpunk palettes cyan
     is "info / alert"; magenta is "action / brand." Yellow
     (used by other themes for warnings) would clash with the
     yellow status-error accent. */
  --ft-warning-bg: #001a1a;
  --ft-warning-border: #00ffff;
  --ft-warning-fg: #00ffff;

  --ft-ui-font: 11px 'Consolas', 'Courier New', monospace;
  --ft-ui-text-shadow: 0 0 6px currentColor;

  --ft-button-radius: 0;
  --ft-button-border-width: 1px;
  --ft-button-padding: 4px 12px;

  --ft-bevel-light: transparent;
  --ft-bevel-shadow: transparent;
  --ft-bevel-outer-dark: transparent;
}

/* Cyberpunk: ALL-CAPS labels with letter-spacing for the HUD feel.
   The `currentColor` text-shadow trick makes each element glow in
   its own color (magenta buttons get magenta glow, cyan text gets
   cyan glow) — neat single-line effect. */
[data-theme='cyberpunk'] .fTelnetMenuButton,
[data-theme='cyberpunk'] .fTelnetConnectButton,
[data-theme='cyberpunk'] .fTelnetMenuButtons a,
[data-theme='cyberpunk'] .fTelnetSettingsPanelClose {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: bold;
}

[data-theme='cyberpunk'] .fTelnetSettingsPanelHeader {
  background-color: #ff00aa;
  color: #0a0014;
  margin: -8px -8px 8px -8px;
  padding: 4px 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

[data-theme='cyberpunk'] .fTelnetMenuButton:hover,
[data-theme='cyberpunk'] .fTelnetConnectButton:hover,
[data-theme='cyberpunk'] .fTelnetMenuButtons a:hover,
[data-theme='cyberpunk'] .fTelnetSettingsPanelClose:hover {
  background-color: #ff00aa;
  color: #0a0014;
}

/* ──────────────────────────────────────────────────────────
   Theme: gothic (Phase 3 Stage 3)

   Blood-red on black with Victorian-mourning serif italics. The
   restraint here is deliberate — true gothic UIs lean toward
   "subdued elegance" rather than "Hot Topic explosion." Deep
   red (#8b0000, "darkred" CSS keyword) is the accent; the
   chrome itself stays near-black with hairline maroon borders.

   Serif font for chrome contrasts with the BBS canvas's
   monospace — like a hand-set typeface peering at a telegraph
   tape.
   ────────────────────────────────────────────────────────── */
[data-theme='gothic'] {
  --ft-ui-bg: #0a0000;
  --ft-tooltip-bg: #b22222;
  --ft-tooltip-fg: #ffe8e8;
  --ft-ui-fg: #d4c4c4; /* off-white with a slight red tint */
  --ft-ui-border: #8b0000;
  --ft-ui-border-soft: #4a0000;

  --ft-status-active-bg: #1a0000;
  --ft-status-active-fg: #d4c4c4;
  --ft-status-active-border: #8b0000;

  --ft-status-error-bg: #2a0000;
  --ft-status-error-fg: #ff6666;
  --ft-status-error-border: #ff0000;

  --ft-focus-warning-bg: #1a0000;
  --ft-focus-warning-fg: #b22222;
  --ft-focus-warning-border: #8b0000;

  --ft-scrollback-bg: #1a0000;
  --ft-scrollback-fg: #d4c4c4;
  --ft-scrollback-border: #8b0000;
  --ft-scrollback-link-fg: #ff6666;

  --ft-popup-bg: #0a0000;
  --ft-popup-fg: #d4c4c4;
  --ft-popup-border: #8b0000;
  --ft-popup-button-bg: #1a0000;
  --ft-popup-button-fg: #b22222;
  --ft-popup-button-border: #4a0000;

  /* Popup header: deeper maroon than the panel border, off-white
     text. Same value `.fTelnetSettingsPanelHeader` already uses
     hardcoded below — now a token so all dialogs inherit it. */
  --ft-popup-header-bg: #4a0000;
  --ft-popup-header-fg: #d4c4c4;

  /* Warning callout: firebrick on near-black. Stays inside the
     theme's maroon family — no jarring yellows — but the
     border lifts to a brighter red so it still reads as
     "attention." */
  --ft-warning-bg: #1a0000;
  --ft-warning-border: #b22222;
  --ft-warning-fg: #d4c4c4;

  --ft-ui-font: italic 13px 'Georgia', 'Garamond', 'Times New Roman', serif;
  --ft-ui-text-shadow: 0 0 2px rgba(139, 0, 0, 0.4);

  --ft-button-radius: 0;
  --ft-button-border-width: 1px;
  --ft-button-padding: 4px 12px;

  --ft-bevel-light: transparent;
  --ft-bevel-shadow: transparent;
  --ft-bevel-outer-dark: transparent;
}

/* Gothic: the status bar gets a two-toned border like a coffin
   lid (bright on top, dark on bottom). Subtle but evocative. */
[data-theme='gothic'] .fTelnetStatusBar {
  border-top-width: 2px;
  border-bottom-width: 2px;
  border-top-color: #8b0000;
  border-bottom-color: #4a0000;
}

[data-theme='gothic'] .fTelnetSettingsPanelHeader {
  background-color: #4a0000;
  color: #d4c4c4;
  margin: -8px -8px 8px -8px;
  padding: 4px 8px;
  font-style: italic;
  font-family: 'Georgia', 'Garamond', serif;
  border-bottom: 1px solid #8b0000;
}

[data-theme='gothic'] .fTelnetMenuButton:hover,
[data-theme='gothic'] .fTelnetConnectButton:hover,
[data-theme='gothic'] .fTelnetMenuButtons a:hover,
[data-theme='gothic'] .fTelnetSettingsPanelClose:hover {
  background-color: #2a0000;
  color: #ff6666;
}

/* ──────────────────────────────────────────────────────────
   Theme: cartoon (Phase 3 Stage 3)

   Primary colors, thick black outlines, rounded corners,
   Comic Sans (yes, really — it actually fits this aesthetic
   for once). Reads as "Adventure Time" / "classic Hanna-Barbera."

   The thick borders are part of the look: 3px solid black on
   every panel, including the canvas. Buttons get their own
   bright colors (yellow Menu, blue Connect, red status bar)
   instead of a unified palette.
   ────────────────────────────────────────────────────────── */
[data-theme='cartoon'] {
  /* Cream/butter background; bright primary accents. */
  --ft-ui-bg: #fffacd;
  --ft-tooltip-bg: #ff4444;
  --ft-tooltip-fg: #ffffff;
  --ft-ui-fg: #000000;
  --ft-ui-border: #000000;
  --ft-ui-border-soft: #333333;

  /* Status bar: red panel with white text — the loudest
     element on the page, on purpose. */
  --ft-status-active-bg: #ff4444;
  --ft-status-active-fg: #ffffff;
  --ft-status-active-border: #000000;

  --ft-status-error-bg: #ff8800;
  --ft-status-error-fg: #ffffff;
  --ft-status-error-border: #000000;

  --ft-focus-warning-bg: #ffdd00;
  --ft-focus-warning-fg: #000000;
  --ft-focus-warning-border: #000000;

  --ft-scrollback-bg: #44aaff;
  --ft-scrollback-fg: #ffffff;
  --ft-scrollback-border: #000000;
  --ft-scrollback-link-fg: #ffff00;

  --ft-popup-bg: #fffacd;
  --ft-popup-fg: #000000;
  --ft-popup-border: #000000;
  --ft-popup-button-bg: #ffdd00;
  --ft-popup-button-fg: #000000;
  --ft-popup-button-border: #000000;

  /* Popup header: bright cartoon blue with white text. Loud
     primary color, the same energy as the red status bar but
     in a different hue so they don't look identical. */
  --ft-popup-header-bg: #44aaff;
  --ft-popup-header-fg: #ffffff;

  /* Warning callout: pure cartoon yellow with the same thick
     black border that everything else in this theme has. */
  --ft-warning-bg: #ffdd00;
  --ft-warning-border: #000000;
  --ft-warning-fg: #000000;

  --ft-ui-font: bold 13px 'Comic Sans MS', 'Marker Felt', 'Chalkboard SE', sans-serif;
  --ft-ui-text-shadow: none;

  --ft-button-radius: 8px;
  --ft-button-border-width: 3px;
  --ft-button-padding: 4px 12px;

  --ft-bevel-light: transparent;
  --ft-bevel-shadow: transparent;
  --ft-bevel-outer-dark: transparent;
}

/* Cartoon: thick borders everywhere, including the BBS canvas
   container itself (the only theme that styles this). */
[data-theme='cartoon'] .fTelnetClientContainer {
  border-width: 3px;
  border-color: #000000;
  border-radius: 8px;
}

[data-theme='cartoon'] .fTelnetSettingsPanel {
  border-width: 3px;
  border-radius: 12px;
}

[data-theme='cartoon'] .fTelnetSettingsPanelGroup {
  border-width: 2px;
  border-radius: 6px;
}

[data-theme='cartoon'] .fTelnetSettingsPanelHeader {
  background-color: #ff4444;
  color: #ffffff;
  margin: -8px -8px 8px -8px;
  padding: 6px 12px;
  border-radius: 9px 9px 0 0;
  font-weight: bold;
}

[data-theme='cartoon'] .fTelnetConnectButton {
  background-color: #44aaff;
  color: #ffffff;
}

[data-theme='cartoon'] .fTelnetMenuButton:hover,
[data-theme='cartoon'] .fTelnetMenuButtons a:hover,
[data-theme='cartoon'] .fTelnetSettingsPanelClose:hover {
  background-color: #ff8800;
  color: #ffffff;
}

[data-theme='cartoon'] .fTelnetConnectButton:hover {
  background-color: #66ccff;
}