/* ============================================================================
   AUREUS ONE™ — phones and tablets
   Loaded after aureus.css, so it has the last word on every screen size.

   ── Two breakpoints, and why

   1024px — where styles.css already turns the sidebar into an off-canvas
            drawer. Everything tablet-shaped keys off this.
     720px — a phone held in portrait. This is where the layout stops being a
            narrow desktop and becomes a different design: one column
            everywhere, tables reduced to their important columns, controls
            grown to a size a thumb can actually hit.

   ── The principles

   • Nothing is hidden without a way to get it back. Tables drop columns on a
     phone, and every dropped field is one tap away in the row's detail panel.
   • Touch targets are 44px. That is Apple's published minimum and roughly the
     pad of an adult finger; anything smaller is a game of chance.
   • Inputs are 16px on phones. Below 16px, mobile Safari and several Android
     browsers zoom the whole page when a field takes focus, and then leave you
     zoomed. This is not a taste decision.
   • Nothing horizontally scrolls except things that are meant to.
   ========================================================================== */

/* ════════════════════════════════════════════════════════════════════════════
   TABLET AND BELOW — 1024px
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── The drawer ────────────────────────────────────────────────────────────
     styles.css slides the sidebar in with a transform. What it never had was a
     way out: no backdrop, no close on navigation. You opened it, tapped a
     module, and the drawer stayed sitting over the page you had just asked
     for. The backdrop element is created by enhance.js. */
  /* Declared in full rather than leaning on the partial rule in styles.css.
     Three files now have an opinion about `.sidebar` and they load in an order
     that is easy to get wrong; spelling out every property that matters here
     means the drawer cannot be half-configured by a cascade accident. */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100dvh;
    width: min(310px, 86vw);
    max-width: 86vw;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.24s cubic-bezier(0.22, 0.9, 0.3, 1);
    box-shadow: none;
    will-change: transform;}
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 0 0 60px -10px rgb(0 0 0 / 55%);}

  /* Inside .shell, so it ranks against the sidebar rather than against the
     whole shell. See the comment on scrim() in enhance.js — putting this on
     <body> hid the menu behind its own backdrop. */
  #auScrim {
    position: fixed;
    inset: 0;
    z-index: 55;                 /* under .sidebar (60), over the content */
    background: rgb(3 5 9 / 55%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;}
  #auScrim.on { opacity: 1; pointer-events: auto;}

  /* The drawer is the only thing that scrolls while it is open. */
  body.au-drawer-open { overflow: hidden;}

  /* A grab handle, so it is obvious the panel can be pushed away.
     `inset: auto` first: styles.css sets `inset: 0` on this pseudo-element for
     its desktop glow, and leaving that in place over-constrains the box — the
     browser then drops `right` and the handle appears on the wrong edge. */
  .sidebar::after {
    content: '';
    display: block !important;
    position: absolute;
    inset: auto;
    right: 5px;
    top: calc(50% - 22px);
    width: 3px;
    height: 44px;
    border-radius: 3px;
    background: var(--line-2);
    opacity: 0.7;
    pointer-events: none;}

  /* ── Topbar ───────────────────────────────────────────────────────────────
     Five icon buttons, a title and a subtitle do not fit beside a hamburger.
     The subtitle goes, the title truncates, and the buttons that are duplicates
     of rows inside the palette menu are dropped rather than shrunk. */
  .topbar { padding: 10px 12px; gap: 10px;}
  .topbar h2 { font-size: 16px;}
  .topbar .sub { display: none;}
  .topbar #motionBtn,
  .topbar #themeBtn { display: none;}   /* both live in the 🎨 menu as well */

  .menu-btn {
    display: inline-flex !important;
    width: 44px; height: 44px;
    justify-content: center;
    padding: 0;
    font-size: 19px;}

  /* ── Layout ──────────────────────────────────────────────────────────────── */
  .content { padding: 14px 12px 64px;}
  .grid-2, .chart-grid, .donut-wrap { grid-template-columns: 1fr !important;}
  .kpi.wide { grid-column: span 1;}

  /* Charts need a floor or they collapse to a sliver in a one-column grid. */
  .chart-box { min-height: 240px;}

  /* ── Modals ───────────────────────────────────────────────────────────────
     A centred 600px dialog on a 390px screen is a scrolling box inside a
     scrolling page. Full height, with the footer pinned where a thumb is. */
  .modal, .modal-card, .dlg {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
    height: 100dvh;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;}
  .modal-body { flex: 1 1 auto; overflow-y: auto;}
  .modal-foot {
    position: sticky;
    bottom: 0;
    background: var(--panel);
    border-top: 1px solid var(--line);
    padding-bottom: max(12px, env(safe-area-inset-bottom));}
  .modal-foot .btn { flex: 1 1 auto; justify-content: center; min-height: 44px;}
}

/* ════════════════════════════════════════════════════════════════════════════
   PHONE — 720px
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* ── Notch and home indicator ─────────────────────────────────────────────
     Requires viewport-fit=cover on the viewport meta, which index.html sets. */
  .topbar { padding-top: max(10px, env(safe-area-inset-top));}
  .content {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: calc(70px + env(safe-area-inset-bottom));}
  .sidebar { padding-top: env(safe-area-inset-top);}

  /* ── Type ─────────────────────────────────────────────────────────────────
     16px on every field. Under 16px, mobile browsers zoom the page when the
     field takes focus and do not zoom back out — the single most common reason
     a working desktop form feels broken on a phone. */
  .input,
  select.input,
  textarea.input,
  input, select, textarea,
  .uf-in, .uf-search input, .au-sb-find input {
    font-size: 16px !important;
    min-height: 44px;}
  textarea.input { min-height: 90px;}
  label.lbl { font-size: 13px;}

  /* ── Forms ───────────────────────────────────────────────────────────────── */
  .form-grid,
  .map-grid { grid-template-columns: 1fr !important;}
  .form-grid > .full { grid-column: 1 / -1;}
  .map-grid .arrow { display: none;}

  /* ── Touch targets ───────────────────────────────────────────────────────── */
  .btn { min-height: 44px; padding: 10px 16px;}
  .btn.sm { min-height: 38px; padding: 8px 13px; font-size: 12.5px;}
  .icon-btn { min-width: 38px; min-height: 38px;}
  .icon-btn:hover { transform: none;}   /* no hover state on a touch screen */
  .tab { min-height: 40px;}
  .sb-item { padding: 11px 10px;}       /* the nav is the most-tapped list */

  /* ── KPI cards ────────────────────────────────────────────────────────────
     Two across. One is a wasteful amount of scrolling for eight figures;
     three is unreadable. */
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px;}
  .kpi { padding: 12px 11px;}
  .kpi-val { font-size: 19px;}
  .kpi-lbl { font-size: 10px;}
  .kpi-sub, .kpi-basis { font-size: 10px;}
  .kpi[data-link]:not([data-link=''])::after { display: none;}  /* no hover arrow */

  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}

  /* The hero wordmark is decoration, and decoration is what a small screen has
     least room for. */
  .hero { padding: 16px 14px;}
  .hero-name { font-size: 26px;}
  .hero-tag { font-size: 11px;}
  .hero-meta { gap: 12px;}

  /* ── Cards and toolbars ──────────────────────────────────────────────────── */
  .card-head { padding: 11px 12px;}
  .card-pad { padding: 12px;}
  .toolbar { padding: 10px 12px;}
  .toolbar .search { max-width: none; flex: 1 1 100%;}
  .toolbar .btn { flex: 0 0 auto;}

  /* ── The universal filter bar ────────────────────────────────────────────── */
  .uf-bar { gap: 6px;}
  .uf-search { flex: 1 1 100%; max-width: none;}
  .uf-bar .spacer { display: none;}
  .uf-pills { flex: 1 1 100%;}

  /* ══════════════════════════════════════════════════════════════════════════
     TABLES — priority columns
     ══════════════════════════════════════════════════════════════════════════
     A fourteen-column holdings table cannot be shown on a 390px screen, and the
     three usual answers are all bad on their own: sideways scrolling is
     unpleasant, stacking every row into a card makes comparison impossible, and
     simply hiding columns loses data.

     So: the identity column and the two or three that carry the answer stay
     visible, everything else is folded away, and each row gets a chevron that
     opens a labelled panel with every hidden field. Nothing is lost and nothing
     scrolls sideways. enhance.js decides which columns matter and marks the
     cells; these are the styles for the result. */

  .tbl.m-prio th.m-hide,
  .tbl.m-prio td.m-hide { display: none !important;}

  .tbl.m-prio { font-size: 13px;}
  .tbl.m-prio th, .tbl.m-prio td { padding: 10px 8px;}
  .tbl.m-prio thead th { font-size: 10px; letter-spacing: 0.03em;}

  /* The expander column. */
  .tbl th.m-exp, .tbl td.m-exp { width: 40px; padding: 0 !important; text-align: center;}
  .m-exp-btn {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 0; background: none; padding: 0;
    color: var(--muted);
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.18s ease, color 0.18s ease;}
  .m-exp-btn:hover, .m-exp-btn:focus-visible { color: var(--brand-1);}
  tr.m-open .m-exp-btn { transform: rotate(180deg); color: var(--brand-1);}

  /* The detail panel. */
  tr.m-detail > td {
    padding: 0 !important;
    background: color-mix(in srgb, var(--brand-1) 7%, var(--card)) !important;
    border-bottom: 2px solid var(--brand-line);}
  .m-detail-grid {
    display: grid;
    grid-template-columns: minmax(96px, 38%) 1fr;
    gap: 1px;
    padding: 4px 0;}
  .m-detail-grid dt,
  .m-detail-grid dd {
    margin: 0;
    padding: 7px 12px;
    font-size: 12.5px;
    min-width: 0;
    overflow-wrap: anywhere;}
  .m-detail-grid dt {
    color: var(--muted);
    font-weight: 650;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: center;}
  .m-detail-grid dd { color: var(--fg); font-variant-numeric: tabular-nums;}
  .m-detail-grid > dt:nth-of-type(even),
  .m-detail-grid > dd:nth-of-type(even) { background: color-mix(in srgb, var(--fg) 3%, transparent);}

  /* Row actions are the one thing that must never be folded away. */
  .row-actions { gap: 2px;}
  .row-actions .icon-btn { min-width: 34px; min-height: 34px;}

  /* Give the table its own height rather than a 70vh box inside a scrolling
     page — two nested scroll areas on a phone is a trap. */
  .tbl-wrap { max-height: none !important; overflow: visible;}
  .tbl thead th { position: sticky; top: 56px;}   /* clears the sticky topbar */

  /* Totals rows are wide and rarely the point on a phone. */
  .tbl tfoot td.m-hide { display: none !important;}

  /* ── Pager ───────────────────────────────────────────────────────────────── */
  .pager { flex-wrap: wrap; gap: 8px; padding: 12px;}
  .pager > span:first-child { flex: 1 1 100%; text-align: center;}
  .pager .btn { flex: 1 1 auto; justify-content: center;}

  /* ── Selection bar ───────────────────────────────────────────────────────── */
  .sel-bar { flex-wrap: wrap; gap: 8px;}
  .sel-bar .btn { flex: 1 1 auto; justify-content: center;}

  /* ── Command palette ─────────────────────────────────────────────────────── */
  .pal { width: 100%; max-width: 100%; border-radius: 14px;}
  .pal-in input { font-size: 16px;}
  .pal-row { padding: 12px 11px;}
  .pal-foot { display: none;}   /* keyboard hints on a device with no keyboard */

  /* ── Bell and palette menus ──────────────────────────────────────────────── */
  .bell-panel, .palette-menu {
    position: fixed !important;
    left: 8px !important; right: 8px !important;
    top: 60px !important;
    width: auto !important;
    max-height: 70dvh;
    overflow-y: auto;}

  /* ── Diagnostics ─────────────────────────────────────────────────────────── */
  #auDiag { padding: 0;}
  .au-diag-box { border-radius: 0; max-height: 100dvh; height: 100dvh;}

  /* ── Legend ──────────────────────────────────────────────────────────────── */
  .au-legend { flex-wrap: wrap; gap: 8px; font-size: 10px;}

  /* The build stamp is the touch route into the diagnostics report — three
     taps. Give it a target worth aiming at. */
  .sb-build { padding: 12px 8px; text-align: center; cursor: pointer;}
}

/* ── Very narrow — 380px and under ───────────────────────────────────────── */
@media (max-width: 380px) {
  .kpi-grid, .stat-strip { grid-template-columns: 1fr !important;}
  .topbar h2 { font-size: 15px;}
  .content { padding-left: 9px; padding-right: 9px;}
}

/* ── Landscape phone ─────────────────────────────────────────────────────────
   Almost no vertical room. Give the height back to the content. */
@media (max-height: 460px) and (orientation: landscape) {
  .hero, .au-legend { display: none;}
  .topbar { padding-top: 6px; padding-bottom: 6px;}
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important;}
}

/* ── Touch devices of any size ───────────────────────────────────────────────
   Hover states on a touch screen fire on tap and then stick until you tap
   something else, which reads as a bug. */
@media (hover: none) {
  .btn:hover, .card:hover, .kpi:hover, .chip:hover, .icon-btn:hover,
  .sb-item:hover, .uf-btn:hover {
    transform: none !important;}
  .btn:not(.ghost):hover::after { opacity: 0;}
  table.tbl tbody tr:hover td { background: revert;}

  /* Momentum scrolling on the containers that keep their own scroll. */
  .tbl-wrap, .sb-nav, .modal-body, .bell-panel { -webkit-overflow-scrolling: touch;}
}

/* ── Print ───────────────────────────────────────────────────────────────────
   Someone will print a holdings table. Give them all the columns back. */
@media print {
  .sidebar, .topbar, .uf-bar, .pager, .sel-bar, .toolbar, #auScrim,
  .au-legend, .row-actions, .m-exp, .m-exp-btn { display: none !important;}
  .shell { grid-template-columns: 1fr;}
  .content { padding: 0;}
  .card { break-inside: avoid; box-shadow: none; border-color: #ccc;}
  .tbl.m-prio th.m-hide, .tbl.m-prio td.m-hide { display: table-cell !important;}
  .main { background: none !important;}
}