/*
 * LT2 interface styles: tokens first, then components.
 *
 * The idea: flat sheets of cut paper on a pale slate ground. Nothing has a shadow, a gradient or a rounded
 * card. One corner of a sheet is cut at an angle, like the bubbles of the logo. The logo's three colours each
 * belong to one speaker:
 *   slate  = the Seimas record (official facts, imported data)
 *   leaf   = people (Lietuva 2.0 users: their numbers and their words)
 *   brand  = Lietuva 2.0 itself and the representatives' answers (actions, links, responses)
 * "For" is a soft moss green and "against" a dusty red, always with the word. Moss is a yellower green than the
 * brand and the action button, so "for" does not read as Lietuva 2.0 taking a side. (Blue and red were dropped:
 * beside white they recalled a flag.)
 *
 * Type: Sofia Sans for the interface, its Extra Condensed width for headings and figures (Lithuanian words are
 * long; a condensed face keeps them on one line on a phone), Brygada 1918 for words people wrote themselves.
 */

:root {
  /* Logo colours. Exact values of the logo; do not adjust. */
  --slate: #a7b1ac;
  --leaf: #7cc242;
  --brand: #1f6b3a;

  /* Ground and sheets */
  --ground: #e6ebe7;
  --sheet: #ffffff;
  --sheet-2: #f2f5f2;
  --ink: #14211b;
  --ink-2: #414f48;
  --ink-3: #66736c;
  --rule: #cdd5d0;

  /* Speakers */
  --slate-tint: #dfe4e1;
  --slate-ink: #48554f;
  --leaf-tint: #e4f2d3;
  --leaf-ink: #2c540f;
  --brand-deep: #154d29;
  --brand-tint: #dbe8dd;

  /* Actions and links */
  --action: #1f6b3a;
  --action-hover: #154d29;
  --action-ink: #ffffff;
  --link: #1b6034;

  /* Votes and sides */
  --for: #5c7838;
  --for-tint: #e7ebe1;
  --against: #aa524c;
  --against-tint: #f2e5e4;
  --abstain: #8a948e;
  --absent: #cbd1cd;
  --on-vote: #ffffff;

  /* Notes and errors */
  --note-bg: #fdeebf;
  --note-ink: #5a4200;
  --error: #b3261e;
  --focus: #ffb000;

  /* Type */
  --font-text: "Sofia Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sofia Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-voice: "Brygada 1918", "Palatino Linotype", Palatino, Georgia, serif;

  --fs-0: 0.8125rem;                      /* 13  labels, footnotes */
  --fs-1: 0.9375rem;                      /* 15  secondary text */
  --fs-2: 1.0625rem;                      /* 17  body */
  --fs-3: 1.25rem;                        /* 20  lead, voice text */
  --fs-4: 1.875rem;                       /* 30  h3 */
  --fs-5: clamp(2.25rem, 5vw, 3rem);      /* h2 */
  --fs-6: clamp(2.75rem, 8vw, 4.75rem);   /* h1 */
  --fs-fig: clamp(3.25rem, 10vw, 5.5rem); /* the big figures */

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2.25rem;
  --sp-7: 3.5rem;
  --sp-8: 5rem;

  --cut: 1.375rem;      /* the corner cut of a sheet */
  --cut-s: 0.5rem;      /* the corner cut of a button or a portrait */
  --measure: 38rem;     /* longest line of running text */
  --page: 72rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --slate: #6d7872; --leaf: #8fd158; --brand: #3f9a5c;
    --ground: #0e1411; --sheet: #17201b; --sheet-2: #1e2923;
    --ink: #e8efea; --ink-2: #b4c1b9; --ink-3: #8d9a93; --rule: #2d3a33;
    --slate-tint: #242e29; --slate-ink: #b4c1b9;
    --leaf-tint: #21331a; --leaf-ink: #bfe89b;
    --brand-deep: #123d22; --brand-tint: #1b2e22;
    --action: #2a7d45; --action-hover: #33915a; --action-ink: #ffffff; --link: #82d196;
    --for: #637d40; --for-tint: #242f1d; --against: #ae5e59; --against-tint: #382724;
    --abstain: #7a857f; --absent: #38433d; --on-vote: #ffffff;
    --note-bg: #3a2f10; --note-ink: #f3d58a; --error: #f2a39c; --focus: #ffb000;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --slate: #6d7872; --leaf: #8fd158; --brand: #3f9a5c;
  --ground: #0e1411; --sheet: #17201b; --sheet-2: #1e2923;
  --ink: #e8efea; --ink-2: #b4c1b9; --ink-3: #8d9a93; --rule: #2d3a33;
  --slate-tint: #242e29; --slate-ink: #b4c1b9;
  --leaf-tint: #21331a; --leaf-ink: #bfe89b;
  --brand-deep: #123d22; --brand-tint: #1b2e22;
  --action: #2a7d45; --action-hover: #33915a; --action-ink: #ffffff; --link: #82d196;
  --for: #637d40; --for-tint: #242f1d; --against: #ae5e59; --against-tint: #382724;
  --abstain: #7a857f; --absent: #38433d; --on-vote: #ffffff;
  --note-bg: #3a2f10; --note-ink: #f3d58a; --error: #f2a39c; --focus: #ffb000;
  color-scheme: dark;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--fs-2)/1.5 var(--font-text);
}
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-6); font-weight: 800; }
h2 { font-size: var(--fs-5); }
h3 { font-size: var(--fs-4); line-height: 1.05; }
h4 { margin: 0; font: 700 var(--fs-2)/1.3 var(--font-text); }
p { margin: 0; max-width: var(--measure); }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Blazor focuses the page's h1 on load and navigation so screen readers start there (FocusOnNavigate);
   a heading is not a control, so it gets no ring. */
h1[tabindex="-1"]:focus { outline: none; }

.num { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Page frame ---------- */

.page {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.stack { display: flex; flex-direction: column; gap: var(--sp-5); }
.stack--tight { gap: var(--sp-3); }
.stack--loose { gap: var(--sp-7); }
.cols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
  gap: var(--sp-6);
  align-items: start;
}
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

.top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-4);
}
.top__brand {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--ink); text-decoration: none;
  font: 800 1.875rem/1 var(--font-display);
}
.top__brand svg { width: 2.75rem; height: auto; flex: none; }
.top__nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-weight: 600; }
.top__nav a { color: var(--ink); text-decoration: none; padding-block: var(--sp-2); border-bottom: 4px solid transparent; }
.top__nav a:hover { border-bottom-color: var(--slate); }
.top__nav a[aria-current="page"] { border-bottom-color: var(--leaf); }

.crumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-1); color: var(--ink-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--ink-3); }

.foot {
  margin-top: var(--sp-8);
  padding-block: var(--sp-5) var(--sp-7);
  border-top: 2px solid var(--ink);
  font-size: var(--fs-1); color: var(--ink-2);
}

/* ---------- Text roles ---------- */

.label {
  font: 700 var(--fs-0)/1.3 var(--font-text);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.lead { font-size: var(--fs-3); line-height: 1.4; }
.small { font-size: var(--fs-1); color: var(--ink-2); }
.fine { font-size: var(--fs-0); color: var(--ink-2); }
.voice { font-family: var(--font-voice); font-size: var(--fs-3); line-height: 1.38; }

/* ---------- Sheets ---------- */

.sheet { background: var(--sheet); padding: clamp(1.125rem, 3vw, 2rem); }
.sheet--cut {
  background: linear-gradient(225deg, transparent var(--cut), var(--sheet) calc(var(--cut) + 0.5px));
}
.sheet--quiet { background: var(--sheet-2); }
.sheet--brand { background: var(--brand-deep); color: #ffffff; }
.sheet--brand a { color: #ffffff; }

.portrait {
  flex: none; width: 5.5rem; aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  font: 800 2.5rem/1 var(--font-display); color: var(--sheet);
  background: linear-gradient(225deg, transparent var(--cut-s), var(--slate-ink) calc(var(--cut-s) + 0.5px));
}
.portrait--s { width: 2.75rem; font-size: 1.375rem; }

/* The turning logo follows the theme. Keep it on the ground or a white sheet, never on green. */
lt2-logo-spin {
  --lt2-slate: var(--slate); --lt2-leaf: var(--leaf); --lt2-brand: var(--brand);
  display: block; max-width: 100%;
}

/* ---------- Bubbles: who is speaking ---------- */

.bubble {
  --b-bg: var(--slate-tint); --b-ink: var(--ink);
  background: var(--b-bg); color: var(--b-ink);
  padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + 15px);
  clip-path: polygon(0 3px, 100% 0, calc(100% - 4px) calc(100% - 15px), 3.5rem calc(100% - 15px),
    1.5rem 100%, 1.875rem calc(100% - 15px), 5px calc(100% - 17px));
}
.bubble > * { max-width: none; }
.bubble--people { --b-bg: var(--leaf-tint); --b-ink: var(--ink); }
.bubble--seimas { --b-bg: var(--slate-tint); }
.bubble--mp {
  --b-bg: var(--brand-deep); --b-ink: #ffffff;
  clip-path: polygon(4px 0, 100% 4px, 100% calc(100% - 17px), calc(100% - 1.875rem) calc(100% - 15px),
    calc(100% - 1.5rem) 100%, calc(100% - 3.5rem) calc(100% - 15px), 0 calc(100% - 15px));
}
.bubble--mp a { color: #ffffff; }
.said { display: flex; flex-direction: column; gap: var(--sp-2); }
.said__by { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-1); color: var(--ink-2); padding-left: var(--sp-5); }
.said--mp .said__by { justify-content: flex-end; padding: 0 var(--sp-5) 0 0; }
.said__by b { color: var(--ink); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 2.875rem; padding: 0 1.25rem;
  border: 0; border-radius: 0; cursor: pointer; text-decoration: none;
  font: 700 var(--fs-2)/1.1 var(--font-text); color: var(--action-ink);
  --btn-bg: var(--action);
  background: linear-gradient(225deg, transparent var(--cut-s), var(--btn-bg) calc(var(--cut-s) + 0.5px));
}
.btn:hover { --btn-bg: var(--action-hover); text-decoration: none; }
.btn--for { --btn-bg: var(--for); color: var(--on-vote); }
.btn--against { --btn-bg: var(--against); color: var(--on-vote); }
.btn--for:hover, .btn--against:hover { filter: brightness(0.9); }
.btn--plain {
  background: none; color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.btn--plain:hover { background: var(--ink); color: var(--sheet); }
.btn--wide { width: 100%; }
.btn[aria-pressed="true"] { box-shadow: inset 0 -5px 0 var(--ink); }

.mark {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 2rem; padding: 0 var(--sp-3);
  border: 0; cursor: pointer; font: 600 var(--fs-1)/1 var(--font-text);
  background: var(--sheet); color: var(--ink);
}
.mark[aria-pressed="true"] { background: var(--leaf); color: #14211b; }

/* ---------- Form fields ---------- */

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field > label { font-weight: 700; }
.field__hint { font-size: var(--fs-1); color: var(--ink-2); }
.input, .textarea {
  width: 100%; min-height: 3rem; padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--ink-2); border-radius: 0;
  background: var(--sheet); color: var(--ink);
  font: 400 var(--fs-2)/1.4 var(--font-text);
}
.textarea { min-height: 7rem; resize: vertical; font-family: var(--font-voice); font-size: var(--fs-3); }
.input--code { font: 700 2rem/1 var(--font-display); letter-spacing: 0.35em; max-width: 14rem; }
.field--error .input { border-color: var(--error); }
.field__error { font-weight: 600; color: var(--error); }
.check { display: flex; align-items: flex-start; gap: var(--sp-3); }
.check input { width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; accent-color: var(--action); flex: none; }

/* ---------- Tags and choices ---------- */

.tag {
  display: inline-block; padding: 0.125rem var(--sp-2);
  background: var(--slate-tint); color: var(--slate-ink);
  font: 600 var(--fs-0)/1.5 var(--font-text); white-space: nowrap;
}
/* A tag that is a link keeps the tag's look: no link colour or underline until it is pointed at. */
a.tag { text-decoration: none; }
a.tag:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
.tag--people { background: var(--leaf-tint); color: var(--leaf-ink); }
.tag--brand { background: var(--brand-tint); color: var(--link); }
.tag--ink { background: var(--ink); color: var(--sheet); }

/* The label sits on the text baseline, so it lines up with the words and numbers beside it. The square's bottom sits on
   that baseline too and is moved to the middle of the capitals (1cap), not of the line, which the fonts fill unevenly. */
.choice { display: inline-flex; align-items: baseline; gap: var(--sp-2); font-weight: 700; white-space: nowrap; }
.choice::before { content: ""; width: 0.75rem; height: 0.75rem; translate: 0 calc((0.75rem - 1cap) / 2); background: var(--abstain); flex: none; }
.choice--for::before { background: var(--for); }
.choice--against::before { background: var(--against); }
.choice--absent { font-weight: 400; color: var(--ink-2); }
.choice--absent::before { background: none; box-shadow: inset 0 0 0 2px var(--abstain); }

/* ---------- Figures: the numbers people come for ---------- */

.figure { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.figure__num {
  font: 800 var(--fs-fig)/0.86 var(--font-display);
  font-variant-numeric: tabular-nums; letter-spacing: -0.005em;
}
.figure--for .figure__num { color: var(--for); }
.figure--against .figure__num { color: var(--against); }
.figure--m .figure__num { font-size: clamp(2.5rem, 6vw, 3.5rem); }

.split { display: flex; height: 1rem; background: var(--absent); }
.split > span { display: block; min-width: 2px; }
.split__for { background: var(--for); }
.split__against { background: var(--against); }
.split__abstain { background: var(--abstain); }
.split--s { height: 0.5rem; }

/* The threshold: a ruler with a tick every tenth. */
.ruler { position: relative; height: 1.25rem; background: var(--slate-tint); }
.ruler__fill { display: block; height: 100%; background: var(--leaf); }
.ruler::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--sheet) calc(10% - 2px) 10%);
}

/* ---------- Facts, rows, stages ---------- */

.facts { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: var(--sp-2) var(--sp-5); }
.facts dt { color: var(--ink-2); }
.facts dd { font-weight: 600; }

.rows > li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-4); border-top: 1px solid var(--rule);
}
.rows > li:last-child { border-bottom: 1px solid var(--rule); }
.rows__main { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.rows__main a { font-weight: 700; color: var(--ink); }
.rows__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); text-align: right; }

.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.75rem, 1fr)); gap: 3px; }
.stage { padding: var(--sp-3) var(--sp-4); background: var(--slate-tint); display: flex; flex-direction: column; gap: 2px; }
.stage b { font: 700 1.5rem/1 var(--font-display); }
.stage--next { background: none; box-shadow: inset 0 0 0 2px var(--slate); }

.note { padding: var(--sp-3) var(--sp-4); background: var(--note-bg); color: var(--note-ink); font-size: var(--fs-1); }
.note--quiet { background: var(--slate-tint); color: var(--slate-ink); }

/* ---------- Narrow screens ---------- */

@media (max-width: 54rem) {
  .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 36rem) {
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair--keep { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: end; }
  .rows > li { grid-template-columns: minmax(0, 1fr); }
  .rows__side { align-items: flex-start; text-align: left; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts dd { margin-bottom: var(--sp-3); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .mark, .top__nav a { transition: background-color 0.12s, color 0.12s, border-color 0.12s; }
}

/* ==========================================================================
 * Application additions (not in the prototype). Everything above this line is
 * design/ui/lt2.css copied unchanged; keep it that way and add below.
 * ========================================================================== */

/* Fonts: Sofia Sans, Sofia Sans Extra Condensed and Brygada 1918 are served from our own origin by
   ../fonts/fonts.css, which App.razor links before this file. The OFL licence texts sit next to the
   font files and must stay there. Nothing is requested from Google or any other host. */

body { min-height: 100vh; display: flex; flex-direction: column; }
main.page { flex: 1; padding-block: var(--sp-5) 0; }
/* In the body's flex column, auto margins would shrink the header, notices and footer to their content. */
body > .page { width: 100%; }

/* The logo mark in the top bar: the logo's colours, following the theme. */
.logo-slate { fill: var(--slate); stroke: var(--slate); }
.logo-leaf { fill: var(--leaf); stroke: var(--leaf); }
.logo-brand { fill: var(--brand); stroke: var(--brand); }

/* Sign-in page layout (from prototype prisijungimas.html). */
.welcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--sp-7); align-items: center; }
.welcome lt2-logo-spin { width: min(22rem, 70%); }
@media (max-width: 54rem) {
  .welcome { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .welcome lt2-logo-spin { width: 9rem; }
}

/* The front page (option B, owner 2026-11-13): the same welcome with a smaller logo, then one summary card per appeal. */
.welcome--home lt2-logo-spin { width: min(16rem, 60%); }
@media (max-width: 54rem) { .welcome--home lt2-logo-spin { width: 8rem; } }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: var(--sp-5); align-items: start; }
.card__title { color: inherit; }
.counts b { font-size: var(--fs-3); }
.counts__for { color: var(--for); }
.counts__against { color: var(--against); }

/* An action that reads as a link (resend the code, switch form). */
.linkish {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--link);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.linkish:hover { text-decoration-thickness: 3px; }
.btn:disabled, .linkish:disabled { opacity: 0.6; cursor: progress; }

/* Blazor's error bar. */
#blazor-error-ui {
  display: none; position: fixed; inset: auto 0 0 0; z-index: 1000;
  padding: var(--sp-3) var(--sp-5); background: var(--note-bg); color: var(--note-ink);
}
#blazor-error-ui .reload { margin-left: var(--sp-3); color: inherit; }
/* ---------- Parliament pages (M1) ---------- */

/* Split bar and seat map: SVG rendered on the server, coloured by the vote tokens. */
.splitbar { display: block; width: 100%; height: 1rem; background: var(--absent); }
.splitbar--s { height: 0.5rem; }
.rows__side .splitbar { width: 12rem; max-width: 100%; }
.splitbar__for { fill: var(--for); }
.splitbar__against { fill: var(--against); }
.splitbar__abstain { fill: var(--abstain); }
.seatmap { display: block; width: 100%; max-width: 40rem; height: auto; }
.seat--for { fill: var(--for); }
.seat--against { fill: var(--against); }
.seat--abstain { fill: var(--abstain); }
.seat--did-not-vote { fill: var(--absent); }

/* A share with nothing to count: words, not a big number. */
.figure__none { font: 700 var(--fs-3)/1.2 var(--font-display); color: var(--ink-2); }

/* Profile head: portrait and name side by side, bottom-aligned. */
.row--end { align-items: flex-end; gap: var(--sp-5); }

/* MP list filters: a plain GET form that works without JavaScript. */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-4); align-items: end; }
.filters select { appearance: auto; }

/* Totals of a vote: the three figures side by side, wrapping on a phone. */
.totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 36rem) { .totals { gap: var(--sp-3); } .totals .figure__num { font-size: 2.25rem; } }

/* Plain tables for faction positions; they scroll inside themselves, never the page. */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
.table th, .table td { text-align: left; padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-top: 1px solid var(--rule); vertical-align: top; }
.table th { font-weight: 700; color: var(--ink-2); }

/* Long official names and addresses wrap instead of pushing the page sideways (between words first). */
.rows__main a, .facts dd, .tag { overflow-wrap: break-word; }
.tag { white-space: normal; }

/* The theme switch sits in the navigation; hidden until lt2-theme.js shows it. */
.top__nav .mark { align-self: center; }

/* The signed-in menu fits one line beside the brand at 1280 px (design 8.12.5; it wrapped once "Darbotvarkė" was added):
   on wide screens the menu's type is the secondary size and its gaps tighter. Nothing is forced onto one line, so a
   narrower window still wraps the menu under the brand instead of scrolling sideways. */
@media (min-width: 54rem) {
  .top__nav { column-gap: var(--sp-4); font-size: var(--fs-1); }
  .top__nav a, .top__signout button { white-space: nowrap; }
}

/* ---------- Appeals (M2a) ---------- */

/* The threshold ruler: the fill is SVG (no inline styles under the content security policy); the ticks are the
   prototype's .ruler::after laid over it. */
.ruler > svg { display: block; width: 100%; height: 100%; }
.ruler__bar { fill: var(--leaf); }

/* Radio groups and report forms sit in fieldsets without the browser's frame. */
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; font-weight: 600; }
.said__by .linkish { font-size: var(--fs-1); }
.report-visitor > summary { display: inline; cursor: pointer; }
.report-visitor[open] > p { margin-top: var(--sp-2); }

/* Feedback balloon (design 8.10): a disclosure, so it opens and closes without JavaScript. The button floats in the
   bottom corner at every width; the page ends with room for it, so nothing at the end of a page lies under it (while
   scrolling it passes over the page like any floating button). The open panel lies over the page at a readable width,
   never wider or taller than the window, and scrolls inside itself; the button turns into a close mark while it is
   open, and with script the panel also has its own close button (lt2-feedback.js). */
body { padding-block-end: 4.5rem; }
.feedback { position: fixed; right: 0.75rem; bottom: 0.75rem; z-index: 20; margin: 0; }
.feedback__button { list-style: none; cursor: pointer; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--action); color: var(--action-ink); box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 0.2); }
.feedback__button::-webkit-details-marker { display: none; }
.feedback__button::marker { content: ""; }
.feedback__button:hover { background: var(--action-hover); }
.feedback__button svg { inline-size: 1.5rem; block-size: 1.5rem; }
.feedback__button .feedback__shut, .feedback[open] .feedback__button .feedback__balloon { display: none; }
.feedback[open] .feedback__button .feedback__shut { display: block; }
.feedback__panel {
  position: fixed; right: 0.75rem; bottom: 4.25rem;
  inline-size: min(24rem, 100% - 1.5rem); max-block-size: calc(100% - 5rem); overflow-y: auto; overscroll-behavior: contain;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); padding: var(--sp-5);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.25); overflow-wrap: anywhere;
}
.feedback__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.feedback__head h2 { font-size: var(--fs-4); }
.feedback__close { flex: none; background: none; border: 0; padding: 0.25rem 0; font: inherit; font-size: var(--fs-1); color: var(--ink); text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .feedback[open] .feedback__panel { animation: feedback-slide 0.18s ease-out; }
}
@keyframes feedback-slide { from { transform: translateY(0.75rem); opacity: 0; } to { transform: none; opacity: 1; } }

/* Old and new text side by side (a proposed description change, design 8.1); one under the other on a phone. */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.compare > * { border-left: 3px solid var(--rule); padding-left: var(--sp-4); }
@media (max-width: 36rem) { .compare { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } }

/* A queue item's actions (design 8.3): one control each, wrapping on a narrow screen; choosing one opens its fields. */
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; }

/* The settings screen (design 5.6): the value field is short, its unit beside it. */
.settings__value { inline-size: 7rem; }
.settings .rows__side { flex-wrap: wrap; justify-content: flex-end; }

/* "Atsijungti" in the menu (owner, 2026-11-13): a form button that looks and behaves like the menu's links. */
.top__signout { display: contents; }
.top__signout button {
  margin: 0; padding: var(--sp-2) 0; border: 0; border-bottom: 4px solid transparent; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--ink);
}
.top__signout button:hover { border-bottom-color: var(--slate); }

/* A two-part switch over real radio inputs (owner, 2026-11-13), our own CSS: "Už | Prieš" in the writing box. Each input
   lies over its half, invisible, so a click, a tap or the keyboard works as on any radio; the chosen half is filled in
   its side's colour (--plain: the action colour), neither when nothing is chosen; the focus ring is the page's own. */
.switch { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(6rem, 1fr); max-inline-size: 100%; border: 2px solid var(--ink); background: var(--sheet); }
.switch__half {
  position: relative; display: flex; align-items: center; justify-content: center; min-block-size: 2.75rem;
  padding: 0 var(--sp-4); font-weight: 700; color: var(--ink); cursor: pointer; user-select: none; text-align: center;
}
.switch__half + .switch__half { border-inline-start: 2px solid var(--ink); }
.switch__input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch__half:hover { background: var(--slate-tint); }
.switch__half--for:has(.switch__input:checked) { background: var(--for); color: var(--on-vote); }
.switch__half--against:has(.switch__input:checked) { background: var(--against); color: var(--on-vote); }
.switch__half--plain:has(.switch__input:checked) { background: var(--action); color: var(--action-ink); }
.switch__half:has(.switch__input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 1; }
.switch__half:has(.switch__input:disabled) { opacity: 0.6; cursor: progress; }
.switch__input:disabled { cursor: progress; }

/* Under an argument (owner, 2026-11-13): "Man svarbu", "Pranešti" and "Atsiimti" stay together on one line; when the
   author's name and the group do not fit side by side, the name takes its own line above. The two columns of
   arguments become one where a column would be too narrow for the group. A visitor's opened report note wraps. */
.said__name { overflow-wrap: anywhere; }
.said__actions { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-3); white-space: nowrap; }
.said__actions:has(.report-visitor[open]) { flex-wrap: wrap; white-space: normal; }
@media (max-width: 64rem) { .pair--reasons { grid-template-columns: minmax(0, 1fr); } }

/* The agenda (design 8.11.1): a bill's number tag inside a row keeps the tag's light-on-dark text, not the row link's ink. */
.rows__main a.tag--ink { color: var(--sheet); font-weight: 600; }
/* The share line (design 8.11.5): a long invitation link wraps instead of widening the page. */
.share__link { overflow-wrap: anywhere; }

/* Organisations' statements (design 8.14.3, 8.14.14): all alike, no highlighting; their own voice beside the people's arguments.
   A stance of remarks has a neutral mark; a user's link and the one-time link wrap instead of widening the page. */
.bubble--org { --b-bg: var(--brand-tint); --b-ink: var(--ink); }
.choice--remarks::before { background: none; box-shadow: inset 0 0 0 2px var(--abstain); }
.statement__who { gap: var(--sp-2) var(--sp-3); }
.statement__name { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.statement__link, .statement__link a, #invite-url, .facts dd a { overflow-wrap: anywhere; }
.statement__meta { flex-wrap: wrap; }