/* ============================================================
   GISTIL — THE HEADER. ONE FILE, EVERY PAGE.
   ------------------------------------------------------------
   Why this file exists at all: the site used to wear three
   different headers. The landing had its own (three in-page
   anchors, Blog, Pricing); the blog, /best and the legal pages
   shared a fourth-link version; and /pricing, /login, /account
   and the dashboard were rendered in a layout whose header
   offered exactly one destination — Pricing — which is what the
   owner saw and reported as "the header disappears, only
   Pricing is left". Three headers also meant three answers to
   "where am I", and none of them marked the current page.

   So: ONE partial (app/views/shared/_site_nav.html.erb), and
   this one stylesheet behind it. It is loaded by the landing
   bundle AND by the signed-in side, which are two separate
   asset pipelines by design (see LandingController), so it may
   only use custom properties that BOTH define:

       --bg --panel --edge --bone --bone-dim --mute
       --gold --gold-bright --gold-deep --display --mono

   Anything else it declares itself. That is why the widths are
   --nav-maxw / --nav-gutter here rather than the landing's
   --maxw / --gutter, and why radii are literal: dashboard.css
   spells its hairline --edge-2 and main.css spells it --edge2,
   so neither is safe to reach for.

   Position is FIXED, as it always was on the landing bundle;
   blog.css and legal.css already reserve 64px for it. The
   signed-in side pays the same 64px in dashboard.css.
   ============================================================ */

/* THE HEIGHT IS DECLARED ON :root, NOT ON .nav.
   Four stylesheets have to clear this header — main.css, blog.css, legal.css
   and dashboard.css — and until 2026-09-12 all four did it by repeating the
   literal `64px`. That made the height unraisable: the owner asked for a
   roomier header ("хедер мелкий") and the change would have been seven edits
   in four files, six of which are easy to miss. It is one number now, and the
   reserves read it with a fallback so a sheet that loads without nav.css still
   clears something sensible. */
:root { --nav-h: 72px; }

.nav {
  --nav-maxw: 1480px;
  --nav-gutter: clamp(24px, 4.5vw, 72px);

  position: fixed; inset: 0 0 auto; z-index: 40;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--edge) 60%, transparent);
}
.nav-in {
  max-width: var(--nav-maxw); margin: 0 auto;
  padding: 0 var(--nav-gutter); height: var(--nav-h);
  display: flex; align-items: center; gap: 36px;
}

/* The mark is the logo FILE plus the wordmark — never a glyph standing in
   for it, on any surface. */
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand img { width: 30px; height: 30px; }
.brand .word { font: 800 17px/1 var(--display); color: var(--bone); letter-spacing: .14em; }

/* ------------------------------------------------------------------ links --
   Full height on purpose: the current-page marker is a rule drawn ON the
   header's own bottom hairline, so each link has to reach it. */
/* 12.5px was the owner's "мелкий" (2026-09-12) and the row was tight with it;
   13.5px is where the mono caps stop reading as fine print without the links
   starting to compete with the wordmark. `padding-right` is a floor under the
   gap to the account block: `margin-left:auto` over there only guarantees
   space on a wide window, and it was exactly the narrow one he was looking at.
   The links are full-height, so the padding costs no vertical room. */
.nav-links { display: flex; gap: 26px; margin-left: 10px; padding-right: 20px; align-self: stretch; }
.nav-links a {
  position: relative; display: flex; align-items: center; height: 100%;
  padding: 0 10px; border-radius: 9px 9px 0 0;
  font: 500 13.5px/1 var(--mono); letter-spacing: .04em; color: var(--mute);
  white-space: nowrap; text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}

/* HOVER IS A PLACE, NOT A BRIGHTNESS.
   "при наведении как-то выделять элемент, на который навёл курсором, сейчас
   просто белеет" (owner, 2026-09-12). It did exactly that and nothing else:
   one `color` step from --mute to --bone, which on a row of eight mono labels
   is almost impossible to aim by. The pointer now lights a seat — a gold wash
   the width of the link, and a gold rule under it — which is the same gesture
   the extension's card makes behind its link (.gc-link:hover in
   extension/src/consent.js) and the same gold the current-page marker uses.

   The two are told apart by weight, deliberately: hover is a HALF-opacity rule
   and a wash, the page you are on is solid gold at full strength. Hovering the
   current link therefore does not make it look like a different link. */
.nav-links a:hover { color: var(--bone); background-color: color-mix(in srgb, var(--gold) 10%, transparent); }
.nav-links a:hover::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 2px 2px 0 0;
}
/* Keyboard focus is its OWN signal and never borrows the hover's. A ring, not
   a wash: somebody tabbing needs to know where the caret is even while the
   mouse happens to be resting somewhere else on the row. */
.nav-links a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -3px; border-radius: 9px; }

/* WHERE YOU ARE. Bone text plus a gold rule sitting on the hairline — gold is
   this product's chrome colour everywhere else too, so the marker reads as part
   of the frame rather than as a fifth kind of link. aria-current carries the
   same fact to a screen reader; the two are set together in the partial. */
.nav-links a[aria-current="page"] { color: var(--bone); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--gold); border-radius: 2px 2px 0 0;
  /* above the hover rule, which is the same 2px in the same place at 45% */
  z-index: 1;
}

/* Everything from here right. `margin-left:auto` lives on this row so the
   header keeps the same shape on every page. */
.nav-side { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ============================================================
   ACCOUNT ENTRANCE — the one live control in this row
   ------------------------------------------------------------
   Built as INLAID metal rather than a filled pill: a seat cut
   into the dark with a bevelled gold edge, bright top facet and
   deep bottom facet. No sheen sweep, no metallic gradient —
   this system never fakes material.
   ============================================================ */
.acct {
  --acct-edge: color-mix(in srgb, var(--gold) 54%, transparent);
  --acct-wash: color-mix(in srgb, var(--gold) 9%, transparent);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  white-space: nowrap; cursor: pointer; color: var(--gold-bright); text-decoration: none;
  background: var(--acct-wash); border: 1px solid var(--acct-edge); border-radius: 999px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 34%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--gold-deep) 60%, transparent),
    0 10px 24px -18px color-mix(in srgb, var(--gold) 75%, transparent);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.acct:hover {
  --acct-edge: color-mix(in srgb, var(--gold-bright) 82%, transparent);
  --acct-wash: color-mix(in srgb, var(--gold) 17%, transparent);
  color: color-mix(in srgb, var(--gold-bright) 62%, var(--bone));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 55%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--gold-deep) 70%, transparent),
    0 12px 30px -16px color-mix(in srgb, var(--gold) 95%, transparent);
}
.acct:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px -2px rgba(0,0,0,.85),
    inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 22%, transparent);
}
.acct__mark { width: 17px; height: 17px; flex: none; opacity: .72; transition: opacity .18s ease; }
.acct:hover .acct__mark { opacity: 1; }

.acct--nav { font: 600 12px/1 var(--mono); letter-spacing: .03em; padding: 9px 16px; }
.acct--cta { font: 700 13.5px/1 var(--mono); letter-spacing: .06em; padding: 16px 30px; }

/* --------------------------------------------------- the signed-in person --
   The chip is a door, so it behaves like one: it reacts, it takes focus, and
   it marks itself when you are already standing on the page it opens.

   THE RING (owner, 2026-09-09: "золотом тонкой линией, как у гугла, обводочка
   тоненькая красивая градиентная"; design lifted verbatim from the accepted
   dashboard proposal, app/output_to_user/dashboard_proposal2_fable_2026-09-09.html).
   One hairline of gold that runs deep -> bright -> deep around the chip. The
   gradient is the RING, not the fill: layer one paints the interior over the
   PADDING box, layer two paints the conic gold over the BORDER box, and the
   1px transparent border is the only place the second layer is left showing.

   Two notes for whoever touches this next:

   --ring is declared TWICE on purpose. @property registers it so it can be
   transitioned (an unregistered custom property is a token, and tokens do not
   interpolate); the plain declaration is what keeps the gradient valid in a
   browser that has no @property at all — Firefox got it in 128, and this site
   still serves 113. Without the plain value var(--ring) resolves to nothing
   there, the conic-gradient is invalid, and the whole background — ring
   included — disappears.

   The hover ends on 560deg, which is 200deg plus one full turn: the ring
   arrives back where it started. So a touch device that latches :hover after a
   tap, and a reader who asked for no motion, both end up looking at exactly
   the ring everyone else sees. There is no state this can get stuck in. */
@property --ring { syntax: "<angle>"; inherits: false; initial-value: 200deg; }

.who {
  --ring: 200deg;
  /* THE MATERIAL, as five numbers. Defaults are SLATE — the machined graphite
     the storefront gives its one card that is not a rung on the ladder — so a
     plan slug this build has never met still gets a finished chip instead of a
     broken gradient. Every named material below overrides all five.
     --who-tex is set inline by shared/_site_nav (a digest-stamped asset name
     cannot live in a static stylesheet); `none` keeps the disc valid if it is
     ever rendered without one. */
  --who-deep: #49566A; --who-mid: #8B95A2; --who-bright: #D3DAE3;
  --who-lit: #DBE3EB; --who-ink: #0B0E12;
  --who-tex: none; --who-tex-size: 96px; --who-lift: .40; --who-lift-2: .28;
  /* The wash that lifts the ink off the plate. WHITE on a metal, because a
     metal's own highlight IS white. The two app materials override it with
     their own light tone — see below; a white wash strong enough to make them
     legible washes the teal and the violet out with it (measured: saturation
     .11 under white against .38 under their own light, at equal contrast). */
  --who-wash: 255, 255, 255;
  display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px;
  border: 1px solid transparent; border-radius: 999px;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    conic-gradient(from var(--ring),
      var(--who-deep) 0deg, var(--who-lit) 90deg, var(--who-mid) 180deg,
      var(--who-deep) 250deg, var(--who-bright) 320deg, var(--who-deep) 360deg) border-box;
  font: 500 12px/1 var(--mono); color: var(--bone-dim); letter-spacing: .02em;
  max-width: 190px; overflow: hidden; white-space: nowrap; text-decoration: none;
  transition: --ring .9s ease, color .16s ease;
}

/* The four stops of each ramp are read off the material's own colormap in
   script/bake_plan_textures.py — the ring is not a new palette, it is the plate
   seen edge-on. The gold row is byte-for-byte the ring that shipped 2026-09-09.
   --who-lift/-2 are the same white wash .plate lays over each texture so the
   ink clears 4.5:1; copper needs the most of it, gold and silver the least. */
.who--copper { --who-deep: #6E3F22; --who-mid: #B5683A; --who-bright: #ECA878;
  --who-lit: #FCD4B0; --who-ink: #160A03; --who-lift: .46; --who-lift-2: .34; }
.who--silver { --who-deep: #5C6470; --who-mid: #9AA3AE; --who-bright: #E4E8EE;
  --who-lit: #F8FAFC; --who-ink: #0A0C0F; --who-lift: .34; --who-lift-2: .22; }
.who--gold   { --who-deep: #8A6D1C; --who-mid: #C9A227; --who-bright: #EED27C;
  --who-lit: #F3E3A0; --who-ink: #171002; --who-lift: .34; --who-lift-2: .22; }
/* The app ladder is a SCREEN, not a plate: its textures are portrait OLED
   fields, so they are laid on at a smaller scale or the 22px disc shows one
   flat patch of them. */
.who--smart  { --who-deep: #0D3837; --who-mid: #21A89C; --who-bright: #7FE7DB;
  --who-lit: #A8F2E9; --who-ink: #041A19; --who-tex-size: 44px;
  --who-wash: 168, 242, 233; --who-lift: .64; --who-lift-2: .52; }
.who--super  { --who-deep: #261F5A; --who-mid: #7D6EF0; --who-bright: #BDB4FF;
  --who-lit: #DAD4FF; --who-ink: #0D0A28; --who-tex-size: 44px;
  --who-wash: 218, 212, 255; --who-lift: .70; --who-lift-2: .58; }
/* The initial is the one piece of solid material in the header — the ring is
   the line, this is the seal. Dark ink on metal rather than metal on dark: at
   22px a metal glyph on a dark disc is a smudge, and this has to be legible
   first. Same three layers .plate uses on the storefront, in the same order:
   a white wash, the baked texture, the flat mid colour underneath. */
.who__pic {
  width: 22px; height: 22px; flex: none; border-radius: 999px;
  display: grid; place-items: center; text-transform: uppercase;
  background:
    linear-gradient(180deg, rgba(var(--who-wash), var(--who-lift)),
      rgba(var(--who-wash), var(--who-lift-2)) 58%,
      rgba(var(--who-wash), calc(var(--who-lift-2) - .04))),
    var(--who-tex) center / var(--who-tex-size) auto,
    var(--who-mid);
  color: var(--who-ink); font: 800 11px/1 var(--display);
  text-shadow: 0 1px 0 rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.45);
}
.who__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who:hover { --ring: 560deg; color: var(--bone); }
.who:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Already standing on the account page: the ring cannot say it — it is always
   there — so the halo does, the same way the links use a rule they only wear
   on their own page. */
.who[aria-current="page"] {
  color: var(--bone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--who-mid) 16%, transparent);
}

/* Sign-out is a DELETE, so it is a real form and a real button — never a link
   that quietly changes state on GET. Styled to sit quietly beside the chip. */
.nav-out { display: inline-flex; margin: 0; }
.nav-out button {
  font: 500 12px/1 var(--mono); letter-spacing: .03em; cursor: pointer;
  color: var(--mute); background: none; border: 1px solid transparent;
  border-radius: 999px; padding: 9px 12px; transition: color .16s, border-color .16s;
}
.nav-out button:hover { color: var(--bone); border-color: var(--edge); }
.nav-out button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ------------------------------------------------------------ narrow rows --
   Measured at 1440/1280/900/620/390 with the signed-in row, which is the
   longest one there is (five destinations, a name chip and sign-out). */
@media (max-width: 1100px) {
  .nav-in { gap: 22px; }
  .nav-links { gap: 18px; padding-right: 12px; }
  .nav-links a { font-size: 12.5px; padding: 0 8px; }
  .who { max-width: 150px; }
}
@media (max-width: 900px) {
  .nav-in { gap: 16px; }
  .nav-links { gap: 15px; padding-right: 8px; }
  .nav-links a { font-size: 12px; padding: 0 6px; }
  .nav-out button { padding: 9px 8px; }
}
@media (max-width: 620px) {
  /* On a phone the row keeps what a phone cannot otherwise reach. The brand
     mark IS Home, so Home goes; Best of is one tap away from Blog and from the
     footer, so it goes too. Blog, Pricing and — for somebody signed in — their
     own screen stay, and so does the account entrance. Sign-out goes because it
     is on the account page the chip opens, which is where the header has always
     sent people for it. */
  .brand .word { display: none; }
  .nav-in { gap: 12px; padding: 0 18px; }
  .nav-links { gap: 13px; margin-left: 0; padding-right: 0; }
  .nav-links a { font-size: 11.5px; letter-spacing: .02em; padding: 0 4px; }
  .nav-links a[data-nav="home"],
  .nav-links a[data-nav="best"] { display: none; }
  .acct--nav { padding: 8px 13px; font-size: 11.5px; letter-spacing: .02em; }
  .nav-out { display: none; }
  .who { max-width: none; padding: 4px; }
  .who__name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links a, .acct, .acct__mark, .who, .nav-out button { transition: none; }
}

/* ============================================================
   THE FOOTER BAR. ONE ROW, EVERY PAGE (owner, 2026-09-17, п. 151).
   ------------------------------------------------------------
   Language on the left as a menu, where Gistil publishes on the
   right. It lives in THIS file for the reason the header does:
   nav.css is the one sheet all four layouts load, and a partial
   styled in only one bundle is the bug that once made the language
   row a bulleted column on /pricing. Literal colours where the two
   bundles spell a variable differently (--panel2 / --panel-2).

   The chips inside the menu are the ones the owner praised on
   2026-09-09 — flag, native name, gold FILL on the active one —
   unchanged; only the container is new. The menu opens UPWARD:
   the bar is the last thing on the page.
   ============================================================ */
.fbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 24px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--edge);
}
.flangs { position: relative; margin: 0; padding: 0; border: 0; }
.flangs__menu { position: relative; }
.flangs__btn {
  display: inline-flex; align-items: center; gap: 9px; height: 38px;
  padding: 0 14px 0 11px; border-radius: 999px; cursor: pointer;
  font: 500 14px/1 var(--serif, Georgia, serif); color: var(--bone);
  background: #14171C; border: 1px solid #2E333B;
  list-style: none; user-select: none;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .08s;
}
.flangs__btn::-webkit-details-marker { display: none; }
.flangs__btn::marker { content: ""; }
.flangs__btn:hover { background: #191C22; border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 14%, transparent); }
.flangs__btn:active { transform: translateY(1px); background: #101216; }
.flangs__btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.flangs__chev { color: var(--mute); flex: none; transition: transform .18s ease, color .15s; }
.flangs__menu[open] .flangs__chev { transform: rotate(180deg); color: var(--gold-bright); }
.flangs__menu[open] .flangs__btn { border-color: var(--gold-deep); }
.flangs__flag { display: inline-block; border-radius: 2px; flex: 0 0 auto; }

.flangs__list {
  position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 30;
  list-style: none; margin: 0; padding: 10px;
  display: grid; grid-template-columns: repeat(2, minmax(132px, 1fr)); gap: 6px;
  background: #0F1116; border: 1px solid #2E333B; border-radius: 16px;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .4);
  animation: flangs-up .14s ease-out;
}
@keyframes flangs-up { from { opacity: 0; transform: translateY(6px); } }
.flangs__list li { margin: 0; padding: 0; }
.flangs__list a {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 400 14px/1 var(--serif, Georgia, serif); text-decoration: none;
  color: var(--bone-dim); background: #14171C; border: 1px solid #2E333B;
  border-radius: 999px; padding: 9px 14px 9px 10px;
  transition: background .15s, border-color .15s, color .15s;
}
.flangs__list a:hover { color: var(--bone); border-color: var(--mute); background: #191C22; }
.flangs__list a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
/* The one state that must not be missed: filled, not just recoloured. */
.flangs__list a[aria-current] { color: #241C05; background: var(--gold-bright);
  border-color: var(--gold-bright); font-weight: 600; }

/* The social row inside the bar: no heading (the nav is labelled for readers
   that need a name), no rule of its own — the bar draws the one hairline. */
.fbar .fsocial { margin: 0; padding: 0; border: 0; }
.fbar .fsocial h4 { display: none; }
.fbar .fsocial a { width: 38px; height: 38px; }

/* © and the not-affiliated sentence: kept (it is the trademark disclaimer the
   stores ask for), one quiet line under the bar. */
/* --mute, not the bundles' second mute: #697077 on this ground is 4.0:1, and
   a line made smaller must not also be made fainter (floor 4.5:1). */
.fbar + .fbot, .fbar ~ .fbot { border-top: 0; padding-top: 14px; font-size: 11px; color: var(--mute); }
.fbar ~ .fdisc { font-size: 11px; color: var(--mute); }

@media (max-width: 520px) {
  .flangs__list { grid-template-columns: 1fr 1fr; min-width: 0; width: min(92vw, 320px); }
}
@media (prefers-reduced-motion: reduce) {
  .flangs__list { animation: none; }
  .flangs__btn, .flangs__chev { transition: none; }
}

/* п. 264 — the account chip says what it does. The site's bubble (the "?"
   tooltips' look), opening below and flush with the chip's right edge so it
   never leaves the window; on hover and on keyboard focus, never a system
   title. The chip clips its own overflow, so the bubble is its sibling. */
.whotip { position: relative; display: inline-flex; }
.whotip__body {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  width: max-content; max-width: min(260px, calc(100vw - 32px));
  padding: 9px 12px; border-radius: 10px; text-align: left; white-space: normal;
  background: var(--panel-3, #1A1E25); border: 1px solid var(--edge-2, #2E333B); color: var(--bone, #F2EEE6);
  font: 400 13.5px/1.45 var(--serif, Georgia, serif); letter-spacing: 0; text-transform: none;
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .9);
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s; pointer-events: none; }
.whotip__body::before { content: ""; position: absolute; right: 22px; top: -6px; width: 10px; height: 10px;
  background: inherit; border-left: inherit; border-top: inherit; transform: rotate(45deg); }
.whotip:hover .whotip__body, .whotip:focus-within .whotip__body {
  opacity: 1; visibility: visible; transform: none; transition: opacity .12s ease, transform .12s ease; }
@media (hover: none) { .whotip:hover .whotip__body { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .whotip__body { transition: none; transform: none; } }