/*  7q.css — generated by build-standalone.js. Do not edit by hand.
 *  Lifted from the modules at build time so the browser has these styles
 *  before first paint rather than after.
 */

/* ===== the cards, tokens and base type  (7q-cards.js) ===== */

  :root{
    --orient:#2f6da8;
    --observe:#5c8c2a;
    --interpret:#c2872a;
    --understand:#c9a227;
    --connect:#2e8b8b;
    --respond:#bf3f2e;
    --prepare:#6b7a63;

    --paper:#FBFBFA;
    --paper-veil:rgba(251,251,250,.95);
    --page:var(--paper);
    --card:#ffffff;
    --ink:#1A1A1A;
    --ink-soft:#4a4a4a;
    --muted:#726D69;
    --faint:#a49c8e;
    --rule:#E6E3DE;

    --sans:"Lato","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55}
  .wrap{max-width:44rem;margin:0 auto;padding:1.5rem 1.1rem 4rem}

  /* Wider cards on a real keyboard. Phones and portrait tablets keep the
     narrow column; landscape tablets and laptops get 25% more room, and
     everything inside the card uses it — prompt, notes and answer box alike.
     Only applies to pages that carry the cards, not to prose pages. */
  @media (min-width:1024px){
    .wrap--cards{max-width:55rem}
  }

  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:700;margin:0 0 .5rem}
  .study-head{border-bottom:1px solid var(--rule);padding-bottom:1.1rem;margin-bottom:1.3rem}
  .ref-row{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
  .ref-static{font-family:var(--serif);font-size:1.5rem;flex:1 1 13rem;min-width:0}
  #reference{
    font-family:var(--serif);font-size:1.5rem;font-weight:400;color:var(--ink);
    border:none;border-bottom:1px dashed #cfc8ba;background:transparent;
    padding:.15rem .1rem;flex:1 1 13rem;min-width:0;
  }
  #reference:focus{outline:none;border-bottom-color:var(--orient);background:#fffdf8}
  #reference::placeholder{color:#b8b0a2}
  .genre-tag{
    font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
    color:var(--muted);border:1px solid var(--rule);border-radius:2px;
    padding:.28rem .55rem;background:#fff;cursor:pointer;font-family:var(--sans);
  }
  .genre-tag:hover{border-color:var(--observe);color:var(--observe)}
  .genre-tag:focus-visible{outline:2px solid var(--observe);outline-offset:2px}
  .genre-tag[disabled]{cursor:default;opacity:.9}
  .genre-tag[disabled]:hover{border-color:var(--rule);color:var(--muted)}
  .before-begin{margin:.9rem 0 0;font-size:.88rem;color:var(--muted);font-style:italic}
  body.discuss .before-begin{display:none}
  .seam{
    margin:.6rem 0 0;font-size:.82rem;color:var(--observe);
    border-left:3px solid var(--observe);padding-left:.6rem;
  }
  .seam[hidden]{display:none}

  .modes{display:flex;margin:0 0 1.5rem;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:#fff;width:fit-content}
  .modes button{
    font-family:var(--sans);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
    font-weight:700;color:var(--muted);background:transparent;border:none;padding:.5rem 1.15rem;cursor:pointer;
  }
  .modes button[aria-pressed="true"]{background:var(--orient);color:#fff}
  /* a visible divider so the two read as two controls even when neither is
     hovered — the pill has no internal border of its own */
  .modes button + button{border-left:1px solid var(--rule)}
  .modes button[aria-pressed="true"] + button{border-left-color:var(--orient)}
  .modes button:focus-visible{outline:2px solid var(--orient);outline-offset:-2px}

  .card{
    background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--accent);
    border-radius:2px;margin-bottom:.7rem;overflow:hidden;
  }
  .card-h{margin:0;font-size:inherit;font-weight:inherit}
  .card-toggle{
    display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap;width:100%;
    background:transparent;border:none;text-align:left;cursor:pointer;
    padding:.95rem 1.1rem;font-family:var(--sans);
  }
  .card-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
  .qnum{font-size:1.7rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1}
  .phase{font-size:.95rem;font-weight:700;font-style:italic;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
  .card-title{font-size:1rem;font-weight:700;color:var(--ink)}
  .status{margin-left:auto;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--faint);white-space:nowrap;align-self:center}
  .status.done{color:var(--accent)}
  .peek{flex-basis:100%;font-size:.85rem;color:var(--muted);font-style:italic;margin-top:.3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* the peek previews a closed card; once it's open the answer is right
     there in the box, so showing it in the header just doubles the text */
  .card-toggle[aria-expanded="true"] .peek{display:none}
  .card-body{padding:0 1.1rem 1.2rem}
  .xref{font-size:.76rem;color:var(--muted);margin:0 0 .85rem;font-style:italic}
  .xref b{font-style:normal;font-weight:700;letter-spacing:.03em}
  .prompt{margin:0;color:var(--ink-soft)}
  .subnote{font-size:.82rem;font-style:italic;color:var(--muted);margin:.5rem 0 0}

  .answer-head{display:flex;align-items:baseline;gap:.6rem;margin:1.1rem 0 .35rem}
  .answer-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;font-weight:700;color:var(--muted)}
  .counter{
    margin-left:auto;font-size:.7rem;letter-spacing:.06em;
    color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  .counter.over{color:var(--interpret);font-weight:700;}
  @media print{ .counter{display:none} }
  textarea{
    width:100%;font-family:var(--sans);font-size:1rem;line-height:1.6;color:var(--ink);
    background:#fffdf9;border:1px solid var(--rule);border-radius:2px;
    padding:.7rem .75rem;min-height:7rem;resize:none;overflow:hidden;
  }
  textarea:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
  textarea::placeholder{color:#bdb5a6}

  /* filled, non-editable answer */
  .answer-block{
    background:#fffdf9;border:1px solid var(--rule);border-radius:2px;
    padding:.7rem .75rem;font-size:1rem;line-height:1.6;color:var(--ink);white-space:pre-wrap;
  }

  .helpers{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem;align-items:center}
  .ghost{
    font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--accent);
    background:transparent;border:1px solid #d9d3c6;border-radius:999px;padding:.32rem .8rem;cursor:pointer;
  }
  .ghost:hover{border-color:var(--accent)}
  .ghost:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .ghost[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
  .tools{margin-left:auto;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
  /* same shape and size as "If you're stuck", but in ink rather than the
     phase colour, so the help prompt stays primary and these read as reference */
  .tools a{
    font-family:var(--sans);font-size:.78rem;font-weight:600;line-height:1.2;
    color:var(--ink-soft);text-decoration:none;
    border:1px solid #d9d3c6;border-radius:999px;padding:.32rem .8rem;
    white-space:nowrap;
  }
  .tools a:hover{border-color:var(--accent);color:var(--accent)}
  .tools a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .sq-stage .tools{margin-left:0}
  /* At table distance in Discuss these read better a little larger, but only
     once there is room for it. Q1 carries three pills and Book overview adds
     an arrow glyph, and Discuss also pads the card body wider than Prepare
     does, so at the larger size the third pill drops to a row of its own on a
     phone. Sized for the narrow case here and grown at 640px, the same way
     the dots below are handled. */
  @media (max-width:639px){
    .sq-stage .tools{gap:.35rem}
    .sq-stage .tools a{padding:.32rem .75rem}
  }
  @media (min-width:640px){
    .sq-stage .tools a{font-size:.84rem;padding:.38rem .95rem}
  }
  .ext::after{content:" ↗";font-size:.8em;opacity:.6}

  .stuck{
    margin-top:.9rem;background:#f7f4ec;border:1px solid var(--rule);border-left:3px solid #cfc8ba;
    border-radius:2px;padding:.8rem .9rem;font-size:.9rem;font-style:italic;color:var(--ink-soft);
  }
  .addon{
    margin-top:1.1rem;border:1px solid var(--rule);border-left:3px solid var(--observe);
    border-radius:2px;padding:.85rem .9rem;background:#f8faf4;
  }
  .addon h4{margin:0 0 .5rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--observe)}
  .addon ul{margin:0;padding-left:1.1rem;font-size:.92rem;color:var(--ink-soft)}
  .addon li{margin-bottom:.35rem}
  .addon p{margin:.6rem 0 0;font-size:.8rem;font-style:italic;color:var(--muted)}

  /* Discuss */
  .sq-discuss{display:none}
  body.discuss .sq-prepare{display:none}
  body.discuss .sq-discuss{display:block}
  .sq-stage .card{margin-bottom:0}
  .sq-stage .card-toggle{cursor:default;padding:1.5rem 1.35rem .2rem}
  .sq-stage .qnum{font-size:2.3rem}
  .sq-stage .phase{font-size:1.1rem}
  .sq-stage .card-title{font-size:1.2rem}
  .sq-stage .status,.sq-stage .peek,.sq-stage .xref{display:none}
  .sq-stage .card-body{padding:0 1.35rem 1.5rem}
  .sq-stage .prompt{font-size:1.15rem;line-height:1.5}
  .my-answer{
    margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--rule);
    font-size:1.05rem;white-space:pre-wrap;color:var(--ink);
  }
  .my-answer:empty::before{
    content:"Nothing written here. Listen first; you can add notes after.";
    color:var(--muted);font-style:italic;font-size:.95rem;
  }
  .nav{display:flex;align-items:center;gap:.8rem;margin-top:1.1rem;flex-wrap:wrap;justify-content:center}
  /* on a phone the dots plus two arrows won't fit on one line, so the dots
     take their own row above the arrows rather than shrinking */
  @media (max-width:639px){
    .dots{order:-1;flex-basis:100%;justify-content:center;margin:0 0 .9rem}
  }
  .arrow{
    font-family:var(--sans);font-size:1.15rem;line-height:1;color:var(--muted);
    background:#fff;border:1px solid var(--rule);border-radius:999px;
    width:2.6rem;height:2.6rem;cursor:pointer;flex:none;
  }
  .arrow:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
  .arrow:disabled{opacity:.35;cursor:default}
  .arrow:focus-visible{outline:2px solid var(--orient);outline-offset:2px}
  .dots{display:flex;gap:.4rem;margin:0 auto}
  .dot{
    width:1.8rem;height:1.8rem;border-radius:999px;padding:0;cursor:pointer;
    font-family:var(--sans);font-size:.8rem;font-weight:700;line-height:1;
    background:#fff;color:var(--dot);border:2px solid var(--dot);
    opacity:.55;transition:opacity .12s,transform .12s;
  }
  .dot:hover{opacity:.85}
  .dot[aria-current="true"]{background:var(--dot);color:#fff;opacity:1;transform:scale(1.12)}
  .dot:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  /* the row has to clear two arrows on a narrow phone, so the dots grow
     once there's room rather than being sized for the widest case */
  @media (min-width:640px){
    .dots{gap:.6rem}
    .dot{width:2.3rem;height:2.3rem;font-size:.95rem}
  }

  /* Hourglass map */
  .hourglass-wrap{margin:2.4rem 0 0}
  .hourglass{display:block;width:100%;max-width:21rem;margin:0 auto;height:auto}
  .hg-glass{fill:none;stroke:#4a4a4a;stroke-width:3;stroke-linejoin:round}
  .hg-arrow{
    fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
    opacity:.9;
  }
  .hg-item{cursor:pointer}
  .hg-item text{transition:opacity .12s}
  .hg-item:hover text{opacity:.72}
  .hg-item:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  /* white type on colored sand, with a dark halo so it holds up on
     the lighter golds as well as the deep blues */
  .hg-band-label{
    fill:#fff;font-family:var(--sans);font-weight:700;letter-spacing:.11em;
    paint-order:stroke;stroke:rgba(28,24,18,.42);stroke-width:3.5;stroke-linejoin:round;
  }
  .hg-q{
    fill:#fff;font-family:var(--sans);font-style:italic;
    paint-order:stroke;stroke:rgba(28,24,18,.42);stroke-width:3;stroke-linejoin:round;
  }
  .hg-title{
    text-align:center;font-family:var(--serif);font-size:1.15rem;font-weight:400;
    color:var(--ink);margin:0 0 .9rem;
  }
  .hg-cap{text-align:center;font-size:.78rem;color:var(--muted);font-style:italic;margin:.6rem 0 0}
  body.discuss .hourglass-wrap{display:none}

  .mark{text-align:center;margin-top:2.4rem;font-family:var(--serif);font-size:.9rem;color:var(--muted)}
  .mark span{color:var(--observe);font-weight:700}
  .note{margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--rule);font-size:.8rem;color:var(--muted);line-height:1.6}

  @media print{
    :root{--paper:#fff;--ink:#000}
    body{background:var(--paper);color:var(--ink);font-size:11pt}
    body.discuss .sq-prepare{display:block}
    body.discuss .sq-discuss{display:none}
    .wrap{max-width:none;padding:0}
    .modes,.helpers,.note,.genre-tag,.status,.peek,.mark,.sq-noprint{display:none}
    #reference{border:none;font-size:16pt}
    .card-body[hidden]{display:block!important}
    /* Browsers drop colour fills when printing unless told not to. The
       hourglass and the cards' phase bars are meaning, not decoration, so
       they are opted back in. */
    .hourglass,.hourglass *,.card,.addon,.dot{
      -webkit-print-color-adjust:exact;print-color-adjust:exact;
    }
    /* An unanswered question prints as the question alone; :placeholder-shown
       is true exactly when the box is empty, so no bookkeeping is needed. */
    textarea:placeholder-shown{display:none}
    .card-body:has(textarea:placeholder-shown) .answer-head{display:none}
    .card{border:1px solid #ccc;border-left:4px solid var(--accent);break-inside:avoid;page-break-inside:avoid;margin-bottom:.5rem}
    .card-toggle{padding-bottom:.2rem}
    .stuck{display:none}
    textarea{background:#fff;border-color:#ddd;min-height:5.5rem}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ===== the guide panels  (7q-guides.js) ===== */
/* ---------- Panel ---------- */
  #sevenq-panel{
    border:none;padding:0;background:var(--card);color:var(--ink);
    width:min(38rem,100%);max-height:86vh;border-radius:4px;
    box-shadow:0 12px 40px rgba(40,34,22,.28);
  }
  #sevenq-panel::backdrop{background:rgba(44,38,28,.42)}
  .panel-head{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--paper-veil);backdrop-filter:blur(6px)}
  .panel-eyebrow{font-size:.66rem;text-transform:uppercase;letter-spacing:.13em;font-weight:700;color:var(--faint);display:block;margin-bottom:.15rem}
  .panel-title{font-family:var(--serif);font-size:1.2rem;margin:0;font-weight:400}
  .panel-close{
    margin-left:auto;background:transparent;border:1px solid var(--rule);border-radius:999px;
    width:2rem;height:2rem;font-size:1.05rem;line-height:1;color:var(--muted);cursor:pointer;flex:none;
  }
  .panel-close:hover{border-color:var(--orient);color:var(--orient)}
  .panel-body{padding:1.1rem 1.15rem 1.5rem;overflow-y:auto;max-height:calc(86vh - 4rem);font-size:.96rem}
  .panel-body h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:1.4rem 0 .5rem}
  .panel-body h3:first-child{margin-top:0}
  .panel-body p{margin:0 0 .8rem;color:var(--ink-soft)}
  .panel-body ol,.panel-body ul{margin:0 0 .8rem;padding-left:1.2rem;color:var(--ink-soft)}
  .panel-body li{margin-bottom:.4rem}
  /* sits with the add-on questions it refers to, above the rule that
     separates them from the Dig deeper list */
  .addon-note{font-size:.8rem;color:var(--muted);font-style:italic;margin:0 0 1.2rem}
  .learn{margin:0;padding-left:1.1rem}
  .learn li{margin-bottom:.35rem}
  .learn a{color:var(--orient);text-decoration:none;border-bottom:1px solid #ddd6c8}
  .learn a:hover{border-bottom-color:var(--orient)}
  .panel-foot{margin-top:1.2rem;padding-top:.8rem;border-top:1px solid var(--rule);font-size:.8rem;color:var(--muted);font-style:italic}
  .choice{display:block;width:100%;text-align:left;font-family:var(--sans);font-size:1rem;
    background:#fff;border:1px solid var(--rule);border-radius:2px;padding:.7rem .8rem;margin-bottom:.5rem;cursor:pointer}
  .choice:hover{border-color:var(--observe)}
  .choice b{display:block}
  .choice span{font-size:.8rem;color:var(--muted)}
  .tip{
    background:#f7f4ec;border-left:3px solid #cfc8ba;border-radius:2px;
    padding:.65rem .8rem;font-size:.88rem;margin:0 0 .9rem!important;
  }
  .qref{width:100%;border-collapse:collapse;font-size:.82rem;margin-bottom:.9rem}
  .qref th{
    text-align:left;font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;
    color:var(--muted);border-bottom:1px solid var(--rule);padding:.35rem .4rem;
  }
  .qref td{border-bottom:1px solid #f0ece3;padding:.4rem;color:var(--ink-soft);vertical-align:top}
  .qref td:first-child{color:var(--faint);font-weight:700}

  /* Two-sided timeline */
  .tl{display:flex;overflow-x:auto;padding:.4rem 0 .8rem;-webkit-overflow-scrolling:touch}
  .tl-item{flex:none;width:9.5rem;display:flex;flex-direction:column;text-align:center}
  .tl-slot{min-height:4.2rem;padding:0 .4rem;display:flex;flex-direction:column;justify-content:flex-end}
  .tl-bot{justify-content:flex-start;padding-top:.35rem}
  .tl-slot b{font-size:.86rem;line-height:1.25;color:var(--ink)}
  .tl-slot span{font-size:.72rem;color:var(--muted);line-height:1.3;margin-top:.1rem}
  .tl-axis{height:1.5rem;position:relative;display:flex;align-items:center}
  .tl-axis::before{content:"";position:absolute;left:0;right:0;height:3px;background:#ded8ca}
  .tl-dot{
    position:relative;margin:0 auto;width:.7rem;height:.7rem;border-radius:999px;
    background:#8a9b6b;border:2px solid #fff;
  }
  .tl-ref{font-size:.68rem;font-style:italic;color:var(--faint);padding:.2rem .3rem}
  .tl-item.here .tl-dot{background:var(--orient);transform:scale(1.3)}
  .tl-item.here .tl-slot b{color:var(--orient)}
  .tl-item.here .tl-ref{color:var(--orient)}

  .strip{display:flex;overflow-x:auto;padding-bottom:.6rem;-webkit-overflow-scrolling:touch}
  .stage-i{flex:none;width:8.5rem;padding:0 .7rem;border-left:2px solid var(--rule)}
  .stage-i.here{border-left-color:var(--orient);background:#f6f9fc}
  .stage-i b{display:block;font-size:.88rem}
  .stage-i span{display:block;font-size:.72rem;color:var(--muted);margin-top:.15rem}

  /* ---------- Scripture ----------
     Set in the serif at reading size, without verse numbers, so the passage
     reads as prose rather than as a reference work. Poetry keeps the line
     breaks the BSB files carry, which is why this is pre-wrap. */
  .scripture{
    font-family:var(--serif);font-size:1.08rem;line-height:1.7;color:var(--ink);
    white-space:pre-wrap;margin:0 0 1rem;
  }
  .scripture-note{
    margin:0;padding-top:.8rem;border-top:1px solid var(--rule);
    font-size:.78rem;color:var(--faint);font-style:italic;
  }
  /* the waiting and failure states share one shape so the panel does not
     change height as it moves between them */
  .scripture-msg{color:var(--muted);font-style:italic;margin:0}

  @media (max-width:640px){
    #sevenq-panel{width:100%;max-width:100%;margin:0;position:fixed;bottom:0;left:0;border-radius:10px 10px 0 0;max-height:88vh}
    .panel-body{max-height:calc(88vh - 4rem)}
  }

/* ===== the My studies library  (7q-storage.js) ===== */

  #sq-library{
    border:none;padding:0;background:var(--paper);color:var(--ink);
    width:min(30rem,100%);max-height:86vh;border-radius:4px;
    box-shadow:0 12px 40px rgba(40,34,22,.28);
  }
  #sq-library::backdrop{background:rgba(44,38,28,.42)}
  .sq-lib-head{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--rule);background:var(--paper-veil)}
  .sq-lib-head h2{font-family:var(--serif);font-size:1.2rem;margin:0;font-weight:400}
  .sq-lib-close{margin-left:auto;background:transparent;border:1px solid var(--rule);border-radius:999px;width:2rem;height:2rem;font-size:1.05rem;color:var(--muted);cursor:pointer}
  .sq-lib-close:hover{border-color:var(--orient);color:var(--orient)}
  .sq-lib-body{padding:.6rem;overflow-y:auto;max-height:calc(86vh - 4rem)}
  .sq-lib-empty{padding:2rem 1rem;text-align:center;color:var(--muted);font-size:.9rem;font-style:italic}
  .sq-lib-row{
    display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
    background:#fff;border:1px solid var(--rule);border-radius:2px;
    padding:.65rem .8rem;margin-bottom:.5rem;cursor:pointer;font-family:var(--sans);
  }
  .sq-lib-row:hover{border-color:var(--orient)}
  .sq-lib-main{flex:1;min-width:0}
  .sq-lib-ref{font-family:var(--serif);font-size:1.02rem;color:var(--ink);display:block}
  .sq-lib-meta{font-size:.76rem;color:var(--muted);margin-top:.15rem}
  .sq-lib-del{
    flex:none;background:transparent;border:1px solid var(--rule);border-radius:999px;
    width:1.9rem;height:1.9rem;color:var(--faint);cursor:pointer;font-size:.85rem;
    font-family:var(--sans);padding:0;
  }
  .sq-lib-del:hover{border-color:#bf3f2e;color:#bf3f2e}
  .sq-lib-del.armed{
    width:auto;padding:0 .7rem;border-radius:999px;
    background:#bf3f2e;border-color:#bf3f2e;color:#fff;
    font-size:.74rem;font-weight:700;letter-spacing:.04em;
  }
  @media (max-width:640px){
    #sq-library{width:100%;max-width:100%;margin:0;position:fixed;bottom:0;left:0;border-radius:10px 10px 0 0;max-height:88vh}
    .sq-lib-body{max-height:calc(88vh - 4rem)}
  }


/* ===== the site nav  (7q-nav.js) ===== */

  :root{
    /* Deeper than the card colours, which are tuned to carry white type on a
       filled band. Here they set small text on pale paper, so they are darkened
       until both clear AA — and matched to each other (6.8:1 and 7.0:1) so
       neither word looks heavier than the other. */
    --nav-green:#5c8c2a;
    --nav-blue:#2f6da8;
    --nav-accent:var(--nav-blue);
  }

  /* ---- masthead: the full lockup, with the menu opposite it ---- */
  .masthead{
    padding:.95rem clamp(1.1rem,4vw,2.4rem) .21rem;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
  }
  .masthead-row{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    max-width:44rem;margin:0 auto;   /* matches .wrap below it */
  }
  /* lockup and page label stack in one column, so the column is exactly the
     lockup's width and the label centres under the green rule itself */
  .brand{display:inline-flex;flex-direction:column;align-items:stretch;flex:none}
  /* the page's own name, tucked into the space the green rule opens up.
     Centred on the lockup rather than the page, so it reads as part of it. */
  .masthead-row{position:relative}
  .page-label{
    margin:.18rem 0 0;
    font-family:var(--serif);font-style:italic;font-size:.9rem;
    color:var(--nav-blue);letter-spacing:.01em;
    text-align:center;
  }
  .wordmark{
    display:inline-flex;align-items:flex-end;gap:.5rem;
    padding-bottom:.22rem;border-bottom:2px solid var(--nav-green);
    text-decoration:none;
  }
  .wordmark .wm-mark{display:block;width:39px;height:34px;flex:none;}
  .wm-q{
    font-family:var(--sans);font-weight:700;
    font-size:1.95rem;line-height:.88;letter-spacing:.02em;
    color:var(--nav-green);
  }
  .wm-text{display:inline-block;white-space:nowrap;}
  .wm-name{
    display:block;
    font-family:var(--sans);font-size:.95rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;line-height:1.15;
    color:var(--nav-blue);
  }
  .wm-tag{
    display:block;margin-top:.16rem;
    font-family:var(--sans);font-size:.56rem;font-weight:700;
    letter-spacing:.32em;text-transform:uppercase;line-height:1;
    color:var(--nav-blue);
    /* centred under GROUP STUDY; the trailing letterspace would otherwise
       push it visually right of centre */
    text-align:center;text-indent:.32em;
  }
  .wordmark:hover .wm-q,.wordmark:hover .wm-name,.wordmark:hover .wm-tag{opacity:.72;}

  /* Quiet: no border, no fill. The bars carry the weight and a small word
     underneath says what they are, so it still reads as a control without
     competing with the lockup beside it. */
  .sqmenu{position:relative;flex:none}
  .sqmenu-btn{
    display:inline-flex;flex-direction:column;align-items:center;gap:.28rem;
    padding:0 .25rem .2rem;cursor:pointer;
    background:none;border:0;
    color:var(--nav-blue);font-family:var(--sans);
    transition:opacity .16s;
  }
  .sqmenu-btn:hover{opacity:.7}
  .sqmenu-btn:focus-visible{outline:2px solid var(--nav-blue);outline-offset:3px;border-radius:2px}
  .sqmenu-word{
    font-size:.69rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:var(--muted);line-height:1;
  }
  .sqmenu-bars{display:inline-flex;flex-direction:column;justify-content:center;gap:4.8px;width:1.56rem;flex:none;}
  .sqmenu-bars i{display:block;height:0;border-top:2.4px solid currentColor;transition:transform .2s,opacity .2s;}
  .sqmenu[data-open="true"] .sqmenu-bars i:nth-child(1){transform:translateY(7.2px) rotate(10deg);}
  .sqmenu[data-open="true"] .sqmenu-bars i:nth-child(2){opacity:0;}
  .sqmenu[data-open="true"] .sqmenu-bars i:nth-child(3){transform:translateY(-7.2px) rotate(-10deg);}

  .sqmenu-panel{
    position:absolute;top:calc(100% + .5rem);right:0;z-index:50;min-width:14rem;
    background:var(--paper);border:1px solid var(--rule);border-radius:3px;
    box-shadow:0 8px 24px rgba(26,26,26,.10);padding:.3rem 0;
    opacity:0;transform:translateY(-5px);pointer-events:none;
    transition:opacity .18s,transform .18s;
  }
  .sqmenu[data-open="true"] .sqmenu-panel{opacity:1;transform:none;pointer-events:auto;}
  .sqmenu-panel a,.sqmenu-panel span.soon{
    display:block;padding:.58rem 1.1rem;text-decoration:none;
    font-family:var(--sans);font-size:.82rem;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
    border-left:3px solid transparent;
  }
  .sqmenu-panel a:hover,.sqmenu-panel a:focus-visible{
    background:rgba(47,109,168,.06);border-left-color:var(--nav-blue);color:var(--nav-blue);
  }
  .sqmenu-panel a[aria-current="page"]{color:var(--ink);border-left-color:var(--ink);}
  .sqmenu-panel span.soon{color:var(--faint);cursor:default;}
  .sqmenu-panel span.soon::after{content:" · soon";font-size:.66rem;letter-spacing:.03em;}

  /* card pages run wider on a desktop, so the masthead follows them */
  @media (min-width:1024px){
    body:has(.wrap--cards) .masthead-row{max-width:55rem}
  }

  @media (max-width:30rem){
    .masthead{padding:.8rem 1.1rem .21rem}
    .masthead-row{gap:.6rem}
    .wordmark .wm-mark{width:33px;height:29px;}
    .wm-q{font-size:1.65rem;}
    .wm-name{font-size:.82rem;letter-spacing:.1em;}
    .wm-tag{font-size:.5rem;letter-spacing:.24em;}
    .page-label{font-size:.84rem}
    .sqmenu-bars{width:1.37rem}
    .sqmenu-word{font-size:.64rem;letter-spacing:.15em}
  }
  @media (prefers-reduced-motion:reduce){ .sqmenu-panel,.sqmenu-bars i{transition:none;} }

  /* ---- centred variant ----
     The lockup and its page label sit in the middle of the screen; the menu
     is taken out of the flow and pinned to the right edge, so the brand block
     centres on the page rather than on whatever space the menu leaves. */
  .masthead-row{justify-content:center;position:relative}
  .brand{align-items:center}
  /* The top bar lines up with the cap-height of GROUP STUDY. Centring the
     button on the row left it hanging low, because the lockup's height is set
     by the book mark and the tall 7Q, not by the words beside them. */
  .sqmenu{position:absolute;right:0;top:-2px;transform:none}

  @media print{ .masthead{display:none;} }


/* ===== the install prompt  (7q-install.js) ===== */

  .sq-install{
    position:relative;
    border:1px solid var(--rule);border-left:3px solid var(--orient);
    border-radius:2px;background:#fff;
    padding:.95rem 2.4rem .95rem 1rem;margin:0 0 1.3rem;
  }
  .sq-install h4{
    font-family:var(--serif);font-size:1.02rem;font-weight:400;color:var(--ink);
    margin:0 0 .35rem;
  }
  .sq-install p{font-size:.86rem;line-height:1.55;color:var(--ink-soft);margin:0 0 .5rem}
  .sq-install p:last-of-type{margin-bottom:0}
  .sq-install .steps{font-size:.86rem;color:var(--muted);font-style:italic}
  .sq-install-x{
    position:absolute;top:.5rem;right:.5rem;
    background:transparent;border:1px solid var(--rule);border-radius:999px;
    width:1.7rem;height:1.7rem;line-height:1;font-size:.8rem;
    color:var(--faint);cursor:pointer;padding:0;
  }
  .sq-install-x:hover{border-color:var(--ink);color:var(--ink)}
  .sq-install-x:focus-visible{outline:2px solid var(--orient);outline-offset:2px}
  @media print{ .sq-install{display:none} }