:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --brand:#0b5fff;
  --surface:#f3f4f6;
  --border:#e5e7eb;
  --danger:#d00;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans'}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer}
.topbar{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem}
.topbar .brand{font-weight:700;margin-right:1rem}
.topbar .brand{display:inline-block;padding:.25rem .5rem;border-radius:.5rem;color:var(--text)}
.topbar .brand:hover{text-decoration:underline;background:none;color:var(--text)}
.topbar .tabs{display:flex;gap:.5rem;flex-wrap:wrap}
.tab{padding:.5rem .75rem;border-radius:.5rem;border:1px solid transparent}
.tab.active{background:var(--surface);border-color:var(--border)}
.main{max-width:1100px;margin:0 auto;padding:1rem}
.header{display:flex;align-items:center;justify-content:space-between;margin:1rem 0}
.header h1{font-size:1.25rem;margin:0;line-height:1.2}
.header .meta{color:var(--muted);font-size:.9rem}
.grid{display:grid;grid-template-columns:260px 1fr;gap:1rem;align-items:start}
.sidebar{position:sticky;top:3.5rem;align-self:start;border:1px solid var(--border);border-radius:.75rem;padding:.75rem;background:var(--surface)}
.sidebar h3{margin:.25rem 0 .5rem 0;font-size:.95rem}
.sidebar a{display:block;padding:.25rem 0;color:var(--text)}
.card{border:1px solid var(--border);border-radius:.75rem;background: var(--surface);padding:1rem}
.section{margin-bottom:1rem}
.section h3{margin:.25rem 0 .5rem 0}
.field{display:flex;flex-direction:column;gap:.25rem;margin:.5rem 0}
.field label{font-weight:600}
.field input,.field textarea,.field select{background:#fff!important;color:#111827!important;border:1px solid var(--border);border-radius:.5rem;padding:.5rem .6rem;background:#fff;color:var(--text)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.btn{border:1px solid var(--border);background:#fff;border-radius:.6rem;padding:.5rem .8rem}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);text-align:left;padding:.6rem .4rem}
.table th{color:var(--muted);font-weight:600}
.empty{border:1px dashed var(--border);border-radius:.75rem;padding:1.25rem;text-align:center;color:var(--muted);background:var(--surface)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;background:#111827;color:#fff;padding:.6rem .9rem;border-radius:.6rem;box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:.95rem;opacity:0;pointer-events:none;transition:opacity .2s ease, bottom .2s ease}
.toast.show{opacity:1;bottom:24px}


/* My Forms search/select polish (non-invasive) */
input[type="search"], select{
  border:1px solid var(--border);
  border-radius:.6rem;
  padding:.5rem .6rem;
  background:#fff;
  color:var(--text);
}


/* Interactive hover affordance for My Forms rows */
.table tbody tr{ cursor:pointer; transition: background-color .12s ease; }
.table tbody tr:hover{ background:inherit; }
.table tbody tr:hover td{ 
  text-decoration: underline; 
  text-underline-offset: 2px; 
  text-decoration-color: currentColor;
}
:root.theme-dark .table tbody tr:hover td{
  text-decoration-color:#ffffff;
}


/* Responsive 4-column grid for Home */
.grid.cols-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; align-items:start; }
@media (max-width: 1100px){ .grid.cols-4{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px){  .grid.cols-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){  .grid.cols-4{ grid-template-columns: 1fr; } }


/* Equal-height responsive 4-column grid for Home */
.grid.cols-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; align-items:stretch; }
.grid.cols-4 > .card{ height:100%; display:flex; flex-direction:column; }
.grid.cols-4 > .card .actions{ margin-top:auto; } /* push actions to bottom if present */
@media (max-width: 1100px){ .grid.cols-4{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px){  .grid.cols-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){  .grid.cols-4{ grid-template-columns: 1fr; } }

/* ensure section heading visible below sticky topbar */
.section{scroll-margin-top: 88px;}
/* inline checkbox alignment + size */
.field.checkbox{flex-direction:row; align-items:center; gap:.5rem;}
.field.checkbox label{margin:0;}
.field.checkbox input[type="checkbox"]{transform: scale(1.5); transform-origin:left center;}

.field.checkbox{display:flex;flex-direction:row;align-items:center;gap:.5rem;}
.field.checkbox label{margin:0;}
.field.checkbox input[type="checkbox"]{transform:scale(1.5);transform-origin:left center;}

.card.section{background:var(--surface);}
.sidebar{background:var(--surface);}
/* Home steps list */
.steps{ margin:.5rem 0 0 0; padding-left:1.1rem; line-height:1.55; }


/* Generic half-width: all short inputs/selects are half; textareas remain full width */
.field.half input:not([type="radio"]):not([type="checkbox"]),
.field.half select {
  width: 50%;
  max-width: 540px;
  align-self: flex-start;

}
.field.half input[type="radio"],
.field.half input[type="checkbox"] {
  width: auto;
}


/* Long textareas: taller default (double) */
.field textarea {
  min-height: 120px;
  /* let content expand normally; do not force height on inputs */
}


/* === Dark theme === */
:root.theme-dark{
  --bg:#1b1f25;
  --text:#f1f3f5;
  --muted:#b0b3b8;
  --brand:#4f83ff;
  --surface:#262b33;
  --border:#3a3f46;
  --danger:#ff6b6b;
}

:root.theme-dark body,
:root.theme-dark .card,
:root.theme-dark .sidebar,
:root.theme-dark .topbar,
:root.theme-dark .main{
  background: var(--bg);
  color: var(--text);
}

:root.theme-dark .card{ background: var(--surface); border-color: var(--border); }
:root.theme-dark .sidebar{ background: var(--surface); border-color: var(--border); }
:root.theme-dark .topbar{ background: var(--surface); border-bottom-color: var(--border); }
:root.theme-dark .field input,
:root.theme-dark .field textarea,
:root.theme-dark .field select{
  background:#b5b5b5 !important;
  color:#111827 !important;
  border-color:var(--border);
}

:root.theme-dark .table th,
:root.theme-dark .table td{
  border-bottom-color:var(--border);
}
:root.theme-dark .btn{ background:#0e141b; color:var(--text); border-color:var(--border); }
:root.theme-dark .btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
:root.theme-dark .empty{ background:#0e141b; border-color:var(--border); color:var(--muted); }

/* Theme toggle button */
.theme-toggle{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.theme-toggle button{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:.6rem;
  padding:.35rem .6rem;
}


/* Make inputs stay light even with browser autofill */
.field input:-webkit-autofill,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill{
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  -webkit-text-fill-color: #111827 !important;
  caret-color:#111827 !important;
}


/* === Tweaks: spacing & radio layout (Oct 2025) === */
/* 1) Slightly increase spacing between section headers and fields (~20%) */
.card.section { padding: 1.1rem; } /* +10% padding for a bit more breathing room */
.section { margin-bottom: 1.2rem; } /* was 1rem */
.section h3 { margin: .3rem 0 .6rem 0; } /* was ~.25 / .5 */

/* Increase vertical rhythm between questions (fields) ~20% */
.field { margin: .6rem 0; gap: .3rem; } /* was .5rem / .25rem */

/* 2) Radio groups: left aligned, two choices per line */
.field .radio-group{
  display: grid;
  grid-template-columns: 1fr 1fr;    /* 2 per row */
  gap: .5rem .75rem;                 /* row/column gaps */
  align-items: start;
  justify-items: start;              /* left align cells */
}
.field .radio{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-align: left;
}

/* 3) Bigger radio circles: 50% larger */
.field input[type="radio"]{
  transform: scale(1.5);
  transform-origin: left center;
  /* keep them crisp */
  -webkit-transform: scale(1.5);
  -webkit-transform-origin: left center;
  margin-right: .25rem;
}


/* MyInfo page: force full-width inputs within the row columns */
.page-myinfo .field.half input:not([type="radio"]):not([type="checkbox"]),
.page-myinfo .field.half select{
  width: 100%;
  max-width: none;
  align-self: stretch;
}