/* BerdisDev journal: article extras, diagrams and covers.
   Works in both directions: everything uses logical properties. */

/* ---------- article text ---------- */
.article-grid > *, .article-body { min-width: 0; }
@media (max-width: 760px) { html .article-body code { white-space: normal; overflow-wrap: anywhere; } html .article-body .j-table code { white-space: nowrap; overflow-wrap: normal; } }
.article-body > h3, .article-body .j-qa h3 { font-family: var(--display); font-weight: 400; font-size: clamp(21px, 2.3vw, 26px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin-top: 6px; }
.article-body a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 28%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.article-body a:hover { text-decoration-color: var(--ink); }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .86em; padding: 2px 7px; border-radius: 7px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.article-body pre, .article-body .j-code { direction: ltr; text-align: left; }

.article-body ul.j-list { display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; list-style: none; }
.article-body ul.j-list > li { display: block; position: relative; padding-inline-start: 24px; font-size: 17px; line-height: 1.6; color: var(--soft); }
.article-body ul.j-list > li::before { content: ""; position: absolute; inset-inline-start: 4px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .55; }

.article-body > ol { display: flex; flex-direction: column; gap: 16px; padding: 0; margin: 0; list-style: none; counter-reset: j-step; }
.article-body > ol > li { counter-increment: j-step; position: relative; padding-inline-start: 50px; min-height: 34px; font-size: 17px; line-height: 1.6; color: var(--soft); }
.article-body > ol > li::before { content: counter(j-step); position: absolute; inset-inline-start: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-soft); font-family: var(--display); font-size: 15px; color: var(--ink); }

/* tables */
.j-table { overflow-x: auto; margin: 6px 0; border-radius: 22px; border: 1px solid var(--line); background: var(--card); -webkit-overflow-scrolling: touch; }
.j-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.j-table th { padding: 14px 16px; text-align: start; font-weight: 600; font-size: 14px; color: var(--ink); background: var(--panel); border-bottom: 1px solid var(--line); white-space: nowrap; }
.j-table td { padding: 14px 16px; text-align: start; vertical-align: top; color: var(--soft); border-bottom: 1px solid var(--line); }
.j-table tr:last-child td { border-bottom: 0; }
.j-table td:first-child { color: var(--ink); font-weight: 500; }
.j-table code { white-space: normal; }
.j-scroll-hint { display: none; font-size: 13px; color: var(--faint); margin-top: -2px; }
@media (max-width: 760px) { .j-scroll-hint { display: block; } }

/* tip and quick answer */
.tip .j-tip-in { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tip .j-tip-t { font-family: var(--display); font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
.article-body .tip p { font-size: 16px; line-height: 1.6; }
.tip.j-quick { background: var(--card); border-color: color-mix(in srgb, var(--ink) 16%, transparent); box-shadow: var(--shadow-soft); }
.tip.j-quick .ic { background: var(--ink); color: var(--ground); }
.tip.j-quick .j-tip-t { font-size: 15px; font-family: var(--body); font-weight: 600; letter-spacing: 0; text-transform: none; }
.tip.j-quick p { color: var(--ink); font-size: 17px; }

/* FAQ */
.j-faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.j-qa { display: flex; flex-direction: column; gap: 10px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.article-body .j-qa h3 { font-size: clamp(19px, 2vw, 22px); margin: 0; }
.article-body .j-qa p { font-size: 17px; }

/* sources */
.j-sources { margin-top: 12px; padding: 18px 22px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); }
.j-sources summary { cursor: pointer; font-size: 15px; font-weight: 500; color: var(--ink); }
.j-sources ol { margin: 14px 0 4px; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; }
.j-sources li { font-size: 14px; line-height: 1.5; color: var(--soft); }
.article-body .j-sources a { overflow-wrap: anywhere; }

.j-updated { font-size: 14px; color: var(--faint); }

/* ---------- diagrams ---------- */
.j-fig { margin: 10px 0; }
.j-viz { display: flex; flex-direction: column; gap: 22px; padding: clamp(18px, 3.2vw, 34px); border-radius: 28px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 60px -48px rgba(16, 19, 31, .35); color: var(--ink); }
.j-viz, .j-viz * { box-sizing: border-box; }
.article-body .j-viz p { font-size: 14.5px; line-height: 1.5; color: var(--soft); margin: 0; }
.article-body .j-viz ul, .article-body .j-viz ol { display: block; margin: 0; padding: 0; list-style: none; gap: 0; font-size: inherit; }
.article-body .j-viz li { display: block; gap: 0; }
.j-viz-head { display: flex; flex-direction: column; gap: 6px; }
.j-viz-kick { font-size: 13px; color: var(--faint); }
.j-viz-title { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.15; letter-spacing: -0.025em; color: var(--ink); }
.j-viz-foot { font-size: 12.5px; line-height: 1.55; color: var(--faint); border-top: 1px dashed var(--line); padding-top: 14px; }
.j-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: 0; direction: ltr; unicode-bidi: isolate; }
.j-hl-mark { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--mark, #ffd9c6) 90%, transparent) 58%); padding: 0 2px; }
html[dir="rtl"] .j-viz-title { font-family: var(--display-ar); letter-spacing: 0; line-height: 1.35; }

/* vertical track (steps) */
.j-track { position: relative; display: flex; flex-direction: column; }
.j-track::before { content: ""; position: absolute; inset-inline-start: 19px; top: 24px; bottom: 24px; width: 2px; background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 11px); }
.j-end { position: relative; display: flex; align-items: center; gap: 14px; padding: 4px 0; font-size: 14px; color: var(--soft); }
.j-end i { flex: 0 0 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.j-end i::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); }
.j-end.j-end-last i::before { background: var(--acc); border-color: var(--acc); }
.j-end b { font-weight: 600; color: var(--ink); }
.j-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.08fr); gap: 12px 20px; padding: 16px 0; }
.j-row + .j-row { border-top: 1px solid var(--line); }
.j-row-n { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--acc); color: #fff; font-family: var(--display); font-size: 17px; z-index: 1; }
.j-row-main { display: flex; flex-direction: column; gap: 6px; padding-top: 7px; }
.j-row-name { font-family: var(--display); font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; }
.j-breaks { border-radius: 16px; padding: 12px 14px; background: color-mix(in srgb, var(--bad) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--bad) 22%, transparent); }
.j-breaks-t { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--bad); margin-bottom: 8px; }
.j-breaks-t::before { content: ""; width: 14px; height: 2px; background: currentColor; border-radius: 2px; transform: rotate(-45deg); box-shadow: 0 0 0 0 currentColor; }
.j-breaks li { position: relative; padding-inline-start: 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.j-breaks li + li { margin-top: 7px; }
.j-breaks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); }
.j-breaks .j-mono { display: block; margin-top: 2px; font-size: 11.5px; color: var(--soft); }
@media (max-width: 680px) {
  .j-row { grid-template-columns: 40px minmax(0, 1fr); }
  .j-breaks { grid-column: 2; }
}

/* decision lanes (tree) */
.j-root { align-self: center; max-width: 520px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 22px; border-radius: 20px; background: var(--ink); color: var(--ground); }
.j-root .j-mono { font-size: 15px; padding: 6px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ground) 14%, transparent); }
.j-root span { font-size: 14px; color: color-mix(in srgb, var(--ground) 72%, transparent); }
.j-root b { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: -0.02em; }
.j-lanes { position: relative; display: grid; align-items: start; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 26px; margin-top: -8px; }
.j-lanes::before { content: ""; position: absolute; top: 0; inset-inline: calc(100% / 6); height: 26px; border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); border-bottom: 0; border-radius: 16px 16px 0 0; }
.j-lanes::after { content: ""; position: absolute; top: -8px; left: 50%; width: 1.5px; height: 34px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.j-lane { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
.j-lane-a { align-self: flex-start; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.j-lane-note { font-family: var(--display); font-size: 17px; line-height: 1.25; letter-spacing: -0.015em; }
.j-ask { font-size: 13.5px; line-height: 1.4; color: var(--soft); padding-inline-start: 10px; border-inline-start: 2px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.j-ask b { color: var(--ink); font-weight: 600; }
.j-leaf { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.j-leaf .j-if { font-size: 12px; line-height: 1.35; color: var(--bad); font-weight: 600; }
.j-leaf .j-if.j-mono { font-weight: 500; }
.j-leaf .j-fix { position: relative; padding-inline-start: 16px; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.j-leaf .j-fix::before { content: "\2192"; position: absolute; inset-inline-start: 0; color: var(--acc); font-weight: 600; }
html[dir="rtl"] .j-leaf .j-fix::before { content: "\2190"; }
.j-leaf.j-ok .j-if { color: var(--acc); }
@media (max-width: 760px) {
  .j-lanes { grid-template-columns: 1fr; padding-top: 0; margin-top: 0; }
  .j-lanes::before, .j-lanes::after { display: none; }
}

/* yes / no rows */
.j-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--soft); }
.j-legend span { display: inline-flex; align-items: center; gap: 8px; }
.j-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.j-dec { counter-reset: j-q; display: flex; flex-direction: column; gap: 10px; }
.j-q { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px 14px; padding: 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); }
.j-q-n { width: 34px; height: 34px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); font-family: var(--display); font-size: 16px; }
.j-q-text { font-family: var(--display); font-size: 18px; line-height: 1.3; letter-spacing: -0.015em; padding-top: 5px; }
.j-q-ans { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.j-ans { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); border-inline-start: 4px solid var(--c, var(--line)); font-size: 14px; line-height: 1.35; }
.j-ans b { font-size: 11.5px; font-weight: 600; color: var(--faint); letter-spacing: .04em; text-transform: uppercase; }
.j-ans small { font-size: 12px; color: var(--soft); }
.j-ans.j-next { border-inline-start-color: color-mix(in srgb, var(--ink) 25%, transparent); color: var(--soft); }
@media (max-width: 560px) { .j-q-ans { grid-template-columns: 1fr; grid-column: 1 / -1; } }

/* stacked bars */
.j-bars { display: flex; flex-direction: column; gap: 22px; }
.j-bar-row { display: flex; flex-direction: column; gap: 8px; }
.j-bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; }
.j-bar-top b { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: -0.02em; white-space: nowrap; }
.j-bar-track { position: relative; height: 24px; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: calc(100% / 3) 100%; background-repeat: repeat-x; }
.j-bar { display: flex; gap: 2px; height: 24px; }
.j-bar span { height: 100%; flex: 0 0 auto; width: var(--s); background: var(--c); }
.j-bar span:last-child { border-radius: 0 4px 4px 0; }
.j-bar-sub { font-size: 12.5px; color: var(--soft); }
.j-axis { position: relative; height: 18px; font-size: 11.5px; color: var(--faint); border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.j-axis span { position: absolute; top: 4px; transform: translateX(-50%); }
.j-axis span:first-child { transform: none; }
.j-axis span:last-child { transform: translateX(-100%); }
.j-callout { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #c98a2b 10%, var(--card)); font-size: 14px; line-height: 1.45; }

/* two pages linked (hreflang) */
.j-pair { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: stretch; gap: 10px; }
.j-page { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.j-page-t { font-family: var(--display); font-size: 18px; letter-spacing: -0.01em; }
html[dir="rtl"] .j-page-t { font-family: var(--display-ar); letter-spacing: 0; }
.j-page .j-mono { display: block; font-size: 11.5px; color: var(--soft); overflow-wrap: anywhere; }
.j-mock { display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.j-mock i { display: block; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.j-mock .j-mock-h { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.j-mock .j-mock-btn { align-self: flex-start; font-size: 11.5px; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--ground); }
.j-tags { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #151a2b; color: #dfe6ff; direction: ltr; text-align: left; }
.j-tags .j-mono { color: #dfe6ff; font-size: 11.5px; }
.j-tags .j-mono em { font-style: normal; color: #ffc9a8; }
.j-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 12.5px; line-height: 1.35; color: var(--soft); }
.j-link svg { color: var(--acc); }
.j-visitor { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); font-size: 14px; }
.j-visitor .j-mono { padding: 3px 8px; border-radius: 8px; background: var(--ink); color: var(--ground); font-size: 12px; }
.j-warn { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--ink); padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--bad) 8%, var(--card)); }
.j-warn::before { content: "!"; flex: 0 0 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; }
@media (max-width: 680px) {
  .j-pair { grid-template-columns: 1fr; }
  .j-link { flex-direction: row; padding: 4px 0; }
  .j-link svg { transform: rotate(90deg); }
}

/* two columns checklist */
.j-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.j-col { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); }
.j-col-h { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 20px; margin-bottom: 6px; }
html[dir="rtl"] .j-col-h { font-family: var(--display-ar); }
.j-col-h i { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--c); color: #fff; }
.j-item { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 0; font-size: 14.5px; line-height: 1.4; }
.j-item + .j-item { border-top: 1px solid var(--line); }
.j-ico { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.j-item .j-mono { display: inline-block; margin-top: 3px; font-size: 12px; color: var(--soft); }
@media (max-width: 620px) { .j-cols { grid-template-columns: 1fr; } }

/* ---------- covers ---------- */
.j-cover { position: relative; overflow: hidden; display: grid; gap: 18px; padding: clamp(18px, 3.4vw, 44px); border-radius: 36px; background: var(--tint-b); }
.j-cover .frame { box-shadow: var(--shadow); }
.j-cover .frame-bar span { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.j-cover-cap { position: absolute; inset-inline-end: 22px; bottom: 16px; font-size: 12px; color: var(--soft); }
.j-sk { display: block; height: 8px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 11%, transparent); }

/* cover: google */
.j-cv-g { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
.j-cv-search { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin: 20px 20px 0; border-radius: 999px; border: 1px solid var(--line); box-shadow: 0 8px 20px -14px rgba(16, 19, 31, .4); }
.j-cv-search .j-mono { font-size: 15px; color: var(--ink); }
.j-cv-search .j-caret { width: 2px; height: 18px; background: var(--ink); animation: bd-caret 1.1s steps(1) infinite; }
.j-cv-res { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 24px; }
.j-cv-meta { font-size: 12.5px; color: var(--faint); }
.j-cv-ghost { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.j-cv-ghost em { font-style: normal; font-family: var(--display); font-size: 18px; color: var(--soft); letter-spacing: -0.01em; }
.j-cv-other { display: flex; flex-direction: column; gap: 7px; opacity: .55; }
.j-cv-steps { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.j-cv-steps b { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: -0.015em; margin-bottom: 4px; }
.j-cv-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--panel); font-size: 14.5px; }
.j-cv-step i { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 14px; color: #fff; background: #2f6f5a; }
.j-cv-step.j-bad { background: color-mix(in srgb, #b3432f 9%, var(--card)); }
.j-cv-step.j-bad i { background: #b3432f; }
.j-cv-step.j-off { color: var(--faint); }
.j-cv-step.j-off i { background: color-mix(in srgb, var(--ink) 18%, transparent); }
.j-cv-step small { display: block; font-size: 11.5px; color: #b3432f; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
@media (max-width: 760px) { .j-cv-g { grid-template-columns: 1fr; } }

/* cover: two stores */
.j-cv-two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.j-cv-two > div { display: flex; flex-direction: column; }
.j-cv-two > div > .frame { flex: 1; }
.j-cv-lab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 14px; font-weight: 500; }
.j-cv-lab span:last-child { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: -0.02em; }
.j-cv-shop { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.j-cv-nav { display: flex; align-items: center; gap: 10px; }
.j-cv-nav .j-dot { width: 18px; height: 18px; border-radius: 6px; background: var(--ink); }
.j-cv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.j-cv-prod { display: flex; flex-direction: column; gap: 5px; }
.j-cv-prod div { aspect-ratio: 5 / 4; border-radius: 10px; background: var(--c); }
.j-cv-prod span { font-size: 11px; color: var(--soft); }
.j-cv-blog { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; }
.j-cv-post { display: flex; flex-direction: column; gap: 7px; }
.j-cv-post .j-cv-img { height: 96px; border-radius: 10px; background: var(--c); }
.j-cv-side { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 10px; background: var(--panel); }
.j-cv-side small { font-size: 11px; font-weight: 600; }
.j-cv-mini { display: grid; grid-template-columns: 30px 1fr; gap: 6px; align-items: center; font-size: 10.5px; color: var(--soft); }
.j-cv-mini div { width: 30px; height: 30px; border-radius: 8px; background: var(--c); }
.j-cv-note { grid-column: 1 / -1; justify-self: center; font-size: 13px; color: var(--soft); padding: 7px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); text-align: center; }
@media (max-width: 640px) { .j-cv-two { grid-template-columns: 1fr; } }

/* cover: one page, two languages */
.j-cv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); position: relative; }
.j-cv-half { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 24px; min-width: 0; }
.j-cv-half + .j-cv-half { border-inline-start: 1px dashed var(--line); }
.j-cv-half .j-cv-nav { justify-content: space-between; }
.j-cv-half .j-cv-links { display: flex; gap: 8px; }
.j-cv-half .j-cv-links i { display: block; width: 26px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.j-cv-half h4 { margin: 8px 0 0; font-weight: 500; font-size: clamp(17px, 2.2vw, 24px); line-height: 1.25; color: var(--ink); }
.j-cv-half[lang="en"] h4 { font-family: var(--display); font-weight: 400; letter-spacing: -0.02em; }
.j-cv-half[lang="ar"] h4 { font-family: var(--display-ar, "IBM Plex Sans Arabic"), sans-serif; }
.j-cv-half .j-cv-btn { align-self: flex-start; font-size: 12px; padding: 7px 13px; border-radius: 999px; background: var(--ink); color: var(--ground); }
.j-cv-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-soft); font-size: 12px; direction: ltr; z-index: 2; }
.j-cv-badge svg { color: #1f5f63; }
@media (max-width: 640px) {
  .j-cv-split { grid-template-columns: 1fr; }
  .j-cv-half + .j-cv-half { border-inline-start: 0; border-top: 1px dashed var(--line); }
}

/* ---------- added 2026-09-28: flow rows, factor cards, wireframe, freight and map covers ---------- */
.j-row.j-row-2 { grid-template-columns: 40px minmax(0, 1fr); }
html[dir="rtl"] .j-row-name { font-family: var(--display-ar); letter-spacing: 0; line-height: 1.3; font-size: 20px; }
.j-row-note { align-self: flex-start; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink); padding: 8px 11px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--acc) 24%, transparent); }
.j-row-note .j-mono { font-size: 12px; }

/* three factor cards */
.j-factors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.j-factor { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--c); }
.j-factor-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.j-factor-h b { font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: -0.02em; }
html[dir="rtl"] .j-factor-h b { font-family: var(--display-ar); letter-spacing: 0; font-weight: 500; font-size: 19px; }
.j-pill { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--c); color: #fff; white-space: nowrap; }
.j-factor-q { font-size: 13.5px; line-height: 1.5; color: var(--soft); }
.j-factor-do { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--line); }
.j-factor-do small { font-size: 11.5px; font-weight: 600; color: var(--faint); }
.j-factor-do span { position: relative; padding-inline-start: 14px; font-size: 13.5px; line-height: 1.4; }
.j-factor-do span::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
@media (max-width: 760px) { .j-factors { grid-template-columns: 1fr; } }

/* annotated wireframe */
.j-wf { border-radius: 18px; border: 1px solid var(--line); background: var(--card); overflow: hidden; box-shadow: var(--shadow-soft); }
.j-wf-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--soft); }
.j-wf-logo { width: 26px; height: 26px; border-radius: 8px; background: var(--ink); flex: 0 0 26px; }
.j-wf-links { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.j-wf-end { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.j-wf-track { font-weight: 600; color: var(--acc); }
.j-wf-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 18px; }
.j-wf-h { font-family: var(--display); font-size: clamp(20px, 2.6vw, 28px); line-height: 1.15; letter-spacing: -0.02em; max-width: 540px; }
.j-wf-cta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: 13.5px; }
.j-wf-btn { padding: 9px 16px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 13.5px; font-weight: 600; }
.j-wf-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.j-wf-chips span { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
.j-wf-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--soft); }
.j-wf-cred { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 18px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--soft); background: var(--panel); }
.j-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: var(--ink); color: var(--ground); font-size: 11px; font-weight: 600; font-style: normal; }
.j-notes, .article-body .j-viz .j-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.article-body .j-viz .j-notes li, .j-notes li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
@media (max-width: 620px) { .j-notes, .article-body .j-viz .j-notes { grid-template-columns: 1fr; } }

/* cover: freight site + quote form */
.j-cv-freight { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; }
.j-cv-freight .j-wf { border: 0; border-radius: 0; box-shadow: none; }
.j-cv-form { display: flex; flex-direction: column; gap: 9px; padding: 18px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.j-cv-form b { font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: -0.015em; margin-bottom: 2px; }
.j-cv-field { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--faint); min-width: 0; }
.j-cv-in { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--field, var(--panel)); font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-cv-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.j-cv-send { text-align: center; margin-top: 4px; padding: 10px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 13.5px; font-weight: 600; }
@media (max-width: 760px) { .j-cv-freight { grid-template-columns: 1fr; } }

/* cover: map pin + branch page */
.j-cv-map { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.j-map { position: relative; min-height: 320px; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow);
  background:
    linear-gradient(90deg, transparent 0 28%, #fff 28% 31%, transparent 31% 68%, #fff 68% 70%, transparent 70%),
    linear-gradient(0deg, transparent 0 38%, #fff 38% 42%, transparent 42% 76%, #fff 76% 78%, transparent 78%),
    linear-gradient(32deg, transparent 0 56%, #fff 56% 58.5%, transparent 58.5%),
    #e8ecf0; }
.j-map-park { position: absolute; top: 8%; inset-inline-start: 36%; width: 26%; height: 22%; border-radius: 14px; background: #d6e6d3; }
.j-map-pin { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -100%); color: var(--acc); filter: drop-shadow(0 8px 10px rgba(16, 19, 31, .25)); }
.j-cv-biz { position: absolute; inset-inline: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-soft); }
.j-cv-biz-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 15px; }
.j-cv-ok { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 14%, var(--card)); color: var(--acc); font-weight: 600; white-space: nowrap; }
.j-stars { display: flex; align-items: center; gap: 3px; }
.j-stars i { width: 12px; height: 12px; background: #c98a2b; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.j-cv-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.j-cv-acts span { font-size: 11.5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); }
.j-cv-acts span:first-child { background: var(--acc); border-color: var(--acc); color: #fff; }
.j-cv-branch { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 22px; }
.j-cv-branch h4 { margin: 4px 0 0; font-family: var(--display-ar, "IBM Plex Sans Arabic"), sans-serif; font-weight: 500; font-size: clamp(18px, 2.2vw, 24px); color: var(--ink); }
.j-cv-kv { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12.5px; color: var(--soft); }
.j-cv-kv + .j-cv-kv { padding-top: 8px; border-top: 1px solid var(--line); }
.j-cv-branch .j-cv-btn { align-self: flex-start; font-size: 12px; padding: 7px 13px; border-radius: 999px; background: var(--ink); color: var(--ground); }
@media (max-width: 640px) { .j-cv-map { grid-template-columns: 1fr; } .j-map { min-height: 280px; } }

/* ---------- added 2026-09-28 (run 3): project page, phases, redirect map, quote document, covers ---------- */
.j-wf-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.j-wf-facts span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; font-size: 13px; line-height: 1.3; }
.j-wf-facts span + span { border-inline-start: 1px solid var(--line); }
.j-wf-facts small { font-size: 11px; color: var(--faint); }
.j-wf-photos { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; padding: 14px 18px 0; }
.j-wf-photos > div { display: grid; gap: 8px; }
.j-ph { display: flex; align-items: flex-end; min-height: 64px; padding: 8px 10px; border-radius: 10px; font-size: 11.5px; color: var(--soft); background: repeating-linear-gradient(135deg, var(--panel) 0 10px, color-mix(in srgb, var(--ink) 5%, var(--panel)) 10px 20px); border: 1px solid var(--line); }
.j-ph.j-ph-big { min-height: 150px; }
.j-wf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 18px; }
.j-wf-block { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.j-wf-block.j-dash { border-style: dashed; font-weight: 400; color: var(--soft); }
@media (max-width: 640px) {
  .j-wf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .j-wf-facts span + span { border-inline-start: 0; }
  .j-wf-facts span { border-bottom: 1px solid var(--line); }
  .j-wf-photos, .j-wf-pair { grid-template-columns: 1fr; }
}
.j-banner { padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; background: color-mix(in srgb, var(--acc) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--acc) 24%, transparent); }
.j-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.j-chk { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid color-mix(in srgb, var(--c, var(--ink)) 55%, transparent); background: var(--card); }
.j-item.j-item-s { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 7px 0; font-size: 14px; }

/* three phases (timeline) */
.j-phases { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.j-phase { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
.j-phase.j-phase-on { background: color-mix(in srgb, var(--acc) 7%, var(--card)); border-color: color-mix(in srgb, var(--acc) 30%, transparent); }
.j-phase-h { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.j-phase-h b { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: -0.02em; }
.j-phase-h small { font-size: 12px; color: var(--faint); }
.article-body .j-viz ol.j-steps, ol.j-steps { counter-reset: j-s; display: flex; flex-direction: column; gap: 8px; }
.j-steps li { counter-increment: j-s; position: relative; padding-inline-start: 28px; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.j-steps li::before { content: counter(j-s); position: absolute; inset-inline-start: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; background: var(--acc); color: #fff; }
.j-steps li small { display: block; font-size: 11.5px; color: var(--soft); }
@media (max-width: 760px) { .j-phases { grid-template-columns: 1fr; } }

/* redirect map rows */
.j-redir { display: flex; flex-direction: column; gap: 8px; }
.j-rd { display: grid; grid-template-columns: minmax(0, 1.2fr) 22px minmax(0, 1.2fr) 70px minmax(0, 1.3fr); align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-inline-start: 4px solid var(--c); font-size: 13px; }
.j-rd .j-mono { font-size: 12px; overflow-wrap: anywhere; }
.j-rd-arrow { color: var(--faint); text-align: center; }
.j-rd-code { justify-self: start; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); direction: ltr; }
.j-rd-v { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.j-rd-v b { font-size: 11px; letter-spacing: .04em; color: var(--c); }
.j-rd-head { display: grid; grid-template-columns: minmax(0, 1.2fr) 22px minmax(0, 1.2fr) 70px minmax(0, 1.3fr); gap: 10px; padding: 0 16px; font-size: 11.5px; color: var(--faint); }
@media (max-width: 700px) {
  .j-rd-head { display: none; }
  .j-rd { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); }
  .j-rd-code { grid-column: 1; }
  .j-rd-v { grid-column: 1 / -1; }
}

/* quote document */
.j-doc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.j-doc { display: flex; flex-direction: column; gap: 0; padding: 18px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.j-doc-top { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 2px solid var(--ink); font-size: 12px; color: var(--soft); }
.j-doc-top b { font-size: 15px; color: var(--ink); }
.j-doc-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.j-doc-row > span { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.j-doc-row.j-key { background: color-mix(in srgb, var(--acc) 9%, var(--card)); margin-inline: -8px; padding-inline: 8px; border-radius: 8px; }
.j-doc-total { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; font-size: 13px; font-weight: 600; }
@media (max-width: 700px) { .j-doc-wrap { grid-template-columns: 1fr; } }

/* cover: building + project page */
.j-cv-build { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); align-items: end; }
.j-bldg { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-self: center; width: min(100%, 230px); }
.j-bldg-roof { height: 14px; margin-inline: 10px; background: color-mix(in srgb, var(--acc) 70%, #10131f); border-radius: 4px 4px 0 0; }
.j-bldg-body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; padding: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.j-bldg-body i { height: 26px; border-radius: 3px; background: color-mix(in srgb, var(--acc) 22%, var(--panel)); }
.j-bldg-body i.j-door { grid-column: 2 / 4; height: 40px; background: color-mix(in srgb, var(--acc) 60%, var(--ink)); }
.j-bldg-ground { height: 10px; margin-inline: -24px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.j-cv-badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 18px; }
.j-cv-badges span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--acc) 28%, transparent); }
.j-cv-badges span::before { content: "\2713"; font-weight: 700; color: var(--acc); }
@media (max-width: 760px) { .j-cv-build { grid-template-columns: 1fr; } }

/* cover: old site to new site with 301s */
.j-cv-301 { grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr); align-items: center; }
.j-cv-301 .frame { align-self: stretch; }
.j-cv-urls { display: flex; flex-direction: column; gap: 9px; padding: 16px; }
.j-cv-urls span { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; }
.j-cv-urls.j-new span { background: color-mix(in srgb, var(--acc) 8%, var(--card)); border-color: color-mix(in srgb, var(--acc) 28%, transparent); }
.j-cv-arrows { display: flex; flex-direction: column; gap: 9px; align-items: center; padding-top: 38px; }
.j-cv-arrows span { height: 35px; display: flex; align-items: center; font-size: 11px; font-weight: 700; color: var(--acc); }
.j-cv-rank { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-soft); font-size: 12.5px; color: var(--soft); }
.j-cv-rank svg { flex: 1 1 0; width: 100%; min-width: 0; color: var(--acc); }
@media (max-width: 640px) {
  .j-cv-301 { grid-template-columns: minmax(0, 1fr); }
  .j-cv-arrows { flex-direction: row; justify-content: center; padding-top: 0; }
  .j-cv-arrows span { height: auto; }
}

/* cover: three stores */
.j-cv-three { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.j-cv-three .j-cv-shop { padding: 12px; gap: 10px; }
.j-cv-three .j-cv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.j-cv-store-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.j-cv-store-t small { font-size: 11px; font-weight: 500; color: var(--soft); }
.j-cv-scale { grid-column: 1 / -1; justify-self: center; display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-size: 13px; color: var(--soft); }
@media (max-width: 640px) { .j-cv-three { grid-template-columns: 1fr; } .j-cv-three > div:nth-child(n+2) .j-cv-grid { display: none; } }

/* cover: quote document + skyline */
.j-cv-docv { grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: 360px; align-content: center; }
.j-sky { position: absolute; inset-inline: 0; bottom: 0; height: 46%; background:
  linear-gradient(to top, color-mix(in srgb, var(--acc) 22%, transparent) 0 100%) 6% 100% / 7% 55% no-repeat,
  linear-gradient(to top, color-mix(in srgb, var(--acc) 16%, transparent) 0 100%) 15% 100% / 5% 80% no-repeat,
  linear-gradient(to top, color-mix(in srgb, var(--acc) 26%, transparent) 0 100%) 23% 100% / 8% 45% no-repeat,
  linear-gradient(to top, color-mix(in srgb, var(--acc) 30%, transparent) 0 100%) 74% 100% / 2.2% 100% no-repeat,
  linear-gradient(to top, color-mix(in srgb, var(--acc) 18%, transparent) 0 100%) 82% 100% / 7% 62% no-repeat,
  linear-gradient(to top, color-mix(in srgb, var(--acc) 24%, transparent) 0 100%) 93% 100% / 6% 40% no-repeat; }
.j-cv-doc { box-sizing: border-box; position: relative; z-index: 1; width: min(100%, 360px); display: flex; flex-direction: column; gap: 9px; padding: 22px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.j-cv-doc b { font-size: 16px; margin-bottom: 4px; }
.j-cv-li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 12.5px; color: var(--soft); }
.j-cv-li i { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: var(--acc); }
.j-cv-key { position: absolute; z-index: 2; top: -16px; inset-inline-end: -8px; width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--ground); box-shadow: var(--shadow-soft); }

/* ---------- added 2026-09-29: phone mockup, metric bands, versus grid, page tree, covers ---------- */
/* phone mockup (cover + annotated wireframe) */
.j-mob { box-sizing: border-box; justify-self: center; width: min(100%, 270px); display: flex; flex-direction: column; border-radius: 34px; border: 8px solid var(--ink); background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
.j-mob * { box-sizing: border-box; }
.j-mob-notch { align-self: center; width: 72px; height: 14px; margin: 6px 0 2px; border-radius: 999px; background: var(--ink); }
.j-mob-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--soft); }
.j-mob-nav .j-wf-logo { width: 22px; height: 22px; flex-basis: 22px; border-radius: 7px; }
.j-mob-scr { display: flex; flex-direction: column; gap: 9px; padding: 14px; }
.j-mob-h { font-family: var(--display); font-size: 19px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.j-mob-call { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; border-radius: 14px; background: var(--acc); color: #fff; font-size: 13.5px; font-weight: 600; text-align: center; }
.j-mob-call svg { flex: 0 0 auto; }
.j-mob-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; background: var(--panel); font-size: 12px; line-height: 1.3; color: var(--ink); }
.j-mob-row .j-stars i { width: 11px; height: 11px; }
.j-mob-ghost { text-align: center; padding: 9px; border-radius: 14px; border: 1.5px solid var(--acc); color: var(--acc); font-size: 12.5px; font-weight: 600; }
.j-mob-bar { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; text-align: center; }
.j-mob-bar span { padding: 11px 6px; }
.j-mob-bar span:first-child { background: var(--acc); color: #fff; }
.j-mob-row .j-n, .j-mob-call .j-n, .j-mob-ghost .j-n, .j-mob-bar .j-n { margin-inline-start: auto; }
.j-mob-wrap { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 26px; align-items: center; }
.j-mob-wrap .j-notes, .article-body .j-viz .j-mob-wrap .j-notes { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .j-mob-wrap { grid-template-columns: 1fr; } }
.j-cv-phone { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
.j-cv-trades { display: flex; flex-direction: column; gap: 10px; }
.j-cv-trades b { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: -0.015em; }
@media (max-width: 760px) { .j-cv-phone { grid-template-columns: 1fr; } }

/* metric threshold bands */
.j-band-seg { display: flex; align-items: center; padding-inline-start: 8px; font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; }
.j-bar .j-band-seg { width: var(--s); background: var(--c); }
.j-bar .j-band-seg:first-child { border-radius: 4px 0 0 4px; }
.j-bar .j-band-seg:last-child { border-radius: 0 4px 4px 0; }
.j-bar-row .j-axis { margin-top: 2px; }
.j-bar-row .j-axis span { white-space: nowrap; }

/* cover: browser + metric cards */
.j-cv-speed { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
.j-cv-load { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 24px; }
.j-cv-prog { position: relative; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.j-cv-prog::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 38%; border-radius: 999px; background: var(--acc); }
.j-cv-hero { display: flex; align-items: center; justify-content: center; height: 150px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--ink) 22%, transparent); background: repeating-linear-gradient(135deg, var(--panel) 0 10px, color-mix(in srgb, var(--ink) 4%, var(--panel)) 10px 20px); font-size: 12.5px; color: var(--soft); }
.j-cv-metrics { display: flex; flex-direction: column; gap: 10px; }
.j-cv-metric { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 12px 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); border-inline-start: 5px solid var(--c); box-shadow: var(--shadow-soft); }
.j-cv-metric b { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: -0.02em; }
.j-cv-metric small { grid-column: 1 / -1; font-size: 12px; color: var(--soft); }
.j-cv-metric .j-pill { background: var(--c); }
@media (max-width: 760px) { .j-cv-speed { grid-template-columns: 1fr; } }

/* versus grid */
.j-vs { display: flex; flex-direction: column; gap: 8px; }
.j-vs-row { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.j-vs-head { font-size: 13px; font-weight: 600; color: var(--ink); }
.j-vs-head span { padding: 0 12px; }
.j-vs-k { display: flex; align-items: center; padding: 10px 12px; font-size: 14px; font-weight: 600; color: var(--ink); }
.j-vs-c { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; color: var(--soft); }
.j-vs-c.j-win { background: color-mix(in srgb, var(--acc) 9%, var(--card)); border-color: color-mix(in srgb, var(--acc) 35%, transparent); color: var(--ink); }
.j-vs-c.j-win::before { content: "\2713  " attr(data-win); font-size: 11.5px; font-weight: 700; color: var(--acc); white-space: pre; }
.j-vs-tie { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--faint); }
@media (max-width: 620px) {
  .j-vs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .j-vs-k { grid-column: 1 / -1; padding: 8px 2px 0; }
  .j-vs-head .j-vs-k { display: none; }
}

/* page tree */
.j-nodes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding-top: 22px; }
@media (max-width: 1100px) { .j-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .j-nodes { grid-template-columns: 1fr; } }
.j-nodes::before { content: ""; position: absolute; top: 0; left: 50%; width: 1.5px; height: 22px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.j-node { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--acc); }
.j-node b { font-size: 15px; font-weight: 600; color: var(--ink); }
.j-node span { font-size: 13px; line-height: 1.45; color: var(--soft); }
.j-node small { font-size: 11.5px; color: var(--faint); }

/* cover: school page cards */
.j-cv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 18px 18px; }
.j-cv-cards span { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.j-cv-cards span i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 11%, transparent); }
.j-cv-school { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 14px; }
.j-cv-school h4 { margin: 0; font-family: var(--display-ar, "IBM Plex Sans Arabic"), sans-serif; font-weight: 500; font-size: clamp(17px, 2.1vw, 22px); line-height: 1.35; color: var(--ink); }
.j-cv-school .j-cv-btn { align-self: flex-start; font-size: 12px; padding: 7px 13px; border-radius: 999px; background: var(--acc); color: #fff; }
@media (max-width: 480px) { .j-cv-cards { gap: 6px; padding: 0 12px 12px; } .j-cv-cards span { padding: 8px; font-size: 11px; } }