/* deck.css - the Unit Guide as a story and its three questions, drawn in cPanel 2.1's systems (plan 2.1, 3 and 4;
   link 67). Loaded after systems.css. Each card's type is said by its silhouette: cover (tall, a plate as its header),
   ledger (a full-width cobalt top rule; figures lead), window (a notch on the edge facing the map), plate (a square tile
   set in its corner), clipping (quoted words in the serif; here empty), strip (a time band across the top), notebook
   (ruled lines). Corners 2 px. Aubergine only ever means "we do not know". */

.view--example{background:var(--porcelain)}
.exhead{padding-block:clamp(1.5rem,5vw,3.5rem) clamp(1rem,3vw,2rem)}
.exhead .kicker{margin-block-end:.7rem}
.exhead h1{max-inline-size:20ch;margin:0 0 .9rem}
.exhead .deck{font-size:clamp(1.05rem,2.6vw,1.22rem);max-inline-size:46ch}
.exhead__why{font-size:.9rem;color:var(--muted);max-inline-size:62ch;margin:.6rem 0 0}
.exhead__demo{font-size:.82rem;color:var(--muted);margin:.4rem 0 0}
.exhead__links{margin:.9rem 0 0;font-size:.92rem}

/* ---------------------------------------------------------------- the three questions */
.qbox{background:var(--porcelain-2);border:1px solid var(--rule);border-top:4px solid var(--cobalt);border-radius:var(--s-r);
  padding:clamp(18px,3.4vw,34px);margin-block:0 clamp(1.5rem,4vw,2.5rem)}
.qbox__h{margin:.1rem 0 .4rem}
.qbox__step{font-size:.8rem;color:var(--muted);margin:.6rem 0 .2rem;min-block-size:1.2em}
.qbox__asrow{margin:1rem 0 0;font-size:.9rem}
.qbar{margin:.8rem 0 .2rem}
.qbar__track{display:flex}
.qbar__seg{display:flex;gap:3px;inline-size:100%}
.qbar__cell{display:block;flex:1;block-size:4px;background:var(--cobalt-050);border-radius:1px;transition:background-color var(--m-enter) var(--m-ease-enter)}
.qbar__cell.is-on{background:var(--cobalt)}
.qbar__caps{font-size:.8rem;color:var(--muted);margin:.35rem 0 0}
.qbar__cap.is-full{color:var(--cobalt)}
.qscreen__h{font-size:1.15rem;margin:.8rem 0 .2rem}
.qcard{margin:.8rem 0 0}
.qcard__q{font-size:clamp(1.25rem,4vw,1.6rem);margin:.15rem 0 .5rem}
.qcard__changes{font-size:.86rem;color:var(--muted);margin:0 0 .6rem}
.qopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:6px;margin:.4rem 0 0}
.qopts--bands{grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr))}
.qopt{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;min-block-size:48px;padding:.7rem .9rem;
  background:var(--tile);color:var(--ink);border:1px solid var(--rule);border-radius:var(--s-r);text-align:start;font:inherit;cursor:pointer;
  transition:background-color var(--m-feedback) linear,border-color var(--m-feedback) linear,color var(--m-feedback) linear}
.qopt b{font-weight:600}
.qopt span{font-size:.84rem;color:var(--muted)}
.qopt:hover{border-color:var(--cobalt-400)}
.qopt[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:var(--porcelain)}
.qopt[aria-pressed="true"] span{color:var(--cobalt-050)}
.qopt--out{border-style:dashed}
.qpay{margin:1.2rem 0 0;padding:1rem 0 0;border-top:1px solid var(--rule)}
.qpay__h{font-size:1.05rem;margin:0 0 .2rem}
.qnav{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1rem 0 0}
.qdone h3{margin:.4rem 0 .4rem}

/* ---------------------------------------------------------------- the deck */
.gdeck{margin-block:0 2rem;position:relative;max-inline-size:none}
.deck__top{padding-block:0 .6rem}
.rail{display:flex;gap:3px;align-items:flex-end;inline-size:100%}
.rail__seg{flex:1 1 auto;min-inline-size:0;display:flex;flex-direction:column;gap:5px;align-items:stretch;padding:6px 0 2px;
  background:none;border:0;cursor:pointer;color:var(--muted);font:inherit;text-align:start}
.rail__name{font-family:var(--f-head);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[lang="ar"] .rail__name{font-family:var(--f-head-ar);font-size:.78rem;letter-spacing:0;text-transform:none}
.rail__bar{display:block;block-size:4px;background:var(--cobalt-050);border-radius:1px;overflow:hidden}
.rail__fill{display:block;block-size:100%;inline-size:0;background:var(--cobalt);transition:inline-size var(--m-card) var(--m-ease-enter)}
.rail__seg.is-here{color:var(--cobalt)}
.rail__seg:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
@media (max-width:640px){.rail__seg{min-inline-size:26px}.rail__seg:not(.is-here) .rail__name{visibility:hidden}.rail__seg.is-here{flex-basis:auto;min-inline-size:5.5rem}}
.rail__threads{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--muted);margin:.45rem 0 0}
.rail__threads::before{content:"";inline-size:.62rem;block-size:.62rem;border:1.5px solid var(--cobalt-200);border-radius:1px}
.rail__threads.has-threads{color:var(--ink)}
.rail__threads.has-threads::before{border-color:var(--unknown)}
.rail__threads.is-pulse::before{animation:deck-pulse 520ms var(--m-ease-enter) 1}
@keyframes deck-pulse{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.deck__order{font-size:.84rem;color:var(--muted);margin:.25rem 0 0}
.deck__orderl{margin:0;max-inline-size:none}
.deck__orderk{font-weight:600;color:var(--ink)}
.why{background:var(--porcelain-2);border:1px solid var(--rule);border-radius:var(--s-r);padding:.9rem 1rem;margin:.6rem 0 0;font-size:.9rem}
.why__list{list-style:none;margin:.5rem 0;padding:0;display:grid;gap:.35rem}
.why__item{display:flex;gap:.6rem;align-items:baseline}
.why__item.is-off .why__t{color:var(--muted)}
.why__sw{min-inline-size:3.4rem;min-block-size:28px;padding:.15rem .5rem;border:1px solid var(--cobalt);background:var(--cobalt);color:var(--porcelain);
  border-radius:var(--s-r);font:inherit;font-size:.78rem;cursor:pointer}
.why__sw[aria-pressed="false"]{background:transparent;color:var(--cobalt)}

.deck__stage{display:grid;gap:clamp(12px,2.2vw,28px);grid-template-areas:"art" "card";align-items:start;margin-block-start:.4rem}
@media (min-width:900px){.deck__stage{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"card art"}}
.deck__art{grid-area:art;position:relative;min-inline-size:0}
.deck__cardwrap{grid-area:card;position:relative;min-inline-size:0}
@media (min-width:900px){.deck__art{position:sticky;top:5.5rem}}

/* the card */
.card{position:relative;background:var(--porcelain-2);border:1px solid var(--rule);border-radius:var(--s-r);
  padding:clamp(18px,3vw,30px) clamp(18px,3vw,32px) clamp(16px,2.6vw,26px);min-block-size:clamp(380px,56vh,520px);
  display:flex;flex-direction:column;
  transition:opacity var(--m-card) var(--m-ease-enter),transform var(--m-card) var(--m-ease-enter)}
.card>*{position:relative;z-index:1}
.card .kicker{margin:0 0 .55rem}
.card__h{margin:0 0 .55rem;outline:none}
html.dl .sys .card__h{font-size:clamp(1.42rem,3.3vw,2rem);line-height:1.14}
html.dl[lang="ar"] .sys .card__h{font-size:clamp(1.38rem,3.2vw,1.9rem);line-height:1.48}
html.dl .sys .card--cover .card__h{font-size:clamp(1.7rem,4.4vw,2.45rem)}
.card__h:focus,.card__h:focus-visible{outline:none}     /* a headline is where focus lands, not a control */
.card .deck{margin:0 0 .5rem}
.card__frame{font-size:.92rem;color:var(--cobalt-500);margin:0 0 .4rem;max-inline-size:52ch}
.card__lines{list-style:none;margin:.3rem 0 0;padding:0;display:grid;gap:.15rem}
.card__lines .v__text{font-size:.97rem}
.v__from{grid-column:2;font-size:.78rem;color:var(--muted);margin:.05rem 0 0}
.card__how{align-self:flex-start;margin-block-start:auto;padding-block-start:.9rem;font-size:.88rem;min-block-size:24px}
.card__drawer{margin:.5rem 0 0;padding:.8rem 0 0;border-top:1px solid var(--rule)}
.card__drawerh{font-family:var(--f-head);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt-400);margin:0 0 .2rem}
html[lang="ar"] .card__drawerh{font-family:var(--f-head-ar);font-size:.84rem;letter-spacing:0;text-transform:none}
.card__dlines{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.card__dlines .v__text{font-size:.88rem}
.v__src{grid-column:2;font-size:.74rem;color:var(--muted);margin:.05rem 0 .2rem;overflow-wrap:anywhere}
.v[data-mark="note"] .v__sig{border:0}
.v[data-mark="note"] .v__text{color:var(--muted);font-style:italic}

/* tap zones: the end edge goes forward, the start edge back (keyboard users have the buttons and the arrow keys) */
.card__tap{position:absolute!important;z-index:0!important;inset-block:0;inline-size:11%;background:transparent;border:0;padding:0;cursor:pointer}
.card__tap--back{inset-inline-start:0}
.card__tap--next{inset-inline-end:0}
.card__tap:hover{background:linear-gradient(to right,rgba(18,48,106,.035),transparent)}
.card__tap--next:hover{background:linear-gradient(to left,rgba(18,48,106,.035),transparent)}
html[dir="rtl"] .card__tap--back:hover{background:linear-gradient(to left,rgba(18,48,106,.035),transparent)}
html[dir="rtl"] .card__tap--next:hover{background:linear-gradient(to right,rgba(18,48,106,.035),transparent)}

/* silhouettes */
.card--cover{min-block-size:clamp(460px,70vh,600px);padding-block-start:0}
.card__plate{margin:0 calc(-1 * clamp(18px,3vw,32px)) 1rem;border-radius:var(--s-r) var(--s-r) 0 0;overflow:hidden}
.card__plate .plate__frame{aspect-ratio:16/9}
@media (min-width:900px){.card__plate .plate__frame{aspect-ratio:21/9}}
.card__plate .plate__img{inline-size:100%;block-size:100%;object-fit:cover;border-radius:0}
.card__plate .plate__cap{padding-inline:clamp(18px,3vw,32px);margin:.4rem 0 0}
.card__plate .plate__frame{border-radius:0}
.card--cover .card__h{font-size:clamp(1.7rem,5.6vw,2.5rem)}
.card--ledger{border-top:6px solid var(--cobalt)}
.card--ledger .card__h{font-variant-numeric:lining-nums}
.card--window::after{content:"";position:absolute;z-index:0;inline-size:22px;block-size:22px;background:var(--porcelain);
  border:1px solid var(--rule);border-radius:50%;inset-block-start:-12px;inset-inline-start:calc(50% - 11px)}
@media (min-width:900px){.card--window::after{inset-block-start:calc(50% - 11px);inset-inline-start:auto;inset-inline-end:-12px}}
.card__corner{position:absolute!important;inset-block-start:14px;inset-inline-end:14px;inline-size:56px;block-size:56px;
  border-radius:1px;overflow:hidden;outline:2px solid var(--porcelain-2);box-shadow:0 0 0 1px var(--rule)}
.card__corner img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.card--plate .kicker,.card--plate .card__h{padding-inline-end:68px}
.card--clipping{border-inline-start:3px solid var(--ink)}
.card--clipping::before{content:"\201C";position:absolute;z-index:0;inset-block-start:-.1rem;inset-inline-end:1rem;font-family:var(--f-voice);
  font-size:5rem;line-height:1;color:var(--rule)}
html[dir="rtl"] .card--clipping::before{content:"\201D"}
.card__strip{position:absolute!important;inset-block-start:0;inset-inline:0;block-size:10px;border-radius:var(--s-r) var(--s-r) 0 0;
  background:linear-gradient(var(--cobalt),var(--cobalt)) no-repeat 0 100%/100% 2px,
    repeating-linear-gradient(to right,var(--cobalt-200) 0 1px,transparent 1px 28px)}
.card--strip{padding-block-start:clamp(26px,3.6vw,36px)}
.card--notebook{background:var(--porcelain-2) repeating-linear-gradient(to bottom,transparent 0 calc(1.85rem - 1px),rgba(167,182,211,.35) calc(1.85rem - 1px) 1.85rem);
  background-position:0 .6rem}
.card--notebook .card__lines{gap:.4rem}
.v--q .v__text{font-weight:600}
.v--step .v__sig{inline-size:.5rem;block-size:.5rem;border:0;background:var(--cobalt);border-radius:50%;transform:translateY(-.08em)}
.card--overview{min-block-size:0}

/* moving: within a chapter the card slides 24 px and fades; next moves toward the end of the line */
.card.is-in-next{opacity:0;transform:translate3d(var(--m-slide),0,0)}
.card.is-in-back{opacity:0;transform:translate3d(calc(-1 * var(--m-slide)),0,0)}
html[dir="rtl"] .card.is-in-next{transform:translate3d(calc(-1 * var(--m-slide)),0,0)}
html[dir="rtl"] .card.is-in-back{transform:translate3d(var(--m-slide),0,0)}
.card.is-out-next,.card.is-out-back{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition-duration:var(--m-exit);transition-timing-function:var(--m-ease-exit)}
.card.is-out-next{transform:translate3d(calc(-1 * var(--m-slide)),0,0)}
.card.is-out-back{transform:translate3d(var(--m-slide),0,0)}
html[dir="rtl"] .card.is-out-next{transform:translate3d(var(--m-slide),0,0)}
html[dir="rtl"] .card.is-out-back{transform:translate3d(calc(-1 * var(--m-slide)),0,0)}
.card.is-fade{opacity:0}
/* between chapters the silhouette changes through a view transition, where the browser has one */
.gdeck.is-vt .card{view-transition-name:deck-card}
.gdeck.is-vt .deck__art{view-transition-name:deck-art}
::view-transition-old(deck-card),::view-transition-new(deck-card),::view-transition-old(deck-art),::view-transition-new(deck-art){
  animation-duration:360ms;animation-timing-function:cubic-bezier(.2,0,0,1)}

/* the bar of Back and Next: at the bottom on a phone */
.deck__nav{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-block-start:.8rem}
.deck__nav .btn{min-block-size:44px;min-inline-size:6.5rem}
.deck__pos{font-size:.8rem;color:var(--muted);margin:0;text-align:center}
@media (max-width:899px){.deck__nav{position:sticky;inset-block-end:0;z-index:4;background:var(--porcelain);padding-block:.55rem;
  border-top:1px solid var(--rule);margin-inline:-16px;padding-inline:16px}}
.gdeck .linkbtn,.qbox .linkbtn{display:inline-flex;align-items:center;min-block-size:24px}
.deck__tools{display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:baseline;font-size:.88rem;margin:.6rem 0 0;max-inline-size:none}
/* on a phone the artefact stays above the card but short, so the card's headline is on the first screen; the cover's
   own plate is its picture, and the notebook shows only the cards with something to take */
@media (max-width:899px){
  .gdeck[data-type="cover"] .deck__art{display:none}
  .deck__art .plate__frame{max-block-size:26vh}
  .deck__art .plate__img{block-size:100%;object-fit:cover}
  .deck__art .apair .plate__frame{max-block-size:22vh}
  .deck__art .plate__cap{font-size:.7rem;line-height:1.4}
  .deck__art .ogrid__tile:not(.is-thread){display:none}
  .deck__art .ogrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deck__art .ogrid__tile{min-block-size:0}
  .deck__order{font-size:.78rem}
}
.deck__toast{font-size:.82rem;color:var(--ink);min-block-size:1.2em;margin:.3rem 0 0}

/* ---------------------------------------------------------------- the artefacts */
.deck__art .plate,.deck__art figure{margin:0}
.plate__frame{position:relative;overflow:hidden;border-radius:var(--s-r);background:var(--s-plate-ink)}
.plate:not(.plate--tiles) .plate__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,transparent calc(33.333% - 1px),rgba(251,248,240,.9) calc(33.333% - 1px) calc(33.333% + 1px),transparent calc(33.333% + 1px) calc(66.666% - 1px),rgba(251,248,240,.9) calc(66.666% - 1px) calc(66.666% + 1px),transparent calc(66.666% + 1px)),
    linear-gradient(to bottom,transparent calc(33.333% - 1px),rgba(251,248,240,.9) calc(33.333% - 1px) calc(33.333% + 1px),transparent calc(33.333% + 1px) calc(66.666% - 1px),rgba(251,248,240,.9) calc(66.666% - 1px) calc(66.666% + 1px),transparent calc(66.666% + 1px))}
.card__plate .plate:not(.plate--tiles) .plate__frame::after{background:linear-gradient(to right,transparent calc(50% - 1px),rgba(251,248,240,.9) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px))}
.plate__img{display:block;inline-size:100%;block-size:auto;image-rendering:auto}
.plate--tiles .plate__img{image-rendering:pixelated}
.plate__label{font-size:.78rem;color:var(--ink);margin:.35rem 0 0}
.plate__cap{font-size:.76rem;line-height:1.5;color:var(--muted);margin:.45rem 0 0}
.plate__credit{display:block;font-size:.7rem;margin-block-start:.15rem}
.apair__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-grout);padding:var(--s-grout);background:var(--porcelain-2);border-radius:var(--s-r)}
.apair .plate__frame::after{display:none}
.amap__fig{margin:0}
.amap{position:relative;block-size:clamp(300px,46vh,460px);border-radius:var(--s-r);overflow:hidden;background:var(--porcelain-2);border:1px solid var(--rule)}
.amap canvas{display:block;inline-size:100%;block-size:100%}
@media (max-width:899px){.amap{block-size:clamp(200px,28vh,260px)}}

.aband,.acauses,.astack,.atime,.aclip{background:var(--porcelain-2);border:1px solid var(--rule);border-radius:var(--s-r);padding:clamp(14px,2.4vw,22px)}
.aband__h{font-family:var(--f-head);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt-400);margin:0 0 .4rem}
html[lang="ar"] .aband__h{font-family:var(--f-head-ar);font-size:.84rem;letter-spacing:0;text-transform:none}
.asvg{display:block;inline-size:100%;block-size:auto;overflow:visible;font-family:var(--f-head)}
html[lang="ar"] .asvg{font-family:var(--f-head-ar)}
.asvg__axis{stroke:var(--rule);stroke-width:1}
.asvg__band{fill:var(--cobalt-050);stroke:var(--cobalt);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:asvg-band 420ms var(--m-ease-enter) 1 both}
@keyframes asvg-band{from{transform:scaleX(.15)}to{transform:scaleX(1)}}
.asvg__mid{stroke:var(--cobalt);stroke-width:2}
.asvg__ask{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.asvg__askm{fill:var(--ink)}
.asvg__lab{font-size:15px;fill:var(--ink);font-weight:600}
.asvg__lab--unk{fill:var(--unknown);font-weight:400}
.asvg__end{font-size:13px;fill:var(--muted)}
.asvg__cause--0{fill:var(--cobalt)}
.asvg__cause--1{fill:var(--cobalt-400)}
.asvg__cause--2{fill:var(--cobalt-200)}
.asvg__now{fill:var(--cobalt)}
.asvg__later{fill:var(--cobalt-050);stroke:var(--cobalt);stroke-width:1.2;stroke-dasharray:5 3}
.asvg__unknown{fill:none;stroke:var(--unknown);stroke-width:1.5}
.asvg__dot{fill:var(--cobalt)}
.asvg__sq{fill:none;stroke:var(--cobalt);stroke-width:1.5}
.aband__unval{font-size:.86rem;font-weight:600;color:var(--ink);margin:.5rem 0 .2rem}
.aband__cover{font-size:.84rem;color:var(--muted);margin:0}
.acauses__key{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:.6rem 0 0;padding:0;font-size:.84rem}
.acauses__key li{display:flex;align-items:center;gap:.35rem}
.acauses__sw{display:inline-block;inline-size:.8rem;block-size:.8rem;border-radius:1px}
.acauses__sw--0{background:var(--cobalt)}
.acauses__sw--1{background:var(--cobalt-400)}
.acauses__sw--2{background:var(--cobalt-200)}
.aclip{min-block-size:200px;display:flex;flex-direction:column;justify-content:center;gap:.6rem}
.aclip__q{font-family:var(--f-voice);font-size:4.5rem;line-height:.6;color:var(--rule)}
.aclip figcaption{font-size:.92rem;color:var(--unknown);max-inline-size:40ch}

/* a statement and Baseera's reading on one strip: side by side, never one over the other, no verdict word or colour */
.astmt{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--porcelain-2);border:1px solid var(--rule);border-radius:var(--s-r)}
.astmt__side{padding:clamp(14px,2.4vw,22px)}
.astmt__side--said{border-inline-end:1px solid var(--rule)}
.astmt__q{margin:0;font-family:var(--f-voice);font-style:italic;font-size:1.15rem;line-height:1.4;color:var(--ink)}
html[lang="ar"] .astmt__q{font-family:var(--f-voice-ar);font-style:normal}
.astmt__who{font-size:.8rem;color:var(--muted);margin:.5rem 0 0}
.astmt__r{margin:0;font-size:.95rem;color:var(--ink)}

/* the overview and the notebook's tile grid: every card a tile, the ones with something to take with you marked */
.ogrid{grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr))}
.ogrid--focus{margin:.4rem 0 .8rem}
.ogrid__tile{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start;justify-content:flex-start;min-block-size:6.4rem;
  padding:.55rem .6rem;background:var(--tile);border:0;border-radius:1px;text-align:start;font:inherit;color:var(--ink);cursor:pointer}
.ogrid__tile:hover{background:var(--cobalt-050)}
.ogrid__tile--ledger{box-shadow:inset 0 3px 0 var(--cobalt)}
.ogrid__tile--plate{box-shadow:inset 0 3px 0 var(--cobalt-400)}
.ogrid__k{font-family:var(--f-head);font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt-400)}
html[lang="ar"] .ogrid__k{font-family:var(--f-head-ar);font-size:.72rem;letter-spacing:0;text-transform:none}
.ogrid__t{font-size:.78rem;line-height:1.35}
.ogrid__th{display:flex;gap:.3rem;align-items:baseline;font-size:.7rem;color:var(--unknown);margin-block-start:auto}
.ogrid__th::before{content:"";flex:none;inline-size:.5rem;block-size:.5rem;border:1.5px solid var(--unknown);border-radius:1px}
.ogrid__tile.is-here{outline:2px solid var(--cobalt);outline-offset:-2px}
.overview__acts{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 0}

/* read as one page */
.gdeck[data-mode="page"] .deck__art,.gdeck[data-mode="page"] .deck__nav,.gdeck[data-mode="page"] .rail{display:none}
.gdeck[data-mode="page"] .deck__stage{grid-template-columns:1fr;grid-template-areas:"card"}
.deck__page{display:grid;gap:1.2rem}
.deck__pagecard{display:grid;gap:.8rem}
@media (min-width:900px){.deck__pagecard{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}}
.gdeck[data-mode="page"] .card{min-block-size:0}

/* the assumed buyer */
.exa{margin:1.4rem 0;padding:.9rem 1rem;border:1px solid var(--rule);border-radius:var(--s-r);background:var(--porcelain-2)}
.exa__sum{cursor:pointer;font-weight:600}
.exa__k{font-weight:600;margin:.8rem 0 .2rem}
.exa__list{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.exa__request{margin-block-start:1.1rem !important}       /* SITE-8 (D-563): the request's answers, set apart without a heading */

/* reduced motion: a short fade, nothing slides, drifts or draws itself */
@media (prefers-reduced-motion:reduce){
  .card{transition:opacity 150ms linear}
  .card.is-in-next,.card.is-in-back,.card.is-out-next,.card.is-out-back{transform:none!important}
  .asvg__band{animation:none}
  .rail__threads.is-pulse::before{animation:none}
  .rail__fill,.qbar__cell{transition:none}
  ::view-transition-old(deck-card),::view-transition-new(deck-card),::view-transition-old(deck-art),::view-transition-new(deck-art){animation:none}
}
@media print{.deck__nav,.deck__tools,.card__tap,.rail,.deck__art{display:none}.card{min-block-size:0;break-inside:avoid}}

/* link 72: the key under the Madinaty map - closed until asked for, one column, the marks drawn as the map draws them */
.amap__key{margin:.35rem 0 0;font-size:.74rem;line-height:1.45;color:var(--muted)}
.amap__key>summary{cursor:pointer;color:var(--cobalt);text-decoration:underline;text-underline-offset:2px;min-block-size:24px;display:inline-flex;align-items:center}
.amap__key>summary:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.amap__keybody{padding-block:.35rem .2rem}
.amap__keyh{font-family:var(--f-head);font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt-400);margin:.5rem 0 .2rem}
html[lang="ar"] .amap__keyh{font-family:var(--f-head-ar);font-size:.78rem;letter-spacing:0;text-transform:none}
.amap__keylist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.15rem .9rem}
.amap__keylist li{display:flex;align-items:center;gap:.4rem;color:var(--ink)}
.amap__keylist svg{flex:none}
.amap__keynote{margin:.2rem 0 0}

/* SITE-6 (the owner's third review, D-517; Mr. Ahmed Kamel's remarks, D-530) */
/* the cover: the words lead, the picture of the place follows */
.card__plate--after{margin:1rem calc(-1 * clamp(18px,3vw,32px)) 0;border-radius:0}
/* 2.0's reflection, plainly: the question first */
.reflect{margin:1rem 0 .2rem;padding:.75rem .9rem;border-inline-start:3px solid var(--sand-300,#D3C19A);background:var(--sand-050,#F7F1E3);border-radius:0 var(--s-r) var(--s-r) 0}
.reflect__k{margin:0 0 .25rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sand-700,#6B5434);font-weight:600}
html[lang="ar"] .reflect__k{letter-spacing:0;text-transform:none;font-size:.8rem}
.reflect__q{margin:0;font-family:var(--f-voice);font-size:1.12rem;line-height:1.4;color:var(--cobalt)}
html[lang="ar"] .reflect__q{font-family:var(--f-voice-ar)}
.reflect__t{margin:.35rem 0 .2rem;font-size:.85rem;color:var(--muted)}
.reflect__wb{font-size:.8rem}
.reflect__why p{margin:.3rem 0 0;font-size:.85rem}
/* a developer statement, at a glance: what was said, what it was checked against, what was found - no verdict colour */
.astmt3{display:grid;gap:0;background:var(--porcelain-2);border:1px solid var(--rule);border-radius:var(--s-r)}
.astmt3__row{padding:clamp(12px,2vw,18px) clamp(14px,2.4vw,22px)}
.astmt3__row+.astmt3__row{border-block-start:1px solid var(--rule)}
.astmt3__k{margin:0 0 .3rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt-400);font-weight:600}
html[lang="ar"] .astmt3__k{letter-spacing:0;text-transform:none;font-size:.82rem}
.astmt3__v{margin:0;font-size:1rem;color:var(--ink)}
.astmt3__res{font-weight:600;font-size:1.15rem}
/* the list: the count in the header opens it; each question adds to it */
.rail__list{cursor:pointer;background:none;border:0;padding:0;font:inherit;color:var(--cobalt);text-decoration:underline;text-underline-offset:3px;min-block-size:24px}
.v__add{display:inline-flex;align-items:center;min-block-size:24px;margin-block-start:.2rem;font-size:.82rem}
.v__add[aria-pressed="true"]{font-weight:600;text-decoration:none}
.v__add[aria-pressed="true"]::before{content:"\2713\00a0"}
.card__askrow{margin:.6rem 0 0;font-size:.82rem}
.v.is-pressing{background:var(--sand-050,#F7F1E3)}
.alist{margin:0;padding:clamp(14px,2.4vw,22px);background:var(--porcelain-2);border:1px solid var(--rule);border-radius:var(--s-r)}
.alist__ol{margin:.4rem 0 .8rem;padding-inline-start:1.2rem;display:grid;gap:.3rem;font-size:.92rem}
.asheet--list .qlist__h{margin:1rem 0 .3rem;font-size:.9rem;color:var(--cobalt)}
.qlist__ol{margin:0;padding-inline-start:1.2rem;display:grid;gap:.4rem}
.qlist__about{color:var(--muted);font-size:.85rem}
.qlist__rm{font-size:.8rem}
@media print{
  html.is-printing-list body>*:not(.asheet):not(.asheet__back){display:none!important}
  html.is-printing-list .asheet{position:static;inset:auto;box-shadow:none;max-block-size:none;overflow:visible}
  html.is-printing-list .asheet__back,html.is-printing-list .qlist__acts,html.is-printing-list .qlist__rm{display:none!important}
}
/* SITE-6: marks laid over a photograph by the page; one scale the buyer knows under each picture of the ground */
.plate__frame{position:relative}
.plate__over{position:absolute;inset:0;inline-size:100%;block-size:100%;pointer-events:none}
.ascale__host{display:grid;gap:.6rem}
.ascale{padding:.7rem .9rem;background:var(--porcelain-2);border:1px solid var(--rule);border-radius:var(--s-r)}
.ascale__wrap{margin:.2rem 0 .5rem}
.ascale__bar{position:relative;block-size:14px;border-radius:7px;border:1px solid var(--rule)}
.ascale__tick{position:absolute;inset-block-start:-6px;transform:translateX(-50%);inline-size:22px;block-size:22px;border-radius:50%;background:var(--tile,#fff);border:2px solid var(--ink);display:grid;place-items:center}
.ascale__tick i,.ascale__n{font-style:normal;font-size:.7rem;font-weight:700;color:var(--ink)}
.ascale__n{display:inline-grid;place-items:center;inline-size:18px;block-size:18px;border-radius:50%;border:1.5px solid var(--ink);margin-inline-end:.35rem}
.ascale__ends{display:flex;justify-content:space-between;margin:.3rem 0 0;font-size:.72rem;color:var(--muted)}
.ascale__anchors{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.9rem}
.ascale__v{font-variant-numeric:tabular-nums;color:var(--cobalt)}
/* SITE-6 (D-517 part 1; the interface rules 12): no decorative grid or line drawn over a picture of the ground - over a
   reading it would be taken for the data's own squares; the picture is shown as it is, its grain said in its caption */
.plate:not(.plate--tiles) .plate__frame::after,.card__plate .plate:not(.plate--tiles) .plate__frame::after{display:none}
/* SITE-10: a place's ground in its card */
.card__ground{margin:.3rem 0 1rem}
.card__groundq{font-weight:700;color:var(--cobalt);margin:0 0 .45rem;font-size:1rem;line-height:1.35}
.card__ground .plate__frame{aspect-ratio:1/1}
.card__ground .plate__img{inline-size:100%;block-size:auto;display:block}
.card__ground .plate__label{font-size:.86rem;line-height:1.45}
.card__ground .plate{max-inline-size:300px!important;margin-inline:auto}
/* SS-339: the example guide's up and down buttons for the living preferences were the glyph's own width (7 px); a finger
   needs a target of its own - 32 by 32 px, the glyph centred, the pair still side by side (WCAG 2.2, 2.5.8) */
.exa__mv .linkbtn{display:inline-flex;align-items:center;justify-content:center;min-inline-size:32px;min-block-size:32px}