/* connection.css — read-only session menu (A7), environment band and database menu (B4), main §5.1, §5.2, §5.9.
   Created and linked by WP0c. A7: the #ro-menu pills and panels and the login page's "Read-only session" box.
   B4: the tone tokens, the band, the chip, the DB menu summary and panel, and the narrow-screen moves (below). */

/* The READ-ONLY pill text: #8a5a0b on --warn-soft is 5.42:1; dark mode uses --warn on --warn-soft (connection.md S1). */
:root { --warn-strong: #8a5a0b; }
@media (prefers-color-scheme: dark) {
  :root { --warn-strong: var(--warn); }
}

.ro-menu { position: relative; }
.ro-menu > summary {
  list-style: none;
  cursor: pointer;
  border-radius: 99px;
}
.ro-menu > summary::-webkit-details-marker { display: none; }
.ro-menu .pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.ro-menu .pill .icon { flex: none; }
.ro-menu .pill-readwrite { background: transparent; }
.ro-menu .pill-readonly {
  color: var(--warn-strong);
  background: var(--warn-soft);
  border-color: var(--warn);
}

.ro-panel {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 60;
  width: min(22rem, calc(100vw - 2rem));
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-alt);
  box-shadow: var(--shadow-sm);
  color: var(--fg);
  font-size: 14px;
}
.ro-panel p { margin: 0 0 .6rem; }
.ro-panel .ro-note { margin: .6rem 0 0; font-size: 12px; color: var(--muted); }
.ro-unlock { display: grid; gap: .4rem; }
.ro-unlock input[type="password"] { width: 100%; }
.ro-error { color: var(--bad); font-weight: 600; }

/* ≤ 880 px: the READ-ONLY pill becomes icon-only, its text stays for screen readers (main §4.11). The Read-write
   pill is hidden at this width by B4's rules below: its button is in the DB menu's Session row. */
@media (max-width: 880px) {
  .ro-menu .pill-readonly .ro-pill-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ro-menu .pill-readonly { padding: .25rem .45rem; }
}
/* ≤ 640 px: the panel becomes a fixed sheet under the top bar, so it never widens the page. */
@media (max-width: 640px) {
  .ro-panel {
    position: fixed;
    left: .5rem;
    right: .5rem;
    top: calc(var(--sticky-top) + .5rem);
    width: auto;
  }
}
/* Login: the "Read-only session" box and its hint (connection.md S1 Behavior 1). */
.login-card .form-check .check-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
}
.login-card .form-hint { margin: .25rem 0 0; font-size: 12px; color: var(--muted); }
.login-card .form-hint span { display: block; }

/* === Environment labels and database menu (B4; main §4.11, §5.2, §5.9, connection.md S2, S3) ===
   Tone classes are always qualified (.env-band, .env-chip, .dbmenu-env): body carries env-<tone> as well. */

/* Tone tokens (connection.md S2 "Colors"), each pair at least 5.4:1 in both modes. */
:root {
  --env-danger-bg: var(--bad);
  --env-danger-fg: #fff;
  --env-warn-bg: #f1b44c;
  --env-warn-fg: #3b2604;
  --env-info-bg: var(--accent);
  --env-info-fg: #fff;
  --env-ok-bg: var(--ok);
  --env-ok-fg: #fff;
  --env-neutral-bg: #4b5563;
  --env-neutral-fg: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --env-danger-fg: #2a0704;
    --env-warn-bg: var(--warn);
    --env-warn-fg: #2a1c02;
    --env-info-fg: #062326;
    --env-ok-fg: #052e1c;
  }
}
.env-band.env-danger, .env-chip.env-danger, .dbmenu-env.env-danger { --env-tone-bg: var(--env-danger-bg); --env-tone-fg: var(--env-danger-fg); }
.env-band.env-warn, .env-chip.env-warn, .dbmenu-env.env-warn { --env-tone-bg: var(--env-warn-bg); --env-tone-fg: var(--env-warn-fg); }
.env-band.env-info, .env-chip.env-info, .dbmenu-env.env-info { --env-tone-bg: var(--env-info-bg); --env-tone-fg: var(--env-info-fg); }
.env-band.env-ok, .env-chip.env-ok, .dbmenu-env.env-ok { --env-tone-bg: var(--env-ok-bg); --env-tone-fg: var(--env-ok-fg); }
.env-band.env-neutral, .env-chip.env-neutral, .dbmenu-env.env-neutral { --env-tone-bg: var(--env-neutral-bg); --env-tone-fg: var(--env-neutral-fg); }

/* The band: 4 px above the top bar. The height is set on :root (not body) so that a11y.css's --sticky-top, which
   :root computes, and html's scroll-padding-top include it (C-22); the band sits above the top bar's z-index 50. */
:root:has(> body.has-env) { --env-band-h: 4px; }
.env-band {
  position: sticky;
  top: 0;
  z-index: 51;
  height: var(--env-band-h);
  background: var(--env-tone-bg, var(--env-neutral-bg));
}
body.has-env .topbar { top: var(--env-band-h); }
body.has-env.env-danger .topbar {
  border-color: var(--env-danger-bg);
  box-shadow: 0 0 0 1px var(--env-danger-bg), var(--shadow-sm);
}
body.has-env.env-warn .topbar {
  border-color: var(--env-warn-bg);
  box-shadow: 0 0 0 1px var(--env-warn-bg), var(--shadow-sm);
}

/* The chip. Global, so core.js whereLine()'s clone in the confirm modal (outside .topbar) shows the long label. */
.env-chip, .dbmenu-env {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: .1rem .45rem;
  border-radius: 99px;
  font: 700 11px/1.3 var(--font);
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--env-tone-fg, var(--env-neutral-fg));
  background: var(--env-tone-bg, var(--env-neutral-bg));
}
.env-chip .env-short { display: none; }

/* The summary: chip, name (ellipsized) and caret on one centered line, the connection line below it. */
.dbmenu > summary {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .4rem;
  row-gap: .1rem;
}
.dbmenu > summary > .env-chip { order: 0; }
.dbmenu > summary > .db-name { order: 1; flex: 1 1 0; min-width: 0; max-width: max-content; }
.dbmenu > summary > .dbmenu-caret { order: 2; }
.dbmenu > summary > .db-conn { order: 3; flex: 0 0 100%; text-align: center; }
.dbmenu-caret {
  flex: none;
  width: .45rem;
  height: .45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .7;
  transform: translateY(-2px) rotate(45deg);
}
.dbmenu[open] > summary .dbmenu-caret { transform: translateY(1px) rotate(225deg); }

/* The panel: connection line, Session row, database list, "Other database…", Sign out. */
.dbmenu-panel {
  width: max-content;
  max-width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100vh - var(--sticky-top) - 2rem);
  overflow-y: auto;
  text-align: left;
}
.dbmenu-panel .dbmenu-conn { margin: 0 0 .5rem; }
.dbmenu-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem .75rem;
  padding: .45rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.dbmenu-session form { margin: 0; }
.dbmenu-session button { padding: .3rem .7rem; font-size: 13px; }
.dbmenu-session-state { font-weight: 600; }
.dbmenu-heading {
  margin: .6rem 0 .3rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.dbmenu-filter { width: 100%; margin: 0 0 .3rem; }
.dbmenu-empty { margin: .2rem 0; font-size: 13px; color: var(--muted); }
.dbmenu-empty:empty { margin: 0; }
.dbmenu-switch { margin: 0; }
.dbmenu-list { margin: 0; padding: 0; list-style: none; }
.dbmenu-list > li { margin: 0; }
.dbmenu-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  width: 100%;
  padding: .35rem .5rem;
  border-radius: var(--radius-sm);
  font: 13px/1.35 var(--font-mono);
  text-align: left;
}
.dbmenu-list button.dbmenu-item {
  justify-content: flex-start;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg);
  font-weight: 400;
}
.dbmenu-list button.dbmenu-item:hover:not(:disabled),
.dbmenu-list button.dbmenu-item:focus-visible {
  border-color: var(--line);
  background: var(--accent-soft);
  color: var(--fg);
}
.dbmenu-list button.dbmenu-item[aria-busy="true"] { cursor: progress; }
.dbmenu-item.is-current { font-weight: 700; }
.dbmenu-item.is-current .icon { flex: none; color: var(--accent); }
.dbmenu-item.is-disabled { color: var(--muted); }
.dbmenu-name { overflow-wrap: anywhere; }
.dbmenu-why { font: italic 12px var(--font); }
.dbmenu-item .dbmenu-env { margin-left: auto; }
.dbmenu-note { margin: .3rem 0 0; font-size: 12px; color: var(--muted); }
.dbmenu-other {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .3rem .5rem;
  align-items: center;
  margin: .6rem 0 0;
}
.dbmenu-other label { grid-column: 1 / -1; font-size: 13px; }
.dbmenu-signout { display: none; margin: .6rem 0 0; }

/* ≤ 880 px: the short chip (the long label stays for screen readers), and the Read-write pill is hidden: its button
   is in the DB menu's Session row (main §4.11). The READ-ONLY pill stays visible at every width. */
@media (max-width: 880px) {
  .topbar .env-chip .env-long {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .topbar .env-chip .env-short { display: inline; }
  .ro-menu[data-ro-state="rw"] { display: none; }
}
/* ≤ 640 px: Logout moves into the DB menu as "Sign out", and the panel becomes a fixed full-width sheet under the
   top bar (the top bar's backdrop-filter makes it the containing block, as for A7's .ro-panel). */
@media (max-width: 640px) {
  .topbar-right > form.logout { display: none; }
  .dbmenu-signout { display: block; }
  .dbmenu-panel {
    position: fixed;
    left: .5rem;
    right: .5rem;
    top: calc(var(--sticky-top) + .5rem);
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: calc(100vh - var(--sticky-top) - 1.5rem);
    transform: none;
  }
}