/* Shared component styles used across screens. Tokens live in tokens.css. */

a { color: inherit; text-decoration: none; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.btn--primary {
  background: var(--cobalt-600);
  color: #fff;
}
.btn--primary:hover { background: #1650c4; }
.btn--ghost {
  background: transparent;
  color: var(--navy-700);
  border-color: var(--border);
}
.btn--ghost:hover { background: var(--canvas); }
.btn--block { width: 100%; }
.btn--dark {
  background: var(--navy-900);
  color: #fff;
}

/* Anchored sections (#demo, #kainos, #papildyti…) land below the 64px sticky
   nav instead of under it. */
[id] { scroll-margin-top: 80px; }

/* --- Public nav --- */
.site-nav {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
@media (min-width: 900px) {
  .site-nav { height: 64px; padding: 0 40px; }
}
.site-nav__brand { display: flex; align-items: center; gap: 10px; }
.site-nav__wordmark { text-transform: lowercase; }
.site-nav__tagline { display: none; }
@media (min-width: 1100px) {
  .site-nav__tagline {
    display: inline;
    padding-left: 12px;
    margin-left: 4px;
    border-left: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--navy-400);
  }
}
.site-nav__links { display: none; gap: 28px; font-size: 13.5px; color: var(--navy-400); }
.site-nav__links a { color: var(--navy-400); }
.site-nav__links a:hover { color: var(--cobalt-600); }
@media (min-width: 900px) {
  .site-nav__links { display: flex; }
  .wallet-dropdown { right: 40px; }
}
.site-nav__actions { display: flex; align-items: center; gap: 12px; }
/* nowrap because "Susikurti paskyrą" otherwise breaks onto a second line on a
   phone and overlaps the wordmark. */
.site-nav__actions .btn { height: 38px; padding: 0 16px; white-space: nowrap; }
@media (max-width: 719px) {
  .site-nav { padding: 0 14px; }
  .site-nav__actions { gap: 8px; }
  .site-nav__actions .btn { height: 34px; padding: 0 11px; font-size: 12.5px; }
  .site-nav__wordmark { font-size: 17px; }
}
/* On the narrowest phones the mark carries the brand on its own — the
   wordmark plus two buttons does not fit at 320px. */
@media (max-width: 379px) {
  .site-nav__wordmark { display: none; }
}
/* --- Company search ------------------------------------------------------ */
.company-search { display: flex; gap: 8px; }
.company-search .field { flex: 1 1 auto; min-width: 0; }
.company-search__results { margin-top: 12px; }
.company-search__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.company-search__item { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--row-divider); }
.company-search__list li:last-child .company-search__item { border-bottom: none; }
.company-search__item:hover { background: var(--cobalt-50); }
.company-search__name { font-weight: 500; }
.company-search__meta { font-size: 12px; color: var(--muted); }
.company-search__hint { color: var(--muted); margin-top: 10px; }
.company-search-page { margin-top: 32px; max-width: 720px; }
.company-search-page__lede { color: var(--navy-400); margin: 8px 0 20px; }

/* Logged-out phone menu. "Prisijungti" moves into it on the smallest
   screens, where three controls do not fit beside the mark. */
.site-nav__menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--navy-700); cursor: pointer;
}
@media (min-width: 900px) {
  .site-nav__menu-btn { display: none; }
}
@media (max-width: 479px) {
  .site-nav__login { display: none; }
}
.site-nav__menu {
  position: absolute; top: 100%; right: 14px; left: 14px;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(10, 22, 40, 0.12);
}
.site-nav__menu a { padding: 14px 16px; border-bottom: 1px solid var(--row-divider); font-size: 15px; }
.site-nav__menu a:last-child { border-bottom: none; }
@media (min-width: 900px) {
  .site-nav__menu { display: none !important; }
}

/* --- Public footer --- */
.pub-footer {
  background: var(--navy-900);
  color: var(--navy-300);
  padding: 56px 20px 32px;
}
@media (min-width: 900px) {
  .pub-footer { padding: 64px 40px 40px; }
}
.pub-footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pub-footer__reg { color: var(--navy-300); margin-bottom: 40px; font-size: 11px; }
.pub-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
@media (min-width: 640px) {
  .pub-footer__cols { grid-template-columns: repeat(3, 1fr); }
}
/* 36px rows: the links were 18px tall, too small to hit with a thumb. */
.pub-footer__cols a { display: block; color: var(--navy-300); font-size: 13.5px; padding: 9px 0; }
.pub-footer__col-head { color: var(--cobalt-400); margin-bottom: 4px; }
.pub-footer__attribution { font-size: 12px; color: var(--navy-400); border-top: 1px solid #223148; padding-top: 20px; }

/* --- Frames / cards --- */
.frame {
  background: var(--surface);
  border: 1px solid var(--frame-border);
  border-radius: var(--radius);
  padding: 22px;
}
@media (min-width: 900px) {
  .frame { padding: 28px; }
}
.frame--cobalt { border-color: var(--cobalt-600); }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.strip-cobalt {
  background: var(--cobalt-50);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.strip-cobalt > p + p { margin-top: 4px; }

/* --- Chips / segmented / toggle --- */
.chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--navy-700);
  background: var(--surface);
  cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: var(--cobalt-600);
  border-color: var(--cobalt-600);
  color: #fff;
}

/* More options than fit (the seven legal forms on alert setup, on a phone)
   scroll inside the control instead of widening the page. */
.segmented {
  display: inline-flex;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}
.segmented button {
  flex-shrink: 0;
  white-space: nowrap;
  border: none;
  background: var(--surface);
  padding: 8px 16px;
  font-size: 13.5px;
  cursor: pointer;
  border-right: 1px solid var(--border);
}
.segmented button:last-child { border-right: none; }
.segmented button[aria-pressed="true"] {
  background: var(--cobalt-600);
  color: #fff;
}

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge--new { border: 1px solid var(--cobalt-600); color: var(--cobalt-600); }
.badge--found { color: var(--success); }
.badge--checking { color: var(--warning); }
.badge--not-found { color: var(--muted); }

/* --- Tables --- */
table.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--canvas);
  padding: 10px 12px;
}
.data-table td {
  padding: 12px;
  font-size: 13.5px;
  border-top: 1px solid var(--row-divider);
}
.data-table tr.row-new { background: var(--cobalt-50); }
/* Wide tables scroll inside their frame rather than widening the page. The
   financial history is 8 columns of figures — there is no honest way to
   restack that on a phone, and without this the whole document scrolled
   sideways. Key/value tables are 2 columns and wrap fine, so they are not
   wrapped. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-wrap .data-table { min-width: 520px; }
.table-wrap--wide .data-table { min-width: 760px; }

/* --- Forms --- */
.field {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 15.5px;
  background: var(--surface);
}
.field:focus { border-color: var(--cobalt-600); }
.field--mono { font-family: var(--font-mono); }
label.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

/* --- Wallet ring (1j) --- */
.wallet-ring {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  cursor: pointer;
  background: conic-gradient(var(--cobalt-600) calc(var(--pct, 0) * 360deg), var(--border) 0deg);
}
.wallet-ring__disc {
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy-700);
}

/* --- Docked purchase bar (1i) --- */
.docked-bar {
  background: var(--navy-900);
  color: #fff;
  padding: 16px 20px;
  display: grid;
  gap: 16px;
  border-top: 1px solid #223148;
}
@media (min-width: 900px) {
  .docked-bar { grid-template-columns: 236px 1fr 244px; align-items: center; padding: 20px 40px; }
}

/* --- Below-fold sections --- */
.below-fold { padding: 0 20px 56px; max-width: 1200px; margin: 0 auto; }
@media (min-width: 900px) { .below-fold { padding: 0 40px 76px; } }
.below-fold__section { margin-top: 64px; }
/* The "01 · …" eyebrow above each section. */
.below-fold__section > .t-mono-label:first-child { margin-bottom: 12px; }
.pricing-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 20px;
}
@media (min-width: 720px) {
  .pricing-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.pricing-card { position: relative; display: flex; flex-direction: column; }
.pricing-card > .t-h2 { margin-bottom: 4px; }
/* Out of the flow, so the popular plan's badge doesn't push its content below
   the neighbouring card's. */
.pricing-card__badge { position: absolute; top: 22px; right: 22px; }

/* --- Auth / signup --- */
.auth-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.auth-card { width: 100%; max-width: 480px; }
.auth-card__label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

/* --- Lists ------------------------------------------------------------- */
.purchases__filter { color: var(--navy-400); max-width: 420px; }
.purchase-head__meta { color: var(--navy-400); margin-top: 4px; }
.purchase-head__filter { color: var(--navy-400); margin-top: 6px; max-width: 760px; }
.purchase-head__retention { color: var(--muted); margin-top: 16px; font-size: 12.5px; }
.purchase-rename { margin-top: 8px; }
.purchase-rename summary { cursor: pointer; font-size: 12.5px; color: var(--muted); list-style: none; }
.purchase-rename summary::-webkit-details-marker { display: none; }
.purchase-rename__form { display: flex; gap: 8px; margin-top: 8px; max-width: 420px; }

/* --- Account page -------------------------------------------------------- */
.account { max-width: 720px; }
.account__section { margin-top: 20px; }
.account__lede { color: var(--navy-400); margin: 6px 0 14px; }
.account__form { display: grid; gap: 8px; max-width: 420px; }
.account__form .btn { justify-self: start; margin-top: 8px; }
.account__hint { color: var(--muted); }
.account__error { color: var(--error); margin-bottom: 8px; }
.account__danger { border-color: #F2C4C0; }
.btn--danger { background: var(--error); color: #fff; border-color: var(--error); }
.auth-card__aside { font-size: 12.5px; color: var(--muted); }
.field-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.signup-company { font-size: 12.5px; margin-top: 6px; color: var(--muted); }
.signup-company--found { color: var(--success); }

.field-confirm {
  font-size: 12.5px;
  color: var(--success);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- App nav + wallet dropdown (1j) --- */
[x-cloak] { display: none !important; }
.purchase-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }

.download-menu { position: relative; display: inline-block; text-align: left; }
.download-menu__btn--compact { height: 32px; padding: 0 12px; }
.download-menu__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--navy-900);
  box-shadow: 0 10px 30px rgba(11, 18, 32, 0.14);
}
.download-menu__opt {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--navy-900);
}
.download-menu__opt + .download-menu__opt { border-top: 1px solid var(--border); }
.download-menu__opt:hover { background: var(--row-divider); }
.download-menu__ext { color: var(--muted); font-size: 12px; }
.download-menu__note {
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.site-nav__topup { height: 36px; padding: 0 14px; }
.wallet-dropdown {
  position: absolute;
  /* Anchored to .site-nav, which is sticky and therefore a positioned
     ancestor — so this hangs off the bar's own bottom edge at either height
     rather than a hardcoded offset. */
  top: calc(100% + 6px);
  right: 20px;
  width: 320px;
  max-width: calc(100vw - 40px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(11,18,32,.16);
  z-index: 5;
  overflow: hidden;
}
@media (min-width: 900px) {
  .wallet-dropdown { right: 40px; }
}
.wallet-dropdown__balance { padding: 16px; border-radius: 0; }
.wallet-dropdown__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 13.5px;
  border-top: 1px solid var(--row-divider);
}
.wallet-dropdown__group { display: flex; flex-direction: column; }
.wallet-dropdown__logout { color: var(--navy-400); }

/* --- Dashboard --- */
.app-shell { padding: 24px 20px 56px; max-width: 1200px; margin: 0 auto; }
/* An eyebrow label directly above a page title (date on the dashboard,
   "Kelias 1 · …" on alert setup). */
.t-mono-label + .t-h1 { margin-top: 8px; }
@media (min-width: 900px) { .app-shell { padding: 32px 40px 76px; } }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--success); margin-right: 6px; }

/* --- Condition rows (1i) --- */
/* Phone: "KUR … ✕" on one line, then the field and its value full width.
   Wider: all four in one row. The value slot holds the picker, number and
   date inputs — only one is ever shown. The field column is sized to its
   longest label ("Skola Sodrai nuo, €"). */
.condition-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  grid-template-areas: "label remove" "field field" "value value";
  gap: 8px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--row-divider);
  align-items: center;
}
@media (min-width: 720px) {
  .condition-row {
    grid-template-columns: 40px 210px minmax(0, 1fr) 44px;
    grid-template-areas: "label field value remove";
  }
}
.condition-row > * { min-width: 0; }
.condition-row .field { height: 40px; }
.condition-row__label { grid-area: label; }
.condition-row__field { grid-area: field; width: 100%; }
.condition-row__value { grid-area: value; }
.condition-row__remove {
  grid-area: remove;
  background: none; border: none; cursor: pointer; color: var(--muted);
  width: 44px; height: 44px;
}
.condition-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
/* One height for the add button, the sort toggle and the contact checkbox. */
.condition-add { height: 36px; border-style: dashed; }
.condition-controls .segmented button { height: 34px; padding: 0 16px; }
/* A range is one row: "nuo – iki", with the warning under both inputs. */
.condition-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.condition-range__dash { color: var(--muted); }
.condition-range__warn { grid-column: 1 / -1; color: var(--error); font-size: 12.5px; }
.condition-help { color: var(--muted); margin-top: 10px; font-size: 12.5px; }
.demo__error { color: var(--error); margin-top: 12px; }
.demo__result.is-loading { opacity: 0.45; transition: opacity 0.15s; }
.picker__more { padding: 8px 12px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--row-divider); }
/* The wrapper sticks, not the bar: sticky only moves within its parent. */
.docked-bar-wrap { position: sticky; bottom: 0; z-index: 20; }
.docked-bar__owned { color: var(--cobalt-400); margin-top: 6px; font-size: 12.5px; }
.docked-bar__fix { display: block; margin-top: 8px; text-align: center; color: #fff; }
.condition-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  font-size: 13.5px;
  color: var(--navy-700);
  cursor: pointer;
}

.alert-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.alert-status--on { border-color: var(--success); }
.alert-status__meta { color: var(--navy-400); margin-top: 4px; }
.alert-deliveries { margin-top: 24px; }
.alert-deliveries .data-table { margin-top: 12px; }

/* --- Landing hero: database framing --- */
.hero-db {
  padding: 44px 20px 40px;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .hero-db { padding: 64px 40px 52px; }
}

.hero-db__title { text-wrap: balance; margin-bottom: 16px; }
.hero-db__subhead { max-width: 660px; margin: 0 auto; color: var(--navy-400); }

/* Small chips: what a list file holds. */
.path__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.path__list li {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--navy-700);
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 7px;
}

/* Contacts are the product, so they read as a cobalt chip rather than the
   muted dashed lock the other unavailable cells use. */
.contact-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 2px;
  padding: 5px 10px;
  border-radius: var(--radius);
  background: var(--cobalt-50);
  color: var(--cobalt-600);
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: nowrap;
}
.contact-lock::before { content: "\1F512"; font-size: 11px; }
/* In a table row the chip looked like a button that did nothing. There it is
   a plain note saying when the contacts appear. */
.contact-lock--note { background: none; padding: 0; color: var(--muted); cursor: default; white-space: normal; }

.pricing-note { text-align: center; margin-top: 16px; color: var(--muted); }

/* --- Landing filter demo --- */
.demo__title { margin-bottom: 12px; text-wrap: balance; }
.demo__lede { max-width: 640px; margin-bottom: 24px; color: var(--navy-400); }
.demo__hint { margin-top: 20px; color: var(--muted); }
.condition-controls__right { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.demo__search { height: 36px; padding: 0 20px; }
.demo__result { margin-top: 24px; }
.preview-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.preview-count__n { font-size: 30px; }
.preview-count__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.preview-table { border: 1px solid var(--border); border-top: none; }
.preview-table__head {
  display: none;
  padding: 10px 16px;
  background: var(--navy-900);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Below 960px each company is a card: name and activity across the full
   width, the six short fields two to a line, each labelling itself (the
   header row is hidden). Stacking all eight made one company a screen tall. */
.preview-table__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
  padding: 16px;
  border-top: 1px solid var(--row-divider);
}
.preview-table__row > [data-label="Įmonė"],
.preview-table__row > [data-label="Veikla"] { grid-column: 1 / -1; }
.preview-table__row:first-child { border-top: none; }
.preview-table__row > div[data-label]::before {
  content: attr(data-label);
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
@media (min-width: 640px) {
  .preview-table__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .preview-table__head,
  .preview-table__row {
    display: grid;
    /* Columns whose content has a fixed shape — counts, amounts, dates, the
       lock badge — get fixed widths so they line up row to row; the text
       columns share what's left. */
    /* Įmonė · veikla · buveinė · darbuotojai · kontaktai · pajamos · rizika ·
       įregistruota. */
    grid-template-columns:
      minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 0.9fr) 104px minmax(0, 1.1fr) 150px minmax(0, 1fr) 88px;
    gap: 12px;
    align-items: start;
  }
  /* Delivered new companies: company, legal form, address, contacts, date. */
  .preview-table--fresh .preview-table__head,
  .preview-table--fresh .preview-table__row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.2fr) 100px;
  }
  /* Signed in, before buying: company, activity, location, size, revenue,
     date. No contacts or risk column -- those are in the file, and the copy
     above the table says so. Six tracks, not eight. */
  .preview-table--preview .preview-table__head,
  .preview-table--preview .preview-table__row {
    grid-template-columns:
      minmax(0, 1.45fr) minmax(0, 1.3fr) minmax(0, 1fr) 118px 158px 92px;
  }
  /* The public demo carries company, activity, size and date only. It had a
     fifth track for a locked contacts column; with that gone the leftover
     track was what pushed the row out of alignment. */
  .preview-table--demo .preview-table__head,
  .preview-table--demo .preview-table__row {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 2.3fr) 110px 110px;
  }
  .preview-table__row > [data-label="Įmonė"],
  .preview-table__row > [data-label="Veikla"] { grid-column: auto; }
  .preview-table__row > div[data-label]::before { display: none; }
}
/* EVRK descriptions run to five lines and set the height of every row. */
.preview-table__clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.preview-table__nowrap { white-space: nowrap; }
/* The captions under a figure -- "vid. atlyginimas €3 388", "pelnas €25 108 000"
   -- are longer than the figures they explain and longer than their column.
   They used to inherit nowrap from the cell and simply run across the next
   one, so two numbers from different columns printed on top of each other.
   Breaking the line is the right answer in a table this dense; widening
   every track to fit the longest caption is not. */
.preview-table__sub { overflow-wrap: anywhere; }
/* Only drawn when a purchase is not simply "ready" -- preparing, failed or
   refunded -- so it should read as a note beside the name, not a label on
   every row. */
.purchases__status { margin-left: 8px; border: 1px solid var(--border); color: var(--muted); }
.list-preview__note { color: var(--muted); margin: 4px 0 12px; max-width: 70ch; }
.preview-table__sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.preview-table__none { color: var(--muted); }
.preview-table__debt { color: var(--error); }
.preview-table__flag { border: 1px solid var(--error); color: var(--error); margin-top: 4px; }
.preview-table__note { margin-top: 12px; color: var(--muted); }
.preview-table__empty { padding: 32px; text-align: center; color: var(--muted); margin-top: 0; }

/* --- Searchable option picker (condition rows) ---
   The option labels are full EVRK strings, so the closed control must clip
   rather than stretch its grid column, and the open panel floats instead of
   pushing the row apart. */
.picker { position: relative; min-width: 0; }
.picker__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.picker__btn:focus-visible { outline: 2px solid var(--cobalt-600); outline-offset: -1px; }
.picker__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker__value--empty { color: var(--muted); }
.picker__caret { color: var(--muted); font-size: 10px; flex-shrink: 0; }
.picker__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--navy-900);
  box-shadow: 0 10px 30px rgba(11, 18, 32, 0.14);
}
.picker__search {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  font: inherit;
  font-size: 13.5px;
  background: var(--surface);
}
.picker__search:focus { outline: none; }
.picker__list { list-style: none; margin: 0; padding: 0; max-height: 264px; overflow-y: auto; }
.picker__opt {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.picker__opt:hover { background: var(--row-divider); }
.picker__opt[aria-selected="true"] { background: var(--cobalt-600); color: #fff; }
.picker__none { padding: 12px; color: var(--muted); font-size: 13px; }
[x-cloak] { display: none !important; }

/* --- Utility --- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}

.report__title { margin-top: 4px; }
.report__subtitle { color: var(--navy-400); margin-top: 8px; }

.report__status {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  border: 1px solid var(--error);
  border-radius: var(--radius);
  color: var(--error);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.report__scores { margin-top: 32px; }
.report__scores-label { color: var(--muted); margin-bottom: 12px; }
.scores {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .scores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.score__value {
  font-size: 30px;
  font-weight: 600;
  margin-top: 8px;
  text-transform: capitalize;
}
.score__scale { color: var(--muted); font-size: 12px; margin-top: 2px; }
.score__factors {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: 13px;
  color: var(--navy-400);
}
.score__factors li { padding: 4px 0; border-top: 1px solid var(--row-divider); }
.score--risk-high { border-color: var(--error); }
.score--risk-high .score__value { color: var(--error); }
.score--risk-elevated { border-color: var(--warning); }
.score--risk-elevated .score__value { color: var(--warning); }
.score--risk-low .score__value { color: var(--success); }

.report__section { margin-top: 48px; }
.report__section-title { margin-bottom: 16px; }
.report__note { color: var(--muted); margin-top: 10px; }
.report__empty { text-align: left; }
.report__empty-head { font-weight: 600; }
.report__empty-note { color: var(--muted); margin-top: 6px; }
.report__empty .btn { margin-top: 16px; }

/* Key/value variant of the shared data table: label column, no header row. */
.data-table--kv th {
  width: 40%;
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--muted);
  border-top: 1px solid var(--row-divider);
  vertical-align: top;
}
.data-table--kv tr:first-child th,
.data-table--kv tr:first-child td { border-top: none; }

/* width/border-collapse already set on table.data-table above. */
.data-table .nodata { color: var(--muted); }
.is-negative { color: var(--error); }

.report-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
@media (min-width: 900px) {
  .report-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Axis labels on the left, bar labels under the plot, both in one grid so
   the columns line up whatever the width of the top value. */
.chart-frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; margin-top: 8px; }
.chart__axis-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  text-align: right;
}
.chart {
  width: 100%;
  height: 140px;
  display: block;
}
.chart__bar { fill: var(--cobalt-400); }
.chart__bar--negative { fill: var(--error); }
.chart__axis { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.chart__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  flex: 1 1 0;
  text-align: center;
  min-width: 0;
  overflow: hidden;
}

.report-figure { margin-bottom: 16px; }
.report-figure__value {
  font-family: var(--font-mono);
  font-size: 34px;
  margin-right: 8px;
}
.report-figure__label { color: var(--muted); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 4px 14px;
  padding: 10px 0;
  border-top: 1px solid var(--row-divider);
}
.timeline__item:first-child { border-top: none; }
.timeline__date { color: var(--muted); font-size: 12px; }
.timeline__detail { grid-column: 2; color: var(--muted); font-size: 12.5px; }

.report__method-head { font-weight: 600; margin-top: 20px; }
.report__method-head:first-child { margin-top: 0; }
.report__method-list { margin: 8px 0 0; padding-left: 18px; color: var(--navy-400); font-size: 13.5px; }
.report__method-list li { margin-top: 8px; }
.report__method-note { color: var(--muted); margin-top: 16px; }

.chart__label--gap { opacity: 0.45; }

.preview-table__name { color: inherit; text-decoration: none; }
.preview-table__name:hover { color: var(--cobalt-600); text-decoration: underline; }
.report__subhead { color: var(--muted); margin: 20px 0 8px; }

/* --- Billing page ------------------------------------------------------ */
.notice { margin: 20px 0; padding: 14px 18px; }
.notice--ok { border-color: var(--success); background: #F1FAF6; }
.billing-status {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 20px 0 40px;
}
@media (min-width: 760px) {
  .billing-status { grid-template-columns: minmax(0, 1fr) 240px; align-items: start; }
}
.billing-status__plan { margin-top: 6px; }
.billing-status__meta { color: var(--navy-400); margin-top: 8px; }
.billing-status__wallet {
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
@media (min-width: 760px) {
  .billing-status__wallet { border-top: none; border-left: 1px solid var(--border); padding: 0 0 0 24px; }
}
.billing-status__credits { font-size: 38px; line-height: 1; margin-top: 6px; }
.billing-heading { margin-top: 40px; }
.billing-heading__note { color: var(--muted); margin: 6px 0 20px; }
.billing-status__explain { margin-top: 14px; color: var(--navy-400); }
.billing-chosen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-color: var(--cobalt-600); }
.billing-batches { margin-top: 16px; }
.billing-batches .data-table { margin-top: 8px; }
.billing-batches__note { color: var(--muted); margin-top: 10px; }
/* Variable top-up: quantity on the left, live price and the buy button on
   the right; stacked on a phone. */
.topup-calc { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) {
  .topup-calc { grid-template-columns: minmax(0, 1fr) 260px; align-items: end; }
}
.topup-calc__input .field { margin-top: 6px; }
.topup-calc__presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.topup-calc__price { font-size: 30px; line-height: 1; margin: 6px 0 4px; color: var(--cobalt-600); }
.topup-calc__rate { color: var(--muted); margin-bottom: 12px; }

/* --- Purchase bar ------------------------------------------------------ */
.docked-bar__count p:first-child { font-size: 32px; color: #fff; }
.docked-bar__count .t-mono-label { color: var(--navy-300); }
.docked-bar__row { display: flex; align-items: center; gap: 12px; }
.docked-bar__row input[type=range] { flex: 1 1 auto; accent-color: var(--cobalt-400); }
.docked-bar__number {
  width: 92px;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--radius);
  border: 1px solid var(--dark-track);
  background: var(--navy-800);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: right;
}
.docked-bar__meta { color: var(--navy-300); margin-top: 8px; }
/* The armed state of a two-step purchase: deliberately not the same blue as
   the idle button, so the second click is visibly a different act. */
.btn--confirm { background: var(--success); }
.btn--confirm:hover { background: #0b6849; }

/* Dashboard state line under the greeting, when there is something to do. */
.dash-lede { color: var(--navy-400); margin: 10px 0 24px; max-width: 640px; }

/* Paid list builder: sample rows between the count and the purchase bar. */
/* The docked purchase bar is a sticky child of <body>, so it floats over
   whatever is above it until you reach the end of the page. Without room to
   scroll past, its top edge slices through the last line of the preview --
   on a phone the bar is over 200px tall and wraps to three rows. The height
   is measured into --docked-bar-h because it changes with the viewport and
   with whether the "already owned" line is showing. */
.list-preview { margin-top: 24px; padding-bottom: calc(var(--docked-bar-h, 0px) + 24px); }
.list-preview__label { color: var(--muted); margin-bottom: 10px; }

/* --- Flash messages ---------------------------------------------------- */
.flash-stack {
  position: fixed;
  top: 76px;
  right: 20px;
  z-index: 30;
  display: grid;
  gap: 8px;
  max-width: min(420px, calc(100vw - 40px));
}
.flash {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cobalt-600);
  box-shadow: 0 10px 28px rgba(11, 18, 32, 0.14);
}
.flash p { flex: 1 1 auto; }
.flash--success { border-left-color: var(--success); }
.flash--error { border-left-color: var(--error); }
.flash--warning { border-left-color: var(--warning); }
.flash__close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* --- Error pages ------------------------------------------------------- */
.error-page { max-width: 640px; margin: 0 auto; padding: 96px 20px 120px; }
.error-page__title { margin-top: 10px; }
.error-page__lede { color: var(--navy-400); margin-top: 12px; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* An empty section that is good news (no debts, no insolvency) — visibly
   different from one where we simply have no data. */
.report__empty--clean { border-left: 3px solid var(--success); }
.report__empty--clean .report__empty-head { color: var(--success); }
.report__empty--clean .report__empty-head::before { content: "\2713  "; }
.insolvency-now {
  padding: 12px 16px;
  border-left: 3px solid var(--error);
  background: #FDF3F2;
  margin-bottom: 16px;
}
.insolvency-now__status { color: var(--error); font-size: 20px; font-weight: 600; margin-top: 4px; }
.insolvency-now__since { color: var(--navy-400); margin-top: 2px; }

/* An inline link inside running text. The global reset strips underlines,
   which is right for nav and buttons but leaves a sentence's link invisible. */
.text-link { text-decoration: underline; text-underline-offset: 2px; }
.text-link:hover { color: var(--cobalt-600); }

/* --- Legal documents --------------------------------------------------- */
/* Rendered from the Markdown in the repo root, so there are no classes to
   hang styles on — and the reset above zeroes every heading and paragraph. */
.legal { max-width: 760px; margin: 40px auto 0; }
.legal h1 { font-size: 26px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; }
.legal h2 { font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; margin-top: 40px; }
.legal h3 { font-size: 16px; font-weight: 600; margin-top: 24px; }
.legal p, .legal ul, .legal table { margin-top: 12px; }
.legal p, .legal li { font-size: 15px; line-height: 1.65; }
.legal ul { padding-left: 20px; margin-bottom: 0; }
.legal li + li { margin-top: 6px; }
.legal code { font-family: var(--font-mono); font-size: 13px; }
/* Scrolls inside itself on a phone rather than widening the page. */
.legal table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 8px 16px 8px 0; border-top: 1px solid var(--row-divider); }
.legal th {
  border-top: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Landing: the two services, weighted the same ------------------------ */
.services { display: grid; gap: 16px; }
@media (min-width: 860px) { .services { grid-template-columns: 1fr 1fr; gap: 24px; } }
.service { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 80px; }
.service__lede { color: var(--navy-400); }
.service__facts { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.service__sample { border-top: 1px solid var(--border); padding-top: 14px; }
.service__sample-head { color: var(--muted); margin-bottom: 8px; }
.service__row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--row-divider); font-size: 14px; }
.service__row-meta { color: var(--muted); text-align: right; }
@media (max-width: 519px) { .service__row { flex-direction: column; gap: 2px; } .service__row-meta { text-align: left; } }
.service__cta { align-self: flex-start; margin-top: auto; }
.pricing-card__list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

/* --- Nav: where you are --------------------------------------------------- */
.site-nav__links a[aria-current="page"] { color: var(--navy-900); font-weight: 600; }
/* The three sections sit in the bar on desktop; the menu repeats them for phones. */
@media (min-width: 900px) { .wallet-dropdown__sections { display: none; } }

/* --- Company page allowance ---------------------------------------------- */
.lookup-left { color: var(--muted); margin: 8px 0 16px; }
.lookup-gate { display: grid; gap: 14px; justify-items: start; margin-top: 24px; max-width: 720px; }

/* --- Buttons in a row; Naujos įmonės switch ------------------------------ */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.stream-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stream-form .field { width: 130px; }

/* Phones: the buy bar must not eat a third of the screen. */
@media (max-width: 899px) {
  .docked-bar { padding: 10px 14px; gap: 8px; }
  .docked-bar__count p:first-child { font-size: 20px; display: inline; margin-right: 6px; }
  .docked-bar__count .t-mono-label { display: inline; }
  .docked-bar__owned { margin-top: 2px; }
  .docked-bar__meta { margin-top: 4px; }
}