/* clipboard.css — the 📋 session-prep clipboard skin: a charcoal board + a metal clamp at the top + a
   lined intake sheet clipped under it. clinical-warm, all CSS (no assets). the sheet GROWS with content —
   the desk doom-scrolls to find the bottom (no inner scrollbar). */

/* the head wears Sum's colored-tab strip (clipboard-bar.png) */
.p-clipboard .card-head {
  background: #8a8d92 url('clipboard-bar.png') center / cover no-repeat;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.p-clipboard .card-body { background: #14161a; padding: 14px 0 18px; }

/* the board — Sum's clipboard png (CROPPED to the object) FILLS the card, capped + centered. a FIXED
   aspect-ratio (603:845) means the white paper sits at a known %, so the form pins to it at ALL sizes. */
.clip-board {
  position: relative;
  margin: 0 auto; width: min(600px, 96%);
  aspect-ratio: 603 / 845;
  background: url('clipboard-card.png') center / 100% 100% no-repeat;
}

/* the TOP LINE (on the paper, just above the section tabs): AI/HIL source tabs left, actions right.
   tools used to float on the wood corner — moved onto the sheet so they ride above the tabs on one line. */
.clip-topline { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 5px; }
.clip-sides { display: flex; gap: 4px; }
.clip-acts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
/* AI / HIL — the source tabs. paper-white + slate underline when live (slate, not the red of the section tabs,
   so the two tab rows read as different LEVELS — source above, section below). */
.clip-side {
  font-size: 13px; font-weight: 800; letter-spacing: .3px; cursor: pointer;
  padding: 3px 13px 4px; border-radius: 6px 6px 0 0;
  background: #e0d8c7; color: #8a7f6a; border: 1px solid #d2c8b4; border-bottom: none;
}
.clip-side:hover { background: #ebe4d6; color: #5a5040; }
.clip-side.on { background: #fffdf6; color: #334155; box-shadow: inset 0 -2px 0 #334155; }
/* action pills — light, sit on the cream paper (were dark, for the wood) */
.clip-tool {
  font-size: var(--fs-ui); padding: 3px 9px; border-radius: 5px; cursor: pointer;
  background: #ece5d6; color: #5a5040; border: 1px solid #ddd3c0;
}
.clip-tool:hover { background: #e0d7c4; color: #2c2620; }

/* the FORM — pinned to the white paper rectangle (% of the board) and scrolls INSIDE it. transparent, so the
   photo's paper IS the sheet. tracks the paper at every card size (the fixed aspect-ratio above is the key). */
.clip-sheet {
  position: absolute; left: 7%; top: 20.5%; width: 84%; height: 72.5%;
  overflow-y: auto; overflow-x: hidden;
  background: transparent;
  padding: 2px 6px 10px 4px;
  color: #20242a;
  font: var(--fs-ui)/1.55 -apple-system, system-ui, sans-serif;   /* bumped from 12.5 — the sheet reads small; the desk scrolls */
}
.clip-sheet::-webkit-scrollbar { width: 6px; }
.clip-sheet::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }

/* ── the sticky header — the top line (AI/HIL + actions) AND the section tab dividers, pinned together so both
      hold while the sheet scrolls. a cream backing (matches the paper) stops content bleeding through behind. ── */
.clip-stick {
  position: sticky; top: 0; z-index: 3;
  margin: -2px -6px 8px -4px; padding: 3px 6px 0 4px;
  background: #faf7f0;
}
/* the section tab dividers — manila tabs clipped to the page (overview · complaints · prep) */
.clip-tabs { display: flex; gap: 4px; align-items: flex-end; }
.clip-tab {
  font-size: 13px; font-weight: 700; letter-spacing: .2px; cursor: pointer;
  padding: 5px 11px 6px; border-radius: 7px 7px 0 0;
  background: #e8e1d3; color: #6b6354;
  border: 1px solid #d8cfbd; border-bottom: none;
  box-shadow: 0 1px 0 #cfc6b2;   /* a raised tab has mass */
}
.clip-tab:hover { background: #efe9dc; color: #4a4236; }
.clip-tab.on {
  background: #fffdf6; color: #b91c1c;            /* the live page — paper-white + the chart's red ink */
  box-shadow: inset 0 -2px 0 #c8a96b; margin-bottom: -1px; padding-bottom: 7px;
}
.clip-tab-body { padding-top: 2px; }

/* meta — discipline chips + free text, who I'm seeing, date */
.clip-meta { margin-bottom: 10px; }
.clip-disc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clip-disc-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.clip-chip {
  font-size: var(--fs-ui); padding: 2px 8px; border-radius: 11px; cursor: pointer;
  background: #eef1f4; color: #44505c; border: 1px solid #d4dae0;
}
.clip-chip.on { background: #334155; color: #fff; border-color: #334155; }
.clip-disc-in { font-weight: 700; font-size: 16px; min-width: 80px; flex: 1; }
.clip-meta-row { margin-top: 4px; }
.clip-seeing, .clip-date { width: 100%; color: #46505a; }   /* own full-width rows — a flex sibling collapsed narrow + ate the page */

/* saved sessions — a row of past sheets for the selected provider (💾 save + loadable tabs with ✕) */
.clip-sessions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.clip-save { font-size: var(--fs-ui); background: #eef1f4; border: 1px solid #d4dae0; border-radius: 5px; padding: 3px 9px; cursor: pointer; color: #44505c; }
.clip-save:hover { background: #e2e8ee; color: #1c2024; }
.clip-sess { display: inline-flex; align-items: center; background: #f3eee6; border: 1px solid #e0d6c4; border-radius: 11px; overflow: hidden; }
.clip-sess-load { font-size: var(--fs-ui); background: none; border: none; padding: 3px 4px 3px 9px; cursor: pointer; color: #5a4f3c; }
.clip-sess-load:hover { color: #1c2024; }
.clip-sess-x { font-size: var(--fs-ui); background: none; border: none; padding: 3px 7px 3px 3px; cursor: pointer; color: #b0a48c; line-height: 1; }
.clip-sess-x:hover { color: #b91c1c; }
.clip-sess-empty { font-size: 13px; color: #b3b9bf; font-style: italic; }

/* every input is the paper — transparent, grows with text, underlines on focus */
.clip-in {
  font: inherit; color: inherit; width: 100%;
  background: transparent; border: none; outline: none; resize: none;
  padding: 1px 2px; overflow: hidden; min-height: 1.5em;
}
.clip-in::placeholder { color: #7e8693; font-style: italic; opacity: 1; }   /* solid hex + opacity:1 — kill the browser's default placeholder fade (IC: no washed-out text) */
.clip-in:focus { background: #fffdf4; box-shadow: inset 0 -1px 0 #c8a96b; }

/* section blocks */
.clip-sec { margin: 14px 0 4px; }
.clip-sec-h {
  font-size: var(--fs-ui); letter-spacing: .8px; text-transform: uppercase; font-weight: 700;
  color: #5a6570; margin-bottom: 4px; padding-bottom: 2px;
  border-bottom: 1px solid #e6ebee;
}

/* 🎯 say first — the lead framing, set off like a callout */
.clip-say { background: #f6f1e6; border-left: 3px solid #c8a96b; padding: 6px 10px; border-radius: 0 4px 4px 0; }
.clip-say .clip-sec-h { border: none; color: #8a6d3b; margin-bottom: 2px; }
.clip-say-in { font-style: italic; }

/* rows shared bits */
.clip-x {
  flex: none; background: none; border: none; color: #c3c9ce; cursor: pointer; font-size: var(--fs-ui);
  padding: 0 2px; line-height: 1; opacity: 0; transition: opacity .12s;
}
.clip-scope-row:hover .clip-x, .clip-bullet-row:hover .clip-x, .clip-flag-row:hover .clip-x,
.clip-snap-row:hover .clip-x, .clip-qa:hover .clip-x, .clip-bring-row:hover .clip-x,
.clip-cmp-row:hover .clip-x, .clip-topic-head:hover .clip-x { opacity: 1; }
.clip-x:hover { color: #b91c1c; }
.clip-add {
  font-size: var(--fs-ui); color: #8a93a0; background: none; border: 1px dashed #cfd6dc; border-radius: 5px;
  padding: 1px 8px; margin: 3px 0 2px; cursor: pointer;
}
.clip-add:hover { color: #334155; border-color: #9aa6b2; background: #f3f6f8; }

/* 🗓 scope */
.clip-scope-row { display: flex; align-items: flex-start; gap: 6px; }
.clip-scope-item { flex: 1; }
.clip-scope-time { width: 56px; color: #6b7682; text-align: right; }

/* 📝 topics */
.clip-topic { margin: 0 0 12px; padding: 6px 0 4px; border-bottom: 1px dashed #e9edf0; }
.clip-topic-head { display: flex; align-items: center; gap: 4px; }
.clip-topic-h { font-weight: 700; color: #b91c1c; font-size: 13.5px; }
.clip-bullet-row, .clip-flag-row { display: flex; align-items: flex-start; gap: 5px; padding-left: 6px; }
.clip-dot { color: #5a6570; line-height: 1.55; flex: none; }
.clip-warn { color: #b45309; line-height: 1.55; flex: none; }
.clip-bullet { flex: 1; }
.clip-flag { flex: 1; color: #8a5a12; }
.clip-add-bullet, .clip-add-flag { margin-left: 6px; }
.clip-add-flag { border-color: #e3cda0; color: #a9772a; }
.clip-add-flag:hover { background: #fbf3e2; border-color: #cda85f; }

/* 📊 snapshot — a light grid */
.clip-snap-head { display: flex; gap: 8px; font-size: var(--fs-ui); text-transform: uppercase; letter-spacing: .5px; color: #97a1ac; padding: 2px 0; }
.clip-snap-head span:nth-child(1) { width: 28%; } .clip-snap-head span:nth-child(2) { width: 30%; } .clip-snap-head span:nth-child(3) { flex: 1; } .clip-snap-head span:nth-child(4) { width: 14px; }
.clip-snap-row { display: flex; align-items: flex-start; gap: 8px; border-top: 1px solid #eef1f4; padding: 2px 0; }
.clip-snap-d { width: 28%; font-weight: 600; }
.clip-snap-r { width: 30%; color: #334155; }
.clip-snap-e { flex: 1; color: #555f69; }

/* ❓ if they ask */
.clip-qa { position: relative; margin: 0 0 8px; padding: 4px 0 4px 8px; border-left: 2px solid #dfe7ee; }
.clip-qa-q .clip-qa-in { font-weight: 700; }
.clip-qa-a .clip-qa-in { color: #46505a; }
.clip-qa-x { position: absolute; top: 2px; right: 0; }

/* 📎 bring */
.clip-bring-row { display: flex; align-items: flex-start; gap: 5px; }
.clip-clip { flex: none; line-height: 1.55; }
.clip-bring { flex: 1; }

.clip-foot { margin-top: 18px; font-size: var(--fs-ui); color: #9aa3ac; font-style: italic; text-align: center; }

/* 📋 overview — patient name + a sub-bar of three WHOLE-FILE docs */
.clip-ov-name { margin-bottom: 8px; }
.clip-ov-patient { font-weight: 700; font-size: 17px; color: #1c2024; }
/* the harness pointer — copy, not a button: the chart is observation; the harness is 🗂️ / ⚙️ in the topbar */
.clip-harness-note { margin-top: 16px; padding-top: 8px; border-top: 1px solid #e6ddc9; font-size: var(--fs-ui); color: #7c8590; font-style: italic; line-height: 1.5; }
.clip-harness-note b { color: #5a6570; font-style: normal; }

/* the sub-bar — reuses the prep discipline-chip look (one learned control, repeated). serves overview + complaints. */
.clip-subbar { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 10px; }
.clip-ovsub, .clip-folder { font-size: var(--fs-ui); }
.clip-folder-n { display: inline-block; min-width: 15px; padding: 0 4px; margin-left: 3px; border-radius: 8px;
  background: #334155; color: #fff; font-size: var(--fs-ui); line-height: 15px; text-align: center; }
.clip-chip.on .clip-folder-n { background: #fff; color: #334155; }

/* the WHOLE-FILE doc — a full page, grows tall, the sheet scrolls. pre-wrap keeps the exec-summary line breaks. */
.clip-doc { font-size: 13.5px; line-height: 1.6; min-height: 180px; white-space: pre-wrap; }

/* 📑 quick-guides sub-bar — guide titles can be long, so the chips truncate (full title on hover + below) */
.clip-gsub { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-guide-head { display: flex; align-items: flex-start; gap: 4px; margin: 2px 0; }
.clip-guide-x { margin-top: 4px; }

/* the catch-all note above the folders */
.clip-cmp-note { font-size: 13px; color: #7c8590; font-style: italic; line-height: 1.5; margin: 2px 0 10px; }
/* the open folder's scope — env reads "EVERYTHING outside the body" here */
.clip-folder-desc { font-size: var(--fs-ui); color: #80899a; font-style: italic; line-height: 1.4; margin: 2px 0 9px; padding-left: 2px; }

/* 🩹 complaint files — manila cards in the open folder */
.clip-cfiles { margin: 2px 0 4px; }
.clip-cfile { margin: 0 0 9px; padding: 7px 9px 8px; background: #fcfaf4; border: 1px solid #ece5d6; border-radius: 6px; border-left: 3px solid #c8a96b; }
.clip-cfile-head { display: flex; align-items: flex-start; gap: 4px; }
.clip-cfile-title { font-weight: 700; color: #b91c1c; font-size: 13.5px; }
.clip-cfile-body { color: #46505a; margin-top: 1px; }
.clip-cfile-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.clip-cfile-tags-l { font-size: var(--fs-ui); text-transform: uppercase; letter-spacing: .4px; color: #97a1ac; margin-right: 2px; }
/* folder toggles — state via BACKGROUND, not opacity (emoji stays full-color; IC: no faded text/emoji) */
.clip-cfile-tag { font-size: var(--fs-ui); line-height: 1; padding: 3px 6px; border-radius: 5px; cursor: pointer;
  background: #efeae0; border: 1px solid #e2dac8; }
.clip-cfile-tag.on { background: #fff; border-color: #c8a96b; box-shadow: inset 0 -2px 0 #c8a96b; }
.clip-cfile-empty { font-size: var(--fs-ui); color: #97a1ac; font-style: italic; padding: 12px 2px; text-align: center; }


/* ── 📈 at-a-glance health-report control (clip-health-report.js) ── */
/* 📈 at-a-glance health-report control — reuses .clip-chip / .clip-chip.on for the selected state */
.clip-hr-cats, .clip-hr-scopes { margin-bottom: 6px; }
.clip-hr-go { margin-top: 2px; }
.clip-hr-print { font-weight: 700; background: #334155; color: #fff; border-color: #334155; }
.clip-hr-print:hover { background: #26313f; border-color: #26313f; }
/* scope buttons read as a segmented set — the active one uses the shared .on styling; give the group a hair more presence */
.clip-hr-scope.on { font-weight: 700; }