/* A piece of the Isaac app in a post (lib/cms renderAppView): the app's navy
   hero band with its figures, then the chart in the app's colours, the
   caption, and where to see your own. Shared by the article and news pages
   and the admin panel's editor. Colours are the app's (constants/tokens.ts). */
.app-view { margin: 2.25rem 0; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #DCE5E7; box-shadow: 0 1px 2px rgba(13,27,42,0.04), 0 10px 28px rgba(13,27,42,0.07); font-family: var(--font-body, 'Inter', system-ui, sans-serif); text-align: left; }
.app-view .av-head { background: linear-gradient(135deg, #0D1B2A 0%, #15263A 100%); color: #fff; padding: 1.1rem 1.25rem 1.2rem; }
.app-view .av-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.app-view .av-logo { font-family: 'Ultra', serif; color: #00D4FF; font-size: 1.05rem; letter-spacing: 0.5px; line-height: 1; }
.app-view .av-tool { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.66); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 0.2rem 0.55rem; }
.app-view p.av-title { color: #fff; font-size: 1.12rem; font-weight: 600; margin: 0 0 0.3rem; line-height: 1.3; letter-spacing: -0.01em; }
.app-view p.av-sub { color: rgba(255,255,255,0.72); font-size: 0.84rem; margin: 0; line-height: 1.5; }
.app-view .av-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin: 1rem 0 0; }
.app-view .av-fig { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 0.6rem 0.8rem; margin: 0; }
.app-view .av-fig dt { font-size: 0.72rem; color: rgba(255,255,255,0.64); font-weight: 500; margin: 0 0 0.15rem; }
.app-view .av-fig dd { margin: 0; font-size: 1.2rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.25; }
.app-view .av-fig.good dd { color: #4ADE80; }
.app-view .av-fig.warn dd { color: #FBBF24; }
.app-view .av-fig.bad dd { color: #F87171; }
.app-view .av-fig-note { display: block; font-size: 0.7rem; color: rgba(255,255,255,0.56); margin-top: 0.2rem; line-height: 1.35; }
.app-view .av-body { padding: 1rem 1.25rem 0.4rem; }
.app-view .av-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.8rem; color: #3F4A56; margin-bottom: 0.4rem; }
.app-view .av-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.app-view .av-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.app-view .av-key.soft { opacity: 0.35; }
.app-view .av-key-line { width: 16px; height: 0; border-top: 2px solid; display: inline-block; }
.app-view .av-key-line.dashed { border-top-style: dashed; }
.app-view .chart-plot { position: relative; }
.app-view .chart-plot svg { width: 100%; height: auto; display: block; overflow: visible; }
.app-view .cg { stroke: #E6EAEF; stroke-width: 1; }
.app-view .cg.zero { stroke: #C9D2DC; }
.app-view .ct { fill: #5F6B78; font-size: 12px; font-family: inherit; }
.app-view .av-marker { stroke: #5F6B78; stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.75; }
.app-view .av-marker-label { fill: #3F4A56; font-size: 11.5px; font-weight: 600; font-family: inherit; }
.app-view .av-col { fill: transparent; cursor: crosshair; outline: none; }
.app-view .av-col:hover, .app-view .av-col.on { fill: rgba(13,27,42,0.05); }
.app-view .chart-tip { position: absolute; pointer-events: none; background: #0D1B2A; color: #fff; font-size: 0.78rem; font-weight: 500; padding: 0.4rem 0.6rem; border-radius: 8px; max-width: min(320px, 90%); white-space: normal; line-height: 1.45; transform: translate(-50%, calc(-100% - 8px)); box-shadow: 0 6px 18px rgba(13,27,42,0.25); z-index: 2; }
.app-view figcaption.av-caption { padding: 0.35rem 1.25rem 0.95rem; font-size: 0.92rem; color: #3F4A56; line-height: 1.55; margin: 0; }
.app-view .av-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; border-top: 1px solid #EAF1F2; padding: 0.8rem 1.25rem; background: #F6FAFA; }
.app-view .av-foot p { margin: 0; font-size: 0.76rem; color: #5F6B78; line-height: 1.45; flex: 1 1 260px; }
.app-view a.av-cta { background: #0B5394; color: #fff; font-weight: 600; font-size: 0.84rem; padding: 0.55rem 0.95rem; border-radius: 10px; white-space: nowrap; text-decoration: none; }
.app-view a.av-cta:hover { background: #094A86; color: #fff; text-decoration: none; }
.app-view a.av-cta::after { content: " \2192"; }
.app-view .chart-table { padding: 0 1.25rem 0.9rem; font-size: 0.85rem; }
.app-view .chart-table summary { cursor: pointer; color: #0B5394; font-weight: 500; }
.app-view .chart-table .table-wrap { max-height: 320px; overflow: auto; }
.app-view .chart-table .data-table { margin: 0.6rem 0 0; }
@media (max-width: 600px) {
  .app-view .av-head, .app-view .av-body, .app-view .av-foot { padding-left: 1rem; padding-right: 1rem; }
  .app-view figcaption.av-caption, .app-view .chart-table { padding-left: 1rem; padding-right: 1rem; }
  .app-view .av-figures { grid-template-columns: 1fr 1fr; }
  .app-view .av-fig dd { font-size: 1.05rem; }
  .app-view .ct { font-size: 19px; }
  .app-view .av-marker-label { font-size: 18px; }
}