@import url('./parent-tokens.css');
/* ================= CR1.7 design tokens =================
   One source for the values every x3-* component uses. These mirror the values the stylesheet already used (no visual change in P01).
   New shared rules and touched components must read tokens; a new raw colour or fixed pixel value needs an entry in docs/cr17/style-exceptions.json.
   Geometry tokens (--env-h, --hdr-h, --nav-h, --dock-h) are layout facts, set by the shell, never guessed per screen. */
:root {
  --c-primary:var(--p-primary); /* Primary action, selected state, links */
  --c-primary-deep:var(--p-deep); /* Display headings, profile avatar */
  --c-ink:var(--p-ink); /* Body text */
  --c-ink-2:var(--p-secondary); /* Secondary text */
  --c-ink-3:var(--p-meta); /* Meta text */
  --c-ink-4:#5f6561; /* Tab and attention meta */
  --c-ink-5:#5f6561; /* Muted text, eyebrow */
  --c-ink-6:#1d1b18; /* Row text on Today */
  --c-paper:var(--p-paper); /* Page background */
  --c-card:var(--p-card); /* Card surface */
  --c-line:var(--p-line); /* Card hairline */
  --c-line-2:var(--p-control-line); /* Control border */
  --c-line-3:#e3ded6; /* Group hairline */
  --c-line-4:#eeebe5; /* Row divider */
  --c-wash:var(--p-quiet); /* Quiet surface */
  --c-wash-2:var(--p-pill); /* Pill surface */
  --c-seg:var(--p-segment); /* Segmented track */
  --c-danger:var(--p-danger); /* Destructive text */
  --c-warn:var(--p-terracotta); /* Warning text */
  --c-link:#165caf; /* Inline link */
  --env-h:0px; /* Legacy geometry alias. CR5 Test identity consumes no row. */
  --hdr-h:64px; /* header bar, below the safe-area inset */
  --nav-h:64px; /* bottom tab row, above the safe-area inset */
  --dock-h:0px; /* action dock height, set by the screen that shows one */
}
/* ================= end tokens =================*/

/* CR1.3 — Media, Review findings, Search, Family access. Same visual language as the Chat/Calendar screens (Newsreader headings,
   eucalyptus var(--c-primary) actions, warm paper var(--c-paper), hairline var(--c-line) cards). Classes are x3-* so nothing collides with screen CSS. */
.x3-page { width:100%; box-sizing:border-box; max-width:var(--page-max); margin:0 auto; padding:calc(var(--hdr-h) + var(--space-2)) var(--gutter) calc(var(--nav-h) + var(--dock-h) + env(safe-area-inset-bottom,0px) + 48px); display:flex; flex-direction:column; gap:16px; }
.x3-page > *, .x3-stack > *, .x3-sheet-body > * { min-width:0; max-width:100%; }
.x3-btn, a.x3-btn, a.x3-btn:visited { color:var(--c-card) !important; }
.x3-btn.secondary, a.x3-btn.secondary, a.x3-btn.secondary:visited, .x3-btn.quiet { color:var(--c-primary) !important; }
.x3-btn.danger { color:var(--c-danger) !important; }
.x3-eyebrow { overflow-wrap:anywhere; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink-3); margin:0; font-weight:600; }
.x3-h1 { font-family:Newsreader,serif; font-size:1.875rem; line-height:1.15; color:var(--c-primary-deep); margin:0; font-weight:500; overflow-wrap:anywhere; }
.x3-h2 { font-family:Newsreader,serif; font-size:1.375rem; color:var(--c-primary-deep); margin:0; font-weight:500; }
.x3-h3 { font-size:1rem; font-weight:600; margin:0; color:var(--c-ink); overflow-wrap:anywhere; }
.x3-lede, .x3-note { font-size:.9375rem; color:var(--c-ink-2); margin:0; line-height:1.4; }
.x3-note { font-size:.8125rem; color:var(--c-ink-3); }
.x3-row { display:flex; gap:10px; align-items:center; }
.x3-row.wrap { flex-wrap:wrap; }
.x3-spread { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.x3-stack { display:flex; flex-direction:column; gap:8px; }
.x3-row:empty, .x3-stack:empty { display:none; } /* an empty filter row must not reserve a flex gap */
.x3-hidden { display:none !important; }

/* Segmented navigation geometry and variants are owned by parent-system.css. */

/* Chip rows scroll sideways and bleed to the screen edge, so a clipped chip is cut by the display, never by an inner margin. A soft fade
   (data-more, set by the shell when more chips exist off-screen) tells a parent the row continues. */
.x3-chips { display:flex; gap:var(--space-2); overflow-x:auto; padding:2px var(--gutter) 6px; margin-inline:calc(-1 * var(--gutter)); width:calc(100% + 2 * var(--gutter)); max-width:none !important; box-sizing:border-box; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-padding-inline:var(--gutter); }
.x3-chips[data-more="end"] { -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent); }
.x3-chips[data-more="start"] { -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent); }
.x3-chips[data-more="both"] { -webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent); }
#child-filter-section { margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter); width:calc(100% + 2 * var(--gutter)); max-width:none; box-sizing:border-box; scroll-padding-inline:var(--gutter); }
#child-filter-section[data-more="end"] { -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent); }
/* A restored selection remains readable, including enlarged text/long names.
   A wide selected chip uses the available width rather than hiding its label
   under the scroll cue. Other chips remain reachable by horizontal scrolling. */
.x3-childsel .x3-chip,#child-filter-section .child-filter-pill { flex:0 0 auto; max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:left; }
.x3-child-name { min-width:0; overflow-wrap:anywhere; white-space:normal; }
#child-filter-section { align-items:stretch; }
#child-filter-section .child-filter-pill > span { min-width:0; overflow-wrap:anywhere; }
.x3-childsel[data-selected-wide="true"],#child-filter-section[data-selected-wide="true"] { -webkit-mask-image:none; mask-image:none; }
.x3-chips::-webkit-scrollbar { display:none; }
.x3-chips.wrap { flex-wrap:wrap; overflow:visible; margin:0; padding-inline:0; width:auto; }
.x3-chip { flex:0 0 auto; max-width:100%; overflow-wrap:anywhere; min-height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--c-line-2); background:var(--c-card); font:inherit; font-size:.9375rem; color:var(--c-ink); display:inline-flex; align-items:center; gap:8px; white-space:normal; padding-block:8px; }
.x3-chip[aria-pressed="true"] { background:var(--c-primary); border-color:var(--c-primary); color:var(--c-card); font-weight:600; }
.x3-chip[aria-pressed="true"] .x3-dot { box-shadow:0 0 0 2px var(--c-card); }
.x3-chip .x3-dot { width:22px; height:22px; font-size:.6875rem; }
.x3-dot { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; font-size:.75rem; font-weight:700; color:var(--c-card); background:var(--c-primary); flex:none; }
.x3-dots { display:inline-flex; gap:2px; align-items:center; }
.x3-dots .x3-dot { width:20px; height:20px; font-size:.625rem; margin-left:-4px; box-shadow:0 0 0 2px var(--c-card); }
.x3-dots .x3-dot:first-child { margin-left:0; }
.x3-card { background:var(--c-card); border:1px solid var(--c-line); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:8px; text-align:left; width:100%; font:inherit; color:inherit; }
button.x3-card, a.x3-card { cursor:pointer; text-decoration:none; }
.x3-card:focus-visible, .x3-btn:focus-visible, .x3-chip:focus-visible, .x3-seg button:focus-visible, .x3-link:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }
.x3-card.quiet { background:var(--c-wash); border-color:#e3ded6; }
.x3-card.alert { background:#fbf0ea; border-color:#eccbbb; }
.x3-card.ok { background:#eef5f1; border-color:#cfe2d8; }
.x3-pill { display:inline-flex; align-items:center; gap:4px; font-size:.75rem; line-height:1.2; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--c-wash-2); color:var(--c-ink-2); max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.x3-pill.personal { background:#eef3f0; color:var(--c-primary); }
.x3-pill.shared { background:#e0e8f2; color:#2f4f73; }
.x3-pill.family { background:#efe8d5; color:#5f5024; }
.x3-pill.ok { background:#dcebe2; color:var(--p-primary); }
.x3-pill.warn { background:#fbe9e0; color:var(--c-warn); }
.x3-pill.info { background:#e9eef6; color:#2f4f73; }
.x3-pill.ghost { background:transparent; border:1px solid var(--c-line-2); color:var(--c-ink-2); font-weight:500; }
.x3-pills { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.x3-btn { min-height:48px; padding:0 20px; border-radius:24px; background:var(--c-primary); color:var(--c-card); border:1px solid var(--c-primary); font:inherit; font-weight:600; font-size:1rem; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; cursor:pointer; }
.x3-btn.secondary { background:var(--c-card); color:var(--c-primary); border-color:#c1c8c4; }
.x3-btn.quiet { background:transparent; color:var(--c-primary); border-color:transparent; padding:0 10px; }
.x3-btn.danger { background:var(--c-card); color:var(--c-danger); border-color:var(--c-danger); }
.x3-btn.small { min-height:44px; padding:0 14px; font-size:.9375rem; }
.x3-btn.block { width:100%; }
.x3-btn:disabled, .x3-btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
.x3-btn[aria-busy="true"] { cursor:progress; opacity:.75; }
.x3-link { color:var(--c-link); text-decoration:underline; text-underline-offset:3px; background:none; border:0; font:inherit; padding:0; min-height:44px; min-width:var(--touch); justify-content:center; display:inline-flex; align-items:center; cursor:pointer; }
.x3-field { display:flex; flex-direction:column; gap:6px; font-size:.875rem; font-weight:600; color:var(--c-ink); }
.x3-field input, .x3-field select, .x3-field textarea, .x3-input { font:inherit; font-size:1rem; font-weight:400; min-height:48px; padding:10px 14px; border:1px solid var(--c-line-2); border-radius:14px; background:var(--c-card); color:var(--c-ink); width:100%; box-sizing:border-box; }
.x3-field textarea { min-height:88px; resize:vertical; }
.x3-field input:focus, .x3-field textarea:focus, .x3-input:focus { outline:2px solid var(--c-primary); outline-offset:0; border-color:transparent; }
.x3-check { display:flex; gap:12px; align-items:flex-start; min-height:48px; padding:6px 0; font-weight:400; font-size:1rem; }
.x3-check input { width:22px; height:22px; margin:2px 0 0; flex:none; accent-color:var(--c-primary); }
.x3-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.x3-search-input { position:relative; flex:1; min-width:0; }
.x3-search-input input { padding-left:42px; }
.x3-search-input svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--c-ink-3); pointer-events:none; }
.x3-group-head { font-size:.8125rem; font-weight:700; color:var(--c-ink-2); text-transform:uppercase; letter-spacing:.05em; margin:10px 2px 0; display:flex; justify-content:space-between; }
.x3-list { display:flex; flex-direction:column; gap:8px; }
.x3-title { font-size:1.0625rem; font-weight:600; color:var(--c-ink); margin:0; overflow-wrap:anywhere; }
.x3-meta { font-size:.8125rem; color:var(--c-ink-3); margin:0; }
.x3-due { font-size:.875rem; font-weight:600; color:var(--c-primary); margin:0; }
.x3-due.overdue { color:var(--c-warn); } .x3-due.unclear { color:#7a5d12; }
.x3-quote { background:var(--c-wash); border-radius:10px; padding:10px 12px; font-size:.875rem; color:var(--c-ink-2); margin:0; overflow-wrap:anywhere; }
.x3-quote cite { display:block; font-style:normal; font-size:.75rem; color:var(--c-ink-3); margin-top:4px; }
.x3-banner { display:flex; gap:10px; align-items:center; justify-content:space-between; background:var(--c-primary); color:var(--c-card); padding:10px 14px; border-radius:14px; font-size:.9375rem; }
.x3-banner button { background:var(--c-card); color:var(--c-primary); border:0; border-radius:16px; min-height:40px; padding:0 14px; font-weight:600; font:inherit; }
.x3-empty { padding:28px 18px; text-align:center; background:var(--c-card); border:1px solid var(--c-line); border-radius:16px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.x3-empty p { margin:0; } .x3-skel { min-height:92px; border-radius:16px; background:linear-gradient(90deg,var(--c-wash-2),#fbf9f6,var(--c-wash-2)); }
.x3-progress { display:flex; gap:6px; align-items:center; font-size:.875rem; color:var(--c-ink-2); }
.x3-spinner { width:16px; height:16px; border:2px solid #c1c8c4; border-top-color:var(--c-primary); border-radius:50%; animation:x3spin 0.9s linear infinite; flex:none; }
@keyframes x3spin { to { transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce) { .x3-spinner { animation:none; } }
.x3-back { min-height:44px; display:inline-flex; align-items:center; gap:4px; padding:0 10px 0 0; background:transparent; border:0; color:var(--c-primary); font:inherit; font-weight:600; font-size:1rem; cursor:pointer; align-self:flex-start; }
.x3-thumbs { display:flex; gap:10px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none; }
.x3-thumb { flex:0 0 auto; width:104px; border:1px solid var(--c-line-2); border-radius:12px; overflow:hidden; background:var(--c-card); padding:0; position:relative; min-height:132px; cursor:pointer; }
.x3-thumb img { width:100%; height:132px; object-fit:cover; display:block; background:var(--c-wash-2); }
.x3-thumb span { position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,.65); color:var(--c-card); font-size:.6875rem; border-radius:8px; padding:1px 7px; }
.x3-thumb .x3-filebox { height:132px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:.75rem; color:var(--c-ink-2); }
.x3-original { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:var(--space-3); }
.x3-original-icon { width:40px; height:40px; border-radius:12px; background:var(--c-wash-2); color:var(--c-primary); display:flex; align-items:center; justify-content:center; }
.x3-original-main { min-width:0; display:flex; flex-direction:column; gap:2px; }
.x3-original .x3-btn { white-space:nowrap; }
@media (max-width:359px) { .x3-original { grid-template-columns:40px minmax(0,1fr); } .x3-original .x3-btn { grid-column:1 / -1; width:100%; } }
dialog.x3-sheet { border:0; padding:0; background:transparent; width:100%; max-width:40rem; margin:auto auto 0; max-height:var(--sheet-max,92dvh); overflow:visible; }
dialog.x3-sheet::backdrop { background:rgba(20,30,26,.45); }
.x3-sheet-body { background:var(--c-paper); border-radius:var(--radius-sheet) var(--radius-sheet) 0 0; padding:var(--gutter) var(--gutter) calc(20px + env(safe-area-inset-bottom)); max-height:var(--sheet-max,92dvh); overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.x3-sheet-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; }
.x3-sheet-head > .x3-btn, .x3-sheet-head > button { flex:none; white-space:nowrap; } /* Close never splits; at large text it wraps below the title */
.x3-sheet-head h2 { margin:0; }
.x3-form-sheet .x3-sheet-head h2 { flex:1 1 auto; min-width:0; max-width:100%; overflow-wrap:break-word; } /* whole words: when the title and Close cannot share a line at large text, Close wraps below it */
.x3-form-sheet .x3-sheet-head { flex-wrap:wrap; }
body[data-parent-design] .x3-form-sheet .x3-sheet-head>button { flex:none; white-space:nowrap; }
.x3-form-sheet .x3-sheet-head>button { margin-left:auto; }
/* Long composers keep their explicit exit available while the fields scroll. */
.x3-sheet-sticky-head .x3-sheet-head { position:sticky; top:calc(-1 * var(--gutter)); z-index:2; background:var(--c-paper); flex-shrink:0; margin:calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) 0; padding:var(--gutter); max-width:none; box-sizing:border-box; border-bottom:1px solid var(--c-line-4); }
dialog.x3-sheet.x3-sheet-sticky-head, .x3-sheet-sticky-head .x3-sheet-body { max-height:min(var(--sheet-max,92dvh),calc(100dvh - var(--env-h,0px))); box-sizing:border-box; }
.x3-toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(92px + env(safe-area-inset-bottom)); z-index:200; background:#1d2b26; color:var(--c-card); border-radius:16px; padding:12px 16px; display:flex; gap:14px; align-items:center; font-size:.9375rem; max-width:min(92vw,36rem); box-shadow:0 6px 24px rgba(0,0,0,.25); }
.x3-toast button { background:transparent; border:0; color:#9fd3bb; font:inherit; font-weight:700; min-height:44px; padding:0 4px; }
.x3-audience { display:flex; gap:10px; align-items:center; justify-content:space-between; background:var(--c-wash); border-radius:14px; padding:10px 12px; font-size:.9375rem; }
.x3-audience b { font-weight:700; }
.x3-pickrow { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.x3-pick { min-height:92px; border:1px solid var(--c-line-2); border-radius:16px; background:var(--c-card); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:10px 6px; font:inherit; font-size:.875rem; font-weight:600; color:var(--c-primary); text-align:center; cursor:pointer; }
.x3-pick svg { width:26px; height:26px; }
.x3-media-card { display:grid; grid-template-columns:52px minmax(0,1fr); gap:var(--space-3); align-items:start; }
.x3-media-mark { min-height:68px; border-radius:14px; background:linear-gradient(180deg,#f4f0e8,var(--c-wash-2)); border:1px solid var(--c-line-4); color:var(--c-primary); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; overflow:hidden; }
.x3-media-mark img { width:100%; min-height:68px; object-fit:cover; display:block; }
.x3-media-mark span { font-size:.6875rem; font-weight:700; color:var(--c-ink-3); }
.x3-media-main { min-width:0; display:flex; flex-direction:column; gap:8px; }
@media (max-width:340px) { .x3-media-card { grid-template-columns:44px minmax(0,1fr); gap:var(--space-2); } .x3-media-mark { min-height:56px; } }
.x3-fileitem { display:flex; gap:10px; align-items:center; background:var(--c-card); border:1px solid var(--c-line); border-radius:14px; padding:8px 10px; }
.x3-fileitem img { width:48px; height:48px; object-fit:cover; border-radius:8px; background:var(--c-wash-2); flex:none; }
.x3-fileitem .x3-grow { flex:1; min-width:0; }
.x3-fileitem .x3-grow p { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.x3-iconbtn { min-width:44px; min-height:44px; border:0; background:transparent; color:var(--c-ink-2); border-radius:12px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.x3-iconbtn svg { width:22px; height:22px; }
.x3-iconbtn:disabled { opacity:.35; }
.x3-hl { background:#f6e7a8; border-radius:3px; padding:0 1px; }
.x3-counts { display:flex; gap:8px; flex-wrap:wrap; }
.x3-section { display:flex; flex-direction:column; gap:10px; }
.x3-kv { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:.875rem; margin:0; }
.x3-kv dt { color:var(--c-ink-3); } .x3-kv dd { margin:0; overflow-wrap:anywhere; }
.x3-divider { height:1px; background:var(--c-line); border:0; margin:2px 0; }
.x3-hdr-search { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; color:var(--c-primary-deep); background:transparent; border:0; text-decoration:none; }
.x3-hdr-search svg { width:22px; height:22px; }
.x3-badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#8f4a3a; color:var(--c-card); font-size:.6875rem; font-weight:700; }
.x3-navbadge { position:absolute; top:2px; right:calc(50% - 26px); }
.x3-homecards { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.x3-homecards > * { min-height:88px; }
@media (max-width:359px) { :root { --gutter:12px; } .x3-page { padding-inline:var(--gutter); } .x3-pickrow { grid-template-columns:1fr 1fr; } .x3-homecards { grid-template-columns:1fr; } }
@media (max-width:380px) {
  .x3-plan { grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:start; }
  .x3-plan-time { grid-column:1 / -1; }
  .x3-plan-main { grid-column:1; }
  .x3-plan > svg:last-child { grid-column:2; grid-row:2; align-self:center; }
}
@media (min-width:381px) {
  html[style*="font-size: 2"] .x3-plan,
  html[data-large-text="true"] .x3-plan { grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:start; }
  html[style*="font-size: 2"] .x3-plan-time,
  html[data-large-text="true"] .x3-plan-time { grid-column:1 / -1; }
  html[style*="font-size: 2"] .x3-plan-main,
  html[data-large-text="true"] .x3-plan-main { grid-column:1; }
  html[style*="font-size: 2"] .x3-plan > svg:last-child,
  html[data-large-text="true"] .x3-plan > svg:last-child { grid-column:2; grid-row:2; align-self:center; }
}

/* Chat additions */
.m7-composer { grid-template-columns:auto 1fr auto !important; }
.m7-attach { color:var(--c-primary); border:1px solid var(--c-line-2); border-radius:50%; background:var(--c-card); }
.m7-msg .x3-card { font-size:.9375rem; }
.m7-chat-head .x3-iconbtn { flex:none; color:var(--c-primary); }
/* CR1.4 peer verification */
.x3-steps { display:flex; gap:6px; align-items:center; }
.x3-step { width:34px; height:8px; border-radius:6px; background:#e3ded6; }
.x3-step.on { background:#2c6a4f; }
.x3-pill.verified { background:#dcebe2; color:var(--p-primary); }
.x3-pill.progress { background:#efe8d5; color:#5f5024; }
.x3-pill.overdue { background:#f6dedb; color:#8a2b24; }
.x3-code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.5rem; letter-spacing:.14em; font-weight:700; color:var(--c-primary); max-width:100%; overflow-wrap:anywhere; } /* CRE009-P05: at large text the 12-character code wraps instead of widening the page */
.m7-welcome { margin:8px 12px 0; }
/* CR1.5 shell */
/* Hide legacy static tab bars until cr15-shell paints the canonical Today · Calendar · Library · Chat destinations.
   This prevents old Cohort/Settings/Threads tabs from flashing as available product structure on CRE screens. */
body>nav[data-active-classes]:not(.x3-nav) { visibility:hidden; pointer-events:none; }
.x3-nav { padding-bottom:env(safe-area-inset-bottom,0); visibility:visible; pointer-events:auto; }
.x3-nav-row { display:flex; justify-content:space-around; align-items:stretch; height:64px; padding:0 8px; }
.x3-tab { position:relative; flex:1; min-width:0; min-height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--c-ink-4); font-size:min(.75rem,calc((100vw - 16px) / 23)); font-weight:500;   /* CR1.82/CR3: five labels (the longest is Calendar) always fit the bar, also at large text sizes */ text-decoration:none; -webkit-tap-highlight-color:transparent; }
.x3-tab svg { width:24px; height:24px; }
.x3-tab[aria-current="page"] { color:var(--c-primary); font-weight:600; }
.x3-tab[aria-current="page"] svg { stroke-width:2.1; }
.x3-tab:focus-visible { outline:2px solid var(--c-primary); outline-offset:-4px; border-radius:12px; }
/* CR1.5 Today */
.x3-attn { background:var(--c-card); border:1px solid var(--c-line-3); border-radius:16px; overflow:hidden; }
.x3-attn-row { display:flex; align-items:center; gap:12px; padding:14px 16px; text-decoration:none; color:var(--c-ink-6); min-height:56px; }
.x3-attn-row + .x3-attn-row { border-top:1px solid var(--c-line-4); }
.x3-attn-row > svg:first-child { color:var(--c-primary); flex:none; }
.x3-attn-text { flex:1; display:flex; flex-direction:column; gap:2px; } .x3-attn-text b { font-weight:600; font-size:1rem; } .x3-attn-text small { color:var(--c-ink-4); font-size:.8125rem; }
.x3-group { background:var(--c-card); border:1px solid var(--c-line-3); border-radius:16px; overflow:hidden; }
.x3-plan { display:grid; grid-template-columns:minmax(4.75rem,max-content) minmax(0,1fr) auto; gap:6px 14px; align-items:center; padding:14px 16px; text-decoration:none; color:var(--c-ink-6); min-height:64px; }
.x3-plan + .x3-plan { border-top:1px solid var(--c-line-4); }
.x3-plan-time { min-width:0; font-size:.8125rem; color:var(--c-primary); font-weight:600; overflow-wrap:anywhere; line-height:1.25; }
.x3-plan-main { min-width:0; } .x3-plan-main p { margin:0; }
.x3-plan > svg:last-child { justify-self:end; }
.x3-prep { font-size:.8125rem; color:var(--c-ink-2); margin-top:2px !important; }
.x3-when { font-size:.8125rem; color:var(--c-primary); font-weight:600; }
.x3-link { color:var(--c-primary); font-weight:600; text-decoration:underline; text-underline-offset:4px; min-height:44px; display:inline-flex; align-items:center; }
.x3-prow { display:flex; align-items:center; gap:14px; padding:14px 16px; text-decoration:none; color:var(--c-ink-6); min-height:60px; }
.x3-prow + .x3-prow { border-top:1px solid var(--c-line-4); }
.x3-prow > svg:first-child { color:var(--c-primary); flex:none; }
.x3-prow-text { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; } .x3-prow-text b { font-weight:600; } .x3-prow-text small { color:var(--c-ink-4); font-size:.8125rem; }
/* Secondary header utilities now live in Profile. */
#btn-header-sync, #btn-header-safety, #btn-smart-calendar-sync { display:none !important; }
.x3-plan .x3-dot { width:18px; height:18px; font-size:.625rem; margin-right:2px; vertical-align:-4px; }
/* CRE04-P01: repeat the responsive plan-row rules after the base Today rules, otherwise the base grid wins and large text can overlap again. */
@media (max-width:380px) {
  .x3-plan { grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:start; }
  .x3-plan-time { grid-column:1 / -1; }
  .x3-plan-main { grid-column:1; }
  .x3-plan > svg:last-child { grid-column:2; grid-row:2; align-self:center; }
}
@media (min-width:381px) {
  html[style*="font-size: 2"] .x3-plan,
  html[data-large-text="true"] .x3-plan { grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:start; }
  html[style*="font-size: 2"] .x3-plan-time,
  html[data-large-text="true"] .x3-plan-time { grid-column:1 / -1; }
  html[style*="font-size: 2"] .x3-plan-main,
  html[data-large-text="true"] .x3-plan-main { grid-column:1; }
  html[style*="font-size: 2"] .x3-plan > svg:last-child,
  html[data-large-text="true"] .x3-plan > svg:last-child { grid-column:2; grid-row:2; align-self:center; }
}
.x3-slot { margin:0 0 12px; } .x3-attn-solo { background:var(--c-card); border:1px solid var(--c-line-3); border-radius:16px; }
/* CR1.5 Review */
.x3-suggested { background:#f5f3f0; border:1.5px dashed #b89a5a; box-shadow:none; }
.x3-kvs { display:flex; flex-direction:column; margin:10px 0; background:var(--c-card); border-radius:12px; border:1px solid var(--c-line-3); }
.x3-kv { display:flex; gap:12px; padding:11px 14px; align-items:baseline; } .x3-kv + .x3-kv { border-top:1px solid var(--c-line-4); }
.x3-kv-k { width:64px; flex:none; color:var(--c-ink-4); font-size:.8125rem; } .x3-kv-v { font-weight:500; }
.x3-evidence { background:var(--c-card); border-radius:12px; padding:12px 14px; margin-top:10px; border:1px solid var(--c-line-3); }
.x3-evidence .x3-quote { margin:0 0 6px; } .x3-cite { display:flex; gap:6px; align-items:center; margin:0; font-size:.8125rem; color:var(--c-ink-4); }
/* Review decisions now use the shared .x3-dock (see the CR1.7 contract below). .x3-actions stays as a plain, non-sticky column for any legacy use. */
.x3-actions { display:flex; flex-direction:column; gap:10px; margin-top:6px; align-items:stretch; padding:10px 0 12px; } .x3-actions .x3-link { align-self:center; }
.x3-sheet-actions { display:flex; flex-direction:column; gap:10px; align-items:stretch; padding:10px 0 4px; } .x3-sheet-actions .x3-link { align-self:center; }
.x3-qrow { display:flex; gap:10px; align-items:center; padding:12px 14px; } .x3-qrow + .x3-qrow { border-top:1px solid var(--c-line-4); }
.x3-qmain { flex:1; display:flex; flex-direction:column; gap:2px; text-align:left; background:none; border:0; padding:0; color:inherit; font:inherit; min-width:0; cursor:pointer; }
.x3-qcheck { width:44px; height:44px; display:flex; align-items:center; justify-content:center; flex:none; } .x3-qcheck.off { opacity:0; } .x3-qcheck input { width:22px; height:22px; accent-color:var(--c-primary); }
.x3-batchbar { display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); background:var(--c-paper); margin-inline:calc(-1 * var(--gutter)); padding:var(--space-2) var(--gutter); border-top:1px solid var(--c-line-4); }
.x3-link.small { font-size:.875rem; }

/* CR1.5 Library */
.x3-roundbtn { width:44px; height:44px; border-radius:50%; background:var(--c-primary); color:var(--c-card); border:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.x3-searchrow { display:flex; gap:8px; align-items:center; } .x3-searchrow .x3-search-input { flex:1; }
.x3-organise { min-width:48px; justify-content:center; gap:6px; }
.x3-active { flex-wrap:wrap; align-items:center; gap:6px; }

/* CR1.5 Chat */
.m7-section { margin:0 0 14px; } .m7-section-title { font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink-5); margin:10px var(--space-4) 6px; font-weight:600; }

.m7-panel { padding:12px; display:flex; flex-direction:column; gap:10px; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); }
.x3-switch { width:52px; height:32px; border-radius:999px; border:0; background:#c9c4ba; position:relative; flex:none; cursor:pointer; padding:0; }
.x3-switch[aria-checked="true"] { background:var(--c-primary); }
.x3-switch-knob { position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:var(--c-card); transition:transform .15s; }
.x3-switch[aria-checked="true"] .x3-switch-knob { transform:translateX(20px); }
@media (prefers-reduced-motion:reduce) { .x3-switch-knob { transition:none; } }

.x3-hdr-profile { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.x3-hdr-profile svg { width:32px; height:32px; padding:6px; border-radius:50%; background:var(--c-primary-deep); color:var(--c-card); box-sizing:border-box; }

/* Chat list: make the parent group purpose visible. The shell says Chat; this says why it matters. */
.m7-listhead { justify-content:space-between; align-items:flex-start; gap:12px; } /* the heading is screen-reader-only (rule below); margin set once below */
.m7-listlede { margin:4px 0 0; color:var(--c-ink-2); font-size:.95rem; line-height:1.35; max-width:23rem; }

/* Inline chat suggestion: a quiet chip under the source message that opens the same Review record. */
.m7-inline-sug { display:flex; align-items:center; gap:8px; margin:4px 12px 8px 48px; padding:8px 12px; min-height:44px; border-radius:12px; background:#eef3f0; color:var(--c-primary); text-decoration:none; font-size:.875rem; border:1px solid #cfdcd5; }
.m7-inline-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m7-inline-go { font-weight:700; }

/* Chat reads like Today and Library: same page margins, no inset grey panel, no repeated eyebrow. */
#calendar-context-subtitle:empty { display:none; }
#m7-panel { background:transparent !important; max-width:none !important; min-height:0 !important; padding-bottom:0 !important; }
#m7-main-content { padding:0 !important; }
#m7-panel .m7-section { background:transparent; }
.m7-listhead { margin:0 0 8px; }

#chat-entry-status { display:none; max-width:48rem; width:100%; margin-inline:auto; }
.x3-chat-entry #chat-entry-status { display:block; }
.x3-chat-entry #calendar-content-root { display:none; }
.x3-chat-view #calendar-content-root > footer { display:none; }
.x3-chat-view #m7-main-content { position:relative; }
.x3-chat-view .m7-listhead { position:static; }
/* Only the list header's New conversation button sits in the title row; New topic (Group Details) and Try again stay in normal layout. */
.x3-chat-view .m7-listhead { flex-wrap:wrap; }
.x3-chat-view .m7-listhead > :first-child { flex:1 1 100%; min-width:0; }
.x3-chat-view .m7-listhead > .m7-newbtn { position:static; flex:1 1 100%; min-height:44px; } /* (legacy slot; the button now follows the filters) */ /* in normal flow under the intro text; the old absolute top:-62px floated over the copy */
@media (min-width:40rem) { .x3-chat-view .m7-listhead > .m7-newbtn { flex:0 0 auto; } }

/* CR1.6-05 accessibility: touch targets of 44 px, calendar day cells never narrower than 44 px, switch hit area. */
.cv-grid { gap:0; padding:4px; }
.cv-month .cv-day, .cv-week .cv-day { padding-left:0; padding-right:0; }
.child-filter-pill { min-height:44px; }
.x3-switch { box-sizing:content-box; padding:6px 0; background-clip:content-box; }
.x3-switch .x3-switch-knob { top:9px; }
.text-text-muted { color:var(--c-ink-5) !important; }

/* CR1.7 P02: the Calendar page uses the same gutter token as every other screen. */
#calendar-content-root { padding-inline:var(--gutter) !important; }

/* CRE04-P02: keep the period as the stable heading. Navigation wraps below it before it can squeeze or strand the date range. */
.cv-bar { grid-template-columns:var(--touch) minmax(0,1fr) var(--touch) auto; gap:var(--space-2); align-items:center; }
.cv-title { font-size:clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height:1.18; text-align:center; overflow-wrap:normal; word-break:normal; hyphens:none; }
.cv-title[aria-label] { text-wrap:balance; }
@media (max-width:390px) {
  .cv .cv-bar { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-areas:"title title title" "prev today next"; row-gap:var(--space-2); }
  .cv .cv-bar > .cv-title { grid-area:title; text-align:left; font-size:1.5rem; }
  .cv .cv-bar > .cv-nav[aria-label^="Previous"] { grid-area:prev; }
  .cv .cv-bar > .cv-nav[aria-label^="Next"] { grid-area:next; }
  .cv .cv-bar > .cv-today { grid-area:today; }
  .cv-nav,.cv-today { width:100%; justify-content:center; }
}
/* CRE009-D05: the controls are placed by what they do (Previous / Next), not by their position among buttons: the Today button is the last <button>, so :last-of-type left Next without an area. */
/* CRE009-D06: the default status sentence and the "All children" kicker repeat what the toggle and the child chips already say. They stay for assistive technology. */
#calendar-status-notice[data-default="1"] { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#calendar-context-subtitle:empty { display:none; }
html[style*="font-size: 2"] .cv .cv-bar,
html[data-large-text="true"] .cv .cv-bar { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-areas:"title title title" "prev today next"; row-gap:var(--space-2); }
html[style*="font-size: 2"] .cv-bar > .cv-title,
html[data-large-text="true"] .cv-bar > .cv-title { grid-area:title; }
html[style*="font-size: 2"] .cv-bar > .cv-nav:first-of-type,
html[data-large-text="true"] .cv-bar > .cv-nav:first-of-type { grid-area:prev; }
html[style*="font-size: 2"] .cv-bar > .cv-nav:last-of-type,
html[data-large-text="true"] .cv-bar > .cv-nav:last-of-type { grid-area:next; }
html[style*="font-size: 2"] .cv-bar > .cv-today,
html[data-large-text="true"] .cv-bar > .cv-today { grid-area:today; }

/* ================= CR1.7 shared component contract (see docs/cr17/component-contract.md) =================
   Every rule here reads tokens; screens compose these instead of inventing local sizes. Heights are content-driven (minimums only). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }

/* Original preview stays over the current journey, with a bounded page canvas. */
.source-preview { max-height:calc(100dvh - var(--env-h,0px) - 20px); width:min(960px,100%); }
.source-preview .x3-sheet-body { display:flex; flex-direction:column; gap:12px; }
.source-preview .x3-sheet-head { align-items:flex-start; position:sticky; top:0; z-index:2; background:var(--c-paper,#fbf9f6); }
.source-preview .x3-sheet-head h2 { overflow-wrap:anywhere; font-size:1.3rem; line-height:1.25; }
.source-preview-stage { min-height:180px; max-height:60dvh; overflow:auto; background:#fff; border-radius:12px; padding:12px; }
.source-preview-stage canvas { display:block; max-width:none; }
.source-preview-image { display:block; max-width:100%; height:auto; margin:auto; }
.source-preview-text { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; font:inherit; line-height:1.55; color:var(--c-ink); }
.source-preview-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.source-preview-controls > button { min-height:44px; }
.source-preview-controls [data-testid="preview-page-count"] { flex:1; text-align:center; }
.source-preview-controls [data-testid="viewer-share"] { margin-left:auto; }

/* Page title block: Back (optional) above the title; actions sit at the title row's trailing edge, inside the page gutter. */
.x3-titleblock { display:flex; flex-direction:column; gap:var(--space-2); }
.x3-titlerow { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); min-width:0; }
.x3-titlerow > .x3-h1 { min-width:0; overflow-wrap:anywhere; }

/* Banner family. One persistent environment strip (injected by the staging build, not drawn here) plus at most one contextual banner per screen.
   Variants carry meaning through colour AND the text; critical banners use role="alert". */
.x3-banner { background:var(--c-primary); color:var(--c-card); }
.x3-banner.info { background:#3b5d51; }
.x3-banner.warn { background:#f4e6c8; color:#4a3a10; }
.x3-banner.critical { background:#f6dedb; color:#8a2b24; }

/* Row geometry shared by Today plans, attention rows, Profile rows and Review queue rows. */
.x3-attn-row, .x3-plan, .x3-prow, .x3-qrow { box-sizing:border-box; padding-inline:var(--space-4); }

/* Action dock: the one decision area pinned above the tab bar. It reports its own height (--dock-h) and the page keeps that much room
   in flow after its last block, so the final line of content can always be scrolled clear of it. Never fixed-height; content decides. */
.x3-dock { display:flex; flex-direction:column; gap:var(--space-2); margin-inline:calc(-1 * var(--gutter)); padding:var(--space-2) var(--gutter) var(--space-3); background:var(--c-paper); border-top:1px solid var(--c-line-4); }
/* Pinned only when pinning leaves room to read (adaptiveDock sets data-pin from the measured dock, header and tab bar). On short screens and at large text it stays in the flow after the content,
   so nothing is ever covered. */
.x3-dock[data-pin="sticky"], .x3-batchbar[data-pin="sticky"] { position:sticky; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); z-index:5; }
.x3-dock-secondary { display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:var(--space-2); align-items:stretch; }
.x3-dock-secondary .x3-btn { min-height:var(--touch); padding:0 var(--space-2); font-size:.875rem; line-height:1.15; }
.x3-dock-secondary > * { min-width:0; justify-content:center; text-align:center; }

.x3-cardtitle { font-size:1.25rem; line-height:1.25; margin:6px 0 2px; }
.x3-srcline { color:var(--c-ink-3); }
.x3-kv { padding:9px 12px; }

/* CR1.7 P03: the Calendar introduces itself in one short line so the schedule leads. Same elements and ids, regrouped (Chat keeps its own heading). */
html:not(.x3-chat-view) #calendar-content-root > div:has(> #calendar-main-heading) { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px var(--space-3); }
html:not(.x3-chat-view) #calendar-main-heading { font-size:1.375rem; line-height:1.25; margin:0; }
html:not(.x3-chat-view) #calendar-context-subtitle { order:2; margin:0; }
html:not(.x3-chat-view) #calendar-status-notice { order:3; flex-basis:100%; margin:0; font-size:.8125rem; }
/* The standing description repeats the heading; it stays for assistive technology and is shown when it carries a real message (not-found, errors). */
#calendar-status-notice[data-default] { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
/* The review entry on the Calendar is a slim row (the Today card keeps its explanatory line). */
#calendar-content-root .x3-attn-solo { min-height:48px; padding-block:var(--space-2); }
#calendar-content-root .x3-attn-solo .x3-attn-text small { display:none; }

/* CR1.7 P06: sheets keep their final action reachable; optional detail opens on demand; module selects share one size. */
.x3-sheet-foot { position:sticky; bottom:0; z-index:2; margin-inline:calc(-1 * var(--gutter)); padding:var(--space-2) var(--gutter) var(--space-1); background:var(--c-paper); border-top:1px solid var(--c-line-4); }
/* CRE03 (LX07): the fixed action owns the bottom edge. The sheet body's own bottom padding left a strip under it where scrolled content showed; the action now carries that padding itself, so nothing shows below it. */
.x3-sheet-body:has(> .x3-sheet-foot) { padding-bottom:0; }
/* F07: the generic rule `.x3-sheet-body > * { max-width:100% }` clamped the action's negative-margin width, leaving a strip (about one gutter) at the right edge where the content beneath showed. The action spans the full sheet width. */
.x3-sheet-body > .x3-sheet-foot { max-width:none; box-sizing:border-box; }
.x3-sheet-foot { padding-bottom:calc(var(--space-2) + env(safe-area-inset-bottom)); }
/* Keep the invitation's single scroller within the keyboard's visual viewport.
   While editing, the action follows the form instead of covering the input. */
dialog.x3-sheet.x3-keyboard-sheet { position:fixed; top:auto; bottom:var(--sheet-bottom,0px); margin:0 auto; }
.x3-keyboard-sheet .x3-sheet-body { box-sizing:border-box; overscroll-behavior-y:contain; overflow-anchor:none; scroll-padding:16px; }
.x3-keyboard-sheet .x3-sheet-body > * { flex-shrink:0; }
dialog.x3-sheet.x3-form-sheet { top:var(--sheet-top,8px); bottom:auto; left:var(--sheet-left,0px); right:auto; width:var(--sheet-width,100%); margin:0; box-sizing:border-box; }
.x3-form-sheet .x3-sheet-body { height:var(--sheet-max,92dvh); }
.x3-form-sheet:not(.tf-sheet) .x3-sheet-head { position:sticky; top:calc(-1 * var(--gutter)); z-index:2; background:var(--c-paper); margin:calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) 0; padding:var(--gutter); max-width:none; box-sizing:border-box; }
.x3-keyboard-sheet[data-editing] .x3-sheet-foot { position:static; }
.x3-keyboard-sheet input, .x3-keyboard-sheet textarea { font-size:max(16px,1rem); }
.x3-invite-open { display:flex; flex-direction:column; gap:8px; width:100%; padding:0; border:0; background:transparent; text-align:left; color:inherit; font:inherit; cursor:pointer; min-height:44px; }
.x3-invite-open > .x3-spread { width:100%; }
/* a disclosure label wraps at large text instead of running off the screen */
.x3-disclose > summary.x3-chip { white-space:normal; height:auto; min-height:44px; padding-block:10px; max-width:100%; }
.x3-disclose > summary { list-style:none; cursor:pointer; width:fit-content; } .x3-disclose > summary::-webkit-details-marker { display:none; }
.x3-disclose > summary::after { content:'▾'; margin-left:var(--space-2); font-size:.75rem; } .x3-disclose[open] > summary::after { content:'▴'; }
.x3-disclose[open] > summary { margin-bottom:var(--space-2); }
select[data-module] { min-width:9rem; min-height:var(--touch); padding:0 var(--space-3); border:1px solid var(--c-line-2); border-radius:var(--radius-ctl); background:var(--c-card); font:inherit; color:var(--c-ink); }

/* CR1.7 P07: Chat's page title reads like Library, Search and Profile (same face, size and colour); the notification switch keeps its look with a 44px target. */
html.x3-chat-view #calendar-main-heading { font-family:Newsreader,serif; font-size:1.875rem; line-height:1.15; font-weight:500; color:var(--c-primary-deep); margin:0; }
#tier1-toggle { box-sizing:content-box; padding:8px 0; background-clip:content-box; }
#tier1-toggle > span { top:calc(.25rem + 8px) !important; }

/* CR1.7: small targets on onboarding pages: the header logo is a button (home) and the search-clear icon was 16px wide. */
img[data-cohort-hook="header-logo"] { padding:5px 0; box-sizing:content-box; min-width:var(--touch); object-fit:contain; cursor:pointer; }
button[aria-label="Clear school search"] { min-width:var(--touch); justify-content:center; right:0 !important; }

/* Motion vocabulary (P08): small, short, interruptible, and never a wait. Press and selection feedback is immediate (transform/opacity only, 120ms);
   sheets and revealed detail ease in over 180ms while already tappable; a new Review item fades in. Reduced motion removes all of it. */
.x3-btn, .x3-chip, .x3-seg button, .x3-ctx a, .x3-tab, .cv-day, .cv-nav, .cv-mode, .cv-today { transition:transform var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.x3-btn:active, .x3-chip:active, .cv-day:active, .cv-nav:active, .cv-mode:active, .cv-today:active { transform:scale(.97); }
button.x3-card:active, a.x3-card:active, .x3-qmain:active { transform:scale(.99); }
@keyframes x3-sheet-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes x3-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes x3-rise-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
dialog.x3-sheet[open] .x3-sheet-body { animation:x3-sheet-in var(--dur-2) var(--ease); }
dialog.x3-sheet[open]::backdrop { animation:x3-fade-in var(--dur-2) var(--ease); }
.x3-disclose[open] > :not(summary) { animation:x3-rise-in var(--dur-2) var(--ease); }
.x3-enter { animation:x3-rise-in var(--dur-2) var(--ease); }
@media (prefers-reduced-motion:reduce) { .x3-card, .x3-chip, .x3-btn, .x3-tab, .x3-seg button, .x3-ctx a, .x3-dock, .cv-day, .cv-nav, .cv-mode, .cv-today { transition:none !important; animation:none !important; transform:none !important; } dialog.x3-sheet[open] .x3-sheet-body, dialog.x3-sheet[open]::backdrop, .x3-disclose[open] > :not(summary), .x3-enter { animation:none !important; } }
/* ================= end CR1.7 contract ================= */

.x3-mini{display:grid;grid-template-columns:max-content 1fr;gap:4px 10px;margin:8px 0 0}.x3-mini dt{color:var(--muted);font-size:.78rem}.x3-mini dd{margin:0;font-size:.78rem;color:var(--ink)}

/* CRE009: keep calendar period labels premium at phone widths. The full date remains in aria-label/title. */
.cv-title { white-space:nowrap; font-size:clamp(1rem, 4.6vw, 1.375rem); letter-spacing:-.01em; }
@media (max-width:390px) { .cv-bar { grid-template-columns:var(--touch) minmax(0,1fr) var(--touch) minmax(4.5rem,auto); } .cv-title { font-size:clamp(.9375rem, 4.2vw, 1.25rem); } }
@media (max-width:340px) { .cv-title { font-size:.9375rem; } }

/* CRE009 tranche 2: premium brief/review/chat hierarchy. */
.cre-today-brief { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr)); gap:10px; } /* two-up only while a tile is at least 9rem wide, so labels never split at large text */
.cre-brief-card { position:relative; min-height:112px; padding:14px; border:1px solid var(--c-line-3); border-radius:18px; background:linear-gradient(180deg,#ffffff,#f4f0e8); color:var(--c-ink-6); text-decoration:none; box-shadow:0 10px 24px rgba(9,51,40,.06); display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.cre-brief-card.needs { border-color:#d6b56d; background:linear-gradient(180deg,#fbf9f6,#f4ead1); }
.cre-brief-card.live { border-color:#b6d4c2; background:linear-gradient(180deg,#ffffff,#eaf4ee); }
.cre-brief-card.next { border-color:#cdd8d0; }
.cre-brief-card strong { font-size:1.06rem; letter-spacing:-.01em; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cre-brief-card small { color:var(--c-ink-4); line-height:1.25; padding-right:22px; }
.cre-brief-label { font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--c-primary); }
.cre-brief-card svg { position:absolute; right:12px; bottom:12px; color:var(--c-primary); }
.cre-review-card { box-shadow:0 14px 34px rgba(9,51,40,.08); }
.cre-review-intro { margin:-2px 0 6px; padding:12px; border:1px solid var(--c-line-4); border-radius:16px; background:linear-gradient(180deg,#fbf9f6,#f4f0e8); display:grid; gap:3px; }
.cre-review-intro p { margin:0; }
.cre-review-source { color:var(--c-ink-5); font-weight:600; }
.cre-review-confidence { color:var(--c-ink-3); font-size:.86rem; }
@media (max-width:520px) { .cre-brief-card.next { grid-column:1 / -1; } .cre-brief-card { min-height:96px; } }

/* CRE009: premium reader, notices and search card hierarchy. */
.cre-notice-card { box-shadow:0 8px 22px rgba(9,51,40,.06); }
.cre-notice-card .x3-title, .cre-search-result .x3-title { letter-spacing:-.01em; }
.cre-search-result { border-color:var(--c-line); box-shadow:0 6px 18px rgba(9,51,40,.05); }
.cre-search-section-head { padding-top:var(--space-2); border-top:1px solid var(--c-line-4); }
.x3-original, .cre-original-reader { align-items:center; gap:var(--space-3); }
.x3-original { flex-direction:row; }
.x3-original-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--c-wash); color:var(--c-primary); flex:none; }
.x3-original-main { min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:var(--space-1); }
.cre-reader-hero { padding:var(--space-4); }
@media (max-width:340px) { .x3-card { padding:12px; } .x3-title { font-size:1rem; } .x3-btn { padding-inline:14px; } }

/* CRE009 tranche 3: make homework packs and lost/found matches feel like product value, not database state. */
.cre-pack-card { overflow:hidden; }
.cre-pack-hero { display:flex; gap:12px; align-items:flex-start; padding:12px; margin:-2px 0 8px; border:1px solid var(--c-line-4); border-radius:16px; background:linear-gradient(180deg,#ffffff,#f4f0e8); }
.cre-pack-mark { width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; flex:none; background:var(--c-primary); color:#fff; font-weight:800; }
.cre-pack-copy { min-width:0; }
.cre-pack-copy p { margin:0; }
.cre-media-pack { border-color:#d8caa4; box-shadow:0 10px 24px rgba(96,70,25,.07); }
.cre-media-pack.is-incomplete { background:linear-gradient(180deg,#fbf9f6,#ffffff); }
.cre-pack-row-note { margin-top:-2px !important; color:var(--c-ink-4); }
.cre-match-card { border-color:#cfb66e; background:linear-gradient(180deg,#fbf9f6,#ffffff); box-shadow:0 8px 22px rgba(96,70,25,.08); }

/* CRE009 Lily implementation pass — parent-first cards and small-phone guardrails. */
.cre-plan-card{position:relative;overflow:hidden;border:1px solid rgba(26,73,58,.12);box-shadow:0 10px 28px rgba(17,37,30,.06);background:linear-gradient(180deg,#ffffff,#fbf9f6)}
.cre-plan-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#1f513f;opacity:.18}
.cre-plan-card.is-shared::before{background:#a56a38;opacity:.32}
.cre-plan-card .x3-plan-time{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:82px}
.cre-time-chip{display:inline-flex;align-items:center;border-radius:999px;background:#f1ede6;color:#234a3e;font-weight:750;font-size:.82rem;line-height:1;padding:8px 10px;white-space:nowrap}
.cre-privacy-chip,.cre-prep-pill,.cre-location-pill{display:inline-flex;align-items:center;border-radius:999px;font-size:.74rem;font-weight:750;line-height:1;padding:6px 8px;white-space:nowrap}
.cre-privacy-chip.private{background:#dfece4;color:#194836}.cre-privacy-chip.shared{background:#f2e4d6;color:#70420f}
.cre-plan-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.cre-prep-pill{background:#fff3d5;color:#744a00}.cre-location-pill{background:#eef2ef;color:#486057}
.cre-today-brief .cre-brief-card.partial{border-color:#d7b464;background:linear-gradient(180deg,#fff9ea,#ffffff)}
.cre-today-brief .cre-brief-card.partial strong{color:#775313}
.cre-calendar-card{border-radius:24px;border:1px solid rgba(26,73,58,.12);box-shadow:0 10px 28px rgba(20,37,31,.06);background:linear-gradient(180deg,#ffffff,#fbf9f6);padding:16px 14px}
.cre-calendar-card .cv-row-body{gap:7px}.cre-row-context{display:flex;flex-wrap:wrap;gap:0;align-items:center}.cre-row-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.cv-badge-family{background:#ecefe8;color:#2f5747}.cv-badge-prep{background:#fff3d5;color:#744a00}
@media(max-width:390px){.cre-plan-card .x3-plan-time{min-width:0;flex-direction:row;flex-wrap:wrap}.cre-time-chip{font-size:.76rem;padding:7px 8px}.cre-calendar-card{border-radius:20px;padding:14px 12px}.cre-row-chips{gap:5px}.cv-title{font-size:clamp(1.15rem,7vw,1.8rem);max-width:42vw;line-height:1.05;white-space:nowrap}}
@media(prefers-reduced-motion:no-preference){.cre-plan-card,.cre-calendar-card,.cre-review-card,.cre-pack-card,.cre-match-card{transition:transform .16s ease,box-shadow .16s ease}.cre-plan-card:active,.cre-calendar-card:active{transform:scale(.992)}}

/* CRE009-D06 calendar row context: phrase-level wrapping. */
.cre-row-context .cv-seg { display:inline-block; max-width:100%; overflow-wrap:anywhere; }
.cre-row-context .cv-seg:not(:last-child)::after { content:'·'; margin:0 .45em; }

/* CRE009-D08 notices header: the primary button keeps its label on one line; the privacy note takes the remaining width and wraps. */
.x3-spread > .x3-btn[data-testid="post-notice"] { flex:none; white-space:nowrap; }
.x3-spread > .x3-note { min-width:0; flex:1 1 auto; }

/* CRE009 second-developer D10: a disclosure summary is a touch target (44 px) wherever the shared note pattern is used (AI activity receipts). */
details.x3-note > summary { display:flex; align-items:center; min-height:44px; cursor:pointer; }

/* CRE009 second-developer D11: the conversation context card is secondary. With the on-screen keyboard open (short viewport) it gives way so the message box and Send stay in view. */
@media (max-height:560px) { .m7-chat-intro { display:none; } }

/* CRE009-P01 original viewer: the real document inside the sheet. */
.cre-viewer-stage { display:grid; gap:var(--space-2); min-height:96px; }
.cre-viewer-img { width:100%; height:auto; border-radius:12px; background:#f1ede6; }
.cre-viewer-pdf { width:100%; height:min(62vh, 560px); min-height:320px; border:1px solid var(--c-line-3); border-radius:12px; background:#f1ede6; }
.cre-viewer-stage[data-state="loading"] { color:var(--c-ink-5); }

/* CRE009-P01: document details are a label/value grid that can shrink; at large text the value moves under its label instead of widening the page (it pushed the layout viewport to 477 px and hid the sheet's Close button). */
.x3-dl { display:grid; grid-template-columns:minmax(0,max-content) minmax(0,1fr); gap:6px 12px; font-size:.875rem; margin:0; }
.x3-dl dt { color:var(--c-ink-3); } .x3-dl dd { margin:0; min-width:0; overflow-wrap:anywhere; }
html[style*="font-size: 2"] .x3-dl, html[data-large-text="true"] .x3-dl { grid-template-columns:minmax(0,1fr); gap:0 12px; } html[style*="font-size: 2"] .x3-dl dd, html[data-large-text="true"] .x3-dl dd { margin-bottom:8px; }

/* CRE009-P02 pack page order: have = a tappable page, missing = a dashed placeholder. */
.cre-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cre-pack-order { list-style:none; margin:4px 0 2px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,7rem),1fr)); grid-auto-rows:1fr; gap:8px; }
.cre-pack-page { min-width:0; }
.cre-pack-page > button, .cre-pack-page > span { display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; width:100%; height:100%; min-height:56px; padding:6px 10px; border-radius:12px; font:inherit; overflow-wrap:anywhere; }
.cre-pack-page.have > button { border:1px solid var(--c-line-2); background:var(--c-card); color:var(--c-ink-6); cursor:pointer; }
.cre-pack-page.missing > span { border:1.5px dashed #b88a2f; background:#fff9ea; color:#6d4d0c; }
.cre-pack-page b { font-size:1.05rem; } .cre-pack-page small { font-size:.72rem; }
.x3-thumb img[data-state="loading"], .x3-media-mark img[data-state="loading"] { visibility:hidden; }

/* CRE009-P02: the original card stacks its action under the text on phones so the text keeps a readable column. */
@media (max-width:480px) { .x3-original { grid-template-columns:40px minmax(0,1fr); } .x3-original .x3-btn { grid-column:1 / -1; width:100%; } }

/* CRE009-P03 notice photo: a real image, bounded height, never blank. */
.cre-notice-photo-slot:empty { display:none; }
.cre-notice-photo-link { display:block; border-radius:14px; overflow:hidden; background:var(--c-wash-2); }
.cre-notice-photo { display:block; width:100%; max-height:280px; object-fit:cover; background:var(--c-wash-2); }

/* CR4 A4 notice list thumbnail: a fixed square slot from the first paint, so a row never changes size when the photo arrives, fails, or is a document. */
.cre-notice-card.has-thumb { display:grid !important; grid-template-columns:minmax(0,1fr) 64px; column-gap:var(--space-3); align-items:start; }
.cre-notice-main { min-width:0; overflow-wrap:anywhere; }
.cre-notice-thumb { width:64px; height:64px; border-radius:14px; overflow:hidden; background:linear-gradient(180deg,#f4f0e8,var(--c-wash-2)); border:1px solid var(--c-line-4); color:var(--c-primary); display:grid; place-items:center; }
.cre-notice-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cre-notice-thumb img[data-state="loading"] { visibility:hidden; }
@media (max-width:340px) { .cre-notice-card.has-thumb { grid-template-columns:minmax(0,1fr) 52px; } .cre-notice-thumb { width:52px; height:52px; } }

/* CRE009-P05 guardian card: module rows read as a list with a quiet divider; the words are the same as before. */
.cre-grants { display:flex; flex-direction:column; border-top:1px solid var(--c-line-4); margin-top:2px; }
.cre-grant { margin:0; padding:8px 0; border-bottom:1px solid var(--c-line-4); }

/* CRE009-P06: the Chat page already says "Chat" in its title. The list heading stays for assistive technology only; the lede carries the explanation. */
.m7-listhead h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.source-preview-zoom { display:flex; gap:6px; align-items:center; }
.source-preview-zoom[hidden] { display:none; }
.source-preview-zoom button { min-height:44px; min-width:44px; }

/* CR3 Inbox, request sheet and status panels (P03). Reuses the existing tokens; no new colour or font. */
.cr3-inbox { display:flex; flex-direction:column; gap:14px; }
.cr3-row { display:flex; flex-direction:column; gap:8px; }
.cr3-row .x3-row { gap:8px; }
/* L01: lift facts. A scoped definition list: stacked by default, label and value side by side when the sheet is wide enough for the text size in use (rem, so large text stacks). */
.cr3-facts { margin:0; display:flex; flex-direction:column; container-type:inline-size; background:var(--c-card); border:1px solid var(--c-line-3); border-radius:12px; }
.cr3-facts .cr3-fact { display:grid; grid-template-columns:minmax(0,1fr); gap:2px; padding:10px 14px; }
.cr3-facts .cr3-fact + .cr3-fact { border-top:1px solid var(--c-line-4); }
.cr3-facts dt { margin:0; color:var(--c-ink-4); font-size:.8125rem; }
.cr3-facts dd { margin:0; font-weight:500; overflow-wrap:anywhere; }
@container (min-width:20rem) { .cr3-facts .cr3-fact { grid-template-columns:5.5rem minmax(0,1fr); gap:12px; align-items:baseline; } }
/* L06: one Close control. 44 px target; no keyboard ring on a sheet opened by touch. */
.x3-sheet-head .x3-btn { min-height:44px; min-width:44px; }
.x3-sheet[data-pointer-open] .x3-sheet-head .x3-btn:focus-visible { outline:none; }
.cr3-menu { position:relative; }
.cr3-menu-list { position:fixed; left:12px; top:12px; right:auto; z-index:55; min-width:min(12rem,calc(100vw - 24px)); width:max-content; max-width:calc(100vw - 24px); overflow:auto; box-sizing:border-box; display:flex; flex-direction:column; padding:6px; background:var(--c-card); border:1px solid var(--c-line-3); border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.12); }
.cr3-menu-list[hidden] { display:none; }
.cr3-menu-list button { min-height:44px; text-align:left; border:0; background:transparent; font:inherit; color:inherit; padding:8px 12px; border-radius:8px; cursor:pointer; white-space:normal; overflow-wrap:anywhere; }
.cr3-menu-list button:hover, .cr3-menu-list button:focus-visible { background:var(--c-wash); }
.cr3-menu-list button[disabled] { opacity:.6; cursor:default; }

/* Review belongs to Inbox. Facts lead; evidence and saved decisions disclose
   on request. Keep the primary decision separate from the two parking actions. */
.cr4-review .review-heading { gap:8px; }
.cr4-review .review-heading .x3-h1 { margin:0; }
.cr4-review .review-source-context { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; padding-block:4px; }
.cr4-review .review-source-context > span { min-width:0; flex:1 1 12rem; overflow-wrap:anywhere; font-weight:500; font-size:.875rem; color:var(--c-ink-4); }
.cr4-review .review-counts { padding-top:4px; flex-wrap:wrap; gap:4px 12px; }
.cr4-review .review-card { background:var(--c-card); border:1px solid var(--c-line-3); box-shadow:none; display:flex; flex-direction:column; gap:12px; }
.cr4-review .review-card .x3-cardtitle { margin:0; font-size:1.5rem; line-height:1.2; overflow-wrap:anywhere; }
.cr4-review .review-card > p { margin:0; }
.cr4-review .review-card .x3-kvs { margin:0; }
.cr4-review .review-warning { color:#72520d; }
.cr4-review .review-date-confirm { background:#faf3df; border-radius:10px; padding:12px; color:#513e13; }
.cr4-review .review-inline-actions { display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px; }
.cr4-review .review-inline-actions > * { min-height:44px; display:inline-flex; align-items:center; }
.cr4-review .review-evidence > summary,.cr4-review .review-saved > summary { min-height:44px; display:list-item; align-content:center; cursor:pointer; color:var(--c-ink-4); font-size:.875rem; }
.cr4-review .review-evidence .x3-evidence { margin-top:4px; }
.cr4-review .review-evidence .x3-cite { overflow-wrap:anywhere; }
.cr4-review .review-saved .x3-seg { flex-wrap:wrap; }
.cr4-review .review-saved .x3-seg > button { flex:1 1 6rem; }
.cr4-review .review-receipt { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; padding:10px 12px; background:#e5f0e8; border-radius:10px; color:#234a3e; font-size:.9375rem; }
.cr4-review .review-dock { gap:8px; position:static; width:100%; max-width:360px; margin:0 auto; padding:0; background:transparent; border:0; }
.cr4-review button,.cr4-review summary,.cr4-review a { scroll-margin-block:calc(var(--hdr-h) + 12px) calc(var(--nav-h) + 12px); }
.cr4-review .review-family-choice { font-size:.875rem; }
.cr4-review .review-dock .x3-dock-secondary .x3-btn { min-height:44px; }
.cr3-status { border:1px solid var(--c-line-3); border-radius:14px; padding:12px 14px; background:var(--c-wash); display:flex; flex-direction:column; gap:4px; }
.cr3-status.ok { background:#eaf3ee; border-color:#c7ddd0; }
.cr3-status.warn { background:#fbf1ea; border-color:#ecd2c3; }
.cr3-changes { margin:4px 0; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.cr3-offers { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cr3-offers li { display:flex; justify-content:space-between; gap:8px; align-items:center; flex-wrap:wrap; }

/* CR3 optional guidance (P04): one slim cue, explanation, preview, receipt and recovery. Targets are at least 44 px; motion only when the adult allows it. */
.cr3-cue { display:flex; flex-direction:column; gap:8px; margin:0 0 12px; padding:12px 14px; border:1px solid var(--c-line-3); border-radius:14px; background:var(--c-wash); }
.cr3-cue-text { margin:0; font-size:.9375rem; color:var(--c-ink); line-height:1.4; }
.cr3-cue .x3-btn, .cr3-info, .cr3-receipt .x3-btn, .cr3-recovery .x3-btn { min-height:44px; min-width:44px; }
.cr3-info:focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }
.cr3-preview { border:1px solid var(--c-line-3); border-radius:14px; padding:12px 14px; background:var(--c-card); display:flex; flex-direction:column; gap:6px; }
.cr3-receipt { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:14px; background:#eaf3ee; border:1px solid #c7ddd0; color:var(--c-primary-deep); }
.cr3-recovery { display:flex; flex-direction:column; gap:6px; padding:12px 14px; border-radius:14px; border:1px solid #ecd2c3; background:#fbf1ea; }
.cr3-recovery.danger { background:#f8e6e3; border-color:#e8c1bc; }
@media (prefers-reduced-motion: no-preference) {
  .cr3-motion { animation:cr3-in .18s ease-out both; }
  @keyframes cr3-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
}
.cr3-switch-row { width:100%; text-align:left; border:0; background:transparent; font:inherit; color:inherit; min-height:56px; cursor:pointer; }
.cr3-switch-row[disabled] { opacity:.6; cursor:default; }
.cr3-switch-row .x3-switch[data-on="true"] { background:var(--c-primary); }
.cr3-switch-row .x3-switch[data-on="true"] .x3-switch-knob { transform:translateX(20px); }
.cr3-switch-row:focus-visible { outline:2px solid var(--c-primary); outline-offset:-2px; border-radius:12px; }

/* CR3: a status pill wraps instead of running off the screen at large text (P01: do not clip a status, keep the two axes explicit). */
.cr3-pill { white-space:normal; max-width:100%; overflow-wrap:anywhere; text-align:left; }
.cr3-inbox .x3-spread, .cr3-concern .x3-spread, .cr3-trip .x3-spread { flex-wrap:wrap; gap:8px; }
/* The Inbox views wrap onto a second line at large text instead of running past the screen edge. */

/*17 October: scrollable finding cards; override the inherited toolbar gutter inside each card. */
.cr4-review .review-card-options > summary { min-height:44px; padding-block:10px; color:var(--c-ink-4); font-size:.875rem; cursor:pointer; }
.cr4-review .review-card-options > .review-inline-actions { margin-bottom:8px; }
.cr4-review .review-dock > .x3-btn { justify-content:center; text-align:center; width:100%; }
.cr4-review .review-dock .x3-dock-secondary { width:100%; grid-template-columns:repeat(auto-fit,minmax(min(100%,7rem),1fr)); }
.cr4-review .review-card-result { min-height:98px; padding:12px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; text-align:center; background:#e5f0e8; border-radius:12px; color:#234a3e; }
.cr4-review .review-card-result > p { margin:0; }
.cr4-review .review-card-result button { min-height:44px; }
.cr4-review .review-heading .x3-h1 { font-size:var(--p-title-size,1.875rem); line-height:var(--p-title-leading,2.25rem); overflow-wrap:anywhere; }
.cr4-review .review-completed .review-card-result { min-height:0; flex-direction:row; flex-wrap:wrap; justify-content:space-between; text-align:left; padding:12px 16px; gap:8px 16px; }
.cr4-review .review-completed-copy { flex:1 1 12rem; min-width:0; overflow-wrap:anywhere; }
.cr4-review .review-completed-copy > p { margin:0; }
.cr4-review .review-completed-copy .x3-cardtitle { font-size:1rem; }
.cr4-review .review-completed .x3-link { flex:0 0 auto; }
.cr4-review .review-time-conflict { padding:10px 12px; border-radius:10px; background:#fff3d8; color:#71551c; }
.cr4-review .review-alias-evidence > summary { min-height:44px; padding-block:10px; cursor:pointer; }
.cr4-review .review-alias-evidence > .x3-stack { padding-block:8px; }