/*
 * Our own additions on top of the TubeSpots layout's main.css (which is copied from the layout's
 * build and must not be edited -- docs/deployment/tubespots-layout-assets.md). Only for pages the
 * layout has no mockup for, and fixes the layout cannot carry. Loaded after main.css by the panel
 * (views/panel/_head.php) and the TubeSpots site (views/site/tubespots/_head.php).
 */

/* /admin dashboard: the five stat tiles share one row when there is room (the landing's .cards3
   keeps tiles at least 280px wide, which pushed the last ones to a second row). */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 16px;
}

/* The tiles are links (the whole card); keep the card's look, not the browser's link colour. */
.stat-tiles a.card {
  color: inherit;
  text-decoration: none;
}

.stat-tiles a.card:hover,
.stat-tiles a.card:focus-visible {
  border-color: var(--line-3);
}

/* The inert default submit button table forms start with (panel/_confirm.php): rendered and
   enabled, so Chromium's implicit submission presses it instead of skipping to a row toggle or a
   bulk Delete, but invisible and out of the layout. Not `hidden`: Chromium skips a display:none one. */
.submit-guard {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* /admin/absorb and /admin/absorb/{brand}: no layout page. Cells wrap instead of widening the
   table, the resolution date goes under its badge and the action buttons wrap, so the actions
   column stays inside the card from 1280px up (QA 59L0uzNi D8, QxhfeV9E D1, 2026-10-16). */
.tbl--absorb th,
.tbl--absorb td {
  white-space: normal;
}
.tbl--absorb td.k {
  overflow-wrap: anywhere;
  min-width: 140px;
}
.tbl--absorb .wrap {
  min-width: 150px;
}
.tbl--absorb .resolved-at {
  display: block;
  margin-top: 4px;
  white-space: nowrap;
}
.tbl--absorb .acts {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* Brand tabs (views/site/tubespots/_brand_tabs.php): the active tab is a dark tab with an accent
   ring, not the layout's yellow fill. The ring came in with the logos, on which the yellow made the
   Sexu and Senioras logos disappear (QA 59L0uzNi D3); the tabs show names only since U5 and keep
   the ring. Forced-colours mode keeps the layout's rule. */
@media (forced-colors: none) {
  .seg--brands [aria-current],
  .seg--brands [aria-current]:hover {
    background: var(--panel-4);
    color: var(--white);
    box-shadow: inset 0 0 0 2px var(--accent);
  }
}

/* Landing #hq: the HQ countries of the country table by name, in place of the layout's maps
   (they draw a fixed country list; views/site/tubespots/home.php, QA 59L0uzNi D10). */
.hq-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hq-list li {
  padding: 7px 13px;
  border: 1px solid var(--line-3);
  border-radius: var(--radius-pill);
  font-size: 14px;
  color: var(--white);
}

/* Range picker (U20): the days after data-max, which app.js renders `disabled`, read as plainly out
   of reach -- dimmed, no pointer, and no hover or range tint from main.css's day rules, whatever
   other state class the day carries. */
.dp__d:disabled,
.dp__d:disabled:hover {
  color: var(--muted);
  opacity: .35;
  background: none;
  box-shadow: none;
  cursor: default;
}

/* Legal pages (views/site/tubespots/legal/*.php, QA U42): long text in the landing shell. main.css
   zeroes heading and paragraph margins and has no list or measure for running text, so the section
   sets a reading measure, its own heading steps and bulleted lists. */
.legal .sec__in {
  max-width: calc(76ch + 2 * var(--gutter));
}
.legal .h2 {
  margin-bottom: 16px;
}
.legal__sub {
  color: var(--muted);
}
.legal h2:not(.h2) {
  margin: 40px 0 12px;
  color: var(--white);
  font-size: 20px;
  line-height: 1.3;
}
.legal h3 {
  margin: 24px 0 8px;
  color: var(--white);
  font-size: 16px;
}
.legal p,
.legal li {
  font-size: 15px;
  line-height: 1.65;
}
.legal p {
  margin: 0 0 14px;
}
.legal ul {
  margin: 0 0 14px;
  padding-left: 22px;
  list-style: disc;
}
.legal li + li {
  margin-top: 6px;
}
.legal a {
  text-decoration: underline;
}

/* Phones (spec «Пакет B»). main.css's tables keep their min-width and scroll sideways, the tab row
   scrolls, and the landing hides "Log in" below 640px; these rules keep the things a webmaster or
   admin looks for inside a 320-390px screen.

   Cabinet tabs (views/site/tubespots/_side.php, U16): the five tabs share the row instead of
   scrolling it, so all of them are in view on 320px. Each grows from its own label's width, not
   from zero: five equal fifths of 320px are narrower than "Payments". */
.tabs-m--fit {
  gap: 0;
  padding: 0 calc(var(--app-gutter) - 8px);
}
.tabs-m--fit a {
  flex: 1 1 auto;
  padding: 12px 4px 10px;
  text-align: center;
}
@media (max-width: 359px) {
  .tabs-m--fit a {
    padding-left: 2px;
    padding-right: 2px;
    font-size: 13px;
  }
}

/* Panel menu (views/panel/_side.php, U30): up to ten tabs wrap into rows instead of a row the admin
   has to scroll to find a section; the side menu takes over from 900px. */
@media (max-width: 899px) {
  .app--panel .tabs-m {
    flex-wrap: wrap;
    overflow-x: visible;
    column-gap: 0;
  }
  .app--panel .tabs-m a {
    padding: 8px 8px 6px;
    font-size: 13px;
  }
}

/* The sticky topbar is taller once its menu wraps, and main.css's 99px scroll padding (a one-row
   bar, 91px + 8px) would leave a focused or anchored element under it. Measured with all ten items
   (Chromium/WebKit): one row from 700px (83px), two rows below it (121px), three below 390px
   (159px); each value is the bar plus main.css's 8px. Items inside the bar cancel it, as main.css
   does for its own. */
@media (max-width: 699px) {
  html:has(.app--panel .topbar) {
    scroll-padding-top: 130px;
  }
  .app--panel .topbar :where(a[href], button, input, select, textarea, summary, [tabindex]) {
    scroll-margin-top: -130px;
  }
}
@media (max-width: 389px) {
  html:has(.app--panel .topbar) {
    scroll-padding-top: 168px;
  }
  .app--panel .topbar :where(a[href], button, input, select, textarea, summary, [tabindex]) {
    scroll-margin-top: -168px;
  }
}

@media (max-width: 639px) {
  /* Stats (`tbl--pin`, U2) and every panel table: the first column -- the row's date, domain,
     country or name -- stays at the left edge while the rest scrolls under it, so it is opaque. The
     header's and the Totals row's first cells keep their own sticky top/bottom too. A checkbox
     column (`w-cb`, held at its 48px so the next one pins flush) pins along with the cell after
     it. :where() keeps the body cells below main.css's hover and `is-sel` tints. A colspan cell --
     the empty state's "No results found." -- is not a column and stays a plain full-width row. */
  :is(.tbl--pin, .app--panel .tbl) thead tr:first-child > th:first-child,
  :is(.tbl--pin, .app--panel .tbl) tfoot td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
  }
  :is(.tbl--pin, .app--panel .tbl) :where(tbody td:first-child:not([colspan])) {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--panel);
  }
  .app--panel .tbl .w-cb {
    min-width: 48px;
  }
  .app--panel .tbl thead tr:first-child > th.w-cb + th,
  .app--panel .tbl :where(tbody td.w-cb + td) {
    position: sticky;
    left: 48px;
    z-index: 1;
    background: var(--panel);
  }
  .app--panel .tbl thead tr:first-child > th.w-cb + th {
    z-index: 3;
    background: var(--panel-3);
  }

  /* Stats (U2): the LQ columns go, and Payout -- the column the webmaster opens the page for --
     is pinned to the right edge as the grouping column is to the left; the RAW/UV/HQ counts scroll
     between them. Four counts of six-to-nine digits do not fit 360px however small the type, so a
     pinned Payout is what keeps it and the Totals row (sticky at the bottom, main.css) in view. A
     long domain or country wraps inside a column of its own width instead of pushing Payout out. */
  .tbl--pin .col-lq {
    display: none;
  }
  .tbl--pin.mw-780 {
    min-width: 0;
  }
  .tbl--pin tbody td:first-child:not([colspan]),
  .tbl--pin tfoot td:first-child {
    min-width: 104px;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: inset -1px 0 0 var(--line-2);
  }
  .tbl--pin thead tr:first-child > th:first-child {
    box-shadow: inset -1px 0 0 var(--line-2);
  }
  .tbl--pin thead th:last-child,
  .tbl--pin tfoot td:last-child {
    position: sticky;
    right: 0;
    z-index: 3;
    box-shadow: inset 1px 0 0 var(--line-2);
  }
  .tbl--pin :where(tbody td:last-child:not([colspan])) {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--panel);
    box-shadow: inset 1px 0 0 var(--line-2);
  }

  /* Domains (views/site/tubespots/site/_grid.php, U8): no "Added at" column and no min-width; a
     long domain wraps and Verify sits above Delete, so both stay on its row inside the screen and
     the domain keeps the room to wrap in a few lines, not a dozen. */
  .tbl--sites {
    min-width: 0;
  }
  .tbl--sites .col-added {
    display: none;
  }
  .tbl--sites td.k {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .tbl--sites .acts {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  /* Cabinet `.seg` link rows (Stats' Group by and Period presets, the brand tabs): main.css scrolls
     a row that is too wide with no sign that more is there -- at 360px Today and Yesterday were out
     of sight, and at 320px Bestvideos was cut to "Bes" (QA 59L0uzNi retest D2). They wrap instead,
     the items keeping their look; the panel's `.seg`s are not touched. */
  .app:not(.app--panel) .seg {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* Landing header (views/site/tubespots/_lhead.php, U44): "Log in" stays next to "Sign up". */
  .lhead__login {
    display: inline;
    white-space: nowrap;
  }
}

/* Up to 389px the logo, "Log in", "Sign up" and the burger need up to ~30px more than the header
   has (at 360px Chromium also keeps a 6px scrollbar gutter): the cabinet topbar's 18px logo
   (`.logo--sm`) and tighter gaps keep the burger on screen. */
@media (max-width: 389px) {
  .lhead__bar {
    gap: 8px;
  }
  .lhead__bar > .logo {
    font-size: 18px;
  }
  .lhead__right {
    gap: 10px;
  }
  .lhead__right .btn--xs {
    padding: 0 10px;
  }
}

/* Panel lists (U34): the pager's "Page X of Y · N total" is `.pager__info`, which the layout shows
   on a phone only; `.pager__total` keeps it on screen at every width, in front of the arrows. A
   single page prints the same line outside `nav.pager` (_pager.php) with the same class, so both
   look alike. */
.pager__total {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.pager .pager__total {
  margin-right: 6px;
}
@media (max-width: 639px) {
  .pager__total {
    color: var(--text);
  }
  .pager .pager__total {
    margin-right: 0;
  }
}

/* QA U9: solid red confirm button of delete dialogs (main.css has only the ghost variant). Not the
   layout's --red (#de4648): white on it is 4.14:1, under WCAG AA's 4.5:1 for 14px text. #c7343a is
   5.28:1, the hover #a8262c 7.05:1. */
.btn--danger {
  background: #c7343a;
  color: #fff;
}
.btn--danger:hover {
  background: #a8262c;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* QA U19/U28/U40: the form `.check input` (18px in main.css) matches the table `.cb` (16px). */
.check input {
  width: 16px;
  height: 16px;
}

/* QA U7: a failed check's reason sits under its Failed badge in the Domains table; long reasons
   wrap inside the Status column instead of widening the table. */
.tbl--sites .site-reason {
  display: block;
  margin-top: 4px;
  max-width: 260px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* QA U38: a message on the landing (?confirm=, ?signup=, ...) keeps its distance from the eyebrow
   under it, and a success notice (`_alert.php` renders it with role="status"; the neutral
   `.notice` of the forgot page has no role) reads as a success, not as plain text in a box. */
.hero .notice,
.hero .alert {
  margin-bottom: 20px;
}
.notice[role="status"] {
  border-color: rgba(3, 168, 124, 0.35);
  background: rgba(3, 168, 124, 0.1);
  color: var(--green-text);
}