/* ROI 3 · Capacity v4 · every rule is scoped to #capacity or .cap-page */

/* Cards on the root page */
#capacity .cap-card { position: relative; isolation: isolate; display: flex; flex-direction: column; transition: border-color .15s; }
#capacity .cap-card:hover { border-color: var(--teal); }
#capacity .cap-tags { position: relative; z-index: 2; }
#capacity .cap-tags li { padding: 0; border: 0; background: none; }
#capacity .cap-tag { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .45rem .95rem; border: 1px solid var(--teal); border-radius: 2rem; background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; scroll-margin-top: 6rem; }
#capacity .cap-tag::after { content: ""; flex: none; width: .45rem; height: .45rem; border-top: 2px solid var(--teal); border-right: 2px solid var(--teal); transform: rotate(45deg); }
#capacity .cap-tag:hover { background: var(--bg); text-decoration: underline; }
#capacity .cap-tag:focus-visible, #capacity .cap-tag:target { outline: 3px solid var(--ink); outline-offset: 2px; }
#capacity .cap-open { margin-top: 1.25rem; align-self: flex-start; display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem 1.1rem .5rem .55rem; border: 2px solid var(--teal); border-radius: 2rem; background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
#capacity .cap-open::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: .75rem; }
#capacity .cap-open:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
#capacity .cap-open:focus-visible::after { box-shadow: inset 0 0 0 3px var(--teal); }
#capacity .cap-card:hover .cap-open { background: var(--teal); color: #fff; }
#capacity .cap-plus { width: 1.6rem; height: 1.6rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 800; line-height: 1; }
#capacity .cap-card:hover .cap-plus { background: #fff; color: var(--teal); }
#capacity .cap-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#capacity .cap-rule { margin: 1rem 0 0; padding: .75rem 1rem; background: var(--bg); border-left: 4px solid var(--teal); border-radius: .35rem; max-width: 70ch; }

/* Measurement links on the root page */
#capacity .cap-more { margin-top: 1.5rem; display: grid; gap: .6rem; }
#capacity .cap-more .k2 { margin: 0; }
#capacity .cap-mlinks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
#capacity .cap-mlink { position: relative; display: flex; align-items: center; gap: .7rem; min-height: 44px; padding: .75rem 2.5rem .75rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: .75rem; color: var(--ink); font-weight: 700; text-decoration: none; scroll-margin-top: 6rem; }
#capacity .cap-mlink::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; border-top: 2px solid var(--teal); border-right: 2px solid var(--teal); transform: rotate(45deg); }
#capacity .cap-mlink:hover { border-color: var(--teal); }
#capacity .cap-mlink:focus-visible, #capacity .cap-mlink:target { outline: 3px solid var(--ink); outline-offset: 2px; }
#capacity .cap-mlink .cap-hint { display: block; }

/* Dialogs */
:root:has(#capacity .cap-dlg[open]) { overflow: hidden; }
#capacity .cap-dlg { width: min(44rem, calc(100vw - 1rem)); max-width: none; max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); padding: 0; border: 0; border-radius: .9rem; background: #fff; color: var(--ink); box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, .3); overflow: hidden; }
#capacity .cap-dlg::backdrop { background: rgba(15, 23, 42, .55); }
#capacity .cap-dlg-in { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); overflow-y: auto; overscroll-behavior: contain; padding: 0 1.25rem 1.25rem; }
#capacity .cap-dlg-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0 .75rem; background: #fff; border-bottom: 1px solid var(--line); }
#capacity .cap-dlg-h { margin: 0; font-size: 1.15rem; line-height: 1.25; }
#capacity .cap-dlg-lead { margin: 1rem 0 0; }
#capacity .cap-x { flex: none; min-width: 44px; min-height: 44px; padding: .45rem 1rem; border: 2px solid var(--ink); border-radius: 2rem; background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
#capacity .cap-x:hover { background: var(--ink); color: #fff; }
#capacity .cap-x:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
#capacity .cap-dlinks { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
#capacity .cap-dlinks a { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .9rem; border: 1px solid var(--teal); border-radius: 2rem; color: var(--ink); font-weight: 600; text-decoration: none; }
#capacity .cap-dlinks a:hover { background: var(--bg); text-decoration: underline; }
#capacity .cap-dlinks a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Shared building blocks */
:is(#capacity, .cap-page) .cap-hint { font-weight: 400; font-size: .85rem; color: var(--muted); }
:is(#capacity, .cap-page) .cap-num { width: 1.6rem; height: 1.6rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: .85rem; }
:is(#capacity, .cap-page) .cap-cap { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); margin: 1.25rem 0 .4rem; }
:is(#capacity, .cap-page) .cap-flow { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .5rem; }
:is(#capacity, .cap-page) .cap-flow li { border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: .5rem; padding: .55rem .65rem; font-size: .9rem; background: var(--bg); }
:is(#capacity, .cap-page) .cap-flow li strong { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--teal); }
:is(#capacity, .cap-page) .cap-flow .cap-alt { border-left-color: var(--amber); }
:is(#capacity, .cap-page) .cap-chips { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
:is(#capacity, .cap-page) .cap-chips li { padding: .3rem .65rem; border: 1px solid var(--line); border-radius: .4rem; background: #fff; font-size: .85rem; }
:is(#capacity, .cap-page) .cap-chips.cap-mono li { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
:is(#capacity, .cap-page) .cap-roles { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem; }
:is(#capacity, .cap-page) .cap-roles li { padding: .6rem .75rem; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: .5rem; background: #fff; font-size: .9rem; }
:is(#capacity, .cap-page) .cap-roles li strong { display: block; }
:is(#capacity, .cap-page) .cap-dl { margin: .4rem 0 0; display: grid; gap: .45rem; }
:is(#capacity, .cap-page) .cap-dl > div { display: grid; gap: .15rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: .5rem; background: #fff; }
:is(#capacity, .cap-page) .cap-dl dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--teal); }
:is(#capacity, .cap-page) .cap-dl dd { margin: 0; }
:is(#capacity, .cap-page) .cap-dl a { overflow-wrap: anywhere; }
:is(#capacity, .cap-page) .cap-cost > div { border-left-width: 4px; }
:is(#capacity, .cap-page) .cap-cost .cap-c-lic { border-left-color: var(--blue); }
:is(#capacity, .cap-page) .cap-cost .cap-c-set { border-left-color: var(--amber); }
:is(#capacity, .cap-page) .cap-cost .cap-c-up { border-left-color: var(--violet); }
:is(#capacity, .cap-page) .cap-cost .cap-c-use { border-left-color: var(--line); }
:is(#capacity, .cap-page) .cap-math { margin: .75rem 0 0; padding: .6rem .8rem; background: var(--bg); border-radius: .4rem; font-size: .95rem; }

/* Measurement and workload strips */
:is(#capacity, .cap-page) .cap-strip { display: grid; gap: .3rem; margin: .5rem 0; }
:is(#capacity, .cap-page) .cap-strip p { margin: 0; }
:is(#capacity, .cap-page) .cap-sl { display: flex; justify-content: space-between; gap: .5rem; font-size: .9rem; }
:is(#capacity, .cap-page) .cap-bar { display: flex; height: 1rem; background: var(--track); border-radius: .4rem; overflow: hidden; }
:is(#capacity, .cap-page) .cap-bar span { height: 100%; }
:is(#capacity, .cap-page) .cap-s0 { background: #8796ab; }
:is(#capacity, .cap-page) .cap-s1 { background: var(--blue); }
:is(#capacity, .cap-page) .cap-s2 { background: var(--teal); }
:is(#capacity, .cap-page) .cap-s3 { background: var(--amber); }
:is(#capacity, .cap-page) .cap-idle { background: repeating-linear-gradient(45deg, #fff 0 4px, var(--track) 4px 8px); }
:is(#capacity, .cap-page) .cap-key { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; color: var(--muted); }
:is(#capacity, .cap-page) .cap-key span::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .3rem; border-radius: .15rem; vertical-align: -.05rem; }
:is(#capacity, .cap-page) .cap-k0::before { background: #8796ab; }
:is(#capacity, .cap-page) .cap-k1::before { background: var(--blue); }
:is(#capacity, .cap-page) .cap-k2::before { background: var(--teal); }
:is(#capacity, .cap-page) .cap-k3::before { background: var(--amber); }
:is(#capacity, .cap-page) .cap-k4::before { background: var(--track); border: 1px solid #8796ab; }
:is(#capacity, .cap-page) .cap-chain { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; counter-reset: c; }
:is(#capacity, .cap-page) .cap-chain li { counter-increment: c; font-size: .85rem; font-weight: 700; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--bg); }
:is(#capacity, .cap-page) .cap-chain li::before { content: counter(c) ". "; color: var(--teal); }
:is(#capacity, .cap-page) .cap-ev { display: grid; gap: .6rem; }
:is(#capacity, .cap-page) .cap-evc { margin: 0; padding: .75rem; border: 1px solid var(--line); border-left: 4px solid var(--violet); border-radius: .5rem; font-size: .9rem; }
:is(#capacity, .cap-page) .cap-evc a { display: inline-block; margin-top: .25rem; padding: .2rem 0; }

/* Bar widths, one shared scale per visual */
:is(#capacity, .cap-page) .cw10 { width: 10%; }
:is(#capacity, .cap-page) .cw11 { width: 11%; }
:is(#capacity, .cap-page) .cw15 { width: 15%; }
:is(#capacity, .cap-page) .cw17 { width: 17%; }
:is(#capacity, .cap-page) .cw19 { width: 19%; }
:is(#capacity, .cap-page) .cw22 { width: 22%; }
:is(#capacity, .cap-page) .cw28 { width: 28%; }
:is(#capacity, .cap-page) .cw30 { width: 30%; }
:is(#capacity, .cap-page) .cw34 { width: 34%; }
:is(#capacity, .cap-page) .cw38 { width: 38%; }
:is(#capacity, .cap-page) .cw40 { width: 40%; }
:is(#capacity, .cap-page) .cw50 { width: 50%; }
:is(#capacity, .cap-page) .cw55 { width: 55%; }
:is(#capacity, .cap-page) .cw60 { width: 60%; }
:is(#capacity, .cap-page) .cw75 { width: 75%; }
:is(#capacity, .cap-page) .cw100 { width: 100%; }

/* Detail pages */
.cap-page .cap-pg { padding: 1.25rem 0 3rem; }
.cap-page .cap-col { max-width: 46rem; }
.cap-page .cap-col h1 { font-size: clamp(1.7rem, 6vw, 2.5rem); line-height: 1.15; margin: .2rem 0 .6rem; }
.cap-page .cap-col h2 { font-size: 1.2rem; margin: 2rem 0 .5rem; }
.cap-page .cap-col section { scroll-margin-top: 5rem; }
.cap-page .cap-back { margin: 0 0 1rem; }
.cap-page .cap-back.cap-end { margin: 2rem 0 0; }
.cap-page .cap-back a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem .95rem; border: 1px solid var(--line); border-radius: 2rem; background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; }
.cap-page .cap-back a:hover { border-color: var(--teal); text-decoration: underline; }
.cap-page a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.cap-page .cap-rule { margin: 1.25rem 0 0; padding: .75rem 1rem; background: var(--bg); border-left: 4px solid var(--teal); border-radius: .35rem; }
.cap-page .cap-apply { margin: 1rem 0 0; padding: .75rem 1rem; border: 1px dashed var(--violet); border-radius: .5rem; background: #fff; }
.cap-page .cap-steps { list-style: none; counter-reset: s; margin: .5rem 0 0; padding: 0; display: grid; gap: .55rem; }
.cap-page .cap-steps li { counter-increment: s; position: relative; padding: .7rem .9rem .7rem 3rem; border: 1px solid var(--line); border-radius: .6rem; background: #fff; }
.cap-page .cap-steps li::before { content: counter(s); position: absolute; left: .8rem; top: .7rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: .85rem; font-weight: 700; }
.cap-page .cap-list { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.cap-page .cap-tree { list-style: none; margin: .5rem 0 0; padding: .75rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--bg); display: grid; gap: .4rem; font-size: .95rem; }
.cap-page .cap-tree .cap-root { font-weight: 700; overflow-wrap: anywhere; }
.cap-page .cap-tree li:not(.cap-root) { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-left: .75rem; padding: .5rem .7rem; border-left: 3px solid var(--teal); border-radius: .4rem; background: #fff; }
.cap-page .cap-file { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; overflow-wrap: anywhere; }
.cap-page .cap-badge { display: inline-block; padding: .1rem .55rem; border-radius: 2rem; font-size: .75rem; font-weight: 700; border: 1px solid var(--blue); background: #fff; color: var(--ink); }
.cap-page .cap-b-write { border-color: var(--teal); background: var(--teal); color: #fff; }
.cap-page .cap-b-you { border-color: var(--ink); background: var(--ink); color: #fff; }
.cap-page .cap-time { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; }
.cap-page .cap-time li { padding: .6rem .7rem; border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: .5rem; background: #fff; font-size: .9rem; }
.cap-page .cap-time li strong { display: block; }
.cap-page .cap-jump { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cap-page .cap-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .9rem; border: 1px solid var(--teal); border-radius: 2rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.cap-page .cap-src { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .25rem; font-size: .9rem; }
.cap-page .cap-src a { overflow-wrap: anywhere; display: inline-block; padding: .2rem 0; }
.cap-page .cap-msec { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.cap-page .cap-msec h2 { display: flex; align-items: center; gap: .6rem; margin-top: 0; }

@media (min-width: 640px) {
  :is(#capacity, .cap-page) .cap-dl > div { grid-template-columns: 10.5rem 1fr; gap: .75rem; align-items: baseline; }
}
@media (min-width: 760px) {
  #capacity .cap-mlinks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :is(#capacity, .cap-page) .cap-ev { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  #capacity .cap-dlg-in { padding: 0 1rem 1rem; }
  #capacity .cap-dlg-h { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  #capacity .cap-card { transition: none; }
}

/* Tabbed readers v6 · scoped to #capacity .cap-rdr */
#capacity .cap-dlg.cap-rdr { width: calc(100vw - 32px); height: calc(100vh - 32px); height: calc(100dvh - 32px); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; }
#capacity .cap-rdr .cap-dlg-in { display: flex; flex-direction: column; height: 100%; max-height: none; overflow: hidden; padding: 0; }
#capacity .cap-rdr .cap-dlg-head { position: static; flex: none; padding: .85rem 1.25rem .7rem; border-bottom: 0; }
#capacity .cap-rdr .cap-dlg-h:focus { outline: none; }
#capacity .cap-rdr .cap-dlg-h:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
#capacity .cap-tabs { position: relative; flex: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1.25rem .75rem; border-bottom: 1px solid var(--line); background: #fff; }
#capacity .cap-tab { flex: none; min-height: 44px; padding: .4rem .95rem; border: 1px solid var(--line); border-radius: 2rem; background: #fff; color: var(--ink); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
#capacity .cap-tab:hover { border-color: var(--teal); }
#capacity .cap-tab[aria-selected="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
#capacity .cap-tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
#capacity .cap-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 1.25rem 2rem; }
#capacity .cap-tp { max-width: 62rem; margin: 0 auto; }
#capacity .cap-tp[hidden] { display: none; }
#capacity .cap-tp:focus { outline: none; }
#capacity .cap-tp:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
#capacity .cap-tp > h3 { margin: 0 0 .5rem; font-size: 1.35rem; line-height: 1.2; }
#capacity .cap-tp h1 { font-size: 1.35rem; line-height: 1.2; margin: .2rem 0 .5rem; }
#capacity .cap-tp h2, #capacity .cap-tp h4 { font-size: 1.15rem; line-height: 1.25; margin: 1.75rem 0 .5rem; }
#capacity section.cap-tp { padding: 0; }
#capacity dialog.cap-dlg:not([open]) { display: none; }
#capacity .cap-tp :is(p, .cap-list, .cap-steps, .cap-src, .cap-dl, .cap-tree) { max-width: 70ch; }
#capacity .cap-tp img, #capacity .cap-tp table { max-width: 100%; }
@media (max-width: 640px) {
  #capacity .cap-dlg.cap-rdr { width: calc(100vw - 12px); height: calc(100vh - 12px); height: calc(100dvh - 12px); max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); border-radius: .6rem; }
  #capacity .cap-rdr .cap-dlg-head { padding: .7rem .75rem .6rem; }
  #capacity .cap-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; overflow: visible; padding: 0 .75rem .6rem; }
  #capacity .cap-tab { min-width: 0; min-height: 44px; padding: .35rem .6rem; white-space: normal; line-height: 1.2; text-align: center; font-size: .92rem; }
  #capacity .cap-body { padding: 1rem .75rem 1.5rem; }
}

/* Card graphics v9 · scoped to #capacity .cap-chart */
#capacity .cap-chart { margin: .25rem 0 1.25rem; display: grid; gap: .25rem; min-width: 0; }
#capacity .cap-chart .bars { margin: .5rem 0 0; gap: .6rem; }
#capacity .cap-chart .k2 { margin: 1rem 0 0; }
#capacity .cap-chart .bar .l { overflow-wrap: anywhere; }
#capacity .cap-chart .cw67x { width: calc(200% / 3); }
#capacity .cap-chart .cw80 { width: 80%; }
@media (max-width: 360px) {
  #capacity .cap-chart .bars { gap: .5rem; }
  #capacity .cap-chart .bar { gap: .2rem .5rem; }
}