/* Shared-v189 row-interactions.css; complete semantic table owner. */
/* One restrained hover surface for menus, people and data rows. */
:root{--row-hover-bg:#F3F1F8;--row-hover-radius:12px;--row-hover-inset:12px;--row-hover-duration:180ms;--row-hover-ease:cubic-bezier(.22,1,.36,1)}
:root[data-theme=dark]{--row-hover-bg:#34303F}
:is(.xdof-app,.chart-system){--row-fill:var(--row-hover-bg);--chart-row-hover:var(--row-hover-bg)}
.xdof-app :is(.pik-row,.selection-row,.product-create button,.product-options [role=option],.crt-item button){border-radius:var(--row-hover-radius);transition:background-color var(--row-hover-duration) var(--row-hover-ease),color var(--row-hover-duration) var(--row-hover-ease)}
.xdof-app .pik-card{display:grid;gap:2px;padding:8px}
.xdof-app .pik-row{padding-inline:var(--row-hover-inset)}
.xdof-app .crt-item button::before{display:none}
.xdof-app :is(.pik-row,.product-create button,.crt-item button):is(:hover,:focus-visible),.xdof-app .selection-row:is(:hover,:focus-within),.xdof-app .product-options [role=option][data-active=true]{background:var(--row-hover-bg)}
/* Cell fills join into one row, with room above/below and no negative gutters.
   The 4px paper borders leave a visible 12px inner corner (16px outer radius). */
body.chart-system .demo-table,.reference-table{border-collapse:separate;border-spacing:0}
body.chart-system .demo-table tbody :is(th,td),.xdof-app .data-table tbody td,.reference-table tbody :is(th,td){border-top:4px solid var(--row-paper,var(--bg));border-bottom:4px solid var(--row-paper,var(--bg));background-clip:padding-box;transition:background-color var(--row-hover-duration) var(--row-hover-ease)}
body.chart-system .demo-table{--row-paper:var(--plot-card)}
body.chart-system .demo-table tbody tr> :first-child,.xdof-app .data-table tbody tr> :first-child,.reference-table tbody tr> :first-child{border-radius:calc(var(--row-hover-radius) + 4px) 0 0 calc(var(--row-hover-radius) + 4px)}
body.chart-system .demo-table tbody tr> :last-child,.xdof-app .data-table tbody tr> :last-child,.reference-table tbody tr> :last-child{border-radius:0 calc(var(--row-hover-radius) + 4px) calc(var(--row-hover-radius) + 4px) 0}
body.chart-system .demo-table :is(th,td):first-child,.reference-table :is(th,td):first-child{padding-left:var(--row-hover-inset)}
body.chart-system .demo-table :is(th,td):last-child,.reference-table :is(th,td):last-child{padding-right:var(--row-hover-inset)}
body.chart-system .demo-table tbody tr:is(:hover,:focus-visible,:focus-within,[aria-expanded=true])> :is(th,td),.xdof-app .data-table tbody tr:is(:hover,:focus-within,[aria-selected=true])>td,.reference-table tbody tr:is(:hover,:focus-within)>:is(th,td){background-color:var(--row-hover-bg)}
/* The benchmark measures content edges once; the row highlight owns its gutter. */
body.chart-system #capabilities .capability-readings{padding:0;--row-inset:16px;--information-outset:var(--row-inset)}
/* Pagination clips the outgoing page, so its clip box must include the row
   paint AND its 2px focus outline + 3px offset. Negative margins preserve the
   table's measured content edges; never reset these gutters at a breakpoint. */
body.chart-system #capabilities .chart-page-viewport{--row-paint-gutter:calc(var(--row-inset) + 5px);padding-block:0;padding-inline:var(--row-paint-gutter);margin-block:0;margin-inline:calc(-1 * var(--row-paint-gutter))}
body.chart-system #capabilities .cap-card{position:relative;isolation:isolate;padding:12px 0;border:0;border-radius:0;background:transparent;overflow:visible}
body.chart-system #capabilities .cap-card:is(:hover,:focus-visible,[aria-expanded=true]){background:transparent}
body.chart-system #capabilities .cap-card::before{content:"";display:block;position:absolute;inset:4px calc(-1 * var(--row-inset));z-index:-1;border-radius:var(--row-hover-radius);background:var(--row-hover-bg);opacity:0;pointer-events:none;transition:opacity var(--row-hover-duration) var(--row-hover-ease)}
body.chart-system #capabilities .cap-card:is(:hover,:focus-visible,[aria-expanded=true])::before{opacity:1}
body.chart-system #capabilities .cap-card::after{content:"";display:block;position:absolute;inset:auto 0 0;height:1px;background:var(--line);border:0;border-radius:0;pointer-events:none}
body.chart-system #capabilities .capability-column-labels{padding:12px 0;align-self:start;border-bottom:1px solid var(--line)}
body.chart-system #capabilities .capability-column-labels::before{inset:0 calc(-1 * var(--row-inset));display:block}

@media(prefers-reduced-motion:reduce){:root{--row-hover-duration:0ms}}

.xdof-app .data-table tbody tr:last-child td{border-bottom:4px solid var(--bg)}
body.chart-system .demo-table tbody tr{border-radius:calc(var(--row-hover-radius) + 4px)}
body.chart-system .demo-table tbody tr:focus-visible:not(:where(:root[data-input-modality=pointer] *)){outline:1px solid var(--brand-accent);outline-offset:-4px}

/* Navigation shares one 12px corner, including its square header toggle.
   Other icon/avatar targets remain circular and actions remain capsules. */
.xdof-app :is(.nav-item,.product-nav-indicator,.menu-button){border-radius:var(--row-hover-radius)}
.xdof-app #open-navigation.menu-button{border-radius:var(--row-hover-radius);aspect-ratio:1}
.xdof-app :is(.icon-button:not(.menu-button),.avatar){border-radius:50%}
/* A capsule also becomes a circle on square icon controls. Percent radii turn
   wider labeled segments into ellipses, so never apply 50% to these roles. */
.xdof-app .segmented button,.xdof-app .product-segment-indicator{border-radius:999px}
.xdof-app :is(.button,.search-field,.product-select-trigger){border-radius:999px}
.xdof-app .field :is(input:not([type=checkbox]),textarea,.product-select-trigger){border-radius:var(--row-hover-radius)}
.xdof-app :is(.nav-item,.icon-button,.segmented button){transition-duration:var(--row-hover-duration);transition-timing-function:var(--row-hover-ease)}
.xdof-app .nav-item:not([aria-current]):is(:hover,:focus-visible),
.xdof-app .icon-button:not(:disabled):hover,
.xdof-app .segmented button:not([aria-pressed=true]):hover{background-color:var(--row-hover-bg)}

/* Concentric menu corners: inner row + inset + actual surface border. */
:root{--menu-inset:8px;--menu-surface-radius:calc(var(--row-hover-radius) + var(--menu-inset) + 1px)}
.product-options{padding:var(--menu-inset);border-radius:var(--menu-surface-radius)}
.xdof-app .pik-row{border-radius:var(--pik-row-r,var(--row-hover-radius))}
.xdof-app .crt-item button{border-radius:var(--crt-row-r,var(--row-hover-radius))}

/* Keep the focus ring inside the pagination clip's vertical paint clearance. */
body.chart-system #capabilities .cap-card:focus-visible:not(:where(:root[data-input-modality=pointer] *))::before{outline-offset:2px}
/* Paper borders space the joined hover fill; independent rules remain visible
   at every row boundary, including the last, in all interaction states. */
body.chart-system .demo-table tbody :is(th,td),.reference-table tbody :is(th,td),.xdof-app .data-table tbody td{position:relative}
body.chart-system .demo-table tbody :is(th,td)::after,.reference-table tbody :is(th,td)::after,.xdof-app .data-table tbody td::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--line);pointer-events:none}

/* Semantic tables share the data-row material; headings keep body size. */
.reference-table{--row-paper:var(--bg);--table-header-paper:var(--row-paper);width:100%;table-layout:fixed;background:var(--row-paper);font:400 13px/20px var(--font-mixed);color:var(--fg);text-align:left}
.reference-table :is(th,td){padding:14px 12px;font:inherit;text-align:left;vertical-align:middle;overflow-wrap:anywhere;background:var(--row-paper)}
.reference-table thead th{background:var(--table-header-paper,var(--row-paper));position:sticky;top:0;z-index:1;padding-top:12px;padding-bottom:12px;color:var(--table-heading-ink,color-mix(in srgb,var(--brand-ink) 78%,transparent));font:600 13px/20px var(--font-mixed);border:0;border-bottom:1px solid var(--line)}
.reference-table .reference-property-column{width:34%}
.reference-table tbody th{font-weight:400}
.reference-table tbody tr[aria-current=step]>:is(th,td){background:var(--brand-soft);color:var(--brand-ink)}
.reference-table button{border:0;padding:0;background:none;color:inherit;font:inherit;text-align:left;min-height:32px;cursor:pointer}
@media(max-width:700px){.reference-table .reference-property-column{width:32%}}

/* Preserve readable type on phones and the shared full content gutters. */
@media(max-width:700px){.reference-table{font-size:13px;line-height:20px}.reference-table :is(th,td){padding:12px}.reference-table thead th{font-size:13px;line-height:20px}}

/* The row surface owns its12px gutter; words align with the chapter heading.
   Keep this outside the content track, as in the Charts capability rows. */
.reference-table-content-aligned{width:calc(100% + 2 * var(--row-hover-inset));margin-inline:calc(-1 * var(--row-hover-inset))}

/* Metadata and action rows share one content track and baseline density. */
.reference-table .reference-cell-content{display:flex;align-items:center;min-height:32px;min-width:0}

.reference-table-scroll{min-width:0;max-height:var(--table-scroll-max-height,420px);margin-inline:calc(-1 * var(--row-hover-inset));overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.reference-table-scroll .reference-table{margin-inline:0;width:100%}

/* Header dividers are straight; rounded hover ends belong to body rows. */
.reference-table thead tr>:is(th,td){border-radius:0}