/* Toni Smart-Info RC71.20: native article typography and active portal roles.
 * Values are injected server-side from the ACTIVE per-blog theme tokens.
 * No generated hues, tinted mixes, global colors or widget/footer colors. */
/* Pass the actual article-card radius through its otherwise unpainted content
 * container. This keeps responsive/custom CSS authoritative without copying a
 * pixel value or choosing a token from a stylesheet the child did not enqueue.
 * Only content areas containing this component receive the inherited property. */
:is(.tn-article__content, .st-single-content, .tn-ow-article__body, .sw-article__body):has(.tcn-si-module),
.tcn-si-package-preview-wrap,
.tcn-si-module .tcn-si-module__main,
.tcn-si-module .tcn-si-items {border-radius: inherit;}
.tcn-si-module {
  box-sizing: border-box;
  container-type: inline-size;
  container-name: tcn-si;
  display: block;
  position: relative;
  isolation: isolate;
  clear: both;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: clamp(1.5rem, 3vw, 2.3rem) 0;
  padding: 0;
  font: inherit;
  line-height: inherit;
  color: var(--tcn-si-text);
  overflow-wrap: anywhere;
  word-break: normal;
}
.tcn-si-module *, .tcn-si-module *::before, .tcn-si-module *::after {box-sizing: border-box;}
.tcn-si-module .tcn-si-module__main {padding: clamp(1rem, 2.6vw, 1.65rem); min-width: 0;}
.tcn-si-module .tcn-si-eyebrow {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 0 0 .5em;
  margin: 0 0 .85rem !important;
  border-block-end: .18rem solid var(--tcn-si-accent);
  color: inherit;
  font-size: .78em;
  font-weight: 750;
  letter-spacing: .05em;
  line-height: 1.4;
  text-transform: uppercase;
}
.tcn-si-module .tcn-si-title {
  display: block;
  margin: 0 0 .8rem !important;
  padding: 0 !important;
  max-width: 62ch;
  /* The real article h3 rules own its color, size, weight and line height. */
}
.tcn-si-module .tcn-si-lead {
  margin: 0 !important;
  max-width: 76ch;
  color: inherit;
}
.tcn-si-module .tcn-si-lead + .tcn-si-lead {margin-block-start: .8em !important;}
.tcn-si-module .tcn-si-items {
  list-style: none;
  display: grid;
  gap: .75rem;
  padding: 0 !important;
  margin: 1.15rem 0 0 !important;
  min-width: 0;
}
.tcn-si-module .tcn-si-item {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  min-width: 0;
  margin: 0 !important;
  padding: 0;
  color: inherit;
}
.tcn-si-module .tcn-si-item__copy {min-width: 0; display: flex; flex-direction: column; gap: .1rem;}
.tcn-si-module .tcn-si-index {flex: 0 0 2.3ch; font-size: .8em; font-weight: 800; font-variant-numeric: tabular-nums;}
.tcn-si-module .tcn-si-item__label {display: block; font-weight: 750; line-height: 1.35;}
.tcn-si-module .tcn-si-item__text {display: block; font-size: .94em; line-height: 1.55;}
.tcn-si-module .tcn-si-number {display: block; font-size: clamp(1.25em, 2vw, 1.75em); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2;}
.tcn-si-module .tcn-si-unit {font-size: .63em; font-weight: 650;}
.tcn-si-module .tcn-si-required-credit {margin: 1rem 0 0 !important; font-size: .78em; line-height: 1.45;}

/* Top: premium bounded article panel, using ACTUAL theme surface + accent. */
.tcn-si-module.tcn-si-slot--top {
  background: var(--tcn-si-surface);
  color: var(--tcn-si-text);
  border: var(--tcn-si-border-rule);
  border-block-start: .34rem solid var(--tcn-si-accent);
  border-radius: inherit;
  overflow: hidden;
}

/* Bottom: differently composed article insight card, not a single vertical line.
 * Every color uses a token of the current active portal's article area. */
.tcn-si-module.tcn-si-slot--bottom {
  background: transparent;
  color: var(--tcn-si-text);
  border: var(--tcn-si-border-rule);
  border-block-end: .34rem solid var(--tcn-si-accent);
  border-radius: inherit;
  overflow: hidden;
}
.tcn-si-module.tcn-si-slot--bottom .tcn-si-module__main {padding: clamp(1rem, 2.8vw, 1.85rem);}
.tcn-si-module.tcn-si-slot--bottom .tcn-si-eyebrow {border-block-end: 0; padding-bottom: 0; margin-bottom: .85rem !important;}
.tcn-si-module.tcn-si-slot--bottom .tcn-si-title {max-width: 66ch;}
.tcn-si-module.tcn-si-slot--bottom .tcn-si-items {padding-block-start: .9rem !important; border-block-start: var(--tcn-si-border-rule);}
/* Split on the available article width, not on the full screen beside a sidebar. */
@container tcn-si (min-width: 660px) {
 .tcn-si-module.tcn-si-slot--bottom.tcn-si-has-items .tcn-si-module__main {
   display: grid;
   grid-template-columns: minmax(0,.93fr) minmax(0,1.15fr);
   grid-template-rows: min-content min-content 1fr;
   grid-template-areas: "eyebrow items" "title items" "lead items";
   column-gap: clamp(1rem, 2.5vw, 2rem);
   align-items: start;
 }
 .tcn-si-module.tcn-si-slot--bottom.tcn-si-has-items .tcn-si-eyebrow {grid-area:eyebrow;}
 .tcn-si-module.tcn-si-slot--bottom.tcn-si-has-items .tcn-si-title {grid-area:title;}
 .tcn-si-module.tcn-si-slot--bottom.tcn-si-has-items .tcn-si-lead {grid-area:lead;}
 .tcn-si-module.tcn-si-slot--bottom.tcn-si-has-items .tcn-si-items {
   grid-area:items; margin-top:0!important; padding-block:0!important;
   grid-template-columns:minmax(0,1fr)!important;
   border-block-start:0; border-inline-start:var(--tcn-si-border-rule);
   padding-inline-start:clamp(1rem,2vw,1.6rem)!important;
 }
}

/* Typed layouts are genuinely different without fabricating visual data. */
.tcn-si-module.tcn-si-format--essentials .tcn-si-items,
.tcn-si-module.tcn-si-format--facts .tcn-si-items,
.tcn-si-module.tcn-si-format--comparison .tcn-si-items,
.tcn-si-module.tcn-si-format--local .tcn-si-items,
.tcn-si-module.tcn-si-format--numbers .tcn-si-items {grid-template-columns: repeat(2, minmax(0, 1fr));}
.tcn-si-module.tcn-si-format--essentials .tcn-si-item,
.tcn-si-module.tcn-si-format--facts .tcn-si-item,
.tcn-si-module.tcn-si-format--comparison .tcn-si-item,
.tcn-si-module.tcn-si-format--local .tcn-si-item,
.tcn-si-module.tcn-si-format--numbers .tcn-si-item {
  padding: .8rem;
  border: var(--tcn-si-border-rule);
  border-radius: inherit;
  background: var(--tcn-si-surface);
}
.tcn-si-module.tcn-si-format--checklist .tcn-si-item,
.tcn-si-module.tcn-si-format--tips .tcn-si-item {padding: .5rem 0; border-block-start: var(--tcn-si-border-rule);}
.tcn-si-module.tcn-si-format--timeline .tcn-si-item,
.tcn-si-module.tcn-si-format--history .tcn-si-item {padding: .45rem 0 .8rem .65rem; border-inline-start: var(--tcn-si-border-rule);}
.tcn-si-module.tcn-si-format--know .tcn-si-lead,
.tcn-si-module.tcn-si-format--myth .tcn-si-lead,
.tcn-si-module.tcn-si-format--research .tcn-si-lead {padding-inline-start: .8rem; border-inline-start: var(--tcn-si-border-rule);}

/* Private previews are clearly distinguishable from public journalism. */
.tcn-si-module .tcn-si-preview-note {
  margin: 0 0 1rem !important;
  padding: .55rem .7rem;
  border: 1px dashed currentColor;
  font-size: .75em;
  font-weight: 750;
  line-height: 1.4;
}
.tcn-si-preview-note {margin: .8rem 0; font-size: .85em; font-weight: 700;}
.tcn-si-preview-error {border: 2px solid currentColor; padding: 1rem; font-weight: 700; overflow-wrap: anywhere;}
.tcn-si-module :focus-visible {outline: 2px solid var(--tcn-si-focus); outline-offset: 3px;}

@media (max-width: 560px) {
  .tcn-si-module .tcn-si-module__main {padding: 1rem .9rem;}
  .tcn-si-module.tcn-si-format--essentials .tcn-si-items,
  .tcn-si-module.tcn-si-format--facts .tcn-si-items,
  .tcn-si-module.tcn-si-format--comparison .tcn-si-items,
  .tcn-si-module.tcn-si-format--local .tcn-si-items,
  .tcn-si-module.tcn-si-format--numbers .tcn-si-items {grid-template-columns: minmax(0, 1fr);}
}
@media (forced-colors: active) {
  .tcn-si-module.tcn-si-slot--top, .tcn-si-module.tcn-si-slot--bottom {
    color: CanvasText; background: Canvas; border: 1px solid CanvasText;
  }
}

/* Only the authenticated real-package design preview: no leaked old article text. */
.tcn-si-package-preview-wrap {width: 100%; max-width: 100%; min-width: 0;}
.tcn-si-package-body-gap {
  border-block: 1px dashed currentColor;
  padding: clamp(.85rem, 2vw, 1.25rem) 0;
  font-size: .85em;
  line-height: 1.55;
  opacity: .85;
}
.tcn-si-package-body-gap p {margin: 0 !important;}

/* Keep long place names readable in narrow article columns on wide screens. */
@container tcn-si (max-width: 560px) {
  .tcn-si-module .tcn-si-items {grid-template-columns:minmax(0,1fr)!important;}
}
