/* One outlet's profile, version 2 (Edmon, 4 Nov 2026: simpler, less text; templates/web/outlet2.html). The group's colour
   comes from .ows-<label> in outlets.css (--side). Link icons are round buttons that sit in their own space. */

.op { padding-bottom: var(--s6); }

/* ---------- at a glance ---------- */
.op-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: var(--s5) 48px; align-items: end;
  padding: var(--s4) 0 var(--s5); border-bottom: 1px solid var(--rule); }
.op-name { margin: 0; font-family: var(--font-serif); font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -.01em; }
.op-site { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s3); color: var(--ink-muted); font-size: 15px;
  text-decoration: none; }
.op-site span { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink-muted) 55%, transparent);
  text-underline-offset: 3px; }
.op-site .icon { width: 14px; height: 14px; flex: none; }
.op-site:hover { color: var(--ink); }
.op-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s4) 0 0; }

.op-verdict { padding: var(--s4); border-radius: var(--radius); background: var(--surface); }
.op-verdict-label { margin: 0 0 10px; color: var(--ink-muted); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.op-verdict-side { margin: 0 0 12px; color: var(--side); font-size: 26px; font-weight: 700; line-height: 1.15; }
.op-scale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; align-items: center; }
.op-seg { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--side) 22%, transparent); }
.op-seg.on { height: 14px; border-radius: var(--radius); background: var(--side); box-shadow: 0 4px 14px color-mix(in srgb, var(--side) 40%, transparent); }
.op-conf { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--ink-muted); font-size: 13px; }
.op-conf b { color: var(--ink); font-weight: 600; }
.op-dots { display: inline-flex; gap: 3px; }
.op-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); }
.op-dots i.on { background: var(--side); }

/* ---------- three numbers ---------- */
.op-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin: var(--s5) 0 0; }
/* one row per tile on every screen (Edmon, 7 Nov 2026: on computers the number sat on the icon and the words): the icon,
   the number, the words, each with its own space */
.op-stat { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 14px 22px 14px 16px; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-decoration: none; transition: background-color .15s ease; }
a.op-stat:hover { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.op-stat .ow-bi { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: var(--radius);
  background: var(--paper); color: var(--side); }
.op-stat .ow-bi .icon { width: 21px; height: 21px; }
.op-stat b { flex: none; min-width: 1.2ch; font-size: 30px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.op-stat span:last-child { min-width: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.35; }
.op-stat span:last-child::first-letter { text-transform: uppercase; }

/* ---------- sections ---------- */
.op-sec { margin-top: 56px; scroll-margin-top: calc(var(--header-h, 64px) + 16px); }
.op-sec-head { margin-bottom: var(--s4); }
.op-sec-head h2 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; }
.op-sec-head p { margin: 6px 0 0; color: var(--ink-muted); font-size: 14.5px; max-width: 62ch; }

/* one fact: the statement, then a quiet line with the source and a round link button in its own space */
.op-facts { list-style: none; margin: 0; padding: 0; }
.op-fact { padding: 16px 0; border-top: 1px solid var(--rule); }
.op-fact:first-child { border-top: 0; padding-top: 4px; }
.op-fact-text { margin: 0; font-size: 16px; line-height: 1.55; max-width: 70ch; }
/* the source line is the quote's opener: the organisation, then two round buttons in their own space (the exact quote, the
   source); no words on the buttons (Edmon, 7 Nov 2026) */
.op-quote > summary.op-fact-src { display: flex; align-items: center; gap: 8px; margin-top: 8px; max-width: 70ch;
  list-style: none; cursor: pointer; }
.op-quote > summary::-webkit-details-marker { display: none; }
.op-fact-org { flex: 1; min-width: 0; color: var(--ink-muted); font-size: 13px; line-height: 1.4; }
.op-iconlink { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius);
  background: var(--surface); color: var(--ink-muted); transition: background-color .15s ease, color .15s ease; }
.op-iconlink:hover, .op-quote[open] .op-qbtn { background: color-mix(in srgb, var(--ink) 10%, var(--surface)); color: var(--ink); }
.op-iconlink .icon { width: 15px; height: 15px; }
.op-quote blockquote { margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--side); background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0; font-size: 14.5px; line-height: 1.55; max-width: 70ch; }

.op-more { margin-top: 4px; border-top: 1px solid var(--rule); }
.op-more > summary, .op-org > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.op-more > summary::-webkit-details-marker, .op-org > summary::-webkit-details-marker { display: none; }
.op-more > summary { justify-content: center; min-height: 48px; color: var(--ink-muted); font-size: 14px; font-weight: 600; }
.op-more > summary:hover { color: var(--ink); }
.op-more > summary .icon, .op-org > summary .icon { width: 16px; height: 16px; flex: none; transition: transform .2s ease; }
.op-more[open] > summary { display: none; }
.op-org[open] > summary .icon { transform: rotate(180deg); }

/* the reports: one organisation per row, the first one open */
.op-orgs { display: flex; flex-direction: column; gap: 10px; }
.op-org { border-radius: var(--radius); background: var(--surface); padding: 0 18px; }
.op-org > summary { min-height: 56px; font-weight: 600; }
.op-org-name { flex: 1; min-width: 0; font-size: 15.5px; line-height: 1.3; padding-block: 12px; }
.op-count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--radius);
  background: var(--paper); color: var(--ink-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.op-org .op-facts { padding-bottom: 8px; }
.op-org .op-fact { border-top-color: color-mix(in srgb, var(--ink) 10%, transparent); }
.op-org .op-iconlink, .op-org .op-quote blockquote { background: var(--paper); }
.op-note { margin: 0 0 8px; color: var(--ink-muted); font-size: 13.5px; }

/* the real headlines: cards; a sideways row on phones */
.op-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.op-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--radius); background: var(--surface);
  border-top: 4px solid var(--side); }
.op-card-fact { margin: 0; color: var(--ink-muted); font-size: 13.5px; line-height: 1.45; }
.op-card-fact span { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; }
.op-card-head { margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.35; font-weight: 600; }
.op-card-head mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--side);
  text-decoration-thickness: 3px; text-underline-offset: 4px; }
.op-card-open { margin: 8px 0 0; color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
.op-card-open mark { background: none; color: var(--ink); text-decoration: underline; text-decoration-color: var(--side);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.op-card-foot .op-iconlink { margin-left: auto; }
.op-card-main time { display: block; margin-bottom: 4px; color: var(--ink-muted); font-size: 12.5px; }
.op-card-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 4px; }
.op-card-foot .ow-kind { white-space: nowrap; }
.op-card .op-iconlink { background: var(--paper); }
.op-after { margin: var(--s4) 0 0; }
.op-pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--rule);
  border-radius: var(--radius); color: var(--ink-muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.op-pill:hover { color: var(--ink); border-color: var(--ink-muted); }

.op .ow-reply { margin-top: 56px; }

/* ---------- tablets and phones ---------- */
@media (max-width: 900px) {
  .op-hero { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 767px) {
  .op-hero { padding-top: var(--s3); }
  /* phones: three slim rows */
  .op-stats { grid-auto-flow: row; grid-template-columns: 1fr; gap: 6px; }
  .op-stat { gap: 12px; min-height: 0; padding: 8px 14px 8px 8px; border-radius: var(--radius); }
  .op-stat .ow-bi { width: 34px; height: 34px; border-radius: var(--radius); }
  .op-stat .ow-bi .icon { width: 17px; height: 17px; }
  .op-stat b { font-size: 20px; min-width: 1.4em; }
  .op-stat span:last-child { font-size: 13.5px; }
  .op-verdict-side { font-size: 22px; }
  .op-sec { margin-top: 44px; }
  .op-cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--side-pad)); padding: 2px var(--side-pad) 6px; scroll-padding-inline: var(--side-pad); }
  .op-cards::-webkit-scrollbar { display: none; }
  .op-card { flex: 0 0 82%; scroll-snap-align: start; }
  .op-fact-text { font-size: 15.5px; }
}

/* every example of one outlet (outlet_examples.html): the same cards in a grid, phones one under the other */
.op-exhead { padding: var(--s4) 0 var(--s5); border-bottom: 1px solid var(--rule); margin-bottom: var(--s5); }
.op-exsub { margin: 10px 0 0; color: var(--ink-muted); font-size: 15px; }
.op-exsub .op-verdict-side { font-size: inherit; font-weight: 700; }
@media (max-width: 767px) {
  .op-cards.op-cards-all { display: grid; grid-template-columns: 1fr; overflow: visible; margin-inline: 0; padding: 0; }
}

/* =====================================================================================================================
   Redesign A (Edmon, 8 Nov 2026): the group box becomes a ruled column, the number tiles one line of links, the example
   cards and report rows separated by rules, the source buttons plain icons, the confidence a word.
   ===================================================================================================================== */
.op-name { font-stretch: var(--head-stretch); font-weight: 700; letter-spacing: -0.025em; }
.op-sec-head h2 { font-family: var(--font-serif); font-stretch: var(--head-stretch); border-top: 3px solid var(--ink); padding-top: 10px; font-size: 1.5rem; }
.op-verdict { padding: 0 0 0 24px; background: none; border-radius: 0; border-left: 1px solid var(--rule); }
.op-seg.on { box-shadow: none; }
.op-line { margin: var(--s5) 0 0; padding: 0 0 var(--s4); border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.6;
  color: var(--ink-muted); }
.op-line a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.op-line a:hover { text-decoration-color: var(--ink); }
.op-line span + span::before, .op-line a + a::before, .op-line span + a::before, .op-line a + span::before {
  content: "/"; margin: 0 .6em; color: var(--rule); }
.op-cards { gap: 28px; }
.op-card { padding: 14px 0 0; background: none; border-radius: 0; border-top: 1px solid var(--rule); }
.op-card .op-iconlink, .op-org .op-iconlink, .op-iconlink { width: 28px; height: 28px; background: none; color: var(--ink-muted); }
.op-iconlink:hover, .op-quote[open] .op-qbtn { background: none; color: var(--ink); }
.op-orgs { gap: 0; }
.op-org { padding: 0; background: none; border-radius: 0; border-top: 1px solid var(--rule); }
.op-org .op-quote blockquote { background: var(--surface); }
.op-pill { min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--ink); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.op-pill:hover { color: var(--ink); text-decoration-thickness: 2px; }
.op-count { background: none; padding: 0; min-width: 0; }
@media (max-width: 767px) {
  .op-verdict { padding: var(--s4) 0 0; border-left: 0; border-top: 1px solid var(--rule); }
}

/* marked words as a highlighter in Median yellow (Edmon, 8 Nov 2026, option 2) */
.op-card-head mark { background: color-mix(in srgb, var(--median-amber) 45%, transparent); text-decoration: none; padding: 0 .08em; }