/* ============================================================
   The Clearing — Family Medicare Organizer
   Shared stylesheet (color + black-and-white, screen + print)
   ============================================================ */

/* ---- fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root{
  /* live joinclear.ing tokens */
  --cream:#F1EADC;
  --paper:#FBF7EE;          /* field fill */
  --field:#FBF7F0;
  --green:#21382A;          /* forest green — primary text */
  --green-deep:#19291F;
  --gold:#BE8A2E;           /* warm gold — accents/headers */
  --gold-deep:#9c7c3f;
  --ink:#1D2922;
  --muted:#574F44;
  /* sage = forest green softened */
  --sage:#7C8F72;
  --sage-tint:#E7ECE0;      /* tinted callout bg */
  --sage-rule:rgba(33,56,42,.20);
  --field-border:rgba(33,56,42,.55);
  --warm-tint:#EFE7D6;      /* slightly darker cream callout */
  --sheet-bg:#6f7a68;       /* screen backdrop behind sheets */
  --serif:'Newsreader',Georgia,serif;
  --sans:'Mulish',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--sheet-bg);
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

/* ============================================================
   TOOLBAR (screen only) — large, plain, 65+ friendly
   ============================================================ */
.toolbar{
  position:sticky;top:0;z-index:100;
  background:var(--green);color:var(--cream);
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:14px 26px;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
}
.toolbar .tb-brand{font-family:var(--serif);font-size:19px;color:#fff;white-space:nowrap;}
.toolbar .tb-brand i{font-style:italic;color:var(--gold);font-weight:500;font-size:.82em;margin-right:.05em;}
.toolbar .tb-brand b{font-weight:600;}
.toolbar .tb-spacer{flex:1;}
.tb-label{font-size:13px;font-weight:700;letter-spacing:.04em;color:#cfd8cb;text-transform:uppercase;}
/* segmented color/bw toggle */
.seg{display:inline-flex;background:rgba(255,255,255,.10);border:1.5px solid rgba(231,214,179,.45);border-radius:10px;padding:4px;gap:4px;}
.seg button{
  font-family:var(--sans);font-weight:700;font-size:16px;
  color:#e7ecdf;background:none;border:0;border-radius:7px;
  padding:11px 22px;cursor:pointer;min-height:48px;display:flex;align-items:center;gap:9px;
}
.seg button .sw{width:15px;height:15px;border-radius:4px;border:1.5px solid #cfd8cb;}
.seg button[data-mode="color"] .sw{background:linear-gradient(135deg,var(--gold),var(--green));border-color:transparent;}
.seg button[data-mode="bw"] .sw{background:linear-gradient(135deg,#fff,#777);border-color:transparent;}
.seg button[aria-pressed="true"]{background:var(--gold);color:#22180a;}
.btn-print{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:800;font-size:16px;
  background:var(--gold);color:#22180a;border:0;border-radius:9px;
  padding:13px 24px;cursor:pointer;min-height:50px;
}
.btn-print:hover{background:#a9781f;}
.tb-personalize{display:inline-flex;align-items:center;gap:9px;}
.tb-personalize label{font-size:13px;color:#cfd8cb;font-weight:600;white-space:nowrap;}
.tb-personalize input{font-family:var(--sans);font-size:14px;padding:9px 12px;border-radius:7px;border:1.5px solid rgba(231,214,179,.45);background:rgba(255,255,255,.10);color:#fff;min-height:44px;min-width:160px;}
.tb-personalize input::placeholder{color:#9fb0a0;}
.tb-reassure{font-size:13.5px;color:#cfd8cb;display:inline-flex;align-items:center;gap:8px;}
.tb-reassure::before{content:"";width:9px;height:9px;border-radius:50%;background:#9fcaa6;}
.tb-saved{color:#bfe6c4;}

/* ============================================================
   PAGE / SHEET MODEL — US Letter portrait
   ============================================================ */
.kit{padding:30px 16px 60px;}
.page{
  position:relative;
  display:flex;flex-direction:column;
  width:8.5in;min-height:11in;
  margin:0 auto 26px;
  background:var(--cream);
  padding:1in .75in .6in;
  box-shadow:0 12px 40px rgba(0,0,0,.30);
  overflow:hidden;
}
/* watermark — faint, deters screenshot/PDF reuse, never hurts legibility */
.page::after{
  content:"the Clearing · joinclear.ing";
  position:absolute;left:50%;top:52%;
  transform:translate(-50%,-50%) rotate(-32deg);
  font-family:var(--serif);font-style:italic;font-size:64px;
  color:rgba(33,56,42,.045);
  white-space:nowrap;pointer-events:none;z-index:0;letter-spacing:.04em;
}
.page > *{position:relative;z-index:1;}

/* page chrome: wordmark + footer */
.wordmark{font-family:var(--serif);font-size:18px;color:var(--green);margin:0 0 4px;}
.wordmark i{font-style:italic;color:var(--gold);font-weight:500;font-size:.82em;margin-right:.04em;}
.wordmark b{font-weight:600;}
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;}
.pagehead .tagline{font-family:var(--serif);font-style:italic;font-size:11px;color:var(--sage);margin-top:3px;}
.docfoot{
  margin-top:auto;z-index:1;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  font-size:8pt;color:var(--sage);
  border-top:1px solid var(--sage-rule);padding-top:10px;margin-top:22px;
}
.page > .docfoot{margin-top:auto;}
.docfoot .legal{max-width:4.6in;line-height:1.4;}
.docfoot .contact{text-align:right;white-space:nowrap;}

/* ============================================================
   TYPE
   ============================================================ */
h1.doc{font-family:var(--serif);font-weight:500;font-size:28pt;line-height:1.05;color:var(--green);letter-spacing:-.01em;margin:0 0 6px;}
h1.doc.sm{font-size:24pt;}
.doc-rule{height:2px;background:var(--gold);border:0;width:100%;margin:10px 0 18px;}
h2.sec{font-family:var(--serif);font-weight:600;font-size:16pt;color:var(--gold-deep);margin:20px 0 10px;}
h2.sec.green{color:var(--green);}
.lead{font-size:11.5pt;line-height:1.6;color:var(--ink);margin:0 0 12px;}
.kit p{font-size:11pt;line-height:1.6;color:var(--ink);margin:0 0 11px;}
.eyebrow{font-size:9pt;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 8px;}
.small{font-size:8.5pt;font-style:italic;color:var(--muted);}
.fineprint{font-size:8.5pt;font-style:italic;color:var(--muted);line-height:1.45;}
strong{font-weight:700;color:var(--green-deep);}

/* callouts */
.callout{background:var(--sage-tint);border:1px solid var(--sage-rule);border-radius:8px;padding:16px 18px;margin:14px 0;}
.callout.warm{background:var(--warm-tint);}
.callout h3{font-family:var(--sans);font-weight:800;font-size:9.5pt;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 9px;}
.callout .intro-i{font-size:9.5pt;font-style:italic;color:var(--muted);margin:0 0 8px;}
.callout p{font-size:10pt;margin:0 0 7px;}
.callout p:last-child{margin-bottom:0;}

/* lists with checkboxes */
ul.plain{list-style:none;margin:0 0 12px;padding:0;}
ul.plain li{font-size:10.5pt;line-height:1.5;margin:0 0 9px;padding-left:2px;}
.checkitem{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;margin:0 0 9px;font-size:10.5pt;line-height:1.45;}
.checkitem input[type=checkbox]{appearance:none;-webkit-appearance:none;width:15px;height:15px;border:1.5px solid var(--sage);border-radius:3px;margin-top:2px;background:transparent;cursor:pointer;flex:none;}
.checkitem input[type=checkbox]:checked{background:var(--green);border-color:var(--green);}
.checkitem input[type=checkbox]:checked::after{content:"✓";color:var(--cream);font-size:11px;display:block;text-align:center;line-height:13px;}

/* folder-tab section header (doc 4) */
.tabsec{display:flex;align-items:center;gap:10px;margin:18px 0 10px;}
.tabsec .bar{width:4px;height:20px;background:var(--gold);border-radius:2px;}
.tabsec h2{font-family:var(--serif);font-weight:600;font-size:14pt;color:var(--gold-deep);margin:0;}

/* ============================================================
   FILLABLE FIELDS
   ============================================================ */
.fld{margin:0 0 11px;}
.fld label,.fieldlabel{display:block;font-size:9.5pt;font-weight:600;color:var(--green);margin:0 0 4px;letter-spacing:.01em;}
.fld .inst{font-size:8.5pt;font-style:italic;color:var(--muted);margin:0 0 4px;}
input.line,textarea.line,.fillbox{
  width:100%;font-family:var(--sans);font-size:11pt;color:var(--ink);
  background:var(--field);border:1px solid var(--field-border);border-radius:5px;
  padding:9px 10px;line-height:1.8;
}
input.line{height:38px;}
textarea.line{resize:none;min-height:54px;}
.fld.inline{display:flex;align-items:baseline;gap:8px;}
.fld.inline label{margin:0;white-space:nowrap;}
.fld.inline input.line{flex:1;}

/* underline-style fill (lighter, for dense areas) */
.uline{display:inline-block;border-bottom:1px solid var(--field-border);min-width:120px;}

/* radio row */
.radiorow{display:flex;flex-wrap:wrap;gap:6px 16px;margin:4px 0 8px;}
.radiorow label{display:inline-flex;align-items:center;gap:7px;font-size:10pt;color:var(--ink);cursor:pointer;}
.radiorow input[type=radio]{appearance:none;-webkit-appearance:none;width:14px;height:14px;border:1.5px solid var(--sage);border-radius:50%;cursor:pointer;flex:none;}
.radiorow input[type=radio]:checked{border-color:var(--green);background:radial-gradient(circle,var(--green) 0 5px,transparent 6px);}

/* two-column layout (doc 3) */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 .375in;}
.col-label{font-size:10pt;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);margin:16px 0 8px;}
.col-label:first-child{margin-top:0;}
.grouped{border-top:1px solid var(--sage-rule);border-bottom:1px solid var(--sage-rule);padding:10px 0;margin:8px 0;}

/* header bands (doc 3) */
.band-green{background:var(--green);color:var(--cream);padding:9px 14px;border-radius:6px 6px 0 0;font-weight:700;font-size:11pt;letter-spacing:.04em;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.band-green .fillbox{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff;width:auto;flex:1;max-width:2.2in;padding:5px 9px;height:auto;}
.band-sage{background:var(--sage-tint);color:var(--green-deep);padding:7px 14px;border-radius:0 0 6px 6px;font-weight:600;font-size:9.5pt;letter-spacing:.04em;display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.band-sage .fillbox{background:#fff;border-color:var(--field-border);width:auto;max-width:1.6in;padding:4px 8px;height:auto;}

/* ============================================================
   TABLES (call log, appeals, prescriptions)
   ============================================================ */
table.grid{width:100%;border-collapse:collapse;margin:10px 0;font-variant-numeric:tabular-nums;}
table.grid th{
  background:var(--green);color:var(--cream);
  font-family:var(--sans);font-weight:700;font-size:8.5pt;letter-spacing:.02em;
  text-align:left;padding:8px 7px;border:1px solid var(--green);vertical-align:bottom;
}
table.grid td{
  border:1px solid var(--sage-rule);padding:0;height:38px;
  font-size:10pt;
}
table.grid td input.cell{width:100%;height:100%;border:0;background:transparent;font-family:var(--sans);font-size:10pt;padding:4px 7px;color:var(--ink);line-height:1.6;}
table.grid tbody tr:nth-child(even) td{background:rgba(33,56,42,.035);}
table.grid.tight th{font-size:8pt;padding:6px 5px;}
table.grid.tight td input.cell{font-size:9.5pt;padding:3px 5px;}

/* numbered steps (doc 7) */
ol.steps{margin:5px 0 7px;padding-left:0;list-style:none;counter-reset:s;}
ol.steps li{counter-increment:s;position:relative;padding-left:30px;font-size:10pt;line-height:1.45;margin:0 0 5px;}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--green);color:var(--cream);font-family:var(--sans);font-weight:700;font-size:10px;display:flex;align-items:center;justify-content:center;}

/* option blocks (doc 7) */
.optblock{border:1px solid var(--sage-rule);border-radius:9px;padding:13px 18px;margin:0 0 10px;position:relative;background:rgba(251,247,238,.5);}
.optblock h3{font-family:var(--serif);font-weight:600;font-size:13pt;color:var(--green);margin:0 0 4px;}
.optblock .sub{font-size:9pt;font-style:italic;color:var(--muted);margin:0 0 7px;}
.rec-badge{position:absolute;top:14px;right:16px;background:var(--gold);color:#22180a;font-size:8pt;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:20px;}

/* cover page */
.cover{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:9in;}
.cover .cw{font-family:var(--serif);font-size:26px;color:var(--green);margin:0 0 70px;}
.cover .cw i{font-style:italic;color:var(--gold);font-weight:500;font-size:.82em;}
.cover .cw b{font-weight:600;}
.cover h1{font-family:var(--serif);font-weight:500;font-size:40pt;line-height:1.08;color:var(--green);letter-spacing:-.015em;max-width:7.4in;margin:0 0 4px;}
.cover .csub{font-family:var(--serif);font-style:italic;font-size:16pt;line-height:1.35;color:var(--gold-deep);margin:0 0 22px;max-width:7in;}
.cover .ctag{font-size:11pt;color:var(--muted);margin:0;letter-spacing:.01em;}
.cover .cfine{margin-top:auto;font-size:10pt;font-style:italic;color:var(--sage);max-width:5.5in;line-height:1.5;}
.cover-line{width:54px;height:2px;background:var(--gold);margin:26px auto 30px;}

/* personalization — typing a name removes the watermark and stamps a traceable line */
.prepared-for{display:none;}
body.personalized .prepared-for{display:block;font-style:normal;color:var(--gold-deep);font-weight:700;margin-bottom:3px;}
body.personalized .page::after{display:none !important;}
.cover .prepared-for{font-family:var(--serif);font-style:italic;font-size:11pt;color:var(--gold-deep);font-weight:500;margin-top:16px;}
body.bw .prepared-for{color:#000 !important;}

.spacer-sm{height:8px;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;}

/* ============================================================
   BLACK & WHITE MODE
   ============================================================ */
body.bw{--sheet-bg:#e9e9e9;}
body.bw .page{background:#fff;}
body.bw .page::after{color:rgba(0,0,0,.05);}
body.bw .wordmark,body.bw h1.doc,body.bw h2.sec,body.bw h2.sec.green,body.bw .cover h1,body.bw .cover .cw{color:#1a1a1a;}
body.bw .wordmark i,body.bw .cover .cw i{color:#555;}
body.bw .eyebrow,body.bw h2.sec,body.bw .col-label,body.bw .callout h3,body.bw .cover .csub,body.bw .tabsec h2,body.bw .optblock h3{color:#444;}
body.bw .doc-rule,body.bw .cover-line,body.bw .tabsec .bar{background:#000;}
body.bw strong{color:#000;}
body.bw .ink,body.bw .lead,body.bw .kit p,body.bw ul.plain li,body.bw .checkitem{color:#111;}
body.bw .small,body.bw .fineprint,body.bw .docfoot,body.bw .pagehead .tagline,body.bw .cover .cfine,body.bw .optblock .sub,body.bw .fld .inst,body.bw .callout .intro-i{color:#555;}
/* remove tinted fills */
body.bw .callout,body.bw .callout.warm,body.bw .optblock,body.bw .band-sage{background:#fff;border-color:#000;}
body.bw .band-green{background:#fff;color:#000;border:1px solid #000;}
body.bw .band-green .fillbox{background:#fff;color:#000;border-color:#000;}
body.bw .band-sage .fillbox{background:#fff;border-color:#000;}
body.bw .grouped{border-color:#000;}
body.bw .docfoot{border-top-color:#000;}
/* fields: hairline black */
body.bw input.line,body.bw textarea.line,body.bw .fillbox,body.bw .uline{background:#fff;border-color:#000;}
body.bw .checkitem input[type=checkbox],body.bw .radiorow input[type=radio]{border-color:#000;}
body.bw .checkitem input[type=checkbox]:checked{background:#000;border-color:#000;}
body.bw .radiorow input[type=radio]:checked{background:radial-gradient(circle,#000 0 5px,transparent 6px);}
/* tables: solid black hairlines, no shading */
body.bw table.grid th{background:#fff;color:#000;border:1px solid #000;}
body.bw table.grid td{border:1px solid #000;}
body.bw table.grid tbody tr:nth-child(even) td{background:#fff;}
body.bw ol.steps li::before{background:#000;color:#fff;}
body.bw .rec-badge{background:#000;color:#fff;}

/* ============================================================
   PRINT
   ============================================================ */
@page{size:letter portrait;margin:0;}
@media print{
  body{background:#fff;}
  .toolbar{display:none !important;}
  .kit{padding:0;}
  .page{
    width:8.5in;min-height:11in;height:11in;
    margin:0;box-shadow:none;
    page-break-after:always;break-after:page;
  }
  .page:last-child{page-break-after:auto;break-after:auto;}
  /* ensure fills/bands render */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* screen-only single-doc note */
.singlenote{max-width:8.5in;margin:0 auto 14px;font-size:13px;color:#e7ecdf;background:rgba(0,0,0,.18);border-radius:8px;padding:10px 16px;}
@media print{.singlenote{display:none;}}

@media(max-width:920px){
  .page{width:100%;min-height:0;padding:42px 24px 64px;}
  .cols,.two{grid-template-columns:1fr;}
  .page::after{font-size:40px;}
  .docfoot{position:static;margin-top:24px;left:auto;right:auto;}
}