/* ============ Admin — app shell: header, bottom navigation, safe areas, touch sizes ============
   Loaded after admin.css on admin.html only. Containing-block rule: nothing here (or anywhere) may put
   transform, filter, backdrop-filter, perspective, contain or will-change on #app, .admin, #view or
   .a-wrap — they would become the containing block of the fixed bottom navigation and carry it along. */

/* ---------- page ---------- */
html{scrollbar-gutter:stable}
body.modal-open{overflow:hidden}
.admin-page .login-wrap{min-height:100vh;min-height:100dvh}
.admin-page .a-wrap:focus{outline:none}
@media (display-mode: standalone){
  .admin-page .back-link{display:none}
}

/* ---------- header: safe areas, and a soft edge once the page scrolls (main.js, #topSentinel) ---------- */
.admin-page .abar{padding-top:calc(10px + var(--safe-t));padding-left:max(16px, calc((100% - 1040px) / 2), var(--safe-l));
  padding-right:max(16px, calc((100% - 1040px) / 2), var(--safe-r));border-bottom-color:transparent;transition:border-color var(--dur-med) var(--ease-out)}
body.has-top-notice .abar{padding-top:10px}
.admin-page .abar::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;pointer-events:none;opacity:0;
  background:linear-gradient(rgba(31,26,22,.10),rgba(31,26,22,0));transition:opacity var(--dur-med) var(--ease-out)}
.admin-page .abar.is-scrolled{border-bottom-color:var(--line)}
.admin-page .abar.is-scrolled::after{opacity:1}
.admin-page #appTitle{transform-origin:left center;transition:transform var(--dur-med) var(--ease-out)}
.admin-page .abar.is-scrolled #appTitle{transform:scale(.94)}

/* ---------- save chip (assets/admin/save-status.js) ---------- */
.admin-page .save-state{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink-soft);font-size:12px;font-weight:600;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.admin-page .save-state[hidden]{display:none}
.admin-page .save-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:currentColor}
.admin-page .save-state[data-state=saved]{color:var(--ok)}
.admin-page .save-state[data-state=saved] .save-dot{width:13px;height:13px;border-radius:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat}
.admin-page .save-state[data-state=offline]{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)}
.admin-page .save-state[data-state=error]{color:var(--danger);background:var(--danger-soft);border-color:var(--danger-line)}

/* ---------- toast: centred, never wider than the screen, above the home indicator ---------- */
.admin-page .toast{left:0;right:0;margin-inline:auto;width:max-content;max-width:min(420px, calc(100% - 32px));bottom:calc(24px + var(--safe-b));
  display:flex;align-items:center;gap:10px;text-align:left;line-height:1.4;transform:translateY(16px) scale(.96);
  transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-spring)}
.admin-page .toast.show{transform:none}
.admin-page .toast.error{background:var(--danger)}
.admin-page .toast::before{content:"";flex:0 0 auto;width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--toast-icon) center/contain no-repeat;mask:var(--toast-icon) center/contain no-repeat}
.admin-page .toast:not(.ok):not(.error)::before{display:none}
.admin-page .toast.ok{--toast-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E")}
.admin-page .toast.error{--toast-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E")}

/* ---------- loading skeletons and the retry card (UI.skeleton, UI.errorState) ---------- */
.admin-page .skel{position:relative;overflow:hidden;border-radius:12px;background:var(--bg-soft)}
.admin-page .skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}
.admin-page .skel-plan{height:44px;margin-bottom:12px}
.admin-page .skel-branch{padding:14px}
.admin-page .skel-picker{height:52px}
.admin-page .skel-tabs{display:flex;gap:4px;height:46px;margin:4px 0 16px;padding:4px;border-radius:12px;background:var(--bg-soft)}
.admin-page .skel-tabs i{flex:1 1 0;border-radius:9px}
.admin-page .skel-tabs i:first-child{background:var(--paper)}
.admin-page .skel-cards{display:flex;flex-direction:column;gap:12px}
.admin-page .skel-card{height:96px;border-radius:14px}
.admin-page .skel-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.admin-page .skel-tile{height:78px}
.admin-page .skel-title{height:20px;width:40%;margin-bottom:6px}
.admin-page .skel-row{height:64px;margin-top:10px}
.admin-page .error-state{display:flex;flex-direction:column;align-items:center;gap:14px;padding:36px 20px;text-align:center}
.admin-page .error-state p{color:var(--ink-soft);font-size:14px}

/* ---------- login button while signing in ---------- */
.admin-page .btn.is-loading[disabled]{opacity:.85;cursor:progress}

/* ---------- tabs stay at hand: sticky under the header on wide screens ---------- */
@media(min-width:641px){
  .admin-page .tabs{position:sticky;top:calc(var(--abar-h) + var(--safe-t));z-index:var(--z-nav);box-shadow:0 0 0 4px var(--bg)}
  body.has-top-notice .tabs{top:calc(var(--abar-h) + var(--notice-h))}
  .admin-page #tabPanel{scroll-margin-top:calc(var(--abar-h) + var(--safe-t) + 66px)}
}

/* ---------- phones: a native app — bottom navigation, safe areas, 44px targets, no input zoom ---------- */
@media(max-width:640px){
  .admin-page .abar{padding:calc(8px + var(--safe-t)) max(12px, var(--safe-r)) 8px max(12px, var(--safe-l))}
  body.has-top-notice .abar{padding-top:8px}
  .admin-page .a-wrap{padding-inline:max(10px, var(--safe-l)) max(10px, var(--safe-r));padding-bottom:calc(88px + var(--safe-b))}
  body.has-nav .a-wrap{padding-bottom:calc(var(--nav-h) + 24px + var(--safe-b))}
  .admin-page #tabPanel{scroll-margin-top:calc(64px + var(--safe-t))}

  /* The tablist itself becomes the bottom bar: same roles, roving tabindex and arrow keys. Solid, no blur. */
  .admin-page .tabs,.admin-page .skel-tabs{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);height:auto;margin:0;gap:0;
    padding:6px max(8px, var(--safe-l)) calc(6px + var(--safe-b)) max(8px, var(--safe-r));
    background:var(--paper);border-top:1px solid var(--line);border-radius:0;box-shadow:0 -8px 24px -18px rgba(31,26,22,.4);
    transition:transform var(--dur-med) var(--ease-out)}
  .admin-page .skel-tabs i{height:52px;background:none}
  .admin-page .skel-tabs i:first-child{background:var(--primary-soft);border-radius:14px}
  .admin-page [role=tab]{height:52px;border-radius:14px}
  .admin-page [role=tab][aria-selected=true]{color:var(--primary)}
  .admin-page .tab-ink{left:max(8px, var(--safe-l));top:6px;bottom:calc(6px + var(--safe-b));background:none;box-shadow:none;
    width:calc((100% - max(8px, var(--safe-l)) - max(8px, var(--safe-r))) / var(--tab-count));transform:translateX(calc(var(--tab-index) * 100%))}
  .admin-page .tab-ink::before{content:"";position:absolute;inset:0 6px;border-radius:14px;background:var(--primary-soft)}
  body.kb-open .tabs{transform:translateY(110%)}
  body.has-nav .toast{bottom:calc(var(--nav-h) + 12px + var(--safe-b))}

  /* The save chip shrinks to its dot; the text is still read out by its live region. */
  .admin-page .save-state{width:34px;padding:0;justify-content:center}
  .admin-page .save-state .save-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* Touch targets of at least 44px */
  .admin-page .a-wrap .btn,.admin-page .a-wrap .btn.sm,.admin-page .modal .btn{min-height:44px}
  .admin-page .abar .btn.sm{width:44px;height:44px}
  .admin-page .seg button,.admin-page .chip-opt,.admin-page .picker-option,.admin-page .check{min-height:44px}
  .admin-page .icon-btn,.admin-page .btn.icon-btn,.admin-page .btn.sm.icon-btn,.admin-page .story-delete{width:44px;height:44px}
  .admin-page .tenant-actions .btn.sm{height:44px}
  /* A category header holds three 44px buttons: tighter spacing leaves its name room to read. */
  .admin-page .cat-block > .ch{gap:4px;padding-right:6px}
  .admin-page .cat-block > .ch .cimg{width:40px;height:40px}
  .admin-page .login-card .btn{min-height:44px}
  .admin-page .tenant-actions .btn.sm:not(.primary){width:44px}

  /* 16px text in every field, or iOS zooms the page on focus */
  body.admin-page :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select){font-size:16px}

  /* Dialogs are sheets with a grab handle, clear of the notch */
  .admin-page .modal-bg{padding-top:calc(10px + var(--safe-t))}
  .admin-page .modal::before{content:"";display:block;width:36px;height:4px;margin:-6px auto 12px;border-radius:2px;background:var(--line-strong)}
  .admin-page .skel-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The header watches this 1px line at the top of the page (assets/admin/shell.js). */
.admin-page #topSentinel{height:1px;margin-bottom:-1px}