/* 2026-10 refresh: phone-first layout fixes and motion, layered after theme.css.
   Everything here is additive; removing this file restores the previous look. */

/* Headings break evenly instead of leaving a lone character on the last line. */
h1,h2,h3{text-wrap:balance}
.detail-block,.notice-letter-body p,.desc{text-wrap:pretty}
a,button,summary,select,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* Branded splash while the first API call resolves. */
.boot{display:grid;place-items:center;min-height:100dvh;background:var(--bg)}
.boot-card{display:grid;justify-items:center;gap:14px;color:var(--muted);font-size:14px;letter-spacing:1px}
.boot-card img{width:72px;height:72px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px #fff,0 0 0 7px #d4b57d66,0 12px 32px #17352b1f;animation:boot-breathe 1.8s ease-in-out infinite}
.boot-card strong{color:var(--ink);font-size:17px;letter-spacing:2px}
.boot-line{width:120px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--green),transparent) 0 0/60% 100% no-repeat,#e6e3dd;animation:boot-slide 1.2s ease-in-out infinite}
@keyframes boot-breathe{50%{transform:scale(1.04)}}
@keyframes boot-slide{from{background-position:-80% 0,0 0}to{background-position:180% 0,0 0}}

/* List filters: always-visible search, the rest behind a toggle on phones. */
.filter-toggle{display:none}
.filter-fields{display:contents}
.filter-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--green);color:#fff;font-size:11px;font-weight:700;line-height:1}
.filter-count:empty{display:none}
@media(max-width:700px){
  .toolbar{gap:8px;padding:12px}
  .toolbar .input-wrap{flex:1 1 0;min-width:0}
  .toolbar .filter-toggle{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:0 14px}
  .toolbar .filter-toggle[aria-expanded=true]{background:var(--ui-soft);border-color:var(--green);color:var(--green)}
  .toolbar:not(.filters-open) .filter-fields{display:none}
  .toolbar.filters-open .filter-fields{display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%;animation:filters-in .2s ease-out}
  @keyframes filters-in{from{opacity:0;transform:translateY(-4px)}}
}

/* Personal centre shortcuts: button row on desktop, even icon grid on phones. */
.me-grid{display:flex;flex-wrap:wrap;gap:10px}
.me-tile{position:relative}
.me-tile .dm-badge{margin-left:4px}
@media(max-width:700px){
  .heading-actions:has(.me-grid){width:100%}
  .me-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
  .me-grid .me-tile{flex-direction:column;justify-content:center;gap:7px;min-height:78px;padding:12px 2px 10px;border-radius:14px;font-size:13px;font-weight:600;white-space:nowrap;background:#fff;box-shadow:var(--surface-shadow)}
  .me-grid .me-tile.primary{background:var(--green);color:#fff}
  .me-grid .me-tile svg{width:22px;height:22px;margin:0}
  .me-grid .me-tile .dm-badge{position:absolute;top:6px;right:8px;margin:0}
  .me-grid [data-action=logout]{color:var(--muted)}
}
@media(max-width:340px){.me-grid .me-tile{font-size:12px}}

/* Dialogs ease in and out where the browser supports discrete transitions. */
@media(prefers-reduced-motion:no-preference){
  #modal{transition:opacity .2s ease,transform .26s cubic-bezier(.2,.8,.2,1),overlay .26s allow-discrete,display .26s allow-discrete}
  #modal:not([open]){opacity:0;transform:translateY(14px) scale(.985)}
  #modal::backdrop{transition:opacity .26s ease,overlay .26s allow-discrete,display .26s allow-discrete}
  #modal:not([open])::backdrop{opacity:0}
  @starting-style{
    #modal[open]{opacity:0;transform:translateY(14px) scale(.985)}
    #modal[open]::backdrop{opacity:0}
  }
}

/* Section changes cross-fade (document.startViewTransition in route());
   the chrome around the page keeps still. */
.sidebar{view-transition-name:sidebar}
.topbar{view-transition-name:topbar}
.bottom-nav{view-transition-name:bottom-nav}
::view-transition-old(root){animation:vt-out .14s ease-in both}
::view-transition-new(root){animation:vt-in .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}

@media(prefers-reduced-motion:reduce){
  .boot-card img,.boot-line{animation:none}
}