/* ==========================================================================
   law-shared.css — the token layer and the small components every law page
   uses. Loaded by laws_list, law_search, law_detail, law_as_of,
   law_article_detail, law_section_detail, law_version_history,
   law_version_compare and law_article_mapping.

   Why this file exists
   --------------------
   `.law-status-badge` — the legal-force badge emitted by
   templates/core/_law_status_badge.html — used to be redefined inline in four
   templates with three different sizes. The partial is shared; its styling was
   not, so the same act read differently depending on which page you reached it
   from. Legal force is not a place to have four visual dialects.

   Two colour signals, never mixed (this is the whole colour system):

     --law-void   #8B0000  the act has NO legal force (repealed / suspended)
     --law-anchor #F2C93E  the act has force, but THIS IS NOT TODAY'S TEXT

   Frozen names — JS, tests, or the shared partials bind to these; do not
   rename them here or in any template:
     .law-status-badge  .is-in-force  .is-repealed  .is-pending  .is-unverified
     .footnote-highlight  .footnote-label  .footnote-text  .footnote-ref-link
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Scoped to .law-page (set via {% block body_class %}) rather than :root, so
   nothing here leaks into the rest of the site. Derived from style.css's
   globals where they already exist.
   -------------------------------------------------------------------------- */
.law-page {
    /* Ink */
    --law-ink: #1a1614;
    --law-ink-soft: #443c38;
    --law-ink-muted: #6b615c;
    --law-ink-faint: #9a908a;

    /* Surfaces — warm paper, not the generic cool grey of the rest of the app.
       An act should read like a document, not like a dashboard. */
    --law-paper: #fffdfb;
    --law-app-bg: #f6f4f2;
    --law-sunken: #f0ede9;
    --law-line: #e7e2de;
    --law-line-strong: #d6cfc9;

    /* Signals */
    --law-void: var(--primary-color, #8b0000);
    --law-void-bg: #fdf3f2;
    --law-void-line: #f0d4d1;
    --law-anchor: #f2c93e;
    --law-anchor-ink: #8a6510;
    --law-anchor-bg: #fffbef;
    --law-anchor-line: #f2e3b4;
    --law-force-ink: #0f7a54;
    --law-force-bg: #ecfdf5;
    --law-link: #1d4ed8;

    /* Geometry */
    --law-radius-sm: 6px;
    --law-radius: 10px;
    --law-radius-lg: 14px;
    --law-radius-pill: 999px;
    --law-shadow-sm: 0 1px 2px rgba(26, 22, 20, .06);
    --law-shadow: 0 2px 8px rgba(26, 22, 20, .07), 0 1px 2px rgba(26, 22, 20, .05);
    --law-shadow-lg: 0 18px 45px -12px rgba(26, 22, 20, .28);

    /* Type */
    --law-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    /* Cyrillic serif coverage for ә ғ қ ң ө ұ ү һ і is unreliable on Windows
       and Android, so the reading face is a humanist sans and the comfort comes
       from size, leading and measure instead. */
    --law-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    --law-ease: cubic-bezier(.2, .8, .3, 1);
}

/* --------------------------------------------------------------------------
   2. Legal-force badge  (templates/core/_law_status_badge.html)
   The partial's markup and wording are frozen; only this styling is shared.
   -------------------------------------------------------------------------- */
.law-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.005em;
    padding: 5px 11px;
    border-radius: var(--law-radius-pill);
    border: 1px solid transparent;
    white-space: nowrap;
    vertical-align: middle;
}

.law-status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentcolor;
    flex: none;
}

.law-status-badge.is-in-force {
    background: var(--law-force-bg, #ecfdf5);
    border-color: #bbe9d3;
    color: var(--law-force-ink, #0f7a54);
}

.law-status-badge.is-repealed {
    background: var(--law-void-bg, #fdf3f2);
    border-color: var(--law-void-line, #f0d4d1);
    color: var(--law-void, #8b0000);
}

.law-status-badge.is-pending {
    background: var(--law-anchor-bg, #fffbef);
    border-color: var(--law-anchor-line, #f2e3b4);
    color: var(--law-anchor-ink, #8a6510);
}

.law-status-badge.is-unverified {
    background: #f3f4f6;
    border-color: #e2e4e7;
    color: #4b5563;
}

/* --------------------------------------------------------------------------
   3. Act-type label  (templates/core/_law_type_label.html)
   -------------------------------------------------------------------------- */
.law-type-label {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    padding: 5px 10px;
    border-radius: var(--law-radius-sm);
    background: var(--law-sunken, #f0ede9);
    color: var(--law-ink-soft, #443c38);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Breadcrumb
   -------------------------------------------------------------------------- */
.law-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--law-ink-muted, #6b615c);
    margin: 0 0 16px;
}

.law-crumbs a {
    color: var(--law-ink-muted, #6b615c);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.law-crumbs a:hover {
    color: var(--law-ink, #1a1614);
    border-bottom-color: var(--law-line-strong, #d6cfc9);
}

.law-crumbs__sep {
    color: var(--law-ink-faint, #9a908a);
}

.law-crumbs__here {
    color: var(--law-ink, #1a1614);
}

/* --------------------------------------------------------------------------
   5. Chips and quiet buttons — the shared control vocabulary
   -------------------------------------------------------------------------- */
.law-chip,
.law-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    padding: 8px 14px;
    border-radius: var(--law-radius-pill);
    border: 1px solid var(--law-line, #e7e2de);
    background: var(--law-paper, #fffdfb);
    color: var(--law-ink-soft, #443c38);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s var(--law-ease), border-color .15s var(--law-ease),
        color .15s var(--law-ease);
}

.law-chip:hover,
.law-btn:hover {
    background: var(--law-sunken, #f0ede9);
    border-color: var(--law-line-strong, #d6cfc9);
    color: var(--law-ink, #1a1614);
}

.law-chip.is-selected,
.law-btn.is-primary {
    background: var(--law-void, #8b0000);
    border-color: var(--law-void, #8b0000);
    color: #fff;
}

.law-chip.is-selected:hover,
.law-btn.is-primary:hover {
    background: var(--primary-hover, #730c0b);
    border-color: var(--primary-hover, #730c0b);
    color: #fff;
}

.law-btn[disabled],
.law-btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

.law-chip__count {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    opacity: .72;
}

/* Square icon button, 36px — the toolbar unit. */
.law-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--law-radius-sm);
    background: transparent;
    color: var(--law-ink-muted, #6b615c);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s var(--law-ease), color .15s var(--law-ease);
}

.law-iconbtn:hover {
    background: var(--law-sunken, #f0ede9);
    color: var(--law-ink, #1a1614);
}

.law-iconbtn[aria-expanded="true"],
.law-iconbtn.is-active {
    background: var(--law-sunken, #f0ede9);
    color: var(--law-void, #8b0000);
}

.law-iconbtn i {
    font-size: 16px;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   6. Notice bands — the same three tones everywhere
   -------------------------------------------------------------------------- */
.law-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 16px;
    border: 1px solid var(--law-line, #e7e2de);
    border-inline-start: 4px solid var(--law-line-strong, #d6cfc9);
    border-radius: var(--law-radius);
    background: var(--law-paper, #fffdfb);
    color: var(--law-ink-soft, #443c38);
    font-size: 14px;
    line-height: 1.6;
}

.law-notice > i {
    flex: none;
    font-size: 16px;
    line-height: 1.5;
}

/* The act has no legal force. */
.law-notice.is-void {
    border-color: var(--law-void-line, #f0d4d1);
    border-inline-start-color: var(--law-void, #8b0000);
    background: var(--law-void-bg, #fdf3f2);
    color: #6d1512;
}

/* The act has force, but this is not today's text. */
.law-notice.is-warn {
    border-color: var(--law-anchor-line, #f2e3b4);
    border-inline-start-color: var(--law-anchor, #f2c93e);
    background: var(--law-anchor-bg, #fffbef);
    color: #7a5a12;
}

.law-notice.is-info {
    border-color: #cfe0f7;
    border-inline-start-color: #3b76d1;
    background: #f2f7fe;
    color: #1e40af;
}

.law-notice a {
    color: inherit;
    font-weight: 600;
    text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   7. Footnote apparatus
   These four class names are emitted by core/templatetags/law_filters.py
   (`highlight_footnotes`) and are shared by law_detail, law_as_of and
   law_section_detail. The filter is not touched — «Сноска.» blocks are styled
   here, into a quiet aside rather than the orange alert box they used to be.
   A footnote is provenance, not a warning.
   -------------------------------------------------------------------------- */
.footnote-highlight {
    display: block;
    margin: 14px 0;
    padding: 10px 14px;
    border-inline-start: 3px solid var(--law-anchor, #f2c93e);
    border-radius: 0 var(--law-radius-sm) var(--law-radius-sm) 0;
    background: var(--law-anchor-bg, #fffbef);
    font-size: .93em;
    line-height: 1.6;
    color: var(--law-ink-muted, #6b615c);
}

/* The filter hard-codes a 📌 into the markup. Hide it here rather than editing
   the filter, which three templates share. */
.footnote-label {
    display: none;
}

.footnote-text {
    color: inherit;
}

.footnote-ref {
    font-size: .75em;
    vertical-align: super;
    color: var(--law-link, #1d4ed8);
    margin: 0 2px;
}

.footnote-ref-link {
    color: var(--law-link, #1d4ed8);
    text-decoration: none;
    padding: 1px 4px;
    border-radius: 3px;
    background: #eaf1fe;
}

.footnote-ref-link:hover {
    background: #d8e5fd;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   8. Toast — one element per page, role="status", used by copy/share feedback
   -------------------------------------------------------------------------- */
.law-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 1080;
    transform: translate(-50%, 14px);
    max-width: min(90vw, 460px);
    padding: 11px 18px;
    border-radius: var(--law-radius-pill);
    background: var(--law-ink, #1a1614);
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: var(--law-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s var(--law-ease), transform .18s var(--law-ease),
        visibility .18s;
}

.law-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   9. Card and empty state — used by the sibling pages
   -------------------------------------------------------------------------- */
.law-card {
    background: var(--law-paper, #fffdfb);
    border: 1px solid var(--law-line, #e7e2de);
    border-radius: var(--law-radius-lg);
    box-shadow: var(--law-shadow-sm);
}

.law-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--law-ink-muted, #6b615c);
    font-size: 14.5px;
    line-height: 1.65;
}

.law-empty i {
    display: block;
    font-size: 30px;
    margin-bottom: 10px;
    color: var(--law-ink-faint, #9a908a);
}

/* --------------------------------------------------------------------------
   10. Focus — never removed, always visible
   -------------------------------------------------------------------------- */
.law-page :focus-visible {
    outline: 2px solid var(--primary-hover, #730c0b);
    outline-offset: 2px;
    border-radius: 3px;
}

.law-skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 1090;
    padding: 10px 16px;
    border-radius: var(--law-radius-sm);
    background: var(--law-ink, #1a1614);
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: top .15s var(--law-ease);
}

.law-skip:focus {
    top: 12px;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .law-page *,
    .law-page *::before,
    .law-page *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}