/* IC SHIP PASS — generated by icpass.py from the map. edit the CODE; rerun to refresh this. ══════════════════════════════════════════════════════════════════════ PAGE 0 — TABLE OF CONTENTS (goldfish pointers) jump by SEARCHING the anchor phrase — line numbers drift, names don't. ══════════════════════════════════════════════════════════════════════ the sticky header — the top line (AI/HIL + ... search: "the sticky header — the" 📈 at-a-glance health-report control .......... search: "📈 at-a-glance" ══════════════════════════════════════════════════════════════════════ FOR AI ─────── **OWNS** — The visual skin for the clipboard card: a charcoal board with a fixed 603:845 **aspect ratio that pins a lined intake sheet at known percentages. All class names **(`.clip-*`) are the single source of truth for the HTML that renders the clipboard UI; **renaming any breaks the JavaScript that selects and styles them. **TOUCH HERE** — - Change the paper color or the board image → `.clip-board` background L18 - Change the sticky header (AI/HIL tabs + actions) appearance → `.clip-stick` L57–61 - Change section tab styling (overview · complaints · prep) → `.clip-tab` L64–75 - Change input field focus state or placeholder text → `.clip-in` L103–109 - Change the red accent color (currently `#b91c1c`) → appears in `.clip-tab.on` L73, - `.clip-topic-h` L147, `.clip-cfile-title` L209, `.clip-sess-x:hover` L99 - Change the delete/close button (✕) behavior → `.clip-x` L125–132 - Change the add-row button styling → `.clip-add` L133–137 - Change the health-report control colors → `.clip-hr-print` L224–225 **TRAPS** — - The aspect-ratio `603 / 845` on `.clip-board` L17 is load-bearing: it positions the paper at - a known percentage so form fields pin correctly at all card sizes. Changing it orphans the - `top: 20.5%; height: 72.5%` values on `.clip-sheet` L45. - The sticky header `.clip-stick` L57–61 must have `z-index: 3` to stay above scrolling - content; lowering it will bury the tabs. - The red accent `#b91c1c` appears in four places (L73, L99, L147, L209); changing one without - the others breaks visual consistency. - The `.clip-sheet` scrollbar styling L52–53 uses webkit-only selectors; Firefox users see the - browser default. - The `.clip-in:focus` background L109 must contrast with the paper color L60 or focused - inputs vanish. **DO NOT** — - Rename any `.clip-*` class without updating the JavaScript selectors in - `clip-health-report.js` and the HTML template. - Move or delete the `clipboard-card.png` or `clipboard-bar.png` image references (L7, L18) - without updating the asset paths. - Change the form's transparent background L47 or the paper's background L60 without testing - that inputs remain readable. - Add animations or transitions to `.clip-sheet` scrolling; the desk is meant to scroll - smoothly without jank. - Adjust the sticky header's negative margins L59 without re-testing that the topline and tabs - align correctly when scrolling. --- END IC SHIP PASS */ /* 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: var(--fs-ui); 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: var(--fs-ui); 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; } /* ⭐ 7 Sep 2026 — THE READ VIEW. Sum: "show me the PRINT VIEW, not the chart view — that I can close." An iframe because prepPrintHtml returns a WHOLE DOCUMENT with its own print stylesheet; rendered inline it would leak into the card and the card's CSS would leak into it. Isolated, it is exactly what prints. ⚠ An iframe with no height renders as a ~150px sliver and looks broken rather than empty — which is the failure this card already cost him once. Give it real room. */ /* ⭐ 7 Sep — FULL CARD. Sum: "take up the whole card. the clipboard is just nav and hints." In read mode the chart IS the document and the chrome shrinks to a strip above it. 62vh was a panel's height; a document wants the room. */ .clip-watch-frame { display: block; width: 100%; height: 100%; min-height: 78vh; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.12); } .clip-sheet.reading .clip-tab-body { padding: 0; height: calc(100% - 46px); } .clip-sheet.reading .clip-stick { padding-bottom: 4px; } .clip-tool.clip-watch.on { background: #2f6f4f; color: #fff; border-color: #2f6f4f; } /* ⭐⭐ 7 Sep 2026 — ICONS, NOT WORDS. Sum: "lets start removing english and any emoticons. images translate better but emoticons break too easily." Both halves are right and they are different arguments. ENGLISH: a word is a translation job on every surface; a printer is a printer in every language. EMOJI: 🖨 and 👁 are FONT-dependent — they render differently per platform, go monochrome where colour was assumed, and vanish entirely where the glyph is missing. An SVG on our own disk renders the same everywhere and nobody can change it under us. ⚠ THE VISIBLE LABEL GOES; THE ACCESSIBLE NAME STAYS. Every one of these keeps title + aria-label, so a screen reader still announces it. An unnamed icon button is a control only sighted users have — and a11y is the product here, not a courtesy. */ .clip-tool.clip-ico { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; min-width: 44px; min-height: 34px; } /* 44px: a real touch target, not a pixel hunt */ .clip-tool.clip-ico img { width: 22px; height: 22px; display: block; object-fit: contain; pointer-events: none; } /* 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: var(--fs-ui); 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: var(--fs-ui); 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: var(--fs-ui); } .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: var(--fs-xl); 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. */ /* 2026-08-29 (Sum: "the print on the clipboard needs to be bigger, should match bot on same zoom"): the sheet BASE was already var(--fs-ui), but the actual reading text sat on hardcoded 13–13.5px below it — this doc, the topic heads, the tabs. All swept up to the tokens (20px floor, same as the bot convo's --fs-body); a11y is the product, no print under the floor on this card. */ .clip-doc { font-size: var(--fs-xl); 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: var(--fs-ui); 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: var(--fs-ui); } .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; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════════ ⭐⭐⭐ 7 Sep 2026 — THE BOARD STOPS BEING A PICTURE OF A CLIPBOARD. Sum: "I want to go a whole new way, the clipboard never really worked. I wanted it to FILL THE CARD not maintain its proportions — let it stretch and grow. when scroll down keep the top (area of clip and tool tabs) at top, let it flow off screen." And the sentence under all of it: **"I have never used clipboard. I have always used claude in code to make these in the past."** ⭐ THAT LAST LINE IS THE DIAGNOSIS. This card was built as a DEMONSTRATION of a chart — a photograph of a clipboard, paper pinned at 20.5%/72.5% of a 603:845 frame, placeholders teaching a reader what each slot is for. It is a beautiful thing to LOOK at and it was never a thing he WORKED in. Every complaint this week — too busy, cannot see state, cannot watch her fill it — is that one fact. ⚠ APPENDED AS AN OVERRIDE, NOT SURGERY, ON PURPOSE. The skin above is intact and this block is deletable in one selection if he hates it. Move fast, but leave the door open behind you. ═══════════════════════════════════════════════════════════════════════════════════════════════════ */ .clip-board { width: 100%; height: 100%; /* fill the card */ aspect-ratio: auto; /* ⭐ the pinning goes — this was the load-bearing line */ background: #fbfaf7; /* paper, not a photograph of a board */ margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 0; } .clip-sheet { position: static; top: auto; left: auto; right: auto; width: 100%; height: auto; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px 28px; } /* the nav stays put and the document flows off under it — his words exactly */ .clip-stick { position: sticky; top: 0; z-index: 3; background: #fbfaf7; padding: 8px 0 6px; margin: 0 0 6px; border-bottom: 1px solid #e6e0d4; } /* icon tabs — square, honest touch targets, the label lives in the tooltip */ .clip-tabs { display: flex; gap: 6px; } .clip-tab.clip-ico { min-width: 44px; min-height: 38px; padding: 6px 10px; } .clip-tab.clip-ico img, .clip-side.clip-ico img { width: 22px; height: 22px; display: block; object-fit: contain; pointer-events: none; } .clip-side.clip-ico { min-width: 40px; min-height: 34px; padding: 5px 8px; display: inline-flex; align-items: center; justify-content: center; } /* ═══════════════════════════════════════════════════════════════════════════════════════════════════ ⭐⭐ 7 Sep 2026 — THE ART BECOMES A FRAME. Sum: "can we use the clipboard png just for the border … have the clipboard art just be the very top and sides and very bottom." ⭐ THAT IS A NINE-SLICE, and it is the right instinct: the corners hold their shape, the edges repeat, and the middle is just paper that grows. The old rule made the art a BACKGROUND, which is why the card had to keep 603:845 — a photograph cannot stretch without distorting. A border can. THE NUMBERS COME FROM THE OLD GEOMETRY, not from guessing: the paper used to sit at top 20.5% of a 256-tall source (≈52px) and ended 7% from the bottom (≈18px). Sides ≈12px of 183. So the slice is the frame the paper was always pinned inside — the same measurements, read off the thing being replaced. ═══════════════════════════════════════════════════════════════════════════════════════════════════ */ .clip-board { background: #fbfaf7; border-style: solid; /* 7 Sep — clip moved up, gap closed. The top slice was 52 of a 256-tall source, which included a band of grey below the clamp before the paper began. The clamp's base sits at ~y40, so slicing there puts the paper directly under it. Confirmed on screen. */ border-width: 40px 12px 18px 12px; border-image: url('clipboard-card.png') 40 12 18 12 stretch; border-radius: 0; } /* ⭐ ONE LINE, WRAPPING. Sum: "align all the tabs with icon onto one line that can wrap if it needs to." Source tabs (bot/human), section tabs, and the actions were three groups on two rows. One row now, wrapping only when the card is genuinely too narrow — and the actions still push right. */ .clip-stick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .clip-stick .clip-topline { display: contents; } /* dissolve the old row so its children join the line */ .clip-stick .clip-tabs { display: contents; } /* same — the section tabs sit on the shared line */ .clip-stick .clip-sides { display: flex; gap: 4px; margin-right: 4px; } .clip-stick .clip-acts { margin-left: auto; display: flex; gap: 6px; align-items: center; } /* 7 Sep — the sheet scrolls again (my last block removed the scroller and nothing moved), and the nav is no longer sticky, so the tabs ride up and out as you scroll. ⚠ The CLIP cannot go with them while it lives in the board's BORDER — a border does not scroll with its own content. Making it leave means it stops being a border and becomes an element at the top of the scrolling sheet. That is a different change and I have not made it. */ .clip-board { height: 100%; } .clip-sheet { overflow-y: auto; height: auto; flex: 1 1 auto; min-height: 0; } .clip-stick { position: static; border-bottom: 0; background: transparent; } /* 7 Sep 2026 — the folder chips wear DRAWINGS now, not emoji (the 🌍 rendered as an empty box). The icon and its word sit on one line; the word hides on a narrow card so four folders always fit. */ .clip-folder { display: inline-flex; align-items: center; gap: 6px; } .clip-folder-i { width: 18px; height: 18px; display: block; object-fit: contain; pointer-events: none; } .clip-cfile-tag .clip-folder-i { width: 16px; height: 16px; } .clip-cfile-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; } @container (max-width: 420px) { .clip-folder-t { display: none; } } /* 7 Sep — the discipline chips wear their instrument where he named one (OT · PT · LCSW · Psych · GP); CM and Intake stay lettered. Icon + word on one line, word drops on a narrow card. */ .clip-disc { display: inline-flex; align-items: center; gap: 5px; } .clip-disc-i { width: 17px; height: 17px; display: block; object-fit: contain; pointer-events: none; } /* 7 Sep — the letters came off ("jsut teh svg, no letter"), so the chip is a square touch target around one drawing. Bigger than the old text chip on purpose: a11y is the product. */ .clip-disc { min-width: 38px; min-height: 32px; justify-content: center; padding: 4px 8px; } .clip-disc-i { width: 20px; height: 20px; } /* 7 Sep 2026 — ONE LINE: local left, global right (Sum: "left local right stays global"). The discipline chips are the same seven on every chart; the saved sheets are this person's own. Side by side they read as what they are instead of as two stacked rows of the same kind of thing. */ .clip-disc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .clip-local { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; } .clip-disc-chips { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } /* the dropdowns — six truncated chips became one readable control */ .clip-pick { font: inherit; font-size: var(--fs-ui); max-width: 100%; padding: 4px 8px; border-radius: 7px; background: #f3ede0; color: #3a332a; border: 1px solid #ddd3c0; cursor: pointer; } .clip-pick:hover { background: #ece5d6; } .clip-sess-empty { font-size: var(--fs-ui); opacity: .55; font-style: italic; } /* ⭐ 7 Sep 2026 — THE NAV IS ONE LINE. Sum: "make nav take up less y… left side changes, gap in middle, on narrow screen they wrap to next line as whole sections." The two groups are nowrap INSIDE and the container wraps BETWEEN them — that is what makes a narrow card drop the actions to their own line intact, instead of shedding buttons one at a time. */ .clip-stick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .clip-nav-l { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; } .clip-acts { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-left: auto; } .clip-subnav { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 4px; } /* the explainer that used to cost two lines on every tab, now behind ⓘ */ .clip-info-btn { font-size: 15px; line-height: 1; padding: 4px 8px; opacity: .65; } .clip-info-btn.on, .clip-info-btn:hover { opacity: 1; } .clip-info { font-size: var(--fs-ui); line-height: 1.5; margin: 2px 0 8px; padding: 8px 10px; border-radius: 8px; background: #f3ede0; color: #4a4234; border: 1px solid #e2d9c6; } /* ⭐ 7 Sep 2026 — TABS, NOT PILLS, EVERYWHERE (Sum: "lets use tabs not pills for all"). The section tabs were already manila tabs; the sub-nav was still rounded pills, so one nav line carried two different metaphors — the eye read them as two unrelated rows crammed together. Same shape for everything that SELECTS: square shoulders on the bottom, sitting on the seam. */ .clip-nav-l .clip-chip, .clip-nav-l .clip-pick, .clip-nav-l .clip-save { border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent; align-self: flex-end; } .clip-nav-l .clip-chip.on { border-bottom-color: var(--nurse-red, #c0392b); background: #fbf7ef; } .clip-stick { align-items: flex-end; border-bottom: 1px solid #e2d9c6; padding-bottom: 0; } .clip-acts { align-self: center; } /* the count badge got cramped once the folder label came off */ .clip-folder-n { margin-left: 4px; font-size: 11px; opacity: .8; } /* ⭐ 7 Sep 2026 — EVERY TAB THE SAME SIZE, AND THE ICON FILLS IT (Sum: "the tabs are too small, lets just make all same size global and loval, let icon fill it as well… touch bigger, let icon fill y"). ⚠ THE OLD RULES FOUGHT EACH OTHER: .clip-tab.clip-ico img was 22px, .clip-disc-i was 20, .clip-folder-i was 18 — three separate caps written on three different afternoons, so one nav line held three icon sizes and read as ragged. One rule now, and it is the LAST word (appended, so it wins). Icons are height-driven; a wide one (the bone is ~4:1) is width-capped by object-fit rather than squashed — it comes out shorter than the rest, which is honest for its shape. */ .clip-nav-l .clip-chip, .clip-nav-l .clip-tab, .clip-nav-l .clip-pick, .clip-nav-l .clip-save { min-height: 44px; min-width: 48px; padding: 5px 10px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } .clip-nav-l img, .clip-nav-l .clip-tab.clip-ico img, .clip-nav-l .clip-disc-i, .clip-nav-l .clip-folder-i { height: 32px; width: auto; max-width: 100%; object-fit: contain; display: block; } .clip-nav-l .clip-info-btn { font-size: 19px; } /* 7 Sep — a body system or provider you added yourself has no drawing, so it wears its letters. Same honesty as CM and Intake: a label that admits it is a label beats a guessed picture. */ .clip-xtag { font-size: 12px; font-weight: 700; letter-spacing: .3px; line-height: 1; } .clip-addx { font-size: 20px; line-height: 1; opacity: .55; } .clip-addx:hover { opacity: 1; } .clip-delx { font-size: 14px; line-height: 1; color: #b03a2e; opacity: .7; } .clip-delx:hover { opacity: 1; } /* ⭐ 7 Sep 2026 — 13 CHARACTERS AND READABLE (Sum: "give them up to 13 characters and wider tabs for words and better contrast, since a11y is 13 letters.... that is all you get"). ⚠ THE CONTRAST BUG: a worded tab inherited the icon-tab's colours, so the active one drew near-white text on cream — the exact failure the modal had this afternoon, in a different corner. A tab that holds WORDS needs its own ink, stated, not inherited. */ .clip-nav-l .clip-chip:has(.clip-xtag) { min-width: 0; padding: 5px 12px; } .clip-xtag { font-size: 12.5px; font-weight: 700; letter-spacing: .2px; line-height: 1.15; color: #2f2a22; /* stated, never inherited */ white-space: nowrap; /* 13 is enforced at input now, so nothing needs truncating here */ } .clip-nav-l .clip-chip.on .clip-xtag { color: #1d1a15; } .clip-nav-l .clip-chip.on { background: #fbf7ef; } /* 7 Sep — the guide head's ✕ was rendering but invisible after the nav restructure (the head lost its row layout, so the button collapsed against a full-width title field). The delete that WORKS now sits in the nav beside the +, where every other add/delete pair on this card lives. Keeping the head one wired but laying it out properly, so both roads reach the same handler. */ .clip-guide-head { display: flex; align-items: flex-start; gap: 8px; } .clip-guide-head .clip-cfile-title { flex: 1 1 auto; min-width: 0; } .clip-guide-head .clip-guide-x { flex: 0 0 auto; } /* 7 Sep — the nav DELETE is a bin, not an ✕. On this card ✕ has always meant "close this row"; pointing the same glyph at destruction is how someone loses a guide reaching for dismiss. One glyph, one job. */ .clip-nav-l .clip-delx img { height: 22px; width: auto; object-fit: contain; display: block; } .clip-nav-l .clip-delx { opacity: .7; } .clip-nav-l .clip-delx:hover { opacity: 1; background: #fbe9e6; } /* ⭐ 7 Sep 2026 — the picker that can hold a bin. A native