/* header.css, footer.css and currency.css are linked from fragments/head.html (no @import chain) */

:root {
    color-scheme: light;

    /* ---------- Tengri palette (raw) ---------- */
    --tengri-sky:        #1b2a57;
    --tengri-sky-deep:   #12204a;
    --tengri-sun:        #d9a441;
    --tengri-sun-soft:   #f2d988;
    --tengri-cream:      #f6efe0;
    --tengri-cream-dark: #ebe0c7;
    --tengri-paper:      #fbf7ec;
    --tengri-ink:        #1a1e2a;
    --tengri-ink-soft:   #4a4e5c;
    --tengri-ember:      #c64a3a;
    --tengri-line:       rgba(27, 42, 87, 0.14);

    /* ---------- Theme tokens (semantic) — mapped to Tengri ---------- */
    /* Brand */
    --color-primary:          var(--tengri-sky);
    --color-primary-hover:    var(--tengri-sky-deep);
    --color-primary-contrast: var(--tengri-cream);

    --color-accent:           var(--tengri-sun);
    --color-accent-hover:     #c4922d;
    --color-accent-contrast:  var(--tengri-sky-deep);

    /* Surfaces */
    --color-bg:               var(--tengri-paper);
    --color-surface:          #ffffff;
    --color-surface-alt:      var(--tengri-cream);
    --color-border:           var(--tengri-line);
    --color-border-strong:    rgba(27, 42, 87, 0.32);

    /* Text */
    --color-text:             var(--tengri-ink);
    --color-text-secondary:   var(--tengri-ink-soft);
    --color-text-muted:       #6b7280;

    /* Status */
    --color-success:          #10b981;
    --color-success-bg:       #d1fae5;
    --color-warning:          #f59e0b;
    --color-warning-bg:       #fef3c7;
    --color-danger:           #ef4444;
    --color-danger-bg:        #fee2e2;
    --color-info:             #0ea5e9;
    --color-info-bg:          #dbeafe;

    /* ---------- Aliases: keep existing var names working ---------- */
    --primary-color:       var(--color-primary);
    --accent-color:        var(--color-accent);
    --accent-hover:        var(--color-accent-hover);
    --accent-hover-color:  var(--color-accent-hover);
    --background-color:    var(--color-bg);
    --text-color:          var(--color-text);
    --text-primary:        var(--color-text);
    --text-secondary:      var(--color-text-secondary);
    --bg-primary:          var(--color-surface);
    --bg-secondary:        var(--color-surface-alt);
    --border-color:        var(--color-border);

    /* Font Size System - Adjust --font-scale to resize everything proportionally */
    --font-scale: 1; /* Base scale factor: 1 = 100%, 1.1 = 110%, 0.9 = 90% */

    /* Base sizes (before scaling) */
    --font-base: 14px;

    /* Mobile-first responsive breakpoints (documentation; @media uses literals)
       --bp-sm: 480px  -- phone portrait
       --bp-md: 768px  -- phone landscape / small tablet
       --bp-lg: 1024px -- tablet landscape / small laptop */

    /* Touch target minimum size; phones keep it too (fingers are the same size). */
    --tap-target: 40px;
    --tap-target-sm: 36px;

    /* Shape, focus and motion — one set for every component */
    --radius: 10px;
    --radius-sm: 6px;
    --color-ring: rgba(27, 42, 87, 0.45);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

    /* Side gutter on phones */
    --gutter: 1rem;

    /* Header height — set by sticky-offsets.js, used by drawers and sticky toolbars */
    --header-offset: 0px;

    /* Scaled font sizes using calc() */
    --font-size-body: calc(var(--font-base) * var(--font-scale));
    --font-size-small: calc(12px * var(--font-scale));
    --font-size-xs: calc(11px * var(--font-scale));

    /* Headings */
    --font-size-h1: calc(1.5rem * var(--font-scale));
    --font-size-h2: calc(1.25rem * var(--font-scale));
    --font-size-h3: calc(1.1rem * var(--font-scale));
    --font-size-h4: calc(1rem * var(--font-scale));

    /* UI Elements */
    --font-size-button: calc(0.875rem * var(--font-scale));
    --font-size-button-small: calc(0.8rem * var(--font-scale));
    --font-size-nav: calc(0.95rem * var(--font-scale));
    --font-size-label: calc(0.85rem * var(--font-scale));
    --font-size-input: calc(0.9rem * var(--font-scale));
    --font-size-badge: calc(0.85rem * var(--font-scale));

    /* Type stack — Tengri */
    --font-heading: "Inter", "Noto Sans JP", system-ui, sans-serif;
    --font-body: "Roboto", "Noto Sans JP", system-ui, sans-serif;
    --font-mono:  "Noto Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}


/* Alternate palette — swap with: document.documentElement.dataset.theme = 'dark' */
:root[data-theme="dark"] {
    color-scheme: dark;
    --color-primary:          var(--tengri-sun-soft);
    --color-primary-hover:    var(--tengri-sun);
    --color-accent:           var(--tengri-sun);
    --color-accent-hover:     var(--tengri-sun-soft);
    --color-bg:               var(--tengri-sky-deep);
    --color-surface:          var(--tengri-sky);
    --color-surface-alt:      #1d2e60;
    --color-border:           rgba(217, 164, 65, 0.18);
    --color-border-strong:    rgba(217, 164, 65, 0.4);
    --color-text:             var(--tengri-cream);
    --color-text-secondary:   rgba(246, 239, 224, 0.7);
    --color-text-muted:       rgba(246, 239, 224, 0.5);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Lock scroll while a drawer is open */
body.drawer-open {
    overflow: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    letter-spacing: -0.01em;
}

.container {
    width: min(1400px, 94vw);
    margin: 0 auto;
    padding: 0;
    flex-shrink: 0
}

.container--narrow {
    width: min(760px, 94vw);
    margin: 0 auto;
    padding: 0;
    flex-shrink: 0
}

/* Phones: a fixed 16px gutter instead of 3vw (12px at 390px felt cramped) */
@media (max-width: 768px) {
    .container,
    .container--narrow { width: calc(100% - 2 * var(--gutter)); }
}

/* One visible focus ring for keyboard users; components with their own
   focus style keep it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
}

/* No grey flash on tap; pressable things get their own :active feedback */
:where(a, button, [role="button"]) { -webkit-tap-highlight-color: transparent; }

/* Global heading standards - using CSS variables */
h1 { font-size: var(--font-size-h1); line-height: 1.3; margin-bottom: 0.6rem; }
h2 { font-size: var(--font-size-h2); line-height: 1.3; margin-bottom: 0.5rem; }
h3 { font-size: var(--font-size-h3); line-height: 1.3; margin-bottom: 0.4rem; }
h4 { font-size: var(--font-size-h4); line-height: 1.3; margin-bottom: 0.4rem; }

.site-main h2 {
    color: var(--primary-color);
}

.site-main p {
    margin-bottom: 0.75rem;
}

/* put this in base.css (end of file) */
.site-wrapper {
  display: flex;            /* it already is, but ensure it */
  flex-direction: column;
  min-height: 100vh;        /* <- key: ensures wrapper always fills viewport */
  flex: 1;                  /* <- fills remaining height if footer is a sibling */
}

.site-main {
  flex: 1 0 auto;           /* content grows to fill space */
}

/* put this in footer.css (or base.css after imports) */
.site-footer {
  margin-top: auto;         /* <- key: pins footer to bottom when content is short */
}

/* Utility: Text Colors */
.text-success { color: var(--color-success); }
.text-error   { color: var(--color-danger); }
.text-info    { color: var(--color-info); }
.text-warning { color: var(--color-warning); }
.link-light   { color: inherit; text-decoration: underline; }

/* Breadcrumb / Back Navigation */
.breadcrumb {
    margin: 1rem 0 0.75rem;
}

.breadcrumb a {
    color: var(--tengri-sky);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--accent-color);
}

/* Prevent browser-default purple on visited links */
:where(a:visited) {
    color: inherit;
}
.link-accent  { color: var(--accent-color); }
.pre-wrap     { white-space: pre-wrap; }

/* Info Box */
.info-box {
    background: var(--color-info-bg);
    border: 1px solid var(--color-info);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.info-box h3 {
    margin: 0 0 0.5rem 0;
    color: var(--color-info);
    font-size: var(--font-size-h4);
}

.info-box ul {
    margin: 0;
    padding-left: 1.5rem;
    color: var(--color-info);
}

/* Form Panel */
.form-panel {
    background: var(--color-surface);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(27, 42, 87, 0.08);
    border: 1px solid var(--tengri-line);
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    color: white;
    font-weight: 500;
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.3s ease-out;
}

.toast--show {
    opacity: 1;
    transform: translateY(0);
}

.toast--fade-out {
    opacity: 0;
    transform: translateY(20px);
}

.toast--success {
    background-color: var(--color-success);
}

.toast--error {
    background-color: var(--color-danger);
}

.toast--warning {
    background-color: var(--color-warning);
}

/* Unified Action Button System */
.listing-actions-bar {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 0.35rem 0.75rem;
    background: var(--tengri-cream);
    border-top: 1px solid var(--tengri-line);
    border-bottom: 1px solid var(--tengri-line);
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem;
    border: 1px solid;
    border-radius: 6px;
    font-size: var(--font-size-button-small);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.action-btn:active {
    transform: scale(0.98);
}

/* Button Variants - Semantic Colors */
.action-btn--neutral {
    background: var(--tengri-paper);
    border-color: var(--tengri-line);
    color: var(--tengri-ink);
}

.action-btn--neutral:hover {
    background: var(--tengri-cream);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.action-btn--edit {
    background: var(--color-info-bg);
    border-color: var(--color-info);
    color: var(--color-info);
}

.action-btn--edit:hover {
    background: var(--color-info);
    border-color: var(--color-info);
    color: var(--tengri-paper);
}

.action-btn--success {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--tengri-ink);
}

.action-btn--success:hover {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--tengri-paper);
}

.action-btn--warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
    color: var(--tengri-ink);
}

.action-btn--warning:hover {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--tengri-paper);
}

.action-btn--info {
    background: var(--color-info-bg);
    border-color: var(--color-info);
    color: var(--tengri-ink);
}

.action-btn--info:hover {
    background: var(--color-info);
    border-color: var(--color-info);
    color: var(--tengri-paper);
}

.action-btn--danger {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--tengri-ink);
}

.action-btn--danger:hover {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--tengri-paper);
}

.action-btn--restore {
    background: var(--color-info-bg);
    border-color: var(--color-info);
    color: var(--tengri-ink);
}

.action-btn--restore:hover {
    background: var(--color-info);
    border-color: var(--color-info);
    color: var(--tengri-paper);
}

.action-btn--secondary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.action-btn--secondary:hover {
    background: var(--tengri-sky);
    border-color: var(--tengri-sky);
}

/* Star / Favorite Button */
.action-btn--star {
    background: var(--tengri-paper);
    border-color: var(--tengri-line);
    color: var(--tengri-ink-soft);
}

.action-btn--star:hover {
    background: var(--tengri-cream);
    border-color: #fbbf24;
    color: #d97706;
}

.action-btn--star-active {
    background: #fef3c7;
    border-color: #fbbf24;
    color: #d97706;
}

.action-btn--star-active:hover {
    background: #fde68a;
    border-color: #f59e0b;
    color: #b45309;
}

/* Listing action bar — uniform button styles */
.listing-actions-bar .action-btn,
.listing-actions-bar .action-btn--neutral,
.listing-actions-bar .action-btn--success,
.listing-actions-bar .action-btn--warning,
.listing-actions-bar .action-btn--info,
.listing-actions-bar .action-btn--edit,
.listing-actions-bar .action-btn--secondary,
.listing-actions-bar .action-btn--danger,
.listing-actions-bar .action-btn--restore,
.listing-actions-bar .action-btn--star,
.listing-actions-bar .action-btn--star-active {
    background: var(--tengri-paper);
    border-color: var(--tengri-line);
    color: var(--tengri-ink);
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 6px;
    padding: 0.25rem 0.6rem;
}

.listing-actions-bar .action-btn:hover,
.listing-actions-bar .action-btn--neutral:hover,
.listing-actions-bar .action-btn--success:hover,
.listing-actions-bar .action-btn--warning:hover,
.listing-actions-bar .action-btn--info:hover,
.listing-actions-bar .action-btn--edit:hover,
.listing-actions-bar .action-btn--secondary:hover,
.listing-actions-bar .action-btn--danger:hover,
.listing-actions-bar .action-btn--restore:hover,
.listing-actions-bar .action-btn--star:hover,
.listing-actions-bar .action-btn--star-active:hover {
    background: var(--tengri-cream);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Back Button */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    background: var(--tengri-cream);
    color: var(--tengri-sky);
    border: 1px solid var(--tengri-line);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    font-family: var(--font-body);
}

.btn-back:hover {
    background: var(--tengri-sky);
    color: var(--tengri-sun-soft);
    border-color: var(--tengri-sky);
}

/* Utility Classes */
.form-inline { display: inline; }
.is-hidden { display: none !important; }
.text-center { text-align: center; }

/* Mobile/desktop visibility — single switch at the 768px (md) breakpoint */
.is-mobile-only { display: initial; }
.is-desktop-only { display: none; }
@media (min-width: 769px) {
    .is-mobile-only { display: none !important; }
    .is-desktop-only { display: initial; }
}
.py-2 { padding-top: 2rem; padding-bottom: 2rem; }
.mt-1 { margin-top: 0.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-n1 { margin-top: -0.5rem; }
.btn-sm { font-size: 0.85rem; padding: 0.4rem 0.8rem; }
.success-box {
    padding: 2rem;
    text-align: center;
    background: var(--color-success-bg);
    border: 2px solid var(--color-success);
    border-radius: 8px;
}
.success-box h3 { color: var(--color-success); margin-bottom: 0.5rem; }
.success-box p { color: var(--tengri-ink-soft); }
.text-small { font-size: 0.85rem; }
.text-muted { color: var(--tengri-ink-soft); }
.img-thumb { width: 200px; height: auto; border-radius: 8px; margin-bottom: 1rem; }
.action-btn--gray {
    background: var(--tengri-ink-soft);
    border-color: var(--tengri-ink-soft);
    color: var(--tengri-paper);
}

/* Page header — same on every top-level page: title + subtitle, optional action on the right. */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding: 1rem 0 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary);
}

.page-header p { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--color-text-secondary); }

@media (max-width: 768px) {
    .page-header { padding-top: 0.75rem; }
    .page-header h1 { font-size: 1.25rem; }
    /* the subtitle only: form popups (dialogs) also live inside .page-header */
    .page-header > div > p { display: none; }
}

/* Buttons — one system: .button + --primary / --secondary, optional --small. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 160ms var(--ease-out);
}

.button:active { transform: scale(0.97); }

@media (max-width: 768px) {
    .button { min-height: var(--tap-target); }
    .button--small { min-height: var(--tap-target-sm); }
}

.button--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.button--primary:hover { background: var(--color-primary-hover); }
.button--secondary { background: transparent; border-color: var(--color-border-strong); color: var(--color-text); }
.button--secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
.button--small { padding: 0.3rem 0.8rem; font-size: 0.8rem; }

/* Status Badges Row */
.listing-status-badges {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .listing-actions-bar {
        flex-direction: column;
    }

    .action-btn {
        width: 100%;
        justify-content: center;
        min-height: var(--tap-target);
    }
}

/* ==========================================================================
   Shared Drawer Pattern
   Used by nav drawer (mobile nav), filter drawer (/zar), manage sidebar.
   Markup contract:
     <button class="drawer-trigger" aria-controls="my-drawer" aria-expanded="false">
     <div class="drawer" id="my-drawer" aria-hidden="true">
       <div class="drawer__overlay" data-drawer-close></div>
       <aside class="drawer__panel" role="dialog" aria-modal="true">
         <button class="drawer__close" data-drawer-close aria-label="Close">×</button>
         ...content...
       </aside>
     </div>
   JS: static/js/drawer.js handles toggling.
   ========================================================================== */

.drawer-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: var(--tap-target);
    min-height: var(--tap-target);
    padding: 0 0.6rem;
    background: var(--tengri-paper);
    color: var(--tengri-sky);
    border: 1px solid var(--tengri-line);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.drawer-trigger:hover,
.drawer-trigger:focus-visible {
    background: var(--tengri-cream);
    border-color: var(--accent-color);
    outline: none;
}

.drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    pointer-events: none;
}

.drawer.drawer--open {
    visibility: visible;
    pointer-events: auto;
}

.drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.drawer.drawer--open .drawer__overlay {
    opacity: 1;
}

.drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(320px, 86vw);
    background: var(--tengri-paper);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform 300ms var(--ease-drawer);
    display: flex;
    flex-direction: column;
}

/* Default: slide in from the LEFT */
.drawer__panel { left: 0; transform: translateX(-100%); }
.drawer.drawer--open .drawer__panel { transform: translateX(0); }

/* Slide in from the RIGHT */
.drawer--right .drawer__panel { left: auto; right: 0; transform: translateX(100%); }
.drawer--right.drawer--open .drawer__panel { transform: translateX(0); }

.drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--tengri-line);
    background: var(--tengri-cream);
}

.drawer__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tengri-sky);
}

.drawer__close {
    width: var(--tap-target);
    height: var(--tap-target);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--tengri-ink);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.drawer__close:hover,
.drawer__close:focus-visible {
    background: var(--tengri-paper);
    border-color: var(--tengri-line);
    outline: none;
}

.drawer__body {
    padding: 1rem;
    flex: 1 1 auto;
}

.drawer__footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--tengri-line);
    background: var(--tengri-cream);
}

/* Above the md breakpoint, drawers used for nav/filters become inline panels.
   Pages that opt-in add a `.drawer--inline-md` modifier and we reset positioning. */
@media (min-width: 769px) {
    .drawer.drawer--inline-md {
        position: static;
        visibility: visible;
        pointer-events: auto;
    }
    .drawer.drawer--inline-md .drawer__overlay { display: none; }
    .drawer.drawer--inline-md .drawer__panel {
        position: static;
        width: auto;
        transform: none;
        box-shadow: none;
        background: transparent;
        overflow: visible;
        display: block;
    }
    .drawer.drawer--inline-md .drawer__header,
    .drawer.drawer--inline-md .drawer__close {
        display: none;
    }
    .drawer.drawer--inline-md .drawer__body { padding: 0; }
}

/* ---------- Form: required-field marker ---------- */
.required {
    color: var(--color-danger);
    margin-left: 0.15rem;
    font-weight: 600;
}



.page-header__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---------- Phones: one-line filter rows you swipe sideways ----------
   The row bleeds to the screen edge so the cut-off pill shows there is more.
   pill-rows.js scrolls the active pill into view on load. The "body" prefix
   wins over the page stylesheets (guides.css, business.css), which load later. */
@media (max-width: 768px) {
    body .guides-filter,
    body .biz-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
        margin-inline: calc(-1 * var(--gutter));
        padding-inline: var(--gutter);
    }
    /* A row that is its own .container bleeds by spanning the full width */
    body .guides-filter.container,
    body .biz-filters.container { width: 100%; margin-inline: 0; }
    body .guides-filter::-webkit-scrollbar,
    body .biz-filters::-webkit-scrollbar { display: none; }
    body .guides-filter > *,
    body .biz-filters > * { flex-shrink: 0; scroll-snap-align: start; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    .drawer__panel { transition: none; }
    .button:active { transform: none; }
}

/* ---------- Phones: page actions, toasts, reading size ---------- */
@media (max-width: 768px) {
    :root { --font-base: 15px; }

    /* Header actions share one row instead of stacking */
    .page-header { align-items: center; }
    .page-header__actions { width: 100%; flex-wrap: nowrap; }
    .page-header__actions > .button { flex: 1 1 0; min-width: 0; padding-inline: 0.75rem; white-space: normal; text-align: center; }

    /* Toasts sit above the tab bar */
    .toast { left: var(--gutter); right: var(--gutter); bottom: calc(var(--tabbar-h, 0px) + 1rem); }
}

@media (max-width: 768px) {
    .page-header__actions > .button { min-height: var(--tap-target-sm); padding-block: 0.4rem; font-size: 0.82rem; }
}

/* ---------- ⓘ button that opens a small note (popover) ----------
   For notices readers rarely need (legal notes, disclaimers): a 28px icon
   instead of a paragraph. Markup:
     <button type="button" class="info-tip" popovertarget="x" aria-label="…">…svg…</button>
     <div id="x" popover class="info-pop">…</div>
   The popover sits in the top layer, so a scrolling row can't clip it. */
.info-tip {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    vertical-align: middle;
}
.info-tip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.info-tip:hover { color: var(--color-primary); border-color: var(--color-border-strong); }

.info-pop {
    margin: auto;
    width: min(22rem, calc(100% - 2 * var(--gutter)));
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.55;
    box-shadow: 0 12px 32px rgba(27, 42, 87, 0.18);
    opacity: 1;
    transform: none;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), overlay 180ms allow-discrete, display 180ms allow-discrete;
}
.info-pop:not(:popover-open) { opacity: 0; transform: scale(0.97); }
@starting-style { .info-pop:popover-open { opacity: 0; transform: scale(0.97); } }
.info-pop::backdrop { background: rgba(15, 23, 42, 0.25); }
.info-pop p { margin: 0; }
.info-pop p + p { margin-top: 0.5rem; }

/* Phones: swipe back (iOS edge swipe, Android back gesture) replaces the
   back links; every page is a real page load, so history works. */
@media (max-width: 768px) {
    .breadcrumb { display: none; }
}

/* Text for screen readers only */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ⓘ inside a filter row sits centred with the pills */
.guides-filter > .info-tip { align-self: center; }

/* ---------- Dropdown (shadcn-style select) ---------- */
.select { position: relative; display: block; min-width: 0; }
.select select {
    width: 100%;
    min-height: var(--tap-target);
    padding: 0 2.1rem 0 0.8rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 16px; /* under 16px iOS zooms in on focus */
    font-weight: 600;
    text-overflow: ellipsis;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.select::after {
    content: "";
    position: absolute;
    right: 0.85rem;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--color-text-secondary);
    border-bottom: 2px solid var(--color-text-secondary);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.info-pop__list { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.info-pop__list li + li { margin-top: 0.35rem; }

/* A popup box in the middle of the screen, for <dialog> (showModal) or [popover].
   The reset above sets margin: 0 on everything, which undoes the browser's own centring;
   this puts it back and keeps tall content scrollable inside the box. */
.center-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(30rem, calc(100% - 2 * var(--gutter)));
    height: fit-content;
    max-height: calc(100dvh - 2 * var(--gutter));
    overflow-y: auto;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 16px 40px rgba(27, 42, 87, 0.22);
}
.center-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }

/* «Засах холбоос» dialog (shown once after a submission) */
.edit-link-dialog h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.edit-link-dialog p { margin: 0 0 0.75rem; line-height: 1.55; }
.edit-link-dialog__row { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.edit-link-dialog__row input {
    flex: 1;
    min-width: 0;
    min-height: var(--tap-target);
    padding: 0 0.6rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 16px;
}
.edit-link-dialog__hint { font-size: 0.85rem; color: var(--color-text-secondary); }

/* Edit page reached through a «Засах холбоос» */
.edit-entry { padding: 1rem 0 2rem; }
.edit-entry__saved { margin: 0 0 0.75rem; font-weight: 600; color: var(--color-success); }
.edit-entry__remove { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.edit-entry__remove summary { cursor: pointer; color: var(--color-text-secondary); min-height: 36px; }
.edit-entry__remove p { margin: 0.5rem 0; font-size: 0.9rem; color: var(--color-text-secondary); }
/* The header and messages sit outside the forms here, so the card carries the padding */
.edit-entry .submit-page { padding: 1.25rem 1.5rem 1.5rem; }
.edit-entry .submit-page form { padding: 0; margin-top: 0.75rem; }
@media (max-width: 768px) { .edit-entry .submit-page { padding: 1rem; } }

/* ---------- 3-week event calendar (fragments/calendar.html) ---------- */
.cal3 { margin: 0 0 1.25rem; }
.cal3__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; }
.cal3__title { margin: 0; font-size: 1.05rem; color: var(--color-primary); }
.cal3__subscribe {
    min-height: var(--tap-target-sm);
    padding: 0 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.cal3__grid {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
}
.cal3__weekdays, .cal3__week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal3__weekdays span {
    padding: 0.4rem 0;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    background: var(--color-surface-alt);
}
.cal3__weekdays .is-weekend { color: var(--tengri-ember); }
.cal3__week + .cal3__week { border-top: 1px solid var(--color-border); }
.cal3__day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    min-height: 52px;
    padding: 0.85rem 0 0.3rem;
    border: none;
    border-left: 1px solid var(--color-border);
    background: none;
    color: var(--color-text);
    font: inherit;
    cursor: default;
}
.cal3__day:first-child { border-left: none; }
.cal3__day.has-events { cursor: pointer; }
.cal3__day.is-past { color: var(--color-text-muted); }
.cal3__day.is-past .cal3__num { opacity: 0.6; }
.cal3__month { position: absolute; top: 2px; left: 0; right: 0; text-align: center; line-height: 1; font-size: 0.6rem; font-weight: 700; color: var(--color-text-secondary); }
.cal3__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; }
.cal3__day.is-today .cal3__num { box-shadow: inset 0 0 0 2px var(--tengri-sun); color: var(--color-primary); }
.cal3__day.is-selected { background: var(--color-surface-alt); }
.cal3__day.is-selected .cal3__num { background: var(--color-primary); color: var(--color-primary-contrast); box-shadow: none; }
.cal3__dots { display: flex; gap: 3px; height: 6px; }
.cal3__dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--tengri-sun); }
.cal3__dots i.is-trip { background: var(--tengri-sky); }
/* A day's first event picture fills the bottom of its cell; «+1» when there are more */
.cal3__day.has-picture { padding-bottom: 0; }
.cal3__pic {
    display: block;
    width: calc(100% - 6px);
    aspect-ratio: 3 / 2;
    margin-top: 1px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--color-surface-alt);
}
.cal3__more {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.5;
}
.cal3__day.is-past .cal3__pic { opacity: 0.55; }

/* The tapped day's events (a .center-dialog) */
.center-dialog.cal3-pop { padding: 0; }
.cal3-pop__body { padding: 1rem 1rem 0.25rem; }
.cal3-pop form { padding: 0 1rem 1rem; text-align: right; }
.cal3-pop__date { margin: 0 0 0.6rem; font-size: 0.85rem; font-weight: 700; color: var(--color-text-secondary); }
.cal3-pop__event {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.6rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--tengri-sun);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
}
.cal3-pop__event.is-trip { border-left-color: var(--tengri-sky); }
.cal3-pop__event img { flex: none; width: 96px; aspect-ratio: 3 / 2; border-radius: 4px; object-fit: cover; }
.cal3-pop__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; font-size: 0.85rem; line-height: 1.45; color: var(--color-text-secondary); }
.cal3-pop__text strong { font-size: 0.95rem; color: var(--color-text); }
.cal3-pop__more { color: var(--color-primary); font-weight: 600; }
.cal3__empty { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--color-text-secondary); }
@media (hover: hover) and (pointer: fine) {
    .cal3__day.has-events:hover { background: var(--color-surface-alt); }
    .cal3-pop__event:hover { border-color: var(--color-border-strong); }
}

/* Visa filter ⓘ: which 在留資格 each group stands for */
.visa-map { width: min(26rem, calc(100% - 2 * var(--gutter))); max-height: 80vh; overflow-y: auto; }
.visa-map__list { margin: 0.75rem 0; }
.visa-map__list dt { margin-top: 0.55rem; font-weight: 700; }
.visa-map__list dd { margin: 0.1rem 0 0; color: var(--color-text-secondary); }
.info-pop .visa-map__note { margin-top: 0.5rem; font-size: 0.82rem; color: var(--color-text-muted); }