/* app-layer.css - the installable-app layer of WSU Transparent (2026-10-09): pop-up shell shared by the Get-the-app and Share windows,
   the "new version" bar, the arrival banner, the phone top bar + drawer menu (<= 760 px only; desktop untouched), the info-row buttons.
   Colours follow the site tokens (beige page, white cards, gold accent, burgundy). Safe-area insets are applied ONCE, on the phone bar. */
.al-btn{ display:inline-block; padding:9px 18px; border:1px solid var(--line,#dcd8c9); border-radius:999px; background:var(--surface,#fff); color:var(--ink,#1b1c16); font:inherit; font-weight:700; cursor:pointer; text-decoration:none; text-align:center; }
.al-btn.gold{ background:linear-gradient(90deg,#b6862c,#d4a63f); color:#1b1c16; border-color:#8b6a1c; }
.al-btn[disabled]{ opacity:.55; cursor:wait; }

/* ---- pop-up shell (Get the app, Share) ---- */
.ap-backdrop{ position:fixed; inset:0; background:rgba(27,28,22,.55); z-index:120; display:flex; align-items:flex-start; justify-content:center; padding:30px 16px; overflow:auto; }
.ap-backdrop[hidden]{ display:none; }
.ap{ background:var(--bg,#f1f0e9); border:1px solid var(--line,#dcd8c9); border-radius:14px; width:min(100%, 720px); box-shadow:0 20px 50px rgba(27,28,22,.3); padding:18px 22px 22px; color:var(--ink,#1b1c16); font-family:'IBM Plex Sans',system-ui,sans-serif; }
.ap-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ap-head h2{ margin:0; font-family:Newsreader,Georgia,serif; font-size:24px; color:var(--up,#7a3b2e); } .ap-head .sub{ color:var(--ink-muted,#66645a); font-size:14px; margin-top:2px; }
.ap-btns{ display:flex; gap:8px; flex-shrink:0; }
.ap-close{ background:var(--surface,#fff); color:var(--ink,#1b1c16); border:1px solid var(--line,#dcd8c9); border-radius:999px; padding:7px 14px; cursor:pointer; font:inherit; font-weight:700; }
.ap-close:hover{ border-color:var(--guf,#b6862c); }
.al-err{ margin-top:12px; padding:9px 12px; border:1px solid var(--up,#7a3b2e); border-radius:8px; color:var(--up,#7a3b2e); font-weight:700; background:var(--surface,#fff); } .al-err[hidden]{ display:none; }
.al-priv{ font-size:12.5px; color:var(--ink-faint,#9c988a); margin:10px 0 0; line-height:1.45; }
.al-ok{ color:#3f6b4a; font-weight:700; }
.al-h{ margin:18px 0 8px; color:var(--up,#7a3b2e); font-size:15px; font-weight:800; }

/* ---- Get-the-app window ---- */
.ga-grid{ display:grid; grid-template-columns:204px 1fr; gap:22px; margin-top:14px; align-items:start; } .ga-grid.one{ grid-template-columns:1fr; }
.ga-qr{ background:#fff; color:#1b1c16; border:1px solid var(--line,#dcd8c9); border-radius:12px; padding:14px; text-align:center; } .ga-qr svg{ display:block; width:176px; height:176px; margin:0 auto; } .ga-qr p{ margin:8px 0 0; font-weight:700; font-size:13px; }
.ga-side{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.ga-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.in-steps{ margin:10px 0 6px; padding-left:22px; font-size:15.5px; line-height:1.55; } .in-steps li{ margin:0 0 8px; } .in-steps b{ color:var(--up,#7a3b2e); }

/* ---- Share window ---- */
.sh-prev{ margin:14px 0 0; background:var(--surface,#fff); border:1px solid var(--line,#dcd8c9); border-radius:10px; padding:8px; min-height:110px; display:flex; align-items:center; justify-content:center; color:var(--ink-faint,#9c988a); font-size:14px; }
.sh-prev img{ display:block; max-width:100%; max-height:min(44vh,360px); border-radius:6px; }
.sh-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; } .sh-grid.two{ grid-template-columns:1fr 1fr; }
.sh-chan::before{ content:''; display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--c); margin-right:9px; vertical-align:1px; box-shadow:0 0 0 1.5px rgba(27,28,22,.25); }

/* ---- info-row buttons added by the layer (Share, Get the app, Update the app) ---- */
.info-btns.al-row{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin:6px 0 4px; }
.info-btns.al-row .info-btn{ font:700 13px/1 'IBM Plex Sans',system-ui,sans-serif; padding:8px 14px; border-radius:999px; border:1px solid var(--line,#dcd8c9); background:var(--surface,#fff); color:var(--ink,#1b1c16); cursor:pointer; }
.info-btns.al-row .info-btn:hover{ border-color:var(--guf,#b6862c); }
.info-btn.al-share, .info-btn.al-getapp, .info-btn.al-update{ display:inline-flex; align-items:center; gap:6px; }
.info-btn.al-getapp[hidden], .info-btn.al-update[hidden]{ display:none; }
html.app-mode .al-getapp{ display:none !important; }

/* ---- "A new version is ready" bar ---- */
.upd-bar{ position:fixed; left:50%; transform:translateX(-50%); top:max(10px, env(safe-area-inset-top)); width:min(560px, calc(100% - 20px)); z-index:130; display:flex; align-items:center; gap:10px; padding:10px 8px 10px 14px; background:var(--surface,#fff); border:1.5px solid var(--guf,#b6862c); border-radius:14px; box-shadow:0 10px 30px rgba(27,28,22,.25); font-family:'IBM Plex Sans',system-ui,sans-serif; }
.upd-bar b{ display:block; font-size:15px; color:var(--ink,#1b1c16); } .upd-bar span{ display:block; font-size:12.5px; color:var(--ink-muted,#66645a); line-height:1.3; }
.upd-bar .al-btn{ flex:none; padding:9px 14px; font-size:14px; }
.in-no{ flex:none; padding:6px 10px; background:none; border:0; color:var(--ink-faint,#9c988a); font-size:20px; line-height:1; cursor:pointer; }
@media print{ .upd-bar, .in-banner, .m-bar, .m-drawer{ display:none !important; } }

/* ---- arrival banner on a phone that is not the installed app ---- */
.in-banner{ position:fixed; left:10px; right:10px; bottom:max(10px, env(safe-area-inset-bottom)); z-index:110; display:flex; align-items:center; gap:10px; padding:10px 8px 10px 12px; background:var(--surface,#fff); border:1.5px solid var(--guf,#b6862c); border-radius:14px; box-shadow:0 10px 30px rgba(27,28,22,.3); font-family:'IBM Plex Sans',system-ui,sans-serif; }
.in-banner img{ flex:none; width:44px; height:44px; border-radius:10px; }
.in-txt{ flex:1; min-width:0; font-size:12.5px; line-height:1.3; color:var(--ink-muted,#66645a); } .in-txt > b{ display:block; margin-bottom:1px; font-size:15px; color:var(--ink,#1b1c16); } .in-txt span b{ color:var(--ink,#1b1c16); }
.in-banner .al-btn{ flex:none; padding:9px 14px; font-size:14px; }

/* ---- phone top bar + drawer menu (hidden above 760 px) ---- */
.m-bar, .m-drawer{ display:none; }
@media (max-width:760px){
  .m-bar{ display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:100; margin:0; padding:max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); background:var(--bg,#f1f0e9); border-bottom:1px solid var(--line,#dcd8c9); box-shadow:0 8px 10px -8px rgba(27,28,22,.3); font-family:'IBM Plex Sans',system-ui,sans-serif; }
  .m-burger{ flex:none; display:flex; flex-direction:column; justify-content:center; gap:5px; width:46px; height:42px; padding:0 12px; background:var(--guf,#b6862c); border:1px solid #8b6a1c; border-radius:10px; cursor:pointer; }
  .m-burger span{ display:block; height:3px; border-radius:2px; background:#1b1c16; }
  .m-logo{ flex:none; display:block; } .m-logo img{ display:block; height:30px; width:auto; }
  .m-title{ flex:1; min-width:0; text-align:right; color:var(--up,#7a3b2e); font-weight:800; font-size:14px; line-height:1.15; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .m-drawer{ display:block; position:fixed; inset:0; z-index:125; visibility:hidden; pointer-events:none; font-family:'IBM Plex Sans',system-ui,sans-serif; }
  .m-drawer.open{ visibility:visible; pointer-events:auto; }
  .m-scrim{ position:absolute; inset:0; background:rgba(27,28,22,.55); opacity:0; transition:opacity .2s; } .m-drawer.open .m-scrim{ opacity:1; }
  .m-panel{ position:absolute; left:0; top:0; bottom:0; width:min(86vw,340px); display:flex; flex-direction:column; gap:2px; padding:max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background:var(--surface,#fff); border-right:1px solid var(--line,#dcd8c9); box-shadow:10px 0 30px rgba(27,28,22,.25); overflow-y:auto; transform:translateX(-102%); transition:transform .22s ease; }
  .m-drawer.open .m-panel{ transform:none; }
  .m-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .m-top img{ height:34px; width:auto; }
  .m-close{ background:transparent; color:var(--ink,#1b1c16); border:1px solid var(--line,#dcd8c9); border-radius:8px; padding:8px 12px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
  .m-sec{ margin:14px 4px 4px; color:var(--ink-faint,#9c988a); font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
  .m-link{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:46px; padding:9px 14px; background:transparent; color:var(--ink,#1b1c16); border:0; border-radius:10px; font:inherit; font-size:16px; font-weight:700; text-align:left; text-decoration:none; cursor:pointer; }
  .m-link:active, .m-link:hover{ background:color-mix(in srgb, var(--guf,#b6862c) 16%, transparent); }
  .m-link.active{ background:var(--guf,#b6862c); color:#1b1c16; }
  body.m-menu-open{ overflow:hidden; }
  /* pop-ups on a phone: the dialog starts below the clock, Close is pinned top-right so it is always reachable */
  .ap-backdrop{ padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)); }
  .ap-backdrop::before{ content:''; position:fixed; top:0; left:0; right:0; height:env(safe-area-inset-top); background:var(--bg,#f1f0e9); z-index:9; pointer-events:none; }
  .ap-backdrop .ap-close{ position:fixed; top:calc(8px + env(safe-area-inset-top)); right:12px; z-index:10; padding:8px 16px; background:var(--surface,#fff); border:1.5px solid var(--guf,#b6862c); font-size:14px; font-weight:800; box-shadow:0 4px 14px rgba(27,28,22,.3); }
  .ap-backdrop .ap-head{ padding-right:92px; }
  .ap{ padding:12px 12px 16px; } .ap-head h2{ font-size:20px; } .ap-head .sub{ font-size:13px; }
  .ga-grid{ grid-template-columns:1fr; } .sh-grid{ grid-template-columns:1fr 1fr; } .sh-grid.two{ grid-template-columns:1fr; }
  /* app feel: no grey tap flash, no double-tap zoom delay, no pull-to-refresh bounce */
  html{ -webkit-tap-highlight-color:transparent; overscroll-behavior-y:none; }
  .m-link, .al-btn, .in-banner{ -webkit-user-select:none; user-select:none; touch-action:manipulation; }
  /* the fixed "Top" pill sits under the sticky bar: move it below */
  .wsu-top{ top:calc(56px + env(safe-area-inset-top)) !important; }
  /* no sideways page scroll on phones (found 2026-10-09 at 375 px: the Key trends peers table was 439 px wide): tables in cards shrink and wrap, and the card scrolls inside itself as a last resort */
  .fd-card{ overflow-x:auto; }
  .fd-card .fd-table{ font-size:12px !important; width:100%; }
  .fd-card .fd-table th, .fd-card .fd-table td{ padding:5px 5px !important; white-space:normal; }
  .fd-card .fd-table th{ font-size:11px !important; }
}