/* Signal Card + Symptom Tracker tool — shared styles.
   Extends assets/styles.css design tokens; no new colors invented here. */

/* ---------- Privacy note (reuses .privacy-note structure from styles.css) ---------- */
.privacy-note.tool-privacy{border-color:var(--gold)}

/* ---------- Card picker ---------- */
.card-picker{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  gap:.75rem;
  margin:1.25rem 0 0;
  padding:0;
  list-style:none;
}
.card-picker li{margin:0}
.card-picker button{
  width:100%;
  height:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--line);
  border-radius:.6rem;
  padding:.9rem 1rem;
  font:inherit;
  font-size:.95rem;
  color:var(--charcoal);
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.card-picker button:hover,
.card-picker button:focus-visible{
  border-color:var(--green);
  box-shadow:0 0 0 2px var(--line);
}
.card-picker button.selected{
  background:var(--green);
  border-color:var(--green);
  color:#fff;
}
.card-picker .chapter-tag{
  display:block;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.7;
  margin-bottom:.2rem;
}

/* ---------- Rendered card ---------- */
.card-frame{
  background:#fff;
  border:1px solid var(--line);
  border-radius:.75rem;
  padding:1.75rem clamp(1.1rem,4vw,2.25rem);
  margin-top:1.5rem;
}
.card-frame h2.card-title{margin:0 0 .5rem;font-size:1.5rem}
.card-subtitle{font-style:italic;color:#54524c;margin:0 0 1.1rem}

/* Standing safety boxes — must stay visually the most prominent thing on the page */
.safety-box{
  border:2px solid var(--green);
  background:var(--cream-soft);
  border-radius:.6rem;
  padding:1rem 1.25rem;
  margin:0 0 1.25rem;
}
.safety-box p{margin:.4rem 0}
.safety-box p:first-child{margin-top:0}
.safety-box p:last-child{margin-bottom:0}
.safety-box strong{color:var(--green-deep)}

/* Mood + Heart/Breath carry the two most acute safety blocks in the set — a
   visibly stronger treatment than the standard box, on purpose. */
.safety-box.urgent{
  border-color:#a3372c;
  background:#fbecea;
}
.safety-box.urgent strong{color:#7a281f}
.safety-box.urgent .crisis-number{
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:.02em;
}

.card-note{font-style:italic;color:#54524c;font-size:.92rem;margin:.5rem 0 1.25rem}

/* ---------- Field groups ---------- */
.field-group{margin:0 0 1.4rem}
.field-group:last-of-type{margin-bottom:0}
.field-group h3{
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--green-deep);
  margin:0 0 .55rem;
}
.field-line{margin:0 0 .65rem;line-height:1.6}
.field-line:last-child{margin-bottom:0}
.field-line .sub{display:block;font-style:italic;color:#54524c;font-size:.88rem;margin-top:.15rem}

/* Fill-in blanks, inline or standalone */
input.fill,
textarea.fill{
  font:inherit;
  color:inherit;
  background:transparent;
  border:none;
  border-bottom:1px solid #9a968a;
  padding:.15rem .2rem;
}
input.fill:focus,
textarea.fill:focus{
  outline:none;
  border-bottom-color:var(--green);
  background:rgba(63,94,78,.06);
}
input.fill.inline{width:9rem}
input.fill.inline.short{width:4.5rem}
input.fill.inline.wide{width:16rem}
input.fill.block{display:block;width:100%;margin-top:.25rem}
textarea.fill{
  display:block;
  width:100%;
  min-height:2.6rem;
  resize:vertical;
  margin-top:.25rem;
  font-family:inherit;
}

/* Choice groups — the paper card says "circle"; here it's a click */
.choice-group{display:flex;flex-wrap:wrap;gap:.5rem;margin:.35rem 0}
.choice-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  border:1px solid #9a968a;
  border-radius:999px;
  padding:.35rem .9rem;
  background:#fff;
  cursor:pointer;
  font-size:.92rem;
}
.choice-btn input{margin:0}
.choice-btn:has(input:checked){
  border-color:var(--green);
  background:var(--cream-soft);
  font-weight:600;
}
.choice-btn:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}

/* Simple table fields (Cycle's then/now, the infection log) */
.tool-table{width:100%;border-collapse:collapse;margin:.5rem 0}
.tool-table th,.tool-table td{
  border:1px solid var(--line);
  padding:.4rem .5rem;
  text-align:left;
  font-size:.92rem;
}
.tool-table th{background:var(--cream-soft);font-weight:600}
.tool-table input.fill{border-bottom:none;width:100%}

/* Authorship + closing */
.authorship-line{margin:1.4rem 0 .9rem;font-size:1rem}
.closing-note{
  font-style:italic;
  font-size:.88rem;
  color:#54524c;
  border-top:1px solid var(--line);
  padding-top:.9rem;
  margin-top:0;
}

/* ---------- Toolbar ---------- */
.tool-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  margin:1.5rem 0 0;
}
.tool-status{font-size:.88rem;color:var(--green-deep)}
.tool-status[hidden]{display:none}

/* ---------- Tracker table ---------- */
.tracker-table{width:100%;border-collapse:collapse;margin-top:1rem}
.tracker-table th,.tracker-table td{
  border:1px solid var(--line);
  padding:.45rem .5rem;
  vertical-align:top;
}
.tracker-table th{background:var(--cream-soft);text-align:left;font-size:.85rem}
.tracker-table td.day-num{font-weight:600;text-align:center;width:2.2rem}
.tracker-table input.fill,
.tracker-table textarea.fill{border-bottom:none;width:100%}
.tracker-table input[type="number"].fill{width:3.5rem}
.tracker-table input[type="date"].fill{width:9.5rem}
.tracker-wrap{overflow-x:auto}

/* ---------- Print ---------- */
@media print{
  .site-header,.site-footer,.skip-link,
  .no-print,.tool-actions,.card-picker,.tool-intro,
  .privacy-note,.page-hero .eyebrow{display:none !important}
  body{background:#fff}
  main{padding:0}
  .card-frame{border:none;padding:0;margin:0}
  .safety-box{border-width:2px;background:#fff}
  .choice-btn{border-color:#000}
  input.fill,textarea.fill{border-bottom:1px solid #000}
  a[href]::after{content:""}
}