/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */
:root {
  /* Base palette — shared with the other tools */
  --bg:            #f5f4f0;
  --surface:       #ffffff;
  --surface2:      #f0efe9;
  --border:        #e2e0d8;
  --text:          #1a1a18;
  --text2:         #6b6a64;
  --text3:         #9b9a94;

  --accent:        #2d6a4f;
  --accent-light:  #e8f4ee;
  --accent2:       #1b4332;

  --inp-bg:        #fffef5;
  --inp-border:    #d4c97a;

  /* Dropdown tokens, carried over from the dose calculator */
  --drp-bg:        #f5f3ff;
  --drp-border:    #c4b5fd;

  --warn:          #b04a1f;

  /* Worksheet ink — darker than UI text so it prints cleanly */
  --rule:          #9c988f;
  --rule-soft:     #c4c0b6;

  /* One row height for every worksheet cell, typed or handwritten.
     Sized for a pen; the Word export mirrors it (see worksheet.js). */
  --ws-row-h:      8mm;

  /* The patient block, top-right beside the title. Sized so a printed
     patient label can be stuck straight over it — it carries the same
     identifiers, so nothing is lost when it is covered. Tune to match
     whatever label stock you use. */
  --label-w:       95mm;
  --label-h:       32mm;

  /* Sheet title — serif, to match the site. */
  --ws-title-size: 40px;

  /* Shape & typography */
  --radius:        14px;
  --radius-sm:     8px;
  --shadow:        0 2px 12px rgba(0,0,0,0.07);
  --serif:         'Cormorant Garamond', Georgia, serif;
  --font:          'DM Sans', sans-serif;
  --mono:          'DM Mono', monospace;
}

/* =============================================================================
   2. RESET & BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* =============================================================================
   3. LAYOUT
   ============================================================================= */
.app {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 18px 0;
}

/* The worksheet is a page preview rather than a form, so it is allowed to
   run wider than the 720px control column. */
.sheet-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px 18px 80px;
}

header.app-header { margin-bottom: 22px; }

.title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.beta-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
}

.subtitle {
  color: var(--text2);
  font-size: 14px;
  margin-top: 6px;
  max-width: 60ch;
}

/* =============================================================================
   4. CARDS
   ============================================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 10px;
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.count-pill {
  font-size: 11px;
  font-weight: 500;
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 10px;
  font-family: var(--mono);
  white-space: nowrap;
}

.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* =============================================================================
   5. FORM FIELDS
   ============================================================================= */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

/* Long option labels need two columns — native selects truncate rather
   than ellipsise. */
@media (min-width: 560px) {
  .field--wide { grid-column: span 2; }
  /* A lone field in an auto-fit grid stretches the full row; cap the
     short ones so a two-option select is not a full-width control. */
  .field--narrow { max-width: 240px; }
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  margin-bottom: 6px;
}

input[type=number], input[type=text], select {
  width: 100%;
  padding: 12px 13px;
  font-size: 15px;
  font-family: var(--font);
  color: var(--text);
  background: var(--inp-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  -webkit-appearance: none;
  appearance: none;
}

input[type=number] {
  font-family: var(--mono);
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* Yellow = the user types here; purple = a dropdown. Site convention. */
.inp { border-color: var(--inp-border) !important; }
.drp { background: var(--drp-bg) !important; border-color: var(--drp-border) !important; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6a64' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}

.compact-inp { padding: 9px 12px !important; font-size: 14px !important; max-width: 150px; }

.blank-rows-only { margin-top: 14px; }

.hint {
  font-size: 12px;
  color: var(--text3);
  margin-top: 10px;
  line-height: 1.55;
}
.hint code {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--surface2);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--text2);
}

/* =============================================================================
   6. CHECKBOXES & TOGGLE
   ============================================================================= */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 18px;
}

.check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
}

.check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: none;
  margin: 0;
  accent-color: var(--accent);
  -webkit-appearance: auto;
  appearance: auto;
}

.toggle-row { display: flex; align-items: center; gap: 12px; }
.toggle-label { font-size: 13.5px; font-weight: 500; color: var(--text); }

.toggle { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 13px;
  cursor: pointer;
  transition: 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

/* =============================================================================
   7. ACTIONS
   ============================================================================= */
/* Groups the blank-sheet option with the two buttons it modifies. */
.export-block {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.export-block .hint { margin-top: 7px; }
.export-block .primary-actions { margin-top: 13px; }

.primary-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.primary-btn {
  flex: 1;
  min-width: 180px;
  padding: 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.2s;
}
.primary-btn:hover { background: var(--accent2); }

.actions {
  display: flex;
  gap: 8px;
  margin: 8px 0 16px;
}
.actions button {
  flex: 1;
  padding: 11px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--text2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.actions button:hover {
  background: var(--surface2);
  color: var(--text);
}

/* =============================================================================
   8. THE WORKSHEET
   ============================================================================= */
.sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 24px 30px;
  color: #000;
}

.ws-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

/* Matches the patient block's height and pins the credit to its foot,
   so the two sides of the header row square up. */
.ws-title-block {
  flex: 1;
  min-width: 0;
  min-height: var(--label-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

/* Holds only the patient identifiers, so a label covering this block
   hides nothing the label does not already carry. min-height keeps the
   area label-sized even though two fields do not fill it. */
.patient-box {
  flex: none;
  width: var(--label-w);
  min-height: var(--label-h);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 3px;
}

.ws-title {
  font-family: var(--serif);
  font-size: var(--ws-title-size);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.ws-credit {
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 0.02em;
}

.ws-subtitle {
  font-size: 12px;
  color: var(--text2);
  margin: 4px 0 16px;
}

.ws-head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 18px;
  padding: 12px 0 14px;
  border-top: 1.5px solid var(--text);
  border-bottom: 1.5px solid var(--text);
  margin-bottom: 18px;
}

.ws-field { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.ws-field > span { color: var(--text2); white-space: nowrap; }

.ws-field input {
  flex: 1;
  min-width: 0;
  padding: 2px 3px;
  font-size: 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-soft);
  border-radius: 0;
  box-shadow: none;
}
.ws-field input:focus { border-bottom-color: var(--accent); box-shadow: none; }

.contact-block { margin-bottom: 20px; }
.contact-block.break-page { break-before: page; }

.contact-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.contact-name {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
}
.contact-name .contact-label { color: var(--text2); font-weight: 500; }

/* Specificity must beat the global `input[type=text]` rule, which would
   otherwise impose the yellow form-field styling here. */
.contact-name .cname-input {
  width: 200px;
  padding: 1px 4px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-soft);
  border-radius: 0;
  box-shadow: none;
}
.contact-name .cname-input::placeholder { color: var(--text3); font-weight: 400; font-style: italic; }
.contact-name .cname-input:focus { border-bottom-color: var(--accent); box-shadow: none; }

.contact-params { font-family: var(--mono); font-size: 11px; color: var(--text2); }

table.ws {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

table.ws th, table.ws td {
  border: 1px solid var(--rule);
  padding: 0;
  text-align: center;
}

/* Same height whether the cell is typed into or written on. */
table.ws td { height: var(--ws-row-h); }

table.ws thead th {
  background: var(--surface2);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.25;
  padding: 6px 4px;
  word-break: break-word;
}

table.ws thead th input.hdr-input {
  width: 100%;
  padding: 3px 4px;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  color: var(--text);
}
table.ws thead th input.hdr-input::placeholder {
  color: var(--text3);
  font-weight: 400;
  font-style: italic;
}
table.ws thead th input.hdr-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--accent-light);
  box-shadow: none;
}

table.ws td.amp {
  font-family: var(--mono);
  font-size: 12px;
  background: #faf9f5;
  /* Horizontal padding only — vertical padding would stack on top of a
     full-height input and make the summary rows taller than the rest. */
  padding: 0 4px;
}

/* The input fills the cell so the whole cell is a click target.
   `height: 100%` rather than the token directly: the cell already has a
   definite height, and matching it exactly keeps a typed row the same
   height as a blank one. If a browser ignores the percentage the cell
   still holds the row height — only the full-cell click target is lost. */
table.ws td input {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 2px 4px;
  font-size: 12px;
  text-align: center;
  font-family: var(--font);
}
table.ws td input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--accent-light);
  box-shadow: none;
}

/* Contact name repeated in the summary table */
table.ws td.amp input.tpl-input {
  font-family: var(--mono);
}
table.ws td.amp input.tpl-input::placeholder { color: var(--text3); font-style: italic; }

.threshold-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text2);
}

.threshold-line .tf { display: flex; align-items: baseline; gap: 5px; }

.threshold-line input {
  width: 74px;
  padding: 1px 3px;
  font-family: var(--mono);
  font-size: 11px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-soft);
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}
.threshold-line input:focus { border-bottom-color: var(--accent); box-shadow: none; }

.section-title {
  margin: 26px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}

.ws-foot {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  font-size: 10px;
  color: var(--text3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.ws-foot .credit-mark { color: var(--text2); text-align: center; flex: 1; }

/* =============================================================================
   9. FOOTER
   ============================================================================= */
footer.disclaimer {
  font-size: 11px;
  color: var(--text3);
  text-align: center;
  margin-top: 24px;
  padding: 0 8px;
  line-height: 1.55;
}

footer.disclaimer .copyright {
  font-size: 10px;
  color: var(--text3);
  margin-top: 10px;
  opacity: 0.75;
}

footer.disclaimer a { color: var(--accent); text-decoration: none; }
footer.disclaimer a:hover { text-decoration: underline; }

/* =============================================================================
   10. MOBILE
   ============================================================================= */
@media (max-width: 620px) {
  .app { padding: 22px 14px 0; }
  .sheet-wrap { padding: 12px 14px 60px; }
  h1 { font-size: 20px; }
  .ws-head { grid-template-columns: repeat(2, 1fr); }
  .ws-header-row { flex-direction: column; gap: 12px; }
  .ws-title-block { min-height: 0; }
  .patient-box { width: 100%; min-height: 0; }
  .sheet { padding: 18px 16px 24px; }
  table.ws { font-size: 11px; }
  .primary-btn { min-width: 100%; }
}

/* =============================================================================
   11. PRINT
   ============================================================================= */
@media print {
  .app, footer.disclaimer { display: none !important; }

  body { background: #fff; font-size: 11pt; }

  .sheet-wrap { max-width: none; padding: 0; margin: 0; }

  .sheet {
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .ws-subtitle { font-size: 8pt; }

  table.ws { font-size: 8.5pt; }

  table.ws thead th {
    font-size: 7.6pt;
    background: #f0efe9 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  table.ws td.amp {
    background: #faf9f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  thead { display: table-header-group; }
  tr, .contact-block, { break-inside: avoid; }
  .contact-block.break-page { break-before: page; }

  .ws-field input,
  .threshold-line input,
  .contact-name .cname-input { border-bottom: 1px solid #555; }

  table.ws td input { font-size: 8.5pt; }
  .ws-foot { font-size: 7pt; }

  .ws-foot {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    margin-top: 0;
  }
   
  /* Blank template: suppress entries but keep column headings and contact
     names, which are template rather than patient data. */
  .sheet.print-blank input:not(.tpl-input) { color: transparent !important; }
  input::placeholder { color: transparent !important; }
}