*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nav-locked{ overflow:hidden; }
html[lang="am"] body, [data-am-active] { font-family:var(--font-am); }
img{ max-width:100%; display:block; }
a{ color:var(--blue-600); text-decoration:none; }
a:hover{ color:var(--blue-700); text-decoration:underline; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-serif); font-weight:600; color:var(--ink); }
[lang="am"] h1,[lang="am"] h2,[lang="am"] h3,[lang="am"] h4,
html[data-lang="am"] h1, html[data-lang="am"] h2, html[data-lang="am"] h3, html[data-lang="am"] h4{
  font-family:var(--font-am); font-weight:700;
}
p{ margin:0 0 var(--sp-3); color:var(--ink-soft); }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }
input,select,textarea,button{ font-family:inherit; max-width:100%; }
:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--r-sm); }

/* ---------- App shell (mobile first: drawer sidebar + stacked main) ---------- */
.app{ display:block; min-height:100vh; }
.sidebar{
  background:var(--blue-900);
  color:var(--on-primary-soft);
  padding:var(--sp-4) 0 var(--sp-6);
  position:fixed; left:0; top:0; bottom:0;
  width:min(var(--sidebar-w), 86vw); height:100dvh;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateX(-105%);
  transition:transform .22s ease;
  z-index:60;
  display:flex; flex-direction:column;
}
.app.nav-open .sidebar{ transform:translateX(0); box-shadow:var(--shadow-pop); }
/* tap-away backdrop while the drawer is open */
.app.nav-open::after{
  content:""; position:fixed; inset:0; background:rgba(11,46,91,.45); z-index:55;
}

.brand{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:0 var(--sp-5) var(--sp-4);
  border-bottom:1px solid rgba(255,255,255,.16);
  margin-bottom:var(--sp-3);
}
.brand-mark{
  width:38px; height:38px; border-radius:var(--r-md);
  background:linear-gradient(155deg,var(--blue-500),var(--blue-300));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-weight:700; color:var(--blue-900); font-size:17px;
  flex:none; overflow:hidden;
}
.brand-text{ line-height:1.25; min-width:0; }
.brand-text strong{ display:block; font-family:var(--font-serif); font-size:15.5px; letter-spacing:.2px; color:#fff; overflow-wrap:anywhere; }
.brand-text span{ display:block; font-size:11.5px; color:var(--on-primary-faint); }

.nav-group{ padding:0 var(--sp-3); margin-bottom:var(--sp-2); }
a.brand{ color:inherit; text-decoration:none; cursor:pointer; display:flex; }
.nav-group-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  width:100%; min-height:40px; background:none; border:0; cursor:pointer; text-align:left;
  color:var(--on-primary-faint); font-family:inherit; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:var(--sp-3) var(--sp-3) var(--sp-1);
  border-radius:var(--r-md);
}
.nav-group-head:hover{ color:#fff; background:rgba(255,255,255,.06); }
.nav-group-head .caret{ width:12px; height:12px; flex:none; opacity:.85; transition:transform .22s ease; }
.nav-group.open > .nav-group-head .caret{ transform:rotate(180deg); }
.nav-group.open > .nav-group-head{ color:var(--on-primary-soft); }
.nav-items{ overflow:hidden; max-height:0; transition:max-height .26s ease; }
.nav-group.open > .nav-items{ max-height:520px; }
.nav-link{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:11px var(--sp-3); margin:2px 0; border-radius:var(--r-md);
  color:var(--on-primary-soft); font-size:14px; position:relative;
  min-height:42px;
}
.nav-link:hover{ background:rgba(255,255,255,.10); color:#fff; text-decoration:none; }
.nav-link.active{ background:var(--blue-600); color:#fff; font-weight:600; }
.nav-link.active::before{
  content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px;
  border-radius:3px; background:var(--blue-300);
}
.nav-link .ic{ width:18px; height:18px; flex:none; opacity:.92; }
.nav-sub{ padding-left:30px; }
.nav-sub .nav-link{ font-size:13.3px; padding:9px var(--sp-3); }

.main{ display:flex; flex-direction:column; min-width:0; width:100%; }
.topbar{
  height:var(--topbar-h); background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--sp-3); position:sticky; top:0; z-index:40; gap:var(--sp-2);
  box-shadow:var(--shadow-sm);
}
.topbar-left{ display:flex; align-items:center; gap:var(--sp-2); min-width:0; flex:1; }
.page-title{ font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crumb{ font-size:12.5px; color:var(--ink-faint); }
.topbar-right{ display:flex; align-items:center; gap:var(--sp-2); flex:none; }

.content{ padding:var(--sp-4) var(--sp-3) var(--sp-6); flex:1; min-width:0; }
.content-header{ margin-bottom:var(--sp-4); }
.content-header h1{ font-size:20px; margin-bottom:var(--sp-1); }
.content-header p{ margin:0; font-size:13px; }

/* ---------- Topbar controls ---------- */
.pill-btn{
  display:flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line-strong); background:var(--surface-raised);
  color:var(--ink-soft); font-size:12.5px; font-weight:600;
  padding:7px 11px; border-radius:20px; cursor:pointer;
  white-space:nowrap; min-height:36px;
}
.pill-btn:hover{ border-color:var(--blue-500); color:var(--blue-700); }
.pill-btn .ic{ width:14px; height:14px; }
[data-nav-burger]{ font-size:18px; line-height:1; padding:7px 10px; min-width:40px; min-height:40px; }
.search-box{
  display:none; align-items:center; gap:8px;
  border:1px solid var(--line); background:var(--surface-raised);
  border-radius:20px; padding:7px 12px; width:230px; max-width:40vw;
}
.search-box input{
  border:none; background:transparent; outline:none; color:var(--ink); font-size:13px; width:100%; min-width:0;
}
.search-box .ic{ width:15px; height:15px; color:var(--ink-faint); flex:none; }
.date-badge{ display:none; }

/* ---------- Tablet (>= 640px) ---------- */
@media (min-width: 640px){
  .content{ padding:var(--sp-5) var(--sp-4) var(--sp-6); }
  .content-header h1{ font-size:22px; }
  .page-title{ font-size:17px; }
  .date-badge{ display:flex; }
}

/* ---------- Laptop / desktop (>= 1024px): permanent sidebar ---------- */
@media (min-width: 1024px){
  .app{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; }
  .sidebar{
    position:sticky; top:0; height:100vh; width:auto;
    transform:none; padding:var(--sp-5) 0;
  }
  .app.nav-open .sidebar{ box-shadow:none; }
  .app.nav-open::after{ display:none; }
  [data-nav-burger]{ display:none; }
  .search-box{ display:flex; }
  .topbar{ padding:0 var(--sp-5); gap:var(--sp-4); }
  .topbar-left{ gap:var(--sp-3); }
  .page-title{ font-size:18px; }
  .content{ padding:var(--sp-6) var(--sp-5) var(--sp-7); }
  .content-header{ margin-bottom:var(--sp-5); }
  .content-header h1{ font-size:24px; }
  .content-header p{ font-size:13.5px; }
  .nav-link{ min-height:0; padding:9px var(--sp-3); }
}

/* ---------- Credit footer (sidebar bottom + sign-in page) ---------- */
@keyframes ab-credit-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.credit-link{
  color:#f97316; font-weight:600; text-decoration:none;
  animation:ab-credit-pulse 2.4s ease-in-out infinite;
}
.credit-link:hover, .credit-link:focus-visible{ text-decoration:underline; animation-play-state:paused; opacity:1; }
.sidebar-footer{
  margin-top:auto; padding:var(--sp-4) var(--sp-4) 0;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:11.5px; line-height:1.7; text-align:center;
  color:var(--on-primary-faint);
}
.page-footer{
  margin-top:var(--sp-5); font-size:12px; line-height:1.7;
  text-align:center; color:var(--ink-faint);
}
@media (prefers-reduced-motion: reduce){
  .credit-link{ animation:none; }
}