/*
  Page layout and card grid adopted from designdocs/responsivePollGridUserInterface/
  responsive-grid.html's inline <style>; the tab bar replaces the reference page's
  category filter bar. Load order matches the reference page: this sheet first,
  then pollCard.css. The site-header rules live in site.css.
*/
/* Tokens carried over from the Poll Card style reference */
  :root{
    --ink:#1E2422;
    --paper:#F1F3EE;
    --paper-raised:#FFFFFF;
    --moss:#3D5A46;
    --moss-dark:#2C4234;
    --amber:#E8A33D;
    --amber-tint:rgba(232,163,61,0.16);
    --line:#D8DCD3;
    --muted:#6B7268;
    --shadow:0 20px 50px -25px rgba(30,36,34,0.35);
    --max-width:1280px;
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0;
    padding:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  .page-decor{
    position:fixed; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(600px 400px at 12% 8%, rgba(61,90,70,0.06), transparent 60%),
      radial-gradient(500px 380px at 90% 95%, rgba(232,163,61,0.08), transparent 60%);
  }

  /* ---------- Outer page + centering rule ---------- */
  .page{
    position:relative;
    z-index:1;
    overflow-x:clip;
    width:100%;
    display:flex;
    justify-content:center;
  }

  .container{
    width:100%;
    max-width:var(--max-width);   /* content never exceeds 1280px */
    padding:32px 20px 60px;
  }

  .layout{ display:block; }

  /* Site header, brand, nav, search box, header actions, and the header
     buttons/avatar all moved to site.css (005-admin-page-improvements
     research.md R3) — site.css is now the canonical header stylesheet,
     loaded on every page, not just the ones that also load this sheet. */

  /* ---------- Tab bar ---------- */
  .tab-bar-wrap{
    position:relative;
    display:flex;
    align-items:flex-end;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:20px;
  }

  .tab-bar-wrap::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-7px;
    width:100vw;
    height:2px;
    background:var(--line);
    transform:translateX(-50%);
  }

  /* FIX015: the tabs on the left, Refresh at the far right of the row. */
  .tab-bar-wrap .tab-refresh{ margin-left:auto; }

  /* FIX019: Live Results refreshes on its own timer; no manual control there. */
  .tab-bar-wrap[data-active="live"] .tab-refresh{ display:none; }

  .tab-bar{
    display:flex;
    align-items:center;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .tab-bar::-webkit-scrollbar{ display:none; }

  .tab-bar .tab{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 14px;
    border:none;
    border-radius:999px;
    background:none;
    color:var(--muted);
    font:inherit;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
  }

  .tab-bar .tab.is-active{
    background:var(--amber-tint);
    color:var(--moss-dark);
  }

  .tab-bar .tab:hover:not(.is-active):not(:disabled):not([aria-disabled="true"]){ background:var(--paper-raised); }

  .tab-bar .tab:disabled{
    opacity:.45;
    cursor:not-allowed;
  }

  .tab-icon{ width:16px; height:16px; flex:0 0 auto; }
  .tab-icon--live{ display:flex; align-items:flex-end; }

  .tab-refresh{
    flex-shrink:0;
    padding:8px 16px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--paper-raised);
    color:var(--moss-dark);
    font:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
  }

  .tab-refresh:disabled{
    opacity:.5;
    cursor:not-allowed;
  }

  /* FIX007: the tab bar's Refresh is a round icon button; the same pill style
     still dresses the text buttons of the Live Results idle prompt. */
  .tab-refresh--icon{
    width:36px;
    height:36px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .tab-refresh--icon svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .tab-notice{
    margin:0 0 16px;
    padding:10px 14px;
    border-radius:10px;
    background:var(--paper-raised);
    color:var(--muted);
    font-size:13px;
  }

  .tab-empty{
    margin:0 0 16px;
    padding:10px 14px;
    border-radius:10px;
    background:var(--paper-raised);
    color:var(--muted);
    font-size:13px;
  }

  .tab-panel[hidden]{ display:none; }

  /* ---------- Card grid ---------- */
  .card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(268px, 1fr));
    gap:18px;
  }
  .card-grid[hidden]{ display:none; }

  .maximized-card-grid{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    gap:18px 8px;
    container-type:inline-size;
  }
  .maximized-card-grid[hidden]{ display:none; }
  .col-rule{
    flex:0 0 2px;
    align-self:stretch;
    background:var(--line);
  }
  @container (max-width:767.98px){
    .col-rule{ display:none; }
  }
  .maximized-space-right{
    flex:1 1 420px;
    min-width:min(375px, 100%);
    align-self:flex-start;
    padding:10px;
    background:#E6E6E6;
    font-family:'Inter', system-ui, sans-serif;
    font-size:13px;
    color:var(--muted);
  }
  .maximized-space-right p{ margin:0 0 1em; line-height:1.65; }
  .maximized-space-right p:last-child{ margin-bottom:0; }

  /* ---------- Responsive rules ---------- */
  /* Header-related responsive rules (site-header, header-actions, btn-header-*,
     avatar-icon, brand-*, header-nav-link, header-search) moved to site.css
     alongside the selectors they adjust (research.md R3). */

  @media (max-width:639.98px){
    .container{ padding:20px 14px 40px; }
    .card-grid{ grid-template-columns:1fr; }
  }

  /* ---------- Live Results idle prompt ---------- */
  .live-idle-prompt{
    margin:0 0 16px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--paper-raised);
    color:var(--ink);
    font-size:14px;
  }

  .live-idle-text{ margin:0 0 10px; }

  .live-idle-actions{ display:flex; gap:10px; justify-content:flex-end; }

  /* ---------- FIX027: modal message (Tabs.modal) ---------- */
  .modal-backdrop{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    background:rgba(20, 24, 20, 0.45);
  }

  .modal{
    width:min(440px, 100%);
    padding:18px 20px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--paper-raised);
    color:var(--ink);
    font-size:14px;
    box-shadow:0 12px 32px rgba(0, 0, 0, 0.18);
  }

  .modal-text{ margin:0 0 14px; }

  .modal-actions{ display:flex; justify-content:flex-end; }