/* GENERATED by scripts/build_d2_pages.js from marketing/design_system/d2_pages_layout.css. Do not edit. */
/* Page layout for the lane D2 pages (not part of the system: placement only, token values only). Built into
   app/d2-pages.css after components.d2.css by scripts/build_d2_pages.js. */

/* /lammah (KAN-1750) */
.pg-lammah .s0{position:absolute;width:0;height:0;overflow:hidden}
.lm-hero{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
.lm-hero h1{margin:0;text-wrap:balance}
@media (min-width:900px){.lm-hero{flex-direction:row;align-items:center;gap:var(--space-7)}}
.lm-stack{display:flex;flex-direction:column;gap:var(--space-6)}
.lm-note{margin:0;max-width:var(--reading-max);font-size:13px;line-height:20px;color:var(--ink-muted)}
.lm-quiz{max-width:760px}
.lm-faq{max-width:var(--reading-max)}
.lm-cta{display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}

/* Narrow single-column pages: /live, /ok/<token> (KAN-1752) */
.d2-narrow{max-width:560px;margin-inline:auto;padding:var(--space-5) var(--space-4) var(--space-7);display:flex;flex-direction:column;gap:var(--space-4)}
.d2-narrow h1{margin:0;font-size:24px;line-height:34px;font-weight:600}
.d2-narrow h2{margin:var(--space-3) 0 0;font-size:19px;line-height:28px;font-weight:600}
.d2-narrow p{margin:0;font-size:16px;line-height:27px}
.d2-narrow .nb-card a:not(.nb-btn){color:var(--action);text-underline-offset:3px}
.d2-narrow .nb-btn-block{margin-top:var(--space-2)}
.d2-narrow .muted{color:var(--ink-muted);font-size:15px;line-height:24px}

/* /live: the question and its options come from nb-lammah-live-student.js as .opt buttons; they take the
   AnswerOption look from tokens here until that module emits .nb-opt (lane E). */
.pg-live .q{font-size:19px;line-height:30px;font-weight:600;white-space:pre-line}
.pg-live .ok{font-weight:600;color:var(--correct);margin-top:var(--space-3)}
.pg-live #lv-opts{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3)}
.pg-live .opt{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:56px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--hairline);background:var(--surface);color:var(--ink);font:inherit;font-size:16px;line-height:24px;text-align:start;cursor:pointer;transition:border-color var(--nb-fast) var(--nb-ease)}
.pg-live .opt b{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-full);background:var(--surface-sunken);color:var(--ink-muted);font-size:15px;font-weight:600}
.pg-live .opt[aria-pressed="true"]{border:2px solid var(--brand);background:var(--brand-tint);padding:calc(var(--space-3) - 1px) calc(var(--space-4) - 1px)}
.pg-live .opt[aria-pressed="true"] b{background:var(--brand);color:var(--on-action)}
.pg-live .opt:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.pg-live .opt:disabled{cursor:default}

/* /ok/<token> parent consent */
.pg-consent .nb-field{margin-top:var(--space-3)}
.pg-consent .nb-checkrow{margin-top:var(--space-3)}
.pg-consent .err{color:var(--wrong);font-size:15px;line-height:24px;min-height:24px;margin-top:var(--space-2)}
.pg-consent .ok{background:var(--correct-tint);border-color:transparent}
.pg-consent .err:empty{min-height:0;margin:0}
.pg-consent #b-yes{margin-top:var(--space-5)}
.pg-consent .d2-confirm{margin-top:var(--space-3)}
.pg-consent .foot{text-align:center;font-size:13px;color:var(--ink-muted)}

/* /auth-email sign-in landing */
.pg-auth h1{margin:0;font-size:24px;line-height:34px;font-weight:600}
.pg-auth .nb-solo-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.pg-auth form{align-self:stretch;display:flex;flex-direction:column;gap:var(--space-3);margin:0}
.pg-auth p{margin:0;color:var(--ink-secondary)}

/* /embed/calculator (calc-widget): an embed, so it keeps its own size: 480px max, 8px padding, compact 44px controls.
   The widget script colours results with --green/--red/--yellow/--indigo/--blue-light: mapped to tokens here.
   Red is for wrong answers only, so the needed value stays ink; --correct only with «✓ كافي» (Design review 22260 item 7). */
.pg-calc{--green:var(--correct);--red:var(--ink);--yellow:var(--ink);--indigo:var(--ink);--blue:var(--action);--blue-light:var(--action);background:transparent;padding:8px;max-width:480px;margin:0 auto;font-size:15px;line-height:25px}
html.nb-light .pg-calc{background:var(--canvas)}
.pg-calc .calc-shell{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-4)}
.pg-calc .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-4)}
.pg-calc .calc-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:var(--space-4)}
@media (max-width:400px){.pg-calc .calc-grid,.pg-calc .calc-row3{grid-template-columns:1fr}}
.pg-calc .calc-field,.pg-calc .weight-input{display:flex;flex-direction:column;gap:6px;min-width:0}
.pg-calc .calc-field label{font-size:13px;line-height:20px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}
.pg-calc .weight-input label{font-size:13px;line-height:20px;font-weight:500;color:var(--ink-muted)}
.pg-calc select,.pg-calc input{min-height:var(--tap-min);width:100%;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:15px;font-weight:500;padding:0 var(--space-3)}
.pg-calc input{text-align:center;background:var(--surface-sunken);border-color:var(--hairline);font-weight:600}
.pg-calc select:focus-visible,.pg-calc input:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.pg-calc input:disabled{opacity:.6;cursor:not-allowed}
.pg-calc .calc-value-pill{background:var(--brand-tint);color:var(--action);padding:2px 8px;border-radius:var(--radius-full);font-size:13px;line-height:20px;font-weight:600;white-space:nowrap}
.pg-calc .weight-sum{text-align:center;font-size:13px;color:var(--ink-muted);margin:-8px 0 var(--space-3)}
.pg-calc .weight-sum.ok{color:var(--correct)}
.pg-calc .weight-sum.bad{color:var(--wrong)}
.pg-calc .calc-result-card{background:var(--surface-sunken);border-radius:var(--radius-md);padding:18px 14px;text-align:center;margin-top:10px}
.pg-calc .calc-result-label{font-size:13px;line-height:20px;color:var(--ink-muted);margin-bottom:6px;font-weight:500}
.pg-calc .calc-result-sub{font-size:13px;line-height:20px;color:var(--ink-secondary);margin-top:4px}
.pg-calc #result-value{width:130px;height:130px;margin:4px auto 10px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--action);color:var(--on-action);font-size:24px;font-weight:600;line-height:1}
/* 24px = title-2 on the type scale (no font-size token variable exists; the scale lives in classes). 0-9 digits are wider: «100.00%» must fit the 130px circle with >= 8px each side; at 28px it measured 119px (5.4px each side), so 24px (Design re-review 22268). */
.pg-calc #needed-value{display:flex;align-items:center;justify-content:center;margin:4px auto 10px;font-weight:600;line-height:1}
.pg-calc .calc-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline)}
.pg-calc .calc-breakdown-item{text-align:center;font-size:13px;line-height:20px;color:var(--ink-muted)}
.pg-calc .calc-breakdown-num{display:block;font-size:15px;font-weight:600;color:var(--action);margin-bottom:2px}
.pg-calc .calc-note{margin-top:6px;color:var(--ink-muted)}
.pg-calc .nb-attr{display:flex;align-items:center;justify-content:center;min-height:var(--tap-min);margin-top:var(--space-2);font-size:13px;font-weight:600;color:var(--action);text-decoration:none}
.pg-calc .nb-attr:hover{text-decoration:underline}

/* /munassiq-qudrat-tahseeli article (KAN-1752): a guide in bands (white/alt, tint for the short answer and the CTA),
   content at 760px; a card or well only for the examples (.lp-ex) and the print templates (.lp-tpl). */
.d2-art.nb-prose{max-width:none}
.d2-art>.sec{display:flex;flex-direction:column;gap:var(--space-3);padding-inline:max(16px,calc((100% - 760px) / 2))}
.d2-art>.d2-hero{align-items:flex-start}
.d2-art .d2-over{margin:0;color:var(--action)}
.d2-art h1{margin:0;font-size:32px;line-height:44px;font-weight:600;text-wrap:balance}
@media (max-width:600px){.d2-art h1{font-size:28px;line-height:38px}}
.d2-art .lp-h{margin:0 0 var(--space-2);font-size:24px;line-height:34px;font-weight:600}
.d2-art .lp-sub{margin:0;font-size:18px;line-height:30px;color:var(--ink-secondary)}
.d2-art .lp-b{margin:0;font-weight:600;color:var(--ink)}
.d2-art .lp-center{text-align:center;align-items:center}
.d2-art .lp-muted{color:var(--ink-muted)}
.d2-art .lp-link{display:inline-flex;align-items:center;min-height:var(--tap-min);color:var(--action);font-weight:500;text-underline-offset:3px}
.d2-art>.lp-links{display:flex;flex-wrap:wrap;gap:0 var(--space-4);justify-content:center;padding:var(--space-6) 16px}
.d2-art .lp-ex{background:var(--surface-sunken);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start}
.d2-art .sec-alt .lp-ex{background:var(--surface);border:1px solid var(--hairline)}
.d2-art .lp-tpl{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.d2-art .lp-fill{color:var(--ink-muted);font-size:15px}
.d2-art .nb-table td.lp-blank{min-width:4em;height:2.4em}
.d2-art .lp-print{align-self:flex-start}
.d2-art .lp-faq summary h3{margin:0;font-size:17px;line-height:26px;font-weight:500}
.d2-art .lp-faq details>div{padding-bottom:var(--space-4)}
.d2-art .lp-faq details>div p{margin:0}
#nb-print-area{display:none}

/* KAN-1898 (Samer 12 Nov): /ok/<token> was one line in a small box on a white screen (expired or missing link).
   Now a Solo page: the section-alt band with the graph-paper texture, the lamp on the card's top edge, the card raised;
   the short state cards (loading, expired, used, declined, error) carry their icon tile above the sentence. */
body.pg-consent{background-color:var(--section-alt);background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);background-size:32px 32px;min-height:100vh}
.pg-consent .d2-narrow{padding-top:var(--space-6)}
/* KAN-1899 B4: the lamp stands on the card (its foot was cut by the card's top edge): no overlap, the foot touches the border */
.pg-consent .d2-lamp{width:120px;margin:var(--space-5) auto -1px;position:relative;z-index:1}
.pg-consent .d2-lamp svg{display:block;width:100%;height:auto}
.pg-consent .nb-card{position:relative;z-index:0;padding:var(--space-6);box-shadow:var(--shadow-raised);border-radius:var(--radius-xl)}
.pg-consent .d2-state{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center}
.pg-consent .d2-state-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-lg);background:var(--brand-tint);color:var(--action)}
.pg-consent .d2-state .nb-btn-block{align-self:stretch}
.pg-consent #v-loading{display:flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:120px;color:var(--ink-muted)}
.pg-consent #v-loading::before{content:"";width:24px;height:24px;border-radius:var(--radius-full);border:3px solid var(--hairline);border-top-color:var(--action);animation:d2spin 900ms linear infinite}
@keyframes d2spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.pg-consent #v-loading::before{animation:none}}
/* KAN-1899 B8: at 1440 the card sat at the top of an empty grid band; the group (logo, lamp, card, links) is centred on the screen */
@media (min-width:1024px){.pg-consent .d2-narrow{max-width:600px;padding-top:var(--space-8);min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding-bottom:var(--space-8)}}

/* KAN-1898: /munassiq-qudrat-tahseeli (the school guide on the D2 article frame) opens like the other school guides:
   its hero and its own short answer side by side from 1024px on the graph-paper band. */
.d2-art>.d2-hero{background-color:var(--section-alt);background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);background-size:32px 32px}
@media (min-width:1024px){
  .d2-art{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .d2-art>*{grid-column:1 / -1}
  .d2-art>.d2-hero{grid-column:1 / -1;grid-row:1;padding-block:var(--space-9);padding-inline-start:max(32px,calc((100% - var(--content-max)) / 2));padding-inline-end:calc(50% + var(--space-6))}
  .d2-art>.d2-hero h1{font-size:36px;line-height:48px}
  .d2-art>.d2-hero+.lp-card{grid-column:2;grid-row:1;align-self:center;z-index:1;margin-inline-end:max(32px,calc((100vw - var(--content-max)) / 2 - 8px));padding:var(--space-6);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-raised)}
}