/* Shared CR5 parent contracts. Document pixels and child colours are separate. */
@import url('./parent-tokens.css');
@import url('./parent-fonts.css');
body[data-parent-design]{background:var(--p-paper);color:var(--p-ink);font-family:"Plus Jakarta Sans",sans-serif;line-height:var(--p-body-leading)}
body[data-parent-design] .font-body-md{font-family:"Plus Jakarta Sans",sans-serif}
body[data-parent-design] :is(button,input,select,textarea){font-family:inherit}
body[data-parent-design] :is(.x3-btn,[data-ui-button],.m2-dialog button){border-radius:var(--radius-ctl);min-height:var(--p-button-height);padding:10px 16px;font-size:var(--p-control-size);line-height:var(--p-control-leading);font-weight:600;white-space:normal;overflow-wrap:anywhere}
body[data-parent-design] [data-ui-button="primary"]{background:var(--p-primary);color:var(--p-card)}
body[data-parent-design] :is(.x3-btn.small,[data-ui-layout="icon"]){min-height:var(--touch);min-width:var(--touch)}
body[data-parent-design] :is(.x3-btn.secondary,[data-ui-button="secondary"]){border-color:var(--p-control-line);background:var(--p-card);color:var(--p-primary)}
body[data-parent-design] :is(.x3-btn.quiet,[data-ui-button="quiet"]){background:transparent;color:var(--p-primary)}
body[data-parent-design] :is(.x3-btn:disabled,[data-ui-button]:disabled){opacity:1;color:var(--p-meta)!important;background:var(--p-quiet);border-color:var(--p-control-line)}
body[data-parent-design] :is(.x3-btn,.x3-chip,.cv-day,.cv-nav,.cv-mode,.cv-today):active{transform:scale(.98)}
body[data-parent-design] :is(.ui-actions,.m2-actions)>*{min-height:var(--p-button-height)}
body[data-parent-design] .x3-card{padding:16px;border-radius:var(--radius-card);border-color:var(--p-line)}
body[data-parent-design] .x3-h1{font-size:var(--p-title-size);line-height:var(--p-title-leading)}
body[data-parent-design] .x3-h2{font-size:var(--p-section-size);line-height:var(--p-section-leading)}
body[data-parent-design] :is(.x3-lede,.x3-note){font-size:var(--p-supporting-size);line-height:var(--p-supporting-leading)}
body[data-parent-design] :is(.x3-meta,.x3-eyebrow){font-size:var(--p-meta-size);line-height:var(--p-meta-leading)}
/* The single segmented-navigation owner. Context selectors default to primary;
   view selectors explicitly opt into data-variant="secondary". Domain modules own
   only placement/visibility, never another track, option or selected-state skin. */
body[data-parent-design] .x3-seg{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--space-1);padding:var(--space-1);border:0;border-radius:var(--radius-ctl);background:var(--p-segment);box-sizing:border-box;min-width:0;max-width:100%}
body[data-parent-design] .x3-seg>:is(button,a){display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:max-content;max-width:100%;min-height:var(--touch);box-sizing:border-box;padding:var(--space-2) var(--space-1);border:0;border-radius:calc(var(--radius-ctl) - var(--space-1));background:transparent;color:var(--p-secondary);font-family:inherit;font-size:var(--p-control-size);line-height:var(--p-control-leading);font-weight:600;text-align:center;text-decoration:none;white-space:normal;overflow-wrap:break-word}
body[data-parent-design] .x3-seg>:is(button,a):is([aria-selected="true"],[aria-pressed="true"]){background:var(--p-primary);color:var(--p-card);box-shadow:none}
body[data-parent-design] .x3-seg[data-variant="secondary"]>:is(button,a):is([aria-selected="true"],[aria-pressed="true"]){background:var(--p-card);color:var(--p-primary)}
body[data-parent-design] .x3-seg>:is(button,a):focus-visible{outline:2px solid var(--p-primary);outline-offset:2px}
body[data-parent-design] .x3-seg>:is(button,a):disabled{color:var(--p-meta);cursor:not-allowed}
/* ONE form-value style for every editable value (text, search, number, date/time, select, textarea): body 16/24 regular, never below 16px (stable iOS focus).
   Labels are the documented 14/20 semibold and noninteractive metadata 12/16; same role, same type, whatever the page. The native select and number chrome is normalised
   so a Term select, a Year number input and a text field cannot render at different sizes. */
body[data-parent-design] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]),select,textarea){min-height:max(var(--p-button-height),calc(1.5em + var(--space-5)));font-family:"Plus Jakarta Sans",sans-serif;font-size:max(16px,var(--p-body-size));line-height:var(--p-body-leading);font-weight:400;font-variant-numeric:normal;letter-spacing:normal;-webkit-text-size-adjust:100%;text-size-adjust:100%;border-radius:var(--radius-ctl)}
body[data-parent-design] select{-webkit-appearance:none;appearance:none;padding-inline-end:44px;background-color:var(--p-card);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235F6561' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
body[data-parent-design] input[type=number]{-moz-appearance:textfield;appearance:textfield}
body[data-parent-design] input[type=number]::-webkit-inner-spin-button,body[data-parent-design] input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
body[data-parent-design] :is(input[type=date],input[type=time],input[type=datetime-local],input[type=month])::-webkit-date-and-time-value{min-height:1.5em;text-align:start;font-size:inherit;line-height:inherit}
body[data-parent-design] :is(input[type=date],input[type=time],input[type=datetime-local],input[type=month])::-webkit-datetime-edit{padding:0}
body[data-parent-design] :is(input[type=date],input[type=time],input[type=datetime-local],input[type=month])::-webkit-calendar-picker-indicator{margin:0;padding:0}
body[data-parent-design] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]),select){box-sizing:border-box}
body[data-parent-design] :is(.x3-field,.m2-fields label){font-size:var(--p-supporting-size);line-height:var(--p-supporting-leading);font-weight:600}
body[data-parent-design] :is(.x3-field,.m2-fields label){gap:8px}
body[data-parent-design] .m2-fields{gap:24px}
body[data-parent-design]>header>div{min-height:64px;height:auto;padding-block:8px;box-sizing:border-box}
body[data-parent-design]>header :is(.x3-hdr-search,.x3-hdr-profile){min-width:var(--touch);min-height:var(--touch)}
/* While the shell rebuilds the tab bar, it stays out of sight until the shared sheet is applied: the unstyled rebuilt row is a different height from the final bar. */
body[data-parent-design]>nav[data-x3-pending]{visibility:hidden;pointer-events:none}
body[data-parent-design] .x3-nav-row{min-height:64px;padding-block:4px}
body[data-parent-design] .x3-tab{min-width:0;min-height:var(--touch)}
body[data-parent-design] .x3-card .x3-chips:not(.x3-childsel){flex-wrap:wrap;overflow:visible;margin:0;padding:0;width:100%;mask-image:none;-webkit-mask-image:none}
body[data-parent-design] .source-preview .x3-sheet-body{height:calc(100dvh - 24px - env(safe-area-inset-top));max-height:var(--sheet-max,92dvh);overflow:hidden;padding:12px;gap:8px}
body[data-parent-design] .source-preview .x3-sheet-head{flex:none;gap:8px}
body[data-parent-design] .source-preview .x3-sheet-head h2{font-family:inherit;font-size:var(--p-supporting-size);line-height:var(--p-supporting-leading);max-height:4.3em;overflow:auto}
body[data-parent-design] .source-preview-stage{flex:1 1 auto;min-height:120px;max-height:none;padding:8px}
body[data-parent-design] .source-preview-controls{flex:none;gap:4px}
body[data-parent-design] .source-preview-controls button{padding-inline:8px}
body[data-parent-design] .source-preview-controls [data-testid=viewer-share]{margin:0}
body[data-parent-design] .source-preview .x3-sheet-body>p:empty{display:none}
body[data-parent-design] .parent-group-details .x3-sheet-body{height:min(var(--sheet-max,92dvh),calc(100dvh - env(safe-area-inset-top) - 16px));overflow:hidden;box-sizing:border-box;gap:8px}
body[data-parent-design] .parent-group-details :is(.x3-sheet-head,.m7-tabs){flex:none}
body[data-parent-design] .parent-group-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.parent-env-note{font-size:var(--p-meta-size);line-height:var(--p-meta-leading);color:var(--p-meta)}
@media(min-width:768px){body[data-parent-design]{--gutter:var(--space-5)}body[data-parent-design] .parent-group-details{margin:auto;border-radius:var(--radius-sheet)}}
@media(prefers-reduced-motion:reduce){body[data-parent-design] *{scroll-behavior:auto!important}body[data-parent-design] :is(.x3-btn,.x3-chip,.cv-day,.cv-nav,.cv-mode,.cv-today):active{transform:none}}

body[data-parent-design] .parent-calendar{padding-top:calc(var(--hdr-h) + env(safe-area-inset-top,0px));padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 80px)}
.parent-calendar-top,.parent-calendar-scope,.parent-calendar-controls,.parent-calendar-host{box-sizing:border-box;width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)}
.parent-calendar-top{display:grid;grid-template-columns:minmax(0,1fr) var(--touch);align-items:start;gap:var(--space-2);padding-top:var(--space-2)}
.parent-calendar-top>h1{grid-column:1;grid-row:1}
/* The guidance owner wraps its anchor. Keep its accessible button beside the
   title so Calendar's primary context track fills the same gutter as Library. */
.parent-calendar-top>.x3-titlebar:has(>#x3-cal-context){display:contents}
.parent-calendar-top #x3-cal-context{grid-column:1/-1;grid-row:2;width:100%;min-width:0}
.parent-calendar-top #x3-cal-context>.x3-seg{width:100%}
.parent-calendar-top .cr3-explain-wrap{grid-column:2;grid-row:1;justify-self:end}
.parent-calendar-scope{min-height:60px;padding-block:4px;display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2)}
.parent-calendar-scope>*{width:100%;min-width:0;margin:0!important;padding:0!important}
body[data-parent-design] .parent-calendar-scope #child-filter-section{width:100%;max-width:100%}
.parent-calendar-controls .cv-bar{margin-top:0;min-height:var(--p-button-height);gap:8px}
.parent-calendar-controls .cv-title{font-size:var(--p-section-size);line-height:var(--p-section-leading);max-width:none;white-space:normal;overflow-wrap:normal}
.parent-calendar-controls .cv-grid{margin-top:8px;padding:8px 4px;min-height:76px;grid-template-columns:repeat(7,minmax(var(--touch),1fr));overflow-x:auto;overscroll-behavior-inline:contain}
.parent-calendar-domain-title{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
.parent-calendar-host #calendar-content-root{padding:0!important;max-width:none!important}
.parent-calendar-host [data-calendar-part=month]{padding:0!important}
.parent-calendar-host [data-calendar-part=collections]{overflow:visible;flex-wrap:wrap;gap:var(--space-2)}
.parent-calendar-host #calendar-context-subtitle:empty{display:none}
.parent-calendar-host .cv-agenda-group{margin-top:16px}
.parent-calendar-host .cv-row-bar{width:4px}
.parent-calendar-host .cv-row{padding:16px;border-radius:var(--radius-card)}
.parent-calendar-host #x3-review-slot{margin-block:8px}
.parent-calendar-host #x3-review-slot .x3-card{padding:8px 12px;min-height:var(--touch)}
.parent-calendar-host #calendar-status-notice{font-size:var(--p-meta-size);line-height:var(--p-meta-leading);margin-block:4px}
/* Calendar peer geometry: one child family, one review slot and one result gutter. */
body[data-parent-design] .parent-calendar-scope .calendar-child-filters{display:flex;align-items:center;gap:var(--space-3);overflow-x:auto;scroll-padding-inline:var(--space-2)}
body[data-parent-design] .parent-calendar-scope .child-filter-pill>span:not(.calendar-child-avatar){font:inherit}
body[data-parent-design] .parent-calendar-scope .calendar-child-avatar{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.25rem;height:1.25rem;border-radius:50%;font-size:.625rem;font-weight:600}
.parent-calendar-host :is(#x3-review-slot,.parent-calendar-review){min-height:48px;margin:var(--space-2) 0 0}
.parent-calendar-host :is(#x3-review-slot,.parent-calendar-review) .x3-attn-solo{box-sizing:border-box;min-height:48px;padding-block:var(--space-2)}
.parent-calendar-host :is(#x3-review-slot,.parent-calendar-review) .x3-attn-text small{display:none}
.parent-calendar-host [data-calendar-results]{padding-inline:0;margin-top:0}
.parent-calendar-host .calendar-cohort-status:has([data-calendar-status]:empty),.parent-calendar-host [data-calendar-part=collections]:empty{display:none}
.parent-calendar-host #calendar-content-root>div:has(>#calendar-main-heading):has(>#calendar-status-notice[data-default]){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.parent-calendar-host #cv-root{margin-top:0!important}
.parent-calendar-host .cv-agenda{margin-top:var(--space-5)}
.parent-calendar-host .cv-agenda>.cv-agenda-group:first-child{margin-top:0}

body[data-parent-design]>header img[alt*="Cohort"]+div.flex-col:has(>span.uppercase){display:none}

body[data-parent-design] main h1{font-family:Newsreader,serif;font-weight:500;font-size:var(--p-title-size);line-height:var(--p-title-leading);overflow-wrap:anywhere}
body[data-parent-design] :is(.m7-btn,.m7-newbtn,.m7-details){min-height:var(--touch);border-radius:var(--radius-ctl);padding:8px 16px;font-size:var(--p-control-size);line-height:var(--p-control-leading);white-space:normal}
body[data-parent-design] dialog.m7-sheet{border-radius:var(--radius-sheet);background:var(--p-paper);color:var(--p-ink)}

/* Hoisted period controls retain container-based accessibility reflow. */
.parent-calendar-controls{container:parentcal / inline-size}
body[data-parent-design] .parent-calendar-controls .cv-bar{grid-template-columns:var(--touch) minmax(0,1fr) var(--touch) auto;grid-template-areas:none}
body[data-parent-design] .parent-calendar-controls .cv-bar>*{grid-area:auto}
@container parentcal (max-width:22rem){
 body[data-parent-design] .parent-calendar-controls .cv-bar{grid-template-columns:minmax(var(--touch),1fr) max-content minmax(var(--touch),1fr);grid-template-areas:"title title title" "prev today next";row-gap:var(--space-2)}
 body[data-parent-design] .parent-calendar-controls .cv-bar>.cv-title{grid-area:title;text-align:left}
 body[data-parent-design] .parent-calendar-controls .cv-nav[aria-label^=Previous]{grid-area:prev}
 body[data-parent-design] .parent-calendar-controls .cv-nav[aria-label^=Next]{grid-area:next}
 body[data-parent-design] .parent-calendar-controls .cv-today{grid-area:today}
}
body[data-parent-design]>header>div,body[data-parent-design] .m7-chat-head{flex-wrap:wrap;gap:8px}
body[data-parent-design] .tf-utility-entry{font-size:var(--p-supporting-size);line-height:var(--p-supporting-leading)}
body[data-parent-design] .m2-child-card>div:last-child>div:first-child{flex-wrap:wrap;gap:var(--space-2)}
body[data-parent-design] .m2-child-card>div:last-child>div:first-child>div:first-child{flex:1 1 14rem;min-width:0;max-width:100%}
body[data-parent-design] .m2-child-card>div:last-child>div:first-child>div:first-child>div:last-child{min-width:0}
body[data-parent-design] .m2-child-card h2+span{overflow-wrap:normal}
body[data-parent-design] .m2-child-card div:has(>h2){flex-wrap:wrap}
body[data-parent-design] .m2-edit-button[data-ui-layout]{width:max-content;max-width:100%;flex:none;white-space:nowrap;overflow-wrap:normal}

.parents-lobby .x3-sheet-body{gap:24px}
.parents-lobby .x3-field:has(>input[type=checkbox]){display:flex;flex-direction:row;align-items:center;gap:8px;min-height:44px}
.parents-lobby input[type=checkbox]{width:24px;height:24px;accent-color:var(--p-primary)}

.m7-chat-titles>[data-testid=parents-lobby-entry]{align-self:flex-start;max-width:100%;margin:0;padding-inline:8px}

/* Same cohort Lobby in Chat and Family. */
body[data-parent-design] .parents-lobby .x3-sheet-body{gap:24px}
body[data-parent-design] .parents-lobby .x3-field:has(>input[type=checkbox]){display:flex;flex-direction:row;align-items:center;gap:8px;min-height:44px}
body[data-parent-design] .parents-lobby input[type=checkbox]{width:24px;height:24px;accent-color:var(--p-primary)}

/* Utility disclosures use the shared control font and touch target. */
body[data-parent-design] #calendar-quick-actions summary{font-family:var(--p-body-font,"Plus Jakarta Sans"),sans-serif;min-height:var(--touch);color:var(--p-primary)}
body[data-parent-design] .parent-group-details summary{min-height:var(--touch);display:flex;align-items:center}

/* The clickable onboarding artwork keeps its intrinsic ratio while satisfying
   the existing 44px target. It is not stretched by a target-only min-height. */
body[data-parent-design] header img[data-cohort-hook="header-logo"]{height:44px;width:calc(32px * 880 / 230);min-height:44px;max-width:100%;object-fit:contain}
body[data-parent-design] header img[data-cohort-hook="header-logo"]{padding:0;box-sizing:border-box}

/* Cosmetic closure 2026-11-01: Tailwind-authored 48px action buttons share the 14px control radius of the other button families
   (previously 12px from .rounded-xl). Chips, pills and icon buttons (rounded-full) are untouched. */
body[data-parent-design] :is(button,a)[class*="min-h-[48px]"].rounded-xl{border-radius:var(--radius-ctl)}

/* Tailwind-authored M3 pages gutter with .px-margin (1.25rem = 20px); the locked mobile gutter is 16px (24px on wider layouts). */
body[data-parent-design] .px-margin{padding-left:var(--gutter,16px);padding-right:var(--gutter,16px)}

/* M3 error/unavailable states put the title directly under <main> (pt-16 = header height); keep the same 8px start as other pages (header 64px + 8px). */
body[data-parent-design] main[data-cohort-m3-screen]:has(> :is(h1,h2):first-child){padding-top:72px} /* the template zeroes first-child margins with !important, so the 8px start is padding */
body[data-parent-design] main[data-preview-fallback]{padding-top:72px}

/* Group Details secondary tools: Files, Search and Profile share one bordered control family; Message retention reads as a disclosure. */
body[data-parent-design] .parent-group-details :is(.m7-header-utilities>.x3-iconbtn,.m7-global-utilities>a){display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch);padding:0 var(--space-4);border:1px solid var(--p-control-line);border-radius:var(--radius-ctl);background:var(--p-card);color:var(--p-primary);font-size:var(--p-control-size);line-height:var(--p-control-leading);font-weight:600;text-decoration:none}
body[data-parent-design] .parent-group-details .m7-retention>summary{padding:0 var(--space-4);border:1px solid var(--p-control-line);border-radius:var(--radius-ctl);background:var(--p-card);font-size:var(--p-control-size);line-height:var(--p-control-leading);font-weight:600}
body[data-parent-design] .parent-group-details .m7-retention>summary::after{content:"";width:8px;height:8px;margin:0 4px 4px auto;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);flex:none}
body[data-parent-design] .parent-group-details .m7-retention[open]>summary::after{margin-bottom:-4px;transform:rotate(-135deg)}

/* Today: each plan is its own card, so the day group must not also be a bordered card (double outline, 1px inset, cards touching with no gap). The group is one list: 8px between its cards. */
body[data-parent-design] .rb21-today .x3-group{display:flex;flex-direction:column;gap:var(--space-2,8px);background:transparent;border:0;border-radius:0;overflow:visible}

/* Section headings beside a date/count wrap onto a second line before they split a word. */
body[data-parent-design] .x3-spread:has(> :is(h1,h2,h3) + .x3-meta){flex-wrap:wrap;row-gap:var(--space-1,4px)}
body[data-parent-design] .x3-spread > :is(h1,h2,h3){overflow-wrap:break-word;word-break:normal}

/* Group file cards: Document details is a secondary button of the same family as the other controls, not a bare centred link (the card title/preview trigger is left as is). */
body[data-parent-design] .parent-group-details .m7-file-details{justify-content:center;padding:0 var(--space-4);border:1px solid var(--p-control-line);border-radius:var(--radius-ctl);background:var(--p-card);color:var(--p-primary);font-size:var(--p-control-size);line-height:var(--p-control-leading);font-weight:600;text-decoration:none}

/* Card titles share one style: the Inbox row title matches the Library, Today and event card titles (Plus Jakarta Sans 17px/600), not the serif section-heading style. */
body[data-parent-design] .rb21-inbox .cr3-row .x3-titlerow>.x3-h3{font-family:var(--p-body-font,"Plus Jakarta Sans"),sans-serif;font-size:1.0625rem;line-height:1.35;font-weight:600;color:var(--p-ink)}

/* Chat list filter chips: 44px target and the same selected language as the child pill (primary fill, white text). */

/* Notices header row (caption + Post a notice, on the page and in Group Details): the row wraps and the caption keeps a readable width instead of being crushed beside a no-wrap button at large text. */
body[data-parent-design] .x3-spread:has(> .x3-btn[data-testid="post-notice"]){flex-wrap:wrap;row-gap:var(--space-2,8px)}
body[data-parent-design] .x3-spread:has(> .x3-btn[data-testid="post-notice"]) > .x3-note{min-width:min(100%,12rem)}

/* Chat bubbles (all conversation surfaces: group, event/topic threads, archive): long messages may use up to 90% of the conversation width, short ones keep their natural width, incoming left / outgoing right.
   The options menu sits in each message's meta line (timestamp row) instead of a permanently reserved column beside the bubble; its 44px target is kept with negative block margins. */
body[data-parent-design] .m7-msg{width:100%;max-width:100%;gap:var(--space-2,8px)}
body[data-parent-design] .m7-msg.own{justify-content:flex-start}
body[data-parent-design] .m7-col{max-width:90%;min-width:0;align-items:flex-start}
body[data-parent-design] .m7-msg.own .m7-col{align-items:flex-end}
body[data-parent-design] .m7-msg:not(.own) .m7-col{max-width:calc(100% - 36px)}
body[data-parent-design] .m7-bubble{padding:var(--space-2,8px) var(--space-3,12px);max-width:100%}
body[data-parent-design] .m7-col:has(> .m7-document-card,> .m7-files){width:90%}
body[data-parent-design] .m7-msg:not(.own) .m7-col:has(> .m7-document-card,> .m7-files){width:calc(100% - 36px)}
body[data-parent-design] .m7-col > .m7-document-card,body[data-parent-design] .m7-col > .m7-files{width:100%;max-width:100%}
body[data-parent-design] .m7-meta{display:flex;align-items:center;gap:var(--space-1,4px);min-height:28px;max-width:100%}
body[data-parent-design] .m7-msg.own .m7-meta{flex-direction:row-reverse}
body[data-parent-design] .m7-meta .m7-time{margin:0}
body[data-parent-design] .m7-meta .m7-more{flex:none;margin-block:-8px;align-self:center}

/* Avatar sits beside the first line of its run (not the options row), chat view tabs wrap by label and the composer wraps instead of squeezing the input at large text. The #m7-panel selectors match the ID-specific rules in reviewbook-31-40-b.css. */
body[data-parent-design] .m7-msg{align-items:flex-start}
body[data-parent-design] .m7-msg:not(.own) .m7-avatar{margin-top:18px}
body[data-parent-design] #m7-panel .m7-composer{display:flex;flex-wrap:wrap;align-items:flex-end}
body[data-parent-design] #m7-panel .m7-composer>.m7-input{flex:1 1 6rem;min-width:0}
body[data-parent-design] #m7-panel .m7-composer>:is(.m7-send,.m7-attach){flex:none}
body[data-parent-design] #m7-panel .m7-composer>.m7-composer-status{flex:1 1 100%}
body[data-parent-design] .m7-meta .m7-more{opacity:1;color:var(--p-meta)}

/* Circled-X close (one family): 44px round target, same control line and card ground as the other round icon roles; never a text link. */
body[data-parent-design] button.x3-btn.x3-close{flex:none;width:var(--touch);min-width:var(--touch);height:var(--touch);min-height:var(--touch);padding:0;border-radius:50%;border:1px solid var(--p-control-line);background:var(--p-card);color:var(--p-primary);display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
html[data-input-mode="pointer"] body[data-parent-design] dialog :is(button.x3-close, :is(h1,h2,h3,h4)[tabindex="-1"]):focus {
  outline: none;
}
body[data-parent-design] button.x3-close svg{width:20px;height:20px}

/* Page header title row: heading + quiet information glyph share one row. The
   glyph is visually subtle; its transparent 44px target and focus ring remain. */
body[data-parent-design] .x3-titlebar{display:flex;align-items:flex-start;gap:8px;justify-content:space-between;min-width:0}
body[data-parent-design] .x3-titlebar>:is(h1,h2,.x3-h1){flex:1 1 auto;min-width:0;margin:0}
body[data-parent-design] .x3-titlebar>.cr3-explain-wrap{flex:none;display:inline-flex}
body[data-parent-design] button.cr3-info{width:var(--touch);min-width:var(--touch);height:var(--touch);min-height:var(--touch);padding:0;border-radius:50%;border:0;background:transparent;color:var(--p-meta);display:inline-flex;align-items:center;justify-content:center}
body[data-parent-design] .cr3-info svg{width:16px;height:16px}
body[data-parent-design] button.cr3-info:is(:hover,:focus-visible){background:var(--p-quiet);color:var(--p-primary)}

/* ONE filter / child-selection family. The approved reference is Today's outlined soft rounded rectangle: 48px, control radius 14, 15/20 semibold, 1px control line on the card ground,
   selected = primary green with white text. Child filters (Today, Calendar, Inbox, Library, Chat, Review), group filters and the Organise chip all use it: no capsule/rectangle mixture.
   Circular avatars inside it are the documented identity role. Long labels wrap (large text), never clip. */
body[data-parent-design] :is(.x3-chip,.child-filter-pill,.m7-chip){display:inline-flex;align-items:center;gap:8px;min-height:var(--p-button-height);padding:12px 16px;box-sizing:border-box;border:1px solid var(--p-control-line);border-radius:var(--radius-ctl);background:var(--p-card);color:var(--p-ink);font-family:inherit;font-size:var(--p-control-size);line-height:var(--p-control-leading);font-weight:600;white-space:normal;overflow-wrap:anywhere;text-align:left;max-width:100%}
body[data-parent-design] :is(.x3-chip,.child-filter-pill,.m7-chip)[aria-pressed="true"]{background:var(--p-primary);border-color:var(--p-primary);color:var(--p-card)}
body[data-parent-design] :is(.x3-chips,.calendar-child-filters,.m7-filter){gap:var(--space-2)}

/* One page-header region: the title with its attached supporting line (date, scope or count). Titles keep the display style; the supporting line is the documented 14/20. */
body[data-parent-design] .x3-pageheader{display:flex;flex-direction:column;gap:4px;min-width:0}
body[data-parent-design] .x3-pageheader>:is(h1,h2){margin:0}
body[data-parent-design] .x3-date,body[data-parent-design] .x3-pageheader>p{margin:0;font-size:var(--p-supporting-size);line-height:var(--p-supporting-leading);color:var(--p-secondary)}

/* Document card family (Library, Search, Chat attachments, detail header): compact optional thumbnail, natural title, privacy + due on one row, ONE wrapping tag group that includes the
   child identity. No fixed card heights, no divider row, no forced three-across: items wrap at narrow width and large text and never clip. */
body[data-parent-design] :is(.x3-docmeta,.x3-doctags){display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);min-width:0}
body[data-parent-design] .x3-docmeta:empty{display:none}
body[data-parent-design] .x3-media-card{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
body[data-parent-design] .x3-media-card.has-thumb{grid-template-columns:44px minmax(0,1fr);gap:var(--space-3)}
body[data-parent-design] .x3-media-card .x3-media-mark{min-height:56px;width:44px;border-radius:var(--radius-ctl)}
body[data-parent-design] .x3-media-main{gap:var(--space-2)}
/* The one documented compact badge: noninteractive, 12/16 semibold, capsule. Same role, same geometry on every page. */
body[data-parent-design] .x3-pill{font-size:var(--p-meta-size);line-height:var(--p-meta-leading);padding:4px 10px}
body[data-parent-design] .x3-childtag{gap:6px}
body[data-parent-design] .x3-childtag .x3-dots{display:inline-flex}
body[data-parent-design] .x3-childtag .x3-dot{width:16px;height:16px;font-size:.5625rem;margin-left:0}
body[data-parent-design] .x3-docclose{color:var(--p-meta)}

/* Event primary actions: a plain visible action list (Edit, Assign, Private note, Add booking details), not a collapsed disclosure. */
body[data-parent-design] .cv-event-primary{display:flex;flex-direction:column;gap:var(--space-2);padding:0;border:0;background:transparent}

/* Week strip at large text: position context for the reveal, and the same soft side fade as every other sideways row. */
body[data-parent-design] .cv-grid.cv-week{position:relative}
body[data-parent-design] .cv-grid[data-more="end"]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
body[data-parent-design] .cv-grid[data-more="start"]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 28px),transparent)}
body[data-parent-design] .cv-grid[data-more="both"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}

/* Every dialog header (shared sheet, event dialogs, surfaces): the title keeps whole words and the circled close wraps below it at large text instead of squeezing it. */
body[data-parent-design] :is(.m5-dialog-head,.cre-surface-head,.x3-sheet-head){display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-2)}
body[data-parent-design] :is(.m5-dialog-head,.cre-surface-head,.x3-sheet-head)>:is(h1,h2,h3){flex:1 1 auto;min-width:0;max-width:100%;overflow-wrap:break-word}
body[data-parent-design] :is(.m5-dialog-head,.cre-surface-head,.x3-sheet-head)>button.x3-close{margin-inline-start:auto}

/* Round icon actions (add document, filters) keep their 44px target when a title row gets crowded (title + circled info + action). */
body[data-parent-design] .x3-roundbtn{flex:none;min-width:var(--touch);min-height:var(--touch)}

/* Chat list: the visually hidden heading and its circled info share one row; New conversation follows the filters as a full-width primary action. */
body[data-parent-design] .m7-listhead>.x3-titlebar{justify-content:flex-end}
body[data-parent-design] .m7-overview>.m7-newbtn{width:100%;margin:0 0 var(--space-3)}

/* Group Details content: every child of the one content column shares the sheet gutter and the canonical card geometry (card 16 radius, 16 padding, no shadow or gradient, no extra inset). */
body[data-parent-design] .parent-group-content>:is(.m7-chat-intro,.m7-welcome,.m7-panel){margin:0;width:100%;max-width:100%;box-sizing:border-box}
body[data-parent-design] .parent-group-content>.m7-chat-intro{padding:var(--space-4);border:1px solid var(--p-line);border-radius:var(--radius-card);background:var(--p-card);background-image:none;box-shadow:none}
body[data-parent-design] .parent-group-content{display:flex;flex-direction:column;gap:var(--space-3)}

/* Dialog form labels (event, booking, note, trip dialogs built with older classes): ONE field-label style (14/20 semibold) and ONE checkbox/radio choice style (body 16/24 regular, 44px row), whatever classes the markup carries. */
body[data-parent-design] :is(dialog,[data-form-overlay]) label{font-family:"Plus Jakarta Sans",sans-serif;font-size:var(--p-supporting-size);line-height:var(--p-supporting-leading);font-weight:600}
body[data-parent-design] :is(dialog,[data-form-overlay]) label:has(>input[type=checkbox],>input[type=radio]){display:flex;align-items:center;gap:var(--space-2);min-height:var(--touch);font-size:var(--p-body-size);line-height:var(--p-body-leading);font-weight:400}
body[data-parent-design] :is(dialog,[data-form-overlay]) label>input[type=checkbox],body[data-parent-design] :is(dialog,[data-form-overlay]) label>input[type=radio]{flex:0 0 var(--space-5);width:var(--space-5);height:var(--space-5);min-width:var(--space-5);min-height:var(--space-5);padding:0;margin:0}

/* Booking overlay: the same control geometry as every other form (button radius 14, 48px, 15/20 semibold) and the field-label style above, whatever Tailwind classes the older markup carries. */
body[data-parent-design] [data-form-overlay] button{border-radius:var(--radius-ctl);min-height:var(--p-button-height);font-size:var(--p-control-size);line-height:var(--p-control-leading);font-weight:600}

/* The planner/composer field group (.cre-field) joins the one form-field geometry: same padding, 48px, and the documented 14/20 semibold label. */
body[data-parent-design] .cre-field :is(input:not([type=checkbox]):not([type=radio]),select,textarea){padding:10px 14px;min-height:var(--p-button-height)}
body[data-parent-design] .cre-field textarea{min-height:calc(var(--p-button-height) * 2)}
body[data-parent-design] .cre-field>:is(label,.cre-label){font-size:var(--p-supporting-size);line-height:var(--p-supporting-leading);font-weight:600}

/* Tickets on the event: one calm section above the actions; each ticket is a card row with View and Remove (44px targets). */
body[data-parent-design] .cv-tickets{gap:var(--space-2)}
body[data-parent-design] .cv-ticket-row{align-items:center;gap:var(--space-3);flex-wrap:wrap}
body[data-parent-design] .cv-ticket-row .x3-title{overflow-wrap:anywhere}
body[data-parent-design] .cv-ticket-row{text-align:start;align-items:flex-start}
body[data-parent-design] .cv-ticket-row>.x3-stack{align-items:flex-start;min-width:0}

/* Date/time semantic wrappers: the controls retain the one form-value contract
   above; explicit unknown/all-day choices can wrap without compressing native
   controls or imposing a locale. Labels/supporting text remain outside values. */
body[data-parent-design] .parent-date-time{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-4);min-width:0;max-width:100%}
body[data-parent-design] .parent-date-time>*{flex:1 1 12rem;min-width:0;max-width:100%}
body[data-parent-design] .parent-time-field{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2);min-width:0;max-width:100%}
body[data-parent-design] .parent-time-field :is(input:not([type=checkbox]):not([type=radio]),select),body[data-parent-design] .parent-date-time-value{width:100%;max-width:100%;min-width:0;height:max(var(--p-button-height),calc(1.5em + var(--space-5)))}
body[data-parent-design] .parent-time-field[hidden]{display:none}