/*
 * responsive.css - phone and tablet layout for symSlice.
 *
 * Loaded by the base templates after w3.css and the theme css (styles.css or
 * styles_dark.css), so it is shared by both themes and its rules win on ties.
 * Breakpoints follow w3.css: small <= 600px, medium 601-992px, large >= 993px.
 *
 * At desktop width the only visible change is that the top bar is a flex row
 * and the search box stretches to fill the space between Create and the icons
 * on the right.
 */

/* ===== Colour tokens =====
   The app's own colours (the rest come from w3.css classes, chosen per theme
   in templates/_theme.html). Change a colour here and every page, template
   and script that uses it follows. The light/dark choice still happens where
   it did (the _theme.html roles, .card_dark rules, the dark_theme tests); a
   token just names the colour. */
:root {
  --sym-busy: #cc6600;          /* busy / pending / not-yet-active status (orange) */
  --sym-panel-dark: #171D25;    /* dark theme: slide-in panels, the Add menu's backing */
  --sym-card-dark: #1d242e;     /* dark theme: list cards on phones */
  --sym-surface-dark: #343a40;  /* dark theme: chosen card / highlighted row */
  --sym-surface-light: #f1f1f1; /* light theme: chosen card / highlighted row */
  --sym-accent: #2196F3;        /* blue: focus borders, chosen outlines */
}



/* ===== Top bar, all widths ===== */

/* Room for the fixed 190px sidebar. Removed below desktop width, where the
   sidebar becomes an overlay. */
.topbar_wrap {
  padding-left: 190px;
}

/* One flex row instead of left/right floats, so the search box can take the
   leftover width. Floats are ignored on flex items, so the w3-bar-item and
   w3-right floats inside no longer matter.
   Note: w3-bar has clearfix ::before/::after pseudo-elements, which turn into
   empty flex items. That is why the right-hand group uses margin-left:auto
   instead of justify-content:space-between, and why there is no "gap". */
.topbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  /* w3-bar sets overflow:hidden (a float clearfix, not needed for flex).
     It clipped the search results menu, which is positioned inside the bar
     via #search_form, to the height of the bar. */
  overflow: visible;
}

/* The Create/Add and account wrappers had small margin-tops (customer pages)
   or padding-tops (admin pages) to line them up with the floated search box;
   align-items:center does that now. */
.topbar .w3-dropdown-click {
  margin-top: 0 !important;
  padding-top: 0 !important;
  flex: 0 0 auto;
}

/* Admin search: input and its grey search button side by side, the input
   taking the width (was a fixed 375px, both floated). */
.admin_search {
  display: flex;
}

.admin_search .w3-input {
  flex: 1 1 auto;
  min-width: 0;
}

.admin_search_btn {
  flex: 0 0 auto;
  width: auto;
}

/* Search box: grow into all free space, and allow shrinking below the
   placeholder's natural width (min-width:0) so the bar never overflows.
   Capped at 800px so it does not become absurdly wide on very large
   screens; any space beyond that sits before the right-hand icons, which
   stay at the right edge. */
.search_item {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 800px;
}

#searchInput {
  width: 100%;
}

/* Results menu sits right under the input (top is left at its static
   position) and matches the input width, capped so it stays readable when
   the input is very wide. The menu was a fixed 450px before. */
#search_form {
  position: relative;
}

/* z-index 3 keeps the top-bar menus above anything positioned in the page
   content (w3-dropdown-content is only z-index 1) and above the flash
   messages (z-index 2). */
#create_menu,
#search_menu,
#account_menu {
  z-index: 3;
}

#search_menu {
  left: 0;
  width: 100%;
  max-width: 600px;
  max-height: 840px;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* Support, events and account, pushed to the right edge as one group. */
.topbar_right {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* styles.css gives every <button> width:150px; these two are icon buttons. */
#sidebar_open,
.sidebar_close {
  width: auto;
}


/* Page content had min-width:1100px (styles.css .main) so the old tables
   would not squash. Narrow desktop windows (993-1100px) then scrolled
   sideways and hid the right-hand buttons. The converted lists shrink
   properly, and the old tables overflow their own box either way. */
.main {
  min-width: 0;
}

/* One left edge for the top bar, the page heading and the content (Mark,
   2026-10-29; noticeable once the line under the bar went). Desktop: 16px
   right of the 190px sidebar, as the bar's first button (styles.css had
   220px for the content and the heading sat 16px further in, in the header
   table's first cell); the right edge 16px too, as the bar's. Tablets and
   phones already used the bar's 16px / 8px (below). */
@media (min-width: 993px) {
  .main {
    padding-left: 206px;
    padding-right: 16px;
  }

  /* Flash messages end at the page's right edge (16px in, like the content),
     so they cover the heading's Docs link completely; at 38px in, the "cs"
     of Docs showed past them (Mark). !important: base.html sets it inline. */
  #messages {
    padding-right: 16px !important;
  }
}

header > .w3-table td:first-child {
  padding-left: 0;
}

/* ===== Below desktop: phones and tablets (<= 992px) ===== */

/* Flash message slide-in for phones/tablets (see #messages below). */
@keyframes flash_slide_in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@media (max-width: 992px) {

  /* Sidebar is hidden (w3-collapse) and opens over the page from the
     hamburger. Above the w3-overlay backdrop (z-index 2). */
  #sidebar {
    z-index: 4;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.4);
  }

  /* Taller sidebar rows so they are easy to hit with a thumb: 15px padding
     plus the 14px line gives 44px rows, the usual minimum tap size. */
  #sidebar .w3-bar-item {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  /* Close (x) button in the corner of the open sidebar. */
  .sidebar_close {
    position: absolute;
    top: 4px;
    right: 0;
    font-size: 24px;
    padding: 6px 14px;
    z-index: 1;
  }

  .topbar_wrap {
    padding-left: 0;
  }

  .topbar .tap_target {
    min-width: 44px;
    padding: 8px 12px;
    font-size: 20px;
  }

  /* Page content: drop the sidebar offset and the 1100px minimum width that
     made every page scroll sideways (both set on .main in styles.css). */
  .main {
    min-width: 0;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Flash messages: same place as on desktop, just under the top bar, but
     full width instead of a 500px minimum. They cover the page title until
     they fade (8s) or are closed. (They were briefly at the bottom of the
     screen, but users don't look there after a reload, so they were missed.)
     !important because base.html sets these inline. */
  #messages {
    left: 8px;
    right: 8px !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-right: 0 !important;
    /* w3-animate-right slides by animating "right", which the !important
       above blocks (an animation never beats !important), so the message
       only faded in. Slide the whole box in from the right instead, same
       0.4s as w3.css. */
    animation: flash_slide_in 0.4s;
  }
}


/* ===== Phones (<= 600px) ===== */

@media (max-width: 600px) {

  /* Tighter bar padding (w3-padding is 8px 16px). */
  .topbar.w3-padding {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Create shows only a "+" icon on phones (see base.html). */
  #create_dropdown {
    width: auto !important;
    min-width: 44px;
    padding: 8px 14px;
  }

  /* Full-width Create menu; was a fixed 350px, wider than some phones.
     The menu's containing block is the page (w3-bar makes the dropdown
     wrapper position:static), so left/right are measured from the screen. */
  #create_menu {
    left: 8px;
    right: 8px;
    width: auto !important;
  }

  .search_item {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Admin search button: narrower so the input keeps some room. */
  .admin_search_btn {
    padding: 6px 12px !important;
  }

  /* Results menu as wide as the screen rather than the narrow input. */
  #search_form {
    position: static;
  }

  #search_menu {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 80px);
  }

  .topbar_right .notification {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Account button shows only the icon on phones. */
  #account_dropdown {
    width: auto;
    padding-left: 8px;
    padding-right: 8px;
  }

  #account_dropdown .fa-user-circle {
    padding-right: 0 !important;
  }

  #account_menu {
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: 300px;
  }

  .main {
    padding-left: 8px;
    padding-right: 8px;
  }
}


/* ===== Login, sign-up and verify pages (base_nologin.html) ===== */

/* Logo left, Sign Up / Login / Logout button right, on one line. The button
   was floated right with a 22px margin-top, which wrapped it under the logo
   on phones. In the flex row the float is ignored and align-items centres it. */
.nologin_bar {
  display: flex;
  align-items: center;
}

.nologin_action {
  margin-left: auto;
  margin-top: 0 !important;
  flex: 0 0 auto;
}

/* The pages set fixed widths on their inputs (300-350px) and on the divs
   around their forms (350-450px, e.g. register and reset password); never
   let them stick out of the card on a narrow screen. Divs normally fill
   their container anyway, so this only affects the fixed-width ones. */
.nologin_card div,
.nologin_card .w3-input {
  max-width: 100%;
}

@media (max-width: 600px) {
  /* Smaller logo so logo and button fit side by side at 320px. */
  .nologin_logo {
    width: 150px !important;
  }
}


/* ===== List pages (slices, images, volumes...) ===== */

/* Shared pieces of the list pattern (see symslice-playbook.md). A page sets
   only its own grid-template-columns (and the phone grid-template-areas that
   fold its cells into a card); everything else is here. Lists were <table>s
   with white-space:nowrap, which forced ~1100px of width. */

.list_grid {
  display: grid;
  align-items: center;
  column-gap: 8px;
  padding: 6px 8px;
  line-height: 1.2em;
}

/* Header row (tablet and desktop; add w3-hide-small). */
.list_head {
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Clickable column heading; lists.js swaps its icon for the sort direction. */
.sort_btn {
  cursor: pointer;
  white-space: nowrap;
}

/* Big status icon at the start of a row (e.g. the slice disk icon). */
.list_icon {
  text-align: center;
}

.list_icon i {
  padding-top: 5px;
  font-size: 25px;
}

/* Long names wrap instead of widening the row. Only on the text itself:
   overflow-wrap is inherited, so not on containers. */
.name_text {
  overflow-wrap: anywhere;
}

/* Same for links inside a row (e.g. the slice a Flex IP points to): a long
   hostname has no spaces to wrap at and pushed phones sideways. */
.list_row a {
  overflow-wrap: anywhere;
}

/* Short single-line cells (plan, dates...): cut off with ... if too narrow. */
.list_cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Power button, "..." menu and other per-row buttons, at the end of a row. */
.list_actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Status colours used by the list pages and their live updaters. */
.status_active_light {
  color: green;
}

/* theme.status_danger in the light theme (dark uses w3-text-red). */
.status_danger_light {
  color: darkred;
}

.status_busy {
  color: var(--sym-busy);
}

/* Labels only shown on phones, where there is no header row
   (use with w3-hide-medium w3-hide-large). */
.cell_label {
  color: grey;
  font-size: 12px;
  padding-right: 4px;
}

/* "copied!" note beside copyable values, for phones (no hover tooltips).
   Maximum contrast without colour: black on light pages, white on dark
   (styles_dark.css sets --copied-color). Grey was too faint on a just-tapped
   (highlighted) dark card (2.9:1). */
.copied_note {
  display: none;
  color: var(--copied-color, #000);
  font-size: 12px;
  padding-left: 6px;
}

/* Rows coloured by status (pale green/blue/red, khaki: symBalancers, backend
   servers) keep those light colours in the dark theme too, so the white
   dark-theme note would vanish on them; black there in both themes. */
.w3-pale-green .copied_note,
.w3-pale-blue .copied_note,
.w3-pale-red .copied_note,
.w3-pale-yellow .copied_note,
.w3-khaki .copied_note {
  color: #000;
}

/* Same for the grey line under a name (row_meta, e.g. "SFO1 / ID: 812"): the
   dark theme's light grey was faint on the pale status colours. */
.card_dark .w3-pale-green .row_meta,
.card_dark .w3-pale-blue .row_meta,
.card_dark .w3-pale-red .row_meta,
.card_dark .w3-pale-yellow .row_meta,
.card_dark .w3-khaki .row_meta {
  color: #616161 !important;
}

/* Row "..." menu (the button gets row_menu_btn). Its right edge used to sit
   25px past the button, which made phones scroll sideways. */
.row_menu {
  right: 0;
  top: 40px;
  width: 190px;
}

/* A row whose "..." menu is open keeps its hover colours (lists.js sets
   menu_open), so the menu stays visibly tied to its row and button. Same
   colours as w3's hover classes on the row (dark / light) and on w3-button. */
.list_row.w3-hover-asphalt.menu_open {
  color: #fff !important;
  background-color: var(--sym-surface-dark) !important;
}

.list_row.w3-hover-light-grey.menu_open {
  color: #000 !important;
  background-color: var(--sym-surface-light) !important;
}

.row_menu_btn.menu_open {
  background-color: #ccc !important;
}

/* Thin line around every dropdown menu (row "..." menus, Create, account,
   search results, the phone tab list). In dark mode the menu (asphalt) was the
   same colour as the row behind it, which stays highlighted after a tap on a
   phone, so a one-item menu looked like a word floating on the row. Half-
   transparent grey shows on both themes; menus with w3-border keep w3's #ccc. */
.w3-dropdown-content {
  border: 1px solid rgba(128, 128, 128, 0.5);
}

/* "Sort by..." select for phones, beside the page's main button. Its
   display is only set in the phone query below, so w3-hide-medium/large
   still hide it on bigger screens. */
.list_sort {
  width: auto !important;
  margin-left: 8px;
  padding: 6px;
}

/* Copy tooltips ("copy" / "copied!") stay on one line. Inside a block that
   lets long values break anywhere (overflow-wrap: anywhere, e.g. an email
   address), the tooltip inherited it and shrank to one letter per line. */
.tooltip .tooltiptext {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Hover tooltips are invisible but still take up width; below desktop width
   they are hidden and the copied_note replaces them. copy_value: a copyable
   value outside a list (e.g. the hostname under a symBalancer's name).
   (The note used to show on phones only, so tablets got no "copied!" at all.) */
@media (max-width: 992px) {
  .list_grid .tooltiptext,
  .copy_value .tooltiptext,
  .cmd_row .tooltiptext {
    display: none;
  }

  .copied_note.show {
    display: inline;
  }
}

@media (max-width: 600px) {
  .list_grid {
    row-gap: 4px;
    padding: 10px 6px;
  }

  .list_icon,
  .list_actions {
    align-self: start;
  }

  .list_actions .w3-button {
    min-width: 44px;
    padding: 10px 12px;
  }

  .list_sort {
    display: inline-block;
  }

  /* Filter box on its own full-width line under the page's buttons. */
  .list_filter {
    width: 100% !important;
    float: none !important;
    margin-top: 8px;
  }
}


/* Secondary line under a row's name (e.g. "NYC1 - Debian 13"): greyed so the
   name stands out. #616161 (w3 dark-grey) keeps readable contrast on white. */
.row_meta {
  color: #616161 !important;
}

.card_dark .row_meta {
  color: #9e9e9e !important;
}

/* On phones each row becomes a separate card: a gap between rows and a
   rounded border, so a hostname that wraps onto several lines clearly
   belongs to one slice. Tablet and desktop keep table-like divider lines.
   The container gets card_list (plus card_dark in the dark theme); each row
   gets card_row. !important overrides the rows' w3-border-* divider classes. */
@media (max-width: 600px) {
  .card_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
  }

  .card_list > .card_row {
    border: 1px solid #ddd !important;
    border-radius: 6px;
  }

  .card_list.card_dark > .card_row {
    border-color: var(--sym-surface-dark) !important;
    background-color: var(--sym-card-dark);
  }
}


/* ===== Dialogs and slide-in panels ===== */

/* Some inputs in panels have fixed widths (e.g. 450px); never let them run
   past the edge of a phone screen. */
.w3-modal-content .w3-input,
.w3-modal-content .w3-select {
  max-width: 100%;
}

/* Slide-in panels (slider_right: Create, Rename, Attach...) size themselves
   to their content on phones, so a fixed-width field inside (e.g. the admin
   Host field, 450px) pushed the panel off the left edge of the screen. On
   phones give them a definite width: the screen less w3's 10px margins. */
@media (max-width: 600px) {
  .w3-modal-content.slider_right {
    width: calc(100% - 20px) !important;
  }

  /* styles.css makes every <button> 150px wide. In a confirm dialog's
     button row (w3-right) a 150px Cancel plus the action button no longer
     fit side by side, so Cancel wrapped onto its own line above. Size those
     buttons to their text on phones. */
  .w3-modal-content .w3-right button {
    width: auto;
  }
}


/* ===== Empty-state messages and fixed-width text blocks ===== */

/* "Looks like you don't have any volumes yet" and similar blocks use
   w3-content with a fixed width such as width:66ch (~560px), wider than a
   phone, so the page scrolled sideways and the block was off-centre.
   max-width wins over width, so this caps them to the screen while keeping
   w3-content's usual 980px limit. */
.main .w3-content {
  max-width: min(980px, 100%);
}


/* ===== Form checks (static/forms.js) ===== */

/* A field that failed its check. w3-border-red alone does nothing on the
   dark theme's inputs (w3-border-0), so mark it with a red ring as well; a
   shadow, so the field does not change size. */
.w3-input[aria-invalid="true"],
.w3-select[aria-invalid="true"] {
  box-shadow: 0 0 0 2px #f44336;
}

/* While it has the focus, the browser's focus outline covered the red ring;
   make the outline red instead. */
.w3-input[aria-invalid="true"]:focus,
.w3-select[aria-invalid="true"]:focus {
  outline: 2px solid #f44336;
  outline-offset: 0;
}

/* Message under a field that has no <label> to hold it. */
.field_message {
  font-size: 13px;
}


/* A text box shown for reference only (readonly), e.g. the server name when
   editing a backend server: it is sent with the form but can't be changed, so
   it looks like plain text rather than a box. (A disabled box looked the same,
   but disabled fields are not sent.) */
.w3-input.field_readonly {
  border-color: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  padding-left: 0;
  cursor: default;
}


/* Region picker (_regions.html): each region is a card; the radio button
   itself is hidden and the card shows the choice. Only radios inside
   .region_picker are hidden (the old page-wide rule hid every radio).
   The chosen card, as on the create pages: border and a 1px outline in the
   tabs' blue (var(--sym-accent), w3-blue), so it reads as a bright double line, on a
   light (dark theme: dark) background. (The create pages used CSS "blue",
   #0000ff, for the outline; the tabs' blue matches the rest of the site.) */
.region_picker [type=radio],
.choice_cards [type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.region_picker .region_card,
.choice_cards .choice_card {
  display: inline-block;
  vertical-align: top;
  padding-right: 10px;
  padding-bottom: 10px;
}

.region_picker [type=radio] + div,
.choice_cards [type=radio] + div {
  cursor: pointer;
  height: 110px;
  width: 200px;
  max-width: 100%;
  font-family: font-logos, poppins;
}

.region_picker [type=radio]:checked + div,
.choice_cards [type=radio]:checked + div {
  border-color: var(--sym-accent) !important;
  outline: 1px solid var(--sym-accent);
  background: var(--sym-surface-light);
  color: #000;
}

.region_picker.card_dark [type=radio]:checked + div,
.choice_cards.card_dark [type=radio]:checked + div {
  background: var(--sym-surface-dark);
  color: #fff;
}

/* The other choice cards (boxcheck in styles.css, e.g. Billing Access on a
   user's Permissions): the same bright blue when chosen (was CSS "blue"). */
.boxcheck:checked + div {
  border-color: var(--sym-accent) !important;
  outline: 1px solid var(--sym-accent);
}

/* Keyboard users: show which card has the focus. */
.region_picker [type=radio]:focus-visible + div,
.choice_cards [type=radio]:focus-visible + div {
  outline: 2px solid var(--sym-accent);
}

.region_picker [type=radio]:disabled + div,
.choice_cards [type=radio]:disabled + div {
  cursor: not-allowed;
}

/* Phones: two cards a row, each half the width (200px cards left a gap
   beside a single column). */
@media (max-width: 600px) {
  /* Flex, not inline-block: the space between inline-block cards made two
     50% cards too wide for one row. Anything else in the group (its label,
     a message) takes a row of its own. */
  .region_picker,
  .choice_cards:not(.plan_cards):not(.source_grid) {
    display: flex;
    flex-wrap: wrap;
  }
  .region_picker > :not(.region_card),
  .choice_cards:not(.plan_cards):not(.source_grid) > :not(.choice_card) {
    width: 100%;
  }
  .region_picker .region_card,
  .choice_cards:not(.plan_cards):not(.source_grid) .choice_card {
    width: 50%;
  }
  .region_picker .region_card:nth-child(odd of .region_card),
  .choice_cards:not(.plan_cards):not(.source_grid) .choice_card:nth-child(odd of .choice_card) {
    padding-right: 5px;
  }
  .region_picker .region_card:nth-child(even of .region_card),
  .choice_cards:not(.plan_cards):not(.source_grid) .choice_card:nth-child(even of .choice_card) {
    padding-left: 5px;
    padding-right: 0;
  }
  .region_picker [type=radio] + div,
  .choice_cards [type=radio] + div {
    width: 100%;
  }
}

/* A region card: its flag, then its code (bold) and city; the card grows
   rather than letting text spill out. */
.region_picker [type=radio] + div {
  height: auto;
  min-height: 110px;
}

.region_text {
  padding: 4px 0;
}

/* Create pages: the image cards hold a version menu under the logo. */
.image_card_body .w3-select {
  margin-top: 6px;
  padding: 4px;
  text-align: center;
}

/* Create pages: the plans (_plan_picker.html). From 601px a table: a header
   row and one row per plan, the same columns for both; on phones a card per
   plan. The radio is hidden; the chosen row/card gets the cards' blue
   border (choice_cards rules above). */
.plan_cards [type=radio] + div {
  height: auto;
  width: 100%;
  font-family: inherit;
}

.plan_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 12px 1px 2px 1px;
}

.plan_grid .choice_card {
  display: block;
  padding: 0;
  width: auto;
}

/* Plan | Monthly | Hourly | RAM | CPUs | Storage | Transfer */
.plan_head,
.plan_body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) minmax(0, 0.9fr)
                         minmax(0, 0.7fr) repeat(2, minmax(0, 1fr));
  column-gap: 10px;
  align-items: center;
  padding: 8px 14px;
}

.plan_head {
  font-weight: bold;
  /* The rows have a 1px border; the same here keeps the columns lined up. */
  /* (!important: the dark theme's w3-border-dark-grey colours every side.) */
  border-left: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
}

/* Table: rows touch, with only a line under each, as the site's lists (the
   section's own box is the frame; side borders made a box within a box).
   The chosen row gets the full blue border; the others keep a transparent
   one, so choosing doesn't shift anything. */
@media (min-width: 601px) {
  .plan_grid {
    gap: 0;
  }
  .plan_cards .plan_body {
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
  }
  .plan_cards [type=radio]:checked + .plan_body {
    position: relative;
    z-index: 1;
  }
}

/* Narrow tablets (601-768px): numbers on one line ("10000 GB" broke in two
   at 601px), a little less space between columns and 14px text. (The header
   and each row are separate grids, so the columns stay equal shares; sizing
   them to their contents would misalign them.) */
@media (min-width: 601px) and (max-width: 768px) {
  .plan_head,
  .plan_body {
    column-gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    /* A little from Plan and CPUs to Storage and Transfer. */
    grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr)) minmax(0, 0.9fr)
                           minmax(0, 0.6fr) minmax(0, 1.1fr) minmax(0, 1.35fr);
  }
  .plan_spec > span,
  .plan_price > span {
    white-space: nowrap;
  }
}

/* In the table the price's two parts are cells of their own. */
.plan_price,
.plan_spec {
  display: contents;
}

.ph_only {
  display: none;
}

.plan_name {
  font-weight: bold;
}

.plan_hourly {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .plan_grid {
    gap: 10px;
  }
  /* A card: name, then "$24/month ($0.036/hour)", then the specs as
     label / value lines. */
  .plan_body {
    display: block;
    padding: 12px 14px;
  }
  .plan_name,
  .plan_price {
    display: block;
  }
  .plan_spec {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    font-size: 14px;
  }
  .plan_price + .plan_spec {
    margin-top: 6px;
  }
  .ph_only {
    display: inline;
  }
  .plan_spec .ph_only {
    opacity: 0.75;
  }
}

/* Create pages: the app / symScript cards (_source_picker.html). Each is a
   link; the chosen one gets the cards' blue border. */
.source_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 1px;
}

.source_grid > .field_message {
  grid-column: 1 / -1;
}

@media (max-width: 992px) {
  .source_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .source_grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.source_card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 8px 12px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.source_chosen {
  border-color: var(--sym-accent) !important;
  outline: 1px solid var(--sym-accent);
  background: var(--sym-surface-light);
  color: #000;
}

.source_chosen.card_dark {
  background: var(--sym-surface-dark);
  color: #fff;
}

/* Choice cards laid out as source cards (Backups: the backup images). */
.source_grid.choice_cards .choice_card {
  display: block;
  width: auto;
  padding: 0;
}

.source_grid.choice_cards [type=radio] + div {
  height: 100%;
  width: auto;
  font-family: inherit;
}

.source_icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.source_text {
  min-width: 0;
}

/* The chosen app's description: a readable line length, the full width on
   phones (it was a fixed 80ch, wider than a phone). */
.source_detail {
  padding-top: 12px;
  max-width: 80ch;
}

/* The plan categories' tab bar (601px and wider; phones get a dropdown, as
   the site's other tab menus). Items keep their own height, as in the
   other tab bars: stretched by flex, a hovered tab was shaded over the
   active tab's indigo bar height too. */
.plan_tabs {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.plan_tabs .w3-button {
  flex: none;
  width: auto;   /* styles.css sets every button to 150px */
}

/* The phone list's entries are buttons: full width, left aligned. */
#plan_nav_menu .w3-button {
  width: 100%;
  text-align: left;
}

/* Create pages: SSH keys to put on the slice. A row is a label, so a tap
   anywhere on it ticks the box. */
.key_row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(0, 3fr);
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.key_row .w3-check {
  position: relative;
  top: 0;
}

@media (max-width: 600px) {
  .key_row {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .key_row .key_names {
    grid-column: 2;
    opacity: 0.75;
  }
}

/* A check box option with its description (backups, private IP, IPv6). */
.option_row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  padding: 8px 0;
  cursor: pointer;
}

/* The root password box and its show/hide eye, inside the box's right
   edge. */
.password_box {
  position: relative;
  max-width: 450px;
}

.password_box .w3-input {
  padding-right: 40px;
}

.password_eye {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 40px;
  width: 40px;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* A field kept to the old 450px on wide screens, the full width on phones. */
.field_450 {
  width: 100%;
  max-width: 450px;
}

/* forms.js: the list of problems next to a form's submit button. */
.form_summary {
  display: none;
  margin-bottom: 12px;
}

.form_summary ul {
  margin: 4px 0 0 0;
  padding-left: 20px;
}

/* The create pages' sections: a box each, with a gap. */
.create_section {
  margin-bottom: 16px;
}

/* The submit button: a quarter of the width as before on wide screens, the
   full width on phones. */
.create_submit {
  width: 25%;
  min-width: 150px;
}

@media (max-width: 600px) {
  .create_submit {
    width: 100%;
  }
}


/* A read-only value with a copy button beside it (cmd_row): the volume
   commands, the referral link, the API token, the transfer codes. The box
   takes the remaining width, so it shrinks on a phone instead of pushing the
   button off the screen. */
.cmd_row {
  display: flex;
  /* stretch, not center: the button is as tall as the box. Centred, it was
     the box's height less its top and bottom borders, so 1px short at each
     edge. */
  align-items: stretch;
  padding: 4px 0 8px 0;
}

.cmd_row .w3-input {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 8px;
}

/* The focus ring of a clicked (or double-clicked) box was painted under the
   button, so its right-hand side vanished; the box now sits above it. */
.cmd_row .w3-input:focus {
  position: relative;
  z-index: 1;
}

.cmd_row button {
  flex: 0 0 auto;
  width: auto;
  padding: 0 12px;
  border: none;
}

/* "copied!" keeps to the middle of the line rather than the top. */
.cmd_row .copied_note {
  align-self: center;
}

/* The hover tooltip ("copy", then "copied!") sits to the right of the button.
   In a narrow panel (the volume Show Config) it hung past the panel's edge and
   gave it a sideways scrollbar, so the box is shortened to leave room for it.
   The commands are longer than the box anyway; they scroll inside it. Below
   992px there is no tooltip (copied_note shows instead, and the box shrinks
   to make room for it). */
@media (min-width: 993px) {
  .cmd_row {
    padding-right: 64px;
  }
}

/* Console (header button and the slices list's menu item): not on touch-only
   devices (phones, tablets). The HTML5 VNC client has no keyboard there and its
   fixed-size terminal is too small to read. Desktops keep it at any window
   size; touchscreen laptops too (their main pointer is the mouse). */
@media (hover: none) and (pointer: coarse) {
  .console_action {
    display: none !important;
  }
}


/* Page notes and the amber attention box (_theme.html notice / warning):
   outlined with a bar on the left, no fill. The pages' info icons were
   written "darkblue", for the old pale blue fill; on the dark page that is
   nearly invisible, so the icon takes the bar's blue. */
.notice_box .fa-info-circle {
  color: var(--sym-accent) !important;
}

.warning_box .fa-exclamation-triangle {
  color: #ff9800 !important;
}

/* Create pages: the line over the app / symScript / snapshot / slice cards
   while none is chosen ("Choose an app to continue."). */
.source_hint {
  padding-bottom: 8px;
  opacity: 0.8;
}

/* Hanging indent: when a note or flash wraps, the next lines start under the
   text, not under the icon.
   - Page notes / the unsaved-changes box: icon, then the text (note_text) as
     a flex row.
   - Flashes and the message of the day: the icon (and the x) are floats; the
     text (flash_text) is a block beside them (overflow:hidden keeps it out
     from under the floats). */
.notice_box:has(> .note_text),
.warning_box > span:has(> .note_text) {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.notice_box > i,
.warning_box > span > i {
  flex: none;
}

.flash_text {
  display: block;
  overflow: hidden;
  padding-top: 2px;
  padding-right: 10px;
}

/* The same left edge inside pages: a page note's wrapper (a w3-padding div
   around it) and the title bar of the slice tabs and other inner pages
   ("Details", "Slice Backups" ... and Docs on the right) had 16px of their
   own on each side. */
.w3-padding:has(> .notice_box:only-child) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.inner_main > .w3-bar > .w3-bar-item:first-child {
  padding-left: 0;
}

.inner_main > .w3-bar > .w3-bar-item.w3-right {
  padding-right: 0;
}

/* Cards have the same rounded corners everywhere: the list cards on phones
   (6px, .card_row above), and the choice cards (images, regions, plans on
   phones, apps / symScripts / snapshots / slices / backups). Section boxes
   stay square (they hold the cards); buttons, fields and notes keep w3's
   4px. The plan table (601px and wider) is a table: square rows. The chosen
   card's blue outline follows the corners. */
.choice_cards [type=radio] + div,
.region_picker [type=radio] + div,
.source_card {
  border-radius: 6px;
}

@media (min-width: 601px) {
  .plan_cards [type=radio] + .plan_body {
    border-radius: 0;
  }
}

/* Theme switch at the top of the account menu: "Theme", then a sun and a
   moon. The current one has a square outline in the text colour, so it is
   high contrast in either theme (white on dark, black on light). */
.theme_switch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 16px;
}
.theme_switch_label {
  margin-right: auto;
}
.theme_btn {
  width: 40px;
  height: 36px;
  padding: 0;
  font-size: 18px;
  color: inherit;
  background: none;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  /* They are links: centre the icon, no underline. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}
.theme_btn.theme_current {
  border-color: currentColor;
  cursor: default;
}

/* API slug pages (zvox/slug_*.html): the line about the API under the tabs;
   slugs in monospace, as typed in API calls. */
.slug_intro {
  padding-top: 16px;
}
/* The sort menu is first in the toolbar here (no button before it), so no
   gap on its left: it lines up with the filter box under it. */
.slug_toolbar .list_sort {
  margin-left: 0;
}
.slug_value .name_text {
  font-family: monospace;
  font-size: 15px;
}

/* Chrome: keep the left menu's 3px scrollbar space (styles.css) even when
   the menu fits, so it doesn't shift sideways when the bar appears (e.g.
   opening ADMIN). Firefox gets the same just below. */
#sidebar {
  scrollbar-gutter: stable;
}

/* Firefox: the left menu's scrollbar. styles.css / styles_dark.css make the
   scrollbars 3px with ::-webkit-scrollbar, which Firefox doesn't read, so
   when the menu got taller than the window (e.g. opening ADMIN) Firefox put
   in a wide bar that pushed the menu over. Here: Firefox's thin bar, its
   space always kept (scrollbar-gutter), so nothing moves when it is needed;
   and invisible until the pointer is over the menu (only its colour changes,
   which moves nothing). The menu is black in both themes, so the dark grey.
   Firefox only: -moz-appearance is understood by Firefox alone. (Not
   "@supports not selector(::-webkit-scrollbar)": Firefox counts every
   ::-webkit- selector as supported, so that skipped it. And not Chrome:
   there, scrollbar-width would override the 3px rules.) */
@supports (-moz-appearance: none) {
  #sidebar {
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scrollbar-color: transparent transparent;
  }
  #sidebar:hover {
    scrollbar-color: #555555 transparent;
  }
}