/*
 * frame.css: the styles of the frame of the panel page (index.html), round 3 of the mockup: the top bar across the page (the brand, the URL check in the middle, the switches and the buttons on the right), the side column (the domain switcher on top, whose box is styled in the site switcher part of panel.css, and the menu of the four views), the main column (the head of the view with its title or, for the Page view, the way back to Pages and the address shown, the data line and the warning about old data), the lens bar of the Visits view, the small switch of the mode of Pages, Freshness and Page (ui/mode-switch.js), and how the frame folds on a narrow screen (the side column stands above the main column, the menu becomes one row of four).
 * Loaded by: assets/css/makieta.css, this section. It reads the tokens of the section tokens.css (--bg, --surface, --surface-2, --line, --line-strong, --text, --text-2, --text-3, --focus, --grad, --grad-strong, --on-grad, --brand-a, --brand-b, --accent-text, --accent-b-text, --st-older, --st-older-bg, --st-error, --st-error-bg, --ink-conf, --r-s, --r-m, --r-l, --shadow-pop) and the old names mapped onto them; it defines no colour of its own, so both themes work. Its own tokens are the two sizes of the frame (--side-w, --top-h).
 * Nothing in it uses url() or @import, so a Content-Security-Policy that allows only 'self' is enough. Type comes from the --fs-*, --fw-*, --lh-* and --ls-* tokens.
 * @comments-complete 2026-11-09
 */
:root { --side-w: 256px; --top-h: 64px; }

/* The shell: the top bar across the page, the side column on the left, the main column on the right. */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "top top" "side main"; min-height: 100vh; }

/* Top bar: sticks to the top; the brand cell is as wide as the side column, so the URL check starts where the main column starts. */
.topbar { grid-area: top; position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr) auto; align-items: center; gap: 0 20px; min-height: var(--top-h); padding: 0 20px 0 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.tb-brand { padding-left: 22px; font-size: var(--fs-l); white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }

/* URL check: a framed field with the magnifier (the submit button) on the left and the "/" key hint on the right; the suggestions and the message hang under the field. */
.finder { width: 100%; max-width: 720px; }
.finder-box { position: relative; }
/* The field has a visible frame in both themes: the strong line at rest, a tint of the accent on hover, the accent ring on focus; the field takes the page background, which is slightly off the bar in the light theme and clearly darker than the bar in the dark theme, so it does not melt into it. */
.finder-in { width: 100%; height: 44px; padding: 0 44px 0 48px; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--bg); color: var(--text); font: inherit; font-size: 15px; box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent); }
.finder-in::placeholder { color: var(--text-3); }
.finder-in:hover { border-color: color-mix(in srgb, var(--focus) 65%, var(--line-strong)); }
.finder-in:focus { outline: none; background: var(--surface); border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
.finder-go { position: absolute; top: 3px; left: 3px; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-s); color: var(--text-2); }
.finder-go:hover { background: var(--line); color: var(--text); }
.finder-go svg { display: block; }
/* The main button of a view (Access "Check now", Updates "Install"): filled with the text colour. */
.go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 22px; border: 1px solid var(--text); border-radius: var(--r-m); background: var(--text); color: var(--surface); font-size: 15px; font-weight: 600; }
.go:hover:not(:disabled) { background: var(--text-2); }
.finder-key { position: absolute; top: 50%; right: 10px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; transform: translateY(-50%); border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--text-3); font: inherit; font-size: 12px; font-weight: var(--fw-semibold); pointer-events: none; }
.finder-in:focus ~ .finder-key { display: none; }
.finder-list { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; max-height: min(60vh, 420px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m); box-shadow: var(--shadow-pop); }
.finder-opt { padding: 8px 12px; border-radius: var(--r-s); cursor: pointer; overflow-wrap: anywhere; }
.finder-opt:hover, .finder-opt.active { background: var(--band); }
.finder-opt.active { box-shadow: inset 3px 0 0 var(--focus); }
.finder-msg { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; padding: 8px 12px; border: 1px solid var(--st-error); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--shadow-pop); color: var(--st-error); font-weight: 600; }

/* Side column: sticks under the top bar and is as tall as the window under it, so its background reaches the bottom; it does not clip (the popup of the domains is wider than the column) and it lies above the main column (but under the top bar), so that popup may reach over the sticky lens bar. */
.side { grid-area: side; position: sticky; top: var(--top-h); z-index: 45; align-self: start; height: calc(100vh - var(--top-h)); padding: 16px 0 24px; background: var(--surface); border-right: 1px solid var(--line); }

/* Menu: entries that reach the left edge with a rounded right end (as in Search Console); the open view is tinted, with a short gradient bar at the edge; the parent of the open view (Pages while a page is shown) is tinted lighter. The mini result sits at the right end; one that asks for action (robots blocked) is a red pill. */
.side-nav { margin-top: 14px; }
.nav-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0 12px 0 0; list-style: none; }
.nav-item { position: relative; display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 14px 0 24px; border-radius: 0 999px 999px 0; color: var(--text-2); font-size: 14.5px; font-weight: var(--fw-medium); text-decoration: none; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.nav-item[aria-current] { background: color-mix(in srgb, var(--brand-a) 13%, var(--surface)); color: var(--accent-text); font-weight: var(--fw-semibold); }
.nav-item[aria-current="true"] { background: color-mix(in srgb, var(--brand-a) 6%, var(--surface)); }
.nav-item[aria-current]::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: 0; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--brand-a), var(--brand-b)); }
.nav-ic svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-stat { flex: none; display: inline-flex; align-items: baseline; gap: 4px; color: var(--text-3); font-size: 12px; font-weight: var(--fw-regular); white-space: nowrap; }
.nav-stat b { color: var(--text-2); font-size: 13px; font-weight: var(--fw-medium); letter-spacing: var(--ls-number); }
.nav-item[aria-current] .nav-stat b { color: inherit; }
.nav-item.is-bad .nav-stat { padding: 1px 8px; border-radius: 999px; background: var(--st-error-bg); color: var(--st-error); font-weight: var(--fw-medium); }
.nav-item.is-bad .nav-stat b { color: inherit; }

/* Main column: as wide as the window allows, up to a limit, next to the side column. While a download runs (aria-busy) the view dims after a short delay, so a fast answer does not flash. */
.main { grid-area: main; min-width: 0; max-width: 1560px; padding: 0 28px 56px; }
.main[aria-busy="true"] #content, .main[aria-busy="true"] .head-meta { opacity: 0.45; transition: opacity 0.2s 0.15s; }
#content > .view > .card:first-child { margin-top: 0; }

/* Head of the view: the title on the left (for the Page view: the link back to Pages above the address shown), the data line on the right. */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; padding: 26px 0 16px; }
.ph-title { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.view-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); line-height: var(--lh-tight); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-s); font-weight: var(--fw-medium); }
.crumb { border-radius: 4px; color: var(--accent-text); text-decoration: none; }
.crumb:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.crumb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.crumb-sep { color: var(--text-3); }
.page-now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.page-now .finder-badge { flex: none; }
.fn-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--grad-strong); color: var(--on-grad); }
.fn-icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.finder-addr { min-width: 0; font-size: 20px; font-weight: var(--fw-semibold); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.finder-site { color: var(--text-3); font-weight: var(--fw-medium); }
.finder-path { color: var(--accent-text); }
.page-now.is-page .finder-path { color: var(--accent-b-text); }
.finder-badge { padding: 3px 11px; border-radius: 999px; background: var(--grad-strong); color: var(--on-grad); font-size: var(--fs-s); font-weight: var(--fw-medium); }
.head-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 10px; }
.head-meta .meta { color: var(--text-3); font-size: var(--fs-s); }
.head-meta #refresh-status { flex-basis: 100%; text-align: right; }
.stale-warn { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--st-older-bg); color: var(--st-older); font-weight: var(--fw-medium); font-size: var(--fs-s); }
.stale-warn::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; font-size: 0.7rem; line-height: 1; }

/* Lens bar of the Visits view: a band over the width of the main column that sticks under the top bar while the view is scrolled. */
.lens { position: sticky; top: var(--top-h); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 -28px 18px; padding: 10px 28px; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lens-l { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); }
.lens-split { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.lens-split li { display: inline-flex; align-items: center; gap: 5px; color: var(--text); }
.lens-split b { font-weight: var(--fw-semibold); }
.lens-split .lens-note { color: var(--text-3); }
.key { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; }
.key.seg-c { background: var(--ink-conf); }
.key.seg-u { background: var(--text-3); }
.key.seg-n { background: var(--line-strong); }
.lens-help { flex: none; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); font-weight: var(--fw-semibold); }
.lens-help::before { content: "?"; }
.lens-help:hover { background: var(--band); }
.lens-panel { position: absolute; top: 100%; left: 28px; z-index: 31; display: flex; flex-direction: column; gap: 6px; width: min(620px, calc(100% - 56px)); padding: 12px 16px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-m); box-shadow: var(--shadow-pop); font-size: 0.95rem; }
.lens-panel b::after { content: ": "; }
.lens-panel .muted { color: var(--text-3); }
/* The small switch of the mode of the other views: the two buttons and their "?" in one row; at the top of Freshness and Page it stands on the right, with its label in front. */
.mode-row, .mode-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.mode-mini { justify-content: flex-end; }
.pages-empty { padding: 18px; border-style: dashed; border-color: var(--line-strong); background: var(--surface-2); }
.pages-empty h2 { margin-bottom: 4px; }

/* A smaller desktop: a narrower side column and main column padding. */
@media (max-width: 1279px) {
  :root { --side-w: 248px; }
  .topbar { gap: 0 14px; }
  .finder-key { display: none; }
  .finder-in { padding-right: 14px; }
  .nav-item { gap: 10px; padding: 0 12px 0 18px; }
  .main { padding: 0 22px 48px; }
  .lens { margin: 0 -22px 16px; padding: 10px 22px; }
  .lens-panel { left: 22px; width: min(620px, calc(100% - 44px)); }
}
/* A tablet or a phone: the frame stacks. The top bar is the brand and the buttons, then the URL check over the full width; the side column stands above the main column: the domain over the full width, then the four views in one row, the open one underlined with the gradient. */
@media (max-width: 959px) {
  .app { display: block; }
  .topbar { position: static; display: flex; flex-wrap: wrap; gap: 10px 12px; padding: 10px 16px 12px; }
  .tb-brand { flex: 1 1 auto; padding-left: 0; }
  .finder { order: 3; flex: 1 1 100%; max-width: none; }
  .finder-key { display: none; }
  .finder-in { padding-right: 14px; font-size: 16px; }
  .side { position: static; height: auto; overflow: visible; padding: 12px 16px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .site-switch { margin: 0; }
  .side-nav { margin: 8px -16px 0; }
  .nav-list { flex-direction: row; gap: 0; padding: 0 8px; }
  .nav-list li { flex: 1 1 0; min-width: 0; }
  .nav-item { flex-direction: column; justify-content: center; gap: 3px; min-height: 64px; padding: 8px 4px 10px; border-radius: var(--r-m) var(--r-m) 0 0; font-size: 13px; text-align: center; }
  .nav-item[aria-current], .nav-item[aria-current="true"] { background: transparent; }
  .nav-item[aria-current]::before { top: auto; right: 14px; bottom: 0; left: 14px; width: auto; height: 3px; border-radius: 3px 3px 0 0; background: var(--grad); }
  .nav-name { flex: none; max-width: 100%; }
  .nav-stat { max-width: 100%; overflow: hidden; font-size: 11px; }
  .nav-stat b { font-size: 12px; }
  .nav-item.is-bad .nav-stat { padding: 0 6px; }
  .main { padding: 0 16px 48px; }
  .page-head { padding: 18px 0 12px; }
  .view-title { font-size: var(--fs-xl); }
  .finder-addr { font-size: var(--fs-l); }
  .fn-icon { width: 34px; height: 34px; }
  .head-meta { justify-content: flex-start; }
  .head-meta #refresh-status { text-align: left; }
  .lens { position: static; margin: 0 -16px 14px; padding: 8px 16px; }
  .lens-panel { left: 16px; width: calc(100% - 32px); }
}
@media (max-width: 719px) {
  .lens { gap: 6px 8px; }
  .lens-l { display: none; }
  .card { padding: 14px; }
}
/* A phone: the buttons of the top bar become items of the bar itself: the account menu stands next to the brand, the button PRO and the reload button take the second row, the URL check the third. */
@media (max-width: 599px) {
  .tb-brand { font-size: 17px; }
  .actions { display: contents; }
  .actions .acct { order: 1; margin-left: auto; }
  .actions .pro-btn, .actions .refresh { order: 2; }
  .actions .refresh { margin-left: auto; }
  .nav-item { padding-right: 1px; padding-left: 1px; font-size: 12px; } /* five views in a row: the longest name, Aktualność, must fit a 360 px phone without the ellipsis */
}
@media (prefers-reduced-motion: no-preference) {
  .nav-item, .go, .finder-go, .lens-help, .site-btn { transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
}