/* Paperota website, how-to-use only: the every-button guide (guide.js). Tokens and shared parts are in p3.css. Old Safari safe: no :has, no dvh. */

.hw-pc{margin-block-start:var(--s7);max-width:48rem}
.hw-pc>.i{width:24px;height:24px}

/* ---------- the screen list: all in view, nothing hidden sideways ---------- */
.gtabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-block-end:var(--s6)}
.gtabs button{display:inline-flex;align-items:center;min-height:44px;padding:var(--s2) var(--s4);border:1.5px solid var(--line-2);border-radius:var(--r-pill);background:var(--white);color:var(--navy);font:500 var(--t-15)/1.2 var(--sans);cursor:pointer;transition:background-color .15s,border-color .15s}
.gtabs button:hover{border-color:var(--navy)}
.gtabs button[aria-selected=true]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.gtabs__lab{display:flex;align-items:center;min-height:44px;margin-inline-start:var(--s3);padding-inline-start:var(--s4);border-inline-start:1px solid var(--line-2);font-size:var(--t-s);color:var(--muted)}
@media (max-width:759px){.gtabs__lab{flex-basis:100%;margin-inline-start:0;padding-inline-start:0;border-inline-start:0;min-height:28px}}

/* ---------- one screen: the picture beside its notes ---------- */
.gscreen{display:grid;gap:var(--s4);align-items:start}
.gpanel{display:contents}
.ghead{order:-1}
.ghead p{margin-block-start:var(--s1);max-width:38em}
.gstage{width:min(100%,320px);margin-inline:auto}
@media (max-width:759px){.gstage{width:min(100%,272px)}.gcur{bottom:var(--s1)}}
.phone{position:relative;background:var(--white);border-radius:var(--r-shot);box-shadow:var(--sh-2)}
.phone .scr{position:relative;line-height:0}
.phone img{width:100%;border-radius:var(--r-shot)}
.hw-draw{margin-block-start:var(--s3);text-align:center;font-size:var(--t-xs);color:var(--muted)}

/* a numbered dot: the button is 44 px, only its middle 26 px is painted */
.spot{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:9px solid transparent;border-radius:50%;background:var(--navy);background-clip:padding-box;color:var(--white);font:700 var(--t-2xs)/1 var(--sans);font-variant-numeric:tabular-nums;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease)}
.spot::before{content:"";position:absolute;top:-2px;bottom:-2px;left:-2px;right:-2px;border:2px solid var(--white);border-radius:50%;box-shadow:0 2px 6px rgba(15,45,82,.35)}
.spot:hover{transform:scale(1.12)}
.spot[aria-pressed=true]{z-index:4;background-color:var(--accent);color:var(--navy);transform:scale(1.2)}
.spot:focus{z-index:5;outline:3px solid var(--navy);outline-offset:3px;box-shadow:0 0 0 3px var(--white)}
.spot:focus:not(:focus-visible){outline:none;box-shadow:none}
@media (max-width:759px){.spot{scroll-margin-block-end:220px;scroll-margin-block-start:calc(var(--hdr) + 16px)}}

/* the chosen button's note: on phones it stays in view while the picture scrolls */
.gcur{position:sticky;bottom:var(--s2);z-index:5;display:grid;gap:var(--s1);padding:var(--s3) var(--s4);background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh-2)}
.gcur h4{display:flex;align-items:center;gap:var(--s2);font-family:var(--sans);font-size:var(--t-b);line-height:1.35;letter-spacing:0}
.gcur h4 .n{display:flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--navy);font-size:var(--t-2xs);font-weight:700}
.gcur .dd{font-size:var(--t-15);line-height:1.5;min-height:3em}
html[lang=ar] .gcur .dd{line-height:1.7;min-height:3.4em}
.gnav{display:flex;gap:var(--s2);justify-content:space-between;margin-block-start:var(--s1)}
.gnav .btn{flex:1 1 0;padding-inline:var(--s3)}
.gnav .i{width:18px;height:18px}
.gnav .hw-back,.gfoot .i{transform:none}
.gnav .hw-back{transform:scaleX(-1)}
html[dir=rtl] .gnav .gnext .i,html[dir=rtl] .gfoot .i{transform:scaleX(-1)}
html[dir=rtl] .gnav .hw-back{transform:none}

@media (max-width:759px){
  /* phones: previous and next shrink to arrows beside the title, so the note covers little of the picture */
  .gcur{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s2);padding:var(--s2) var(--s3)}
  .gcur h4{grid-column:1;grid-row:1}
  .gcur .gnav{grid-column:2;grid-row:1;margin:0}
  .gcur .dd{grid-column:1 / -1}
  .gnav .btn{flex:0 0 44px;width:44px;min-width:44px;padding:0}
  .gnav .btn>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
}

/* every button in the list */
.glist{display:grid;gap:2px}
.glist button{display:flex;align-items:flex-start;gap:var(--s3);width:100%;min-height:44px;padding:var(--s2) var(--s3);border:0;border-radius:var(--r-btn-s);background:none;color:var(--text);font:400 var(--t-15)/1.45 var(--sans);text-align:start;cursor:pointer;transition:background-color .15s}
html[lang=ar] .glist button{line-height:1.6}
.glist button:hover{background:var(--pale-2)}
.glist button .n{display:flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--pale-2);color:var(--ink);font-size:var(--t-2xs);font-weight:700;font-variant-numeric:tabular-nums}
.glist button[aria-pressed=true]{background:var(--white);color:var(--ink);font-weight:700;box-shadow:var(--sh-1)}
.glist button[aria-pressed=true] .n{background:var(--navy);color:var(--white)}
.glist .d{display:none}
.hw-morel{font-size:var(--t-s);color:var(--muted)}
.gfoot{margin-block-start:var(--s2)}
.gfoot .i{width:18px;height:18px}

/* without script: every note in the list, every screen one after the other */
.nojs .glist .d{display:block;font-size:var(--t-s);color:var(--muted);font-weight:400}
.nojs .gcur,.nojs .gnav,.nojs .spot,.nojs .gfoot,.nojs .gtabs{display:none}
.nojs .gscr[hidden]{display:block!important;margin-block-start:var(--s8)}

@media (min-width:760px){
  .gscreen{grid-template-columns:minmax(0,300px) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:clamp(32px,5vw,72px);row-gap:var(--s4)}
  .gstage{grid-column:1;grid-row:1 / span 5;position:sticky;top:calc(var(--hdr) + var(--s4));width:100%;margin:0}
  .ghead,.gcur,.glist,.hw-morel,.gfoot{grid-column:2;order:0}
  .gcur{position:static;padding:var(--s4) var(--s5);box-shadow:var(--sh-1)}
  .gnav{justify-content:flex-start}
  .gnav .btn{flex:0 0 auto;min-width:112px}
}
@media (min-width:1100px){
  .gscreen{grid-template-columns:minmax(0,330px) minmax(0,1fr)}
  .glist{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.spot,.glist button,.gtabs button{transition:none}}
@media (forced-colors:active){.spot,.spot[aria-pressed=true]{border:2px solid ButtonText}.gtabs button[aria-selected=true]{border:2px solid Highlight}}

/* ---------- the camera, drawn light: same buttons at the same places as the real screen ---------- */
.hw-cam{position:relative;display:block;width:100%;padding-top:216.43%;overflow:hidden;background:var(--sample);border-radius:var(--r-shot);color:var(--ink);line-height:1.3;font-size:var(--t-cap)}
.hw-cam>span{position:absolute}
.hw-cam__top{top:0;left:0;right:0;height:9%;background:var(--white)}
.hw-ci{top:4.5%;display:flex;align-items:center;justify-content:center;width:13%;padding-top:13%;height:0;margin-top:-6.5%;margin-inline-start:-6.5%;color:var(--navy);font-size:var(--t-cap)}
.hw-ci>*{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.hw-ci .i{width:20px;height:20px}
.hw-ci.on{color:var(--soon)}
.hw-c-close{inset-inline-start:9.7%}.hw-c-auto{inset-inline-start:48.7%}.hw-c-hd{inset-inline-start:62.6%}.hw-c-grid{inset-inline-start:76.4%}.hw-c-tips{inset-inline-start:90.3%}
.hw-chip{top:13%;left:50%;transform:translateX(-50%);padding:var(--s1) var(--s3);background:var(--white);border-radius:var(--r-pill);box-shadow:var(--sh-1);font-weight:700;white-space:nowrap}
.hw-side{top:19%;left:0;right:0;text-align:center;color:var(--muted)}
.hw-card{top:33%;left:9%;right:9%;display:block;font-size:var(--t-cap)}
.hw-card .p3-idcard{padding:.8em}
.hw-modes{top:81.2%;left:0;right:0;display:flex;justify-content:center;gap:var(--s1);white-space:nowrap}
.hw-modes>span{padding:var(--s1) var(--s2);border-radius:var(--r-pill);color:var(--text)}
.hw-modes>span.on{background:var(--navy);color:var(--white);font-weight:700}
.hw-gal,.hw-shut,.hw-noback{top:93.4%;display:flex;align-items:center;justify-content:center}
.hw-gal{inset-inline-start:13.3%;width:40px;height:40px;margin-top:-20px;margin-inline-start:-20px;background:var(--white);border-radius:var(--r-btn-s);box-shadow:var(--sh-1);color:var(--navy)}
.hw-gal .i{width:20px;height:20px}
.hw-shut{inset-inline-start:38.2%;width:50px;height:50px;margin-top:-25px;margin-inline-start:-25px;border:4px solid var(--navy);border-radius:50%;background:var(--white)}
.hw-noback{inset-inline-start:75%;width:42%;height:38px;margin-top:-19px;margin-inline-start:-21%;background:var(--white);border-radius:var(--r-btn-s);box-shadow:var(--sh-1);font-size:var(--t-2xs);font-weight:500;text-align:center}

/* ---------- something not working ---------- */
.hw-help{padding-block:var(--s7)}
.hw-help__in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s6)}
.hw-help__l{display:flex;flex-wrap:wrap;gap:0 var(--s5)}

/* the Arabic font arrives late on a slow phone and the title gains a line: its room is kept */
@media (max-width:479px){html[lang=ar] main .p3-intro__h{min-height:2.6em}}