/* ==========================================================================
   Neo-brutalist skin — treatment for shared components (theme 1.7.0)
   Loads after neo-brutalism.css, only when the neo skin is active. The
   components themselves (hero figures, message anatomy, receipt states,
   sizing charts, segment calculator, capability ticker, page diagnostics,
   hero breeze, company identity)
   are shared with the classic skin;
   this file only re-dresses them with the neo vocabulary: ink borders,
   hard offset shadows, square corners, paper and signal-yellow stickers.
   ========================================================================== */

/* Focus on dark panels uses the skin's signal yellow, as on other dark grounds. */
:root {
  --te-focus-on-dark: var(--nb-signal);
}

/* Hero figures read as paper cards on the blueprint hero, like the home connection model. */
.te-hero-figure {
  --nb-shadow-color: var(--nb-ink);
  --nb-art-pad: clamp(1rem, 2.5vw, 1.5rem);
  padding: var(--nb-art-pad);
  background: var(--nb-paper);
  border: var(--nb-border);
  border-radius: 0;
  box-shadow: var(--nb-off-lg) var(--nb-off-lg) 0 0 var(--nb-cyan);
  color: var(--nb-ink);
}

.te-hero-figure .te-art-topline {
  margin-block-end: 1.25rem;
}

/* The second "What we don't sell" bar sits mid-card, so it only bleeds sideways. */
.te-focus-list + .te-art-topline {
  margin-block-start: 0;
  margin-inline: calc(-1 * var(--nb-art-pad));
}

.te-hero-figure strong {
  color: var(--nb-ink);
  font-weight: 800;
}

.te-hero-figure small {
  color: var(--nb-muted);
  font-weight: 700;
}

.te-hero-figure figcaption {
  color: var(--nb-muted);
  border-top: var(--nb-border);
  font-weight: 600;
}

.te-portal-map li {
  border: 2px solid var(--nb-ink);
  border-radius: 0;
  background-color: var(--nb-white);
  box-shadow: 3px 3px 0 0 var(--nb-ink);
  color: var(--nb-ink);
}

.te-portal-num {
  border: 2px solid var(--nb-ink);
  border-radius: 0;
  background-color: var(--nb-signal);
  color: var(--nb-ink);
  font-weight: 800;
}

.te-topo-edge {
  border: 2px dashed var(--nb-ink);
  border-radius: 0;
  background-color: var(--nb-white);
  color: var(--nb-ink);
}

.te-topo-edge code {
  color: var(--nb-blue);
  font-weight: 700;
}

.te-topo-boundary {
  --te-topo-line: 2px;
  --te-topo-dot: 10px;
  border: var(--nb-border);
  border-radius: 0;
  background-color: var(--nb-cyan-wash);
  box-shadow: var(--nb-off-sm) var(--nb-off-sm) 0 0 var(--nb-ink);
}

.te-topo-boundary::before,
.te-topo-boundary::after {
  border-inline-start-width: var(--te-topo-line);
  border-inline-start-color: var(--nb-ink);
}

/* Traffic packets: square Signal Yellow chips with an ink rim, riding the ink connectors. */
.te-motion .te-topology.is-playing .te-topo-boundary > small::before,
.te-motion .te-topology.is-playing .te-topo-ops::after {
  border: 2px solid var(--nb-ink);
  border-radius: 0;
  background-color: var(--nb-signal);
}

.te-topo-boundary li {
  border: 2px solid var(--nb-ink);
  border-radius: 0;
  background-color: var(--nb-white);
  color: var(--nb-ink);
  font-weight: 700;
}

.te-topo-ops {
  border-block-start: 2px dashed var(--nb-ink);
}

.te-cost-term {
  border: var(--nb-border);
  border-radius: 0;
  background-color: var(--nb-white);
  box-shadow: var(--nb-off-sm) var(--nb-off-sm) 0 0 var(--nb-ink);
}

.te-cost-term--supplier {
  border-style: dashed;
  background-color: var(--nb-paper);
  box-shadow: none;
}

.te-cost-op {
  border: 2px solid var(--nb-ink);
  border-radius: 0;
  background-color: var(--nb-signal);
  color: var(--nb-ink);
  font-weight: 800;
}

.te-focus-list li {
  color: var(--nb-ink);
  font-weight: 600;
}

.te-focus-list li::before {
  color: var(--nb-blue);
}

.te-focus-list--no li {
  color: var(--nb-muted);
}

.te-focus-list--no li::before {
  color: var(--nb-ink);
}

/* Anatomy of a message stays a dark blueprint panel, framed in ink. */
.te-sequence {
  border: var(--nb-border);
  border-radius: 0;
  box-shadow: var(--nb-shadow);
  background: var(--nb-grid-dark), var(--nb-ink);
}

.te-seq-actor,
.te-seq-box,
.te-seq-arrow code {
  border-radius: 0;
}

.te-seq-actor {
  border: 2px solid var(--nb-cyan);
}

.te-seq-actor--core {
  background-color: var(--nb-blue);
  border-color: var(--nb-white);
}

.te-seq-actor--core small,
.te-seq-actor--core span {
  color: var(--nb-white);
}

.te-seq-box {
  border: 2px solid var(--nb-white);
  box-shadow: 3px 3px 0 0 var(--nb-cyan);
}

.te-seq-replay {
  border: 2px solid var(--nb-ink);
  border-radius: 0;
  background-color: var(--nb-signal);
  color: var(--nb-ink);
  font-weight: 800;
  box-shadow: 3px 3px 0 0 var(--nb-cyan);
}

.te-seq-replay:hover {
  border-color: var(--nb-ink);
  color: var(--nb-ink);
  transform: translate(-1px, -1px);
}

/* Receipt states sit inside the dark Platform banner. */
.te-dlr-col {
  border: 2px solid var(--nb-cyan);
  border-radius: 0;
}

/* Sizing charts and the segment calculator are paper instruments. */
.te-load-chart,
.te-segcalc {
  border: var(--nb-border);
  border-radius: 0;
  box-shadow: var(--nb-shadow);
  background-color: var(--nb-white);
}

.te-load-area {
  fill: var(--nb-cyan-wash);
  stroke: var(--nb-ink);
  stroke-width: 2;
}

.te-load-peak {
  stroke: var(--nb-blue);
}

.te-segcalc-stats div {
  border: 2px solid var(--nb-ink);
  border-radius: 0;
  background-color: var(--nb-paper);
}

.te-segcalc-samples button {
  border: 2px solid var(--nb-ink);
  border-radius: 0;
  background-color: var(--nb-white);
  font-weight: 700;
  box-shadow: 3px 3px 0 0 var(--nb-ink);
}

.te-segcalc-samples button[aria-pressed="true"] {
  background-color: var(--nb-signal);
  color: var(--nb-ink);
  border-color: var(--nb-ink);
}

.te-segcalc-bar span {
  border: 1px solid var(--nb-ink);
  border-radius: 0;
  background-color: var(--nb-white);
}

.te-segcalc-bar i {
  background-color: var(--nb-ink);
}

.te-segcalc-ref th,
.te-segcalc-ref td {
  border-block-end: 2px solid var(--nb-ink);
}

.te-motion .te-segcalc-stats div.is-changed::after {
  box-shadow: inset 0 0 0 3px var(--nb-signal);
}

/* Buttons stay square in this skin (theme.json keeps the classic radius). */
.wp-element-button,
.wp-block-button__link,
.te-btn {
  border-radius: 0;
}

/* ==========================================================================
   Capability ticker (theme 1.8.0): a Signal Yellow strip with ink squares.
   ========================================================================== */
.te-ticker {
  background-color: var(--nb-signal);
  color: var(--nb-ink);
  border-block: 0;
  border-block-start: var(--nb-border);
}

.te-ticker-track {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.te-ticker-track li::before {
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: 0;
  background-color: var(--nb-ink);
}

.te-ticker-toggle {
  background-color: var(--nb-white);
  color: var(--nb-ink);
  border-inline-start: var(--nb-border);
}

.te-ticker-toggle:hover {
  background-color: var(--nb-cyan-wash);
}

.te-ticker-toggle:focus-visible {
  outline: 3px solid var(--nb-ink);
  outline-offset: -7px;
}

.te-ticker-icon {
  inline-size: 0.75rem;
  block-size: 0.875rem;
  border-inline-width: 4px;
}

/* ==========================================================================
   Live page diagnostics (theme 1.8.0; one-row strip since 1.13.0): a squared
   instrument strip on the dark footer with a cyan status square.
   ========================================================================== */
.te-diagnostics {
  border: 2px solid var(--wp--custom--color--navy-control);
  border-radius: 0;
  box-shadow: var(--nb-shadow);
}

.te-diag-title {
  font-weight: 800;
}

.te-diag-title::before {
  border-radius: 0;
}

.te-diag-grid > div {
  border-inline-start-color: var(--wp--custom--color--navy-control);
}

.te-diag-grid dt {
  font-weight: 700;
}

.te-diag-grid dd {
  font-weight: 800;
}

.te-diag-more {
  border-block-start: 2px dashed #3B5A85;
}

/* Hero breeze (theme 1.11.0): squared cyan outlines, a little stronger over the blueprint grid. */
.te-breeze {
  --te-breeze-strength: 1.4;
}

.te-breeze-msg {
  color: var(--nb-cyan);
}

.te-breeze-msg svg {
  stroke-width: 2;
  stroke-linejoin: miter;
}

/* Company identity: a squared paper plate; the footer line uses the white footer link colour. */
.te-identity-card {
  border: var(--nb-border);
  border-radius: 0;
  background-color: var(--nb-white);
}

.te-identity-card > div + div {
  border-block-start-color: var(--nb-ink);
}

.te-identity-card dt {
  color: var(--nb-ink);
  font-weight: 800;
}

.te-footer-entity {
  color: var(--nb-white);
  font-weight: 700;
}

/* Staff-portal screenshots: ink frame, hard shadow and the Signal Yellow label bar. */
.te-shot {
  border: var(--nb-border);
  border-radius: 0;
  box-shadow: var(--nb-shadow);
}

.te-shot-label {
  border-block-end: var(--nb-border);
  background-color: var(--nb-signal);
  color: var(--nb-ink);
  font-weight: 700;
}

.te-shot-label strong {
  color: var(--nb-ink);
  font-weight: 800;
}

.te-shot > .te-shot-image figcaption {
  border-block-start: var(--nb-border);
  color: var(--nb-ink);
}

.te-shot-card .te-shot-image img {
  border: 2px solid var(--nb-ink);
  border-radius: 0;
  box-shadow: var(--nb-off-sm) var(--nb-off-sm) 0 0 var(--nb-ink);
}

.te-shot-card .te-shot-image figcaption {
  color: var(--nb-ink);
}