/* r10 comp: styles of this area; logical properties only, colours from the tokens */

/* ---------- the components page (#/components, #403 CM-01) ---------- */
#xv .cp-top{gap:.75rem}
#xv .cp-top .pb-r1{flex-wrap:wrap;row-gap:.5rem}
.cp-nav{display:flex;gap:.25rem .375rem;overflow-x:auto;scrollbar-width:none;padding-block:2px;margin-inline:-2px;padding-inline:2px}
.cp-nav::-webkit-scrollbar{display:none}
.cp-nav a{display:inline-flex;align-items:center;min-height:40px;padding-inline:.875rem;border-radius:999px;font-size:var(--fs-s);font-weight:500;color:var(--body);text-decoration:none;white-space:nowrap;background:var(--band)}
.cp-nav a:hover{color:var(--ink);background:var(--hover)}
.cp-nav a[aria-current]{background:var(--action-soft);color:var(--ink);font-weight:600}
.cp-scroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2rem;padding-block:1rem 3rem;font-size:var(--fs-m);color:var(--ink);scroll-padding-top:12px}
html.m .cp-scroll{padding-inline:16px;overflow:visible}
.cp-intro{margin:0;max-width:72ch;color:var(--body);line-height:1.6}
.cp-g{display:flex;flex-direction:column;gap:1rem;scroll-margin-top:12px}
.cp-gh{display:flex;align-items:center;gap:.875rem}
.cp-gh h2{margin:0;font-size:1.5rem;font-weight:700;line-height:1.2}
.cp-gh p{margin:.125rem 0 0;color:var(--body);font-size:var(--fs-s)}
html.m .cp-gi{display:grid}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:1rem;align-items:start}
.cp-c{background:var(--card-bg);box-shadow:var(--sh-card);border-radius:var(--r-l);padding:1.25rem;display:flex;flex-direction:column;gap:1rem;min-width:0}
.cp-c.wide{grid-column:1/-1}
.cp-ch h3{margin:0;font-size:1.125rem;font-weight:700}
.cp-ch p{margin:.25rem 0 0;font-size:var(--fs-s);color:var(--body);line-height:1.55}
.cp-d{display:flex;flex-wrap:wrap;gap:1rem 1.25rem;align-items:flex-end;min-width:0}
.cp-d.col{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.cp-n{margin:0;font-size:var(--fs-s);color:var(--body);line-height:1.55;border-top:1px solid var(--line-soft);padding-top:.75rem}
.cp-n code,.cp-sw code,.cp-type code,.cp-line code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8125rem;color:var(--body)}
.cp-s{margin:0;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;min-width:0}
.cp-sx{display:flex;align-items:center;min-height:44px;min-width:0;max-width:100%}
.cp-s figcaption{font-size:.8125rem;color:var(--body)}
.cp-line{margin:0;font-size:var(--fs-s);color:var(--body)}
.cp-p{margin:0;line-height:1.6}
.cp-demo{display:inline-block;margin-inline-start:.5rem;font-size:.8125rem;color:var(--body)}
.cp-focus{outline:2px solid var(--focus) !important;outline-offset:2px;border-color:transparent !important}
.cp-pw{padding-inline:1.5rem;min-width:180px}
.cp-vs{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start}
.cp-vs small,.cp-swl small{display:block;font-size:.8125rem;color:var(--body)}
.cp-swl{display:inline-flex;align-items:center;gap:.625rem;font-size:var(--fs-m)}
/* foundations */
.cp-sw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:.75rem}
.cp-sw li{display:flex;align-items:center;gap:.75rem;min-width:0}
.cp-sw li>span:last-child{display:flex;flex-direction:column;min-width:0}
.cp-sw b{font-size:var(--fs-s);font-weight:600}
.cp-chip{flex:none;width:40px;height:40px;border-radius:12px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent)}
.cp-type{display:flex;flex-direction:column;gap:.5rem}
.cp-type p{margin:0}
.cp-box{display:grid;place-items:center;width:132px;height:72px;border-radius:var(--r-l);font-size:.8125rem;color:var(--body);font-family:ui-monospace,Menlo,Consolas,monospace}
.cp-scrim{background:var(--scrim);box-shadow:inset 0 0 0 1px var(--line)}
.cp-scrim span{background:var(--sheet);color:var(--ink);padding:.25rem .5rem;border-radius:8px}
/* icons */
.cp-icons{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.5rem}
.cp-icons li{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:.5rem;padding:.75rem .25rem .5rem;border-radius:12px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line-soft)}
.cp-icons code{grid-column:1/-1;text-align:center;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8125rem;color:var(--body);overflow-wrap:anywhere}
.cp-i0{width:40px;height:40px;display:grid;place-items:center;color:var(--ink)}
.cp-i0 .i,.cp-i1 .i{width:22px;height:22px}
.cp-i1{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:var(--action-soft);color:var(--action)}
.cp-art{padding:0}
.cp-de{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;font-size:var(--fs-s);color:var(--ink)}
/* the same drawing the calendar's empty day and first run use (direction/empty-art.svg around the screen's icon) */
.cp-de.i-calendar{--ea-i:var(--i-calendar)}.cp-de.i-calendar-plus{--ea-i:var(--i-calendar-plus)}.cp-de.i-check{--ea-i:var(--i-check)}
.cp-de::before{content:"";display:block;width:112px;height:84px;background:color-mix(in srgb,var(--action) 60%,transparent);-webkit-mask:var(--ea-i) center/30px no-repeat,var(--i-empty-art) center/contain no-repeat;mask:var(--ea-i) center/30px no-repeat,var(--i-empty-art) center/contain no-repeat}
/* action */
.cp-tks{display:flex;flex-direction:column}
.cp-tks .tk:first-child{border-top:0}
.cp-tks .tk:has(input:disabled){opacity:.6;cursor:default}
.cp-fs{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;min-width:0}
.cp-fs legend{font-size:var(--fs-s);font-weight:500;color:var(--body);padding:0;margin-bottom:.5rem}
.cp-fs .seg{max-width:320px}
/* input */
.cp-fw{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:.25rem 1rem;width:100%}
.cp-fw .tp-f{margin:0}
.cp-mf{margin:0;max-width:320px;width:100%}
.cp-mf label{font-size:var(--fs-s);font-weight:500;color:var(--body)}
.cp-ps{flex:1 1 280px;max-width:360px;min-width:min(100%,240px)}
.cp-ps .psx{position:absolute;inset-inline-end:6px;top:50%;translate:0 -50%;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;color:var(--body)}
/* show */
.cp-who{display:inline-flex;align-items:center;gap:.5rem;max-width:240px}
.cp-who b{font-size:var(--fs-m);overflow-wrap:anywhere}
.cp-acs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:.625rem;width:100%}
.cp-ac{display:flex;align-items:center;gap:.875rem;min-height:76px}
.cp-acm{display:flex;flex-direction:column;gap:.125rem;min-width:0;flex:1}
.cp-k{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8125rem;color:var(--body);flex:none}
.cp-rows{display:flex;flex-direction:column;width:100%;border-radius:var(--r-l);overflow:hidden}
.cp-row{display:flex;align-items:center;gap:.75rem;width:100%;text-align:start;padding-inline:1rem;color:var(--ink);text-decoration:none;border-top:1px solid var(--line-soft);min-height:56px}
.cp-row:first-child{border-top:0}
.cp-row:hover{background:var(--hover)}
.cp-row .tm-n,.cp-row .gt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.35}
.cp-row .tm-n b,.cp-row .gt b{font-size:var(--fs-m);font-weight:600}
.cp-row .tm-n small,.cp-row .gt small{font-size:var(--fs-s);color:var(--body)}
.cp-row .gi{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:var(--action-soft);color:var(--action);flex:none}
.cp-row .go{color:var(--body);flex:none}
.cp-bar{width:100%}
.cp-h1{font-size:1.625rem;line-height:1.15;font-weight:700;color:var(--ink)}
.cp-tabp{padding:.75rem 1rem;border-radius:12px;background:var(--band);color:var(--ink)}
.cp-kpis{width:100%}
.cp-of{font-size:var(--fs-s);font-weight:500;color:var(--body)}
.cp-tw{width:100%;overflow-x:auto;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.cp-tb{font-size:var(--fs-m)}
.cp-tb th,.cp-tb td{padding:.625rem 1rem;text-align:start;border-bottom:1px solid var(--line-soft)}
.cp-tb thead th{font-size:var(--fs-s);color:var(--body);font-weight:600;background:var(--band)}
.cp-tb .cp-tot{background:var(--action-soft);font-weight:700}
.cp-tb .cp-tot th{font-weight:700}
.cp-tb td{font-variant-numeric:tabular-nums}
/* calendar */
.cp-cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:1rem;width:100%}
.cp-cal .cp-s{align-items:stretch}
.cp-col{height:132px;border-inline-start:0;border-radius:var(--r-card);background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line-soft)}
/* layers */
.cp-cf{flex-direction:row;flex-wrap:wrap}
.cp-cf>*{flex:1 1 160px}
.cp-dl{display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}
.cp-dl p{margin:0}
/* states */
.cp-sk{width:100%}
.cp-sk .tp-sk{border-top:1px solid var(--line-soft)}
.cp-sk .tp-sk:first-of-type{border-top:0}
.cp-c .tp-state{padding-block:1.5rem;width:100%}
.cp-c .mz-warn{width:100%}
/* help */
.cp-fv{width:100%}
.cp-fvh{margin:0;font-size:1rem;font-weight:700}
.cp-fv .fv-tx p{margin:.25rem 0 0;font-size:var(--fs-s);color:var(--body);line-height:1.55}
/* chat (#409); the messages area's own classes win when they exist */
.cp-wa{width:100%;display:flex;flex-direction:column;gap:.5rem;padding:1rem;border-radius:var(--r-l);background-color:var(--band);background-image:radial-gradient(color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1.5px);background-size:18px 18px}
.cp-day{margin:0;text-align:center}
.cp-day span{display:inline-block;padding:.25rem .75rem;border-radius:999px;background:var(--sheet);font-size:.8125rem;color:var(--body);box-shadow:0 1px 1px rgba(var(--sh),.08)}
.cp-b{max-width:min(78%,420px);padding:.5rem .75rem .375rem;border-radius:14px;background:var(--sheet);color:var(--ink);box-shadow:0 1px 1px rgba(var(--sh),.1);display:flex;flex-direction:column;gap:.125rem}
.cp-b p{margin:0;line-height:1.5}
.cp-b.in{align-self:flex-start;border-start-start-radius:4px}
.cp-b.out{align-self:flex-end;border-start-end-radius:4px;background:var(--s-done-f)}
.cp-b.bot{background:var(--s-conf-f)}
.cp-b.fail{background:var(--s-no-f)}
.cp-b.fail .cp-bt{color:var(--s-no-k)}
.cp-who2{display:inline-flex;align-items:center;gap:.25rem;font-size:.8125rem;font-weight:600;color:var(--s-conf-k)}
.cp-bt{align-self:flex-end;display:inline-flex;align-items:center;gap:.25rem;font-size:.8125rem;color:var(--body)}
.cp-tk{display:inline-flex;color:var(--body)}
.cp-tk.read{color:var(--s-conf-k)}
.cp-file{display:flex;align-items:center;gap:.5rem}
.cp-file span{display:flex;flex-direction:column}
.cp-file small{font-size:.8125rem;color:var(--body)}
/* docs and page types */
.cp-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.cp-links a,.cp-types a{text-decoration:none}
.cp-types{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:.625rem}
.cp-types li{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap}
.cp-types .cp-acm{flex:1 1 180px}
.cp-none{font-size:var(--fs-s);color:var(--body)}
html.m .cp-types .pb-ic{display:none}
@media (max-width:420px){.cp-icons{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}.cp-c{padding:1rem}.cp-cal{grid-template-columns:1fr 1fr}}

/* ---------- the report page type (#/reports/catalog, #/reports/r/<id>; spec/06 RPT-01, RPT-02, RPT-11) ---------- */
#xv .rp-bar2 .pb-r1{flex-wrap:wrap;row-gap:.5rem}
.rp-scroll2{gap:1.25rem}
.rp-cs{max-width:520px}
.rp-cg{display:flex;flex-direction:column;gap:.75rem}
.rp-cg h2{margin:0;font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.rp-cl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:.625rem}
.rp-cc{display:flex;align-items:flex-start;gap:.5rem;padding-inline:1.25rem .5rem}
.rp-ca{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem;color:inherit;text-decoration:none;min-height:44px;border-radius:12px}
.rp-ca:hover .ac-nm{text-decoration:underline;text-underline-offset:4px}
.rp-cm{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.25rem}
.rp-pv{font-size:var(--fs-s);color:var(--ink);font-weight:600}
.rp-star{width:44px;height:44px;flex:none}
.rp-star[aria-pressed="true"]{color:var(--s-owe-k)}
.rp-star[aria-pressed="true"] .i{background:currentColor}
#xv .rp-bar2 .rp-tools,#xv .rp-bar2 .rp-chips{flex-wrap:wrap;row-gap:.5rem;overflow:visible}
.rp-tools .tp-sel small{min-width:20px;height:20px;border-radius:999px;display:inline-grid;place-items:center;background:var(--action);color:var(--action-ink);font-size:.8125rem}
.rp-chips{flex-wrap:wrap;gap:.5rem}
.rp-chip{background:var(--action-soft);border-color:transparent;color:var(--ink);font-weight:600;min-height:40px}
.rp-intro{margin:0;max-width:80ch;color:var(--body);line-height:1.6}
.rp-kv2{font-size:1.5rem}
.rp-split{margin:0;font-size:var(--fs-m);color:var(--ink)}
.rp-g2{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:1rem;align-items:start}
.rp-sec{padding:1.25rem;border-radius:var(--r-l);display:flex;flex-direction:column;gap:.75rem;min-width:0}
.rp-sec h2{margin:0;font-size:1.125rem;font-weight:700}
.rp-empty{margin:0;color:var(--body)}
.rp-tops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rp-tops li{display:flex;align-items:center;gap:.75rem;min-height:52px;border-top:1px solid var(--line-soft)}
.rp-tops li:first-child{border-top:0}
.rp-tops li>:nth-child(2){flex:1;text-align:start}
.rp-trend{display:flex;align-items:flex-end;gap:.375rem;height:150px;padding-top:.5rem}
.rp-bar1{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.25rem;min-width:0}
.rp-bar1 i{display:block;width:100%;max-width:28px;border-radius:6px 6px 2px 2px;background:var(--s-no-e);min-height:2px}
.rp-bar1 b{font-size:.8125rem;font-weight:600}
.rp-bar1 small{font-size:.8125rem;color:var(--body)}
.rp-sk2{padding:.5rem 1rem;border-radius:var(--r-l)}
.rp-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.rp-rows .ac{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
html.m .rp-tools .rp-stamp{margin-inline-start:0}
.rp-bg{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}
/* the conversation sample sits in a card: the thread keeps its own height */
.cp-th{width:100%;max-height:none}
.cp-sc{max-height:none;overflow:visible;min-height:0 !important}
.cp-tn{display:block;font-size:1.125rem;font-weight:700}
.cp-chl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.cp-chl .ac{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.cp-tm{font-size:.8125rem;color:var(--body)}

/* r11 S #511: the switch's keyboard-focus state, drawn as the ring the app uses */
.tp-sw.cp-focus{outline:2px solid var(--focus);outline-offset:2px}