/* ============================================================
   Annota8 — OCR blog (oa- namespace)
   Sibling of the keypoint post; reuses tokens.css + base.css
   (the .a8-bg backdrop, container, bbox motif). Own prefix so it
   never collides with the parallel keypoint build (kp-*).
   Signature motif: OCR boxes draw themselves on, region types pop,
   and the transcription types out — the article reads its own page.
   ============================================================ */

:root{
  /* OCR region-type colors — straight from the product labeling_config */
  --oa-printed:#5CB85C; --oa-hand:#3B82C4; --oa-total:#E0533D; --oa-date:#E8915C;
}

.oa-doc-page{ background:var(--paper); color:var(--day-fg2); font-family:var(--font-body); }
.oa-wrap{ max-width:760px; margin-inline:auto; padding-inline:var(--gutter); position:relative; z-index:1; }
.oa-wrap--wide{ max-width:1100px; }

/* Wide desktop: content band offset to the right of the fixed TOC rail —
   small balanced margins (uses the screen), wider reading column (less scrolling),
   content never under the TOC. Mirrors the keypoint/FIFA layout. */
@media (min-width:1180px){
  .oa-wrap{ max-width:1340px; box-sizing:border-box;
            padding-inline-start:206px; padding-inline-end:clamp(1.5rem,4vw,3.5rem); }
  .oa-article{ max-width:900px; margin-inline:auto; }
  .oa-wrap--wide{ max-width:100%; }
}

[data-reveal]{ opacity:0; transform:translateY(26px); }
.no-js [data-reveal]{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; } }

/* ---------- reading progress ---------- */
.oa-progress{ position:fixed; top:0; left:0; height:3px; width:0%; z-index:200; pointer-events:none;
  background:linear-gradient(90deg,var(--brand),var(--brand-alt)); box-shadow:0 0 14px rgba(63,111,200,.5);
  transition:width 80ms linear; }

/* ---------- compact nav ---------- */
.oa-nav{ position:fixed; inset:0 0 auto 0; z-index:50; height:60px; display:flex; align-items:center;
  backdrop-filter:saturate(140%) blur(12px); background:var(--nav-bg); border-bottom:1px solid var(--rule); }
.oa-nav__in{ width:min(100% - 2.5rem,var(--max)); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.oa-nav__logo img{ height:23px; display:block; }
.oa-nav__back{ font:500 .85rem/1 var(--font-ui); color:var(--day-fg2); text-decoration:none; display:inline-flex; gap:.45rem; align-items:center; }
.oa-nav__back:hover{ color:var(--brand); }
.oa-nav__cta{ font:600 .85rem/1 var(--font-ui); text-decoration:none; background:var(--cta-bg); color:var(--cta-fg);
  padding:.6rem 1.05rem; border-radius:var(--r-pill); transition:transform .2s var(--ease-spring),box-shadow .2s; }
.oa-nav__cta:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(11,11,15,.22); }

/* ---------- article shell ---------- */
.oa-article{ font-size:1.075rem; line-height:1.72; color:var(--day-fg2); }
.oa-article > section{ margin-block:clamp(2.6rem,6vw,4.6rem); scroll-margin-top:92px; }
.oa-article h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); color:var(--day-fg); margin-bottom:var(--s3); line-height:1.12; letter-spacing:-.02em; }
.oa-article h3{ font-family:var(--font-ui); font-size:1.2rem; color:var(--day-fg); margin:var(--s4) 0 var(--s2); }
.oa-article p{ margin:0 0 var(--s3); }
.oa-article p > strong,.oa-article li > strong{ color:var(--day-fg); font-weight:600; }
.oa-article a.inline,.oa-article p a,.oa-article li a{ color:var(--brand-ink); text-decoration:none; border-bottom:1px solid rgba(63,111,200,.32); }
.oa-article a:hover{ border-color:var(--brand); }
.oa-article ul,.oa-article ol{ margin:0 0 var(--s3); padding-left:1.3em; }
.oa-article li{ margin-bottom:.5em; }
.oa-article code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; background:var(--bg-alt); padding:.1em .4em; border-radius:5px; }

/* ---------- hero ---------- */
.oa-hero{ padding-top:clamp(7rem,13vh,9rem); padding-bottom:var(--s4); }
.oa-kicker{ display:inline-flex; align-items:center; gap:.6em; margin-bottom:var(--s3);
  font:600 .74rem/1 var(--font-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--day-fg3); }
.oa-kicker::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--brand-alt); box-shadow:0 0 0 4px rgba(91,184,232,.18); }
.oa-hero h1{ font-size:clamp(2.4rem,6vw,4.1rem); line-height:1.05; color:var(--day-fg); letter-spacing:-.03em; margin-bottom:var(--s3); max-width:17ch; }
.oa-hero h1 .grad{ background:linear-gradient(100deg,var(--brand),var(--brand-alt)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.oa-hero .dek{ font-size:clamp(1.15rem,2vw,1.45rem); color:var(--day-fg2); max-width:60ch; line-height:1.5; }
.oa-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem; margin-top:var(--s4);
  font:500 .85rem/1 var(--font-ui); color:var(--day-fg3); }
.oa-meta .sep{ opacity:.4; } .oa-meta .author{ color:var(--day-fg2); font-weight:600; }

/* ---------- figure / frame ---------- */
.oa-figure{ margin:var(--s5) 0; }
.oa-figure figcaption{ margin-top:.8rem; font-size:.86rem; color:var(--day-fg3); text-align:center; font-family:var(--font-ui); }
.oa-frame{ position:relative; border-radius:var(--r-card); overflow:hidden; border:1px solid var(--card-border);
  box-shadow:var(--shadow-card); background:#0b0b0f; }
.oa-frame img,.oa-frame video{ width:100%; display:block; }

/* video player + EN/AR toggle */
.oa-video__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.9rem; flex-wrap:wrap; }
.oa-video__label{ font:600 .95rem/1 var(--font-ui); color:var(--day-fg); display:inline-flex; align-items:center; gap:.5em; }
.oa-langtoggle{ display:inline-flex; border:1px solid var(--card-border); border-radius:var(--r-pill); overflow:hidden; background:rgba(255,255,255,.5); }
.oa-langtoggle button{ border:none; background:transparent; padding:.42em 1.05em; min-height:44px; display:inline-flex; align-items:center; justify-content:center; font:600 .82rem/1 var(--font-ui); color:var(--day-fg3); cursor:pointer; transition:background var(--t-fast),color var(--t-fast); }
.oa-langtoggle button.is-active{ background:var(--day-fg); color:#fff; }

/* ---------- AEO takeaways ---------- */
.oa-takeaways{ margin:var(--s5) 0; padding:var(--s4); border:1px solid rgba(63,111,200,.22); border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(63,111,200,.05),rgba(91,184,232,.04)); }
.oa-takeaways h2{ font-size:1.05rem !important; font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.14em; color:var(--day-fg3) !important; margin-bottom:var(--s2) !important; }
.oa-takeaways ul{ list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.oa-takeaways li{ position:relative; padding-left:1.7rem; color:var(--day-fg); }
.oa-takeaways li::before{ content:""; position:absolute; left:0; top:.5em; width:10px; height:10px; border-radius:50%; background:var(--brand-alt); box-shadow:0 0 0 3px rgba(91,184,232,.18); }

/* ---------- North-Star pull-quote ---------- */
.oa-northstar{ margin:var(--s6) 0; text-align:center; padding:var(--s4) 0; }
.oa-northstar blockquote{ margin:0 auto; max-width:18ch; font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(2rem,5vw,3.4rem); line-height:1.12; letter-spacing:-.01em; color:var(--day-fg); }
.oa-northstar cite{ display:block; margin-top:var(--s3); font-style:normal; font:600 .8rem/1 var(--font-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--day-fg3); }

/* ============================================================
   SIGNATURE: OCR box-on-text overlay (SVG). Boxes draw on
   (stroke-dashoffset), region-type tags pop, transcription
   types out. Driven by blog-ocr.js.
   ============================================================ */
.oa-scene{ position:relative; }
.oa-scene svg.oa-overlay{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.oa-region{ fill:transparent; stroke-width:2.4; rx:3; }
.oa-region--printed{ stroke:var(--oa-printed); fill:rgba(92,184,92,.10); }
.oa-region--hand{ stroke:var(--oa-hand); fill:rgba(59,130,196,.10); }
.oa-region--total{ stroke:var(--oa-total); fill:rgba(224,83,61,.12); }
.oa-region--date{ stroke:var(--oa-date); fill:rgba(232,145,92,.12); }
.oa-tag{ font:600 11px/1 var(--font-ui); fill:#fff; }
.oa-tag rect{ rx:3; }
.oa-tag--printed rect{ fill:var(--oa-printed); } .oa-tag--hand rect{ fill:var(--oa-hand); }
.oa-tag--total rect{ fill:var(--oa-total); } .oa-tag--date rect{ fill:var(--oa-date); }

/* "anatomy of an OCR annotation" dark diagram card */
.oa-anatomy{ position:relative; margin:var(--s5) 0; border-radius:var(--r-card);
  background:linear-gradient(165deg,#11152a 0%,#0b0f19 100%); border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-card); padding:clamp(1.5rem,4vw,3rem); overflow:hidden; }
.oa-anatomy__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
@media (max-width:720px){ .oa-anatomy__grid{ grid-template-columns:1fr; } }
.oa-anatomy h3{ color:#fff; } .oa-anatomy .lede{ color:#c9cce0; }
.oa-anatomy .oa-legend{ display:grid; gap:.6rem; margin-top:var(--s3); }
.oa-anatomy .oa-legend div{ display:flex; align-items:center; gap:.6em; font:500 .9rem/1 var(--font-ui); color:#c9cce0; }
.oa-anatomy .oa-legend i{ width:12px; height:12px; border-radius:3px; }
.oa-anatomy .oa-translit{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* ---------- use-case grid ---------- */
.oa-uc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.4rem; margin:var(--s4) 0; }
.oa-uc{ border:1px solid var(--card-border); border-radius:var(--r-card); overflow:hidden; background:rgba(255,255,255,.55);
  backdrop-filter:blur(6px); transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out); }
.oa-uc:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); }
.oa-uc__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#0b0b0f; }
.oa-uc__media img{ width:100%; height:100%; object-fit:cover; }
.oa-uc__num{ position:absolute; top:.7rem; left:.7rem; font:700 .72rem/1 var(--font-ui); letter-spacing:.1em; color:#fff;
  background:linear-gradient(92deg,var(--brand),var(--brand-alt)); padding:.25em .6em; border-radius:5px; }
.oa-uc__body{ padding:1.1rem 1.2rem 1.3rem; }
.oa-uc__body h3{ margin:0 0 .4rem; font-size:1.05rem; color:var(--day-fg); }
.oa-uc__body p{ font-size:.92rem; margin:0; color:var(--day-fg2); }
.oa-uc__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.oa-uc__tags span{ font:500 .72rem/1 var(--font-ui); color:var(--day-fg3); border:1px solid var(--card-border); border-radius:var(--r-pill); padding:.3em .7em; }

/* ---------- FAQ (AEO) ---------- */
.oa-faq{ display:grid; gap:.7rem; margin-top:var(--s3); }
.oa-faq__item{ border:1px solid var(--card-border); border-radius:12px; background:rgba(255,255,255,.5); overflow:hidden; }
.oa-faq__q{ width:100%; text-align:start; background:transparent; border:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:1.05rem 1.2rem; font:600 1.02rem/1.4 var(--font-ui); color:var(--day-fg); }
.oa-faq__q .chev{ transition:transform var(--t-med) var(--ease-out); flex:none; color:var(--day-fg3); font-size:1.3rem; line-height:1; }
.oa-faq__item.is-open .oa-faq__q .chev{ transform:rotate(45deg); }
.oa-faq__a{ padding:0 1.2rem; max-height:0; overflow:hidden; transition:max-height var(--t-med) var(--ease-out),padding var(--t-med) var(--ease-out); }
.oa-faq__item.is-open .oa-faq__a{ padding:0 1.2rem 1.2rem; max-height:600px; }
.oa-faq__a p{ margin:0; color:var(--day-fg2); font-size:.98rem; }

/* ---------- references ---------- */
.oa-refs{ margin-top:var(--s4); border-top:1px solid var(--rule); padding-top:var(--s4); }
.oa-refs h2{ font-size:1.1rem; }
.oa-refs ol{ font-size:.88rem; color:var(--day-fg3); line-height:1.6; }
.oa-refs li{ margin-bottom:.6em; }
.oa-refs a{ color:var(--brand-ink); word-break:break-word; }

/* ---------- CTA ---------- */
.oa-cta{ margin:var(--s6) auto 0; max-width:1100px; text-align:center; border-radius:24px;
  padding:clamp(2.5rem,6vw,4.5rem) var(--gutter); background:linear-gradient(160deg,#11152a 0%,#0b0f19 100%);
  border:1px solid rgba(255,255,255,.08); position:relative; overflow:hidden; }
.oa-cta h2{ color:#fff; font-size:clamp(1.8rem,4vw,2.8rem); margin-bottom:var(--s2); }
.oa-cta .teach b:nth-of-type(1){ color:#7FB0FF; } .oa-cta .teach b:nth-of-type(2){ color:var(--brand-alt); } .oa-cta .teach b:nth-of-type(3){ color:#B2C5E9; }
.oa-cta p{ color:#c9cce0; max-width:52ch; margin:0 auto var(--s4); }
.oa-cta__btn{ display:inline-flex; gap:.5rem; align-items:center; text-decoration:none; background:#fff; color:#0b0f19;
  font:600 1rem/1 var(--font-ui); padding:.95rem 1.6rem; border-radius:var(--r-pill); transition:transform .2s var(--ease-spring),box-shadow .2s; }
.oa-cta__btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.3); }
.oa-cta__follow{ margin-top:var(--s3); display:flex; gap:1rem; justify-content:center; font:500 .8rem/1 var(--font-ui); color:#8b90a8; }
.oa-cta__follow a{ color:#c9cce0; text-decoration:none; }

/* ---------- sticky TOC (desktop) ---------- */
.oa-toc{ position:fixed; top:50%; transform:translateY(-50%); width:170px; max-width:170px;
  inset-inline-start:max(1.25rem,calc((100vw - 1340px)/2 + 18px)); inset-inline-end:auto; z-index:40; display:none; }
@media (min-width:1180px){ .oa-toc{ display:block; } }
.oa-toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.oa-toc a{ display:flex; align-items:flex-start; gap:.55em; font:500 .76rem/1.3 var(--font-ui); color:var(--day-fg3); opacity:1; transition:opacity var(--t-fast),color var(--t-fast); text-decoration:none; }
.oa-toc a::before{ content:""; flex:none; width:16px; height:2px; margin-top:.5em; background:currentColor; opacity:.5; transition:width var(--t-fast); }
.oa-toc a.is-active{ color:var(--brand); opacity:1; }
.oa-toc a.is-active::before{ width:30px; opacity:1; }

/* ---------- footer ---------- */
.oa-footer{ border-top:1px solid var(--rule); margin-top:var(--s5); padding:var(--s4) 0; }
.oa-footer__in{ max-width:1100px; margin-inline:auto; padding-inline:var(--gutter); display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.oa-footer__tag{ font-family:var(--font-display); font-size:1.15rem; color:var(--day-fg2); max-width:42ch; }
.oa-footer__links{ display:flex; gap:1.1rem; font:500 .82rem/1 var(--font-ui); }
.oa-footer__links a{ color:var(--day-fg3); text-decoration:none; }
.oa-footer__links a:hover{ color:var(--brand); }

/* ---------- RTL / Arabic ---------- */
[dir="rtl"] .oa-progress{left:auto;right:0;}
[dir="rtl"] .oa-article,[lang="ar"] .oa-article{ font-family:var(--font-ar); }
[dir="rtl"] .oa-article ul,[dir="rtl"] .oa-article ol{ padding-left:0; padding-right:1.3em; }
[dir="rtl"] .oa-takeaways li{ padding-left:0; padding-right:1.7rem; }
[dir="rtl"] .oa-takeaways li::before{ left:auto; right:0; }

@media (prefers-reduced-motion:reduce){ .oa-progress{ display:none; } .oa-faq__a{ transition:none; } }
@media (max-width:640px){ .oa-hero{ padding-top:6rem; } .oa-article{ font-size:1.02rem; } }