/* =========================================================
   PREMIUM CARD LAYOUT - all cards (desktop-first)
   ========================================================= */

/* define container width var if not already present */
:root{ --max-container: 1280px; }

/* Align vets page shell with landing page styles but allow full width for tables */
.vets-shell{
  max-width: var(--max-container);
  width: 100%;
  background: var(--bg, #0e1116);
  box-shadow: none;
}
.vets-shell .app-content{ padding: 0; }
.vets-shell .bottom-nav{ max-width: var(--max-container); }
.vets-shell .app-header{ position: sticky; top: 0; z-index: 80; }

/* Slightly larger padding on wide screens */
.card{ padding:1.6rem 1.6rem 1.8rem; }
@media (min-width:1200px){ .card{ padding:2rem 2.1rem 2.25rem; } }

/* Consistent heading + badge across all cards */
.card h1{
  display:flex; align-items:baseline; gap:.65rem;
  letter-spacing:.2px; font-weight:800;
}
.card h1 .badge{ margin-left:0; transform:translateY(-2px); }
.divider{ height:1px; margin:.85rem 0 1rem;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}

/* Inputs / selects slightly larger on desktop for all cards */
@media (min-width:1200px){
  .card .controls select,
  .card .controls input[type="number"],
  .card .controls input[type="text"]{
    font-size:1.06rem; padding:.8rem 1rem; border-radius:12px;
  }
  .card .btn{ padding:.78rem 1.15rem; font-size:1.02rem; border-radius:12px; }
  .chip{ padding:.5rem .9rem; font-size:.98rem; }
}

/* Chips */
.chip{ color:#e9edf6; border-color:rgba(255,255,255,.13); }
.chip[aria-pressed="true"]{
  background:rgba(255,215,0,.14);
  border-color:rgba(255,215,0,.55);
  box-shadow: inset 0 0 0 1px rgba(255,215,0,.55);
}

/* Tables */
.table-wrap{
  border-color: rgba(255,255,255,.10);
  -webkit-overflow-scrolling: touch;  /* iOS momentum scroll */
}
table thead th{
  position:sticky; top:0; z-index:1;
  background:rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* iOS Safari */
}
tbody tr:hover td{ background:rgba(255,255,255,.05); }
tbody td:first-child{ font-weight:600; }
th, td{ padding:.85rem .95rem; }

/* Footnote line */
.foot{ border-top:1px dashed rgba(255,255,255,.18); padding-top:.7rem; margin-top:1rem; }

/* ---------- Controls grids per card (desktop) ---------- */
@media (min-width:1200px){
  /* Monthly Compensation */
  #comp-card .controls{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 1.05rem; }
  #comp-card .controls .field:nth-child(1){ grid-column: span 3; }
  #comp-card .controls .field:nth-child(2){ grid-column: span 3; }
  #comp-card .controls .field:nth-child(3){ grid-column: span 6; }
  #comp-card .controls .field:nth-child(4){ grid-column: span 3; }
  #comp-card .controls .field:nth-child(5){ grid-column: span 3; }
  #comp-card .controls .field:nth-child(6){ grid-column: span 3; }

  /* State Benefits */
  #state-card .controls{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 1.05rem; }
  #state-card .controls .field:nth-child(1){ grid-column: span 5; }
  #state-card .controls .field:nth-child(2){ grid-column: span 7; }

  /* SMC */
  #smc-card .controls{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 1.05rem; }
  #smc-card .controls .field:nth-child(1){ grid-column: span 4; }
  #smc-card .controls .field:nth-child(2){ grid-column: span 4; }

  /* DIC */
  #dic-card .controls{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 1.05rem; }
  #dic-card .controls .field:nth-child(1){ grid-column: span 4; }
  #dic-card .controls .field:nth-child(2){ grid-column: span 6; }

  /* Health / Education columns feel balanced on PC */
  .grid-2{ grid-template-columns: 1.25fr 1fr; gap: 1.25rem; }
}

/* Light mode tweaks */
.light table thead th{ background:rgba(0,0,0,.05); }
.light tbody tr:hover td{ background:rgba(0,0,0,.04); }


/* =========================================================
   MOBILE & TABLET ENHANCEMENTS
   ========================================================= */

/* General iOS niceties */
@media (max-width: 1024px){
  html{ -webkit-text-size-adjust: 100%; }  /* avoid odd zooming */
  button, input, select{ touch-action: manipulation; } /* faster taps */

  .wrap{ max-width: min(var(--max-container), 100%); padding-inline: 12px; }
  .card{ padding:1.25rem 1.2rem 1.35rem; border-radius:14px; }
  .card h1{ font-size:1.65rem; line-height:1.25; }
  .divider{ margin:.7rem 0 .9rem; }

  /* collapse most control grids to 2 columns */
  #comp-card .controls,
  #state-card .controls,
  #smc-card .controls,
  #dic-card .controls{
    display:grid; grid-template-columns: 1fr 1fr; gap:.8rem;
  }
  /* long fields full width */
  #state-card .controls .field:nth-child(2){ grid-column: 1 / -1; }
  #dic-card   .controls .field:nth-child(2){ grid-column: 1 / -1; }

  /* finger-friendly fields */
  .card .controls select,
  .card .controls input[type="number"],
  .card .controls input[type="text"]{
    font-size:16px;            /* prevents iOS zoom */
    min-height:44px;
    padding:.75rem .95rem; border-radius:12px;
  }
  .btnrow{ gap:.6rem; flex-wrap:wrap; }
  .btn{ padding:.75rem 1rem; border-radius:12px; }
  .chip{ padding:.45rem .8rem; font-size:.96rem; }
}

/* Phones */
@media (max-width: 720px){
  body{ padding:.75rem; }
  .hero{ font-size:1.55rem; padding:1.15rem .8rem; border-radius:14px; }
  .wrap{ gap:.75rem; }

  .card{ padding:1rem .9rem 1.1rem; border-radius:14px; }
  .card h1{ font-size:1.45rem; gap:.5rem; letter-spacing:.15px; flex-wrap:wrap; }
  .card h1 .badge{ transform:none; }
  .divider{ margin:.55rem 0 .75rem; }

  /* one column everywhere for controls */
  #comp-card .controls,
  #state-card .controls,
  #smc-card .controls,
  #dic-card .controls{
    grid-template-columns: 1fr !important;
    gap:.65rem;
  }
  #comp-card .controls .field,
  #state-card .controls .field,
  #smc-card .controls .field,
  #dic-card .controls .field{ grid-column: 1 / -1 !important; }

  /* inputs */
  .card .controls select,
  .card .controls input[type="number"],
  .card .controls input[type="text"]{
    font-size:16px; min-height:46px; padding:.8rem .95rem; border-radius:12px;
  }

  /* chips & buttons */
  .chip{ padding:.5rem .85rem; font-size:1rem; }
  .btnrow{ gap:.65rem; }
  .btn{ width:100%; justify-content:center; padding:.9rem 1rem; font-size:1rem; }

  /* tables: readable + scrollable */
  .table-wrap{ border-radius:12px; }
  table{ min-width:520px; }
  th, td{ padding:.7rem .75rem; font-size:.95rem; }
  tbody tr:hover td{ background:rgba(255,255,255,.04); }

  /* compact top nav */
  .top-nav{ gap:.6rem; padding:.5rem .6rem; border-radius:12px; }
  .top-nav a{ padding:.35rem .6rem; font-size:.92rem; }
}

/* Very small phones */
@media (max-width:380px){
  .hero{ font-size:1.35rem; padding:1rem .6rem; }
  table{ min-width:480px; }
  .btn{ font-size:.97rem; }
}

/* =========================================
   UNIFIED CARD WIDTHS (same size, centered)
   ========================================= */

/* pick your preferred card width once here */
:root{
  --max-container: 1280px;   /* page frame */
  --page-gutter: 24px;       /* side padding for the frame */
  --card-max: 1120px;        /* <-- all cards will match this width */
}

/* scale the container for larger desktops (up to 1920px-class screens) */
@media (min-width: 1440px){
  :root{
    --max-container: 1440px;
    --card-max: 1240px;
  }
}

@media (min-width: 1920px){
  :root{
    --max-container: 1680px;
    --card-max: 1360px;
    --page-gutter: 32px;
  }
}

.wrap{
  max-width: var(--max-container);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;       /* center cards inside the frame */
}

.card{
  width: 100%;
  max-width: var(--card-max); /* SAME width for every card */
}

/* phones: cards go full available width inside the frame */
@media (max-width: 720px){
  :root{ --page-gutter: 12px; }
  .card{ max-width: 100%; }
}

/* --- Acronyms footer --- */
.foot.acros{
  margin-top:.9rem;
  padding-top:.75rem;
  border-top:1px dashed var(--line);
}
.acros-title{
  font-weight:800;
  letter-spacing:.02em;
  margin-bottom:.4rem;
}
.acros-list{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:.85rem;
  row-gap:.45rem;
  margin:0;
}
.acros-list dt{
  margin:0;
  font-weight:800;
  align-self:start;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.18rem .55rem;
  font-size:.88rem;
  white-space:nowrap;
}
.acros-list dd{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}

/* two visual columns on wider screens */
@media (min-width: 900px){
  .acros-list{
    grid-template-columns:repeat(2, auto 1fr);
    column-gap:1.25rem;
  }
}