/* ═══════════════════════════════════════════════════════════════════════════
   كراده 52 — responsive layer

   HAND-MAINTAINED. Loaded last so it can override the inline styles the canvas
   writes onto elements. `!important` appears throughout for exactly that reason:
   an inline style outranks any stylesheet rule without it.

   Hooks (`.js-tabstrip`, `.js-navrow`) are added at build time by
   tools/extract-from-canvas.py, which fails loudly if the canvas markup changes
   out from under them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The hamburger and backdrop exist at every width; the desktop simply hides
   them, so no markup has to be added or removed as the viewport changes. */
.js-navtoggle,
.js-navveil {
  display: none;
}

/* ── phones and small tablets ────────────────────────────────────────────── */
@media (max-width: 720px) {

  /* The header is frosted glass — and `backdrop-filter` makes an element a
     containing block for every `position: fixed` descendant. The drawer lives
     inside the header, so with the filter in place it anchors to the header
     instead of the viewport and appears as a strip across the top of the app
     rather than a full-height panel.

     Dropping the filter at this width is what makes the drawer possible. The
     canvas's header background is deliberately translucent (88%) to be read
     through that blur, so it is made opaque here too — without the blur behind
     it, content would otherwise show through as it scrolled underneath. */
  header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg) !important;
  }

  .js-navtoggle {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin-inline-end: 10px;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-control);
    background: var(--panel);
    color: var(--ink-2);
  }

  .js-navtoggle > svg {
    width: 20px;
    height: 20px;
  }

  /* The strip stops being a strip. It leaves the header's flow entirely and
     becomes a panel pinned to the inline-start edge — which is the right-hand
     side under RTL, where this app runs by default. Logical properties keep
     that correct in both directions rather than hard-coding a side. */
  .js-tabstrip {
    position: fixed !important;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 70;

    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;

    width: min(78vw, 264px);
    padding: 18px 12px calc(18px + env(safe-area-inset-bottom));
    background: var(--panel);
    border-inline-end: 1px solid var(--rule);
    box-shadow: var(--shadow-modal);

    /* Translating away rather than `display:none` keeps the drawer animatable
       and leaves its buttons in the document, so the runtime can carry on
       updating them while it is shut. */
    transform: translateX(var(--nav-hidden, -102%));
    transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
    visibility: hidden;
  }

  /* Under RTL the panel sits on the right, so it has to leave to the right. */
  [dir="rtl"] .js-tabstrip,
  html[dir="rtl"] .js-tabstrip {
    --nav-hidden: 102%;
  }

  [data-nav-open] .js-tabstrip {
    transform: translateX(0);
    visibility: visible;
  }

  /* Full-width rows, and the active marker moves from the underline the desktop
     uses to a bar down the leading edge — an underline reads as an underline
     only when items sit side by side. */
  .js-tabstrip > button {
    width: 100%;
    text-align: start;
    padding: 13px 14px !important;
    border-bottom: 0 !important;
    border-radius: var(--r-control);
    font-size: 15px !important;
    margin-bottom: 0 !important;
  }

  .js-navveil {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--bg-2) 68%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
  }

  [data-nav-open] .js-navveil {
    opacity: 1;
    pointer-events: auto;
  }

  /* The row keeps the toggle, the period picker and the balance. With the tabs
     gone it no longer needs to align to a strip's baseline. */
  .js-navrow {
    align-items: center !important;
    gap: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Tighten the shell so the ledger keeps as much width as possible. */
  header > div {
    padding-inline: 14px !important;
  }

  /* The brand title and its subtitle are both `white-space: nowrap`, and the
     block they sit in has `min-width: 0`, so at this width they do not wrap —
     they overflow. That pushes the whole header row wider than the viewport and
     carries the hamburger, which is the row's first child and therefore its
     rightmost under RTL, off the edge entirely.

     The subtitle goes (the period picker beside it already names the month) and
     the title truncates rather than spilling. */
  header h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 34vw;
  }

  header h1 + div {
    display: none !important;
  }

  /* Belt and braces: nothing in this app should ever scroll sideways, and a
     stray overflow here shifts the entire fixed header out of alignment. */
  html,
  body {
    overflow-x: hidden;
  }

  main {
    padding: 16px 14px 0 !important;
  }
}

/* ── narrow phones ───────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  /* The day rail and the editor stack rather than compete for width. */
  main aside {
    flex-basis: 100% !important;
  }
}