/* ==========================================================================
   Cyber City · the Journal (theme 0.10.0, step 3.7; round 2 approved by Rayan on 3 Oct 2026, «والمقالات ممتازة").
   An article: B's reading column (the short answer big in the dark head, quick facts, one question after another) and
   the tools of each article drawn as the identity's instruments (controls on top, a dark LED screen with the answer in
   the dot face). The list /journal/: cards and the topics. From the prototypes proto/guides/guides.css (B and the hub)
   and proto/journal/journal.css. Tokens only, classes ecc-/is-.
   ========================================================================== */

/* ---- the column */
.ecc-gd, .ecc-gh { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ecc-gap); }
.ecc-gd > *, .ecc-gh > * { grid-column: 1 / -1; min-width: 0; }
.ecc-gd__label { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; }
.ecc-gd__head { display: grid; gap: var(--ecc-s-4); padding-top: var(--ecc-s-7); }
.ecc-gd__title { max-width: 18em; margin: 0; text-wrap: balance; overflow-wrap: break-word; }
.ecc-gd__meta { margin: 0; color: var(--ecc-ink-2); }
.ecc-gd__answertext { max-width: 40em; margin: 0; font-size: var(--ecc-t-body-lg); line-height: var(--ecc-lh-body); }

/* the head: the drawing, the answer big */
.ecc-gd__head--counter { padding-bottom: var(--ecc-s-6); }
.ecc-gd__head--counter .ecc-arthead__words { max-width: 34em; }
.ecc-gd__answertext--big { font-size: var(--ecc-t-body-lg); color: var(--ecc-ink); }
@media (min-width: 761px) {
  .ecc-gd__head--counter { min-height: calc(var(--ecc-s-9) * 5.2); align-content: end; }
  .ecc-gd__answertext--big { font-size: var(--ecc-t-h3); }
}

/* quick facts */
.ecc-gd__quickwrap { display: grid; gap: var(--ecc-s-3); }
.ecc-gd__quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ecc-gap); margin: 0; padding: 0; list-style: none; }
.ecc-gd__fact { display: grid; gap: var(--ecc-s-1); align-content: start; padding: var(--ecc-s-4); border-radius: var(--ecc-r-sm); background-color: var(--ecc-surface-2); }
.ecc-gd__fact > span { color: var(--ecc-ink-2); }
.ecc-gd__fact strong { font-size: var(--ecc-t-h3); font-weight: var(--ecc-fw-strong); line-height: var(--ecc-lh-heading); }
@media (min-width: 761px) { .ecc-gd__quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1181px) { .ecc-gd__quick { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* the text: one question after another */
.ecc-gd__text { display: grid; gap: var(--ecc-s-4); align-content: start; justify-items: stretch; }
.ecc-gd__text > * { width: 100%; max-width: 46em; margin: 0 auto; }
.ecc-gd__text p { line-height: var(--ecc-lh-body); }
.ecc-gd__qa { display: grid; gap: var(--ecc-s-3); padding-top: var(--ecc-s-6); border-top: 1px solid var(--ecc-line); }
.ecc-gd__qa:first-child { padding-top: 0; border-top: 0; }
.ecc-gd__qa > * { margin: 0; }
.ecc-gd__qa h2 { display: flex; align-items: baseline; gap: var(--ecc-s-3); font-size: var(--ecc-t-h2); font-weight: var(--ecc-fw-display); line-height: var(--ecc-lh-heading); scroll-margin-top: var(--ecc-s-9); }
.ecc-gd__qa ul, .ecc-gd__qa ol { display: grid; gap: var(--ecc-s-2); padding-left: var(--ecc-s-5); line-height: var(--ecc-lh-body); }
.ecc-gd__qa a:not([class]) { color: var(--ecc-ink); text-decoration: underline; text-decoration-color: var(--ecc-spark); text-underline-offset: var(--ecc-s-1); }
.ecc-jt__qn { flex: none; font-size: var(--ecc-t-h2); color: var(--ecc-ink-2); }
/* a source number after a sentence: small, lime, with a 44px tap area that does not move the line */
.ecc-gd__ref { font-family: var(--ecc-f-mono); font-size: var(--ecc-t-micro); line-height: 0; }
.ecc-gd__ref a { position: relative; color: var(--ecc-spark); text-decoration: none; }
.ecc-gd__ref a::after { content: ""; position: absolute; inset: calc((var(--ecc-s-3) + var(--ecc-s-1) / 2) * -1) calc(var(--ecc-s-3) * -1); }
.ecc-gd__ref a:focus-visible { outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset); }

/* sources */
.ecc-gd__sources { display: grid; gap: var(--ecc-s-4); }
.ecc-gd__srclist { display: grid; gap: var(--ecc-s-1); margin: 0; padding: 0; list-style: none; }
.ecc-gd__srclist li { display: flex; align-items: baseline; gap: var(--ecc-s-3); scroll-margin-top: var(--ecc-s-9); }
.ecc-gd__srclist li:target .ecc-gd__srclink { text-decoration-color: var(--ecc-spark); text-decoration-thickness: 2px; }
.ecc-gd__srcn { flex: none; min-width: 2.2em; font-size: var(--ecc-t-h2); color: var(--ecc-spark); }
.ecc-gd__srclink { display: inline-flex; align-items: center; gap: var(--ecc-s-2); min-height: var(--ecc-hit); color: var(--ecc-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: var(--ecc-s-1); overflow-wrap: anywhere; }
.ecc-gd__srclink .ecc-icon { flex: none; color: var(--ecc-ink-2); }
.ecc-gd__note { max-width: 46em; margin: 0; }

/* a person to ask */
.ecc-gd__ask { display: grid; gap: var(--ecc-s-5); align-items: center; overflow: hidden; }
.ecc-gd__asksay { display: grid; gap: var(--ecc-s-2); }
.ecc-gd__asksay > * { margin: 0; }
.ecc-gd__asklead { color: var(--ecc-ink-2); }
.ecc-gd__acts { display: flex; flex-wrap: wrap; gap: var(--ecc-s-3); }
.ecc-gd__acts .ecc-btn { gap: var(--ecc-s-2); }
@media (min-width: 1181px) { .ecc-gd__ask { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---- the instruments */
.ecc-jt__jump { color: inherit; text-decoration: underline; text-decoration-color: var(--ecc-lime); text-underline-offset: var(--ecc-s-1); }
.ecc-jt { display: grid; gap: var(--ecc-s-4); margin: var(--ecc-s-3) 0; padding: var(--ecc-s-4); border: 1px solid var(--ecc-line-strong); border-radius: var(--ecc-r); background: var(--ecc-canvas); }
.ecc-jt__head { display: grid; gap: var(--ecc-s-1); }
.ecc-jt__head > * { margin: 0; }
.ecc-jt__kicker { display: flex; align-items: center; gap: var(--ecc-s-2); color: var(--ecc-ink-2); }
.ecc-jt__controls { display: grid; gap: var(--ecc-s-3); }
.ecc-jt__group { display: grid; gap: var(--ecc-s-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.ecc-jt__group legend, .ecc-jt__group > span { padding: 0; color: var(--ecc-ink-2); }
.ecc-jt__group output { font-family: var(--ecc-f-dot); font-size: var(--ecc-t-h2); font-weight: var(--ecc-fw-dot); color: var(--ecc-ink); }
.ecc-jt__seg { display: flex; flex-wrap: wrap; gap: var(--ecc-s-1); padding: var(--ecc-s-1); border-radius: var(--ecc-r); background: var(--ecc-wash); }
.ecc-jt__seg button { flex: 1 1 auto; min-height: var(--ecc-hit); padding: 0 var(--ecc-s-3); border: 0; border-radius: var(--ecc-r-sm); background: transparent; color: var(--ecc-ink-2); font: inherit; font-weight: var(--ecc-fw-medium); cursor: pointer; transition: background var(--ecc-d-fast) var(--ecc-ease-out), color var(--ecc-d-fast) var(--ecc-ease-out); }
.ecc-jt__seg button[aria-pressed="true"] { background: var(--ecc-selected-bg); color: var(--ecc-selected-fg); }
.ecc-jt__seg button:focus-visible { outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset); }
@media (hover: hover) and (pointer: fine) { .ecc-jt__seg button:hover { color: var(--ecc-ink); } .ecc-jt__seg button[aria-pressed="true"]:hover { color: var(--ecc-selected-fg); } }
.ecc-jt__select { width: 100%; min-height: var(--ecc-hit); padding: 0 var(--ecc-s-3); border: 1px solid var(--ecc-control-line); border-radius: var(--ecc-r-sm); background: var(--ecc-canvas); color: var(--ecc-ink); font: inherit; }
.ecc-jt__select:focus-visible { outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset); }
/* the slider: a hairline track and a square lime thumb (every lit point is a square voxel) */
.ecc-jt__slider input { width: 100%; min-height: var(--ecc-hit); margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ecc-jt__slider input::-webkit-slider-runnable-track { height: 2px; background: var(--ecc-line-strong); }
.ecc-jt__slider input::-moz-range-track { height: 2px; background: var(--ecc-line-strong); }
.ecc-jt__slider input::-webkit-slider-thumb { width: var(--ecc-s-5); height: var(--ecc-s-5); margin-top: calc(var(--ecc-s-3) * -1 + var(--ecc-s-1) / 4); border: 2px solid var(--ecc-ink); border-radius: var(--ecc-r-voxel); background: var(--ecc-lime); -webkit-appearance: none; appearance: none; }
.ecc-jt__slider input::-moz-range-thumb { width: var(--ecc-s-5); height: var(--ecc-s-5); border: 2px solid var(--ecc-ink); border-radius: var(--ecc-r-voxel); background: var(--ecc-lime); }
.ecc-jt__slider input:focus-visible { outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset); }

/* the LED screen: the answer */
.ecc-jt__screen { position: relative; display: grid; gap: var(--ecc-s-2); padding: var(--ecc-s-4) var(--ecc-s-4) var(--ecc-s-4) var(--ecc-s-5); overflow: hidden; border-radius: var(--ecc-r-sm); background: var(--ecc-screen); color: var(--ecc-on-panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ecc-on-panel) 9%, transparent); }
.ecc-jt__screen::before { content: ""; position: absolute; left: var(--ecc-s-2); top: var(--ecc-s-4); width: var(--ecc-s-1); height: var(--ecc-s-1); border-radius: var(--ecc-r-voxel); background: var(--ecc-lime); box-shadow: 0 0 var(--ecc-s-2) color-mix(in srgb, var(--ecc-lime) 55%, transparent); }
.ecc-jt__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: conic-gradient(at 2px 2px, transparent 75%, color-mix(in srgb, var(--ecc-on-panel) 6%, transparent) 0); background-size: var(--ecc-s-2) var(--ecc-s-2); }
.ecc-jt__read { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ecc-s-1) var(--ecc-s-3); margin: 0; }
.ecc-jt__big { font-size: var(--ecc-t-display); line-height: 1; color: var(--ecc-lime); }
.ecc-jt__unit { color: color-mix(in srgb, var(--ecc-on-panel) 70%, transparent); }
.ecc-jt__line { position: relative; z-index: var(--ecc-z-raised); max-width: 40em; margin: 0; font-size: var(--ecc-t-body); line-height: 1.45; }
.ecc-jt__line .ecc-link { color: var(--ecc-on-panel); text-decoration-color: var(--ecc-lime); }
.ecc-jt__src { margin: 0; color: var(--ecc-ink-2); }
/* a new answer: the screen powers on again, once (the identity's power-on, calm) */
@media (prefers-reduced-motion: no-preference) {
  .ecc-jt.is-new .ecc-jt__big { animation: ecc-jt-on var(--ecc-d-slow) var(--ecc-ease-pixel); }
}
html[data-ecc-motion="paused"] .ecc-jt.is-new .ecc-jt__big { animation: none; }
@keyframes ecc-jt-on { from { opacity: .2; } }

/* where a ride sits: two zones on a scale of watts, and a voxel marker */
.ecc-jt__scale { position: relative; display: grid; grid-template-columns: 32% minmax(0, 1fr); margin-top: var(--ecc-s-2); padding-bottom: var(--ecc-s-4); }
.ecc-jt__zone { padding: var(--ecc-s-2); font-family: var(--ecc-f-mono); font-size: var(--ecc-t-micro); text-transform: uppercase; }
.ecc-jt__zone--ok { border-bottom: 2px solid var(--ecc-spark); }
.ecc-jt__zone--over { border-bottom: 2px solid var(--ecc-danger-fg); text-align: right; }
.ecc-jt__marker { position: absolute; bottom: 0; left: 0; width: var(--ecc-s-3); height: var(--ecc-s-3); border-radius: var(--ecc-r-voxel); background: var(--ecc-ink); translate: -50% 0; transition: left var(--ecc-d-slow) var(--ecc-ease-out); }

/* the checklist */
.ecc-jt__checks { display: grid; margin: 0; padding: 0; list-style: none; }
.ecc-jt__checks li { border-top: 1px solid var(--ecc-line); }
.ecc-jt__checks .ecc-check { min-height: var(--ecc-hit); padding: var(--ecc-s-1) 0; }

/* without JavaScript the tools cannot answer: the article stays whole without them */
html:not(.ecc-js) .ecc-jt, html:not(.ecc-js) .ecc-jt__jumpwrap { display: none; }

@media (min-width: 761px) {
  .ecc-jt { padding: var(--ecc-s-5); }
  .ecc-jt__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecc-jt__controls--one { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ecc-jt__seg button, .ecc-jt__marker { transition: none; } }

/* ---- the list /journal/ */
.ecc-gh__head { display: grid; gap: var(--ecc-s-4); padding-top: var(--ecc-s-7); padding-bottom: var(--ecc-s-6); }
.ecc-gh__title { margin: 0; }
.ecc-gh__lead { max-width: 32em; margin: 0; }
.ecc-gh__main { display: grid; gap: var(--ecc-s-5); }
.ecc-gh__topics { display: flex; flex-wrap: wrap; gap: var(--ecc-s-2); }
.ecc-gh__list { display: grid; gap: var(--ecc-gap); margin: 0; padding: 0; list-style: none; }
.ecc-gh__card { position: relative; display: grid; gap: var(--ecc-s-3); align-content: start; min-height: 100%; padding: var(--ecc-s-5); border-radius: var(--ecc-r); background-color: var(--ecc-surface-2); }
.ecc-gh__card > * { margin: 0; }
.ecc-gh__name a { color: var(--ecc-ink); text-decoration: none; }
.ecc-gh__name a::after { content: ""; position: absolute; inset: 0; } /* the whole card is the link */
.ecc-gh__name a:focus-visible { outline: none; }
.ecc-gh__card:has(a:focus-visible) { outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset); }
@media (hover: hover) and (pointer: fine) { .ecc-gh__card:hover .ecc-gh__name a { text-decoration: underline; text-decoration-color: var(--ecc-spark); text-underline-offset: var(--ecc-s-1); } }
.ecc-gh__answer { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--ecc-ink-2); line-height: var(--ecc-lh-body); }
.ecc-gh__meta { color: var(--ecc-ink-2); }
.ecc-gh__none { margin: 0; }
@media (min-width: 761px) { .ecc-gh__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1181px) { .ecc-gh__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }