/* ============================================================================= mh-casenotes.css - THE CASE NOTES SECTION. Aug 19 2026. CEO: "It is a top-level section... this is a very important section." SCOPED TO .cn- ONLY. The prefix was grepped before it was claimed - nothing else in the app owns it. The section's SHELL (.cl-wrap / .cl-side / .cl-item / .cl-scroll / .cl-seclbl / .phead / .pl-sub) is deliberately NOT redefined here: Case Notes wears the same views panel Clients and Program wear, so it must read from the same rules. Only what is genuinely new to this section lives here. DARK MODE IS body.dark, and it redefines ink / muted / surface / line / cream-2 / ctrl-* / shadow - but NOT --mh-slate. Text painted with --mh-slate stays dark-on-dark. Every text colour here uses --mh-ink or --mh-muted for that reason. --mh-danger is deliberately the same in both modes, per the design brief. Tokens only - no literal colours. The app carries a real dark mode and a root zoom, so a hard-coded hex or a bare vh here would break one of them. ============================================================================= */ /* ---- the note journal: SUPERSEDED (CASENOTES-07, Aug 20 2026) -------------- .cn-list / .cn-note / .cn-head / .cn-subject / .cn-when / .cn-title / .cn-body / .cn-foot / .cn-by are GONE. The note list is now .idgrid + .idcard - the household KPI card, worn unchanged (CEO: "same design same interface"). The rules are deleted rather than left behind, because a dead selector is the next person's evidence that a component still exists. .cn-title and .cn-body are gone with them - the card has .cn-cardtitle and .cn-cardbody instead. BUT .cn-list / .cn-note / .cn-head / .cn-subject / .cn-when / .cn-foot / .cn-by ARE KEPT BELOW, because the TRANSFERS worklist still wears them. A transfer card is a decision to make, not a record to browse: it is deliberately a compact row with no photo and no note text (sp_GetMyCaseNoteTransfers returns neither), so turning it into an .idcard would promise a record it cannot show. Deleting these outright would have left that whole view unstyled - caught before it shipped. --------------------------------------------------------------------------- */ /* ---- the TRANSFER worklist row (these six are now used ONLY there) --------- */ .mh-app .cn-list { display: flex; flex-direction: column; gap: 10px; } .mh-app .cn-note { background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--mh-shadow-sm); transition: box-shadow .15s ease, border-color .15s ease; } .mh-app .cn-note:hover { border-color: var(--mh-ctrl-ico); } .mh-app .cn-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .mh-app .cn-head .cn-subject { font-weight: 700; font-size: 14.5px; color: var(--mh-ink); } .mh-app .cn-head .cn-when { margin-left: auto; font-size: 12.5px; color: var(--mh-muted); white-space: nowrap; } .mh-app .cn-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .mh-app .cn-by { font-size: 12.5px; color: var(--mh-muted); } .mh-app .cn-by b { color: var(--mh-ink); font-weight: 600; } @media (max-width: 900px) { .mh-app .cn-head { flex-wrap: wrap; } .mh-app .cn-head .cn-when { margin-left: 0; width: 100%; } } /* The subject KIND - Client / Household / Program. A note that belongs to no single record is exactly why this section exists, so the kind is stated on every card. */ .mh-app .cn-kind { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--mh-cream-2); color: var(--mh-muted); white-space: nowrap; } .mh-app .cn-kind.client { background: rgba(78,124,114,.12); color: var(--mh-ctrl-accent); } .mh-app .cn-kind.household { background: rgba(78,124,114,.12); color: var(--mh-ctrl-accent); } .mh-app .cn-kind.program { background: rgba(78,124,114,.12); color: var(--mh-ctrl-accent); } /* THE CHIP. Its `svg { width:13px; height:13px }` below is NOT optional: an inline SVG with only a viewBox and no width falls back to the CSS default of 300x150, so losing that one line made a two-chip row 949px TALL and stretched every card in its grid row to 1233px. Measured, not guessed. */ .mh-app .cn-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--mh-cream-2); color: var(--mh-muted); white-space: nowrap; } .mh-app .cn-chip svg { width: 13px; height: 13px; } .mh-app .cn-chip.conf { background: rgba(176,70,60,.12); color: var(--mh-danger); } .mh-app .cn-chip.due { background: rgba(78,124,114,.12); color: var(--mh-ctrl-accent); } .mh-app .cn-chip.overdue { background: rgba(176,70,60,.12); color: var(--mh-danger); } /* ---- counts on the views panel: REMOVED (POLISH, Aug 20 2026) ------------- The CEO, 19 Aug: "the way you add those KPI cards, that is not our standard - we will change it to our default KPI cards that are located everywhere in Household, Clients, Program." .cn-count was that non-standard thing: a pill invented for this one rail. Every figure now lives in `.kpi-strip` at the top of the body - the app's own read-only tile, defined in mh-theme.css and already worn by Program's sessions tab. The rules are deleted rather than left behind, because a dead selector is the next person's evidence that a component still exists. /* ---- empty state --------------------------------------------------------- */ /* Same anatomy as .pg-empty so the section does not invent a second way of saying "there is nothing here". */ .mh-app .cn-empty { text-align: center; padding: 90px 20px; } .mh-app .cn-empty .ic { width: 64px; height: 64px; border-radius: 50%; background: var(--mh-cream-2); display: inline-grid; place-items: center; margin-bottom: 14px; color: var(--mh-muted); } .mh-app .cn-empty h3 { font-family: var(--mh-font-head); font-size: 20px; color: var(--mh-ink); margin-bottom: 6px; } .mh-app .cn-empty p { color: var(--mh-muted); font-size: 13.5px; max-width: 420px; margin: 0 auto; } /* ---- responsive ---------------------------------------------------------- */ @media (max-width: 900px) { .mh-app .cn-head { flex-wrap: wrap; } .mh-app .cn-head .cn-when { margin-left: 0; width: 100%; } } /* ============================================================================= CASE NOTE DETAIL - the DetailShell host body. SCOPED UNDER #mhDetail, exactly like the shell's own .pd-card family in detail-view.css, because that is where the shell's local tokens (--f-focus-bg, --line, --r-lg, --ink-*, --brand-600) are defined. A card written outside that scope loses every one of them and renders unstyled. Modelled on .pd-card / .pd-ch rather than invented: same white panel, same hairline, same 18/19px padding, same 11.5px uppercase heading with a 16px brand-stroked glyph. A sixth host must not introduce a sixth card design. ============================================================================= */ #mhDetail .cnd-card{ background:var(--f-focus-bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 19px; display:flex; flex-direction:column; min-width:0; margin-bottom:16px; } #mhDetail .cnd-card:last-child{margin-bottom:4px} #mhDetail .cnd-ch{display:flex;align-items:center;gap:10px;margin-bottom:15px} #mhDetail .cnd-ch h4{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)} #mhDetail .cnd-ci{display:inline-flex;flex:none} #mhDetail .cnd-ci svg{width:16px;height:16px;flex:none;stroke:var(--brand-600);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round} /* THE NOTE BODY. A caseworker's paragraph, printed as written - pre-wrap keeps the line breaks they typed, because in a case note a new line is usually a new event. */ #mhDetail .cnd-body{ font-size:14.5px; line-height:1.65; color:var(--ink-1); white-space:pre-wrap; word-break:break-word; } /* CONFIDENTIAL, at the TOP of the note. Whoever opens this needs to know before they read it, not after - so it is a banner, not a fact row. */ #mhDetail .cnd-conf{ display:flex; align-items:center; gap:9px; margin:0 0 14px; padding:10px 13px; border-radius:10px; background:var(--danger-bg); border:1px solid rgba(192,71,63,.22); color:var(--danger-ink); font-size:13px; font-weight:650; } #mhDetail .cnd-conf svg{width:15px;height:15px;flex:none} #mhDetail .cnd-outcome{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; line-height:1.6; color:var(--ink-2); } #mhDetail .cnd-outcome-l{ font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; } /* FOLLOW-UP. The date is the headline; whether it has passed is the point. */ #mhDetail .cnd-follow{display:flex; flex-direction:column; gap:3px} #mhDetail .cnd-follow-d{font-size:17px; font-weight:750; color:var(--ink-1); letter-spacing:-.01em} #mhDetail .cnd-follow-s{font-size:13px; font-weight:600; color:var(--brand-600)} #mhDetail .cnd-follow.over .cnd-follow-d{color:var(--danger-ink)} #mhDetail .cnd-follow.over .cnd-follow-s{color:var(--danger)} /* DEFINITION GRID - label over value, the brief's named component. Two columns at 1280 and one below 900, obeying the 3-column cap's spirit: never auto-fill. */ #mhDetail .cnd-defs{display:grid; grid-template-columns:1fr 1fr; gap:15px 22px} #mhDetail .cnd-def{min-width:0} #mhDetail .cnd-def-k{ font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px; } #mhDetail .cnd-def-v{font-size:14px; font-weight:600; color:var(--ink-1); overflow-wrap:anywhere} /* The "a case note is a signed journal entry ..." line under Details was removed on 18 Sep 2026 (owner: "remove the hint text on the Details section"). Nothing draws .cnd-note-hint any more. */ @media (max-width:900px){ #mhDetail .cnd-defs{grid-template-columns:1fr} } /* ============================================================================= COMMENTS ON THE CASE-NOTE FILE (CEO, 26 Aug 2026). "Open a new TAB next to the NOTES and name it COMMENTS." DELIBERATELY QUIETER THAN A NOTE. A case note is a signed journal entry and its card carries the weight to say so; a comment is a message to a colleague. Same tokens, less of them - no card of its own, no lamp, no chips, no footer. If the two ever look alike on this screen, the tab has failed at the one job it was created for. PREFIX CHECKED BEFORE IT WAS CLAIMED: nothing in this app used .cnd-cmt*. ============================================================================= */ #mhDetail .cnd-cmtadd{margin-bottom:16px} #mhDetail .cnd-cmtadd .icf.area textarea{min-height:76px} #mhDetail .cnd-cmtacts{display:flex; justify-content:flex-end; margin-top:10px} /* ---- @-MENTION PICKER (Aug 31 2026) ------------------------------------------ PREFIX CHECKED BEFORE IT WAS CLAIMED: nothing in this app used .cnd-mention*. It is NOT a reuse of .cl-mention* even though both render inside #mhDetail - that set is owned by client-detail-view.css, and sharing it would mean a change to the Client Record's picker silently moved this one. Teams (.tm-), Student Detail (.sd-) and Client Record (.cl-) each own their prefix; this is the fourth. justify-content:flex-start IS LOAD-BEARING. MudBlazor.min.css ships a bare `button{justify-content:center}`, and a bare element selector loses to a class ONLY if the class actually declares the property - `text-align:left` does not, because text-align does not govern a flex main axis. That is exactly the defect the CEO reported on the Client Record picker on 31 Aug 2026, and it is why this rule names the property instead of relying on the default. */ #mhDetail .cnd-cmtadd{position:relative} #mhDetail .cnd-mentionpop{ position:absolute; left:0; top:calc(100% + 6px); z-index:90; width:min(320px,100%); background:var(--f-focus-bg); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--f-focus-sh); overflow:hidden} /* The composer sits at the TOP of the comments card with the whole list below it, so the menu always opens downward; the markup pins mh-pop-below and this pair keeps the shared MHmentions.place() contract honoured if it is ever wired here. */ #mhDetail .cnd-mentionpop.mh-pop-below{top:calc(100% + 6px); bottom:auto} #mhDetail .cnd-mentionpop.mh-pop-above{bottom:calc(100% + 6px); top:auto} #mhDetail .cnd-mentionscroll{max-height:232px; overflow-y:auto; padding:5px} #mhDetail .cnd-mentionopt{ display:flex; align-items:center; justify-content:flex-start; gap:9px; width:100%; padding:8px 9px; border:none; border-radius:var(--r-sm); background:none; cursor:pointer; text-align:left; font:inherit; color:var(--ink-1)} #mhDetail .cnd-mentionopt:hover,#mhDetail .cnd-mentionopt.on{background:var(--brand-tint)} #mhDetail .cnd-mentionav{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:800; color:#fff} #mhDetail .cnd-mentionnm{ font-size:13px; font-weight:700; color:var(--ink-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} #mhDetail .cnd-cmtlist{display:flex; flex-direction:column} /* SEPARATED BY A RULE, NOT BOXED. A stream of boxes reads as a stack of records; a stream of paragraphs reads as a conversation, which is what this is. */ #mhDetail .cnd-cmt{padding:13px 0; border-top:1px solid var(--line); min-width:0} #mhDetail .cnd-cmt:first-child{border-top:0; padding-top:2px} #mhDetail .cnd-cmt-h{display:flex; align-items:center; gap:9px; margin-bottom:5px; flex-wrap:wrap} #mhDetail .cnd-cmt-who{font-size:13.5px; font-weight:750; color:var(--ink-1)} #mhDetail .cnd-cmt-when{font-size:12px; font-weight:600; color:var(--ink-3)} /* WHICH MEMBER - the household roll-up's label (CEO, 31 Aug 2026: "it must be recognize for which member the comment left on"). Aug31. NOT `.pill`. A pill in this app is a STATUS, and status-unify.css paints every one of them from the seven-hue contract; borrowing it here would put a status colour on a person's name and quietly add a 39th user of a class this file already warns about (see the .cn-pill note above). This is an attribution, so it is drawn as one: quiet ink, a hairline, no hue. min-width:0 + ellipsis because a long name must not push the timestamp or the remove control off the row - the header is flex-wrap:wrap above for the same reason, so a narrow pane drops the tag to its own line instead of squeezing it. */ #mhDetail .cnd-cmt-on{ display:inline-flex; align-items:center; gap:5px; min-width:0; max-width:100%; padding:2px 8px 2px 6px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2, rgba(40,60,80,.04)); font-size:11.5px; font-weight:700; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #mhDetail .cnd-cmt-on svg{width:12px; height:12px; flex:none; color:var(--ink-3)} /* The card-header caption that says what the list is scoped to. Same quiet register as the tag - it is a label on the section, not a claim about the family. */ #mhDetail .cnd-cmt-scope{ margin-left:auto; font-size:11.5px; font-weight:650; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } /* EDIT REPLACED DELETE (CEO, 31 Aug 2026). The old .cnd-cmt-del rule is gone with its button; the X is no longer drawn on any comment screen. margin-left:auto rather than a spacer so the control stays at the far end when the author's name wraps. justify-content is NOT needed here - this button is not a flex container, so MudBlazor's bare `button{justify-content:center}` has nothing to centre. */ #mhDetail .cnd-cmt-edit{ margin-left:auto; flex:none; padding:2px 9px; border:1px solid var(--line); border-radius:999px; background:none; cursor:pointer; font-family:var(--font-sans); font-size:11.5px; font-weight:700; color:var(--ink-3); transition:background .14s ease, color .14s ease, border-color .14s ease; } #mhDetail .cnd-cmt-edit:hover{background:var(--brand-tint); color:var(--brand); border-color:var(--brand)} /* "edited" - a MARKER, not a badge. It must be readable and ignorable at the same time: a colleague scanning the thread should not have their eye pulled to it, but anyone asking "did this say something else?" must find the answer without leaving the row. The full who/when is on the title attribute. */ #mhDetail .cnd-cmt-edited{ flex:none; font-size:11px; font-weight:650; font-style:italic; color:var(--ink-4); cursor:help; } /* THE IN-PLACE EDITOR. The comment body is replaced by the field, so the message stays in the thread it belongs to instead of jumping into a modal. */ #mhDetail .cnd-cmt-edit-wrap{margin-top:4px} #mhDetail .cnd-cmt-edit-wrap .icf.area textarea{min-height:64px} #mhDetail .cnd-cmt-editacts{display:flex; justify-content:flex-end; gap:8px; margin-top:8px} #mhDetail .cnd-cmt-editerr{margin-top:6px; font-size:12px; font-weight:600; color:var(--danger-ink)} /* SMALL BUTTONS, as asked. Save carries the weight; Cancel is quiet but never hidden - somebody who opens the editor and thinks better of it needs a way out that is not "save something". */ #mhDetail .cnd-cmt-btn{ padding:5px 13px; border-radius:9px; cursor:pointer; font-family:var(--font-sans); font-size:12px; font-weight:700; transition:background .14s ease, color .14s ease, border-color .14s ease, opacity .14s ease; } #mhDetail .cnd-cmt-btn.ghost{border:1px solid var(--line); background:none; color:var(--ink-2)} #mhDetail .cnd-cmt-btn.ghost:hover{background:rgba(40,60,80,.06); color:var(--ink-1)} #mhDetail .cnd-cmt-btn.go{border:1px solid var(--brand); background:var(--brand); color:#fff} #mhDetail .cnd-cmt-btn.go:hover{filter:brightness(1.06)} #mhDetail .cnd-cmt-btn:disabled{opacity:.5; cursor:not-allowed} #mhDetail .cnd-cmt-b{ font-size:14px; line-height:1.6; color:var(--ink-2); white-space:pre-wrap; word-break:break-word; } /* A COMMENT STREAM THAT FAILED TO LOAD SAYS SO IN ITS OWN COLOUR. The notes beside it are unaffected - they load in a separate try - and a silent empty list would read as "no comments", which is a different fact. */ #mhDetail .cnd-body.cnd-err{color:var(--danger-ink); font-weight:600} /* ============================================================================= CASENOTES-04 - TRANSFERS (Aug 20 2026). Still .cn- only, and still tokens only. Every colour below is --mh-ink / --mh-muted / --mh-ctrl-accent / --mh-danger, never --mh-slate: body.dark redefines ink, muted, surface, line, cream-2 and ctrl-* but NOT --mh-slate, so text painted with it stays dark-on-dark. ============================================================================= */ /* ---- the select / transfer bar ------------------------------------------ NOT in the topbar. TopActionState owns ONE slot and "New Note" already holds it for this route; selecting rows is not a create action and belongs beside the rows it acts on - the same place Approvals puts its decision controls. */ .mh-app .cn-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; min-height: 38px; } .mh-app .cn-bspacer { flex: 1 1 auto; } .mh-app .cn-bcount { font-size: 13px; font-weight: 700; color: var(--mh-ink); } .mh-app .cn-bbtn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13px; font-weight: 650; cursor: pointer; background: var(--mh-surface); color: var(--mh-ink); border: 1px solid var(--mh-line); transition: background .15s ease, border-color .15s ease, color .15s ease; } .mh-app .cn-bbtn svg { width: 15px; height: 15px; flex: none; } .mh-app .cn-bbtn:hover:not(:disabled) { border-color: var(--mh-ctrl-ico); } .mh-app .cn-bbtn:disabled { opacity: .5; cursor: not-allowed; } .mh-app .cn-bbtn.ghost { background: transparent; } .mh-app .cn-bbtn.prim { background: var(--mh-ctrl-accent); color: #fff; border-color: transparent; } .mh-app .cn-bbtn.prim:hover:not(:disabled) { filter: brightness(1.07); } /* A RETURN is a refusal, so it wears the app's one destructive signal. */ .mh-app .cn-bbtn.danger { color: var(--mh-danger); border-color: rgba(176,70,60,.35); } .mh-app .cn-bbtn.danger:hover:not(:disabled) { background: rgba(176,70,60,.10); } /* ---- a note row while selecting ----------------------------------------- The whole row is the control in this mode, so the tick is INERT - a real checkbox here would swallow the click and toggle the row twice. */ /* Selection moved to .cn-card with CASENOTES-07 - see the block at the end of this file. The transfer worklist is never selectable, so no .cn-note variant is needed. */ /* A note that cannot go is dimmed, never hidden: a list that silently drops rows in selection mode makes people think notes have disappeared. Its title says why. */ /* .cn-tick is defined with the card at the end of this file (CASENOTES-07). */ /* ---- transfer state on a note row ---------------------------------------- */ .mh-app .cn-chip.xfer { background: rgba(78,124,114,.12); color: var(--mh-ctrl-accent); } /* ---- the transfer worklist ----------------------------------------------- */ .mh-app .cn-xgrp { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--mh-muted); margin: 4px 0 10px; } .mh-app .cn-xgrp + .cn-list { margin-bottom: 22px; } /* Pending is the only state anyone has to act on, so it is the only one that carries a left edge. Settled rows read as history. */ .mh-app .cn-xfer.pending { border-left: 3px solid var(--mh-ctrl-accent); } /* Where a CASENOTETRANSFER notification landed. */ .mh-app .cn-xfer.lit { box-shadow: 0 0 0 2px var(--mh-ctrl-accent), var(--mh-shadow-sm); } .mh-app .cn-xline { font-size: 13.5px; color: var(--mh-muted); margin-bottom: 6px; } .mh-app .cn-xline b { color: var(--mh-ink); font-weight: 650; } .mh-app .cn-xbatch { margin-left: 7px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--mh-cream-2); color: var(--mh-muted); } .mh-app .cn-xreason { font-size: 13.5px; line-height: 1.55; color: var(--mh-ink); font-style: italic; margin-bottom: 4px; word-break: break-word; } .mh-app .cn-xreason.ret { color: var(--mh-danger); font-style: normal; margin-top: 10px; } .mh-app .cn-xacts { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 12px; } .mh-app .cn-xret { margin-top: 12px; } .mh-app .cn-xret textarea { width: 100%; min-height: 74px; resize: vertical; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--mh-line); background: var(--mh-cream-2); color: var(--mh-ink); font-family: inherit; font-size: 13.5px; line-height: 1.55; } .mh-app .cn-xret textarea:focus { outline: none; border-color: var(--mh-ctrl-accent); background: var(--mh-surface); } @media (max-width: 900px) { .mh-app .cn-xacts { justify-content: stretch; } .mh-app .cn-xacts .cn-bbtn { flex: 1; justify-content: center; } } /* ============================================================================= THE TRANSFER SHEET (#cnXfer) - the parts that are its own. Scoped under #cnXfer, where enroll-wizard.css defines --ink-*, --danger*, --brand-*, --line and the field tokens. It was WIDENED to :is(#enrollWiz,#cnWiz,#cnXfer) rather than copied, so the sheet inherits the whole field kit, the buttons and the modal chrome for free. A card written outside that scope loses every one of those tokens and renders unstyled. ============================================================================= */ :is(#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .xf-badge { font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-600); } :is(#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .xf-dept { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--ink-3); } :is(#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .xf-err { margin-bottom: 16px; padding: 11px 14px; border-radius: var(--r-md); background: var(--danger-bg); border: 1px solid rgba(192,71,63,.22); color: var(--danger-ink); font-size: 13.5px; font-weight: 600; } /* WHAT IS GOING ACROSS, named. Nobody should have to scroll back to a list they have already left to check which family they are about to hand on. */ :is(#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .xf-list { margin-top: 20px; padding: 15px 16px; background: var(--f-focus-bg); border: 1px solid var(--line); border-radius: var(--r-lg); max-height: 220px; overflow: auto; } :is(#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .xf-list-h { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; } :is(#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .xf-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; min-width: 0; } :is(#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .xf-row + .xf-row { border-top: 1px solid var(--line); } :is(#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .xf-kind { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; flex: none; background: var(--brand-tint); color: var(--brand-600); } :is(#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .xf-name { font-size: 14px; font-weight: 600; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } :is(#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .xf-conf { margin-left: auto; flex: none; color: var(--danger); display: inline-flex; } :is(#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .xf-conf svg { width: 15px; height: 15px; } /* The CEO's ruling, stated where the decision is made. */ :is(#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .xf-warn { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: var(--r-md); background: var(--danger-bg); border: 1px solid rgba(192,71,63,.22); color: var(--danger-ink); font-size: 13px; line-height: 1.5; font-weight: 600; } :is(#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .xf-warn svg { width: 16px; height: 16px; flex: none; margin-top: 1px; } /* ============================================================================= CASENOTES-05 - STATUS AND LOCK (Aug 20 2026). ============================================================================= */ /* The lock, on a note row. Not danger red: locking is deliberate and correct, not a warning - unlike Confidential, which tells the reader the note is not theirs to repeat. Muted, so it reads as a state rather than a problem. */ .mh-app .cn-chip.locked { background: var(--mh-cream-2); color: var(--mh-ink); font-weight: 700; } /* Completed. The one status worth a chip on the row, because it is the one that changes what the app DOES - the follow-up scan stops reminding on it. */ .mh-app .cn-chip.done { background: rgba(78,124,114,.12); color: var(--mh-ctrl-accent); } /* A locked row cannot be picked for a transfer; .unpickable already dims it. */ /* ============================================================================= THE LOCKED BANNER on the detail. Sits beside .cnd-conf and shares its anatomy deliberately - two banners at the top of one note must not be two designs. Scoped under #mhDetail, where the shell's local tokens live. ============================================================================= */ #mhDetail .cnd-locked{ display:flex; align-items:center; gap:9px; margin:0 0 14px; padding:10px 13px; border-radius:10px; background:var(--f-rest-bg); border:1px solid var(--line); color:var(--ink-2); font-size:13px; font-weight:650; } #mhDetail .cnd-locked svg{width:15px;height:15px;flex:none;stroke:var(--ink-3)} /* ============================================================================= THE UNLOCK SHEET (#cnUnlock) reuses every .xf-* rule the transfer sheet defines, because enroll-wizard.css was widened to cover it and the two sheets are the same object: one question, one column. 16 Sep 2026: that sentence was TRUE ONLY IN THIS COMMENT - the .xf-* rules above were still scoped to #cnXfer alone, so the unlock sheet (and the access-request sheet, #cnAccess) drew the confidential lock SVG at full size and every chip unstyled (owner's screenshot). The rules are now written :is(#cnXfer,#cnUnlock,#cnAccess,#cnDelete). Only its warning is quieter - unlocking is not a danger, it is a correction - so it overrides the inherited danger palette. ============================================================================= */ #cnUnlock .xf-badge { background: var(--f-rest-bg); color: var(--ink-2); } #cnUnlock .xf-warn { background: var(--f-rest-bg); border-color: var(--line); color: var(--ink-2); } #cnUnlock .xf-warn svg { stroke: var(--ink-3); } /* ============================================================================= CASENOTES-07 (Aug 20 2026) - THE NOTE CARD IS THE HOUSEHOLD KPI CARD. CEO: "change those cards like Household KPI cards, same design same interface, make sure the profile photo also working." So the card itself is `.idcard` and its whole family - .idc-top, .idc-ph, .idc-mid, .idc-nrow, .idc-name, .idc-sub, .idc-line, .idc-stats, .idc-hhrow, .btn-household - all defined in mh-theme.css and worn UNCHANGED. The grid is .idgrid, already inside the CARD-GRID LAW's shared rule (3-column cap, never auto-fill, 3->2->1). NOT ONE of those rules is redefined here. What IS here is only what a household card has no equivalent for: a case note is a paragraph of somebody's writing, and an identity card has nowhere to put one. Everything below is that paragraph and the chips beside it. ============================================================================= */ /* THE NOTE'S OWN TITLE, when it has one. Sits under the divider, above the body, at the weight the card's own .idc-name is not - the subject is the headline, the note's title is the subheading. */ .mh-app .cn-card .cn-cardtitle { font-size: 13.5px; font-weight: 700; color: var(--mh-ink); margin-bottom: 5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* THE NOTE. Clamped to three lines, because a card grid is scanned and the whole note is one click away - the same reason the old row clamped it. pre-wrap keeps the line breaks the caseworker typed, since in a case note a new line is usually a new event. */ .mh-app .cn-card .cn-cardbody { font-size: 13px; line-height: 1.55; color: var(--mh-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; min-height: calc(3 * 1.55 * 13px); /* three lines' worth, so short and long notes leave the stat row on the same line across a whole row of cards */ } /* The flags that change how a note must be TREATED, kept as chips rather than folded into the stat row: a stat is a value, these are warnings. */ .mh-app .cn-card .cn-cardchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .mh-app .cn-card .cn-cardchips:empty { display: none; } /* The subject KIND pill on the name row, in the slot the household card gives its status pill. Sized down to sit beside .idc-name without pushing it. */ .mh-app .cn-card .idc-nrow .cn-kind { flex: none; font-size: 10px; padding: 2px 7px; } /* A follow-up that has passed is the ONE value in the stat row that changes colour, because it is the only one that means somebody is late. */ .mh-app .cn-card .idc-stats .v.cn-late { color: var(--mh-danger); } /* ---- selection mode, on the card --------------------------------------- The whole card is the control while selecting, so the tick is INERT - a real checkbox would swallow the click and toggle the card twice. */ .mh-app .cn-card { position: relative; } .mh-app .cn-card.picked { box-shadow: 0 0 0 2px var(--mh-ctrl-accent) inset, var(--mh-shadow-sm); } /* A note that cannot go is dimmed, never hidden: a grid that silently drops cards in selection mode makes people think notes have disappeared. Its title says why. */ .mh-app .cn-card.unpickable { opacity: .45; cursor: not-allowed; } .mh-app .cn-card.unpickable:hover { transform: none; box-shadow: var(--mh-shadow-sm); } /* 16 Sep 2026: the timeline card (.cn-tl .c) is the card the list draws now; the tick had no box there. */ .mh-app :is(.cn-card, .cn-tl .c) .cn-tick { position: absolute; right: 14px; top: 14px; z-index: 2; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--mh-line); background: var(--mh-surface); display: grid; place-items: center; color: #fff; } .mh-app :is(.cn-card, .cn-tl .c) .cn-tick.on { background: var(--mh-ctrl-accent); border-color: var(--mh-ctrl-accent); } .mh-app :is(.cn-card, .cn-tl .c) .cn-tick svg { width: 13px; height: 13px; } /* ============================================================================= CASENOTES-08 (Aug 20 2026) - THE CASE NOTE FILE'S NOTE LIST. The detail is now the SUBJECT's file: every note about one client, household or program, newest first, each one expandable. These rules are only the note ROW inside that list - the card around it is .cnd-card, which already exists above. Scoped under #mhDetail with the rest of the shell's body, where its local tokens (--f-focus-bg, --line, --ink-*, --brand-600, --danger*) are defined. ============================================================================= */ /* THE HEADER IS THE CONTROL. The whole row toggles the note open, so it carries the cursor and the hover - a chevron that is the only clickable part of a wide row is a target people miss. */ #mhDetail .cnd-note .cnd-nh{ cursor:pointer; margin-bottom:12px; border-radius:9px; padding:2px 4px; margin-left:-4px; margin-right:-4px; transition:background .15s ease; } #mhDetail .cnd-note .cnd-nh:hover{background:var(--f-rest-bg)} #mhDetail .cnd-note .cnd-nh h4{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:none; font-size:14px; letter-spacing:0; color:var(--ink-1); } #mhDetail .cnd-note.open .cnd-nh h4{color:var(--brand-600)} #mhDetail .cnd-nwhen{ flex:none; font-size:12px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums; margin-left:auto; } #mhDetail .cnd-chev{flex:none; display:inline-flex; color:var(--ink-3); transition:transform .18s ease} #mhDetail .cnd-chev svg{width:16px; height:16px} #mhDetail .cnd-chev.on{transform:rotate(180deg); color:var(--brand-600)} /* CLOSED, the note shows two lines - enough to recognise it, not enough to read it over somebody's shoulder. Open, it shows everything, line breaks and all. */ #mhDetail .cnd-note .cnd-body.clamp{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13.5px; color:var(--ink-2); } /* ========================================================================= THE CLAMP MUST NOT LIE - 24 Aug 2026. Paired with clampScan() in detailview.js, which measures each collapsed body and marks the card. .cn-flat the note is SHORTER than the clamp, so nothing is hidden. It is not a preview of a note, it IS the note - so it loses the muted preview type, the chevron, the pointer and the hover. Clicking it did nothing before and now it does not invite the click. .cn-more there is genuinely more text. Everything stays, and the chevron is darkened so the one row that CAN open is the one that looks like it can. Both are absent until the scan runs, so an unmeasured card keeps the old behaviour - it can never hide text by defaulting the wrong way. ========================================================================= */ #mhDetail .cnd-note.cn-flat .cnd-body.clamp{ -webkit-line-clamp:none; display:block; overflow:visible; font-size:14.5px; color:var(--ink-1); } #mhDetail .cnd-note.cn-flat .cnd-chev{display:none} #mhDetail .cnd-note.cn-flat .cnd-nh{cursor:default} #mhDetail .cnd-note.cn-flat .cnd-nh:hover{background:transparent} #mhDetail .cnd-note.cn-more .cnd-chev{color:var(--ink-2)} /* The affordance says WHAT is behind the clamp, not just that something is. A bare chevron on a two-line block is read as decoration. */ #mhDetail .cnd-note.cn-more .cnd-body.clamp{position:relative} #mhDetail .cnd-note.cn-more .cnd-nh::after{ content:"Read"; flex:none; order:9; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin-left:2px; } #mhDetail .cnd-note.cn-more .cnd-nh:hover::after{color:var(--brand-600)} /* The per-note footer. Distinct from .cnd-nh so a long chip run cannot push the date out of the header. */ #mhDetail .cnd-nfoot{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:12px; padding-top:11px; border-top:1px solid var(--line); } #mhDetail .cnd-nby{font-size:12.5px; color:var(--ink-3)} #mhDetail .cnd-nby b{color:var(--ink-1); font-weight:650} /* The chips are the SAME .cn-chip the section's cards use, so a note reads the same in the list and in its file. They are restated here only because .cn-chip is defined against .mh-app tokens and this pane carries the shell's own. */ #mhDetail .cn-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--f-rest-bg); color:var(--ink-3); white-space:nowrap; } #mhDetail .cn-chip svg{width:13px; height:13px} #mhDetail .cn-chip.due{background:rgba(78,124,114,.14); color:var(--brand-600)} #mhDetail .cn-chip.overdue{background:var(--danger-bg); color:var(--danger-ink)} #mhDetail .cn-chip.done{background:rgba(78,124,114,.14); color:var(--brand-600)} #mhDetail .cn-chip.xfer{background:rgba(78,124,114,.14); color:var(--brand-600)} /* CASENOTES-09: .conf and .safe were the two variants this #mhDetail restatement never covered, because until now nothing inside the shell rendered them. The Notes tabs do. Without these, a Confidential or Safeguarding chip fell back to the base rule above - which wins on specificity over .mh-app .cn-chip.conf - and painted GREY, identical to a note-type chip. The one marking on a note that says "this is restricted" would have been the one marking you could not see. */ #mhDetail .cn-chip.conf{background:var(--danger-bg); color:var(--danger-ink)} #mhDetail .cn-chip.safe{background:rgba(160,130,200,.18); color:#6B4E9B; font-weight:700} body.dark #mhDetail .cn-chip.safe{background:rgba(160,130,200,.22); color:#C9B3E4} /* The note that was clicked opens marked, so arriving from a card, a follow-up bell or a transfer never loses the thing you came for among its siblings. */ #mhDetail .cnd-note.open{ box-shadow:0 0 0 1.5px var(--brand-600) inset, 0 10px 26px -18px rgba(28,39,51,.45); background:var(--f-focus-bg, rgb(var(--tg-rgb,255,255,255))); } /* The body grows from the two-line preview to the whole note. Height alone is the honest signal that the click did something - measured at 3.2x on a real caseworker paragraph (45px clamped -> 144px open), so it does not need help. The fade-in only stops that jump from reading as a layout glitch. */ #mhDetail .cnd-note.open .cnd-body{animation:cndOpen .2s ease both} @keyframes cndOpen{from{opacity:.35}to{opacity:1}} /* The composer's confidential tick, in the shell's edit form. */ #mhDetail .field > label.opt{ flex-direction:row; align-items:flex-start; gap:10px; cursor:pointer; text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:600; color:var(--ink-2); } #mhDetail .field > label.opt input{width:17px; height:17px; flex:none; margin-top:1px; cursor:pointer} #mhDetail .field > label.opt .opt-txt{min-width:0} /* ============================================================================= CASENOTES-07 - THE SAFEGUARDING LEVEL (Aug 20 2026). Two levels now: CONFIDENTIAL (author + admins + whoever accepted a transfer) and SAFEGUARDING (author + admins only, never transferable). Safeguarding is the stricter, so wherever both could show, it shows INSTEAD - a reader should never have to work out which of two restriction badges actually governs the note. It is deliberately NOT the same red as Confidential. Confidential says "do not repeat this"; safeguarding says "this is a protection matter". Giving them one colour would make the stricter level invisible among the looser one. ============================================================================= */ .mh-app .cn-chip.safe { background: rgba(120,86,160,.14); color: #6B4B90; font-weight: 700; } body.dark .mh-app .cn-chip.safe { background: rgba(160,130,200,.20); color: #c9b3e4; } #mhDetail .cnd-conf.cnd-safe { background: rgba(120,86,160,.10); border-color: rgba(120,86,160,.28); color: #5E4080; } #mhDetail .cnd-conf.cnd-safe svg { stroke: #6B4B90; } body.dark #mhDetail .cnd-conf.cnd-safe { background: rgba(160,130,200,.16); color: #d3c0ea; } body.dark #mhDetail .cnd-conf.cnd-safe svg { stroke: #c9b3e4; } /* The composer's safeguarding tick, so the stricter choice reads as the heavier one. */ #mhDetail .field > label.opt.opt-safe .opt-txt b { color: #6B4B90; } body.dark #mhDetail .field > label.opt.opt-safe .opt-txt b { color: #c9b3e4; } /* ============================================================================= CASENOTES-08 - THE LOCKED STUB (Aug 20 2026). A restricted note is no longer removed from the list; it comes back with its content masked, so a colleague can see it EXISTS and ask its author for access. Nobody can request what they cannot see. THE STUB MUST NOT LOOK LIKE A NOTE THAT FAILED TO LOAD. It is a deliberate state, so it gets its own quiet panel with a lock, a level and a plain sentence - not an empty body where text should be, which reads as a bug. ============================================================================= */ .mh-app .cn-stub { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 12px; border-radius: 12px; background: var(--mh-cream-2); border: 1px dashed var(--mh-line); min-height: calc(3 * 1.55 * 13px); } .mh-app .cn-stub-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--mh-surface); color: var(--mh-muted); margin-bottom: 2px; } .mh-app .cn-stub-ic svg { width: 15px; height: 15px; } .mh-app .cn-stub-t { font-size: 13px; font-weight: 700; color: var(--mh-ink); } .mh-app .cn-stub-s { font-size: 12px; color: var(--mh-muted); line-height: 1.5; max-width: 34ch; } /* A stub is not clickable - its Request access button is the only thing it offers, so the card must not invite a click that does nothing. */ .mh-app .idcard.cn-card:has(.cn-stub) { cursor: default; } .mh-app .idcard.cn-card:has(.cn-stub):hover { transform: none; border-color: var(--mh-line); } /* ============================================================================= CASE NOTE CARD - TIMELINE RAIL CEO, 24 Aug 2026. Landed from `CaseNote KPI cards / Case Note Card - Timeline Rail / styles.css`, values unchanged. SCOPED UNDER .cn-tl, AND THAT IS NOT A DESIGN CHANGE. The file ships selectors named .c, .row, .mt, .tg, .bd, .nm, .fg, .av, .tm, .ln and .empty. Dropped in unscoped they would repaint half the application - `.row` alone is Bootstrap's grid row, used across the Program and Planner screens, and `.c`/`.mt`/`.tg` are short enough to hit almost anything. Every declaration below is the designer's; only the prefix in front of it is ours. This is the CSS-prefix rule the app already follows: the newcomer yields. TWO SUBSTITUTIONS, both forced and both flagged to the CEO: * The demo loads Hanken Grotesk + JetBrains Mono from Google Fonts. This app SELF-HOSTS its fonts and must run without a CDN, so the body face is the app's own Hanken Grotesk and the mono face is var(--mono) - IBM Plex Mono, already self-hosted. Same role, same places (.sb record ids, .tm times). * body{background:var(--tg-cream2,rgb(242,244,245));padding:40px} and .shell/.stage are the demo PAGE, not the card. The app has its own shell and ONE background (#E8EBF0), so those four rules are not applied. The card itself is untouched. ============================================================================= */ /* toolbar */ .mh-app .cn-tl .tb{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:0 4px 18px} .mh-app .cn-tl .tb h2{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#3E5560} .mh-app .cn-tl .tb .ct{font-size:12.5px;font-weight:700;color:#8A9791} .mh-app .cn-tl .fl{display:flex;gap:6px;margin-left:auto;padding:5px;border-radius:999px;background:rgba(var(--tg-rgb,255,255,255),calc(.75*var(--tg-k,1)));border:1px solid rgba(30,55,48,.09);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:0 6px 16px -12px rgba(30,55,48,.3)} .mh-app .cn-tl .fl button{font:inherit;font-size:12px;font-weight:800;letter-spacing:.02em;color:#6C7A75;background:none;border:0;padding:7px 14px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:background .15s ease,color .15s ease} .mh-app .cn-tl .fl button:hover{background:rgba(30,55,48,.05)} .mh-app .cn-tl .fl button.on{background:#1E4438;color:#F1F8F5} .mh-app .cn-tl .fl button i{font-style:normal;font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:99px;background:rgba(27,44,39,.09);color:#5E6C67} .mh-app .cn-tl .fl button.on i{background:rgba(var(--tg-rgb,255,255,255),calc(.2*var(--tg-k,1)));color:#DCEFE6} /* grid */ /* ============================================================================= `.row` IS BOOTSTRAP'S GRID CLASS. CEO, 26 August 2026 - "the left and right border is not completely showing" when notes are selected. MEASURED with all five notes picked: .cn-tl .cn-row x 376 -> 2020 .cn-tl x 388 -> 2008 The card grid was TWELVE PIXELS WIDER THAN ITS OWN COLUMN ON EACH SIDE, so the left border of the first card and the right border of the last sat outside the content area and were cut off by the page edge. Nothing had overflow:hidden - the cards were simply drawn past the edge. WHERE THE 12px CAME FROM: bootstrap's `.row{margin-right:calc(-.5 * var(--bs-gutter-x)); margin-left:calc(-.5 * var(--bs-gutter-x))}` with --bs-gutter-x:1.5rem. That is -0.75rem = -12px, exactly. The timeline's own rule sets `display:grid` and wins on specificity, but it never declares a MARGIN - so Bootstrap's went unopposed. Same shape as `.ic`, `.pill`, `.btn`, `.grid` and `.av` before it: the leak is always a property the design never thought to declare. Renamed rather than zeroed, because zeroing only settles the margin and leaves the rest of Bootstrap's `.row` - the gutter variables, flex-wrap, margin-top - sitting one specificity bump away. This app has been bitten by Bootstrap's `.row` before; see the Program Detail edit engine. ============================================================================= */ /* ============================================================================= THE MAIN LIST'S CARDS MUST KEEP THEIR SIZE. CEO, 26 August 2026 - "it's extending itself all the way to right and it's not remaining to it's place". SAME BUG, SAME CAUSE, SECOND GRID. `repeat(AUTO-FIT, ...)` collapses the tracks it cannot fill and hands their width to whatever is left, so filtering down to "Confidential 1" gave ONE card the entire row and "Follow-up due 2" gave two cards half the row each. Only the unfiltered "All 5" looked right, which is why it survived until a filter was used. `auto-FILL` keeps the empty tracks, so a card is the same width whether the list holds one note or five. Above three notes the two keywords resolve identically, so nothing about the full list moves. THE INDEX-CARD GRID (.cn-ic) HAD THIS FIXED EARLIER THE SAME DAY. If a third grid is ever added here, it starts as auto-fill. ============================================================================= */ /* grid-auto-rows:1fr - EVERY ROW THE SAME HEIGHT, not just every card in a row. CEO, 31 Aug 2026: "the first row is same size the second row is not the same size". MEASURED: grid-template-rows resolved to "365.062px 295.812px" - align-items:stretch was already equalising the cards WITHIN a row, but each row still sized to its own tallest card, so a short second row read as a different card design. 1fr makes the auto-placed rows share one size, which in an auto-height grid is the tallest row's - so a long note still sets the height and every other card matches it. align-items:stretch stays: 1fr sizes the ROW, stretch is what makes the card fill it. */ .mh-app .cn-tl .cn-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));grid-auto-rows:1fr;gap:16px;align-items:stretch} .mh-app .cn-tl .c{display:grid;grid-template-columns:74px 1fr;gap:18px;height:100%;padding:20px 22px 18px 16px;border-radius:20px;background:linear-gradient(160deg,rgba(var(--tg-rgb,255,255,255),.9),rgba(var(--tg-rgb,255,255,255),calc(.7*var(--tg-k,1))));border:1px solid rgba(30,55,48,.08);box-shadow:0 12px 30px -20px rgba(30,55,48,.35),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,border-color .2s ease;position:relative;cursor:pointer} .mh-app .cn-tl .c:hover{transform:translateY(-4px);box-shadow:0 26px 44px -22px rgba(30,55,48,.42),inset 0 1px 0 rgba(255,255,255,.95);border-color:rgba(47,107,87,.24)} /* rail */ .mh-app .cn-tl .rail{display:flex;flex-direction:column;align-items:center;gap:10px} .mh-app .cn-tl .stamp{text-align:center;line-height:1} .mh-app .cn-tl .stamp b{display:block;font-size:23px;font-weight:800;letter-spacing:-.03em;color:#26332E} .mh-app .cn-tl .stamp span{display:block;margin-top:2px;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#96A29D} .mh-app .cn-tl .av{position:relative;display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;background:linear-gradient(165deg,#27543F,#16342C);color:#CFE8DD;box-shadow:0 8px 16px -10px rgba(16,40,34,.9),inset 0 1px 0 rgba(255,255,255,.18);overflow:hidden} .mh-app .cn-tl .av svg{width:23px;height:23px;transition:transform .18s ease} .mh-app .cn-tl .av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block} .mh-app .cn-tl a.av{text-decoration:none;cursor:pointer;outline:none} .mh-app .cn-tl a.av:hover{background:linear-gradient(165deg,#2F6B57,#1B4034)} .mh-app .cn-tl a.av:hover svg{transform:scale(1.08)} .mh-app .cn-tl a.av:focus-visible{box-shadow:0 0 0 3px rgba(47,107,87,.35),0 8px 16px -10px rgba(16,40,34,.9)} .mh-app .cn-tl a.av::before{content:"";position:absolute;inset:-6px;border-radius:50%} .mh-app .cn-tl .av::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent} .mh-app .cn-tl .c.over .av::after{border-color:rgba(180,69,58,.55)} .mh-app .cn-tl .c.due .av::after{border-color:rgba(176,122,46,.55)} .mh-app .cn-tl .tm{font-family:var(--mono,ui-monospace,monospace);font-size:10px;font-weight:500;color:#9AA5A0;letter-spacing:-.02em} .mh-app .cn-tl .ln{flex:1;min-height:14px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(47,107,87,.28),rgba(47,107,87,0))} .mh-app .cn-tl .c.over .ln{background:linear-gradient(180deg,rgba(180,69,58,.4),rgba(180,69,58,0))} .mh-app .cn-tl .c.due .ln{background:linear-gradient(180deg,rgba(176,122,46,.4),rgba(176,122,46,0))} /* body */ .mh-app .cn-tl .bd{display:flex;flex-direction:column;gap:12px;min-width:0} .mh-app .cn-tl .nm{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:17px;font-weight:800;letter-spacing:-.015em;color:#1B2C27} .mh-app .cn-tl .kd{font-size:9.5px;font-weight:800;letter-spacing:.09em;padding:3px 7px;border-radius:5px;background:rgba(47,107,87,.12);color:#2F6B57} .mh-app .cn-tl .sb{font-family:var(--mono,ui-monospace,monospace);font-size:11.5px;font-weight:500;color:#8A9791;margin-top:4px} .mh-app .cn-tl .fg{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:5px;margin-left:auto} .mh-app .cn-tl .fg.over{background:rgba(180,69,58,.11);color:#B4453A} .mh-app .cn-tl .fg.due{background:rgba(176,122,46,.14);color:#8F6220} .mh-app .cn-tl h4{margin:0;font-size:15px;font-weight:800;letter-spacing:-.005em;color:#1B2C27} .mh-app .cn-tl .bd p{margin:-4px 0 0;font-size:14px;font-weight:500;line-height:1.55;color:#5B6A64;text-wrap:pretty} .mh-app .cn-tl .tgs{display:flex;flex-wrap:wrap;gap:7px} .mh-app .cn-tl .tg{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:99px} .mh-app .cn-tl .tg svg{width:13px;height:13px} .mh-app .cn-tl .tg.red{background:rgba(180,69,58,.09);color:#B4453A} .mh-app .cn-tl .tg.amber{background:rgba(176,122,46,.13);color:#8F6220} .mh-app .cn-tl .tg.green{background:rgba(47,107,87,.1);color:#2F6B57} .mh-app .cn-tl .mt{display:grid;grid-template-columns:1.4fr .8fr 1.15fr;gap:12px;align-items:start;margin-top:auto;padding-top:15px;border-top:1px solid rgba(30,55,48,.09)} .mh-app .cn-tl .mt div{display:flex;flex-direction:column;gap:4px;min-width:0} .mh-app .cn-tl .mt span{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9AA5A0} .mh-app .cn-tl .mt b{font-size:13.5px;font-weight:700;color:#26332E;line-height:1.25;overflow-wrap:anywhere} .mh-app .cn-tl .mt em{display:block;font-style:normal;font-size:11px;font-weight:700;margin-top:3px;color:#98A39E} .mh-app .cn-tl .mt .over{color:#B4453A} .mh-app .cn-tl .mt .due{color:#8F6220} .mh-app .cn-tl .mt .none{color:#A2ADA8;font-weight:600} .mh-app .cn-tl .fo{display:flex;align-items:center;justify-content:flex-end;padding-top:14px} .mh-app .cn-tl .op{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:800;color:#1E4438;cursor:pointer;font-family:inherit;background:none;border:0;padding:0} .mh-app .cn-tl .op i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(30,68,56,.24);background:rgba(var(--tg-rgb,255,255,255),calc(.75*var(--tg-k,1)));transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease} .mh-app .cn-tl .op i svg{width:15px;height:15px} .mh-app .cn-tl .c:hover .op i{background:#1E4438;border-color:#1E4438;color:#EAF5F0;transform:translateX(2px)} .mh-app .cn-tl .op:disabled{opacity:.55;cursor:default} .mh-app .cn-tl .c:hover .op:disabled i{background:rgba(var(--tg-rgb,255,255,255),calc(.75*var(--tg-k,1)));border-color:rgba(30,68,56,.24);color:inherit;transform:none} .mh-app .cn-tl .empty{grid-column:1/-1;padding:40px 0;text-align:center;font-size:13.5px;font-weight:600;color:#8A9791} /* SELECTION MODE - not in the mock, because the mock has no transfer flow. The tick and the three states are the section's own, re-expressed on the new card. */ .mh-app .cn-tl .c .cn-tick{position:absolute;top:12px;right:12px;z-index:2} .mh-app .cn-tl .c.picked{border-color:rgba(47,107,87,.5);box-shadow:0 0 0 1.5px #2F6B57 inset,0 12px 30px -20px rgba(30,55,48,.35)} .mh-app .cn-tl .c.unpickable{opacity:.5;cursor:default} .mh-app .cn-tl .c.unpickable:hover{transform:none;box-shadow:0 12px 30px -20px rgba(30,55,48,.35),inset 0 1px 0 rgba(255,255,255,.95)} @media (max-width:900px){ .mh-app .cn-tl .cn-row{grid-template-columns:1fr} .mh-app .cn-tl .mt{grid-template-columns:1fr 1fr} } body.dark .mh-app .cn-tl .c{background:linear-gradient(160deg,rgba(38,48,44,.92),rgba(32,41,38,.82));border-color:rgba(255,255,255,.07)} body.dark .mh-app .cn-tl .nm,body.dark .mh-app .cn-tl h4{color:#EEF2EF} body.dark .mh-app .cn-tl .stamp b{color:#DCE5E0} body.dark .mh-app .cn-tl .bd p{color:#A9B6B0} body.dark .mh-app .cn-tl .mt b{color:#E4EAE6} body.dark .mh-app .cn-tl .op{color:#CFE8DD} body.dark .mh-app .cn-tl .fl{background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));border-color:rgba(255,255,255,.1)} /* ============================================================================= CASE NOTES - INDEX CARDS + NOTE POPUP CEO, 25 Aug 2026. Landed from `Case notes inside the Case Notes tab / Case Notes - Note Styles` (index.html + styles.css + notes.js + README.md). Values are the designer's, unchanged. SCOPED UNDER .cnx, AND THAT IS NOT A DESIGN CHANGE. The file ships selectors called .ix, .ic, .tab, .f, .pill, .ov, .dg, .top, .main, .side, .cn-grid, .state, .cn-btn, .menu, .mi, .sheet, .band and .x. Dropped in unscoped, `.cn-grid`, `.main`, `.top`, `.cn-btn` and `.menu` alone would repaint most of the application. Every declaration below is the designer's; only the prefix in front of it is ours. Same rule the timeline card followed: the newcomer yields. THE GRID IS THE DESIGNER'S OWN and it is what makes the section "travel freely": .ic { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) } The cards re-flow to whatever the pane gives them - three across on a wide screen, one on a narrow one - with no breakpoints of ours involved. **THE ONE WORD THAT IS NOT THE DESIGNER'S IS `auto-fILL` IN PLACE OF `auto-fIT`, and the reason is at the bottom of this file: auto-fit collapses the tracks it does not fill, so a file holding ONE note got a card 1098px wide.** Above two notes the two keywords resolve identically, so nothing else moves. TWO RENAMES, BOTH FORCED, AND NEITHER IS A DESIGN CHANGE. `.ic` IS `.cn-ic` HERE, AND THIS IS THE ONE THAT COST US THE MOST. `.ic` is the DETAIL PANE'S OWN ICON CLASS - detail-view.css declares #mhDetail .ic { width:19px; height:19px; flex:0 0 auto; display:grid; place-items:center; color:var(--ink-3) } #mhDetail .ic svg { width..height..stroke..stroke-width..fill } and specificity 110 beat nothing we could scope it under except an id of our own. MEASURED on the live page, 26 Aug, with the grid still called .ic: * height computed to 19px - the whole card grid was a 19px-tall box with its cards spilling out of it. * align-items AND justify-items computed to `center`, so the cards were CENTRED INSTEAD OF STRETCHED and came out at 231.09px and 215.94px in the same row. That is the CEO's "the size of the cards must be same, no small or big". * color computed to rgb(103,117,121), so every card title wore the pane's ink instead of the design's. * every svg inside a card was resized and re-stroked by `#mhDetail .ic svg` - the dated tab measured 130.2px wide against the design's 104.2px. The 25 Aug note below blamed a flex ancestor for the width and patched width:100%. That diagnosis was WRONG. The number gives it away: the grid did not collapse to "its own padding", it collapsed to 19px because a rule literally says width:19px. Renaming settles all five at once instead of contesting them property by property. AND the design's `.pill` is `.cn-pill` here. `.pill` is ALREADY an app-wide class - status-unify.css claims `.mh-app .pill:not(.icf)` and paints background, border, colour and box-shadow with !important. MEASURED on the live page before the rename: `.cn-pill`, `.cn-pill.green`, `.cn-pill.red` and `.cn-pill.slate` ALL computed to the same grey - colour rgb(103,117,121) on rgba(103,117,121,.13) - because that one rule won every contest. mh-casenotes.css also loads BEFORE status-unify.css, so an !important of our own would not have won either. The newcomer yields and takes a namespaced class, exactly as the CSS-prefix-collision law says. TWO SUBSTITUTIONS, both forced: * The demo loads Hanken Grotesk + JetBrains Mono from Google Fonts. This app SELF-HOSTS and must run with no CDN, so --mono resolves to the app's own IBM Plex Mono and the body face is already Hanken Grotesk. * body{} and .shell{} are the demo PAGE, not the component. The app has its own shell and one background, so those are not applied. ============================================================================= */ /* THE DESIGNER'S OWN TOKEN BLOCK - styles.css line 2, verbatim. It was dropped on the first landing and that is what made the popup look wrong: `--pine`, `--pine2`, `--ink`, `--mut`, `--dim`, `--faint`, `--red` and `--amber` resolved to NOTHING, so every declaration built on them fell back to nothing. MEASURED before the fix, on the live page: .cn-btn.pr background = rgba(0,0,0,0) with colour #EDF7F2 - the CEO's "nearly invisible pale disc" was white dots on a transparent button. .ft / .top / .state border-*-width = 0px - `1px solid var(--line)` is invalid at computed-value time when --line is undefined, so the popup had no rules. .hr background = transparent, .lnk and h3 both the app ink, not pine. `--line` is WORSE than undefined inside the record: #mhDetail declares its own `--line:#D9DFE7`, so the cards inherited the detail pane's grey instead of the designer's rgba(30,55,48,.09). Declaring it on .cnx settles both cases. ONE SUBSTITUTION, the one already documented above: --mono is the app's self-hosted IBM Plex Mono, because this app must run with no CDN. */ /* THE DESIGN'S OWN PAGE RESET, scoped to the component instead of to . styles.css lines 3 and 5 are `body{...color:var(--ink)...}` and `h1,h2,h3,h4,p{margin:0}`. The first landing dropped both as "the demo PAGE", and they are not decoration: * MEASURED: .ix p had margin-bottom:16px - Bootstrap's `p{margin-bottom:1rem}` - so every card carried 16px of dead space under its snippet. * MEASURED: the card title computed to rgb(103,117,121). Only h4 inherits its colour in this design; every other value is explicit. Without the ink the titles wore whatever the surrounding pane happened to be painting. The colour is the designer's --ink, and the margin reset is the designer's line. Nothing here is ours except the selector it hangs on. `line-height:normal` IS ALSO THE DESIGN'S BASELINE, not a tweak. The demo's `body` rule declares no line-height, so everything that does not set its own inherits the UA default - `normal`. This app's body hands down 1.5, and it reached everything the designer left undeclared: `.cn-btn`, `.mi b`, `.kd`, `.nm`, `.sb`, `.tab`, `.state .tx b`. MEASURED: the footer buttons came out **38.75px** tall because the line box was 12.5px x 1.5 = 18.75px. With the design's own baseline they are 37px - the mock's own arithmetic (16px icon + 18px padding + 2px border, with a 17px line box from Hanken Grotesk at 12.5px). The eleven places where the designer DID declare a line-height (.ix p, #dbd p, .dg h3, .mi em, .sf b, .tr2 li, .sf .vs, .state .tx span, .sh2 em, .big) all out-specify this and keep their own. The h1-h4/p rule below still needs its own `line-height:normal`: Bootstrap declares `h1..h6{line-height:1.2}` and a declaration always beats inheritance. */ #mhDetail .cnx, .mh-app .cnx{color:var(--ink);line-height:normal} #mhDetail .cnx h1, .mh-app .cnx h1, #mhDetail .cnx h2, .mh-app .cnx h2, #mhDetail .cnx h3, .mh-app .cnx h3, #mhDetail .cnx h4, .mh-app .cnx h4, #mhDetail .cnx p, .mh-app .cnx p{margin:0;line-height:normal} /* AND THE APP'S GLOBAL