/* Mobile overrides — loaded only when (max-width:700px) matches (see index.html <link media>) */
.nav-toggle{ display:flex; }
nav.tabs{
  display:none; flex-direction:column; flex-wrap:nowrap; overflow-x:visible;
  padding:8px 20px 18px 20px; gap:2px;
}
nav.tabs.open{ display:flex; }
nav.tabs button{
  width:100%; text-align:left; border-radius:10px;
  white-space:normal; overflow-wrap:anywhere;
}
.nav-dropdown{
  position:static; box-shadow:none; padding:2px 0 2px 14px;
  min-width:0; background:transparent;
}

/* Extra-small phones. This file already only loads at <=700px (via the link's
   media attribute), so this just narrows a couple of rules further — and since
   mobile.css is linked after tablet.css, it correctly wins over tablet.css's
   .apo-grid rule regardless of nesting. */
@media (max-width:640px){
  .pct-drop{ width:30px; height:30px; }
  .pct-drop span{ font-size:11px; }
}

/* Stack apo-grid into compact rows (name, then description below) instead of stacked cards. */
.apo-grid{ display:block; margin-bottom:0; }
.apo-card{
  background:none; box-shadow:none; border-radius:0; padding:10px 0;
  border-bottom:1px solid var(--sage-mid);
}
.apo-card:last-child{ border-bottom:none; }
.apo-card h4{ color:var(--forest-dark); font-size:14.5px; margin:0 0 2px 0; }
.apo-card p{ color:var(--text-soft); font-size:12.5px; margin:0; }

/* Stack theme tags into a full-width list instead of wrapping pills. */
.theme-tags{ flex-direction:column; }
.theme-tag{ width:100%; box-sizing:border-box; text-align:center; }

/* Stack .dil tables into cards instead of scrolling horizontally. */
.dil-table-wrap{ overflow-x:visible; }
table.dil{ min-width:0; }
table.dil thead{ display:none; }
table.dil, table.dil tbody, table.dil tr, table.dil td{ display:block; width:100%; }
table.dil tr{ padding:14px 18px; border-bottom:1px solid var(--sage-mid); }
table.dil tr:last-child{ border-bottom:none; }
table.dil td{ padding:3px 0; border-bottom:none; }
table.dil td.hl{ padding-bottom:6px; font-size:15px; }
table.dil td:not(.hl)::before{
  content:attr(data-label) ": ";
  font-weight:700;
  color:var(--forest-dark);
}