/* In-house demos — always on a dark instrument surface, whatever the theme. */
.demo { --s-bg: #0F1C24; --s-ink: #F5F2EB; --s-soft: #A8BBC5; --s-line: rgba(182, 216, 229, .16); display: grid; gap: 1.25rem; padding: clamp(1rem, 2.5vw, 1.75rem); border-radius: 4px; background: var(--s-bg); color: var(--s-ink); font-size: .95rem; }
.demo :focus-visible { outline-color: #B6D8E5; }
.demo__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; }
.demo__badge { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .7rem; border: 1px dashed rgba(227, 200, 160, .6); border-radius: 2px; color: #E3C8A0; font-size: .8rem; font-weight: 600; }
.demo__badge .icon { width: 1rem; height: 1rem; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--s-line); border-radius: 3px; overflow: hidden; }
.seg button { min-height: 2.5rem; padding: .4rem .9rem; border: 0; border-right: 1px solid var(--s-line); background: transparent; color: var(--s-soft); font-size: .85rem; font-weight: 600; transition: background-color .16s, color .16s; }
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--s-ink); background: rgba(182, 216, 229, .06); }
.seg button[aria-pressed="true"] { background: #F5F2EB; color: #0A141B; }
/* .seg clips overflow, so the focus ring is drawn inside the button. */
.seg button:focus-visible { outline: 2px solid #B6D8E5; outline-offset: -4px; border-radius: 2px; }
.seg button[aria-pressed="true"]:focus-visible { outline-color: #061019; }
@media (max-width: 559px) {
  .demo .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .demo .seg button { padding-inline: .4rem; line-height: 1.2; }
}

.dash__filters { display: flex; flex-wrap: wrap; gap: .75rem; }
.dash__kpis { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; border: 1px solid var(--s-line); border-radius: 3px; overflow: hidden; }
@media (min-width: 960px) { .dash__kpis { grid-template-columns: repeat(4, 1fr); } }
.dash__kpis > div { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; margin: 0 -1px -1px 0; padding: .9rem 1rem; border-right: 1px solid var(--s-line); border-bottom: 1px solid var(--s-line); container-type: inline-size; }
.dash__kpis dt { color: var(--s-soft); font-size: .8rem; text-wrap: balance; }
.dash__kpis dd { margin: auto 0 0; padding-top: .25rem; font-family: var(--font-display); font-stretch: var(--display-stretch); font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); font-size: clamp(1rem, 13cqi, clamp(1.2rem, 1rem + 1vw, 1.6rem)); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 759px) { .dash__kpis > div { padding: .8rem .75rem; } }
@media (max-width: 339px) { .dash__kpis { grid-template-columns: 1fr; } }
.dash__charts { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .dash__charts { grid-template-columns: 1fr 1fr; } }
.chart { margin: 0; display: grid; gap: .5rem; }
.chart figcaption strong { font-weight: 650; }
.chart figcaption span { color: var(--s-soft); font-size: .8rem; margin-left: .3rem; }
.chart__legend { display: flex; gap: 1rem; font-size: .8rem; color: var(--s-soft); }
.chart__key { display: inline-flex; align-items: center; gap: .4rem; }
.sw { display: inline-block; }
.sw--box { width: 10px; height: 10px; border-radius: 2px; }
.sw--line { width: 14px; height: 2px; border-radius: 1px; }
.chart__plot { position: relative; }
.chart__plot svg { width: 100%; height: auto; overflow: visible; }
.chart__plot .grid { stroke: rgba(182, 216, 229, .1); }
.chart__plot .axis { stroke: rgba(182, 216, 229, .35); }
.chart__plot .tick { fill: var(--s-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
@media (max-width: 479px) { .chart__plot .tick { font-size: 19px; } }
@media (min-width: 480px) and (max-width: 599px) { .chart__plot .tick { font-size: 14px; } }
@media (min-width: 900px) and (max-width: 1199px) { .chart__plot .tick { font-size: 14px; } }
.chart__plot .cross { stroke: rgba(245, 242, 235, .5); stroke-width: 1; }
.chart__plot rect[tabindex]:focus { outline: none; }
.chart__plot rect[tabindex]:focus-visible { stroke: #B6D8E5; stroke-width: 1; }
.chart__tip { position: absolute; top: 0; z-index: 2; min-width: 9.5rem; padding: .55rem .7rem; border: 1px solid var(--s-line); border-radius: 3px; background: #0A141B; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6); font-size: .8rem; transform: translateX(12px); pointer-events: none; }
.chart__tip.is-left { transform: translateX(calc(-100% - 12px)); }
.chart__tip p { display: flex; align-items: center; gap: .45rem; margin: 0; }
.chart__tip p + p { margin-top: .2rem; }
.chart__tip-h { color: var(--s-soft); margin-bottom: .25rem !important; }
.chart__tip i { width: 12px; height: 2px; border-radius: 1px; }
.chart__tip b { font-variant-numeric: tabular-nums; }
.chart__tip span { color: var(--s-soft); }
.dash__lower { display: grid; gap: 1.25rem; }
@media (min-width: 1000px) { .dash__lower { grid-template-columns: 1.4fr 1fr; } }
.dash__table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.dash__table caption { text-align: left; margin-bottom: .5rem; font-weight: 650; }
.dash__table th, .dash__table td { padding: .55rem .6rem .55rem 0; border-bottom: 1px solid var(--s-line); text-align: left; font-weight: 500; }
.dash__table thead th { color: var(--s-soft); font-weight: 600; font-size: .78rem; }
.dash__table .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 559px) {
  .dash__table { min-width: 27rem; }
  .dash__table th:first-child, .dash__table td:first-child { width: 8rem; }
  .dash__table .num, .dash__table thead th, .dash__table td:nth-child(2) { white-space: nowrap; }
  .dash__table th:last-child, .dash__table td:last-child { padding-right: 0; }
  .dash__lower .table-scroll {
    background:
      linear-gradient(90deg, var(--s-bg) 40%, transparent) left / 1.5rem 100% no-repeat local,
      linear-gradient(270deg, var(--s-bg) 40%, transparent) right / 1.5rem 100% no-repeat local,
      linear-gradient(90deg, rgba(182, 216, 229, .22), transparent) left / .75rem 100% no-repeat scroll,
      linear-gradient(270deg, rgba(182, 216, 229, .22), transparent) right / .75rem 100% no-repeat scroll;
  }
}
.dash__log h3 { font-family: var(--font-body); font-size: .95rem; font-weight: 650; letter-spacing: 0; margin-bottom: .5rem; }
.dash__log ol { list-style: none; margin: 0; padding: 0; }
.dash__log li { display: grid; grid-template-columns: 2.2rem 10px 1fr; gap: .6rem; align-items: baseline; padding-block: .5rem; border-bottom: 1px dashed var(--s-line); color: var(--s-soft); font-size: .85rem; }
.dash__log li i { width: 10px; height: 2px; align-self: start; margin-top: .72em; }
.log__w { color: var(--s-ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.dash__defs { border-top: 1px solid var(--s-line); padding-top: .75rem; font-size: .85rem; }
.dash__defs summary { cursor: pointer; font-weight: 600; padding-block: .7rem; }
.dash__defs dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: .75rem 0 0; color: var(--s-soft); }
.dash__defs dt { color: var(--s-ink); font-weight: 600; }
.dash__defs dd { margin: 0; }
@media (max-width: 560px) { .dash__defs dl { grid-template-columns: 1fr; } .dash__defs dd { margin-bottom: .4rem; } }

/* Website concept */
.site-frame { width: 100%; max-width: 100%; margin-inline: auto; border: 1px solid var(--s-line); border-radius: 6px; overflow: hidden; background: #fff; color: #18242C; container-type: inline-size; }
@media (max-width: 519px) { .demo--site .seg { display: none; } }
.mock { font-family: var(--font-body); }
.mock__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.25rem; border-bottom: 1px solid #E5E8EA; }
.mock__logo { font-weight: 800; letter-spacing: -.01em; }
.mock__head nav { display: flex; align-items: center; gap: 1rem; font-size: .85rem; }
.mock__head nav a { color: #18242C; text-decoration: none; }
.mock__btn { display: inline-flex; align-items: center; min-height: 2.4rem; padding: .45rem .9rem; border: 0; border-radius: 3px; background: #1F4E5F; color: #fff !important; font-size: .85rem; font-weight: 650; text-decoration: none; }
.mock__hero { padding: 2.5rem 1.25rem; background: #EEF3F5; }
.mock__hero h3 { font-family: var(--font-body); font-size: clamp(1.4rem, 4cqi, 2.2rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; max-width: 22ch; }
.mock__hero p { margin: .75rem 0 1.25rem; max-width: 46ch; color: #4A5961; }
.mock__rows { display: grid; gap: 1px; background: #E5E8EA; }
.mock__rows article { padding: 1.25rem; background: #fff; }
.mock__rows h4 { font-size: 1rem; margin-bottom: .3rem; }
.mock__rows p { color: #4A5961; font-size: .88rem; }
.mock__proof { padding: 1.5rem 1.25rem; border-block: 1px dashed #C9D1D5; color: #4A5961; font-size: .9rem; font-style: italic; }
.mock__form { display: grid; gap: .45rem; padding: 1.5rem 1.25rem; }
.mock__form label { font-weight: 650; font-size: .88rem; }
.mock__form div { display: flex; flex-wrap: wrap; gap: .5rem; }
.mock__form input { flex: 1 1 12rem; min-height: 2.4rem; padding: .45rem .7rem; border: 1px solid #B8C2C7; border-radius: 3px; font: inherit; color: #18242C; background: #fff; }
.mock__form input[aria-invalid="true"] { border-color: #B4442F; }
.mock__msg { min-height: 1.3em; font-size: .85rem; }
.mock__msg[data-state="error"] { color: #A23A26; }
.mock__msg[data-state="ok"] { color: #1F4E5F; }
@container (min-width: 640px) { .mock__rows { grid-template-columns: repeat(3, 1fr); } .mock__hero { padding: 3.5rem 2rem; } }
@container (max-width: 480px) { .mock__head nav a:not(.mock__btn) { display: none; } }
.budget h3 { font-family: var(--font-body); font-size: .95rem; letter-spacing: 0; margin-bottom: .6rem; }
.budget table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-bottom: .5rem; }
.budget th, .budget td { text-align: left; padding: .5rem .8rem .5rem 0; border-bottom: 1px solid var(--s-line); }
.budget thead th { color: var(--s-soft); font-weight: 600; }
.demo .soft { color: var(--s-soft); }

/* Architecture */
.arch { display: grid; gap: 1.25rem; }
@media (min-width: 960px) { .arch { grid-template-columns: 1.7fr 1fr; align-items: start; } }
.arch__map { width: 100%; height: auto; overflow: visible; }
.arch__map .edge { fill: none; stroke-width: 1.8; }
.arch__map .edge--auto { stroke: #B6D8E5; }
.arch__map .edge--manual { stroke: #E3C8A0; stroke-dasharray: 5 7; }
.arch__map .node { cursor: pointer; }
.arch__map .node rect { fill: #0A141B; stroke: rgba(182, 216, 229, .45); stroke-width: 1.2; transition: fill var(--t-fast), stroke var(--t-fast); }
.arch__map .node text { fill: #F5F2EB; font-size: 15px; font-weight: 600; font-family: var(--font-body); }
.arch__map .node--hub rect { stroke: #B98558; stroke-width: 1.8; }
.arch__map .node:hover rect { stroke: #F5F2EB; }
.arch__map .node.is-selected rect { fill: #F5F2EB; stroke: #F5F2EB; }
.arch__map .node.is-selected text { fill: #0A141B; }
.arch__map .node:focus { outline: none; }
.arch__map .node:focus-visible rect { stroke: #B6D8E5; stroke-width: 3; }
.arch > * { min-width: 0; }
.arch__stage { min-width: 0; }
.arch__hint { display: none; }
@media (max-width: 599px) {
  .arch__stage { overflow-x: auto; overscroll-behavior-x: contain; margin-inline: calc(clamp(1rem, 2.5vw, 1.75rem) * -1); padding-inline: clamp(1rem, 2.5vw, 1.75rem); }
  .arch__stage .arch__map { width: 38rem; max-width: none; }
  .arch__map .node text { font-size: 17px; }
  .arch__hint { display: block; margin-top: -.5rem; }
}
@media (min-width: 600px) and (max-width: 959px) {
  .arch__stage { overflow-x: auto; overscroll-behavior-x: contain; }
  .arch__map { min-width: 620px; }
}
.arch__panel { padding: 1.25rem; border: 1px solid var(--s-line); border-radius: 3px; }
.arch__panel h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.arch__panel p { color: var(--s-soft); }
.arch__legend { display: grid; gap: .4rem; margin: 1.25rem 0 0; font-size: .82rem; color: var(--s-soft); }
.arch__legend li { display: flex; align-items: center; gap: .55rem; }
.k { display: inline-block; width: 26px; height: 0; border-top: 2px solid; }
.k--auto { border-color: #B6D8E5; }
.k--manual { border-color: #E3C8A0; border-top-style: dashed; }

@container (max-width: 300px) {
  .mock__head { padding: .75rem .9rem; gap: .75rem; }
  .mock__logo, .mock__btn { white-space: nowrap; }
}