/* ==========================================================================
   Act register /laws/ and full-text search /laws/search/ — direction A
   (2026-09-17). Templates: templates_v2/core/laws_list.html (+ law/_list_row,
   law/_list_facets) and templates_v2/core/law_search.html.
   Behaviour: static/core/js/v2/laws-list.js. Shared pills and notices:
   v2/law-shared.css (load first).

   Everything is scoped `.ui2 .lw`; tokens and components come from ui-kit.css.
   No :root block (CLAUDE.md: law-list.css once turned every control navy).

   Layout, by width:
   * ≥1068px  one grid: heading, status segments, note across; the facet rail
     on the left beside the search + sort toolbar and the results.
   * <1068px  a single column in phone order (heading, search, status chips,
     «Фильтры» + sort, note, results). The facet form becomes a bottom sheet —
     but only once laws-list.js has marked the page `.lw-js`; without the script
     it stays in the flow.
   ========================================================================== */

.ui2 .lw-messages { padding-top: 16px; }

/* ------------------------------------------------------------- frame */
.ui2 .lw-main {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  grid-template-areas:
    "head head head"
    "seg  seg  seg"
    "note note note"
    "rail search tools"
    "rail results results";
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: 56px;
  align-items: start;
  padding: 56px 0 24px;
}
.ui2 .lw-head { grid-area: head; }
.ui2 .lw-lede { margin-top: 8px; }
.ui2 .lw-search { grid-area: search; margin-top: 36px; align-self: center; }
.ui2 .lw-seg { grid-area: seg; }
.ui2 .lw-tools { grid-area: tools; margin-top: 36px; align-self: center; }
.ui2 .lw-note { grid-area: note; margin-top: 12px; }
.ui2 .lw-rail { grid-area: rail; margin-top: 36px; }
.ui2 .lw-results { grid-area: results; min-width: 0; }

/* ---------------------------------------------- status segmented control */
.ui2 .lw-seg { display: inline-flex; justify-self: start; height: 36px; margin-top: 28px; padding: 2px; border-radius: 10px; background: rgba(118, 118, 128, 0.12); }
.ui2 .lw-seg > a {
  display: flex; align-items: center; gap: 7px; padding: 0 16px; border-radius: 8px;
  color: var(--ink); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: background-color 0.2s;
}
.ui2 .lw-seg > a:hover { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
.ui2 .lw-seg > a[aria-current] { background: #fff; font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
.ui2 .lw-n { font-weight: 400; color: var(--ink2); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- toolbar */
.ui2 .lw-sfield { width: min(420px, 100%); }
.ui2 .lw-sfield input::-webkit-search-cancel-button { cursor: pointer; }
.ui2 .lw-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ui2 .lw-filters-btn { display: none; flex: none; }
.ui2 .lw-filters-btn .lw-dot-on { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.ui2 .lw-sort { display: flex; align-items: center; gap: 6px; color: var(--ink2); font-size: 13px; white-space: nowrap; }
.ui2 .lw-sort-l { margin: 0; }
.ui2 .lw-sort-box { position: relative; display: inline-flex; align-items: center; }
.ui2 .lw-sort-box select {
  -webkit-appearance: none; appearance: none;
  height: 36px; margin: 0; padding: 0 18px 0 0; border: 0; border-radius: 0; background: transparent;
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: none;
}
.ui2 .lw-sort-box select:focus-visible { outline: 2px solid rgba(139, 0, 0, 0.55); outline-offset: 2px; border-radius: 6px; }
.ui2 .lw-sort-ic { display: none; }
.ui2 .lw-sort-chev { position: absolute; right: 0; width: 12px; height: 12px; stroke-width: 2.6; color: var(--ink2); pointer-events: none; }
.ui2 .lw-sort-go { height: 30px; font-size: 13px; }

/* ------------------------------------------------------- facet rail */
.ui2 .lw-sheet-grab, .ui2 .lw-sheet-h { display: none; }
.ui2 .lw-reset { margin: 0 0 12px; }
.ui2 .lw-fg { min-width: 0; margin: 0; padding: 20px 0; border: 0; border-top: 1px solid var(--hair); }
.ui2 .lw-sheet-b > .lw-fg:first-child, .ui2 .lw-reset + .lw-fg { padding-top: 2px; border-top: 0; }
.ui2 .lw-fg > legend { float: none; width: auto; margin: 0 0 8px; padding: 0; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.3; }
.ui2 .lw-opt { min-height: 34px; }
.ui2 .lw-opt-t { min-width: 0; }
.ui2 .lw-opt:has(input:checked) .lw-opt-t { font-weight: 500; }
.ui2 .lw-switch { align-items: flex-start; min-height: 0; padding-top: 4px; line-height: 1.35; }
.ui2 .lw-help { margin-top: 6px; font-size: 13px; line-height: 1.4; }
.ui2 .lw-fa { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 20px; border-top: 1px solid var(--hair); }

/* ---------------------------------------------------------- results */
.ui2 .lw-count { display: block; margin: 20px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--hair); color: var(--ink2); font-size: 15px; }
.ui2 .lw-count b { color: var(--ink); font-weight: 600; }
/* A <details> that is open in the markup: on a desktop the summary is hidden
   and the text simply sits under the count, as it always did. The phone block
   below shows the summary and laws-list.js collapses it there — the legend is
   the only explanation of «Редакция не отслеживается» and «°» the page has, so
   it may be folded away but never removed from a viewport that prints them. */
.ui2 .lw-legend { margin-top: 10px; }
.ui2 .lw-legend > summary { display: none; }
.ui2 .lw-legend-b { margin: 0; }
.ui2 .lw-legend b { color: var(--ink2); font-weight: 600; }

.ui2 .lw-row { padding: 24px 0 26px; }
.ui2 .lw-row + .lw-row { border-top: 1px solid var(--hair); }
.ui2 .lw-idn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ink2); font-size: 13px; }
.ui2 .lw-dot { color: var(--ink3); }
.ui2 .lw-t { margin: 10px 0 0; color: var(--ink); font-size: 19px; font-weight: 600; line-height: 1.32; letter-spacing: -0.012em; text-wrap: pretty; overflow-wrap: anywhere; }
.ui2 .lw-t a { color: inherit; text-decoration: none; transition: color 0.15s; }
.ui2 .lw-t a:hover { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ui2 .lw-t.is-caps { font-size: 16px; letter-spacing: 0.005em; }
.ui2 .lw-facts { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 16px; margin: 12px 0 0; font-size: 15px; line-height: 1.45; }
.ui2 .lw-facts dt { margin: 0; padding-top: 2px; color: var(--ink3); font-size: 13px; font-weight: 400; }
.ui2 .lw-facts dd { margin: 0; min-width: 0; color: var(--ink2); overflow-wrap: anywhere; }
.ui2 .lw-untr { color: var(--ink3); }
.ui2 .lw-date { color: var(--ink); }
.ui2 .lw-gap { margin-left: 1px; color: var(--ink3); font-size: 12px; line-height: 0; vertical-align: super; }
.ui2 .lw-tag { display: inline-flex; align-items: center; height: 22px; margin-right: 4px; padding: 0 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink2); font-size: 12px; font-weight: 500; white-space: nowrap; vertical-align: 1px; }
.ui2 .lw-kk { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; color: var(--ink3); font-size: 13px; line-height: 1.45; }
.ui2 .lw-kk-t { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui2 .lw-kk .lw-kk-tag { margin-top: 1px; }

.ui2 .lw-empty { margin-top: 24px; padding: 48px 28px; border-radius: 18px; background: var(--fill); text-align: center; }
.ui2 .lw-empty .ui-small { margin-top: 8px; }
.ui2 .lw-empty-a { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin: 18px 0 0; }

/* ------------------------------------------------------- pagination */
.ui2 .lw-pages { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 0; padding-top: 22px; border-top: 1px solid var(--hair); }
.ui2 .lw-pg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ui2 .lw-pg > a, .ui2 .lw-pg > span {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 18px;
  color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; text-decoration: none;
  transition: background-color 0.15s;
}
.ui2 .lw-pg > a:hover { background: var(--fill); color: var(--ink); }
.ui2 .lw-pg > .is-on { background: var(--ink); color: #fff; }
.ui2 .lw-pg > .is-off, .ui2 .lw-pg-gap { color: var(--ink3); }
.ui2 .lw-pg .ui-ic { width: 13px; height: 13px; stroke-width: 2.4; }
.ui2 .lw-pg-step { color: var(--ink2); }
.ui2 .lw-pagefoot { white-space: nowrap; }

/* -------------------------------------------------------- codes band */
.ui2 .lw-codes { margin-top: 72px; padding: 56px 0 72px; border-top: 1px solid var(--fill2); }
.ui2 .lw-codes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ui2 .lw-cgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; margin: 22px 0 0; padding: 0; list-style: none; }
.ui2 .lw-cgrid a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--hair); color: var(--ink); font-size: 15px; line-height: 1.3; text-decoration: none; transition: color 0.15s; }
.ui2 .lw-cgrid a:hover { color: var(--brand); }
.ui2 .lw-cgrid .ui-ic { width: 12px; height: 12px; stroke-width: 2.6; color: var(--ink3); }

.ui2 .lw-scrim { position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.25s ease; }
.ui2 .lw-scrim.is-open { opacity: 1; }

/* ====================================================== tablet + phone */
@media (max-width: 1067.98px) {
  .ui2 .lw-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 32px 0 8px; }
  .ui2 .lw-main > * { flex: 0 0 100%; min-width: 0; }
  .ui2 .lw-head { order: 1; }
  .ui2 .lw-search { order: 2; margin-top: 20px; }
  .ui2 .lw-sfield { width: 100%; height: 44px; border-radius: 12px; font-size: 17px; }
  .ui2 .lw-seg { order: 3; }
  .ui2 .lw-tools { order: 4; flex-basis: auto; flex-grow: 1; justify-content: space-between; margin-top: 10px; }
  .ui2 .lw-note { order: 5; margin-top: 14px; }
  .ui2 .lw-rail { order: 6; margin-top: 24px; }
  .ui2 .lw-results { order: 7; }

  /* Status: a side-scrolling row of chips. */
  .ui2 .lw-seg {
    display: flex; gap: 8px; height: auto; margin-top: 14px; padding: 4px var(--ui-gutter);
    margin-inline: calc(-1 * var(--ui-gutter)); flex-basis: calc(100% + 2 * var(--ui-gutter)); max-width: none;
    border-radius: 0; background: none; overflow-x: auto; scrollbar-width: none;
  }
  .ui2 .lw-seg::-webkit-scrollbar { display: none; }
  .ui2 .lw-seg > a { flex: none; height: 36px; padding: 0 15px; border-radius: 980px; background: var(--fill); font-size: 15px; font-weight: 400; box-shadow: none; }
  .ui2 .lw-seg > a:hover { background: var(--fill2); }
  .ui2 .lw-seg > a[aria-current] { background: var(--ink); color: #fff; font-weight: 400; box-shadow: none; }
  .ui2 .lw-seg > a[aria-current] .lw-n { color: rgba(255, 255, 255, 0.72); }
  .ui2 .lw-long { display: none; }

  .ui2 .lw.lw-js .lw-filters-btn:not([hidden]) { display: inline-flex; }
  .ui2 .lw-sort { flex: 0 1 auto; min-width: 0; }
  .ui2 .lw-sort-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ui2 .lw-sort-box { min-width: 0; max-width: 100%; height: 36px; padding: 0 30px 0 15px; border-radius: 980px; background: var(--fill); }
  .ui2 .lw-sort-box:hover { background: var(--fill2); }
  .ui2 .lw-sort-ic { display: block; width: 15px; height: 15px; margin-right: 6px; color: var(--ink); }
  .ui2 .lw-sort-box select { flex: 1 1 auto; min-width: 0; padding: 0; font-size: 15px; font-weight: 400; text-overflow: ellipsis; }
  .ui2 .lw-sort-box select:focus-visible { outline: 0; }
  .ui2 .lw-sort-box:focus-within { box-shadow: 0 0 0 2px rgba(139, 0, 0, 0.45); }
  .ui2 .lw-sort-chev { right: 13px; }

  .ui2 .lw-count { margin-top: 18px; }
  .ui2 .lw-row { padding: 20px 0 22px; }
  .ui2 .lw-t { font-size: 17px; line-height: 1.35; }
  .ui2 .lw-t.is-caps { font-size: 15px; }
  .ui2 .lw-codes { margin-top: 40px; padding: 36px 0 44px; }
  .ui2 .lw-cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ---- the facet form as a bottom sheet (script-enabled pages only) ---- */
  .ui2 .lw.lw-js .lw-rail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1110;
    display: flex; flex-direction: column;
    width: min(100%, 640px); max-height: calc(100dvh - 48px); margin: 0 auto;
    border-radius: 14px 14px 0 0; background: #fff;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(104%); visibility: hidden;
    transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.36s;
  }
  .ui2 .lw.lw-js .lw-rail.is-open { transform: none; visibility: visible; transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1); }
  .ui2 .lw.lw-js .lw-sheet-grab { display: block; flex: none; width: 36px; height: 5px; margin: 6px auto 0; border-radius: 3px; background: var(--hair); }
  .ui2 .lw.lw-js .lw-sheet-h { display: grid; flex: none; grid-template-columns: 1fr auto 1fr; align-items: center; height: 50px; padding: 0 20px; border-bottom: 1px solid var(--sep); }
  .ui2 .lw.lw-js .lw-sheet-t { margin: 0; color: var(--ink); font-size: 17px; font-weight: 600; }
  .ui2 .lw.lw-js .lw-sheet-l, .ui2 .lw.lw-js .lw-sheet-r { display: flex; align-items: center; height: 44px; padding: 0; border: 0; background: none; color: var(--brand); font: inherit; font-size: 17px; text-decoration: none; cursor: pointer; }
  .ui2 .lw.lw-js .lw-sheet-l { justify-self: start; }
  .ui2 .lw.lw-js .lw-sheet-r { justify-self: end; font-weight: 600; }
  .ui2 .lw.lw-js .lw-sheet-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 8px; }
  .ui2 .lw.lw-js .lw-reset { display: none; }
  .ui2 .lw.lw-js .lw-sheet-b > .lw-fg:first-of-type { padding-top: 0; border-top: 0; }
  .ui2 .lw.lw-js .lw-opt { min-height: 44px; font-size: 17px; }
  .ui2 .lw.lw-js .lw-switch { font-size: 17px; }
  .ui2 .lw.lw-js .lw-fa { flex: none; flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 20px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sep); background: #fff; }
  .ui2 .lw.lw-js .lw-apply { width: 100%; height: 50px; background: var(--brand); color: #fff; font-size: 17px; font-weight: 400; }
  .ui2 .lw.lw-js .lw-apply:hover { background: var(--brand-hover); color: #fff; }
  .ui2 .lw.lw-js .lw-fulltext { align-self: center; }
}

@media (max-width: 733.98px) {
  .ui2 .lw-main { padding-top: 24px; }
  /* .lw-count already draws the hairline above; a second one reads as a gap. */
  .ui2 .lw-legend { margin-top: 2px; }
  .ui2 .lw-legend > summary { display: flex; align-items: center; gap: 7px; min-height: 34px; color: var(--ink2); font-size: 13px; cursor: pointer; list-style: none; }
  /* Safari draws its own triangle beside a styled marker. */
  .ui2 .lw-legend > summary::-webkit-details-marker { display: none; }
  .ui2 .lw-legend > summary::after { content: ""; flex: none; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; }
  .ui2 .lw-legend[open] > summary::after { margin-top: 2px; transform: rotate(-135deg); }
  .ui2 .lw-legend-b { margin-top: 4px; }
  .ui2 .lw-range { display: none; }
  .ui2 .lw-facts { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .ui2 .lw-facts dt { padding-top: 6px; }
  .ui2 .lw-pages { flex-direction: column; align-items: stretch; gap: 10px; }
  /* The elided range can hold nine numbers; wrap rather than run off the screen. */
  .ui2 .lw-pg { flex-wrap: wrap; justify-content: center; gap: 2px; }
  .ui2 .lw-pg > a, .ui2 .lw-pg > span { min-width: 44px; height: 44px; padding: 0 6px; border-radius: 22px; }
  .ui2 .lw-pg-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ui2 .lw-pagefoot { text-align: center; }
  .ui2 .lw-cgrid { grid-template-columns: minmax(0, 1fr); }
  .ui2 .lw-cgrid a { font-size: 17px; }
}

/* ================================================== /laws/search/ */
.ui2 .ls-main { padding: 56px 0 96px; }
.ui2 .ls-col { max-width: 820px; }
.ui2 .ls-lede { margin-top: 8px; }
.ui2 .ls-form { display: flex; gap: 10px; margin-top: 28px; }
.ui2 .ls-form .ui-field { flex: 1; }
.ui2 .ls-scope { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ui2 .ls-notes { display: grid; gap: 10px; margin-top: 22px; }
.ui2 .ls-count { margin: 28px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--hair); color: var(--ink2); font-size: 15px; }
.ui2 .ls-count b { color: var(--ink); font-weight: 600; }
.ui2 .ls-hit { display: block; padding: 22px 0 24px; color: inherit; text-decoration: none; }
.ui2 .ls-hit + .ls-hit { border-top: 1px solid var(--hair); }
.ui2 .ls-hit:hover { color: inherit; }
.ui2 .ls-hit:hover .ls-hit-t { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.ui2 .ls-hit-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ink2); font-size: 13px; line-height: 1.4; }
.ui2 .ls-hit-doc > span:first-child { min-width: 0; }
.ui2 .ls-hit-t { display: block; margin-top: 8px; color: var(--ink); font-size: 19px; font-weight: 600; line-height: 1.32; letter-spacing: -0.012em; overflow-wrap: anywhere; }
.ui2 .ls-hit-s { display: block; margin-top: 8px; color: var(--ink2); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.ui2 .ls-empty { margin-top: 28px; }
.ui2 .ls-empty p + p { margin-top: 6px; }
.ui2 .ls-main .lw-pages { margin-top: 8px; }
.ui2 .ls-tips { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--fill2); }
.ui2 .ls-tips ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink2); font-size: 15px; line-height: 1.6; }

@media (max-width: 733.98px) {
  .ui2 .ls-main { padding: 24px 0 64px; }
  .ui2 .ls-form { flex-direction: column; }
  .ui2 .ls-form .ui-field { flex: none; }
  .ui2 .ls-form .ui-btn { width: 100%; }
  .ui2 .ls-hit-t { font-size: 17px; line-height: 1.35; }
}

@media print {
  .ui2 .lw-rail, .ui2 .lw-tools, .ui2 .lw-search, .ui2 .lw-seg, .ui2 .lw-codes, .ui2 .lw-pages { display: none !important; }
}