/* PULSE (AppDesign V2, direction B; the operator's choice, 2026-09-12).
     A deep ground, plum and amber as light sources, glass surfaces, 6px
     corners, two faces: Sora for display and Plus Jakarta Sans for reading.
     The five brand hues are the console's own values, unchanged. The
     contrast test (test_light_theme_text_colours_meet_wcag_aa) reads this
     block and the light one below, so the text tokens keep their names. */
  @font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/sora.woff2) format("woff2");}
  @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/jakarta.woff2) format("woff2");}
  :root{
    --bg:#06040B;--elev:#100B18;--ink:#F6F1F9;--ink-soft:#B9AFC0;--ink-faint:#8A7F93;--ink-rgb:246,241,249;--hi:#FFFFFF;
    --plum:#A24E81;--plum-bright:#B86091;--plum-deep:#5C2A4E;--amber:#D2954A;--amber-bright:#E0AE72;--rose:#E6A9C9;
    --line:rgba(255,255,255,.11);--line-hard:rgba(255,255,255,.26);--field:rgba(255,255,255,.045);
    --glass:rgba(255,255,255,.045);--glass-2:rgba(255,255,255,.08);
    --sans:"Plus Jakarta Sans",-apple-system,"SF Pro Text",system-ui,"Helvetica Neue",sans-serif;
    --disp:"Sora",-apple-system,"SF Pro Display",system-ui,sans-serif;
    --ease:cubic-bezier(.2,.8,.2,1);--r:6px;
    /* The spacing scale (2026-10-10): every margin, padding and gap is one of these. */
    --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;
    /* RADIUS ROLES (themes, 2026-10-08): --r is the control radius and never
       moves with a theme; --r-card is content cards; --r-hero the Profile hero.
       A theme sets the last two. --disp-theme is the display face a theme may
       swap for headlines and the hero title; the wordmark and every label stay
       on --disp. */
    --r-card:6px;--r-hero:22px;--r-hero-m:18px;--disp-theme:var(--disp);--disp-style:normal;--track-hero:-.045em;
  }

  /* WCAG 2.4.1 Bypass Blocks. The nav and subnav repeat above every view, so
     a keyboard user tabbed through them on the way into each screen. Off-canvas
     until focused, which is the standard shape and keeps the design untouched
     for everyone using a mouse. */
  .skip{position:absolute;left:12px;top:-48px;z-index:100;background:var(--elev);
    color:var(--ink);border:1px solid var(--plum);border-radius:10px;
    padding:10px 16px;font-size:14px;font-weight:600;text-decoration:none;
    transition:top .16s ease;}
  .skip:focus{top:12px;outline:2px solid var(--plum-bright);outline-offset:2px;}
  #sqmain:focus{outline:none;}

  /* WHAT IS WAITING ON YOU. Sits with the theme toggle rather than over the
     avatar: the avatar is who you are and this is what somebody else needs
     from you. Hidden entirely at zero — a bell that is always there and always
     empty is one people stop reading. */
  .bell{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
    background:none;color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;
    justify-content:center;transition:color .15s ease,border-color .15s ease,background .15s ease;}
  .bell svg{width:17px;height:17px;}
  .bell:hover{color:var(--ink);border-color:rgba(var(--ink-rgb),.3);background:var(--field);}
  .bell:focus-visible{outline:2px solid var(--plum-bright);outline-offset:3px;}
  .bellcount{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:999px;
    background:var(--plum);color:#FCF7F0;font-size:10.5px;font-weight:700;line-height:17px;
    text-align:center;padding:0 4px;box-shadow:0 0 10px rgba(162,78,129,.55);}

  .navright{display:flex;align-items:center;gap:14px;}
  .themetoggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .16s ease,border-color .16s ease,background .16s ease;}
  .themetoggle svg{width:22px;height:22px;display:block;}
  .themetoggle:hover{color:var(--ink);border-color:rgba(var(--ink-rgb),.3);background:var(--field);}
  [data-theme="light"]{
    --bg:#F4F1EB;--elev:#FFFFFF;--ink:#241C29;--ink-soft:#574F5E;--ink-faint:#6A6172;
    --ink-rgb:36,28,41;--hi:#191420;
    /* WCAG 2.1 AA, measured rather than eyeballed. On the light ground
       (#F4F1EB) the old amber pair came out at 3.30:1 and 2.95:1, and every
       amber label in the product is small uppercase text -- the edges
       column heading, Ease off, the GRIND tag, Waiting on them -- so 3:1
       for large text does not apply to any of them. #946124 keeps the hue
       (32.8deg) and the saturation and lands at 4.66:1 on the page and
       5.26:1 on a card. Both tokens take it, which is what this theme
       already does with plum. The dark theme was measured too and passes
       as it stands. */
    /* --plum-bright is the small-text plum (movelabels, the Shared and Link
       live pills, the pair badges, This week). #A24E81 measured 4.72:1 on the
       page but 3.99-4.38 on the tinted pills and cards it actually sits on
       (light walk, 2026-10-08). #8E3F6C is the paper finish's plum ink:
       6.05:1 on the page, 6.82 on white, 5.34 on the lit key row. --plum
       keeps #A24E81 for borders, fills and focus rings. */
    --plum:#A24E81;--plum-bright:#8E3F6C;--plum-deep:#5C2A4E;--amber:#946124;--amber-bright:#946124;--rose:#B5578C;
    --line:rgba(36,28,41,.13);--line-hard:rgba(36,28,41,.28);--field:rgba(36,28,41,.04);
    --glass:rgba(255,255,255,.55);--glass-2:rgba(36,28,41,.06);
  }
  [data-theme="light"] .bg{opacity:.32;}
  [data-theme="light"] .leverage,[data-theme="light"] .gapfill,[data-theme="light"] .move,[data-theme="light"] .lead{background:var(--elev);border-color:rgba(162,78,129,.22);}
  [data-theme="light"] nav{background:rgba(244,241,235,.8);}
  [data-theme="light"] .themetoggle{color:var(--ink);}
  [data-theme="light"] .qm img{filter:drop-shadow(0 0 6px rgba(162,78,129,.3));}
  [data-theme="light"] .subnav{background:rgba(244,241,235,.7);}
  .subnav::-webkit-scrollbar{display:none;}
  .subnav .sub{white-space:nowrap;}

  /* Mark's nav label is long on purpose ("guide" alone is not clear). Four tabs
     need about 380px; narrower than that the row scrolls sideways rather than
     losing the last tab off-screen. Scoped to a media query because
     overflow-x:auto makes overflow-y compute to auto, and a scroll container
     clips the active underline that sits below the button box. */
  @media (max-width: 420px){
    .subnav{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
    .subnav::-webkit-scrollbar{display:none;}
  }


  [data-theme="light"] .scrim{background:rgba(58,44,66,.34);}
  [data-theme="light"] .drawer{box-shadow:-30px 0 80px rgba(80,60,92,.20);}
  [data-theme="light"] .cmp-panel{box-shadow:0 24px 70px rgba(80,60,92,.26),0 0 40px rgba(162,78,129,.08);}
  /* Light walk, 2026-10-08. The danger outline's coral (#E0776A) is 2.66:1 on
     the light ground; #B23A27 keeps the hue and lands at 5.28. The 360's
     amber count disc wrote dark ink on #946124 (3.27); white on it is 5.26.
     The Guide mark's tagline at 50% ink was 3.24 on a white card; 72% is 6+. */
  [data-theme="light"] .quiet.danger{color:#B23A27;border-color:rgba(178,58,39,.6);}
  [data-theme="light"] .quiet.danger:hover{color:#B23A27;border-color:#B23A27;}
  [data-theme="light"] body.sq-shell .sq360-group.diff .sq360-num{color:#fff;}
  [data-theme="light"] .gmark em{color:rgba(var(--ink-rgb),.72);}
  /* The amber warn badge (Needs both reads) tints its own ground with amber,
     and #946124 on that tint is 4.26; #80501E is 5.51 there, 6.15 on a card. */
  [data-theme="light"] .bedge.warn{color:#80501E;}

  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{min-height:100%;}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  /* The aurora: two slow blurred lights, plum and amber, behind everything. */
  .bg{position:fixed;inset:-20%;z-index:-2;pointer-events:none;filter:blur(60px);opacity:.55;}
  .bg::before,.bg::after{content:"";position:absolute;border-radius:50%;width:55vw;height:55vw;}
  .bg::before{left:5%;top:-10%;background:radial-gradient(circle,rgba(162,78,129,.55),transparent 62%);animation:sqdrift 18s ease-in-out infinite alternate;}
  .bg::after{right:0;top:30%;background:radial-gradient(circle,rgba(210,149,74,.28),transparent 62%);animation:sqdrift 22s ease-in-out infinite alternate-reverse;}
  @keyframes sqdrift{to{transform:translate(8vw,6vh) scale(1.15);}}
  .view{display:none;}
  .view.on{display:block;}
  .eyebrow{font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}

  /* chrome: bordered cells (from A Hard Signal, kept by the operator on the
     Pulse bar, 2026-09-12). A number per level, the active cell filled with
     an inset plum underline and a glow. The Q mark is the product's own
     logo image, unchanged. */
  #chrome{display:none;}
  nav{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto;align-items:stretch;height:56px;
    border-bottom:1px solid var(--line-hard);background:rgba(6,4,11,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
  .brand{display:flex;align-items:stretch;min-width:0;}
  /* The mark, not a control. Anthem, 2026-09-13: the logo is not clickable
     and takes you nowhere; the You cell is the way home. */
  .qm{border:0;border-right:1px solid var(--line-hard);border-radius:0;background:none;font:inherit;color:inherit;padding:0 22px;line-height:0;display:inline-flex;align-items:center;justify-content:center;min-width:72px;cursor:pointer;user-select:none;}
  .qm:hover img{filter:drop-shadow(0 0 14px rgba(162,78,129,.7));}
  .qm:focus-visible{outline:2px solid var(--plum);outline-offset:-2px;}
  .qm img{height:28px;width:auto;display:block;filter:drop-shadow(0 0 9px rgba(162,78,129,.45));}
  .levels{display:flex;min-width:0;}
  .lvl{display:flex;align-items:center;gap:10px;background:none;border:none;border-right:1px solid var(--line-hard);cursor:pointer;
    font:600 13.5px var(--disp);color:var(--ink-soft);padding:0 20px;position:relative;white-space:nowrap;
    transition:color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);}
  /* The cell number is drawn from data-n, not written into the label, so
     the button's text stays the label alone: the deploy walk and every
     has-text selector match the words a person reads. */
  .lvl::before{content:attr(data-n);font:600 10.5px var(--disp);letter-spacing:.1em;color:var(--ink-faint);}
  .lvl:hover{color:var(--ink);background:var(--glass);}
  .lvl.active{color:var(--ink);background:var(--glass-2);box-shadow:inset 0 -2px 0 var(--plum),0 0 24px rgba(162,78,129,.25);}
  .lvl.active::before{color:var(--plum-bright);}
  .lvl svg{width:13px;height:13px;opacity:.85;}
  /* Explicit 56px cells, not grid stretch: Safari does not stretch a
     button to a grid row, so the icon sat high with dead space beside it
     (Anthem, 2026-09-14). Every cell in the right group is a 56px square
     with its content centred by flex. */
  .navright{display:flex;align-items:stretch;height:56px;}
  .navright > *{display:flex;align-items:center;justify-content:center;width:56px;height:56px;min-width:0;padding:0;margin:0;border-left:1px solid var(--line-hard);box-sizing:border-box;-webkit-appearance:none;appearance:none;}
  .bell{position:relative;border-radius:0;border:none;border-left:1px solid var(--line-hard);background:none;color:var(--ink-soft);cursor:pointer;
    transition:color .3s var(--ease),background .3s var(--ease);}
  .bell:hover{color:var(--ink);background:var(--glass);}
  .bell[hidden]{display:none;}
  .lvl[hidden]{display:none;} /* a staged level tab (app.js, SQFlags) */
  a.quiet{text-decoration:none;border-bottom:none;display:inline-flex;align-items:center;}
  .bellcount{top:12px;right:8px;}
  /* The theme toggle has two homes: a cell in the bar, and a floating
     button on the screens that hide the bar (sign-in, the reads). The cell
     look is scoped to the bar; the floating one is a small round glass
     button with the icon dead centre. Anthem, 2026-09-14, on Safari: the
     cell rules had leaked onto the floating one and it drew as a band. */
  .themetoggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--ink-soft);cursor:pointer;
    display:flex;align-items:center;justify-content:center;padding:0;line-height:0;
    transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);}
  .themetoggle:hover{color:var(--ink);border-color:var(--plum);}
  .navright .themetoggle{width:56px;height:56px;border-radius:0;border:none;border-left:1px solid var(--line-hard);background:none;padding:0;}
  .navright .themetoggle:hover{color:var(--ink);background:var(--glass);border-color:var(--line-hard);}
  .avatar{position:relative;border-radius:0;overflow:visible;border:none;border-left:1px solid var(--line-hard);background:none;}
  .avatar b{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 12px var(--disp);color:#fff;background:var(--plum);box-shadow:0 0 14px rgba(162,78,129,.5);}
  .avatar img{position:absolute;left:50%;top:50%;width:34px;height:34px;border-radius:50%;transform:translate(-50%,-50%);object-fit:cover;}
  .subnav{position:sticky;top:56px;z-index:19;display:none;gap:0;padding:0;border-bottom:1px solid var(--line);
    background:rgba(6,4,11,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
  .subnav.on{display:flex;}
  /* Scoped to the bar: the sign-in screen's "Sign in to SuperQ" line is also
     class "sub" (index.html) and was taking the cell's hand cursor and
     divider. Anthem, 2026-09-13: the logo there is not clickable. */
  .subnav .sub{background:none;border:none;border-right:1px solid var(--line);cursor:pointer;font:500 13px var(--disp);color:var(--ink-faint);padding:12px 20px;position:relative;
    transition:color .3s var(--ease),box-shadow .3s var(--ease);}
  .subnav .sub:hover{color:var(--ink-soft);}
  .subnav .sub.active{color:var(--ink);box-shadow:inset 0 -2px 0 var(--plum);text-shadow:0 0 14px rgba(162,78,129,.6);}
  @media (max-width:760px){
    .brand{min-width:0;} .levels{min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
    .levels::-webkit-scrollbar{display:none;}
    .lvl{padding:0 12px;font-size:12.5px;} .lvl::before{display:none;} .qm{padding:0 12px;}
    .navright > *,.navright .themetoggle{width:46px;}
    .subnav .sub{padding:12px 12px;}
  }

  .page{max-width:1080px;margin:0 auto;padding:40px clamp(16px,3vw,36px) 120px;}
  .primary{cursor:pointer;border:none;border-radius:999px;padding:13px 24px;font:700 14px var(--disp);color:#fff;
    background:linear-gradient(135deg,var(--plum),#8E3F6E);box-shadow:0 8px 28px rgba(162,78,129,.45);
    transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
  .primary:hover{transform:translateY(-1px);box-shadow:0 12px 36px rgba(162,78,129,.7);}
  .primary:active{transform:translateY(0);}
  .primary:focus-visible{outline:2px solid var(--plum-bright);outline-offset:3px;}
  /* .quiet - a bubble with the same geometry as .primary and none of its
     weight. Added 2026-08-17: the console had a filled pill and a bare text
     link and nothing between them, so secondary and destructive actions were
     rendered as links and did not read as buttons at all.
     .quiet.danger is for actions that throw work away. It stays an outline
     rather than a filled red pill, because a destructive action should look
     deliberate, not urgent - a red button competing with the page's own
     primary is how people press the wrong one. */
  /* ONE sanctioned smaller size, for an action that repeats inside a row or
     sits beside content rather than under it: Copy it, Discard, one Commit
     per prompt. Added 2026-08-18 because five buttons had each invented their
     own padding and font-size inline, so nothing on a page agreed about how
     big a button is. Geometry belongs here, never in a style attribute.
     A form's own submit is NOT small: it is that block's action and takes the
     full size, like every other block action. */
  .primary.small,.quiet.small{padding:8px 14px;font-size:13px;}

  .quiet{cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:12px 22px;
    font:700 14px var(--disp);color:var(--ink);background:var(--glass);
    transition:transform .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);}
  .quiet:hover{transform:translateY(-1px);color:var(--ink);border-color:var(--plum);}
  .quiet:active{transform:translateY(0);}
  .quiet:focus-visible{outline:2px solid var(--plum-bright);outline-offset:3px;}
  /* The coach's audience pills (Just me / the team) had no ring of their own
     and fell to the browser's auto outline, white on the light ground at
     1.13:1 (focus walk, 2026-10-08). The same ring as every other button. */
  .cpill:focus-visible{outline:2px solid var(--plum-bright);outline-offset:3px;}
  .quiet[disabled]{opacity:.55;cursor:default;transform:none;}
  .quiet.danger{color:#E0776A;border-color:rgba(192,57,43,.6);background:none;}
  .quiet.danger:hover{color:#E0776A;border-color:#E0776A;}
  .link{color:var(--ink-soft);text-decoration:none;font-size:13px;font-weight:500;transition:color .15s ease;cursor:pointer;background:none;border:none;font-family:inherit;}
  .link:hover{color:var(--ink);}
  .link.accent{color:var(--plum-bright);}
  .link.accent:hover{color:#D389B2;}

  /* LOGIN */
  .loginscene{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:7vh 24px;position:relative;}
  .panel{width:min(440px,100%);display:flex;flex-direction:column;align-items:center;padding:36px 34px 30px;
    background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
  .panel h1{font:700 26px var(--disp);letter-spacing:-.02em;text-align:center;}
  .panel .sub{margin-top:8px;font-size:15px;color:var(--ink-soft);font-weight:400;text-align:center;cursor:default;border:none;padding:0;}
  .wordmark{font-weight:700;color:var(--ink);letter-spacing:-.03em;font-size:16px;white-space:nowrap;}
  .wm-q{height:1.04em;width:auto;vertical-align:-.2em;margin-left:.2em;filter:drop-shadow(0 0 6px rgba(184,96,145,.6));}
  .panel form{width:100%;margin-top:34px;display:flex;flex-direction:column;gap:18px;}
  .fld{display:flex;flex-direction:column;gap:9px;}
  .lblrow{display:flex;align-items:baseline;justify-content:space-between;}
  .panel label{font-size:12.5px;font-weight:500;color:var(--ink-soft);}
  .panel input{width:100%;background:var(--field);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;font-family:inherit;font-size:15px;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
  .panel input::placeholder{color:var(--ink-faint);}
  .panel input:focus{outline:none;border-color:var(--plum);background:rgba(162,78,129,.06);box-shadow:0 0 0 3px rgba(162,78,129,.16),0 0 26px rgba(162,78,129,.18);}
  .panel .primary{margin-top:6px;width:100%;}

  /* THE FIELD, AND ITS ILLUMINATION.
     .panel input:focus above gives a plum border, a 3px ring and a 26px glow
     on focus. .panel exists only in index.html — the login, signup and join
     screens — so the three screens somebody meets BEFORE signing in lit up and
     every field in the app after it was dead. Ten of them, across six modules,
     each carrying its own inline copy of the same recipe: --field background,
     1px --line border, 12px radius. The recipe belongs here, and once it is
     here the focus state comes with it rather than being pasted ten times or,
     as happened, nowhere.

     Same numbers as .panel input:focus deliberately. One look for one act,
     whether you are signing in or recording a result you brought with you. */
  .field{width:100%;background:var(--field);border:1px solid var(--line);
    border-radius:var(--r);padding:11px 13px;color:var(--ink);font-family:inherit;
    font-size:14.5px;line-height:1.5;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
  .field::placeholder{color:var(--ink-faint);}
  .field:focus{outline:none;border-color:var(--plum);background:rgba(162,78,129,.06);
    box-shadow:0 0 0 3px rgba(162,78,129,.16),0 0 26px rgba(162,78,129,.18);}
  textarea.field{min-height:104px;resize:vertical;font-size:15px;padding:13px 14px;}
  /* Sitting in a flex row, a field should share the space rather than demand
     all of it; .invrow already sets the track. */
  .invrow .field{width:auto;}
  .panel .foot{margin-top:30px;font-size:14px;color:var(--ink-soft);text-align:center;}
  .divider{width:100%;height:1px;background:var(--line);margin-top:30px;}
  .legal{margin-top:22px;font-size:11.5px;line-height:1.6;color:var(--ink-faint);text-align:center;max-width:300px;}
  /* The sign-in line linked nowhere until 2026-08-19 -- it claimed Terms and a
     Privacy Policy that did not exist. Now that it points at a real page, the
     link needs to look like this design rather than like a browser default. */
  .legal a{color:var(--plum,#B86091);text-decoration:none;border-bottom:1px solid rgba(184,96,145,.4);transition:border-color .18s ease,color .18s ease;}
  .legal a:hover,.legal a:focus-visible{color:var(--ink);border-bottom-color:var(--plum,#B86091);}

  /* ASSESSMENT */
  .asmbar{position:sticky;top:0;z-index:5;}
  .asmtrack{height:8px;width:100%;border-radius:999px;background:var(--line);position:relative;}
  #asmFill{height:100%;width:0;background:linear-gradient(90deg,var(--plum-deep),var(--plum));box-shadow:0 0 12px rgba(162,78,129,.5);transition:width .45s cubic-bezier(.4,0,.2,1);}
  .asmmeta{display:flex;align-items:center;justify-content:space-between;padding:20px 26px;max-width:760px;margin:0 auto;}
  /* The nav row the 38 flow and the snapshot's core block share. One rule
     here, not per-caller inline patches. (Mirror Moment also used this
     class before it was removed 2026-09-03; the shared-rule reasoning
     predates that and still holds for the callers that remain.) */
  .sqcorenav{display:flex;align-items:center;gap:12px;margin-top:16px;}
  .asmback{display:flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;color:var(--ink-soft);font-family:inherit;font-size:13px;font-weight:500;padding:6px 4px;transition:color .15s ease;visibility:hidden;}
  .asmback:hover{color:var(--ink);}
  .asmback svg{width:15px;height:15px;}
  #asmCount{font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
  /* Twin of #asmFill/#asmCount for core.js's own one-question-at-a-time
     progress bar (2026-09-03). Same recipe, separate IDs: both views exist
     in the DOM at once (this one built at runtime by core.js, the other
     static in this file), so the two cannot share an id. */
  #coreFill{position:relative;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--plum),var(--amber));box-shadow:0 0 18px rgba(162,78,129,.7);transition:width .6s var(--ease);}
  #coreFill::after{content:"";position:absolute;right:-6px;top:-4px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 16px var(--amber-bright);}
  #coreCount{font:800 22px var(--disp);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;}
  #coreCount small{font:600 14px var(--disp);color:var(--ink-faint);}
  #corePercent{font:600 12px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
  /* Onboarding question cards (js/core.js), redesigned 2026-09-03 against the
     iKnowMe reference for visual hierarchy: a lettered badge, a roomier
     card, and a stronger "illuminating" hover glow than the plain .opt list
     had. Deliberately its OWN class rather than a change to .opt -- .opt is
     also used by app.js and rater.js, and this is meant to read differently
     (bigger badge, brighter hover), scoped to this one surface only. Palette
     stays ours throughout: plum for selection and glow, never the
     reference's amber, which this design system reserves for friction. */
  /* 16px -> 17px: nudged up against the iKnowMe reference, where the option
     text reads as a comfortable, substantial size, not small print, so the
     hierarchy against the (now smaller) question above still feels like
     "big question, real body text" rather than "big question, fine print". */
  .coreopt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;cursor:pointer;
    background:var(--glass);border:1px solid var(--line);border-radius:var(--r);
    padding:18px 20px;font:500 17px/1.35 var(--sans);
    color:var(--ink);transition:all .35s var(--ease);}
  .coreopt:hover{border-color:rgba(162,78,129,.6);transform:translateX(4px);box-shadow:0 0 26px rgba(162,78,129,.2);}
  .coreopt .letter{flex:0 0 auto;width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--line);
    color:var(--ink-soft);font:700 13px var(--disp);
    transition:all .3s var(--ease);}
  .coreopt:hover .letter{border-color:rgba(162,78,129,.5);color:var(--ink);}
  .coreopt.sel{border-color:var(--plum);background:linear-gradient(135deg,rgba(162,78,129,.35),rgba(210,149,74,.2));
    box-shadow:0 0 34px rgba(162,78,129,.5);}
  /* #FCF6EF, not a theme token: the badge's fill is always var(--plum)
     regardless of theme, same as .primary's own text color a few rules up
     for the identical reason -- a fixed-color background needs a fixed,
     guaranteed-legible text color, not one that flips with the theme. */
  .coreopt.sel .letter{border-color:var(--plum);background:var(--plum);color:#FCF6EF;
    box-shadow:0 0 14px rgba(162,78,129,.65);}
  .asmscene{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:60px 26px 80px;}
  .asmstage{width:100%;max-width:560px;transition:opacity .26s ease,transform .26s ease;}
  .asmstage.out{opacity:0;transform:translateY(8px);}
  .center{text-align:center;display:flex;flex-direction:column;align-items:center;}
  .asmstage .eyebrow{text-align:center;margin-bottom:22px;}
  .asmstage h1{font:700 clamp(32px,5vw,46px)/1.08 var(--disp);letter-spacing:-.03em;}
  /* Scaled down a hair for core.js's one-question-at-a-time screen
     specifically (2026-09-03) -- .asmstage h1 above is also the static
     "assessment" view's heading size, so this overrides by id rather than
     touching that shared rule. */
  /* Centered rather than the shared .asmstage h1's left-aligned default --
     matches the eyebrow above it (.asmstage .eyebrow is already centered)
     and the iKnowMe reference. Scoped by id for the same reason as the size
     override just above: the static assessment view's heading keeps its
     own alignment untouched. */
  #coreStage h1{font-size:clamp(26px,3.4vw,42px);text-align:left;margin:12px 0 28px;}
  #coreStage .eyebrow{text-align:left;margin-bottom:0;color:var(--plum-bright);text-shadow:0 0 12px rgba(162,78,129,.5);}
  .lede{margin-top:20px;font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:30ch;}
  .fine{margin-top:16px;font-size:13.5px;color:var(--ink-faint);font-weight:500;}
  .q{font-weight:500;letter-spacing:-.02em;font-size:clamp(23px,3.4vw,32px);line-height:1.24;text-align:center;margin-bottom:34px;}
  .options{display:flex;flex-direction:column;gap:12px;}
  .opt{display:flex;align-items:center;gap:16px;text-align:left;width:100%;cursor:pointer;background:var(--field);border:1px solid var(--line);border-radius:15px;
    padding:19px 20px;font-family:inherit;font-size:16px;font-weight:450;line-height:1.4;color:var(--ink);transition:border-color .16s,background .16s,transform .12s,box-shadow .16s;}
  .opt:hover{border-color:rgba(162,78,129,.5);background:rgba(162,78,129,.05);transform:translateY(-1px);}
  .opt .mark{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink-faint);transition:all .16s ease;}
  .opt.sel{border-color:var(--plum);background:rgba(162,78,129,.10);box-shadow:0 0 26px rgba(162,78,129,.16);}
  .opt.sel .mark{border-color:var(--plum);background:var(--plum);box-shadow:0 0 12px rgba(162,78,129,.6);}
  .scale{margin-top:8px;}
  .poles{display:flex;justify-content:space-between;margin-bottom:4px;font-size:13.5px;color:var(--ink-soft);font-weight:500;}
  .dots{position:relative;display:flex;align-items:center;justify-content:space-between;padding:22px 8px 0;}
  .dots::before{content:"";position:absolute;left:14px;right:14px;top:34px;height:2px;background:rgba(var(--ink-rgb),.10);}
  .dot{position:relative;z-index:1;border-radius:50%;border:1.5px solid var(--ink-faint);background:var(--bg);cursor:pointer;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .12s ease;}
  .dot:hover{border-color:var(--plum-bright);transform:scale(1.08);}
  .dot.sel{background:var(--amber-bright);border-color:var(--amber-bright);box-shadow:0 0 16px rgba(224,174,114,.6);}
  .dot.d1,.dot.d5{width:26px;height:26px;} .dot.d2,.dot.d4{width:20px;height:20px;} .dot.d3{width:15px;height:15px;}
  .lean{margin-top:20px;font-size:14.5px;color:var(--ink);font-weight:450;min-height:20px;letter-spacing:-.005em;}

  /* THE AGREEMENT ROW, for the long-form read.
     Genuinely new rather than borrowed. .dots is a bipolar spectrum -- two
     poles with a bowtie of sizes and a midpoint -- and a statement somebody
     agrees or disagrees with is not that. It also has to work at four, five
     and six points, because the instruments differ, and the bowtie only
     resolves at five.

     Everything else is the language already here: the selected target is the
     same plum fill and glow as .opt.sel .mark and .dot.sel, so choosing looks
     like choosing everywhere in the product. */
  .likert{display:flex;flex-direction:column;gap:4px;}
  .lik{padding:16px 0;border-bottom:1px solid var(--line);}
  .lik:last-child{border-bottom:none;}
  .lik-q{font-size:15.5px;line-height:1.45;color:var(--ink);margin-bottom:12px;}
  .lik-scale{display:flex;align-items:center;gap:10px;}
  .lik-ends{font-size:11.5px;color:var(--ink-faint);flex:0 0 auto;max-width:84px;line-height:1.3;}
  .lik-ends.hi{text-align:right;}
  .lik-opts{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1 1 auto;}
  .lik-opt{width:26px;height:26px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--ink-faint);
    background:var(--bg);cursor:pointer;padding:0;
    transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .12s ease;}
  .lik-opt:hover{border-color:var(--plum-bright);transform:scale(1.08);}
  .lik-opt:focus-visible{outline:2px solid var(--plum-bright);outline-offset:3px;}
  .lik-opt.sel{background:var(--plum);border-color:var(--plum);box-shadow:0 0 16px rgba(162,78,129,.6);}
  .lik.done .lik-q{color:var(--ink-soft);}
  @media (max-width:560px){ .lik-ends{max-width:64px;font-size:11px;} .lik-opt{width:22px;height:22px;} }
  .primary[disabled]{opacity:.35;cursor:default;box-shadow:none;}
  .primary[disabled]:hover{transform:none;filter:none;box-shadow:none;}
  .asmstage .primary{margin-top:40px;align-self:center;}

  /* SNAPSHOT hero + shared plum field */
  /* The hero is no longer a box. Pulse sets the name in display type with a
     white-to-plum-to-amber gradient on the ground itself, and the glass is
     saved for the cards under it. */
  .hero{position:relative;padding:36px 0 22px;}
  .hero .kick{font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);position:relative;}
  .archetype{margin-top:12px;font:800 clamp(40px,5.6vw,68px)/1 var(--disp-theme);font-style:var(--disp-style);letter-spacing:-.04em;color:var(--hi);
    background:linear-gradient(120deg,#fff 20%,var(--plum-bright) 70%,var(--amber-bright));-webkit-background-clip:text;background-clip:text;color:transparent;
    max-width:18ch;}
  .codes{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;position:relative;}
  .codes span{font:600 13px var(--disp);color:var(--ink);background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:8px 14px;}
  .essence{margin-top:20px;font-size:17px;line-height:1.6;color:var(--ink-soft);position:relative;max-width:60ch;}
  .essence b{color:var(--hi);font-weight:600;}
  section.block{margin-top:40px;}
  section.block > .eyebrow{display:block;margin-bottom:14px;}
  .pattern{border-top:1px solid var(--line);}
  .prow{display:grid;grid-template-columns:180px 1fr;gap:18px;padding:17px 0;border-bottom:1px solid var(--line);align-items:baseline;}
  .prow .k{font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
  .prow .v{font-size:16.5px;color:var(--ink);font-weight:450;line-height:1.4;}
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:38px;}
  .col h3{font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;}
  .col.s h3{color:var(--plum-bright);} .col.e h3{color:var(--amber);}
  .col ul{list-style:none;display:flex;flex-direction:column;gap:14px;}
  .col li{display:flex;gap:12px;font-size:15.5px;line-height:1.45;color:var(--ink);}
  .col li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;margin-top:8px;}
  .col.s li::before{background:var(--plum);box-shadow:0 0 8px rgba(162,78,129,.55);}
  .col.e li::before{background:var(--amber);box-shadow:0 0 8px rgba(210,149,74,.5);}
  .fwlist{border-top:1px solid var(--line);}
  .fwrow{position:relative;display:grid;grid-template-columns:150px 1fr auto;align-items:baseline;gap:22px;width:100%;text-align:left;cursor:pointer;background:none;border:none;border-bottom:1px solid var(--line);padding:20px 4px;font-family:inherit;transition:background .2s ease,padding-left .22s cubic-bezier(.4,0,.2,1);}
  .fwrow::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--plum);box-shadow:0 0 12px rgba(162,78,129,.7);transform:scaleY(0);transform-origin:center;opacity:0;transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .2s ease;}
  .fwrow:hover,.fwrow:focus-visible{outline:none;background:rgba(162,78,129,.07);padding-left:20px;}
  .fwrow:hover::before,.fwrow:focus-visible::before{transform:scaleY(1);opacity:1;}
  .fwrow .name{font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);transition:color .18s ease;}
  .fwrow:hover .name,.fwrow:focus-visible .name{color:var(--plum-bright);}
  .fwrow .res{font-size:17.5px;color:var(--ink);font-weight:500;letter-spacing:-.01em;transition:text-shadow .2s ease;}
  .fwrow:hover .res{text-shadow:0 0 22px rgba(162,78,129,.35);}
  .fwrow .res small{display:block;font-size:13.5px;color:var(--ink-soft);font-weight:400;margin-top:5px;line-height:1.4;transition:color .18s ease;}
  .fwrow:hover .res small{color:var(--ink);}
  .fwrow .chev{width:17px;height:17px;color:var(--ink-soft);align-self:center;transition:color .18s ease,transform .2s cubic-bezier(.4,0,.2,1);}
  .fwrow:hover .chev{color:var(--plum);transform:translateX(4px);}
  .leverage{border:1px solid rgba(162,78,129,.40);border-radius:18px;background:linear-gradient(160deg,rgba(162,78,129,.11),rgba(162,78,129,.03));padding:26px 26px 24px;box-shadow:0 0 50px rgba(162,78,129,.07) inset;}
  .leverage .eyebrow{color:var(--plum-bright);display:block;}
  .leverage p{margin-top:14px;font-size:17px;line-height:1.55;color:var(--ink);}
  .leverage .go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--plum-bright);text-decoration:none;font-size:14.5px;font-weight:600;transition:gap .16s ease,color .16s ease;cursor:pointer;background:none;border:none;font-family:inherit;}
  .leverage .go:hover{gap:12px;color:#D389B2;}
  .leverage .go svg{width:15px;height:15px;}

  /* GUIDE */
  .gmark{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;position:relative;margin-bottom:20px;}
  .gmark b{font-weight:800;color:var(--hi);letter-spacing:-.02em;font-size:15px;}
  .gmark em{font-style:normal;color:rgba(var(--ink-rgb),.5);letter-spacing:.03em;font-weight:500;font-size:12px;}
  .gshare{align-self:flex-start;margin-top:32px;padding:11px 22px;font:700 14px var(--disp);border-radius:999px;background:linear-gradient(135deg,var(--plum),#8E3F6E);color:#fff;box-shadow:0 8px 28px rgba(162,78,129,.45);}
  /* The same control as an anchor, for the shared guide's "Take SuperQ"
     link. The global `a` rule gives every anchor a plum border-bottom and
     leaves it display:inline, which on a filled button reads as a pink rule
     struck under it and collapses the vertical padding out of the layout.
     Scoped to a.gshare so the button form is untouched. */
  a.gshare{display:inline-block;border-bottom:none;text-align:center;}
  .gshare:hover{filter:brightness(1.05);}
  .gmiss{border:1px solid var(--line);border-radius:16px;background:var(--field);padding:22px 24px;}
  .gmiss .eyebrow{display:block;margin-bottom:12px;}
  .gmiss p{font-size:16.5px;line-height:1.6;color:var(--ink);}
  .grules{display:flex;flex-direction:column;gap:22px;}
  .grule{padding-left:18px;border-left:2px solid var(--plum-deep);}
  .grule h4{font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
  .grule p{margin-top:7px;font-size:15px;line-height:1.55;color:var(--ink-soft);}
  .tells{border-top:1px solid var(--line);}
  .tell{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:baseline;padding:16px 4px;border-bottom:1px solid var(--line);}
  .tell .sig{font-size:15px;font-weight:550;color:var(--ink);}
  .tell .mean{font-size:15px;line-height:1.5;color:var(--ink-soft);}
  .slips{display:flex;flex-direction:column;gap:14px;}
  .slip{border:1px solid rgba(162,78,129,.32);border-radius:16px;background:linear-gradient(160deg,rgba(162,78,129,.08),rgba(162,78,129,.02));padding:20px 22px;}
  .slip p{font-size:16px;line-height:1.55;color:var(--ink);}
  .sharelink{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:12px;background:var(--field);padding:12px 14px;}
  .sharelink span{font-size:14px;color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .copybtn{flex:0 0 auto;background:none;border:1px solid var(--line);border-radius:9px;color:var(--ink-soft);font-family:inherit;font-size:12.5px;font-weight:600;padding:7px 13px;cursor:pointer;transition:color .15s ease,border-color .15s ease;}
  .copybtn:hover{color:var(--ink);border-color:rgba(var(--ink-rgb),.3);}
  .emailbox{border:1px solid var(--line);border-radius:12px;background:var(--field);padding:16px;font-size:14.5px;line-height:1.6;color:var(--ink-soft);}
  @media (max-width:560px){ .tell{grid-template-columns:1fr;gap:5px;} }

  /* CALIBRATE */
  .calscene{max-width:600px;margin:0 auto;padding:74px 26px 96px;}
  .calhead{position:relative;}
  .calhead::before{content:"";position:absolute;left:50%;top:-56px;transform:translateX(-50%);width:540px;max-width:118%;height:320px;background:radial-gradient(58% 58% at 50% 42%,rgba(162,78,129,.28),rgba(162,78,129,0) 70%);filter:blur(22px);pointer-events:none;z-index:-1;}
  .calhead .eyebrow{display:inline-flex;align-items:center;gap:11px;margin-bottom:20px;color:var(--plum-bright);}
  .calhead .eyebrow::before{content:"";width:20px;height:1px;background:var(--plum);box-shadow:0 0 8px rgba(162,78,129,.7);}
  .calhead h1{font:700 clamp(32px,5.2vw,48px)/1.08 var(--disp);letter-spacing:-.03em;color:var(--hi);text-shadow:0 0 44px rgba(162,78,129,.28);}
  .calhead .lede{margin-top:20px;font-size:17px;line-height:1.62;color:var(--ink-soft);max-width:44ch;}
  .calsub{display:block;margin:50px 0 0;}
  .claims{margin-top:18px;display:flex;flex-direction:column;gap:16px;}
  .claim{border:1px solid var(--line);border-radius:18px;background:var(--elev);padding:22px 24px;transition:border-color .2s ease;}
  .claim.confirmed,.claim.refined{border-color:rgba(162,78,129,.45);}
  .claim .ctext{font-size:17px;line-height:1.5;color:var(--ink);font-weight:450;}
  .cacts{margin-top:18px;display:flex;gap:10px;}
  .cbtn{cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:550;border-radius:10px;padding:9px 16px;border:1px solid var(--line);background:none;color:var(--ink-soft);transition:color .15s ease,border-color .15s ease,background .15s ease;}
  .cbtn:hover{color:var(--ink);border-color:rgba(var(--ink-rgb),.28);}
  .cbtn.yes.on{background:rgba(162,78,129,.16);border-color:rgba(162,78,129,.6);color:var(--hi);}
  .cbtn.no.on{background:rgba(var(--ink-rgb),.06);border-color:rgba(var(--ink-rgb),.28);color:var(--ink);}
  .crefine{margin-top:16px;display:none;}
  .claim.refining .crefine{display:block;}
  .crefine textarea{width:100%;min-height:78px;resize:vertical;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-family:inherit;font-size:15px;line-height:1.5;color:var(--ink);transition:border-color .18s ease,box-shadow .18s ease;}
  .crefine textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(162,78,129,.16);}
  .crefine textarea::placeholder{color:var(--ink-faint);}
  .csave{margin-top:12px;padding:10px 20px;font-size:14px;border-radius:11px;}
  .cresult{margin-top:4px;display:none;padding-left:16px;border-left:2px solid var(--plum);}
  .claim.refined .cresult{display:block;}
  .claim.refined .ctext{color:var(--ink-faint);font-size:14px;text-decoration:line-through;text-decoration-color:rgba(var(--ink-rgb),.2);}
  .claim.refined .cacts,.claim.refined .crefine{display:none;}
  .cr-lbl{display:block;font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-bright);margin-bottom:7px;}
  .cr-text{font-size:16.5px;line-height:1.5;color:var(--ink);}
  .cr-edit{margin-top:11px;}
  .calimport{margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px dashed var(--line);border-radius:16px;padding:18px 20px;}
  .calimport .ci-t{display:block;font-size:14.5px;font-weight:600;color:var(--ink);}
  .calimport .ci-s{display:block;margin-top:5px;font-size:13px;line-height:1.45;color:var(--ink-soft);}
  .calfoot{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:14px;}
  .calcount{font-size:12.5px;letter-spacing:.04em;color:var(--ink-faint);font-weight:500;font-variant-numeric:tabular-nums;}

  /* GAP REPORT */
  .gj-intro{font-size:16px;line-height:1.6;color:var(--ink-soft);margin-top:-6px;margin-bottom:24px;max-width:58ch;}
  .johari{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  /* Three windows, not four, since the Unknown was retired 2026-08-19 (see
     js/snapshot.js). Three in a two-column grid leaves a hole in the bottom
     right -- precisely where the retired window used to be, which reads as
     something broken rather than something removed. The last one spans instead.
     Scoped to :nth-child(3):last-child on purpose: it applies ONLY when there
     are exactly three, so it undoes itself the day the fourth window comes back
     for real and nobody has to remember this rule exists. */
  .johari .jq:nth-child(3):last-child{grid-column:1 / -1;}
  .jq{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--elev);padding:24px 24px 22px;}
  .jq::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;}
  .jq.open::before{background:var(--plum);box-shadow:0 0 14px rgba(162,78,129,.5);}
  .jq.blind::before{background:var(--amber);box-shadow:0 0 14px rgba(210,149,74,.45);}
  .jq.hidden::before{background:var(--ink-soft);}
  .jq.frontier::before{background:var(--ink-faint);}
  .jq.split::before{background:var(--ink-faint);}
  .jq-h{display:flex;align-items:center;gap:9px;}
  .jq-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;}
  .jq.open .jq-dot{background:var(--plum);box-shadow:0 0 8px rgba(162,78,129,.6);}
  .jq.blind .jq-dot{background:var(--amber);box-shadow:0 0 8px rgba(210,149,74,.5);}
  .jq.hidden .jq-dot{background:var(--ink-soft);}
  .jq.frontier .jq-dot{background:var(--ink-faint);}
  .jq.split .jq-dot{background:var(--ink-faint);}
  .jq-name{font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
  .jq-tag{margin-left:auto;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-faint);}
  .jq-pos{margin-top:11px;font-size:12.5px;color:var(--ink-faint);font-weight:500;font-style:italic;}
  .jq-items{margin-top:16px;display:flex;flex-direction:column;gap:13px;}
  .jq-items p{font-size:14px;line-height:1.5;color:var(--ink-soft);}
  .jq-items b{color:var(--ink);font-weight:600;}
  .jq.frontier .jq-items p{font-style:italic;color:var(--ink-soft);}
  .jq-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--ink);font-weight:450;}
  .moves{display:flex;flex-direction:column;gap:18px;}
  .gmove{display:flex;gap:16px;align-items:flex-start;}
  .gm-n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--plum-bright);border:1px solid rgba(162,78,129,.4);background:rgba(162,78,129,.08);}
  .gmove h4{font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
  .gmove p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink-soft);}
  @media (max-width:560px){ .johari{grid-template-columns:1fr;} }

  /* RATER FLOW (teammate-facing) */
  .ratscene{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:56px 26px 80px;position:relative;}
  .ratmark{position:absolute;top:30px;left:0;right:0;text-align:center;font:800 13px var(--disp);letter-spacing:-.02em;color:var(--plum-bright);text-shadow:0 0 14px rgba(162,78,129,.55);}
  .ratstage{width:100%;max-width:540px;transition:opacity .26s ease,transform .26s ease;}
  .ratstage.out{opacity:0;transform:translateY(8px);}
  .ratstage .eyebrow{display:block;margin-bottom:18px;}
  .ratstage h1{font:700 clamp(27px,4.4vw,40px)/1.12 var(--disp);letter-spacing:-.03em;color:var(--ink);}
  .promise{margin-top:28px;display:flex;flex-direction:column;gap:13px;}
  .promise span{font-size:15.5px;color:var(--ink);display:flex;align-items:center;gap:12px;font-weight:450;}
  .promise span::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--plum);box-shadow:0 0 9px rgba(162,78,129,.65);}
  .ratfine{margin-top:26px;font-size:13.5px;line-height:1.65;color:var(--ink-soft);max-width:48ch;}
  .ratstage .primary{margin-top:34px;}
  .ratanon{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-faint);display:flex;align-items:center;gap:8px;margin-bottom:22px;}
  .ratanon::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-faint);}
  .ratmeta{margin-top:20px;}
  .ratskip{background:none;border:none;cursor:pointer;color:var(--ink-faint);font-family:inherit;font-size:13px;font-weight:500;padding:0;transition:color .15s ease;}
  .ratskip:hover{color:var(--ink-soft);}

  /* 360 SETUP */
  .setupcta{text-align:center;display:flex;flex-direction:column;gap:14px;}
  .setscene{min-height:100vh;display:flex;justify-content:center;padding:72px 26px 92px;}
  .setstage{width:100%;max-width:560px;}
  .seth1{font:700 clamp(28px,4.4vw,40px)/1.12 var(--disp);letter-spacing:-.03em;color:var(--ink);}
  .setlede{margin-top:16px;font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:52ch;}
  .invwrap{margin-top:36px;}
  .invhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
  .invhead span:first-child{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);}
  .invcount{font-size:12.5px;color:var(--ink-faint);font-weight:500;font-variant-numeric:tabular-nums;}
  .invrow{display:flex;gap:10px;align-items:center;margin-bottom:10px;}
  .invrow input{flex:1;background:var(--field);border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--ink);font-family:inherit;font-size:14.5px;transition:border-color .15s ease,background .15s ease;}
  .invrow input.iname{flex:0 0 36%;}
  .invrow input:focus{outline:none;border-color:rgba(162,78,129,.55);background:rgba(162,78,129,.06);}
  .invrow input::placeholder{color:var(--ink-faint);}
  .invx{flex:0 0 auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:none;color:var(--ink-faint);cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;transition:color .15s ease,border-color .15s ease;}
  .invx:hover{color:var(--amber);border-color:rgba(210,149,74,.4);}
  .addrow{margin-top:6px;width:100%;background:none;border:1px dashed var(--line);border-radius:11px;padding:12px 14px;color:var(--ink-soft);font-family:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:border-color .15s ease,color .15s ease;}
  .addrow span{color:var(--plum-bright);margin-right:5px;font-weight:700;}
  .addrow:hover{border-color:rgba(162,78,129,.45);color:var(--ink);}
  .addrow:disabled{opacity:.38;cursor:not-allowed;}
  .notewrap{margin-top:32px;}
  .notelbl{display:block;font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px;}
  .invnote{width:100%;background:var(--field);border:1px solid var(--line);border-radius:13px;padding:15px 16px;color:var(--ink);font-family:inherit;font-size:14.5px;line-height:1.6;resize:vertical;transition:border-color .15s ease;}
  .invnote:focus{outline:none;border-color:rgba(162,78,129,.55);}
  .setfoot{margin-top:34px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
  .setback{margin-top:26px;display:inline-block;}
  .statprog{margin-top:32px;}
  .statbar{height:6px;border-radius:99px;background:rgba(var(--ink-rgb),.08);overflow:hidden;}
  .statbar span{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--plum-bright),var(--amber-bright));box-shadow:0 0 12px rgba(184,96,145,.55);transition:width .7s cubic-bezier(.2,.7,.2,1);}
  .statnote{margin-top:13px;font-size:14.5px;color:var(--ink-soft);}
  .statnote b{color:var(--ink);font-variant-numeric:tabular-nums;}
  .statready{color:var(--plum-bright);font-weight:500;}
  .statlist{margin-top:28px;display:flex;flex-direction:column;}
  .statrow{display:flex;align-items:center;gap:14px;padding:13px 2px;border-bottom:1px solid var(--line);}
  .statrow:last-child{border-bottom:none;}
  .stav{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:rgba(162,78,129,.14);color:var(--plum-bright);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;}
  .stname{flex:1;font-size:15px;color:var(--ink);font-weight:450;}
  .stbadge{flex:0 0 auto;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:5px 11px;border-radius:99px;}
  .stbadge.done{color:var(--plum-bright);background:rgba(162,78,129,.14);}
  .stbadge.open{color:var(--ink);background:rgba(var(--ink-rgb),.07);}
  .stbadge.sent{color:var(--ink-faint);background:rgba(var(--ink-rgb),.04);}

  /* COACHING (Moments) */
  .ccta{display:block;width:100%;text-align:left;cursor:pointer;border:1px solid rgba(162,78,129,.32);border-radius:18px;background:linear-gradient(135deg,rgba(162,78,129,.12),rgba(162,78,129,.035));padding:22px 24px;transition:border-color .18s ease,transform .18s ease,background .18s ease;font-family:inherit;}
  .ccta:hover{border-color:rgba(162,78,129,.6);transform:translateY(-1px);background:linear-gradient(135deg,rgba(162,78,129,.18),rgba(162,78,129,.06));}
  .ccta-k{display:block;font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-bright);}
  .ccta-t{display:block;margin-top:9px;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
  .ccta-s{display:block;margin-top:6px;font-size:14px;color:var(--ink-soft);}
  .cpick{display:flex;flex-wrap:wrap;gap:9px;}
  .cpill{font-family:inherit;font-size:13.5px;font-weight:500;padding:9px 16px;border-radius:99px;border:1px solid var(--line);background:var(--field);color:var(--ink-soft);cursor:pointer;transition:all .15s ease;}
  .cpill.on{border-color:rgba(162,78,129,.55);background:rgba(162,78,129,.12);color:var(--ink);}
  .cpill:not(.on){opacity:.55;}
  .cpill:not(.on):hover{opacity:1;color:var(--ink);}
  .cpick-note{margin-top:13px;font-size:13px;line-height:1.5;color:var(--ink-faint);}
  .moments{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
  .moment{text-align:left;cursor:pointer;border:1px solid var(--line);border-radius:16px;background:var(--elev);padding:20px;transition:border-color .16s ease,transform .16s ease,background .16s ease;font-family:inherit;}
  .moment:hover{border-color:rgba(162,78,129,.4);transform:translateY(-2px);}
  .moment.on{border-color:rgba(162,78,129,.65);background:rgba(162,78,129,.07);}
  .mo-ic{display:block;width:30px;height:30px;color:var(--plum-bright);}
  .mo-t{display:block;margin-top:14px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
  .mo-l{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--ink-soft);}
  .coachout{border:1px solid var(--line);border-radius:20px;background:var(--elev);padding:30px;animation:coachin .4s cubic-bezier(.2,.7,.2,1);}
  @keyframes coachin{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
  .co-h{display:flex;align-items:center;gap:14px;padding-bottom:22px;border-bottom:1px solid var(--line);}
  .co-icon{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:rgba(162,78,129,.14);color:var(--plum-bright);display:flex;align-items:center;justify-content:center;}
  .co-icon svg{width:22px;height:22px;}
  .co-k{font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
  .co-h h3{margin-top:3px;font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--ink);}
  .co-sec{margin-top:24px;}
  .co-lbl{display:block;font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:11px;}
  .co-lbl.plum{color:var(--plum-bright);}
  .co-lbl.amber{color:var(--amber-bright);}
  .co-sec.read p{font-size:15.5px;line-height:1.6;color:var(--ink-soft);}
  /* The coaching panel's dotted list. Scoped to .co-sec and left that way:
     the profile's strengths and edges is the same shape, and it has its own
     component in .col.s / .col.e above, which the design wrote for it. Two
     names for one look is how a page drifts; two components for two sections
     that genuinely differ is not. */
  .co-sec ul{list-style:none;display:flex;flex-direction:column;gap:11px;}
  .co-sec li{position:relative;padding-left:22px;font-size:15px;line-height:1.55;color:var(--ink);}
  .co-sec li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;}
  .co-sec.try li::before{background:var(--plum);box-shadow:0 0 8px rgba(162,78,129,.55);}
  .co-sec.avoid li::before{background:var(--amber);box-shadow:0 0 8px rgba(210,149,74,.5);}
  .co-sec.avoid li{color:var(--ink-soft);}
  .co-script{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
  .co-q{font-size:16px;line-height:1.6;color:var(--ink);font-style:italic;padding:15px 18px;border-left:2px solid var(--plum);background:rgba(162,78,129,.05);border-radius:0 10px 10px 0;}
  .co-send{margin-top:16px;display:inline-block;}
  @media (max-width:620px){ .moments{grid-template-columns:1fr;} }

  /* DYAD scripts + rituals */
  .scrintro{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin-top:-4px;margin-bottom:18px;}
  .scripts{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .scr{border:1px solid var(--line);border-radius:14px;background:var(--elev);padding:18px 20px;}
  .scr-when{display:block;font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-bright);margin-bottom:10px;}
  .scr-line{font-size:15px;line-height:1.55;color:var(--ink);font-style:italic;}
  .rituals{display:flex;flex-direction:column;gap:16px;}
  .rit{display:flex;gap:14px;align-items:flex-start;}
  .rit-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:7px;background:var(--plum);box-shadow:0 0 9px rgba(162,78,129,.6);}
  .rit h4{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
  .rit p{margin-top:5px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);}
  @media (max-width:560px){ .scripts{grid-template-columns:1fr;} }

  /* SUPER TEAM bench + gap-filler */
  .bench{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
  .benchrow{display:flex;align-items:center;gap:15px;text-align:left;width:100%;border:1px solid var(--line);border-radius:14px;background:var(--elev);padding:15px 18px;font-family:inherit;cursor:default;transition:border-color .15s ease,transform .15s ease;}
  .benchrow[data-nav]{cursor:pointer;}
  .benchrow[data-nav]:hover{border-color:rgba(162,78,129,.45);transform:translateY(-1px);}
  .bp{flex:0 0 auto;display:flex;}
  .bp .ba{width:30px;height:30px;border-radius:50%;background:var(--plum-deep);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;border:2px solid var(--elev);}
  .bp .ba:nth-child(2){margin-left:6px;}
  .bnames{flex:0 0 auto;font-size:14.5px;font-weight:600;color:var(--ink);min-width:118px;}
  .bread{flex:1;font-size:13.5px;line-height:1.45;color:var(--ink-soft);}
  .bedge{flex:0 0 auto;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:5px 11px;border-radius:99px;}
  .bedge.ok{color:var(--plum-bright);background:rgba(162,78,129,.13);}
  .bedge.warn{color:var(--amber-bright);background:rgba(210,149,74,.12);}
  .gapfill{border:1px solid rgba(162,78,129,.3);border-radius:18px;background:linear-gradient(135deg,rgba(162,78,129,.1),rgba(162,78,129,.03));padding:24px 26px;}
  .gapfill p{margin-top:12px;font-size:16.5px;line-height:1.6;color:var(--ink);}
  /* THE PICKER ROW, IN THREE TRACKS.
     As flex, .bnames sizes to the name, so a long one ("Marcus Bellringer
     Bell") pushed that row's title and state right while short ones sat left,
     and a column of six rows had three ragged edges. Three equal tracks fix
     all three at once: name left, title centred, state hard right, and the
     geometry is identical whether or not a row has a state to show. */
  .benchrow.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;align-items:center;}
  .benchrow.trio .bnames{min-width:0;}
  .benchrow.trio .bread{text-align:center;}
  .benchrow.trio .bedge{justify-self:end;}
  @media (max-width:560px){ .benchrow{flex-wrap:wrap;} .bnames{min-width:0;} .bread{flex-basis:100%;order:3;}
    .benchrow.trio{grid-template-columns:1fr auto;gap:4px 12px;}
    .benchrow.trio .bnames{grid-column:1;} .benchrow.trio .bread{grid-column:1;text-align:left;}
    .benchrow.trio .bedge{grid-column:2;grid-row:1;} }

  /* DYAD invite + pending, 360 share */
  .sharehint{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0 0 13px;max-width:54ch;}
  /* The waiting dot. Scoped to .pill when the dyad picker was a pill row; the
     picker is a .bench list now (it has to carry a name, a role and a state
     phrase, which a pill cannot), so the dot travels with it. */
  .pill .pdot,.bnames .pdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 7px rgba(210,149,74,.6);margin-right:7px;vertical-align:middle;}
  .pill.invite{color:var(--plum-bright);border-style:dashed;border-color:rgba(162,78,129,.45);}
  .pill.invite:hover{background:rgba(162,78,129,.08);color:var(--ink);}
  .dypend{max-width:520px;margin:44px auto 0;text-align:center;}
  .dypend .pair{justify-content:center;}
  .pav.pend{background:rgba(var(--ink-rgb),.05);color:var(--ink-faint);border:1px dashed var(--line);}
  .dypend .kick{margin-top:28px;}
  .dypend .relessence{margin-left:auto;margin-right:auto;}
  .dpend-actions{margin-top:30px;display:flex;flex-direction:column;gap:16px;align-items:center;}
  .dpend-actions .sharelink{width:100%;max-width:400px;}
  .invlist{display:flex;flex-direction:column;gap:9px;margin-top:4px;}
  .invteam{display:flex;align-items:center;gap:13px;width:100%;text-align:left;border:1px solid var(--line);border-radius:13px;background:var(--elev);padding:13px 15px;font-family:inherit;cursor:pointer;transition:border-color .15s ease;}
  .invteam:hover{border-color:rgba(162,78,129,.45);}
  .invteam .iav{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--plum-deep);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}
  .invteam .inm{flex:1;}
  .invteam .inm b{display:block;font-size:14.5px;color:var(--ink);font-weight:500;}
  .invteam .inm span{font-size:12.5px;color:var(--ink-faint);}
  .invteam .iadd{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--plum-bright);letter-spacing:.04em;}
  .invteam.done{opacity:.5;cursor:default;}
  .invteam.done .iadd{color:var(--ink-faint);}

  /* COMPASS chat */
  .cmp-fab{position:fixed;right:22px;bottom:22px;z-index:30;width:62px;height:62px;border:none;background:none;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;transition:transform .18s ease,opacity .2s ease;}
  .cmp-fab.show{display:flex;}
  .cmp-fab.hide{opacity:0;pointer-events:none;transform:scale(.6);}
  .cmp-panel{position:fixed;right:22px;bottom:22px;z-index:45;width:382px;height:min(560px,76vh);display:flex;flex-direction:column;background:var(--elev);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 40px rgba(162,78,129,.1);overflow:hidden;opacity:0;visibility:hidden;transform:translate(20px,20px) scale(.4);transform-origin:bottom right;transition:opacity .26s ease,transform .36s cubic-bezier(.18,.9,.28,1.08),visibility .26s ease;}
  .cmp-panel.open{opacity:1;visibility:visible;transform:none;}
  .cmp-panel:not(.open),.cmp-panel:not(.open) *{pointer-events:none;}
  .cmp-head{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:16px 16px 15px;border-bottom:1px solid var(--line);}
  .cmp-mark{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;}
  .cmp-h-txt{flex:1;line-height:1.2;}
  .cmp-h-txt b{display:block;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
  .cmp-h-txt span{font-size:11.5px;color:var(--ink-faint);}
  .cmp-x{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:none;background:none;color:var(--ink-faint);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease;}
  .cmp-x svg{width:17px;height:17px;}
  .cmp-x:hover{color:var(--ink);}
  .cmp-gear{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:none;background:none;color:var(--ink-faint);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease;}
  .cmp-gear svg{width:18px;height:18px;}
  .cmp-gear:hover{color:var(--plum-bright);}
  .cmp-set{position:absolute;left:0;right:0;top:65px;bottom:0;z-index:6;background:var(--elev);border-top:1px solid var(--line);padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:11px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .24s cubic-bezier(.18,.9,.28,1.04),visibility .2s ease;}
  .cmp-set.open{opacity:1;visibility:visible;transform:none;}
  .cmp-set-h b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;}
  .cmp-set-h span{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:var(--ink-faint);}
  .cmp-set-list{display:flex;flex-direction:column;gap:8px;}
  .cmp-set-opt{text-align:left;font-family:inherit;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;transition:border-color .15s ease,background .15s ease;}
  .cmp-set-opt b{display:block;font-size:13.5px;font-weight:550;color:var(--ink);}
  .cmp-set-opt span{display:block;margin-top:2px;font-size:12px;color:var(--ink-soft);}
  .cmp-set-opt:hover{border-color:rgba(162,78,129,.45);}
  .cmp-set-opt.sel{border-color:var(--plum-bright);background:rgba(162,78,129,.10);}
  .cmp-set-clabel{font-size:11.5px;color:var(--ink-faint);margin-top:2px;}
  .cmp-set-custom{font-family:inherit;font-size:13px;line-height:1.45;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:11px;padding:10px 12px;resize:none;outline:none;transition:border-color .15s ease;}
  .cmp-set-custom:focus{border-color:rgba(162,78,129,.5);}
  .cmp-set-done{align-self:flex-end;font-family:inherit;font-size:13px;font-weight:550;color:var(--bg);background:var(--ink);border:none;border-radius:10px;padding:9px 18px;cursor:pointer;transition:opacity .15s ease;}
  .cmp-set-done:hover{opacity:.88;}
  .cmp-set-mem{display:flex;align-items:center;gap:10px;margin-top:2px;padding-top:11px;border-top:1px solid var(--line);}
  .cmp-set-mem span{flex:1;font-size:11.5px;line-height:1.4;color:var(--ink-faint);}
  .cmp-set-forget{flex:0 0 auto;font-family:inherit;font-size:12px;font-weight:500;color:var(--ink-soft);background:none;border:1px solid var(--line);border-radius:8px;padding:6px 11px;cursor:pointer;transition:color .15s ease,border-color .15s ease;}
  .cmp-set-forget:hover{color:var(--plum-bright);border-color:rgba(162,78,129,.45);}
  .cmp-msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;}
  .cmp-m{max-width:85%;font-size:14px;line-height:1.5;padding:11px 14px;border-radius:15px;}
  .cmp-m.bot{align-self:flex-start;background:var(--field);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:5px;}
  .cmp-m.user{align-self:flex-end;background:rgba(162,78,129,.18);border:1px solid rgba(162,78,129,.32);color:var(--ink);border-bottom-right-radius:5px;}
  .cmp-go{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--plum-bright);background:none;border:none;cursor:pointer;padding:0;}
  .cmp-go svg{width:15px;height:15px;}
  .cmp-go:hover{color:#D389B2;}
  .cmp-chips{display:flex;flex-direction:column;gap:8px;align-self:stretch;}
  .cmp-chip{text-align:left;font-family:inherit;font-size:13px;font-weight:450;color:var(--ink-soft);background:var(--field);border:1px solid var(--line);border-radius:11px;padding:10px 13px;cursor:pointer;transition:border-color .15s ease,color .15s ease;}
  .cmp-chip:hover{border-color:rgba(162,78,129,.45);color:var(--ink);}
  .cmp-stream{align-self:flex-start;background:var(--field);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:5px;min-width:34px;}
  .cmp-cursor{display:inline-block;width:7px;height:14px;margin-left:1px;border-radius:2px;background:var(--plum-bright);vertical-align:text-bottom;animation:cmpBlink 1s steps(2,start) infinite;}
  @keyframes cmpBlink{50%{opacity:.18;}}
  .cmp-typing{align-self:flex-start;display:flex;gap:4px;padding:13px 14px;background:var(--field);border:1px solid var(--line);border-radius:15px;border-bottom-left-radius:5px;}
  .cmp-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);animation:cmpblink 1.2s infinite;}
  .cmp-typing i:nth-child(2){animation-delay:.2s;} .cmp-typing i:nth-child(3){animation-delay:.4s;}
  @keyframes cmpblink{0%,60%,100%{opacity:.3;}30%{opacity:1;}}
  .cmp-input{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:13px 18px 16px;border-top:1px solid var(--line);}
  .cmp-input input{flex:1;min-width:0;background:var(--field);border:1px solid var(--line);border-radius:11px;padding:11px 14px;color:var(--ink);font-family:inherit;font-size:14px;transition:border-color .15s ease;}
  .cmp-input input:focus{outline:none;border-color:rgba(162,78,129,.55);}
  .cmp-input input::placeholder{color:var(--ink-faint);}
  .cmp-send{flex:0 0 auto;width:40px;height:40px;border-radius:11px;border:none;cursor:pointer;background:linear-gradient(135deg,var(--plum),var(--plum-deep));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 11px rgba(162,78,129,.38);transition:transform .15s ease;}
  .cmp-send svg{width:18px;height:18px;}
  .cmp-send:hover{transform:translateY(-1px);}
  .cmp-m.cmp-wide{max-width:100%;align-self:stretch;}
  .cmp-rich{display:flex;flex-direction:column;gap:11px;}
  .cmp-rich .cmp-summary{margin:0;font-size:14px;font-weight:600;color:var(--ink);line-height:1.4;}
  .cmp-rich .cmp-answer{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft);}
  .cmp-quant{display:flex;flex-direction:column;gap:13px;padding:13px;border:1px solid var(--line);border-radius:12px;background:rgba(var(--ink-rgb),.02);}
  .cmp-q-row{display:flex;flex-direction:column;gap:6px;}
  .cmp-q-head{display:flex;align-items:baseline;justify-content:space-between;}
  .cmp-q-label{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;}
  .cmp-q-val{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;}
  .cmp-q-bar{height:5px;border-radius:3px;background:rgba(var(--ink-rgb),.07);overflow:hidden;}
  .cmp-q-bar i{display:block;height:100%;border-radius:3px;}
  .cmp-q-reason{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-soft);}
  .cmp-q-note{margin:1px 0 0;font-size:11.5px;line-height:1.4;color:var(--ink-faint);font-style:italic;}
  .cmp-plum{color:var(--plum-bright);}
  i.cmp-plum{background:linear-gradient(90deg,var(--plum),var(--plum-bright));}
  .cmp-amber{color:var(--amber-bright);}
  i.cmp-amber{background:linear-gradient(90deg,var(--amber),var(--amber-bright));}
  .cmp-script{position:relative;border:1px solid rgba(162,78,129,.28);background:rgba(162,78,129,.07);border-radius:12px;padding:11px 13px;}
  .cmp-script-k{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--plum-bright);font-weight:600;margin-bottom:5px;}
  .cmp-script p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink);font-style:italic;padding-right:56px;}
  .cmp-scopy{position:absolute;right:10px;bottom:10px;font-family:inherit;font-size:12px;font-weight:600;color:var(--ink-soft);background:none;border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer;transition:color .15s ease,border-color .15s ease;}
  .cmp-scopy:hover{color:var(--ink);border-color:rgba(162,78,129,.45);}
  .cmp-next{margin:0;font-size:13px;line-height:1.45;color:var(--ink);}
  .cmp-next span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--plum-bright);font-weight:700;margin-right:7px;}
  .cmp-foot{display:flex;flex-wrap:wrap;align-items:center;gap:7px 11px;}
  .cmp-conf{font-size:11.5px;font-weight:600;letter-spacing:.04em;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);}
  .cmp-conf-high{color:var(--plum-bright);border-color:rgba(162,78,129,.4);}
  .cmp-conf-low{color:var(--amber-bright);border-color:rgba(210,149,74,.4);}
  .cmp-lim{flex:1 1 100%;font-size:11.5px;line-height:1.4;color:var(--ink-faint);}
  .cmp-rich .cmp-go{margin-top:1px;}

  /* WEEKLY */
  .wkscene{min-height:calc(100vh - 110px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 28px 80px;}
  .focus{max-width:600px;display:flex;flex-direction:column;align-items:center;}
  .focus .week{margin-top:9px;font-size:13px;color:var(--ink-faint);font-weight:500;letter-spacing:.04em;}
  .statement{margin-top:26px;font:700 clamp(40px,7vw,74px)/1.02 var(--disp);letter-spacing:-.035em;color:var(--hi);max-width:15ch;}
  .reason{margin-top:24px;font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:44ch;}
  .move{margin-top:46px;width:100%;border:1px solid rgba(162,78,129,.38);border-radius:20px;background:linear-gradient(160deg,rgba(162,78,129,.10),rgba(162,78,129,.02));padding:30px 30px 28px;transition:border-color .25s ease,box-shadow .25s ease;text-align:left;}
  .move.active{border-color:rgba(162,78,129,.7);box-shadow:0 0 60px rgba(162,78,129,.18),inset 0 0 40px rgba(162,78,129,.05);}
  .movelabel{font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-bright);}
  .movetext{margin-top:14px;font-size:18.5px;line-height:1.5;color:var(--ink);font-weight:450;}
  .commit{margin-top:24px;min-height:52px;display:flex;align-items:center;}
  .committed{display:flex;align-items:center;gap:12px;}
  .committed .check{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#B65C92,#8E3F6E);box-shadow:0 0 18px rgba(162,78,129,.5);}
  .committed .check svg{width:16px;height:16px;color:#FCF6EF;}
  .committed .txt{font-size:15.5px;font-weight:550;color:var(--ink);}
  .undo{background:none;border:none;cursor:pointer;color:var(--ink-faint);font-family:inherit;font-size:13px;font-weight:500;margin-left:6px;transition:color .15s ease;}
  .undo:hover{color:var(--ink-soft);}
  .why{margin-top:34px;display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;color:var(--ink-soft);font-family:inherit;font-size:14px;font-weight:500;transition:color .16s ease;}
  .why:hover{color:var(--ink);}
  .why svg{width:14px;height:14px;transition:transform .16s ease;}
  .why:hover svg{transform:translateX(2px);}

  /* DYAD */
  .picker{display:flex;align-items:center;gap:10px;padding:0 0 22px;overflow-x:auto;}
  .picker .pl{font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);flex:0 0 auto;}
  .pill{flex:0 0 auto;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--ink-soft);background:none;border:1px solid var(--line);border-radius:999px;padding:7px 15px;transition:all .15s ease;white-space:nowrap;}
  .pill:hover{color:var(--ink);border-color:rgba(var(--ink-rgb),.25);}
  .pill.on{color:var(--hi);border-color:rgba(162,78,129,.6);background:rgba(162,78,129,.14);box-shadow:0 0 18px rgba(162,78,129,.18);}
  .pill.add{color:var(--ink-faint);border-style:dashed;}
  .pair{display:flex;align-items:center;margin-top:18px;position:relative;}
  .pav{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 14px var(--disp);color:#fff;border:2px solid var(--bg);background:linear-gradient(150deg,var(--plum-deep),#2a1424);overflow:hidden;position:relative;}
  .pav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .pav.two{margin-left:-12px;background:rgba(20,30,40,.55);}
  .relhead{margin-top:18px;font:800 clamp(33px,5.6vw,54px)/1.04 var(--disp);letter-spacing:-.04em;color:var(--hi);position:relative;
    background:linear-gradient(120deg,#fff 20%,var(--plum-bright) 70%,var(--amber-bright));-webkit-background-clip:text;background-clip:text;color:transparent;}
  .relarche{margin-top:14px;font:600 13px var(--disp);color:var(--ink-faint);position:relative;}
  .relessence{margin-top:16px;font-size:16.5px;line-height:1.55;color:var(--ink-soft);position:relative;max-width:52ch;}
  .cglist{border-top:1px solid var(--line);}
  .cgrow{position:relative;display:grid;grid-template-columns:128px 1fr auto auto;align-items:baseline;gap:18px;width:100%;text-align:left;cursor:pointer;background:none;border:none;border-bottom:1px solid var(--line);padding:19px 4px;font-family:inherit;transition:background .2s ease,padding-left .22s cubic-bezier(.4,0,.2,1);}
  .cgrow::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:2px;border-radius:2px;transform:scaleY(0);transform-origin:center;opacity:0;transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .2s ease;}
  .cgrow.click::before{background:var(--plum);box-shadow:0 0 12px rgba(162,78,129,.7);}
  .cgrow.grind::before{background:var(--amber);box-shadow:0 0 12px rgba(210,149,74,.6);}
  .cgrow:hover,.cgrow:focus-visible{outline:none;background:rgba(var(--ink-rgb),.03);padding-left:18px;}
  .cgrow:hover::before,.cgrow:focus-visible::before{transform:scaleY(1);opacity:1;}
  .cgrow .name{font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);transition:color .18s ease;}
  .cgrow.click:hover .name{color:var(--plum-bright);} .cgrow.grind:hover .name{color:var(--amber-bright);}
  .cgrow .desc{font-size:16px;color:var(--ink);font-weight:430;line-height:1.4;}
  .tag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:999px;align-self:center;white-space:nowrap;}
  .click .tag{color:#DD9CC0;background:rgba(162,78,129,.16);} .grind .tag{color:var(--amber-bright);background:rgba(210,149,74,.15);}
  .cgrow .chev{width:17px;height:17px;color:var(--ink-soft);align-self:center;transition:color .18s ease,transform .2s cubic-bezier(.4,0,.2,1);}
  .cgrow.click:hover .chev{color:var(--plum);transform:translateX(4px);} .cgrow.grind:hover .chev{color:var(--amber);transform:translateX(4px);}
  .wired{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .who{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--field);}
  .who .wtop{display:flex;align-items:center;gap:10px;}
  .who .wav{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#FCF7F0;border:1px solid var(--line);background:linear-gradient(150deg,#3a2333,#1a121f);overflow:hidden;position:relative;}
  .who .wav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .who .wn{font-size:14px;font-weight:600;color:var(--ink);}
  .who .warche{margin-top:14px;font-size:16px;font-weight:550;color:var(--ink);letter-spacing:-.01em;}
  .who .wtags{margin-top:8px;font-size:12px;color:var(--ink-soft);font-weight:500;}
  .who p{margin-top:12px;font-size:14px;line-height:1.45;color:var(--ink-soft);}

  /* SUPER TEAM */
  .head .meta{margin-top:14px;display:flex;align-items:center;gap:14px;}
  .avrow{display:flex;}
  .avrow .a{position:relative;width:30px;height:30px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#5c2a4e,#2a1a26);border:1.5px solid #0B0810;}
  .avrow .a b{font-size:11px;font-weight:600;color:#FCF7F0;}
  .avrow .a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .avrow .a+.a{margin-left:-9px;}
  .head .mt{font-size:13px;color:var(--ink-soft);font-weight:500;}
  .head h1{margin-top:14px;font:800 clamp(36px,5.6vw,64px)/1 var(--disp);letter-spacing:-.04em;
    background:linear-gradient(120deg,#fff 20%,var(--plum-bright) 70%,var(--amber-bright));-webkit-background-clip:text;background-clip:text;color:transparent;max-width:18ch;}
  .lead{margin-top:34px;border:1px solid rgba(162,78,129,.4);border-radius:20px;background:linear-gradient(160deg,rgba(162,78,129,.11),rgba(162,78,129,.03));padding:26px 28px 24px;box-shadow:0 0 50px rgba(162,78,129,.07) inset;}
  .lead .eyebrow{color:var(--plum-bright);display:block;}
  .lead p{margin-top:13px;font-size:17px;line-height:1.55;color:var(--ink);}
  .hint{font-size:13.5px;color:var(--ink-faint);font-weight:450;margin-bottom:14px;}
  .map{position:relative;width:100%;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:radial-gradient(80% 90% at 50% 45%,rgba(92,42,78,.15),rgba(7,6,10,.1));}
  .map svg{display:block;width:100%;height:auto;}
  .edge{stroke-width:1.5;transition:stroke-opacity .2s ease,stroke-width .2s ease;}
  .e-align{stroke:var(--plum);stroke-opacity:.45;} .e-friction{stroke:var(--amber);stroke-opacity:.42;}
  .edge.lit{stroke-width:2.6;stroke-opacity:.95;} .edge.dim{stroke-opacity:.08;}
  .node{cursor:pointer;}
  .glow{fill:rgba(162,78,129,.16);transition:fill .2s ease;}
  .core{fill:#5c2a4e;}
  .ini{fill:#FCF7F0;font-size:13px;font-weight:600;pointer-events:none;}
  .ring{fill:none;stroke:var(--plum);stroke-width:2;stroke-opacity:.6;transition:stroke-opacity .2s ease,stroke-width .2s ease;}
  .ring2{fill:none;stroke:var(--plum-bright);stroke-width:1.5;stroke-opacity:.8;}
  .nm{fill:var(--ink-soft);font-size:12.5px;font-weight:500;pointer-events:none;transition:fill .2s ease;}
  .node:hover .ring,.node.active .ring{stroke-opacity:1;stroke-width:2.6;}
  .node:hover .glow,.node.active .glow{fill:rgba(184,96,145,.32);}
  .node:hover .nm,.node.active .nm{fill:var(--ink);}
  .node.dim{opacity:.32;transition:opacity .2s ease;}
  .legend{display:flex;gap:22px;justify-content:center;padding:0 0 20px;}
  .legend span{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft);font-weight:500;}
  .legend i{width:18px;height:2px;border-radius:2px;display:inline-block;}
  .legend .al{background:var(--plum);} .legend .fr{background:var(--amber);}
  .glance{border-top:1px solid var(--line);}
  .grow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:17px 4px;border-bottom:1px solid var(--line);}
  .grow .gt{font-size:16px;color:var(--ink);font-weight:430;}
  .gtag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap;}
  .gtag.s{color:#DD9CC0;background:rgba(162,78,129,.16);} .gtag.w{color:var(--amber-bright);background:rgba(210,149,74,.15);}

  /* DRAWER (shared) */
  .scrim{position:fixed;inset:0;z-index:40;background:rgba(4,3,7,.6);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;}
  .scrim.open{opacity:1;visibility:visible;}
  /* .wide is Mark's "full screen": the same panel sized for a document.
     min() keeps it inside the viewport on a phone, where 92vw is already
     effectively full screen and the toggle changes little. */
  .drawer.wide{width:min(1100px,100vw);}
  .drawer{position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(440px,92vw);text-align:left;background:var(--elev);border-left:1px solid var(--line);padding:30px 30px 44px;overflow-y:auto;transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);box-shadow:-30px 0 80px rgba(0,0,0,.5);}
  .drawer.open{transform:translateX(0);}
  .dclose{position:absolute;top:24px;right:24px;background:none;border:none;cursor:pointer;color:var(--ink-soft);padding:6px;transition:color .15s ease;}
  .dclose:hover{color:var(--ink);}
  .dclose svg{width:20px;height:20px;}
  .dava{width:60px;height:60px;border-radius:50%;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#5c2a4e,#2a1a26);border:1px solid var(--line);margin-bottom:18px;}
  .dava b{font-size:18px;font-weight:600;color:#FCF7F0;}
  .dava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .dlbl{font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-bright);}
  .dlbl.grind{color:var(--amber-bright);}
  .dtitle{margin-top:12px;font:700 25px/1.15 var(--disp-theme);font-style:var(--disp-style);letter-spacing:-.02em;color:var(--ink);}
  .drole{margin-top:6px;font-size:13px;letter-spacing:.04em;color:var(--ink-soft);font-weight:500;}
  .dlede{margin-top:14px;font-size:16px;line-height:1.6;color:var(--ink-soft);}
  .dintro{margin-top:20px;font-size:15.5px;line-height:1.58;color:var(--ink-soft);}
  .dpoints{margin-top:24px;display:flex;flex-direction:column;gap:20px;}
  .dpoint{font-size:15.5px;line-height:1.55;color:var(--ink);padding-left:16px;border-left:2px solid var(--plum-deep);}
  .dpoint.grind{border-left-color:rgba(210,149,74,.45);}
  .dpoint b{color:var(--plum-bright);font-weight:550;} .dpoint.grind b{color:var(--amber-bright);}
  .ph{display:block;font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-bright);margin-bottom:9px;}
  .dpayoff{margin-top:28px;border:1px solid rgba(162,78,129,.4);border-radius:16px;background:linear-gradient(160deg,rgba(162,78,129,.12),rgba(162,78,129,.03));padding:22px 22px 20px;}
  .dpayoff p{font-size:16.5px;line-height:1.55;color:var(--ink);} .dpayoff b{color:var(--plum-bright);font-weight:650;}
  .dsec{margin-top:26px;} .dsec .se{display:block;font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:11px;}
  .dyn{font-size:15.5px;line-height:1.55;color:var(--ink);}
  .rel{font-size:15px;line-height:1.85;color:var(--ink-soft);} .rel b.al{color:var(--plum-bright);font-weight:550;} .rel b.fr{color:var(--amber-bright);font-weight:550;}
  .dlink{display:inline-flex;align-items:center;gap:7px;margin-top:13px;background:none;border:none;padding:0;cursor:pointer;color:var(--plum-bright);font-family:inherit;font-size:13.5px;font-weight:600;transition:gap .16s ease,color .16s ease;}
  .dlink:hover{gap:11px;color:#D389B2;} .dlink svg{width:14px;height:14px;}
  .dguide{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);}

  @media (max-width:560px){
    .hero{padding:30px 26px;} .prow{grid-template-columns:1fr;gap:6px;} .cols{grid-template-columns:1fr;gap:34px;}
    .wired{grid-template-columns:1fr;} .levels{gap:20px;} .legend{flex-wrap:wrap;gap:14px;}
    .fwrow{grid-template-columns:1fr auto;align-items:center;gap:3px 14px;padding:16px 4px;}
    .fwrow .name{grid-column:1;grid-row:1;} .fwrow .res{grid-column:1;grid-row:2;} .fwrow .chev{grid-column:2;grid-row:1 / span 2;}
    .cgrow{grid-template-columns:1fr auto;align-items:center;gap:4px 12px;padding:16px 4px;}
    .cgrow .name{grid-column:1;grid-row:1;} .cgrow .desc{grid-column:1;grid-row:2;} .cgrow .tag{grid-column:2;grid-row:1;} .cgrow .chev{grid-column:2;grid-row:2;justify-self:end;}
    .invrow{flex-wrap:wrap;} .invrow input.iname{flex:1 1 100%;} .invrow .iemail{flex:1 1 auto;} .invnote{min-height:164px;}
    .cmp-panel{left:10px;right:10px;bottom:10px;top:10px;width:auto;height:auto;}
    .cmp-fab{right:16px;bottom:16px;}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* B1: framework learn-more disclosure */
.fwlearn{margin-top:22px;border-top:1px solid var(--line);padding-top:4px}
.fwlearn summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;padding:12px 2px;color:var(--ink-soft);font-size:13.5px;font-weight:600;letter-spacing:.01em}
.fwlearn summary::-webkit-details-marker{display:none}
.fwlearn summary .chev{width:16px;height:16px;color:var(--ink-soft);transition:transform .18s ease}
.fwlearn[open] summary .chev{transform:rotate(90deg)}
.fwlearn summary:hover{color:var(--ink)}
.fwlearn-body{padding:2px 2px 10px}
.fwl-h{color:var(--ink-faint);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;margin:14px 0 4px;font-weight:600}
.fwl-p{color:var(--ink-soft);font-size:13.5px;line-height:1.65;margin:0}
.fwl-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.fwl-links a{color:var(--plum, #B86091);font-size:13px;text-decoration:none;border-bottom:1px solid var(--line)}
.fwl-links a:hover{border-bottom-color:currentColor}

/* Super Coach: dossier provenance + saveable prep */
.co-dossier{display:flex;flex-direction:column;gap:9px;padding:12px 14px;margin-bottom:15px;background:var(--field);border:1px solid var(--line);border-radius:12px}
.co-doss-k{color:var(--ink-faint);font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.co-chips{display:flex;flex-wrap:wrap;gap:7px}
.co-chip{font-size:12px;color:var(--ink-soft);background:var(--elev);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
/* A source this prep could have used and did not. Dashed rather than dimmer,
   so it reads as the outline of a thing instead of a disabled one. */
.co-chip.absent{color:var(--ink-faint);background:transparent;border-style:dashed}
/* CLICK and GRIND, from 20-dyad.png. Plum is the identity colour and carries
   what comes easily; amber is reserved across this system for friction, which
   is exactly what GRIND is. No new hues: both already exist as tokens. */
.tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
     border-radius:999px;padding:4px 10px;white-space:nowrap}
.tag.click{color:var(--plum-bright);border:1px solid var(--plum-deep);background:rgba(162,78,129,.12)}
.tag.grind{color:var(--amber-bright);border:1px solid rgba(210,149,74,.35);background:rgba(210,149,74,.10)}
.co-save{margin-top:16px;width:100%;background:transparent;border:1px dashed var(--line);color:var(--ink-soft);border-radius:12px;padding:12px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:border-color .16s,color .16s}
.co-save:hover{color:var(--ink);border-color:var(--ink-soft)}
.co-save.done{border-style:solid;border-color:var(--plum,#B86091);color:var(--plum,#B86091);cursor:default}

/* Compass Help panel (V4) */
.help-intro{padding:4px 2px 12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.help-intro b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px}
.help-intro p{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.55}
.help-item{border-bottom:1px solid var(--line)}
.help-q{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;padding:12px 2px;color:var(--ink);cursor:pointer;font:inherit}
.help-q .help-lvl{flex-shrink:0;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);background:var(--field);border:1px solid var(--line);border-radius:999px;padding:3px 8px}
.help-q .help-qt{flex:1;font-size:14px;font-weight:500}
.help-q .chev{width:16px;height:16px;color:var(--ink-soft);transition:transform .18s ease;flex-shrink:0}
.help-q.open .chev{transform:rotate(90deg)}
.help-q:hover{color:var(--ink)}
.help-a{padding:0 2px 13px;color:var(--ink-soft);font-size:13.5px;line-height:1.6}
.help-foot{margin-top:15px;color:var(--ink-soft);font-size:13px;line-height:1.55}
.help-tosc{background:none;border:0;color:var(--plum,#B86091);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0}
.help-tosc.big{display:block;width:100%;margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--field)}
.help-tosc:hover{text-decoration:underline}
/* The way to the screen an answer came from, when the compass found it
   somewhere other than where you are standing. Same treatment as .help-tosc
   because it is the same kind of thing, a link out of the panel, and a second
   look for one meaning is the drift these files keep producing. */
.help-goto{background:none;border:0;color:var(--plum,#B86091);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0;margin-top:8px;display:inline-block}
.help-goto:hover{text-decoration:underline}
.help-back{margin-top:12px;background:none;border:1px solid var(--line);border-radius:10px;color:var(--ink-soft);font:inherit;font-size:12.5px;padding:8px 12px;cursor:pointer}

/* Shareable deliverable actions (guide, dyad report, Fast Start) */
.dlv-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.dlv-btn{background:transparent;border:1px solid var(--line);color:var(--ink-soft);border-radius:11px;padding:9px 15px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .16s,color .16s}
.dlv-btn:hover{color:var(--ink);border-color:var(--ink-soft)}

/* ── Speak: the spoken half of Super Coach ──────────────────────────────
   The only new component this screen needed. Every other part of it borrows:
   the provenance chips are `.co-dossier`, the opening line is `.co-q`, and the
   conversation is the `.cmp-*` family the retired Compass chat left behind.

   Nothing round and pressable existed except `.cmp-fab`, so the mic follows its
   language rather than inventing one: a plum drop-shadow glow that intensifies
   on hover, and a scale nudge on press. Larger than the fab at 76px because
   this is the primary action of its screen rather than a corner affordance.

   Palette only. The fifteen tokens are the entire palette and a name outside
   that list fails silently, which has shipped twice. */
.spk-mic-wrap { display:flex; flex-direction:column; align-items:center; gap:11px; }

.mic {
  width:76px; height:76px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--field); border:1px solid var(--line); color:var(--ink-soft);
  cursor:pointer; transition:transform .16s, border-color .16s, color .16s, box-shadow .16s;
}
.mic svg { width:30px; height:30px; }
.mic:hover:not(:disabled) {
  color:var(--ink); border-color:rgba(162,78,129,.45);
  box-shadow:0 0 15px rgba(184,96,145,.34);
}
.mic:active:not(:disabled) { transform:scale(.94); }

/* Held down. Plum fill is the one accent doing what it does everywhere else:
   marking the selected, live state. */
.mic.live {
  background:var(--plum); border-color:var(--plum); color:var(--ink);
  box-shadow:0 0 0 6px rgba(162,78,129,.16), 0 0 22px rgba(184,96,145,.5);
  animation:micpulse 1.6s ease-in-out infinite;
}

/* Disabled is not greyed-out-and-silent. The hint under it says why, per
   "say what is withheld and why": a blank invites a workaround. */
.mic:disabled { opacity:.45; cursor:not-allowed; }

@keyframes micpulse {
  0%,100% { box-shadow:0 0 0 6px rgba(162,78,129,.16), 0 0 22px rgba(184,96,145,.5); }
  50%     { box-shadow:0 0 0 11px rgba(162,78,129,.07), 0 0 30px rgba(184,96,145,.66); }
}

@media (prefers-reduced-motion:reduce) { .mic.live { animation:none; } }
  /* ── PRINT ───────────────────────────────────────────────────────────────
     Mark, slide 5: "Give option for 3 print outs: 1 page, 4 page, longer?"

     There were no print styles at all, so printing a guide meant a browser
     rasterising a dark app: plum gradients over half a ream, white text
     vanishing, controls printed as furniture. His own reference artifact is a
     PDF, so this is the format the product is judged in and it had none.

     ONE SHEET, NOT THREE LAYOUTS. The length options he asked for are a
     product decision about what belongs on a one-pager versus a four-pager,
     and nobody has made it. What is not a decision is that the guide should
     print at all. This makes the page printable and lets length come from what
     you print: the guide alone is the short one, the whole profile the long
     one.

     THE LIGHT TOKENS, NOT NEW ONES. [data-theme="light"] above was measured to
     WCAG 2.1 AA — the comment there records the contrast ratios. Inventing a
     second light palette here would be a second thing to get wrong, and the
     amber pair is exactly the small-uppercase text that failed the first time. */
  @page { size: Letter; margin: 16mm; }

  @media print {
    /* Force the measured light palette regardless of the viewer's theme. */
    :root, [data-theme="dark"], [data-theme="light"] {
      --bg:#FFFFFF; --elev:#FFFFFF; --ink:#241C29; --ink-soft:#574F5E;
      --ink-faint:#6A6172; --ink-rgb:36,28,41; --hi:#191420;
      --plum:#A24E81; --plum-bright:#A24E81; --plum-deep:#5C2A4E;
      --amber:#946124; --amber-bright:#946124;
      --line:rgba(36,28,41,.22); --field:transparent;
    }
    html, body { background:#fff !important; color:var(--ink) !important; }

    /* The hero is a plum gradient with a radial glow. On paper it is a solid
       block of ink and the white type inside it disappears. */
    .hero, .hero::before { background:none !important; box-shadow:none !important; }
    .hero { border:1px solid var(--line); border-radius:0; padding:0 0 14px; }
    .hero .kick, .essence, .archetype { color:var(--ink) !important; }
    .archetype { font-size:26pt; line-height:1.1; }
    .codes span { border:1px solid var(--line); background:none; color:var(--ink); }

    /* Furniture. Nothing you cannot act on from paper. */
    nav, .nav, .themetoggle, .gshare, button, .addrow, .invx,
    [data-guideshare], [data-guidecta], #sqNotesBlock textarea { display:none !important; }

    /* Keep a section and its heading together, and never split a single row
       of the guide across a page break. */
    section.block { break-inside:auto; page-break-inside:auto; }
    .eyebrow { break-after:avoid; page-break-after:avoid; }
    .prow, .grule, .tell, .slip, .lik { break-inside:avoid; page-break-inside:avoid; }
    a { color:var(--ink); border-bottom:none; }
  }

/* THE ADVISORY DISCLOSURE, FR-25. Present on every coaching card and dashboard
   surface. Quiet enough not to shout over the reading, legible enough to be
   read: it exists because somebody must be able to see that the product is
   advisory, and a line nobody can read does not carry the requirement. */
.advisory {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line, rgba(0,0,0,.08));
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-faint, #6b6b76);
  max-width: 62ch;
}

/* A PENDING ASK, above the grants. FR-30.
   Marked out from the grant rows below it because it is a question rather than
   a record: somebody is waiting on an answer, and a request that reads like a
   log entry gets scrolled past. */
.sqask { border-left: 3px solid var(--plum-bright, #7d4a9e); }
.sqaskrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sqaskrow button { flex: 0 1 auto; }

/* THE THREE LENSES. Marcus's note 6, and the output side of the three question
   layers: profile -> About me, dyad -> Working one to one, team -> Me in groups.
   Headed rather than merely spaced, because the point is that a reader can find
   the part they need: somebody about to run a 1:1 should not have to read the
   standing facts first. */
.lens { margin: 0 0 34px; }
.lenshead {
  font-size: 20px; line-height: 1.25; margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line, rgba(0,0,0,.08));
}
/* A lens with nothing in it says what fills it. It does not disappear: a guide
   that hides its empty parts looks finished when it is not. */
.lensblank { margin: 0; max-width: 62ch; }

/* ============================================================ THE REPORT
   Marcus, note 4: "Save card is not behaving as a save report download and it
   should. The existing card isn't useful and seems meaningless for someone to
   have data to put into action to work together."

   The three-lens guide already IS that document, so this prints it rather than
   building a second artefact. No PDF library and no second renderer that can
   drift from the first, and every lens added later is inherited the day it
   lands. What comes out is a real multi-page document with selectable text.

   What is deliberately NOT here: the archetype hero. A colleague putting this
   on a desk before a one to one wants the words, not the poster, and the poster
   is what he was complaining about. */
@media print {
  /* Only the guide. Everything else on the page is furniture. */
  body[data-printing="guide"] .chrome,
  body[data-printing="guide"] nav,
  body[data-printing="guide"] header.site,
  body[data-printing="guide"] .view:not([data-view="guide"]):not([data-view="publicguide"]),
  body[data-printing="guide"] .gshare,
  body[data-printing="guide"] .gprint,
  body[data-printing="guide"] .go,
  body[data-printing="guide"] button { display: none !important; }

  body[data-printing="guide"] { background: #fff; color: #111; }
  body[data-printing="guide"] .page { max-width: none; padding: 0; }

  /* A LENS SHOULD NOT BREAK ACROSS A PAGE if it can be helped, and its heading
     must never be the last thing on one. Somebody reading "Working one to one
     with Petra" at the foot of page 1 and the content on page 2 has been given
     a worse document than a single column of text. */
  .lens { break-inside: avoid; page-break-inside: avoid; margin-bottom: 22pt; }
  .lenshead { break-after: avoid; page-break-after: avoid; font-size: 15pt; }
  .block { break-inside: avoid; page-break-inside: avoid; }

  .lens .eyebrow { color: #555; letter-spacing: .18em; }
  .lens p { color: #111; font-size: 11pt; line-height: 1.5; }

  /* The advisory prints. It is a requirement on a document about a person that
     somebody else may be holding, and FR-25 does not stop at the screen. */
  .advisory { display: block !important; color: #444; font-size: 9pt;
              border-top: 1px solid #ccc; margin-top: 18pt; }

  a[href]:after { content: ""; }
}

@media print {
  /* THE HERO IS A POSTER AND THIS IS A DOCUMENT. On screen the title is a
     full-bleed display setting, one word per line; printed, it took an entire
     page before a reader reached a single sentence. That is the exact thing
     note 4 complains about, arriving in the artefact meant to answer it.
     Reduced to a heading: the person's name and what this is, then straight
     into the content. */
  body[data-printing="guide"] .hero {
    padding: 0 0 10pt !important; background: none !important; color: #111 !important;
    min-height: 0 !important; text-align: left !important;
  }
  body[data-printing="guide"] .hero h1,
  body[data-printing="guide"] .hero .archetype {
    font-size: 19pt !important; letter-spacing: normal !important;
    line-height: 1.2 !important; color: #111 !important; margin: 0 !important;
    word-spacing: normal !important; text-transform: none !important;
  }
  /* THE KICKER IS WHAT ATE THE PAGE, not the h1. ".kick" carries
     letter-spacing:.34em and uppercase, so "A GUIDE TO WORKING WITH ME" set one
     word per line and filled a sheet before a reader met a sentence. Resetting
     the size alone left the spacing, which is what still wrapped it. */
  body[data-printing="guide"] .hero .kick {
    font-size: 9pt !important; color: #555 !important;
    letter-spacing: .08em !important; line-height: 1.3 !important;
    word-spacing: normal !important; display: block !important;
  }
  body[data-printing="guide"] .hero .essence { font-size: 10.5pt !important; color: #333 !important; }
  body[data-printing="guide"] .codes { display: none !important; }
}

@media print {
  /* THE EDITOR IS NOT PART OF THE DOCUMENT. #sqNotesBlock is the form a person
     fills the guide in with: eight labelled inputs and their hints. It printed
     a whole page of "The thing you would tell a new teammate on day one" under
     empty boxes, which is instructions for writing the report inside the
     report. The saved lines already appear in the lenses above it. */
  body[data-printing="guide"] #sqNotesBlock,
  body[data-printing="guide"] [data-slot],
  body[data-printing="guide"] input,
  body[data-printing="guide"] textarea { display: none !important; }
}

/* The advisory on a person's OWN guide: absent from the screen, present on
   paper. See guideview.js -- a printed page has no session, so the reader of a
   sheet is not knowably its owner. */
.advisorywrap.screenhide { display: none; }
@media print {
  body[data-printing="guide"] .advisorywrap.screenhide { display: block !important; }
  body[data-printing="guide"] .advisorywrap .advisory { display: block !important; }
}

/* The Signature (js/signature.js), on the profile's "How you tend to run"
   block only -- scoped so it never touches .statbar or any other reading. */
.sqsig-wrap { display:flex; flex-direction:column; align-items:center; margin:0 0 22px; }
.sqsig { width:100%; max-width:300px; height:auto; }
.sqsig-label { font:400 12px var(--disp); fill:var(--ink-faint); }
.sqsig-label.lit { font-weight:600; fill:var(--ink); }
.sqsig-load { filter:drop-shadow(0 0 8px rgba(184,96,145,.8)) drop-shadow(0 0 18px rgba(162,78,129,.45)); }
.sqsig-swatch { display:inline-block; width:18px; margin-right:6px; vertical-align:middle; }


/* ---- The full profile as a result, not a printout (2026-09-09) ----
   Tiles, chips, the six-spoke shape, readout cards, the reveal stage and the
   two print variants. Every colour is an existing token; nothing new is
   introduced to the palette. */
.sqreveal{max-width:560px;margin:60px auto 0;text-align:center;}
.sqreveal h1{margin-top:14px;font-weight:600;letter-spacing:-.035em;line-height:1.05;font-size:clamp(32px,5vw,48px);color:var(--hi);}
.sqrevealtrack{margin:30px auto 0;height:4px;width:100%;max-width:420px;background:var(--field);border:1px solid var(--line);border-radius:999px;overflow:hidden;}
.sqrevealtrack > div{height:100%;width:0;background:linear-gradient(90deg,var(--plum-bright),var(--amber-bright));box-shadow:0 0 10px rgba(184,96,145,.55);transition:width .45s ease;}
.sqreveallines{list-style:none;padding:0;margin:26px auto 0;max-width:420px;text-align:left;}
.sqreveallines li{padding:6px 0 6px 26px;position:relative;color:var(--ink-faint);font-size:14.5px;transition:color .3s ease;}
.sqreveallines li::before{content:"";position:absolute;left:4px;top:13px;width:8px;height:8px;border-radius:50%;border:1px solid var(--line);}
.sqreveallines li.done{color:var(--ink);}
.sqreveallines li.done::before{background:var(--amber);border-color:var(--amber);box-shadow:0 0 8px rgba(210,149,74,.6);}

.sqtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:10px 0 4px;}
.sqtile{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--field);font-size:15px;font-weight:500;line-height:1.35;color:var(--ink);}
.sqtile.plus{border-color:rgba(162,78,129,.38);background:linear-gradient(160deg,rgba(162,78,129,.10),rgba(162,78,129,.02));}
.sqtile.minus{border-color:rgba(210,149,74,.30);background:linear-gradient(160deg,rgba(210,149,74,.08),rgba(210,149,74,.01));}

.sqshape-wrap{display:flex;flex-direction:column;align-items:center;margin:4px 0 26px;}
.sqshape{width:100%;max-width:300px;height:auto;}
.sqshape-label{font-size:11.5px;fill:var(--ink-soft);}
.sqshape-cap{margin-top:10px;font-size:12.5px;color:var(--ink-faint);text-align:center;}

.sqcards{display:grid;grid-template-columns:1fr;gap:12px;}
@media (min-width:760px){.sqcards{grid-template-columns:1fr 1fr;}}
.sqcard{border:1px solid var(--line);border-radius:16px;padding:18px 20px 16px;background:var(--elev);}
.sqcard .movelabel{display:block;}
.sqcard .movetext{font-size:16px;margin-top:10px;}
.sqcard .sqmore{margin-top:10px;display:block;}
.sqcard .sqmore p{margin:6px 0 0;font-size:14.5px;color:var(--ink-soft);line-height:1.5;}
.sqcard .link{margin-top:10px;display:inline-block;}

.squnlocks{list-style:none;padding:0;margin:8px 0 0;}
.squnlocks li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.45;}
.squnlocks li:first-child{border-top:none;}
.squnlocks .dot{flex:0 0 10px;width:10px;height:10px;border-radius:50%;margin-top:6px;border:1px solid var(--line);}
.squnlocks li.done .dot{background:var(--amber);border-color:var(--amber);}
.squnlocks li.done{color:var(--ink-faint);}
.squnlocks b{color:var(--ink);font-weight:600;}

.sqprint-head,.sqprint-note,.sqprint-sub{display:none;}

/* PRINT: the two profile documents. A document, not a screen: a title band,
   the essence set beside the shape, strengths and shadow side by side in
   their two tones, plum section rules, a pull-quote, numbered
   recommendations, a running footer. Furniture off, the measured light
   palette on. "summary" keeps the synthesis; "full" keeps everything
   through the guide. Letter, 16mm margins (see @page above). */
@media print {
  body[data-printing^="profile"] .chrome,
  body[data-printing^="profile"] nav,
  body[data-printing^="profile"] header.site,
  body[data-printing^="profile"] .view:not([data-view="snapshot"]),
  body[data-printing^="profile"] button,
  body[data-printing^="profile"] .invrow,
  body[data-printing^="profile"] .sqcorenav,
  body[data-printing^="profile"] .squnlocks-block,
  body[data-printing^="profile"] .hero,
  body[data-printing^="profile"] .bg,
  body[data-printing^="profile"] .cmp-fab,
  body[data-printing^="profile"] .cmp-panel,
  body[data-printing^="profile"] .subnav,
  body[data-printing^="profile"] .scrim,
  body[data-printing^="profile"] .drawer,
  body[data-printing^="profile"] .sqshape-cap { display:none !important; }
  body[data-printing^="profile"] .hero::before,
  body[data-printing^="profile"] .calhead::before { display:none !important; content:none !important; }
  /* Paper is white. Every screen glow, band and shadow off, whatever element
     carries it; the document draws its own hierarchy with rules and tone. */
  body[data-printing^="profile"], body[data-printing^="profile"] *,
  body[data-printing^="profile"] *::before, body[data-printing^="profile"] *::after {
    background-image:none !important; box-shadow:none !important; text-shadow:none !important; filter:none !important;
  }
  body[data-printing^="profile"] .view, body[data-printing^="profile"] .page,
  body[data-printing^="profile"] section { background:none !important; border-top:none !important; }
  body[data-printing="profile-summary"] .page > *:not([data-pf="core"]) { display:none !important; }
  body[data-printing^="profile"] .page { max-width:none; padding:0; }
  body[data-printing^="profile"] { font-size:10.5pt; line-height:1.5; }

  /* Title band */
  body[data-printing^="profile"] .sqprint-head { display:block; border-bottom:2px solid var(--plum); padding:0 0 12pt; margin:0 0 16pt; }
  body[data-printing^="profile"] .sqprint-kick { font-size:8pt; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }
  body[data-printing^="profile"] .sqprint-title { font-size:30pt; font-weight:700; letter-spacing:-.03em; line-height:1.05; color:var(--hi); margin:6pt 0 8pt; }
  body[data-printing^="profile"] .sqprint-sub { display:block; font-size:14pt; font-weight:600; letter-spacing:-.01em; color:var(--plum-deep); margin:0 0 6pt; }
  body[data-printing^="profile"] .sqprint-head .codes { margin-top:4pt; }
  body[data-printing^="profile"] .sqprint-head .codes span { color:var(--plum-deep); background:none; border:1px solid var(--plum); font-size:9pt; padding:3pt 9pt; }

  /* Sections: eyebrow + hairline, kept with what follows */
  body[data-printing^="profile"] section.block { margin-top:0; break-inside:auto; }
  body[data-printing^="profile"] section.block > .eyebrow,
  body[data-printing^="profile"] .movelabel { display:block; font-size:8pt; letter-spacing:.2em; color:var(--plum); border-bottom:1px solid var(--line); padding-bottom:3pt; margin:14pt 0 7pt; break-after:avoid; }
  body[data-printing^="profile"] .movetext { font-size:10.5pt; line-height:1.5; margin:0 0 6pt; color:var(--ink); }
  body[data-printing^="profile"] .movetext.sqcore { font-size:12pt; line-height:1.5; color:var(--hi); }

  /* Essence beside the shape */
  body[data-printing^="profile"] .sqessence { display:grid; grid-template-columns:1fr 58mm; gap:6mm; align-items:start; break-inside:avoid; }
  body[data-printing^="profile"] .sqessence .sqshape-wrap { order:2; margin:0; }
  body[data-printing^="profile"] .sqessence .sqshape { max-width:58mm; }
  body[data-printing^="profile"] .sqessence .sqcore { order:1; grid-column:1; }
  body[data-printing^="profile"] .sqessence .sqquote { order:3; grid-column:1 / -1; border-left:3px solid var(--amber); padding:2pt 0 2pt 10pt; margin:2pt 0 6pt; font-size:11pt; color:var(--ink-soft); }
  body[data-printing^="profile"] .sqshape-label { font-size:6.5pt; }

  /* Strengths and shadow, side by side, in their tones */
  body[data-printing^="profile"] .sqpair { display:grid; grid-template-columns:1fr 1fr; gap:8mm; break-inside:avoid; }
  body[data-printing^="profile"] .sqpair > div { margin-bottom:0 !important; }
  body[data-printing^="profile"] .sqtiles { display:block; margin:0; }
  body[data-printing^="profile"] .sqtile { display:block; border:none; border-left:3px solid var(--plum); border-radius:0; background:none; padding:1pt 0 1pt 8pt; margin:0 0 3pt; font-size:10pt; font-weight:600; color:var(--hi); break-inside:avoid; }
  body[data-printing^="profile"] .sqtile.minus { border-left-color:var(--amber); font-weight:500; color:var(--ink); }

  /* Growth and recommendations kept whole; plum numbers */
  body[data-printing^="profile"] ol li, body[data-printing^="profile"] .sqpair { break-inside:avoid; }
  body[data-printing^="profile"] ol { padding-left:0; list-style:none; counter-reset:rec; margin:0; }
  body[data-printing^="profile"] ol li { display:block; counter-increment:rec; position:relative; padding-left:22pt; margin:0 0 6pt; font-size:10.5pt; break-inside:avoid; page-break-inside:avoid; }
  body[data-printing^="profile"] ol li::before { content:counter(rec); position:absolute; left:0; top:-1pt; width:15pt; height:15pt; border-radius:50%; border:1px solid var(--plum); color:var(--plum); font-size:8.5pt; font-weight:700; text-align:center; line-height:15pt; }

  /* Readout cards (full only) */
  body[data-printing^="profile"] .sqcards { display:grid; grid-template-columns:1fr 1fr; gap:6mm; }
  body[data-printing^="profile"] .sqcard { border:1px solid var(--line); border-radius:0; padding:8pt 10pt; break-inside:avoid; background:none; }
  body[data-printing^="profile"] .sqcard .movelabel { margin:0 0 5pt; border:none; padding:0; }
  body[data-printing^="profile"] .sqcard .movetext { font-size:9.5pt; }
  body[data-printing^="profile"] .sqcard .sqmore { display:block !important; }
  body[data-printing^="profile"] .sqcard .sqmore p { font-size:8.5pt; color:var(--ink-soft); }
  body[data-printing^="profile"] [data-pf="deep"] { break-before:page; }

  /* Page two: the depth on its own designed sheet. Type one step down from
     page one, recommendations in two columns, headings tighter, and a
     compact step (snapshot.js sets .compact) when the writing runs long.
     The recommendations and the footer travel together as one unbreakable
     block, so neither can ever stand alone on a sheet. */
  body[data-printing^="profile"] .sqgrowth .movelabel { break-after:avoid; page-break-after:avoid; margin-top:10pt; }
  body[data-printing^="profile"] .sqgrowth p { font-size:10pt; line-height:1.45; margin-top:5pt; }
  /* No forced break: page one is sized to hold the essence, the tiles and
     the growth pathway, and the four readings follow. A forced break here
     put the readings on page three whenever the growth pathway spilled. */
  body[data-printing^="profile"] .sqdepth { font-size:10pt; }
  body[data-printing^="profile"] .sqdepth > div:first-child .movelabel { break-after:avoid; }
  body[data-printing^="profile"] .sqdepth .movetext, body[data-printing^="profile"] .sqdepth p { font-size:10pt; line-height:1.45; }
  body[data-printing^="profile"] .sqdepth .movelabel { margin:8pt 0 4pt; }
  body[data-printing^="profile"] .sqdepth > div:first-child .movelabel { margin-top:0; }
  body[data-printing^="profile"] .sqdepth .movetext { margin-bottom:4pt; }
  body[data-printing^="profile"] .sqrecs { break-inside:avoid; page-break-inside:avoid; }
  /* A grid, not CSS columns: Chrome's multicol fragments the absolutely
     positioned number circle at the column break and paints a stray
     hairline at the foot of the first column. A grid has no break. */
  body[data-printing^="profile"] .sqrecs ol { display:grid; grid-template-columns:1fr 1fr; gap:5pt 8mm; }
  body[data-printing^="profile"] .sqrecs ol li { font-size:9.5pt; line-height:1.4; margin-bottom:5pt; }
  body[data-printing^="profile"] .sqdepth.compact .movetext,
  body[data-printing^="profile"] .sqdepth.compact p { font-size:9.2pt; line-height:1.38; }
  body[data-printing^="profile"] .sqdepth.compact .sqrecs ol li { font-size:9pt; }
  body[data-printing^="profile"] .sqdepth.compact .movelabel { margin:7pt 0 4pt; }

  /* The provenance line lives in the title band, where the document starts,
     rather than as a footer that could end up alone on a sheet. */
  body[data-printing^="profile"] .sqprint-note { display:block; margin-top:8pt; font-size:7.5pt; color:var(--ink-faint); }
  body[data-printing^="profile"] .sqdepth > div { margin-bottom:0 !important; }
  body[data-printing^="profile"] a[href]:after { content:""; }
}

/* ---- A line a day, the first week, and the locks (2026-09-09) ---- */
.sqdaily{border:1px solid rgba(210,149,74,.30);border-radius:18px;padding:22px 24px 18px;background:linear-gradient(160deg,rgba(210,149,74,.08),rgba(162,78,129,.03));margin-top:22px;}
.sqdaily .eyebrow{color:var(--amber);display:block;margin-bottom:10px;}
.sqdaily-line{font-size:19px;line-height:1.5;margin:0;}
.sqdaily-react{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.sqdaily-react .pill.on{color:var(--ink);border-color:rgba(210,149,74,.6);background:rgba(210,149,74,.10);}
.sqweek{margin-top:26px;text-align:left;}
.sqdaily{text-align:left;}
.sqpractice{display:grid;gap:16px;margin:26px 0 6px;}
.sqpractice .sqdaily{margin:0;}
.sqtoday .hero{text-align:center;}
.sqdaily-threads{color:var(--ink-faint);}
.lvl.locked{opacity:.42;}
.sqlockcount{font-size:11.5px;color:var(--ink-faint);align-self:center;margin-left:4px;white-space:nowrap;}
@media (max-width:760px){.sqlockcount{display:none !important;}}
.lvl.locked:hover{color:var(--ink-soft);}
.sqlocknote{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:var(--elev);border:1px solid var(--line);border-radius:12px;padding:10px 16px;font-size:13.5px;color:var(--ink);box-shadow:0 12px 40px rgba(0,0,0,.35);transition:opacity .2s ease,transform .2s ease;z-index:60;}
.sqlocknote.on{opacity:1;transform:translate(-50%,0);}
@media print { .sqdaily, .sqweek, .sqlocknote { display:none !important; } }

/* ======================================================================
   PULSE. AppDesign V2, direction B, decided 2026-09-12. What follows is the
   look of the components in this design: glass surfaces at 6px, plum and
   amber as light, motion at 500 to 900ms with a real curve, and every
   animation with a static end state that reads on its own. The Today
   screen, the profile lead and the read are the three surfaces the
   sandbox was judged on; the rest of the app takes the same surfaces.
   Nothing here names a framework or prints a score: the shape's rings
   are words. */

/* glass, everywhere a panel used to be a rounded card */
.move,.leverage,.lead,.gapfill,.ccta,.coachout,.claim,.moment,.scr,.benchrow,.invteam,.who,.gmiss,.slip,.emailbox,.sharelink,
.jq,.sqcard,.sqtile,.sqdaily,.co-dossier,.map,.calimport,.dpayoff,.cmp-panel,.sqlocknote,.sqglass{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.leverage,.lead,.gapfill,.ccta,.dpayoff{background:linear-gradient(135deg,rgba(162,78,129,.18),rgba(210,149,74,.08));border-color:rgba(162,78,129,.4);}
.move.active{border-color:rgba(162,78,129,.7);box-shadow:0 0 40px rgba(162,78,129,.18);}
.drawer{border-radius:0;background:var(--elev);}
/* The dyad room keeps its own ground under the glass, and its breathing: the
   nodes drift on a JS clock in dyad.js (startDrift), untouched here. Anthem,
   2026-09-13: keep the breathing aspect like the original. */
.map{background:radial-gradient(80% 90% at 50% 45%,rgba(92,42,78,.22),rgba(255,255,255,.03));}
.cmp-panel{background:var(--elev);}
.invrow input,.invnote,.crefine textarea,.cmp-input input,.cmp-set-custom,.cmp-set-opt,.cmp-chip,.cmp-m,.copybtn,.cbtn,.co-save,.dlv-btn,.help-tosc.big,.help-back,.addrow,.invx{border-radius:var(--r);}
.cpill,.pill,.gm-n,.stav,.tag,.gtag,.bedge,.stbadge{border-radius:999px;}
.pill,.cpill{font:600 13px var(--disp);color:var(--ink-soft);background:var(--glass);border:1px solid var(--line);padding:9px 16px;
  transition:all .35s var(--ease);}
.pill:hover,.cpill:hover{border-color:var(--plum);box-shadow:0 0 22px rgba(162,78,129,.35);transform:translateY(-1px);color:var(--ink);}
.pill.on,.cpill.on{background:var(--plum);border-color:var(--plum);color:#fff;box-shadow:0 0 30px rgba(162,78,129,.7);opacity:1;}
.cpill:not(.on){opacity:.8;}
.moment.on{border-color:var(--plum);box-shadow:0 0 28px rgba(162,78,129,.25);}
.moment:hover,.benchrow[data-nav]:hover,.invteam:hover,.ccta:hover{transform:translateY(-4px);border-color:rgba(162,78,129,.6);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 28px rgba(162,78,129,.2);}
.prow .v,.col li,.grule h4,.tell .sig,.gmove h4,.rit h4,.mo-t,.ccta-t,.co-h h3,.who .warche,.bnames,.stname,.cr-text,.claim .ctext{font-family:var(--disp);}
.jq,.scr,.who{padding:20px 22px;}
.johari{gap:14px;} .moments{gap:14px;}
.lede,.reason,.hint,.fine,.gj-intro,.scrintro,.sharehint,.calhead .lede{max-width:64ch;}
h1,h2{font-family:var(--disp-theme);font-style:var(--disp-style);} h3,h4{font-family:var(--disp);}
.head .eyebrow,.hero .eyebrow{display:block;}

/* enter: things rise in once the screen has painted, and the counts count */
.sqrise{opacity:0;transform:translateY(18px);}
.sqgo .sqrise{animation:sqrise .7s var(--ease) both;}
.sqgo .sqrise.sqd1{animation-delay:.1s}.go .sqrise.sqd2{animation-delay:.2s}.go .sqrise.sqd3{animation-delay:.3s}.go .sqrise.sqd4{animation-delay:.4s}.go .sqrise.sqd5{animation-delay:.5s}
@keyframes sqrise{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.sqrise{opacity:1;transform:none;}}
/* the burst: a few dots from the point of a tap. Decorative only. */
.sqburst{position:fixed;z-index:80;width:6px;height:6px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);
  animation:sqburst .8s var(--ease) forwards;}
@keyframes sqburst{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(var(--s));opacity:0;}}

/* THE SHAPE, a living mark. Draws in on first open, breathes at rest, lights
   one spoke when a line touches it. Rings are the four steps, in words. */
.sqshape{width:100%;height:auto;display:block;overflow:visible;}
.sqshape-ring{fill:none;stroke:rgba(var(--ink-rgb),.09);stroke-width:.7;}
.sqshape-spoke{stroke:rgba(var(--ink-rgb),.09);stroke-width:1;transition:stroke .5s var(--ease);}
.sqshape-spoke.lit{stroke:var(--plum);filter:drop-shadow(0 0 6px var(--plum));}
.sqshape-poly{stroke:var(--plum-bright);stroke-width:3.5;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;
  filter:drop-shadow(0 0 6px rgba(230,169,201,.95)) drop-shadow(0 0 16px rgba(184,96,145,.85)) drop-shadow(0 0 34px rgba(162,78,129,.6));transform-origin:50% 50%;transform-box:view-box;}
.sqgo .sqshape-poly{animation:sqdraw 1.1s var(--ease) .2s both,sqbreathe 6s ease-in-out 1.4s infinite;}
@keyframes sqdraw{from{stroke-dashoffset:100;}to{stroke-dashoffset:0;}}
@keyframes sqbreathe{50%{transform:scale(1.03);filter:drop-shadow(0 0 14px rgba(184,96,145,1)) drop-shadow(0 0 44px rgba(162,78,129,.9));}}
.sqshape-dot{fill:#F6F1F9;r:4;stroke:none;filter:drop-shadow(0 0 6px rgba(224,174,114,.7));transition:r .4s var(--ease);}
.sqshape-dot.lit{r:9;fill:var(--plum-bright);filter:drop-shadow(0 0 16px var(--plum));}
/* the halo: a slow plum light behind the shape wherever it is the hero */
.sqaha .sqshape-wrap,.sqreveal .sqrevealmark{position:relative;}
.sqaha .sqshape-wrap::before,.sqreveal .sqrevealmark::before{content:"";position:absolute;inset:-4%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 48%,rgba(92,42,78,.72) 0%,rgba(58,27,51,.55) 38%,rgba(162,78,129,.18) 60%,transparent 74%);filter:blur(14px);animation:sqhalo 6s ease-in-out infinite;}
@keyframes sqhalo{50%{transform:scale(1.08);opacity:.8;}}
.sqshape-label{font-size:11.5px;fill:var(--ink-soft);}
.sqshape-label{font:600 11.5px var(--disp);letter-spacing:.01em;fill:var(--ink-soft);transition:fill .4s;}
.sqshape-label.lit{fill:var(--plum-bright);}
.sqshape-rname{font:500 9px var(--disp);fill:rgba(var(--ink-rgb),.34);letter-spacing:.02em;}
.sqshape-wrap{margin:0 0 10px;}

/* the section heading of this design: a display line with a small cap beside it */
.sqh2{font:700 24px/1.2 var(--disp-theme);font-style:var(--disp-style);letter-spacing:-.02em;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:0 0 12px;color:var(--ink);}
.sqh2 .eyebrow{color:var(--ink-faint);}
/* SECTIONS, ESTABLISHED. Anthem, 2026-09-13: the layout stands; the
   sections were not. Every major section on the profile opens with the
   same header: a numeral in plum, the title at 28px, a hairline across,
   and 64px of air above it, so the page reads as a sequence of rooms and
   not a stack of equal cards. The numerals count in the page's own order. */
[data-view="snapshot"] .page{counter-reset:sqsec;}
.sqsec{counter-increment:sqsec;position:relative;font-size:28px;margin:64px 0 18px;padding-top:22px;border-top:1px solid var(--line-hard);}
.sqsec::before{content:counter(sqsec,decimal-leading-zero);font:600 12px var(--disp);letter-spacing:.12em;color:var(--plum-bright);text-shadow:0 0 12px rgba(162,78,129,.6);margin-right:4px;align-self:center;}
.sqsec .eyebrow{font-size:11.5px;}
.sqwall{margin-top:0;}
.sqwall .sqh2{margin-bottom:18px;}
.sqrecs .sqh2,.sqtake .sqh2,.squnlocks-block .sqh2{margin-top:64px;}
.sqgrowth .sqsec{margin-top:64px;}
section.block > .sqh2.sqsec:first-child{margin-top:64px;}
/* the older sections below the reading (what this is, how you tend to
   run, the guide) take the same header, so the page is one page */
section.block > .eyebrow{font:700 24px/1.2 var(--disp);letter-spacing:-.02em;text-transform:none;color:var(--ink);margin:0 0 14px;}
section.block{margin-top:56px;padding-top:0;}
section.block:not(.sqtake):not(.squnlocks-block):not(.sqweek):not(.sqdaily) > .eyebrow:first-child{border-top:1px solid var(--line);padding-top:22px;}
/* the core essence is prose with a plum rule, not a card: reading weight,
   not data weight */
.sqcoreprose{border-left:3px solid var(--plum);padding:4px 0 4px 24px;box-shadow:-1px 0 0 rgba(162,78,129,.4);}
.sqcoreprose .sqcore{font:400 20px/1.6 var(--sans);color:var(--ink);margin:0;max-width:64ch;}
.sqcoreprose .sqprov{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font:600 11px var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);max-width:66ch;}
/* the line card keeps its small cap on Today and on the profile strip; the
   big section header is for the page's own sections */
section.sqdaily > .eyebrow{font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);border-top:none;padding-top:0;margin:0 0 4px;}
/* the line for today, as a strip on the profile */
/* headroom above the cap (Anthem, 2026-09-14: the border sat on the label) */
.sqintro{color:var(--ink-soft);font-size:15px;max-width:66ch;margin:-4px 0 14px;}

/* ---------------------------------------------------------------- FOCUS */
/* FOCUS, AS A FLOW (2026-09-14). One column, a rail down the left with
   three acts; the current act open and lit, the ones done folded to a
   line, the ones ahead waiting. Under the rail, your people this week and
   the portrait that grows. The profile's shape is not here: the profile is
   the reading, Focus is the practice. */
.sqtoday{width:100%;max-width:860px;text-align:left;margin:0 auto 40px;}
.sqhello{padding:30px 0 24px;}
.sqhello h1{font:700 clamp(36px,5.2vw,58px)/1.02 var(--disp);letter-spacing:-.035em;color:var(--hi);margin:0;}
.sqhello h1 .sqname{background:linear-gradient(90deg,var(--plum-bright),var(--amber-bright));-webkit-background-clip:text;background-clip:text;color:transparent;}
.sqhello p{margin:10px 0 0;color:var(--ink-soft);font-size:17px;max-width:56ch;}
.sqflow{position:relative;padding-left:56px;}
.sqflow::before{content:"";position:absolute;left:17px;top:8px;bottom:8px;width:2px;background:var(--line);}
.sqact{position:relative;margin-bottom:22px;}
.sqnode{position:absolute;left:-56px;top:2px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:2px solid var(--line-hard);font:700 13px var(--disp);color:var(--ink-faint);z-index:1;transition:all .5s var(--ease);}
.sqact.now .sqnode{border-color:var(--plum);color:#fff;background:var(--plum);box-shadow:0 0 22px rgba(162,78,129,.8);}
.sqact.done .sqnode{border-color:var(--amber);color:var(--amber-bright);background:var(--bg);}
.sqact.done .sqnode span{display:none;}
.sqact.done .sqnode::after{content:"\2713";}
.sqact.ahead .sqnode{opacity:.7;}
.sqopen{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px 24px;position:relative;overflow:hidden;}
.sqact.now .sqopen{border-color:rgba(184,96,145,.55);box-shadow:0 0 40px rgba(162,78,129,.18);}
.sqact.now .sqopen::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--plum),var(--amber));box-shadow:0 0 18px var(--plum);}
.sqact:not(.now) .sqopen{display:none;}
.sqact.now .sqfold{display:none;}
.sqfold{display:flex;align-items:baseline;gap:12px;padding:8px 0 8px 2px;color:var(--ink-faint);font-size:14.5px;cursor:pointer;border-radius:var(--r);transition:background .3s var(--ease);}
.sqfold:hover{background:var(--glass);}
.sqfold b{font:600 15px var(--disp);color:var(--ink-soft);white-space:nowrap;}
.sqfold-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sqfold-w{margin-left:auto;color:var(--amber-bright);white-space:nowrap;font-size:11px;}
.sqact.ahead .sqfold{opacity:.7;}
.sqhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.sqhead h2{font:700 22px var(--disp);letter-spacing:-.02em;margin:0;}
.sqhead .eyebrow{margin-left:auto;}
.sqlede{color:var(--ink-soft);font-size:14.5px;max-width:60ch;margin:0 0 6px;}
/* act 1: the line card without its own box; the act is the box */
.sqdaily.sqact-line{background:none;border:none;padding:0;margin:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;}
.sqdaily.sqact-line::before{display:none;}
.sqdaily.sqact-line .sqdaily-line{font:600 clamp(24px,2.8vw,32px)/1.3 var(--disp);letter-spacing:-.02em;margin:8px 0 18px;color:var(--hi);}
.sqdaily.sqact-line .pill{font-size:15px;padding:12px 20px;}
/* the listening: the re-ask offer inside act 1 */
.sqreask{margin-top:18px;padding:16px 18px;border-radius:var(--r);border:1px solid rgba(210,149,74,.45);background:linear-gradient(135deg,rgba(210,149,74,.14),rgba(162,78,129,.06));}
.sqreask .eyebrow{display:block;color:var(--amber-bright);margin-bottom:6px;}
.sqreask p{margin:0 0 12px;font-size:15px;color:var(--ink);max-width:60ch;}
.sqreask b{font-weight:600;}
/* act 2: the action, then weekly.js's own scene inside the act */
.sqaction{padding:16px 18px;border-radius:var(--r);background:linear-gradient(135deg,rgba(162,78,129,.2),rgba(210,149,74,.08));border:1px solid rgba(162,78,129,.45);margin:10px 0 14px;}
.sqaction .eyebrow{color:var(--plum-bright);display:block;margin-bottom:6px;}
.sqaction p{font:600 18px/1.45 var(--disp);letter-spacing:-.01em;margin:0;color:var(--hi);}
.sqbecause{padding-left:14px;border-left:2px solid var(--amber);margin:0 0 18px;font-size:14px;color:var(--ink-soft);}
.sqbecause .eyebrow{display:block;margin-bottom:4px;color:var(--amber-bright);}
.sqbecause p{margin:0;}
.sqact .focus{max-width:none;align-items:stretch;text-align:left;}
.sqact .focus > .eyebrow{color:var(--ink-faint);}
.sqact .focus .week{margin-top:4px;}
.sqact .statement{font:700 clamp(20px,2.4vw,26px)/1.3 var(--disp);letter-spacing:-.02em;max-width:none;margin-top:14px;text-wrap:balance;}
.sqact .reason{font-size:15px;max-width:none;margin-top:12px;}
.sqact .move{width:auto;margin-top:18px;padding:18px 20px;}
.wkshare{display:flex;align-items:center;gap:8px;margin:10px 0 4px;font-size:13.5px;color:var(--ink-soft);cursor:pointer;}
.wkshare input{width:16px;height:16px;accent-color:#A24E81;}
.wkshared{display:inline-block;margin-left:8px;font:600 11px var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--amber-bright);}
/* act 3: the next steps */
.sqnext{list-style:none;margin:8px 0 0;padding:0;}
.sqnext li{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line);}
.sqnext li:first-child{border-top:none;padding-top:0;}
.sqnext i{width:10px;height:10px;border-radius:50%;background:var(--plum);box-shadow:0 0 10px var(--plum);}
.sqnext li.done i{background:none;border:1.5px solid var(--line-hard);box-shadow:none;}
.sqnext b{display:block;font:600 15.5px var(--disp);}
.sqnext li.done b{color:var(--ink-faint);text-decoration:line-through;text-decoration-color:var(--line-hard);}
.sqnext p{font-size:13.5px;color:var(--ink-faint);margin:2px 0 0;}
.sqbtn{background:linear-gradient(135deg,var(--plum),#8E3F6E);color:#fff;border:none;border-radius:999px;padding:9px 16px;font:700 13px var(--disp);cursor:pointer;box-shadow:0 8px 24px rgba(162,78,129,.4);white-space:nowrap;}
.sqbtn.quiet{background:var(--glass);border:1px solid var(--line);box-shadow:none;color:var(--ink);}
.sqbtn:hover{filter:brightness(1.06);}
.sqbtn:focus-visible,.sqfold:focus-visible{outline:2px solid var(--plum-bright);outline-offset:3px;}
/* your people, and the portrait */
.sqpart{margin-top:40px;padding-top:22px;border-top:1px solid var(--line-hard);}
.sqpart h2{font:700 24px var(--disp);letter-spacing:-.02em;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:0 0 6px;}
.sqpart h2 .eyebrow{font-size:11px;}
.sqpart > .sqlede{margin-bottom:16px;}
.sqpeople{list-style:none;margin:12px 0 0;padding:4px 22px;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card);}
.sqpeople li{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line);}
.sqpeople li:first-child{border-top:none;}
.sqpeople .eyebrow{color:var(--plum-bright);}
.sqpeople .eyebrow.am{color:var(--amber-bright);}
.sqpeople b{display:block;font:600 15.5px var(--disp);}
.sqpeople p{font-size:13.5px;color:var(--ink-soft);margin:2px 0 0;}
.sqgrow{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.sqgrowcard{padding:20px 22px;}
.sqgrowcard h3{font:700 16px var(--disp);display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:0;}
.sqgrowcard h3 .sqbig{font:800 30px/1 var(--disp);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--hi);}
.sqgrowcard h3 .eyebrow{margin-left:auto;}
.sqlist{list-style:none;margin:10px 0 0;padding:0;}
.sqlist li{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft);}
.sqlist li b{font:600 11px var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--plum-bright);white-space:nowrap;}
.sqlist li b.am{color:var(--amber-bright);}
.sqlist li b.dim{color:var(--ink-faint);}
.sqlist li small{display:block;font-size:11.5px;color:var(--ink-faint);margin-top:2px;}
@media (max-width:760px){
  .sqflow{padding-left:44px;} .sqnode{left:-44px;width:30px;height:30px;} .sqflow::before{left:14px;}
  .sqopen{padding:20px 18px 18px;} .sqgrow{grid-template-columns:1fr;}
  .sqpeople li{grid-template-columns:1fr;gap:6px;} .sqnext li{grid-template-columns:auto 1fr;} .sqnext .sqbtn{grid-column:2;justify-self:start;}
  .sqfold{flex-wrap:wrap;} .sqfold-t{white-space:normal;flex-basis:100%;}
  .sqhello h1{font-size:clamp(32px,9vw,42px);}
}
/* ------------------------------------------------------------- PROFILE */
/* the aha: the person first. The name, the chips, the one sentence, the
   quote, and the shape drawing in beside it. Nothing about how the page
   was made until they have read about themselves. */
/* CENTERED AS ONE BLOCK. Anthem, 2026-09-17: dead space to the right of the
   figure kept the pair off center. The columns are sized to their content
   and the pair is centered together, and the figure's box is trimmed to
   its ink (pad 44 in heroShapeHtml) so the gap is measured from the
   drawing, not from its margin. */
/* The figure's drawing starts about 39px inside its box (the labels on the
   right are longer than the one on the left), so the pair is centered on
   the ink by leaving that much off the right: measured 2026-09-17, left
   and right margins come out equal. */
.sqaha{display:grid;grid-template-columns:minmax(0,430px) minmax(0,520px);justify-content:center;gap:34px;align-items:center;padding:24px 39px 6px 0;}
/* THE NAME READS FIRST, THE FIGURE SITS BESIDE IT (the approved composition's
   top panel, and the card-led portrait board: name, qualities and essence on
   the left, the shape on the right). The hero was built the other way round
   and stayed that way through the card work. Mobile already put the words
   first; this makes the desktop agree with it and with the reference. */
.sqherocard{grid-template-columns:minmax(0,520px) minmax(0,430px);padding-right:0;}
.sqherocard > .sqrise.sqd3{order:2;}

.sqaha .sqshape-wrap{display:flex;flex-direction:column;align-items:center;margin:0;}
.sqaha .sqshape{max-width:430px;}
/* Sized so a long word ("Disciplined") fits its half of the grid at 1280;
   a word that still does not fit breaks rather than clips. */
.sqaha .archetype{margin-top:0;font-size:clamp(42px,6.1vw,80px);line-height:.98;letter-spacing:var(--track-hero);max-width:none;overflow-wrap:break-word;}
.sqaha .codes{margin:18px 0 0;}
.sqlead{margin:24px 0 0;font:500 clamp(22px,2.4vw,30px)/1.32 var(--disp);letter-spacing:-.02em;color:var(--ink);max-width:26ch;}
.sqquote-lead{margin:22px 0 0;padding-left:16px;border-left:3px solid var(--amber);font:400 17px/1.5 var(--sans);color:var(--ink-soft);max-width:48ch;}
.sqquote-lead::before{content:"\201C";color:var(--amber-bright);}
.sqquote-lead::after{content:"\201D";color:var(--amber-bright);}
.sqp{padding:20px 22px;}
.sqp .movelabel{display:block;margin-bottom:8px;color:var(--plum-bright);}
.sqp p{font-size:17px;line-height:1.6;color:var(--ink);margin:0;}
.sqp p + p{margin-top:10px;}
.sqprov{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font:600 11px var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.sqtwo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;}
.sqthree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.sqwall{margin-top:40px;}
/* Every bubble in a row is the same height (Anthem, 2026-09-14): the grid
   stretches them and the clamp keeps the tallest bounded. */
/* WIDER TILES (handoff section 6, Brian: "easier to digest"). Five across
   wrapped short sentences three and four lines deep and pushed one into a
   drawer to finish. Three on the first row, the remaining two spanning the
   second, so every tile reads on two lines or fewer at the same type size.
   Five is the usual count and the rule holds for any: a row of three, then
   whatever is left spanning. */
.sqwall .sqtiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:16px 0 0;align-items:stretch;}
.sqwall .sqtile{grid-column:span 2;}
.sqwall .sqtiles > .sqtile:nth-child(4):nth-last-child(2),
.sqwall .sqtiles > .sqtile:nth-child(5):nth-last-child(1){grid-column:span 3;}
.sqtile{display:flex;flex-direction:column;}
.sqtile .sqmore-btn{margin-top:auto;padding-top:12px;}
.sqp{display:flex;flex-direction:column;}
.sqp .sqmore-btn{margin-top:auto;padding-top:12px;}
/* Shadow aspects, two by two (handoff section 6). */
.sqwall.am .sqtiles{grid-template-columns:repeat(2,minmax(0,1fr));}
.sqwall.am .sqtile{grid-column:auto;}
/* THE TILES CARRY WEIGHT. Strengths lift and glow plum on hover; shadow
   aspects do the opposite, settling with an amber glow from within. A tile
   with a why (.can) opens on click and shows it; one without stays still. */
.sqtile{padding:26px 20px 24px;overflow:hidden;position:relative;font:700 20px/1.15 var(--disp);letter-spacing:-.02em;color:var(--hi);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s,background .45s;}
.sqtile b{font-weight:inherit;display:block;}
.sqtile::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--plum);box-shadow:0 0 18px var(--plum);}
.sqtile.minus::before{background:var(--amber);box-shadow:0 0 18px var(--amber);}
.sqtile.plus:hover{transform:translateY(-6px);border-color:rgba(184,96,145,.7);
  box-shadow:0 24px 50px rgba(0,0,0,.5),0 0 0 1px rgba(184,96,145,.5),0 0 44px rgba(162,78,129,.45);}
.sqtile.minus:hover{transform:translateY(4px);border-color:rgba(224,174,114,.6);
  box-shadow:inset 0 0 40px rgba(210,149,74,.22),0 0 0 1px rgba(224,174,114,.4),0 0 30px rgba(210,149,74,.25);}
/* the why, in the open: the weight of the read lands before any click */
.sqtile .sqwhy{display:block;margin:12px 0 0;font:400 15px/1.5 var(--sans);color:var(--ink-soft);letter-spacing:0;}
/* THE GROWTH PATHWAY USES THE WIDTH IT HAS (handoff section 6). The grid was
   three columns whatever it held, so the two-card default left an empty right
   third. It takes its column count from what is actually in it; the third
   card returns with Focus and the row becomes three again. */
.sqgrowth3{grid-template-columns:repeat(2,minmax(0,1fr));}
.sqgrowth3.three{grid-template-columns:repeat(3,minmax(0,1fr));}
.sqgrowth3 .sqp .movelabel{color:var(--ink-faint);}
.sqgrowth3 .dev .movelabel{color:var(--amber-bright);}
.sqgrowth3 .lev .movelabel{color:var(--plum-bright);}
.sqgrowth3 .act{background:linear-gradient(135deg,rgba(162,78,129,.22),rgba(210,149,74,.10));border-color:rgba(162,78,129,.5);box-shadow:0 0 30px rgba(162,78,129,.2);}
.sqgrowth3 .act p{font:600 19px/1.45 var(--disp);letter-spacing:-.01em;}
.sqrecs ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.sqrecs ol li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:18px 20px;margin:0;font-size:16.5px;line-height:1.5;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card);}
.sqrecs ol li::before{content:counter(sqrec);counter-increment:sqrec;font:800 22px/1 var(--disp);color:var(--plum-bright);text-shadow:0 0 14px rgba(162,78,129,.6);}
.sqrecs ol{counter-reset:sqrec;}
/* HOW YOU WORK: FOUR FULL-WIDTH CARDS, LABEL BESIDE THE PARAGRAPH (handoff
   section 7). Two columns of cards made four long paragraphs into four narrow
   ones; across the width the label sits in its own column and the reading
   stays one measure. The paragraphs are whole here, so the clamp comes off:
   these four are the interpretation and there is nothing below them to reach.
   Scoped to this section, never to .sqp elsewhere. */
.sqdepth .sqtwo{grid-template-columns:1fr;gap:12px;}
.sqdepth .sqtwo .sqp{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:8px 28px;align-items:start;}
.sqdepth .sqtwo .sqp .movelabel{margin:4px 0 0;}
.sqdepth .sqtwo .sqp .sqclamp{-webkit-line-clamp:unset;max-height:none;}
.sqdepth .sqtwo .sqp p{max-width:70ch;}
@media (max-width:760px){
  .sqdepth .sqtwo .sqp{grid-template-columns:1fr;gap:6px;}
}
.sqtake .invrow{flex-wrap:wrap;}
/* THE WHOLE OF YOU: SIX READING CARDS IN TWO COLUMNS (handoff section 7).
   Three across made the longest card stretch its whole row. */
.sqcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.sqcard{padding:18px 20px;}
.sqcard .movelabel{font:700 16px/1.2 var(--disp);letter-spacing:-.01em;text-transform:none;color:var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.sqcard .movetext{font-size:16px;line-height:1.55;color:var(--ink);margin-top:8px;}
.sqlean{font:600 10px var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--amber-bright);white-space:nowrap;}
.squnlocks li{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:12px 0;align-items:start;}
.squnlocks .dot{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);margin:0;display:grid;place-items:center;font-size:12px;color:transparent;}
.squnlocks li.done .dot{background:var(--plum);border-color:var(--plum);color:#fff;box-shadow:0 0 12px rgba(162,78,129,.6);}
.squnlocks li.done .dot::before{content:"\2713";}
.sqprintonly{display:none;}

/* confetti: thrown up and out, then falling, then gone */
.sqconfetti{position:fixed;z-index:80;width:8px;height:13px;border-radius:2px;pointer-events:none;transform:translate(-50%,-50%);opacity:1;
  animation:sqconfetti 2.2s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes sqconfetti{
  25%{transform:translate(calc(-50% + var(--dx) * .7),calc(-50% + var(--up))) rotate(calc(var(--rot) * .3)) scale(var(--s));opacity:1;}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(var(--s));opacity:0;}}
/* where the shift shows: the instrument's words per named signature */
.sqshift{list-style:none;padding:0;margin:0;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card);}
.sqshift li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 22px;border-top:1px solid var(--line);}
.sqshift li:first-child{border-top:none;}
.sqshift-k{font:600 12px/1.4 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--amber-bright);padding-top:3px;}
.sqshift b{display:block;font:700 17px/1.2 var(--disp);letter-spacing:-.01em;color:var(--hi);margin-bottom:6px;}
.sqshift p{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-soft);}
.sqshift em{font-style:normal;color:var(--ink);font-weight:600;}
@media (max-width:760px){.sqshift li{grid-template-columns:1fr;gap:6px;}}
@media print{body[data-printing^="profile"] .sqshift{background:none;border:none;} body[data-printing^="profile"] .sqshift li{padding:6pt 0;}}
/* CONTINUE READING. A bubble's body is clamped to a few lines; when the
   text runs past them, pulse.js adds the control and the whole text opens
   in the drawer as a reader, with Back at the top left. */
.sqclamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
.sqclamp-4{-webkit-line-clamp:6;}
.sqclamp-8{-webkit-line-clamp:12;}
.sqclamp-over{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);}
.sqmore-btn{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:none;border:none;padding:0;cursor:pointer;
  font:700 13px var(--disp);color:var(--plum-bright);letter-spacing:0;transition:color .3s var(--ease);}
.sqmore-btn::after{content:"\2192";}
.sqmore-btn:hover{color:var(--amber-bright);}
.sqmore-btn:focus-visible{outline:2px solid var(--plum-bright);outline-offset:3px;border-radius:2px;}
.sqtile .sqmore-btn{font-size:12.5px;}
.drawer .sqback{display:none;left:24px;right:auto;align-items:center;gap:6px;font:600 13.5px var(--disp);color:var(--ink-soft);}
.drawer .sqback svg{width:18px;height:18px;}
.drawer.reader .sqback{display:inline-flex;}
.drawer.reader .sqback:hover{color:var(--ink);}
.sqreader{padding-top:40px;}
.sqreader .eyebrow{display:block;margin-bottom:10px;}
.sqreader h2{font:700 26px/1.15 var(--disp);letter-spacing:-.02em;color:var(--hi);margin:0 0 18px;}
.sqreader p{font-size:17px;line-height:1.65;color:var(--ink);margin:0 0 14px;max-width:62ch;}
@media print{.sqclamp{display:block;overflow:visible;-webkit-line-clamp:none;mask-image:none;-webkit-mask-image:none;} .sqmore-btn{display:none !important;}}
/* ---------------------------------------------------------------- READ */
.asmmeta{padding:16px 0 0;}
.asmscene{align-items:flex-start;padding-top:36px;}
.asmstage{max-width:760px;}
.asmstage .primary{margin-top:40px;}
/* THE REVEAL, landed. The name first and largest, the chips and the one
   sentence under it, the way in right there, the shape as a small mark at
   the foot. Anthem, 2026-09-13: the hierarchy was upside down (a dim
   graph over a huge name over a distant button) and it did not feel like
   a reward. Confetti when the name lands. */
.sqreveal{max-width:760px;margin:32px auto 0;text-align:center;}
.sqreveal .sqshape{width:min(360px,80vw);margin:0 auto;}
.sqreveal h1{font:800 clamp(40px,7vw,88px)/.98 var(--disp);letter-spacing:-.045em;margin:10px auto 0;max-width:12ch;
  background:linear-gradient(120deg,#fff 20%,var(--plum-bright) 70%,var(--amber-bright));-webkit-background-clip:text;background-clip:text;color:transparent;}
.sqreveal h1.sqwait{background:none;-webkit-text-fill-color:var(--hi);color:var(--hi);font-weight:700;font-size:clamp(28px,4vw,42px);max-width:none;}
.sqreveal .codes{justify-content:center;margin-top:20px;}
.sqreveal .sqlead{margin:22px auto 0;max-width:34ch;font-size:clamp(19px,2vw,24px);}
.sqreveal .sqcorenav{justify-content:center;margin-top:30px;}
.sqreveal .sqrevealmark{margin:36px auto 0;width:min(220px,60vw);opacity:.85;}
.sqreveal .sqrevealmark .sqshape{width:100%;}
.sqrevealtrack{background:var(--line);border:none;height:8px;}
.sqrevealtrack > div{box-shadow:0 0 18px rgba(162,78,129,.7);}
.sqreveallines li.done::before{background:var(--plum);border-color:var(--plum);box-shadow:0 0 8px rgba(162,78,129,.6);}

/* ---------------------------------------------------------------- LOCKS */
.lvl.locked{opacity:.42;}
.lvl.locked:hover{color:var(--ink-soft);background:none;}
/* the unlock, once: the tab lights and settles when a read first exists */
.lvl.unlocked{animation:squnlock 1.6s var(--ease) both;}
@keyframes squnlock{0%{background:var(--plum);color:#fff;box-shadow:0 0 34px rgba(162,78,129,.9);}100%{background:none;color:var(--ink-soft);box-shadow:none;}}
.sqlockcount{font:600 11px var(--disp);color:var(--ink-faint);padding:0 16px;}

/* ------------------------------------------------------- LIGHT + PRINT */
[data-theme="light"] .sqhello h1 .sqname,[data-theme="light"] .archetype,[data-theme="light"] .head h1,[data-theme="light"] .relhead,[data-theme="light"] .sqreveal h1{
  background:linear-gradient(120deg,var(--hi) 30%,var(--plum) 75%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent;}
[data-theme="light"] .sqtile,[data-theme="light"] .sqcard,[data-theme="light"] .sqp,[data-theme="light"] .sqdaily,[data-theme="light"] .sqopen,[data-theme="light"] .sqpeople,[data-theme="light"] .sqgrowcard,[data-theme="light"] .panel{background:var(--glass);}
[data-theme="light"] .sqwoven b{color:var(--amber);}
[data-theme="light"] .sqlean,[data-theme="light"] .sqfold-w,[data-theme="light"] .wkshared{color:var(--amber);}
@media print{
  .sqburst,.sqlocknote,.sqconfetti{display:none !important;}
  .sqrise{opacity:1 !important;transform:none !important;}
  body[data-printing^="profile"] .sqprintonly{display:inline;}
  body[data-printing^="profile"] .sqaha{display:none !important;}
  body[data-printing^="profile"] .sqwall .sqtiles{display:block;}
  body[data-printing^="profile"] .sqrecs ol{display:grid;}
  body[data-printing^="profile"] .sqrecs ol li{display:block;background:none;border:none;padding-left:22pt;}
  body[data-printing^="profile"] .sqrecs ol li::before{content:counter(rec);font-size:8.5pt;text-shadow:none;}
  body[data-printing^="profile"] .sqp,body[data-printing^="profile"] .sqcard{background:none;border:none;padding:0;backdrop-filter:none;}
  body[data-printing^="profile"] .sqtwo,body[data-printing^="profile"] .sqthree{display:block;}
  body[data-printing^="profile"] .sqprov,body[data-printing^="profile"] .sqlean{display:none;}
  body[data-printing^="profile"] .sqtile::before,body[data-printing^="profile"] .sqtile::after{display:none;}
  body[data-printing^="profile"] .sqtile .sqwhy{font-size:8.5pt;color:var(--ink-soft);margin:1pt 0 3pt;}
  body[data-printing^="profile"] .sqsec{font-size:11pt;margin:14pt 0 7pt;padding-top:0;border-top:none;border-bottom:1px solid var(--line);padding-bottom:3pt;color:var(--plum);}
  body[data-printing^="profile"] .sqsec::before{display:none;}
  body[data-printing^="profile"] .sqsec .eyebrow{display:none;}
  body[data-printing^="profile"] .sqcoreprose{border-left:none;padding:0;box-shadow:none;}
  body[data-printing^="profile"] .sqessence .sqcoreprose{order:1;grid-column:1;}
  body[data-printing^="profile"] section.block > .eyebrow{font-size:8pt;letter-spacing:.2em;text-transform:uppercase;color:var(--plum);border-top:none;padding-top:0;}
  body[data-printing^="profile"] .sqdaily.sqstrip{display:none !important;}
}

/* ------------------------------------------------------------- PHONE */
@media (max-width:760px){
  .sqaha,.sqtwo,.sqthree,.sqcards,.sqrecs ol{grid-template-columns:1fr;}
  .sqaha{padding-right:0;}
  /* ONE UP ON A PHONE. Two columns at 390px left about 150px of text per
     tile, wrapping every four to six words, with the fifth strength alone
     beside an empty half: the narrow-tile wrapping the brief's wider tiles
     were chosen to fix (section 5), reintroduced by the phone. Derived from
     the approved desktop hierarchy (section 18) rather than kept from before. */
  .sqwall .sqtiles,.sqwall.am .sqtiles{grid-template-columns:1fr;}
  /* The desktop row spans have to come off. */
  .sqwall .sqtile,
  .sqwall .sqtiles > .sqtile:nth-child(4):nth-last-child(2),
  .sqwall .sqtiles > .sqtile:nth-child(5):nth-last-child(1){grid-column:auto;}
  .sqsec{font-size:23px;margin-top:48px;} .sqtile{font-size:17px;padding:20px 16px 18px;}
  .sqclamp-4{-webkit-line-clamp:9;}
  .sqaha .sqshape{max-width:360px;}
  .sqaha > div:first-child{order:2;} .sqaha .sqshape{max-width:320px;}
  .sqaha .archetype{font-size:clamp(40px,11vw,56px);}
  .page{padding-top:24px;}
}

/* ONBOARDING HAS NO BAR (core.js onboarding()). The bar and its sub-nav stay
   out until the first read is revealed and the person presses through. */
body.sq-onboarding #chrome{display:none !important;}
/* THE "IN MY OWN WORDS" WINDOW (snapshot.js openNotes). A hero of its own
   when it drops in, the questions as cards grouped like the Guide, the pill
   pinned to the bottom edge, Edit beside the owner's cards on the page. */
.sqnotes-hero{position:relative;margin:-30px -30px 6px;padding:66px 30px 24px;border-bottom:1px solid var(--line);
  background:radial-gradient(120% 90% at 18% 0%,rgba(162,78,129,.34),transparent 62%),linear-gradient(180deg,rgba(162,78,129,.10),transparent);}
.sqnotes-hero .kick{font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0;}
.sqnotes-hero .archetype{margin:6px 0 8px;font-size:clamp(30px,4vw,40px);line-height:1.02;max-width:none;}
.sqnotes-lead{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--ink-soft);max-width:34ch;}
.sqnotes-meter{display:flex;align-items:center;gap:12px;}
.sqnotes-meter .sqrevealtrack{margin:0;flex:1;max-width:none;}
.sqnotes-meter span{font:600 11.5px var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--amber-bright);white-space:nowrap;}
.sqnotes-group{margin:22px 0 0;}
.sqnotes-group > .eyebrow{display:block;margin:0 0 12px;color:var(--plum-bright);}
.sqnotes-card{position:relative;margin:0 0 12px;padding:16px 16px 14px 18px;border-radius:14px;border:1px solid var(--line);border-left:3px solid var(--line);background:var(--glass);transition:border-color .25s var(--ease),box-shadow .25s var(--ease);}
.sqnotes-card:focus-within{border-color:rgba(162,78,129,.6);box-shadow:0 0 22px rgba(162,78,129,.18);}
.sqnotes-card.done{border-left-color:var(--amber);}
.sqnotes-n{position:absolute;right:14px;top:13px;font:600 11px var(--disp);letter-spacing:.1em;color:var(--ink-faint);}
.sqnotes-card label{display:block;font-size:14.5px;font-weight:600;margin:0 0 3px;padding-right:36px;color:var(--hi);}
.sqnotes-card .hint{margin:0 0 9px;font-size:12.5px;line-height:1.45;color:var(--ink-faint);}
.sqnotes-card .field{margin:0;}
/* Room for paragraphs (2026-10-11): the box grows as it is written in (snapshot.js growNotes). */
.sqnotes-card textarea.sqnotes-text{display:block;width:100%;min-height:64px;resize:vertical;overflow:hidden;font:inherit;font-size:15px;line-height:1.55;}
.sqnotes-left{margin:5px 0 0;font-size:12px;color:var(--ink-faint);}
.sqnotes-left:empty{display:none;}
.sqnotes-card .fine{margin:7px 0 0;font-size:12px;line-height:1.45;color:var(--ink-faint);}
.sqnotes-foot{position:sticky;bottom:-44px;display:flex;align-items:center;gap:14px;margin:18px -30px -44px;padding:14px 30px 24px;background:var(--elev);border-top:1px solid var(--line);}
.gedit{margin-left:10px;font:600 11px var(--disp);letter-spacing:.06em;text-transform:none;color:var(--plum-bright);vertical-align:baseline;}
.gedit:hover{color:var(--hi);}
.drawer .dclose,.drawer .sqback{z-index:3;}

/* THE SHAPE IN THE HERO, TOUCHABLE (snapshot.js heroShapeHtml / wireShape).
   Marcus wants it back up beside the name and interactive. The hit lines,
   the dots and the labels take the pointer; the breathing polygon and the
   rings do not. The card under the shape holds one reading at a time. */
.sqaha.sqaha-solo{grid-template-columns:minmax(0,1fr);max-width:920px;}
.sqhero-shape{position:relative;}
.sqshape-hit{stroke:transparent;stroke-width:30;stroke-linecap:round;cursor:pointer;pointer-events:stroke;}
.sqhero-shape .sqshape-poly,.sqhero-shape .sqshape-ring,.sqhero-shape .sqshape-spoke,.sqhero-shape .sqshape-rname{pointer-events:none;}
.sqhero-shape .sqshape-dot,.sqhero-shape .sqshape-label{cursor:pointer;}
.sqhero-shape .sqshape-spoke.lit{stroke-width:2;}
.sqhero-key{margin:6px auto 0;max-width:40ch;text-align:center;font-size:12.5px;line-height:1.45;color:var(--ink-faint);}
.sqhero-read{margin:12px auto 0;max-width:440px;padding:14px 18px 16px;border-radius:14px;border:1px solid rgba(162,78,129,.45);background:var(--glass);text-align:left;animation:sqshapein .3s var(--ease) both;}
.sqhero-read .eyebrow{display:block;margin:0 0 4px;font-size:11px;letter-spacing:.16em;color:var(--plum-bright);}
.sqhero-read b{display:block;font:700 17px/1.2 var(--disp);letter-spacing:-.01em;color:var(--hi);margin:0 0 6px;}
.sqhero-read p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink);}
.sqhero-lean{margin:0 0 8px !important;color:var(--ink-soft) !important;}
.sqhero-lean .sqlean{font-size:11px;margin-right:6px;}
@keyframes sqshapein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (max-width:900px){ .sqhero-read{max-width:none;} }

/* THE DEEPER READ, INSIDE THE PROFILE (snapshot.js wireGoDeeper, deep.js
   SQDeep.open). The deeper report's own screens drawn into a bordered box
   under the "Go deeper" pill; its heroes lose their top room. */
/* No box: the steps of the hole are the page growing (Anthem, 2026-09-17),
   so they take the page's own gutters and rhythm. */
.sqdeep-inline{margin-top:0;padding:0;border:0;background:none;}
.sqdeep-inline .hero{padding-top:18px;}
.sqdeep-inline .hero .archetype{font-size:clamp(26px,3vw,36px);}

/* IN MY OWN WORDS, INSIDE THE BOX (snapshot.js mountNotes). The hero and the
   footer were cut for the drawer's 30px gutters and its sticky bottom; in
   the box they take its gutters and sit still. */
.sqdeep-inline .sqnotes-hero{margin:0 0 6px;padding:24px 0 20px;}
.sqdeep-inline .sqnotes-foot{position:static;margin:18px 0 0;padding:14px 0 4px;}
/* Close now sits in the foot beside Save (handoff section 6); the rule its
   own row used is gone with the row. */
.sqnotes-saved{padding:22px 0 6px;}
.sqnotes-saved .eyebrow{display:block;margin-bottom:6px;color:var(--plum-bright);}
.sqnotes-saved .archetype{font-size:clamp(26px,3vw,34px);margin:0 0 8px;max-width:none;}
.sqnotes-saved .hint{margin:0 0 16px;max-width:52ch;}
.sqnotes-saved .invrow{gap:14px;align-items:center;}


/* THE FULL READOUTS, INSIDE THE BOX (core.js readoutsInto): the readouts
   view's own header, one size down. */
.sqdeep-inline .head{padding-top:14px;}
.sqdeep-inline .head h2{margin:8px 0 0;font:800 clamp(26px,3vw,36px)/1.05 var(--disp);letter-spacing:-.03em;color:var(--hi);}

/* THE HOLE, ON PAPER ONLY (snapshot.js holePrintHtml): never on screen, in
   both PDFs; the unfolded steps on screen stay off the paper. */
.sqhole-print{display:none;}
@media print{
  body[data-printing^="profile"] .sqhole-print{display:block !important;}
  body[data-printing="profile-summary"] .page > .sqhole-print{display:block !important;}
  body[data-printing^="profile"] .sqhole-print .grules{margin-top:6pt;}
  body[data-printing^="profile"] .sqhole-print .grule h4{font-size:10.5pt;margin:0 0 2pt;}
  body[data-printing^="profile"] .sqhole-print .grule p{font-size:10pt;line-height:1.45;margin:0 0 3pt;}
  body[data-printing^="profile"] .sqdeep-inline,body[data-printing^="profile"] [data-step]{display:none !important;}
}

/* TAKE IT WITH YOU (snapshot.js takeHtml): open to everyone since 2026-09-17. */
/* And never on paper: it is the app's own take-away row, which printed as an
   empty heading once its buttons were hidden. */
@media print{ body[data-printing^="profile"] .sqtake{display:none !important;} }

/* UPLOAD READ: a stored read and a submitted one (snapshot.js importBlock).
   The row's edge says which; the state line says it in words. */
.sqimp{border-left:3px solid var(--line) !important;}
.sqimp.on{border-left-color:var(--amber) !important;}
.sqimp-state{font-weight:600;}
.sqimp input[type="checkbox"]{accent-color:var(--plum);width:16px;height:16px;flex:none;}
.sqimp-drop{display:flex;flex-direction:column;gap:10px;margin-top:4px;padding:16px;border:1px dashed rgba(162,78,129,.55);border-radius:14px;cursor:pointer;}
.sqimp-drop:hover{border-color:var(--plum-bright);}
.sqimp-drop input[type="file"]{font-size:13px;color:var(--ink-soft);}
/* .invrow is display:flex, which beats the hidden attribute. */
#sqImpTypedRow[hidden]{display:none;}

/* ============================================================
   THE ONE BAR, ACTIVITY AND MILESTONES. Anthem, 2026-09-21.
   One row: the Q (home), Profile, Guide, 360, the places, then the
   bell and the avatar. No second bar, no boxed cells, no cell
   numbers, no You tab. Words with a thin plum underline for where
   you are. Appended last so it wins over the cell rules above
   without rewriting them; to undo, delete this block, put the
   sub-bar back under <nav> in index.html and restore notifications.js.
   ============================================================ */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
nav .brand{align-items:stretch;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
nav .brand::-webkit-scrollbar{display:none;}
nav .qm{border-right:0;min-width:64px;padding:0 18px;flex:none;}
/* The mark reads the same size as the avatar, which means measuring smaller:
   a bold letterform at the circle's height looks heavier than the circle.
   Anthem, 2026-09-21, twice: 28 was too big, 32 was worse. */
nav .qm img{height:24px;}
nav .subnav,nav .subnav.on{position:static;display:flex;gap:0;padding:0;border-bottom:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;flex:none;}
nav .subnav .sub{display:flex;align-items:center;height:56px;padding:0 14px;border-right:0;font:600 13.5px var(--disp);color:var(--ink-soft);white-space:nowrap;}
nav .subnav .sub[hidden]{display:none;}
nav .subnav .sub:hover{color:var(--ink);}
nav .subnav .sub.active{color:var(--ink);box-shadow:inset 0 -2px 0 var(--plum);text-shadow:none;}
nav .levels{position:relative;flex:none;margin-left:10px;padding-left:10px;overflow:visible;}
nav .levels::before{content:"";position:absolute;left:0;top:19px;bottom:19px;width:1px;background:var(--line);}
/* No divider when no place is showing: a person with no team has no Dyads tab
   (team.js hides it inline), and the staged ones are [hidden]. */
nav .levels:not(:has(.lvl:not([hidden]):not([style*="display: none"]))){margin-left:0;padding-left:0;}
nav .levels:not(:has(.lvl:not([hidden]):not([style*="display: none"])))::before{display:none;}
nav{padding-right:8px;}
nav .lvl{border-right:0;padding:0 14px;gap:8px;}
nav .lvl::before{display:none;}
nav .lvl:hover{background:none;}
nav .lvl.active{background:none;box-shadow:inset 0 -2px 0 var(--plum);}
nav .navright > *,nav .navright .themetoggle,nav .bell,nav .avatar{border-left:0;width:50px;}
/* The photo is a circle the size of the initials, not a full-bleed cell.
   avatar.js paints a real photo with inline width/height 100% (it serves the
   profile page's larger frame through the same painter), so the nav's size has
   to beat an inline style; the base .avatar img rule does the centring. */
nav .navright .avatar b{width:32px;height:32px;}
nav .navright .avatar img{width:32px!important;height:32px!important;border-radius:50%;}
nav .navright .themetoggle{display:none;} /* the switch lives in the account menu now (auth.js) */
nav .bell:hover,nav .navright .themetoggle:hover{background:none;}
/* The dot: something is new. No count; amber means new and nothing else. */
nav .bellcount{top:15px;right:12px;min-width:0;width:8px;height:8px;padding:0;border-radius:50%;font-size:0;line-height:0;color:transparent;background:#D2954A;box-shadow:0 0 10px rgba(210,149,74,.9);border:0;}
nav .bellcount[hidden]{display:none;}
nav .sqlockcount{display:none;} /* the "areas open" count belonged to the numbered cells */
@media (max-width:760px){
  nav .qm{min-width:46px;padding:0 10px;}
  nav .subnav .sub,nav .lvl{padding:0 9px;font-size:12.5px;}
  nav .levels{margin-left:4px;padding-left:4px;}
  nav .navright > *,nav .bell,nav .avatar{width:42px;}
}

/* The box: what SuperQ tells you, sliding out from under the bell. */
.sqbox{position:fixed;z-index:40;top:66px;right:12px;width:min(410px,calc(100vw - 24px));display:block;text-align:left;cursor:pointer;
  padding:15px 18px 14px;border:1px solid rgba(255,255,255,.24);border-left:3px solid #D2954A;border-radius:0;color:#F4EEF3;
  background:linear-gradient(100deg,rgba(162,78,129,.62),rgba(58,26,52,.9) 70%),rgba(14,10,18,.86);
  box-shadow:0 22px 60px rgba(0,0,0,.65),0 0 46px rgba(184,96,145,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transform:translateX(28px);opacity:0;pointer-events:none;visibility:hidden;transition:transform .42s var(--ease),opacity .42s var(--ease),visibility 0s linear .55s;}
/* visibility, so the resting box is out of the tab order as well as out of sight */
.sqbox.in{transform:none;opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s;}
.sqbox.tuck{transform:translate(30%,-56px) scale(.2);opacity:0;transition-duration:.5s;}
.sqbox.gone{opacity:0;transition:opacity .35s var(--ease);}
.sqbox p{margin:0;font:600 15.5px/1.4 var(--sans);color:#F4EEF3;}
.sqbox span{display:block;margin-top:6px;font:600 10.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#D9B9CC;}
.sqbox:focus-visible,.sqbox-main:focus-visible{outline:2px solid #D2954A;outline-offset:2px;}
[data-theme="light"] .sqbox{box-shadow:0 18px 44px rgba(60,20,50,.28);}
.sqcf{position:fixed;z-index:39;pointer-events:none;border-radius:1px;}
/* Activity rows in the drawer */
.sqarow{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);border-left:2px solid transparent;padding:14px 16px;margin:0 -16px;width:calc(100% + 32px);cursor:pointer;color:inherit;font:inherit;transition:background .15s var(--ease);}
.sqarow:hover{background:var(--glass);}
.sqarow.unseen{border-left-color:#D2954A;}
.sqarow p{margin:0;font-size:14.5px;line-height:1.4;color:var(--ink-soft);}
.sqarow.unseen p{color:var(--ink);font-weight:600;}
.sqarow span{display:block;margin-top:5px;font:600 10.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.sqarowhead{margin:22px 0 4px;font:600 10.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}
/* Today's line inside Activity (2026-10-06): one sentence from the read and
   the three taps. Not a row, not a box: it is the panel's resting state. */
.sqact-today{padding:12px 0 6px;border-bottom:1px solid var(--line);}
.sqact-line{margin:0 0 12px;font:500 16.5px/1.5 var(--disp);color:var(--ink);letter-spacing:-.01em;}
.sqact-react{display:flex;flex-wrap:wrap;gap:8px;}
.sqact-react .pill{font-size:12.5px;padding:6px 13px;}
/* Reminders: the due row's acts, the scheduled list behind its fold, the form. */
.sqrem-acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.sqrem-acts .dlink.quiet{color:var(--ink-soft);}
.sqrem-list{list-style:none;margin:6px 0 0;padding:0;}
.sqrem-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);}
.sqrem-list li span{display:flex;flex-direction:column;gap:3px;min-width:0;}
.sqrem-list li b{font-weight:600;font-size:14.5px;color:var(--ink);overflow-wrap:anywhere;}
.sqrem-list li small{font:600 10.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.sqrem-list li .link{flex:0 0 auto;color:var(--ink-faint);font-size:13px;}
.sqrem-form{margin-top:10px;}
.sqrem-form textarea{width:100%;box-sizing:border-box;resize:none;font:inherit;font-size:15px;line-height:1.45;color:var(--ink);background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:11px 13px;}
.sqrem-form textarea:focus-visible{outline:2px solid rgba(162,78,129,.6);outline-offset:1px;}
.sqrem-when{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.sqrem-pick[hidden]{display:none;}
.sqrem-pick{display:block;margin:0 0 12px;font:inherit;font-size:14px;color:var(--ink);background:var(--glass);border:1px solid var(--line);border-radius:8px;padding:8px 11px;color-scheme:dark;}
[data-theme="light"] .sqrem-pick{color-scheme:light;}
.sqrem-err{margin:0 0 10px;min-height:0;color:#E0705F;}
.sqrem-err:empty{display:none;}
.sqrem-form .sqrem-acts{gap:12px;}
.sqremind{display:inline-block;margin-top:10px;color:var(--ink-faint);font-size:13px;}
.sqremind:hover{color:var(--plum-bright);}
.sqcorenav-in .sqremind{margin:0 0 0 16px;}
@media (prefers-reduced-motion:reduce){.sqbox,.sqbox.in,.sqbox.tuck,.sqbox.gone{transition-duration:.01ms;transform:none;}}
[data-theme="light"] nav .bellcount{background:#A8570F;box-shadow:none;} /* 3:1 on the light bar */

/* ---------------------------------------------------------------------------
   THE DEEPER REPORT: THE QUESTIONS, THE WAITING, AND THE READING
   (design handoff 2026-09-21, sections 12, 16, 17 and 18.)

   Layout only. Every colour, face and weight below is already in this file;
   what is new is measure, grouping and touch size. */

/* A REAL RADIO, WEARING THE DOT IT ALWAYS WORE. The six targets used to be
   <button>s; they are a radio group now, so the arrow keys work and a screen
   reader reads one question with six options instead of six controls. The
   input keeps .lik-opt, so the look is the same rule as before; these three
   lines only undo the browser's own radio. */
.lik-opt{appearance:none;-webkit-appearance:none;margin:0;}
.lik-opt:checked{background:var(--plum);border-color:var(--plum);box-shadow:0 0 16px rgba(162,78,129,.6);}
/* The tap target, not the dot: 44px of label around a 26px circle, which is
   what makes six choices usable on a phone without growing the dots. */
.lik-hit{display:grid;place-items:center;min-width:44px;min-height:44px;cursor:pointer;}
.lik{border:0;padding:16px 0;margin:0;min-width:0;}
.lik-q{margin:0 0 12px;padding:0;float:left;width:100%;}
.lik-scale{clear:both;}
/* AN UNANSWERED ROW SAYS SO, and says which. The count alone named a number
   with nothing to look at (tree §5.8). */
.lik.missing{border-left:2px solid var(--amber);padding-left:14px;margin-left:-16px;}
.lik-err{clear:both;margin:8px 0 0;font-size:12.5px;color:var(--amber-bright);}
/* Saved, where you are, and what is only selected: three facts, one line. */
.dpmeta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 18px;}
.dpmeta .dpunsaved{color:var(--amber-bright);}
.dpacts{flex-wrap:wrap;}

/* THE PANELS BETWEEN THE LAST ANSWER AND THE READING (scoring, writing,
   interrupted, failed, unsaved, ready). One shape for all six so the state is
   read from the words, never from a change of furniture. */
.dppanel{max-width:56ch;margin:0 auto;}
.dppanel .essence{margin-left:auto;margin-right:auto;}
.dpsaved{margin:0 0 10px;color:var(--amber-bright);}

/* A COMFORTABLE MEASURE FOR THE READING. The prose card ran the full page
   width; at 1280 that is a line nobody reads comfortably. It grows as long as
   the reading is. */
.dpprose{max-width:68ch;margin-left:auto;margin-right:auto;}

/* ON A PHONE THE SCALE'S ENDS SIT ABOVE THE CHOICES (handoff section 18), so
   six 44px targets have the whole width instead of sharing it with two labels
   that wrap to three lines each. */
@media (max-width:560px){
  .lik-scale{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;}
  .lik-ends{max-width:none;}
  .lik-ends.hi{grid-column:2;grid-row:1;}
  .lik-opts{grid-column:1 / -1;grid-row:2;gap:0;}
  .lik-opt{width:26px;height:26px;}
  .dpmeta{gap:4px 12px;}
}

/* THE PROFILE'S TWO ACTIVITIES (handoff sections 14A and 15): the deeper
   report and In my own words, each stating what is saved and offering the one
   act that fits it. Stacked, quiet, and made of the page's own parts: no
   second hero, no chooser, no dashboard. */
.sqactivity{padding:26px 0 0;border-top:1px solid var(--line);margin-top:26px;}
.sqactivity:first-of-type{border-top:0;margin-top:0;}
.sqactivity .sqh2{margin-bottom:8px;}
.sqactivity-state{margin:0 0 10px;font:600 12px/1.3 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--amber-bright);}
.sqactivity p{max-width:66ch;}
.sqactivity-acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;}
/* display:flex beats the hidden attribute, which is how an ineligible account
   was shown "Write my lines" directly above the sentence saying it is not
   open yet. The same trap is noted on .invrow at the foot of this file. */
.sqactivity-acts[hidden],.sqactivity-acts button[hidden]{display:none;}
.sqactivity-wait{margin:0;color:var(--ink-faint);font-size:13.5px;}

/* A READING THAT PREDATES A CORRECTION (snapshot.js, handoff section 14E).
   Amber, like every other "this is about you and needs your attention" note
   in the product, and above the reading it qualifies rather than below it. */
.sqstale{border-left:2px solid var(--amber);padding:2px 0 2px 16px;margin:0 0 18px;}

/* THE TENDENCIES, TWO COLUMNS (approved composition, bottom panel; brief 1.7).
   Columns rather than a grid so the five groups flow and balance themselves;
   a group never breaks across the gap. */
.sqtend{columns:2;column-gap:34px;margin-top:10px;}
.sqtend-g{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 14px;}
.sqtend-g .sqmore{margin-top:2px;}
@media (max-width:760px){ .sqtend{columns:1;} }

/* THE HERO AS THE CARD (brief section 2; the card-led portrait board).
   The frame, the corner affordance and the tray beneath. The card's CONTENTS
   are the production hero exactly as it was: same type, same gradient name,
   same chips, same shape. Nothing here invents a finish -- the three were
   rejected as too plain and the brief forbids shipping mock ones -- so this is
   the frame and the interaction, with the finish row still to come. */
.sqherocard{position:relative;border:1px solid rgba(162,78,129,.45);border-radius:var(--r-hero);
  background:linear-gradient(150deg,rgba(162,78,129,.14),rgba(162,78,129,.03) 46%,transparent);
  box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 0 60px rgba(162,78,129,.06);
  padding:26px 34px 22px;margin-bottom:0;cursor:pointer;}
.sqherocard:hover{border-color:rgba(184,96,145,.65);}
.sqherocard:focus-within{border-color:rgba(184,96,145,.75);}
/* The quiet corner affordance the brief asks for, so the interaction is not
   only "click the picture". A real button: tab reaches it, Enter opens it. */
.sqcust{position:absolute;top:14px;right:16px;z-index:2;border:0;background:none;padding:6px 8px;
  font:600 11.5px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);cursor:pointer;border-radius:8px;transition:color .16s ease;}
.sqcust:hover{color:var(--plum-bright);}
.sqcust:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
/* The tray sits directly beneath the same hero and never moves it. */
.sqtray{margin:14px 0 0;padding:18px 20px;border:1px solid var(--line);border-radius:16px;
  background:var(--elev);box-shadow:0 18px 50px rgba(0,0,0,.35);}
.sqtray[hidden]{display:none;}
@media (max-width:760px){
  .sqherocard{padding:26px 20px 20px;border-radius:var(--r-hero-m);}
  .sqcust{top:10px;right:10px;}
}
/* THE Q IN THE CORNER, and Customize card at the bottom left (Anthem,
   2026-09-21). The mark matches the bar's: the same image at the same 24px.
   Decorative: the page already says whose card it is. */
.sqherocard-q{position:absolute;top:18px;right:20px;z-index:2;height:24px;width:auto;pointer-events:none;user-select:none;}
.sqherocard .sqcust{top:auto;right:auto;bottom:14px;left:16px;}
/* On the plum finish a plum mark disappears into the ground, so it is lifted. */
.sqherocard[data-finish="plum"] .sqherocard-q{filter:brightness(1.5);}
/* The mark is a see-through magenta (58% opaque at its densest): plum on a
   dark ground, but pale on paper. Darkening cannot make it solid, so on paper
   a stacked zero-blur shadow in the name's plum fills the letter in behind it. */
.sqherocard[data-finish="paper"] .sqherocard-q{filter:drop-shadow(0 0 0 #8E3F6C) drop-shadow(0 0 0 #8E3F6C) drop-shadow(0 0 0 #8E3F6C);}
/* Customize card gets its own strip at the foot of the card, clear of the
   quote above it. */
.sqherocard{padding-bottom:44px;}
@media (max-width:760px){
  .sqherocard-q{top:14px;right:14px;height:22px;}
  .sqherocard .sqcust{top:auto;right:auto;bottom:12px;left:12px;}
  /* On a phone the shape's caption is the card's last line, so the button
     gets a strip of its own beneath it rather than sitting on the words. */
  .sqherocard{padding-bottom:52px;}
}
@media (prefers-reduced-motion:reduce){ .sqherocard{transition:none;} }
/* Never on paper: the card is the app's own object, and the print stylesheet
   already hides the screen hero. */
@media print{ body[data-printing^="profile"] .sqtray,
              body[data-printing^="profile"] .sqcust{display:none !important;} }

/* THE THREE FINISHES (brief section 2). The swatch is the finish itself, and
   the hero above repaints to match, so what is previewed is what downloads. */
.sqfins{display:flex;gap:10px;flex-wrap:wrap;margin:0;}
.sqfin{display:flex;align-items:center;gap:9px;padding:8px 14px 8px 9px;border:1px solid var(--line);
  border-radius:999px;cursor:pointer;transition:border-color .16s ease,background .16s ease;}
.sqfin:hover{border-color:var(--plum-bright);}
.sqfin input{position:absolute;opacity:0;width:1px;height:1px;}
.sqfin:has(input:checked){border-color:var(--plum-bright);background:rgba(162,78,129,.14);}
.sqfin:has(input:focus-visible){outline:2px solid var(--plum-bright);outline-offset:3px;}
.sqfin-sw{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.22);flex:none;}
.sqfin-l{font:600 13px var(--disp);letter-spacing:.02em;color:var(--ink-soft);white-space:nowrap;}
.sqfin[data-fin="pulse"] .sqfin-sw{background:radial-gradient(circle at 34% 30%,#A24E81,#07060A 70%);box-shadow:0 0 12px rgba(162,78,129,.7);}
.sqfin[data-fin="plum"]  .sqfin-sw{background:#2A1226;}
.sqfin[data-fin="paper"] .sqfin-sw{background:#F4EDE2;border-color:rgba(0,0,0,.2);}

/* THE HERO PREVIEWS THE CHOSEN FINISH. Only the card's own surface and type
   move; the layout, the shape and the copy are untouched. */
.sqherocard[data-finish="plum"]{background:#2A1226;border-color:rgba(240,220,233,.35);box-shadow:0 30px 80px rgba(0,0,0,.45);}
.sqherocard[data-finish="plum"] .archetype{background:none;color:#F6F1F4;-webkit-text-fill-color:#F6F1F4;}
.sqherocard[data-finish="paper"]{background:#F4EDE2;border-color:rgba(36,23,38,.28);box-shadow:0 26px 70px rgba(0,0,0,.35);}
.sqherocard[data-finish="paper"] .archetype{background:linear-gradient(100deg,#241726,#8E3F6C);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.sqherocard[data-finish="paper"] .kick,
.sqherocard[data-finish="paper"] .sqlead,
.sqherocard[data-finish="paper"] .sqhero-key,
.sqherocard[data-finish="paper"] .sqshape-cap,
.sqherocard[data-finish="paper"] .codes span{color:#241726;}
.sqherocard[data-finish="paper"] .codes span{border-color:rgba(36,23,38,.3);background:rgba(36,23,38,.05);}
.sqherocard[data-finish="paper"] .sqcust{color:rgba(36,23,38,.62);}
.sqherocard[data-finish="paper"] .sqcust:hover{color:#8E3F6C;}
.sqherocard[data-finish="paper"] .sqshape-label,
.sqherocard[data-finish="paper"] .sqshape-rname{fill:rgba(36,23,38,.66);}
.sqherocard[data-finish="paper"] .sqshape-ring,
.sqherocard[data-finish="paper"] .sqshape-spoke{stroke:rgba(36,23,38,.18);}
/* Matte Plum is matte by name, and the card it downloads has no glow, so the
   preview must not show one either: the hero's bloom behind the figure and the
   figure's own glow both come off. A preview that promises a glow the file
   does not have is the thing the tray exists to prevent. */
/* The outline's glow lives on the polygon and is re-applied every beat by the
   breathing animation's keyframes, so the animation has to stop as well: a
   filter override alone loses to it. Stroke, fill and dots then take the same
   pale treatment the Matte Plum card draws. */
.sqherocard[data-finish="plum"] .sqshape-poly{filter:none;animation:none !important;
  stroke:#F0DCE9;fill:rgba(246,241,244,.16);}
.sqherocard[data-finish="plum"] .sqshape-dot{filter:none;fill:#F0DCE9;stroke:none;}


  /* ---------- Compass, the room (2026-09-29 redesign) ----------
     Two columns inside the page: the rail is Compass across conversations
     (new, search, every conversation by day, and at its foot What Compass
     keeps); the main column is THIS conversation (header, thread, dock).
     Compass speaks in the open column with its mark in the gutter; the
     person's words sit in a plum-tinted bubble on the right. SuperQ's own
     fact sentences sit on a plum hairline. Closed palette, --r for surfaces,
     999px for pills. On a phone the room takes the whole screen. */
  body.sq-shell.sq-compass-on .sqfoot{display:none;}
  body.sq-shell [data-view="compass"] .page{max-width:none;margin:0;padding:0;}
  .cps{--cps-rail:264px;--cps-col:760px;display:grid;grid-template-columns:var(--cps-rail) minmax(0,1fr);height:100vh;height:100dvh;position:sticky;top:0;}
  .cps[data-rail="closed"]{--cps-rail:56px;}
  .cps-ico{flex:none;display:inline-grid;place-items:center;position:relative;width:32px;height:32px;padding:0;border:0;border-radius:var(--r);background:none;color:var(--ink-faint);cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease);}
  .cps-ico[hidden]{display:none;}
  .cps-ico:hover{background:var(--glass);color:var(--ink);}
  .cps-ico .cps-i,.cps-i{width:18px;height:18px;}
  .cps-ico:focus-visible,.cps-row:focus-visible,.cps-new:focus-visible,.cps-keptbtn:focus-visible,.cps-starts button:focus-visible,
  .cps-earlier:focus-visible,.cps-link:focus-visible,.cps-kepttag:focus-visible,.cps-older:focus-visible,.cps-menu button:focus-visible,
  .cps-forget:focus-visible,.cps-keep-from:focus-visible,.cps-latest:focus-visible,.cps-send:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
  .cps-phone{display:none!important;}
  .cps-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

  /* the rail */
  .cps-rail{min-width:0;min-height:0;border-right:1px solid var(--line);display:flex;flex-direction:column;}
  .cps-strip{display:none;flex-direction:column;align-items:center;gap:8px;padding:24px 0 18px;height:100%;}
  .cps-strip-gap{flex:1;}
  .cps[data-rail="closed"] .cps-strip{display:flex;}
  .cps[data-rail="closed"] .cps-railbody{display:none;}
  .cps-dot{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--plum-bright);}
  .cps-railbody{display:flex;flex-direction:column;min-height:0;height:100%;padding:22px 12px 0;}
  .cps-railtop{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px;padding:0 0 0 10px;}
  .cps-railk{font:600 10.5px/1 var(--disp);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-faint);}
  .cps-new{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);
    background:var(--glass);color:var(--ink);font:600 13.5px/1 var(--disp);cursor:pointer;transition:border-color .16s var(--ease),background .16s var(--ease);}
  .cps-new:hover{border-color:rgba(162,78,129,.55);background:var(--glass-2);}
  .cps-new .cps-i{width:16px;height:16px;color:var(--plum-bright);}
  .cps-search{display:flex;align-items:center;gap:8px;margin:10px 0 0;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--field);color:var(--ink-faint);}
  .cps-search[hidden]{display:none;}
  .cps-search:focus-within{border-color:rgba(162,78,129,.55);}
  .cps-search .cps-i{width:15px;height:15px;}
  .cps-search input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:400 13.5px/1 var(--sans);outline:none;}
  .cps-search input::placeholder{color:var(--ink-faint);}
  .cps-list{flex:1;min-height:0;overflow-y:auto;margin:6px -6px 0;padding:0 6px 12px;scrollbar-width:thin;}
  .cps-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;}
  .cps-group{margin:18px 10px 6px;font:600 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
  .cps-group:empty{display:none;}
  .cps-li{position:relative;}
  .cps-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:10px;width:100%;min-height:36px;padding:8px 10px;
    border:0;border-radius:var(--r);background:none;color:var(--ink-soft);font:500 13.5px/1.35 var(--sans);text-align:left;cursor:pointer;
    transition:background .16s var(--ease),color .16s var(--ease);}
  .cps-row:hover{background:var(--glass);color:var(--ink);}
  .cps-row.on{background:rgba(162,78,129,.14);color:var(--hi);box-shadow:inset 2px 0 0 var(--plum-bright);}
  .cps-row-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cps-row-w{font-size:11.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .cps-row-s{grid-column:1 / -1;margin-top:3px;font-size:12px;line-height:1.45;color:var(--ink-faint);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .cps-row mark,.cps-row-s mark{background:rgba(162,78,129,.32);color:var(--ink);border-radius:2px;padding:0 1px;}
  .cps-row-new{cursor:default;font-style:normal;}
  .cps-rowmore{position:absolute;top:2px;right:2px;opacity:0;background:var(--elev);}
  .cps-li:hover .cps-rowmore,.cps-rowmore:focus-visible,.cps-rowmore[aria-expanded="true"]{opacity:1;}
  .cps-li:hover .cps-row-w{visibility:hidden;}
  .cps-railnote{margin:14px 10px;font-size:12.5px;line-height:1.5;color:var(--ink-faint);}
  .cps-older{display:block;margin:12px auto 4px;padding:6px 12px;border:0;background:none;color:var(--ink-faint);font:600 12px/1 var(--disp);cursor:pointer;border-radius:999px;}
  .cps-older:hover{color:var(--ink);background:var(--glass);}
  .cps-keptbtn{flex:none;display:flex;align-items:center;gap:10px;margin:0 -12px;padding:16px 22px 18px;border:0;border-top:1px solid var(--line);
    background:none;color:var(--ink-soft);font:600 13px/1 var(--disp);cursor:pointer;text-align:left;transition:color .16s var(--ease),background .16s var(--ease);}
  .cps-keptbtn:hover{color:var(--ink);background:var(--glass);}
  .cps-keptbtn .cps-i{width:16px;height:16px;color:var(--plum-bright);}
  .cps-keptbtn span{flex:1;}
  .cps-count{min-width:20px;padding:3px 7px;border-radius:999px;background:var(--glass-2);color:var(--ink-soft);font:600 11px/1 var(--sans);text-align:center;}
  .cps-count:empty{display:none;}
  .cps-scrim{display:none;}

  /* the conversation */
  .cps-main{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;}
  .cps-head{flex:none;display:flex;align-items:center;gap:12px;min-height:68px;padding:12px max(32px,calc((100% - var(--cps-col)) / 2 + 32px));border-bottom:1px solid var(--line);}
  .cps-titlebox{flex:1;min-width:0;}
  .cps-title{margin:0;font:600 17px/1.3 var(--disp);letter-spacing:0;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cps-meta{margin:3px 0 0;font-size:12.5px;line-height:1.3;color:var(--ink-faint);}
  .cps-meta:empty{display:none;}
  .cps-titlein{display:block;width:min(100%,460px);margin:-5px 0 -5px -9px;padding:4px 8px;border:1px solid rgba(162,78,129,.55);border-radius:var(--r);
    background:var(--field);color:var(--ink);font:600 17px/1.3 var(--disp);outline:none;}
  .cps-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;}
  .cps-thread{max-width:var(--cps-col);min-height:100%;margin:0 auto;padding:26px 32px 36px;display:flex;flex-direction:column;gap:22px;}
  .cps-day{display:flex;align-items:center;gap:14px;margin:8px 0 -4px;font:600 11px/1 var(--disp);letter-spacing:.08em;color:var(--ink-faint);}
  .cps-day::before,.cps-day::after{content:"";flex:1;height:1px;background:var(--line);}
  .cps-start{align-self:center;margin:4px 0 0;font-size:12px;color:var(--ink-faint);}
  .cps-earlier{align-self:center;overflow-anchor:none;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--ink-soft);font:600 12.5px/1 var(--disp);cursor:pointer;}
  .cps-earlier:hover{color:var(--ink);border-color:rgba(162,78,129,.55);}
  .cps-earlier:disabled{cursor:default;color:var(--ink-faint);border-color:var(--line);}

  .cps-u{align-self:flex-end;max-width:78%;display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
  .cps-ub{padding:11px 15px;border:1px solid rgba(162,78,129,.30);border-radius:var(--r);background:rgba(162,78,129,.16);color:var(--ink);
    font:400 15px/1.55 var(--sans);overflow-wrap:anywhere;}
  .cps-clip{max-height:15.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent);}
  .cps-failed .cps-ub{opacity:.62;border-style:dashed;}
  .cps-fail{margin:0;font-size:12.5px;color:var(--ink-soft);}
  .cps-fail .cps-link{margin-left:8px;}
  .cps-kepttag{display:inline-flex;align-items:center;gap:5px;padding:2px 4px;border:0;border-radius:4px;background:none;color:var(--ink-faint);font:500 11.5px/1.2 var(--sans);cursor:pointer;}
  .cps-kepttag .cps-i{width:12px;height:12px;color:var(--plum-bright);}
  .cps-kepttag:hover{color:var(--ink);}
  .cps-link{padding:0;border:0;background:none;color:var(--plum-bright);font:inherit;font-weight:600;cursor:pointer;}
  .cps-link:hover{text-decoration:underline;text-underline-offset:3px;}

  .cps-a{align-self:stretch;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:16px;}
  .cps-am{padding-top:2px;}
  .cps-am svg{display:block;width:24px;height:24px;}
  .cps-ab{max-width:66ch;color:var(--ink);font:400 15.5px/1.7 var(--sans);overflow-wrap:anywhere;}
  .cps-ab p{margin:0 0 12px;} .cps-ab > :last-child,.cps-ab p:last-child{margin-bottom:0;}
  .cps-ab .cps-belief{border-left:2px solid var(--plum,#6b3fa0);padding-left:.75rem;margin-left:0;}
.cps-ab .cps-belief .cps-why{margin-left:.4rem;font-size:.85em;color:var(--ink-soft);}
.cps-facts{margin:2px 0 14px;padding:1px 0 1px 16px;border-left:2px solid var(--plum);}
  .cps-facts p{margin:0 0 8px;font-weight:500;}
  .cps-factk{display:block;margin:3px 0 8px;font:600 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
  .cps-soft .cps-ab{color:var(--ink-soft);}
  .cps-masked .cps-ab{padding:10px 14px;border:1px dashed var(--line);border-radius:var(--r);color:var(--ink-faint);font-style:italic;font-size:14px;}
  .cps-safety{grid-template-columns:minmax(0,1fr);}
  .cps-safety .cps-ab{max-width:none;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--elev);}
  .cps-note{align-self:center;max-width:90%;padding:8px 16px;border:1px dashed var(--line);border-radius:999px;color:var(--ink-soft);font-size:12.5px;line-height:1.45;text-align:center;}
  .cps-found .cps-ub,.cps-found .cps-ab{animation:cpsfound 2.4s var(--ease);}
  @keyframes cpsfound{0%,35%{box-shadow:0 0 0 3px rgba(162,78,129,.55);}100%{box-shadow:0 0 0 3px rgba(162,78,129,0);}}
  .cps-dots,.cps-loading{display:inline-flex;gap:5px;padding:9px 0;}
  .cps-dots i,.cps-loading i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);animation:cmpblink 1.2s infinite;}
  .cps-dots i:nth-child(2),.cps-loading i:nth-child(2){animation-delay:.2s;} .cps-dots i:nth-child(3),.cps-loading i:nth-child(3){animation-delay:.4s;}
  .cps-loading{margin:auto;}
  .cps-slow{margin-left:12px;font-size:12.5px;color:var(--ink-faint);}

  /* a new conversation */
  .cps.is-empty .cps-thread{justify-content:center;}
  .cps-empty{margin:0 auto;padding:6vh 0 4vh;max-width:520px;text-align:center;}
  .cps-empty-mark{display:inline-block;margin:0 0 18px;}
  .cps-empty-mark svg{display:block;width:44px;height:44px;}
  .cps-hello{margin:0 0 10px;font:600 clamp(26px,2.8vw,32px)/1.2 var(--disp);letter-spacing:-.01em;color:var(--ink);}
  .cps-lede{max-width:440px;margin:0 auto 8px;color:var(--ink-soft);font-size:15px;line-height:1.6;}
  .cps-offstate .quiet{margin-top:18px;}
  .cps-starts{list-style:none;max-width:420px;margin:28px auto 0;padding:0;text-align:left;border-top:1px solid var(--line);}
  .cps-starts button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 4px;border:0;border-bottom:1px solid var(--line);
    background:none;color:var(--ink-soft);font:500 14.5px/1.4 var(--sans);text-align:left;cursor:pointer;transition:color .16s var(--ease);}
  .cps-starts button:hover{color:var(--ink);}
  .cps-go{width:15px!important;height:15px!important;color:var(--plum-bright);opacity:0;transform:translateX(-4px);transition:opacity .16s var(--ease),transform .16s var(--ease);}
  .cps-starts button:hover .cps-go,.cps-starts button:focus-visible .cps-go{opacity:1;transform:none;}

  /* the dock */
  .cps-dock{position:relative;flex:none;padding:0 max(32px,calc((100% - var(--cps-col)) / 2 + 32px)) 18px;}
  .cps-dock::before{content:"";position:absolute;left:max(32px,calc((100% - var(--cps-col)) / 2 + 32px));right:max(32px,calc((100% - var(--cps-col)) / 2 + 32px));top:-22px;height:22px;background:linear-gradient(rgba(6,4,11,0),var(--bg));pointer-events:none;}
  [data-theme="light"] .cps-dock::before{background:linear-gradient(rgba(244,241,235,0),var(--bg));}
  .cps-bar{margin:0;}
  .cps-field{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line);border-radius:var(--r);background:var(--field);
    transition:border-color .16s var(--ease),box-shadow .16s var(--ease);}
  .cps-field:focus-within{border-color:rgba(162,78,129,.6);box-shadow:0 0 0 3px rgba(162,78,129,.16);}
  .cps-field textarea{flex:1;min-width:0;min-height:50px;max-height:40vh;padding:14px 0 14px 16px;border:0;background:none;resize:none;outline:none;
    color:var(--ink);font:400 15.5px/1.5 var(--sans);}
  .cps-field textarea::placeholder{color:var(--ink-faint);}
  .cps-send{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:7px;border:0;border-radius:var(--r);cursor:pointer;color:#fff;
    background:linear-gradient(135deg,var(--plum),var(--plum-deep));box-shadow:0 3px 11px rgba(162,78,129,.38);transition:opacity .16s var(--ease),transform .16s var(--ease);}
  .cps-send .cps-i{width:17px;height:17px;}
  .cps-send:hover:not(:disabled){transform:translateY(-1px);}
  .cps-send:disabled{opacity:.35;box-shadow:none;cursor:default;}
  .cps-send.busy{opacity:.8;}
  .cps-send.busy svg{display:none;}
  .cps-send.busy::after{content:"";width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:cpsspin .8s linear infinite;}
  @keyframes cpsspin{to{transform:rotate(360deg);}}
  .cps-under{display:flex;justify-content:space-between;gap:12px;min-height:15px;margin:7px 2px 0;font-size:11.5px;line-height:15px;color:var(--ink-faint);}
  .cps-hint{visibility:hidden;}
  .cps.is-empty .cps-hint{visibility:visible;}
  .cps-len.near{color:#c0392b;}
  .cps-err{margin:0 0 10px;padding:9px 14px;border:1px solid rgba(162,78,129,.3);border-radius:var(--r);background:rgba(162,78,129,.12);color:var(--ink);font-size:13.5px;line-height:1.45;}
  .cps-latest{position:absolute;left:50%;top:-50px;z-index:2;display:inline-flex;align-items:center;gap:6px;transform:translateX(-50%);padding:7px 13px 7px 10px;
    border:1px solid var(--line);border-radius:999px;background:var(--elev);color:var(--ink-soft);font:600 12px/1 var(--disp);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35);}
  .cps-latest[hidden]{display:none;}
  .cps-latest .cps-i{width:14px;height:14px;}
  .cps-latest:hover{color:var(--ink);}
  .cps-toast{position:absolute;left:50%;bottom:112px;z-index:3;transform:translateX(-50%);margin:0;padding:9px 16px;border:1px solid var(--line);border-radius:999px;
    background:var(--elev);color:var(--ink);font-size:13px;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.35);}
  .cps.is-off{grid-template-columns:minmax(0,1fr);}
  .cps.is-off .cps-dock,.cps.is-off .cps-rail{display:none;}

  /* the menu (conversation options) */
  .cps-menu{position:absolute;z-index:60;min-width:210px;max-width:260px;padding:6px;border:1px solid var(--line);border-radius:var(--r);background:var(--elev);box-shadow:0 18px 50px rgba(0,0,0,.45);}
  [data-theme="light"] .cps-menu{box-shadow:0 18px 50px rgba(80,60,92,.18);}
  .cps-menu button{display:block;width:100%;padding:9px 12px;border:0;border-radius:4px;background:none;color:var(--ink);font:500 13.5px/1.3 var(--sans);text-align:left;cursor:pointer;}
  .cps-menu button:hover,.cps-menu button:focus-visible{background:var(--glass-2);}
  .cps-menu hr{margin:6px 0;border:0;border-top:1px solid var(--line);}
  .cps-menu .cps-del{color:var(--ink-soft);}
  .cps-menu .cps-del.armed{color:#c0392b;font-weight:600;}
  .cps-menunote{margin:2px 12px 6px;font-size:12px;line-height:1.45;color:var(--ink-faint);}
  .cps-menu .cps-phone-only{display:none;}

  /* What Compass keeps: the shared drawer */
  #drawer.cps-keepdrawer #dwide{display:none;}
  .cps-keep-h{margin:6px 0 10px;font:600 24px/1.25 var(--disp);color:var(--ink);}
  .cps-keep-lede{margin:0 0 6px;color:var(--ink-soft);font-size:14.5px;line-height:1.6;}
  .cps-keep-sub{margin:0;color:var(--ink-faint);font-size:13.5px;line-height:1.6;}
  .cps-keep-sec{margin-top:26px;}
  .cps-keep-k{margin:0 0 4px;font:600 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
  .cps-keep-list{list-style:none;margin:0;padding:0;}
  .cps-keep-item{padding:14px 0;border-bottom:1px solid var(--line);}
  .cps-keep-item q{display:block;color:var(--ink);font-size:15px;line-height:1.55;overflow-wrap:anywhere;}
  .cps-keep-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;}
  .cps-keep-from{min-width:0;padding:0;border:0;background:none;color:var(--ink-faint);font:400 12.5px/1.4 var(--sans);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  button.cps-keep-from{cursor:pointer;}
  button.cps-keep-from:hover{color:var(--plum-bright);text-decoration:underline;text-underline-offset:3px;}
  .cps-forget{flex:none;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--ink-soft);font:600 12px/1 var(--disp);cursor:pointer;}
  .cps-forget:hover{color:var(--ink);border-color:var(--ink-faint);}
  .cps-forget.armed{color:#c0392b;border-color:rgba(192,57,43,.55);}
  .cps-keep-gone{margin:0;color:var(--ink-faint);font-size:13px;font-style:italic;}
  .cps-keep-err{margin:8px 0 0;color:#c0392b;font-size:12.5px;}
  .cps-keep-not{margin-top:32px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);}
  .cps-keep-not h3{margin:0 0 6px;font:600 14px/1.3 var(--disp);color:var(--ink);}
  .cps-keep-not p{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.55;}

  /* What Super Coach thinks (#12): the belief layer in the open */
  .cps-thinks{display:flex;align-items:center;gap:8px;width:100%;margin:2px 0 8px;padding:9px 12px;border:0;border-radius:6px;background:none;color:var(--ink-soft);font:500 13.5px/1.3 var(--sans);text-align:left;cursor:pointer;}
  .cps-thinks:hover,.cps-thinks:focus-visible{background:var(--glass-2);color:var(--ink);}
  .cps-thinks svg{width:16px;height:16px;flex:none;}
  .cps-thinks span{flex:1;min-width:0;}
  .cps-thinks b{flex:none;min-width:20px;padding:1px 7px;border-radius:999px;background:var(--glass-2);color:var(--ink);font:600 11px/1.5 var(--disp);text-align:center;}
  .cps-think-s{margin:0;color:var(--ink);font-size:15px;line-height:1.55;overflow-wrap:anywhere;}
  .cps-think-st{margin:6px 0 0;color:var(--ink-soft);font-size:13px;line-height:1.5;}
  .cps-think-st b{color:var(--plum-bright);font-weight:600;}
  .cps-think-st time{color:var(--ink-faint);}
  .cps-think-why{margin-top:8px;}
  .cps-think-why summary{cursor:pointer;color:var(--ink-soft);font:600 12.5px/1.4 var(--disp);list-style:none;}
  .cps-think-why summary::-webkit-details-marker{display:none;}
  .cps-think-why summary span{color:var(--ink-faint);font-weight:400;}
  .cps-think-why[open] summary{color:var(--ink);}
  .cps-rcpts{list-style:none;margin:8px 0 0;padding:0 0 0 10px;border-left:2px solid var(--line);}
  .cps-rcpt{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;padding:5px 0;font-size:13.5px;line-height:1.5;}
  .cps-rcpt q{color:var(--ink);overflow-wrap:anywhere;}
  .cps-rcpt-dir{font:600 10.5px/1.6 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
  .cps-rcpt-against .cps-rcpt-dir{color:var(--plum-bright);}
  .cps-rcpt-kind{color:var(--ink-soft);font-style:italic;}
  .cps-rcpt time{color:var(--ink-faint);font-size:12px;white-space:nowrap;}
  .cps-think-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
  .cps-think-form{margin-top:10px;}
  .cps-think-form label{display:block;color:var(--ink-soft);font-size:13px;line-height:1.5;}
  .cps-think-form textarea{display:block;width:100%;margin-top:6px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:400 14px/1.5 var(--sans);resize:vertical;}

  /* a phone: the room is the whole screen */
  @media (max-width:899px){
    .cps{position:fixed;inset:0;z-index:30;grid-template-columns:minmax(0,1fr);background:var(--bg);}
    .cps-phone{display:inline-grid!important;}
    .cps-menu .cps-phone-only{display:block;}
    .cps-rail{position:fixed;top:0;bottom:0;left:0;z-index:32;width:min(320px,86vw);background:var(--elev);transform:translateX(-102%);transition:transform .3s var(--ease);}
    .cps.rail-in .cps-rail{transform:none;}
    .cps-strip{display:none!important;}
    .cps-railbody{display:flex!important;padding:16px 12px 0;}
    .cps-railtop [data-a="collapse"]{display:none;}
    .cps-keptbtn{padding-bottom:calc(18px + env(safe-area-inset-bottom));}
    .cps-scrim{display:block;position:fixed;inset:0;z-index:31;background:rgba(4,3,7,.6);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;}
    .cps.rail-in .cps-scrim{opacity:1;visibility:visible;}
    .cps-head{gap:4px;min-height:56px;padding:8px 8px 8px 6px;}
    .cps-titlebox{padding:0 4px;}
    .cps-title{font-size:15.5px;}
    .cps-meta{font-size:12px;margin-top:1px;}
    .cps-ico{width:40px;height:40px;}
    .cps-thread{padding:20px 16px 28px;gap:20px;}
    .cps-u{max-width:88%;}
    .cps-a{grid-template-columns:minmax(0,1fr);}
    .cps-am{display:none;}
    .cps-ab{font-size:15.5px;}
    .cps-dock{padding:0 12px calc(10px + env(safe-area-inset-bottom));}
    .cps-under{display:none;}
    .cps-len:not(:empty){display:block;}
    .cps-toast{bottom:92px;}
    .cps-empty{padding:4vh 4px 2vh;}
    body.sq-shell #drawer.cps-keepdrawer{top:auto;left:0;right:0;width:100%;height:min(88dvh,760px);border-left:0;border-top:1px solid var(--line);
      border-radius:14px 14px 0 0;padding:26px 20px calc(36px + env(safe-area-inset-bottom));transform:translateY(102%);}
    body.sq-shell #drawer.cps-keepdrawer.open{transform:none;}
  }

/* ============================================================
   THE OBSIDIAN LAYOUT. Anthem, 2026-09-24 (sandbox, branch
   obsidian-layout). The original Obsidian design lab's arrangement,
   measured from the reference at 1440px and 390px, in this product's own
   faces, tokens and components (DESIGN-CONSISTENCY.md: closed palette,
   glass at --r, pills for buttons).

   Wide screens: a rail down the left (wordmark, workspace label, every
   destination with its icon and its place on the path, the account at the
   foot), a thin top bar (where you are, Activity), an open two-column hero
   with its two acts, the reading panel, the section row, the essence beside
   its heading, strengths and shadows as numbered rows side by side, and a
   next-step card at the foot of every page of the path.
   Phones: a brand row, a strip of tabs, the thin bar under them, and the
   same page stacked in the same order.

   Screen only. Print keeps its own rules above; the few new pieces are
   hidden on paper at the end of this block. To undo: delete this block,
   the markup marked "Obsidian layout" in index.html, and the journey,
   reading panel and calibrate sections of snapshot.js.
   ============================================================ */
.qm-super,.sqrail-kick,.sqrail-note,.sqacct,.sqtop,.sqfoot,.navbadge{display:none;}
.sqtabs{display:contents;}
.navi{display:none;}

body.sq-shell:not(.sq-onboarding) #chrome{display:contents !important;}
body.sq-shell #chrome .navi{display:block;flex:none;width:20px;height:20px;}
body.sq-shell .qm-super{display:inline;font:700 25px/1 var(--disp);letter-spacing:-.045em;color:var(--ink);}
body.sq-shell #chrome nav .qm{gap:3px;}
body.sq-shell .navbadge{display:inline-flex;align-items:center;margin-left:auto;padding-left:8px;
  font:600 9.5px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;}
body.sq-shell .navbadge.next{color:var(--amber-bright);}
body.sq-shell .navbadge.done{color:var(--ink-faint);}
body.sq-shell .navbadge svg{width:15px;height:15px;}

.sqcrumb{margin:0;display:flex;align-items:center;min-width:0;font:500 13px/1.2 var(--sans);color:var(--ink-faint);white-space:nowrap;}
.sqcrumb-sep{margin:0 12px;opacity:.55;}
.sqcrumb b{font:600 13.5px/1.2 var(--disp);color:var(--ink);overflow:hidden;text-overflow:ellipsis;}
.sqbrand-acts .bell{flex:none;position:relative;width:36px;height:36px;display:grid;place-items:center;border:1px solid transparent;border-radius:var(--r);
  background:none;color:var(--ink-soft);cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);}
.sqbrand-acts .bell:hover{color:var(--ink);background:var(--glass);border-color:var(--line);}
.sqbrand-acts .bell:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
.sqbrand-acts .bell svg{width:18px;height:18px;}
.sqbrand-acts .bellcount{position:absolute;top:6px;right:6px;min-width:0;width:8px;height:8px;padding:0;border-radius:50%;font-size:0;line-height:0;
  color:transparent;background:#D2954A;box-shadow:0 0 10px rgba(210,149,74,.9);border:0;}
.sqbrand-acts .bellcount[hidden]{display:none;}

/* THE FOOTER */
body.sq-shell .sqfoot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 42px 30px;
  border-top:1px solid var(--line);font:500 12px/1.4 var(--sans);color:var(--ink-faint);}
.sqfoot-mark{font:700 11px/1 var(--disp);letter-spacing:.26em;text-transform:uppercase;color:var(--plum-bright);}

/* ---------------------------------------------------------------- wide */
@media screen and (min-width:900px){
  body.sq-shell{--rail:232px;}
  body.sq-shell #chrome nav{position:fixed;top:0;left:0;bottom:0;width:var(--rail);height:auto;z-index:25;
    display:flex;flex-direction:column;align-items:stretch;padding:28px 16px 0;
    background:var(--elev);border:0;border-right:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none;}
  body.sq-shell #chrome nav .brand{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;}
  body.sq-shell #chrome nav .qm{flex:none;justify-content:flex-start;min-width:0;height:40px;padding:0 12px;border:0;}
  body.sq-shell #chrome nav .qm img{height:25px;}
  body.sq-shell .sqrail-kick{display:block;margin:56px 12px 16px;font:600 10.5px/1 var(--disp);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-faint);}
  body.sq-shell .sqtabs{display:flex;flex-direction:column;gap:6px;}
  body.sq-shell #chrome nav .subnav,body.sq-shell #chrome nav .levels{display:contents;}
  body.sq-shell #chrome nav .levels::before{display:none;}
  /* The reference's order: the path first, the places after it. */
  body.sq-shell #chrome .sub[data-sub="profile"]{order:1;}
  body.sq-shell #chrome .sub[data-sub="deeper"]{order:2;}
  /* THE PATH FIRST, THEN WHAT NEEDS OTHER PEOPLE (Anthem, 2026-10-05:
     "should guide and dyad be switched around in the menu if guide comes
     after deep read?"). Profile, Deep Read, Guide, 360 is the order the tour
     says to take; Dyads sat in the middle of it. It now follows, beside
     Super Team, the other page that needs a team. */
  body.sq-shell #chrome .sub[data-sub="guide"]{order:3;}
  body.sq-shell #chrome .sub[data-sub="gap"]{order:4;}
  body.sq-shell #chrome .lvl[data-lvl="dyads"]{order:5;}
  body.sq-shell #chrome .sub[data-sub="focus"]{order:6;}
  body.sq-shell #chrome .lvl[data-lvl="superteam"]{order:7;}
  body.sq-shell #chrome .lvl[data-lvl="coach"]{order:8;}
  body.sq-shell #chrome .lvl[data-lvl="compass"]{order:9;}
  body.sq-shell #chrome nav .subnav .sub,body.sq-shell #chrome nav .lvl{display:flex;align-items:center;gap:12px;width:100%;height:auto;min-height:50px;
    padding:0 12px;margin:0;border:1px solid transparent;border-radius:var(--r);background:none;box-shadow:none;text-shadow:none;
    font:600 14px/1.2 var(--disp);color:var(--ink-soft);text-align:left;white-space:nowrap;
    transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);}
  body.sq-shell #chrome nav .subnav .sub[hidden],body.sq-shell #chrome nav .lvl[hidden]{display:none;}
  body.sq-shell #chrome nav .subnav .sub:hover,body.sq-shell #chrome nav .lvl:hover{color:var(--ink);background:var(--glass);}
  body.sq-shell #chrome nav .subnav .sub.active,body.sq-shell #chrome nav .lvl.active{color:var(--hi);background:rgba(162,78,129,.15);border-color:rgba(162,78,129,.42);box-shadow:none;}
  body.sq-shell #chrome nav .sub.active .navi,body.sq-shell #chrome nav .lvl.active .navi{color:var(--plum-bright);}
  body.sq-shell #chrome nav .subnav .sub:focus-visible,body.sq-shell #chrome nav .lvl:focus-visible{outline:2px solid var(--plum-bright);outline-offset:-2px;}
  /* THE FOOT OF THE RAIL: a note, then the account. */
  body.sq-shell #chrome nav .navright{flex:none;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;column-gap:10px;
    height:auto;margin:0;padding:0 4px 18px;border:0;}
  body.sq-shell #chrome nav .navright > *{width:auto;height:auto;border:0;}
  body.sq-shell .sqrail-note{display:block;grid-column:1 / -1;margin:0 -4px 18px;padding:26px 12px 26px;border-bottom:1px solid var(--line);
    font:400 12.5px/1.75 var(--sans);color:var(--ink-faint);}
  body.sq-shell .sqrail-note .navi{width:22px;height:22px;margin:0 0 10px;color:var(--plum-bright);opacity:.75;}
  body.sq-shell #chrome nav .navright .avatar{width:40px;height:40px;display:grid;place-items:center;}
  body.sq-shell #chrome nav .navright .avatar b{width:36px;height:36px;}
  body.sq-shell #chrome nav .navright .avatar img{width:36px!important;height:36px!important;}
  body.sq-shell .sqacct{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;min-width:0;padding:4px 0;
    border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;}
  body.sq-shell .sqacct b{grid-column:1;font:600 13px/1.3 var(--disp);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  body.sq-shell .sqacct small{grid-column:1;font:400 11.5px/1.35 var(--sans);color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  body.sq-shell .sqacct .navi{grid-column:2;grid-row:1 / span 2;width:18px;height:18px;color:var(--ink-faint);}
  body.sq-shell .sqacct:hover .navi{color:var(--ink);}

  body.sq-shell:not(.sq-onboarding) #views{margin-left:var(--rail);}
  body.sq-shell [data-view="snapshot"] .page{max-width:1218px;padding:0 42px 40px;}
}

/* ---------------------------------------------------------------- phone */
@media screen and (max-width:899px){
  body.sq-shell #chrome nav{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand acct" "tabs tabs";
    height:auto;padding:14px 16px 0;background:var(--elev);border-bottom:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none;}
  body.sq-shell #chrome nav .brand{display:contents;}
  body.sq-shell #chrome nav .qm{grid-area:brand;justify-self:start;justify-content:flex-start;height:44px;min-width:0;padding:0 4px;}
  body.sq-shell .qm-super{font-size:22px;}
  body.sq-shell #chrome nav .qm img{height:22px;}
  body.sq-shell .sqtabs{grid-area:tabs;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:10px 16px 12px;}
  body.sq-shell .sqtabs::-webkit-scrollbar{display:none;}
  body.sq-shell #chrome nav .subnav,body.sq-shell #chrome nav .levels{display:contents;}
  body.sq-shell #chrome .sub[data-sub="profile"]{order:1;} body.sq-shell #chrome .sub[data-sub="deeper"]{order:2;}
  body.sq-shell #chrome .sub[data-sub="guide"]{order:3;} body.sq-shell #chrome .sub[data-sub="gap"]{order:4;}
  body.sq-shell #chrome .lvl[data-lvl="dyads"]{order:5;} body.sq-shell #chrome .lvl[data-lvl="superteam"]{order:7;}
  body.sq-shell #chrome nav .subnav .sub,body.sq-shell #chrome nav .lvl{flex:none;display:flex;align-items:center;gap:8px;height:auto;min-height:44px;
    padding:0 12px;border:1px solid transparent;border-radius:var(--r);background:none;box-shadow:none;text-shadow:none;
    font:600 13px/1 var(--disp);color:var(--ink-soft);white-space:nowrap;}
  body.sq-shell #chrome nav .subnav .sub[hidden],body.sq-shell #chrome nav .lvl[hidden]{display:none;}
  body.sq-shell #chrome nav .subnav .sub.active,body.sq-shell #chrome nav .lvl.active{color:var(--hi);background:rgba(162,78,129,.15);border-color:rgba(162,78,129,.42);box-shadow:none;}
  body.sq-shell #chrome .navi{width:17px;height:17px;}
  body.sq-shell .navbadge{padding-left:2px;}
  body.sq-shell .navbadge.next{width:6px;height:6px;padding:0;border-radius:50%;background:var(--amber-bright);font-size:0;box-shadow:0 0 8px rgba(224,174,114,.8);}
  body.sq-shell #chrome nav .navright{grid-area:acct;display:flex;align-items:center;height:44px;}
  body.sq-shell #chrome nav .navright > *{width:44px;height:44px;border:0;}
  body.sq-shell .sqfoot{flex-direction:column;align-items:flex-start;gap:8px;padding:22px 16px 28px;}
}

/* ================================================================ the page */
@media screen{
  /* THE HERO, OPEN. The card frame returns only while the card is being
     customised, so what the tray previews is what downloads (.sqcarding,
     snapshot.js wireHeroCard). */
  body.sq-shell .sqherocard.sqcarding .sqhero-acts,body.sq-shell .sqherocard.sqcarding .sqhero-note{display:none;}
  /* No minimum height (Anthem, 2026-10-07: dead space top and bottom). The card is as tall as its content. */
  body.sq-shell .sqaha.sqherocard{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);justify-content:stretch;gap:36px;min-height:0;align-items:center;}
  .sqhero-kick{display:flex;align-items:center;gap:12px;margin:0 0 22px;font:600 11px/1 var(--disp);letter-spacing:.16em;}
  .sqkick-q{height:18px;width:auto;filter:drop-shadow(0 0 6px rgba(162,78,129,.5));}
  .sqkick-sep{opacity:.5;}
  .sqhero-kick [data-heroname]{color:var(--ink-soft);}
  body.sq-shell .sqaha .archetype{margin:0 0 22px;}
  body.sq-shell .sqaha .codes{margin:0;}
  body.sq-shell .sqaha .sqlead{margin:26px 0 0;font:400 19px/1.65 var(--sans);letter-spacing:0;color:var(--ink-soft);max-width:27em;}
  .sqhero-acts{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin:30px 0 0;}
  .sqhero-acts .primary,.sqnext-acts .primary{display:inline-flex;align-items:center;gap:10px;}
  .sqarrow{width:14px;height:14px;flex:none;}
  .sqhero-acts .quiet{display:inline-flex;align-items:center;gap:8px;}
  .sqcal-i{width:18px;height:18px;color:var(--plum-bright);}
  .sqhero-note{margin:14px 0 0;font:400 12.5px/1.5 var(--sans);color:var(--ink-faint);}
  /* THE SHAPE PANEL */
  .sqshape-head{display:flex;align-items:baseline;justify-content:space-between;width:100%;max-width:470px;margin:0 auto 4px;padding:0 10px;}
  .sqshape-n{font:600 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
  .sqhero-shape .sqshape-label{cursor:pointer;outline:none;}
  .sqhero-shape .sqshape-label:focus-visible{fill:var(--hi);text-decoration:underline;}
  .sqhero-shape .sqshape-label.lit{fill:var(--hi);font-weight:700;}
  .sqhero-shape .sqshape-dot.lit{fill:var(--amber-bright);filter:drop-shadow(0 0 10px var(--amber));}
  .sqhero-key{font:400 12px/1.6 var(--sans);color:var(--ink-faint);text-align:center;}

  /* INSIDE YOUR SHAPE */
  .sqreadpanel{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center;margin:4px 0 44px;padding:26px 30px;
    border:1px solid rgba(162,78,129,.42);border-radius:var(--r-card);
    background:linear-gradient(110deg,rgba(162,78,129,.17),rgba(162,78,129,.03) 68%),var(--glass);}
  .sqrp-index{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-right:26px;border-right:1px solid var(--line);}
  .sqrp-index .eyebrow{font-size:10.5px;}
  .sqrp-name{margin:10px 0 10px;font:600 24px/1.15 var(--disp);letter-spacing:-.02em;color:var(--hi);}
  .sqrp-lean{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--sans);color:var(--plum-bright);}
  .sqrp-lean::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--plum-bright);box-shadow:0 0 8px var(--plum);}
  .sqrp-copy h2{margin:0 0 8px;font:600 17px/1.35 var(--disp);letter-spacing:-.01em;color:var(--ink);}
  .sqrp-copy p{margin:0;max-width:68ch;font:400 15.5px/1.65 var(--sans);color:var(--ink-soft);}
  .sqrp-fit{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;cursor:pointer;white-space:nowrap;
    font:600 13px/1 var(--disp);color:var(--plum-bright);}
  .sqrp-fit:hover{color:var(--hi);}
  .sqrp-fit:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;border-radius:var(--r);}

  /* THE SECTION ROW */
  .sqsecnav{display:flex;align-items:center;gap:32px;margin:0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;}
  .sqsecnav button{flex:none;min-height:50px;padding:0;border:0;background:none;cursor:pointer;
    font:600 13.5px/1 var(--disp);color:var(--ink-soft);box-shadow:inset 0 -2px 0 transparent;transition:color .16s var(--ease),box-shadow .16s var(--ease);}
  .sqsecnav button:hover{color:var(--ink);}
  .sqsecnav button.on{color:var(--hi);box-shadow:inset 0 -2px 0 var(--plum-bright);}
  .sqsecnav-note{margin-left:auto;flex:none;font:600 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
  #sqsec-overview,#sqsec-work,#sqsec-growth,#sqsec-whole{scroll-margin-top:24px;}

  /* SECTION HEADINGS: the number becomes the eyebrow over the heading. */
  body.sq-shell [data-view="snapshot"] .sqsec{display:block;}
  body.sq-shell [data-view="snapshot"] .sqsec::before{content:counter(sqsec,decimal-leading-zero) " /";display:block;margin:0 0 12px;}

  /* THE ESSENCE: heading left, prose and quote right. */
  body.sq-shell [data-view="snapshot"] [data-pf="core"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:48px;}
  body.sq-shell [data-view="snapshot"] [data-pf="core"] > *{grid-column:1 / -1;}
  body.sq-shell [data-view="snapshot"] [data-pf="core"] > #sqsec-overview{grid-column:1;align-self:start;margin:42px 0 0;padding-top:0;border-top:0;font-size:30px;}
  body.sq-shell [data-view="snapshot"] [data-pf="core"] > .sqessence{grid-column:2;margin-top:42px;}
  body.sq-shell .sqcoreprose{border-left:0;padding:0;box-shadow:none;}
  /* Said once on screen, in the section row (sqsecnav-note); paper keeps the full line. */
  body.sq-shell .sqcoreprose .sqprov{display:none;}
  body.sq-shell .sqcoreprose .sqcore{font:400 17.5px/1.75 var(--sans);color:var(--ink-soft);max-width:70ch;}
  body.sq-shell .sqcoreprose .sqquote{margin:24px 0 0;padding:2px 0 2px 18px;border-left:2px solid var(--amber);
    font:400 15.5px/1.6 var(--sans);color:var(--amber-bright);max-width:62ch;}

  /* STRENGTHS AND SHADOW: two columns of numbered rows, the why open. */
  body.sq-shell [data-view="snapshot"] .sqpair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 44px;align-items:start;
    margin-top:42px;padding-top:4px;border-top:1px solid var(--line);}
  body.sq-shell .sqpair .sqwall{margin-top:36px;}
  body.sq-shell .sqpair .sqsec{display:flex;align-items:baseline;gap:12px;margin:0;padding:0;border:0;font-size:24px;}
  body.sq-shell .sqpair .sqsec::before{display:none;}
  body.sq-shell [data-view="snapshot"] .sqpair .sqsec{counter-increment:none;}
  body.sq-shell .sqpair .sqsec .eyebrow{display:none;}
  body.sq-shell .sqwall-n{margin-left:auto;font:600 13px/1 var(--disp);letter-spacing:.06em;color:var(--plum-bright);}
  body.sq-shell .sqwall.am .sqwall-n{color:var(--amber-bright);}
  body.sq-shell .sqwall-sub{display:block;margin:10px 0 0;font:400 13.5px/1.4 var(--sans);color:var(--ink-faint);}
  body.sq-shell .sqwall-sub::first-letter{text-transform:uppercase;}
  body.sq-shell .sqpair .sqtiles,body.sq-shell .sqpair .sqwall.am .sqtiles{display:block;margin:22px 0 0;counter-reset:sqrow;}
  body.sq-shell .sqpair .sqtile{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:baseline;margin:0;padding:20px 4px 20px 0;
    border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none;transform:none;overflow:visible;
    font:600 18px/1.3 var(--disp);letter-spacing:-.01em;color:var(--hi);}
  body.sq-shell .sqpair .sqtile:last-child{border-bottom:1px solid var(--line);}
  body.sq-shell .sqpair .sqtile:hover{transform:none;box-shadow:none;border-color:var(--line);}
  body.sq-shell .sqpair .sqtile::before{content:counter(sqrow,decimal-leading-zero);counter-increment:sqrow;position:static;grid-row:1 / span 3;
    width:auto;height:auto;background:none;box-shadow:none;font:600 11px/1.6 var(--disp);letter-spacing:.08em;color:var(--plum-bright);}
  body.sq-shell .sqpair .sqtile.minus::before{color:var(--amber-bright);background:none;box-shadow:none;}
  body.sq-shell .sqpair .sqtile > *{grid-column:2;}
  body.sq-shell .sqpair .sqtile .sqwhy{margin:8px 0 0;font:400 15px/1.6 var(--sans);color:var(--ink-soft);}
  body.sq-shell .sqpair .sqtile .sqmore-btn{padding-top:8px;}

  /* HOW YOU WORK: four cards, two by two. */
  body.sq-shell .sqdepth .sqtwo{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
  body.sq-shell .sqdepth .sqtwo .sqp{display:flex;flex-direction:column;padding:28px 28px 26px;}
  body.sq-shell .sqdepth .sqtwo .sqp .movelabel{margin:0 0 14px;}
  /* GROWTH: the development card carries the amber of the cost. */
  body.sq-shell .sqgrowth3 .dev{border-color:rgba(210,149,74,.38);}
  /* RECOMMENDATIONS: numbered rows. */
  body.sq-shell .sqrecs ol{display:block;}
  body.sq-shell .sqrecs ol li{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:baseline;padding:22px 0;margin:0;
    border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none;font-size:16.5px;color:var(--ink-soft);}
  body.sq-shell .sqrecs ol li:first-child{border-top:1px solid var(--line);}
  body.sq-shell .sqrecs ol li::before{content:counter(sqrec,decimal-leading-zero);font-size:20px;}
  body.sq-shell [data-view="snapshot"] .sqsec > .eyebrow{margin-left:12px;vertical-align:middle;}

  /* THE NEXT STEP, at the foot of every page of the path. */
  @keyframes sqnextin{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
  .sqnext{animation:sqnextin .6s var(--ease) both;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"track track" "body acts";gap:28px 36px;align-items:end;
    margin:72px 0 0;padding:30px 34px 32px;border:1px solid rgba(162,78,129,.45);border-radius:var(--r-card);
    background:linear-gradient(120deg,rgba(162,78,129,.2),rgba(210,149,74,.06) 58%,rgba(162,78,129,.02)),var(--glass);}
  .sqnext-track{grid-area:track;display:flex;margin:0;padding:0 0 22px;list-style:none;border-bottom:1px solid var(--line);}
  .sqnext-track li{margin:0;padding:0;border:0;background:none;box-shadow:none;}
  .sqnext-track li::before{display:none;content:none;}
  .sqnext-track li{flex:1;display:flex;align-items:center;gap:10px;min-width:0;font:600 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
  .sqnext-track li:not(:last-child)::after{content:"";flex:1;height:1px;margin:0 12px 0 4px;background:var(--line);}
  .sqnext-dot{flex:none;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--line-hard);}
  .sqnext-track li.done{color:var(--ink-soft);}
  .sqnext-track li.done .sqnext-dot{background:var(--plum);border-color:var(--plum);box-shadow:0 0 8px rgba(162,78,129,.6);}
  .sqnext-track li.next{color:var(--hi);}
  .sqnext-track li.next .sqnext-dot{border-color:var(--amber-bright);background:rgba(210,149,74,.25);box-shadow:0 0 10px rgba(224,174,114,.8);}
  .sqnext-body{grid-area:body;min-width:0;}
  .sqnext-body .eyebrow{color:var(--amber-bright);}
  .sqnext-title{margin:10px 0 8px;font:700 clamp(28px,3vw,38px)/1.08 var(--disp);letter-spacing:-.03em;color:var(--hi);}
  .sqnext-status{margin:0;font:600 11px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-bright);}
  .sqnext-copy{margin:12px 0 0;max-width:60ch;font:400 16.5px/1.6 var(--sans);color:var(--ink-soft);}
  .sqnext-acts{grid-area:acts;}

  /* CALIBRATE, in the drawer */
  .sqcal h2{margin:12px 0 12px;font:700 34px/1.1 var(--disp);letter-spacing:-.03em;color:var(--hi);}
  .sqcal-lede{margin:0;font:400 16px/1.7 var(--sans);color:var(--ink-soft);}
  .sqcal-pick{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;}
  .sqcal-pick button{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--glass);cursor:pointer;
    font:600 12.5px/1 var(--disp);color:var(--ink-soft);}
  .sqcal-pick button[aria-checked="true"]{color:var(--hi);border-color:rgba(162,78,129,.6);background:rgba(162,78,129,.18);}
  .sqcal-quote{margin:24px 0 16px;padding:4px 0 4px 20px;border-left:2px solid var(--plum-bright);}
  .sqcal-quote span{display:block;font:600 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-bright);}
  .sqcal-quote b{display:block;margin:12px 0 6px;font:600 16px/1.35 var(--disp);color:var(--ink);}
  .sqcal-quote p{margin:0;font:400 15px/1.65 var(--sans);color:var(--ink-soft);}
}

@media screen and (max-width:1150px){ .sqsecnav-note{display:none;} }
@media screen and (max-width:899px){
  body.sq-shell .sqaha.sqherocard{grid-template-columns:minmax(0,1fr);gap:0;min-height:0;}
  body.sq-shell .sqaha.sqherocard > .sqhero-id{order:0;}
  body.sq-shell .sqaha .archetype{font-size:clamp(44px,13.5vw,60px);}
  body.sq-shell .sqaha .sqlead{font-size:17px;}
  .sqreadpanel{grid-template-columns:minmax(0,1fr);gap:16px;padding:22px;margin-bottom:32px;}
  .sqrp-index{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:0 0 16px;border-right:0;border-bottom:1px solid var(--line);}
  .sqrp-index .eyebrow{width:100%;}
  .sqrp-name{margin:0;font-size:22px;}
  .sqrp-lean{margin-left:auto;}
  .sqrp-fit{justify-self:start;padding:0;}
  .sqsecnav{justify-content:space-between;gap:16px;}
  body.sq-shell [data-view="snapshot"] [data-pf="core"]{grid-template-columns:minmax(0,1fr);}
  body.sq-shell [data-view="snapshot"] [data-pf="core"] > #sqsec-overview,
  body.sq-shell [data-view="snapshot"] [data-pf="core"] > .sqessence{grid-column:1;}
  body.sq-shell [data-view="snapshot"] [data-pf="core"] > .sqessence{margin-top:18px;}
  body.sq-shell [data-view="snapshot"] [data-pf="core"] > #sqsec-overview{font-size:26px;margin-top:32px;}
  body.sq-shell [data-view="snapshot"] .sqpair{display:block;}
  body.sq-shell .sqdepth .sqtwo{grid-template-columns:minmax(0,1fr);}
  .sqnext{grid-template-columns:minmax(0,1fr);grid-template-areas:"track" "body" "acts";gap:22px;padding:24px 22px;}
  .sqnext-track li span:not(.sqnext-dot):not(.vh){display:none;}
  .sqnext-track li.next span:not(.sqnext-dot):not(.vh){display:inline;}
}
/* Deep Read's header lines up with the activities under it. */
body.sq-shell [data-view="deeper"] .sqdeep-hero{padding-left:0;padding-right:0;}
@media (prefers-reduced-motion:reduce){ .sqsecnav button,.sqbrand-acts .bell{transition:none;} .sqnext{animation:none;} }
@media print{
  .sqcalib,.sqsecnav,.sqtop,.sqfoot,.sqreadpanel,.sqnext,.sqhero-acts,.sqhero-note,.sqwall-n,.sqwall-sub,.sqshape-head{display:none !important;}
}

/* ============================================================
   THE FIRST-VISIT TOUR (Anthem, 2026-09-24; snapshot.js SQTour).
   A spotlight on the real element and a card beside it, in the
   drawer's own surface (--elev, one hairline, --r), the plum glow the
   hero card uses, and the path's amber for where you are. Docked to the
   bottom on a phone. Above everything, because it is the only thing
   the person should be looking at while it runs.
   ============================================================ */
/* Modal, as it is announced (aria-modal): the dimmed page takes no clicks
   while the tour runs; only the card does. */
.sqtour{position:fixed;inset:0;z-index:90;pointer-events:auto;}
.sqtour.out{pointer-events:none;}
.sqtour-spot{position:fixed;border-radius:var(--r);pointer-events:none;
  box-shadow:0 0 0 9999px rgba(4,3,7,.68),0 0 0 1px rgba(184,96,145,.75),0 0 36px rgba(162,78,129,.45);
  transition:left .38s var(--ease),top .38s var(--ease),width .38s var(--ease),height .38s var(--ease),opacity .25s var(--ease);}
[data-theme="light"] .sqtour-spot{box-shadow:0 0 0 9999px rgba(36,28,41,.45),0 0 0 1px rgba(162,78,129,.8),0 0 30px rgba(162,78,129,.35);}
.sqtour.centered .sqtour-spot{box-shadow:0 0 0 9999px rgba(4,3,7,.72);}
[data-theme="light"] .sqtour.centered .sqtour-spot{box-shadow:0 0 0 9999px rgba(36,28,41,.5);}
.sqtour-card{position:fixed;width:min(380px,calc(100vw - 24px));pointer-events:auto;padding:22px 24px 20px;
  background:var(--elev);border:1px solid rgba(162,78,129,.45);border-radius:var(--r-card);
  box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 40px rgba(162,78,129,.12);
  opacity:0;transform:translateY(8px);transition:opacity .28s var(--ease),transform .28s var(--ease),left .38s var(--ease),top .38s var(--ease);}
.sqtour.in .sqtour-card{opacity:1;transform:none;}
.sqtour.out .sqtour-card,.sqtour.out .sqtour-spot{opacity:0;}
.sqtour.centered .sqtour-card{left:50% !important;top:50% !important;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 24px));padding:28px 30px 24px;}
.sqtour.docked .sqtour-card{left:12px !important;right:12px;bottom:12px;top:auto !important;width:auto;}
.sqtour-top{display:flex;align-items:center;gap:10px;}
.sqtour-mark{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle,rgba(162,78,129,.28),rgba(162,78,129,0) 70%);transition:width .3s var(--ease),height .3s var(--ease);}
.sqtour-mark img{width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(224,174,114,.55));}
.sqtour.first .sqtour-mark{width:64px;height:64px;}
.sqtour.first .sqtour-mark img{width:50px;height:50px;animation:sqstarin 1.1s var(--ease) both;}
@keyframes sqstarin{from{opacity:0;transform:scale(.6) rotate(-30deg);}to{opacity:1;transform:none;}}
.sqtour-who{display:flex;flex-direction:column;gap:4px;min-width:0;}
.sqtour-who b{font:700 14px/1 var(--disp);color:var(--hi);letter-spacing:-.01em;}
.sqtour-top .eyebrow{font-size:10px;color:var(--amber-bright);}
.sqnext-kick{display:flex;align-items:center;gap:8px;}
.sqnext-mark{width:18px;height:18px;filter:drop-shadow(0 0 6px rgba(224,174,114,.6));}
.sqtour-skip{margin-left:auto;min-height:32px;padding:0 2px;border:0;background:none;cursor:pointer;font:600 12px/1 var(--disp);color:var(--ink-faint);}
.sqtour-skip:hover{color:var(--ink);}
.sqtour-card h2{margin:14px 0 8px;font:700 24px/1.15 var(--disp);letter-spacing:-.025em;color:var(--hi);}
.sqtour.centered .sqtour-card h2{font-size:30px;}
.sqtour-status{margin:0 0 6px;font:600 11px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-bright);}
.sqtour-card p#sqTourB{margin:0;font:400 15px/1.6 var(--sans);color:var(--ink-soft);}
.sqtour-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;flex-wrap:wrap;}
.sqtour-dots{display:flex;gap:6px;}
.sqtour-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-hard);transition:background .2s var(--ease),width .2s var(--ease);}
.sqtour-dots i.done{background:var(--plum);}
.sqtour-dots i.on{width:18px;border-radius:999px;background:linear-gradient(90deg,var(--plum-bright),var(--amber-bright));box-shadow:0 0 8px rgba(224,174,114,.55);}
.sqtour-acts{display:flex;align-items:center;gap:10px;margin-left:auto;}
.sqtour-acts .primary{display:inline-flex;align-items:center;gap:8px;}
.sqtour button:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
.sqtour.centered .sqtour-card{width:min(540px,calc(100vw - 24px));}
.sqtour.last .sqtour-dots{width:100%;}
.sqtour.last .sqtour-acts{width:100%;justify-content:flex-end;flex-wrap:wrap;}
.sqtour-acts button{white-space:nowrap;}
.help-tour{margin:10px 0 4px;}
@media (prefers-reduced-motion:reduce){ .sqtour-spot,.sqtour-card,.sqtour-dots i,.sqtour-mark{transition:none;} .sqtour.first .sqtour-mark .sqmark{animation:none;} }
@media print{ .sqtour{display:none !important;} }

/* ============================================================
   COMPASS'S MARK (Anthem, 2026-09-24; pulse.js SQMark). The bar's Q
   as a vector, with Compass in it. On the corner button it sits on a
   plum tile in the app's radius, with the ordinary elevation shadow and
   a colour step on hover: no bloom, no halo, no scale-up. Bare in the
   panel header and the tour. The needle may swing once, only when the
   sandbox toggle is on (?needle=on) and motion is allowed.
   ============================================================ */
.sqmark{display:block;width:100%;height:100%;overflow:visible;}
.cmp-fab.sqm-tile{width:56px;height:56px;padding:11px;border-radius:var(--r);background:var(--plum);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 32px rgba(0,0,0,.34);transition:background .16s var(--ease),opacity .2s ease;}
.cmp-fab.sqm-tile:hover{background:var(--plum-bright);}
.cmp-fab.sqm-tile:focus-visible{outline:2px solid var(--plum-bright);outline-offset:3px;}
.cmp-fab.sqm-tile.hide{transform:none;}
.cmp-mark.sqm-bare{width:26px;height:26px;}
.sqtour-mark .sqmark{width:28px;height:28px;}
.sqtour.first .sqtour-mark .sqmark{width:46px;height:46px;animation:sqstarin 1.1s var(--ease) both;}
.sqnext-mark.sqmark,.sqnext-kick .sqmark{width:18px;height:18px;display:inline-block;}
@keyframes sqmswing{0%{transform:rotate(0)}30%{transform:rotate(-14deg)}58%{transform:rotate(8deg)}80%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
.sqm-needle.sqm-swing{animation:sqmswing .95s var(--ease) both;transform-box:view-box;}
@media (prefers-reduced-motion:reduce){ .sqm-needle.sqm-swing{animation:none;} }
@media screen and (max-width:899px){ .cmp-fab.sqm-tile{width:52px;height:52px;padding:10px;} }

/* COMPASS'S HELLO (app.js cmpHiShow): a bubble to the left of the button,
   in the drawer's surface, with a small tail pointing at the Q. */
.cmp-hi{position:fixed;right:92px;bottom:30px;z-index:31;max-width:270px;padding:12px 16px 13px;pointer-events:none;
  background:var(--elev);border:1px solid rgba(162,78,129,.42);border-radius:var(--r-card);box-shadow:0 14px 40px rgba(0,0,0,.35);
  opacity:0;transform:translateX(8px);transition:opacity .2s var(--ease),transform .2s var(--ease);}
.cmp-hi.in{opacity:1;transform:none;}
.cmp-hi::after{content:"";position:absolute;right:-6px;bottom:18px;width:10px;height:10px;background:var(--elev);
  border-right:1px solid rgba(162,78,129,.42);border-top:1px solid rgba(162,78,129,.42);transform:rotate(45deg);}
.cmp-hi b{display:block;font:700 14px/1.25 var(--disp);letter-spacing:-.01em;color:var(--hi);}
.cmp-hi span{display:block;margin-top:4px;font:400 13.5px/1.5 var(--sans);color:var(--ink-soft);}
@media screen and (max-width:899px){ .cmp-hi{right:80px;bottom:24px;} }
@media (prefers-reduced-motion:reduce){ .cmp-hi{transition:none;transform:none;} }
@media print{ .cmp-hi{display:none !important;} }

/* ============================================================
   THE PAIR PANEL (Anthem, 2026-09-24; dyad.js openPanel). A colleague
   chosen on Dyads opens beside the room in the console's drawer, wider
   than the default so the read has room, the whole screen on a phone.
   The head names the pair and where it stands; everything under it is
   the page's own blocks, unchanged.
   ============================================================ */
.drawer.sqpair{width:min(640px,94vw);padding:34px 34px 48px;}
.drawer.sqpair.wide{width:min(1100px,100vw);}
@media screen and (max-width:640px){ .drawer.sqpair{width:100vw;padding:26px 18px 40px;} }
.dyp-head{padding:6px 0 4px;margin:0;}
.dyp-head .pair{margin:0 0 16px;}
.dyp-head .kick{margin:0;font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.dyp-role{letter-spacing:.08em;}
.dyp-head .dyp-rel{margin:12px 0 0;font:700 clamp(24px,3vw,30px)/1.15 var(--disp);letter-spacing:-.025em;color:var(--hi);}
.dyp-title{margin:0;font:700 clamp(28px,3.4vw,36px)/1.08 var(--disp);letter-spacing:-.03em;color:var(--hi);}
.dyp-sub{margin:6px 0 0;font:500 14px/1.4 var(--sans);color:var(--ink-faint);}
.dyp-body .block{text-align:left !important;}
.dyp-body .block > *{margin-left:0 !important;margin-right:0 !important;text-align:left !important;}
.dyp-state{margin:10px 0 0;font:600 12.5px/1.4 var(--sans);color:var(--plum-bright);}
.dyp-body > .block:first-child{margin-top:18px;}
.dyp-body .block{padding-left:0;padding-right:0;}
.dyp-detail{margin:-2px 0 12px;padding:18px 20px;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-card) var(--r-card);background:var(--field);}
.dyp-detail .archetype{font-size:22px !important;}
/* The rows say they open something. */
.dyrow-end{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0;}
.dyrow-go{flex:none;width:16px;height:16px;color:var(--ink-faint);transition:color .16s var(--ease),transform .16s var(--ease);}
.benchrow:hover .dyrow-go,.benchrow:focus-visible .dyrow-go{color:var(--plum-bright);transform:translateX(2px);}
@media (max-width:560px){ .benchrow.trio .dyrow-end{grid-column:2;grid-row:1 / span 2;} }
@media (prefers-reduced-motion:reduce){ .dyrow-go{transition:none;} }
.node.picked .ring{stroke-opacity:1;stroke-width:2.6;stroke:var(--amber-bright);}
.node.picked .nm{fill:var(--ink);}
.dyp-body .cgrow svg{transition:transform .18s var(--ease);}
.dyp-body .cgrow[aria-expanded="true"] svg{transform:rotate(90deg);}
@media (prefers-reduced-motion:reduce){ .dyp-body .cgrow svg{transition:none;} }

/* THE PROFILE MENU (app.js sqPMenu), under the Profile tab itself. The tab
   and its arrow read as one row; the options drop down inside the rail on a
   wide screen, nested under Profile, and under the strip on a phone. */
.sqnav-group{position:relative;display:flex;align-items:stretch;min-width:0;}
.sqnav-group > .sub{flex:1 1 auto;min-width:0;}
.sqpmenu-btn{flex:none;display:grid;place-items:center;width:40px;border:1px solid transparent;border-radius:var(--r);background:none;cursor:pointer;
  color:var(--ink-faint);transition:color .16s var(--ease),background .16s var(--ease);}
.sqpmenu-btn svg{width:16px;height:16px;transition:transform .2s var(--ease);}
.sqpmenu-btn:hover{color:var(--ink);background:var(--glass);}
.sqpmenu-btn[aria-expanded="true"]{color:var(--plum-bright);}
.sqpmenu-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.sqpmenu-btn:focus-visible{outline:2px solid var(--plum-bright);outline-offset:-2px;}
.sqpmenu-list[hidden]{display:none;}
.sqpmenu-list [role="menuitem"]{display:flex;align-items:flex-start;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:var(--r);background:none;
  cursor:pointer;text-align:left;color:var(--ink);white-space:normal;}
.sqpmenu-list [role="menuitem"]:hover,.sqpmenu-list [role="menuitem"]:focus{background:var(--glass-2);outline:none;}
.sqpmenu-list [role="menuitem"]:focus-visible{outline:2px solid var(--plum-bright);outline-offset:-2px;}
.sqpmenu-list .navi{display:block;flex:none;width:18px;height:18px;margin-top:1px;color:var(--plum-bright);}
.sqpmenu-list b{display:block;font:600 13.5px/1.3 var(--disp);color:var(--hi);}
.sqpmenu-list small{display:block;margin-top:2px;font:400 12px/1.4 var(--sans);color:var(--ink-faint);}
.sqpmenu-sep{height:1px;margin:6px 4px;background:var(--line);}
.sqpmenu-kick{margin:8px 12px 4px;font:600 10px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.sqpmenu-note{margin:6px 12px 6px;font:400 11px/1.45 var(--sans);color:var(--ink-faint);}
@media screen and (min-width:900px){
  body.sq-shell #chrome .sqnav-group{order:1;}
  body.sq-shell #chrome .sqpmenu-list{order:1;}
  /* The row is one button to the eye: the active fill spans the tab and its arrow. */
  body.sq-shell #chrome .sqnav-group:has(.sub.active){background:rgba(162,78,129,.15);box-shadow:inset 0 0 0 1px rgba(162,78,129,.42);border-radius:var(--r);}
  body.sq-shell #chrome .sqnav-group .sub.active{background:none;border-color:transparent;}
  body.sq-shell #chrome .sqnav-group .sqpmenu-btn{height:50px;}
  /* Nested under Profile, indented to its label, a hairline down the left. */
  body.sq-shell #chrome .sqpmenu-list{margin:2px 0 6px 22px;padding:4px 0 4px 10px;border-left:1px solid var(--line);}
}
@media screen and (max-width:899px){
  body.sq-shell #chrome .sqnav-group{order:1;flex:none;}
  body.sq-shell #chrome .sqnav-group:has(.sub.active){background:rgba(162,78,129,.15);box-shadow:inset 0 0 0 1px rgba(162,78,129,.42);border-radius:var(--r);}
  body.sq-shell #chrome .sqnav-group .sub.active{background:none;border-color:transparent;}
  body.sq-shell #chrome .sqnav-group .sqpmenu-btn{width:34px;min-height:44px;}
  body.sq-shell #chrome nav{position:sticky;top:0;z-index:20;}
  body.sq-shell #chrome .sqpmenu-list{position:absolute;top:100%;left:12px;right:12px;z-index:30;margin-top:6px;padding:8px;background:var(--elev);
    border:1px solid var(--line);border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.45);}
}
@media (prefers-reduced-motion:reduce){ .sqpmenu-btn,.sqpmenu-btn svg{transition:none;} }
@media print{ .sqpmenu-list,.sqpmenu-btn{display:none !important;} }
/* THE SPACE SWITCHER (spaces, 2026-10-12, Marcus; js/space.js), drawn only for
   somebody in two or more spaces. For everybody else the element does not
   exist and nothing here applies.

   REDRAWN THE SAME DAY (Marcus: "the design of the switcher is awful ... the
   look and feel is like music to us"). The first one was a form field: a
   boxed control, a 9px "SPACE" label, a stock up-down chevron, a flat menu
   with a hairline. This one is built from the rail's own vocabulary:

   - THE TRIGGER IS AN IDENTITY, not a control: unboxed at rest, like the
     account row at the foot of the rail. The space's mark, its name in Sora,
     a quiet line under it (your role, how many people), one chevron that
     turns when the menu opens. Hover is the nav's glass; open is the nav's
     active plum.
   - THE MARK IS MADE, not a placeholder. A logo sits on its own white tile,
     inset, so any logo reads on any world. Without one, a monogram on one of
     three gradients built ONLY from the accent and second-hue tokens
     (--plum*, --amber*), which every theme remaps, picked from the space's
     id so a space keeps its colour, with a top highlight. Never --rose: it
     is semantic and build_themes.py leaves it pink in every world.

   THEMES: every css/theme-*.css is generated from this file. After ANY
   change here, run `python3 build_themes.py`, or people on another theme
   get none of it (2026-10-12: the switcher shipped unstyled for them).
   - THE MENU IS LIFTED, Anthem's recipe from the account menu and the More
     sheet (2026-10-04): gradient, top highlight, deep shadow, plum glow,
     18px radius. Rows light with the plum wash; the space you are in carries
     the inset plum bar. Names wrap instead of being cut. It opens with a
     short rise, from where it was pressed.
   - CHANGING SPACE IS A MOMENT. The page dims and blurs, the new space's
     mark rises into the middle with its name, and the console starts again
     inside it. On a phone the menu is a sheet from the bottom, like More. */
.sqspace,.sqspace-back,.sqspace-go{display:none;}
body.sq-shell .sqspace{display:block;position:relative;min-width:0;}

/* ── the mark ─────────────────────────────────────────────────────────── */
.sqspace-mark{--m:34px;flex:none;position:relative;width:var(--m);height:var(--m);display:grid;place-items:center;overflow:hidden;
  border-radius:calc(var(--m) * .3);color:#fff;font:700 calc(var(--m) * .36)/1 var(--disp);letter-spacing:.01em;
  background:linear-gradient(145deg,var(--plum-bright),var(--plum-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.07),0 6px 16px -8px rgba(162,78,129,.75);}
.sqspace-mark[data-hue="1"]{background:linear-gradient(145deg,var(--amber-bright),var(--plum));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.07),0 6px 16px -8px rgba(210,149,74,.7);}
.sqspace-mark[data-hue="2"]{background:linear-gradient(145deg,var(--amber),var(--plum-deep));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.07),0 6px 16px -8px rgba(230,169,201,.6);}
.sqspace-mark b{font:inherit;text-shadow:0 1px 2px rgba(40,10,30,.35);}
.sqspace-mark.has{background:#fff;box-shadow:inset 0 0 0 1px rgba(36,28,41,.08),0 6px 16px -10px rgba(0,0,0,.6);}
.sqspace-mark img{display:block;width:78%;height:78%;object-fit:contain;}

/* ── the trigger ──────────────────────────────────────────────────────── */
.sqspace-btn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;width:100%;
  padding:9px 10px 9px 9px;border:1px solid transparent;border-radius:12px;background:none;color:var(--ink);
  cursor:pointer;text-align:left;font:inherit;
  transition:background .18s var(--ease),border-color .18s var(--ease);}
.sqspace-btn:hover{background:var(--glass);}
.sqspace-btn[aria-expanded="true"]{background:rgba(162,78,129,.13);border-color:rgba(162,78,129,.36);}
.sqspace-btn:focus{outline:none;}
.sqspace-btn:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
.sqspace-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.sqspace-txt b{font:600 14px/1.25 var(--disp);letter-spacing:-.005em;color:var(--hi);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sqspace-txt small{font:500 11.5px/1.3 var(--sans);color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sqspace-chev{width:16px;height:16px;color:var(--ink-faint);transition:transform .22s var(--ease),color .18s var(--ease);}
.sqspace-btn:hover .sqspace-chev{color:var(--ink);}
.sqspace-btn[aria-expanded="true"] .sqspace-chev{transform:rotate(180deg);color:var(--plum-bright);}

/* ── the menu ─────────────────────────────────────────────────────────── */
.sqspace-menu{position:fixed;top:0;left:0;z-index:60;width:312px;padding:10px;border-radius:18px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),var(--elev);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 80px -20px rgba(0,0,0,.9),0 0 90px -30px rgba(162,78,129,.6);
  transform-origin:24px 0;animation:sqspace-in .2s var(--ease) both;}
.sqspace-menu[hidden]{display:none;}
@keyframes sqspace-in{from{opacity:0;transform:translateY(-6px) scale(.97);}to{opacity:1;transform:none;}}
.sqspace-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:8px 10px 10px;}
.sqspace-head span{font:600 10.5px/1 var(--disp);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-faint);}
.sqspace-head em{font:500 11.5px/1 var(--sans);font-style:normal;color:var(--ink-faint);}
.sqspace-list{display:flex;flex-direction:column;gap:4px;}
.sqspace-menu [role="menuitemradio"]{display:grid;grid-template-columns:auto minmax(0,1fr) 20px;align-items:center;column-gap:12px;width:100%;
  padding:10px 12px 10px 10px;border:0;border-radius:12px;background:none;color:var(--ink);cursor:pointer;text-align:left;font:inherit;
  transition:background .15s ease,box-shadow .15s ease;}
.sqspace-menu [role="menuitemradio"] .sqspace-mark{--m:38px;}
.sqspace-menu [role="menuitemradio"]:hover,.sqspace-menu [role="menuitemradio"]:focus{background:rgba(162,78,129,.14);outline:none;}
.sqspace-menu [role="menuitemradio"]:focus-visible{box-shadow:inset 0 0 0 2px var(--plum-bright);}
.sqspace-menu [aria-checked="true"]{background:rgba(162,78,129,.16);box-shadow:inset 2px 0 0 var(--plum-bright);}
.sqspace-row{display:flex;flex-direction:column;gap:3px;min-width:0;}
.sqspace-row b{font:600 14px/1.3 var(--disp);color:var(--ink);overflow-wrap:break-word;}
.sqspace-menu [aria-checked="true"] .sqspace-row b{color:var(--hi);}
.sqspace-row small{font:400 12px/1.35 var(--sans);color:var(--ink-faint);}
.sqspace-check{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--plum-bright);color:#fff;
  box-shadow:0 0 0 4px rgba(162,78,129,.18);}
.sqspace-check svg{width:12px;height:12px;}
.sqspace-foot{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;padding:12px 10px 4px;border-top:1px solid var(--line);
  font:400 12px/1.55 var(--sans);color:var(--ink-faint);}
.sqspace-foot svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--plum-bright);opacity:.8;}

/* ── changing space ───────────────────────────────────────────────────── */
.sqspace-go{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(6,4,11,.72);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  animation:sqspace-fade .22s ease both;}
.sqspace-go[hidden]{display:none;}
.sqspace-go-in{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:0 24px;}
.sqspace-go-in .sqspace-mark{margin-bottom:16px;}
.sqspace-go .sqspace-mark{--m:76px;border-radius:24px;animation:sqspace-rise .5s var(--ease) both;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 60px -18px rgba(162,78,129,.9),0 0 0 10px rgba(162,78,129,.10);}
.sqspace-go .sqspace-mark.has{box-shadow:0 24px 60px -18px rgba(0,0,0,.8),0 0 0 10px rgba(255,255,255,.06);}
.sqspace-go small{font:600 10.5px/1 var(--disp);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-faint);
  animation:sqspace-rise .5s .06s var(--ease) both;}
.sqspace-go b{font:600 26px/1.15 var(--disp);letter-spacing:-.02em;color:var(--hi);max-width:520px;
  animation:sqspace-rise .5s .1s var(--ease) both;}
@keyframes sqspace-fade{from{opacity:0;}to{opacity:1;}}
@keyframes sqspace-rise{from{opacity:0;transform:translateY(10px) scale(.94);}to{opacity:1;transform:none;}}

/* ── desktop: under the mark, above the path ──────────────────────────── */
@media screen and (min-width:900px){
  body.sq-shell .sqspace{flex:none;margin:22px 0 0;}
  body.sq-shell #chrome nav.sq-hasspace .sqrail-kick{margin-top:34px;}
}
/* ── phone: a row under the header, and the menu is a sheet ────────────── */
@media screen and (max-width:899px){
  body.sq-shell #chrome nav.sq-hasspace{grid-template-areas:"brand acct" "space space" "tabs tabs";}
  body.sq-shell .sqspace{grid-area:space;margin:6px 0 8px;}
  .sqspace-btn{padding:8px 10px 8px 8px;}
  .sqspace-btn .sqspace-mark{--m:30px;}
  .sqspace-txt b{-webkit-line-clamp:1;}
  .sqspace-back{position:fixed;inset:0;z-index:68;display:block;background:rgba(4,2,8,.66);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:sqspace-fade .2s ease both;}
  .sqspace-back[hidden]{display:none;}
  .sqspace-menu{position:fixed;top:auto;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:69;width:auto;
    padding:12px;border-radius:22px;transform-origin:50% 100%;animation:sqspace-sheet .28s var(--ease) both;}
  .sqspace-menu [role="menuitemradio"]{min-height:60px;}
  @keyframes sqspace-sheet{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
}

/* ── light ────────────────────────────────────────────────────────────── */
[data-theme="light"] .sqspace-menu{border-color:var(--line);background:var(--elev);box-shadow:0 30px 80px -24px rgba(36,28,41,.5);}
[data-theme="light"] .sqspace-mark.has{box-shadow:inset 0 0 0 1px rgba(36,28,41,.12),0 6px 16px -10px rgba(36,28,41,.4);}
[data-theme="light"] .sqspace-go{background:rgba(244,241,235,.78);}
[data-theme="light"] .sqspace-back{background:rgba(36,28,41,.35);}

@media (prefers-reduced-motion:reduce){
  .sqspace-btn,.sqspace-chev,.sqspace-menu [role="menuitemradio"]{transition:none;}
  .sqspace-menu,.sqspace-go,.sqspace-go *,.sqspace-back{animation:none !important;}
}
@media print{ .sqspace,.sqspace-go,.sqspace-back{display:none !important;} }
/* The path's "Next" is drawn, not written: the button's own text stays exactly its label. */
body.sq-shell .navbadge.next::after{content:"Next";}

/* THE PAIR'S SHAPE (dyad.js pairShapeHtml). Five arcs, one per domain of the
   pair's own read, plum where it says click and amber where it says grind;
   the two of them as overlapping rings in the middle. An outline until the
   read is written. */
.dyp-shape{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:8px 26px;align-items:center;margin:14px 0 6px;padding:18px 18px 18px 8px;
  border:1px solid rgba(162,78,129,.3);border-radius:var(--r-card);background:linear-gradient(120deg,rgba(162,78,129,.12),rgba(210,149,74,.05) 60%,transparent),var(--glass);}
.dyp-shape-fig svg{display:block;width:100%;height:auto;overflow:visible;}
.dyp-arc-line{fill:none;stroke-width:17;stroke-linecap:butt;transition:stroke-width .18s var(--ease),filter .18s var(--ease);}
.dyp-arc-hit{fill:none;stroke:transparent;stroke-width:40;}
.dyp-arc.click .dyp-arc-line{stroke:var(--plum-bright);}
.dyp-arc.grind .dyp-arc-line{stroke:var(--amber);}
.dyp-arc.none .dyp-arc-line{stroke:var(--line-hard);stroke-width:2;stroke-dasharray:3 5;}
.dyp-arc text{font:600 10.5px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;fill:var(--ink-soft);}
.dyp-arc.click text{fill:var(--plum-bright);} .dyp-arc.grind text{fill:var(--amber-bright);} .dyp-arc.none text{fill:var(--ink-faint);}
.dyp-arc[data-arc]{cursor:pointer;outline:none;}
.dyp-arc[data-arc]:hover .dyp-arc-line,.dyp-arc[data-arc]:focus-visible .dyp-arc-line{stroke-width:21;}
.dyp-arc[data-arc]:focus-visible text{text-decoration:underline;}
.dyp-you{fill:none;stroke:var(--plum-bright);stroke-width:2;}
.dyp-them{fill:none;stroke:var(--amber-bright);stroke-width:2;}
.dyp-shape.empty .dyp-you,.dyp-shape.empty .dyp-them{stroke:var(--ink-faint);}
.dyp-shape-copy .eyebrow{color:var(--amber-bright);}
.dyp-shape-sum{margin:8px 0 0;font:500 16px/1.5 var(--sans);color:var(--ink);}
.dyp-shape.empty .dyp-shape-sum{font-size:14.5px;color:var(--ink-soft);}
.dyp-shape-key{display:flex;flex-direction:column;gap:6px;margin:14px 0 0;font:400 12.5px/1.4 var(--sans);color:var(--ink-faint);}
.dyp-shape-key span{display:flex;align-items:center;gap:8px;}
.dyp-shape-key .k{display:inline-block;flex:none;width:16px;height:4px;border-radius:2px;}
.dyp-shape-key .k.click{background:var(--plum-bright);} .dyp-shape-key .k.grind{background:var(--amber);}
@media screen and (max-width:640px){ .dyp-shape{grid-template-columns:minmax(0,1fr);padding:14px;} .dyp-shape-fig{max-width:250px;margin:0 auto;} }
@media (prefers-reduced-motion:reduce){ .dyp-arc-line{transition:none;} }

/* THE LOGO ROW (Anthem, 2026-09-25): the top bar is gone. Activity and the
   light/dark switch sit beside the logo in the main menu, and Activity's box
   slides out beside the bell wherever the bell is. */
.sqbrandrow{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;}
.sqbrand-acts{display:flex;align-items:center;gap:4px;flex:none;}
body.sq-shell .sqbrand-acts .themetoggle{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid transparent;border-radius:var(--r);
  background:none;color:var(--ink-soft);cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease);}
body.sq-shell .sqbrand-acts .themetoggle:hover{background:var(--glass);color:var(--ink);}
body.sq-shell .sqbrand-acts .themetoggle:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
body.sq-shell .sqbrand-acts .themetoggle svg{width:18px;height:18px;}
@media screen and (min-width:900px){
  body.sq-shell #chrome nav .sqbrandrow{flex:none;padding-right:2px;}
  body.sq-shell #chrome nav .sqbrandrow .qm{flex:0 1 auto;}
  body.sq-shell .sqbox{top:20px;left:calc(var(--rail) + 12px);right:auto;}
}
@media screen and (max-width:899px){
  body.sq-shell #chrome nav .sqbrandrow{grid-area:brand;}
  body.sq-shell .sqbox{top:64px;left:12px;right:12px;width:auto;}
}
/* The arrow sits after the Profile label: the rail's ordering rule orders the
   tab itself, so inside the row the arrow is put back after it. */
body.sq-shell #chrome .sqnav-group > .sub{order:0;}
body.sq-shell #chrome .sqnav-group > .sqpmenu-btn{order:2;}
@media screen and (min-width:900px){
  /* In the rail each option is its name only: the rail is narrow, and the
     descriptions stay in the phone's drop-down where there is room. */
  body.sq-shell #chrome .sqpmenu-list small,body.sq-shell #chrome .sqpmenu-list .sqpmenu-note{display:none;}
  body.sq-shell #chrome .sqpmenu-list [role="menuitem"]{align-items:center;padding:9px 10px;}
  body.sq-shell #chrome .sqpmenu-list b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body.sq-shell #chrome .sqpmenu-list .navi{margin-top:0;}
  body.sq-shell #chrome .sqpmenu-kick{margin:10px 10px 4px;}
}
/* One highlighted row, not two: the group carries the active fill, so the
   Profile tab inside it drops its own (this must out-rank the rail's rule). */
body.sq-shell #chrome nav .subnav .sqnav-group > .sub.active{background:none;border-color:transparent;box-shadow:none;}
@media screen and (min-width:900px){
  body.sq-shell #chrome .sqpmenu-list{margin:2px 0 6px 16px;padding:2px 0 2px 6px;}
  body.sq-shell #chrome .sqpmenu-list [role="menuitem"]{gap:10px;padding:9px 8px;}
  body.sq-shell #chrome .sqpmenu-kick{margin:10px 8px 4px;}
}
/* THE SHAPE, BIGGER (Anthem, 2026-09-25): with the caption and the privacy
   line gone, the figure takes its whole column. Even split on a wide screen;
   the full width of the page on a phone. */
@media screen and (min-width:900px){
  body.sq-shell .sqaha.sqherocard{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  body.sq-shell .sqherocard .sqshape{max-width:580px;width:100%;}
  body.sq-shell .sqherocard .sqshape-head{max-width:580px;}
}
@media screen and (max-width:899px){
  body.sq-shell .sqherocard .sqshape{max-width:none;width:100%;}
  body.sq-shell .sqherocard .sqshape-head{max-width:none;padding:0 4px;}
}

/* THE HERO, OPEN, IN A FRAME (Anthem, 2026-09-25: "all I want is a frame
   around it. That's it."). Everything about the open hero stays; it gains
   only the live card's border and corner radius, and room inside them. */
body.sq-shell .sqherocard:not(.sqcarding){border:1px solid rgba(162,78,129,.45);border-radius:22px;background:none;box-shadow:none;cursor:default;padding:40px 44px 36px;}
body.sq-shell .sqherocard:not(.sqcarding):hover,body.sq-shell .sqherocard:not(.sqcarding):focus-within{border-color:rgba(162,78,129,.45);}
body.sq-shell .sqherocard:not(.sqcarding) .sqherocard-q{display:none;}
body.sq-shell .sqherocard:not(.sqcarding) .sqcust{position:absolute;top:auto;bottom:14px;right:20px;left:auto;}
@media screen and (max-width:899px){
  body.sq-shell .sqherocard:not(.sqcarding){padding:26px 20px 22px;border-radius:18px;}
  body.sq-shell .sqherocard:not(.sqcarding) .sqhero-shape{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);}
  body.sq-shell .sqherocard:not(.sqcarding) .sqcust{position:static;order:3;justify-self:start;margin-top:16px;padding-left:0;}
}
/* The frame's spacing: clear of the top of the page and of the reading panel,
   and the text column wide enough that the name keeps its two lines. */
@media screen and (min-width:900px){
  body.sq-shell .sqherocard:not(.sqcarding){margin:28px 0 22px;padding:36px 32px 34px 40px;}
  body.sq-shell .sqaha.sqherocard{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:28px;}
}
@media screen and (max-width:899px){
  body.sq-shell .sqherocard:not(.sqcarding){margin:18px 0 18px;}
}
/* The name scales with its own column inside the frame, so it keeps the
   two-line shape it had before the frame took a little of the width. */
body.sq-shell .sqherocard .sqhero-id{container-type:inline-size;}
body.sq-shell .sqherocard:not(.sqcarding) .sqhero-id .archetype{font-size:clamp(34px,15cqi,80px);}
/* "Customize card" in white (Anthem, 2026-09-25). --hi is white in the dark
   theme and the page's darkest ink in the light one, so it stays readable there. */
body.sq-shell .sqherocard .sqcust{color:var(--hi);}
/* The chosen reading's name matches the other five (Anthem, 2026-09-25: it
   stuck out too much). Same colour, same weight; the reading panel below
   already says which one is open. */
body.sq-shell .sqhero-shape .sqshape-label.lit{fill:var(--ink-faint);font-weight:600;}

/* The chosen reading: a plum bar under its name, and its point as the one
   amber dot with a ring. Names brighten under the pointer, so the shape reads
   as something to press. */
.sqhero-shape .sqshape-tick{fill:var(--plum-bright);transition:x .25s var(--ease),y .25s var(--ease),width .25s var(--ease);}
body.sq-shell .sqhero-shape .sqshape-label:hover,body.sq-shell .sqhero-shape .sqshape-label:focus-visible{fill:var(--ink);}
body.sq-shell .sqhero-shape .sqshape-dot.lit{r:8;fill:var(--amber-bright);stroke:var(--bg);stroke-width:2.5;filter:drop-shadow(0 0 8px var(--amber));}
body.sq-shell .sqhero-shape .sqshape-spoke.lit{stroke:var(--plum);stroke-width:1.5;filter:none;}
@media (prefers-reduced-motion:reduce){ .sqhero-shape .sqshape-tick{transition:none;} }

/* THE CHOSEN NAME GLOWS (Anthem, 2026-09-25: "give it a glow instead of
   changing the colour"). Same colour as the other five, lifted by a plum
   glow; the underline is retired. */
.sqhero-shape .sqshape-tick{display:none;}
body.sq-shell .sqhero-shape .sqshape-label.lit{fill:var(--ink-faint);filter:drop-shadow(0 0 5px var(--plum-bright)) drop-shadow(0 0 12px rgba(162,78,129,.8));}
/* THE CHOSEN READING, IN WHITE LIGHT (Anthem, 2026-09-25): no dark ring; the
   point is a white dot that glows, and its name is white and glows with it.
   --hi is white in the dark theme and the darkest ink in the light one. */
body.sq-shell .sqhero-shape .sqshape-dot.lit{r:7;fill:var(--hi);stroke:none;filter:drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 0 14px rgba(255,255,255,.45));}
body.sq-shell .sqhero-shape .sqshape-label.lit{fill:var(--hi);filter:drop-shadow(0 0 6px rgba(255,255,255,.75)) drop-shadow(0 0 14px rgba(255,255,255,.3));}
[data-theme="light"] body.sq-shell .sqhero-shape .sqshape-dot.lit,[data-theme="light"] body.sq-shell .sqhero-shape .sqshape-label.lit{filter:drop-shadow(0 0 6px rgba(162,78,129,.55));}
/* The chosen finish shows on the profile's card, open or customising: the
   frame's plain rule gives way to the finish's own field and border. */
body.sq-shell .sqherocard[data-finish="plum"]:not(.sqcarding){background:#2A1226;border-color:rgba(240,220,233,.35);}
body.sq-shell .sqherocard[data-finish="paper"]:not(.sqcarding){background:#F4EDE2;border-color:rgba(36,23,38,.28);}
body.sq-shell .sqherocard[data-finish="paper"] .sqlead,
body.sq-shell .sqherocard[data-finish="paper"] .sqhero-kick span{color:#241726;}
body.sq-shell .sqherocard[data-finish="paper"] .sqshape-label.lit{fill:#241726;filter:none;}
body.sq-shell .sqherocard[data-finish="paper"] .sqshape-dot.lit{fill:#8E3F6C;filter:none;}
body.sq-shell .sqherocard[data-finish="paper"] .sqcust{color:#241726;}
/* The plum finish is a dark card in either theme; in light the button took
   the theme's near-black highlight and vanished (Anthem, 2026-10-08:
   "Customize card disappears when going through the different modes"). */
body.sq-shell .sqherocard[data-finish="plum"] .sqcust{color:#F6F1F4;}
body.sq-shell .sqherocard[data-finish="plum"] .sqcust:hover{color:#EDB9D3;}
body.sq-shell .sqherocard[data-finish="plum"] .sqlead{color:#F6F1F4;}

/* ============================================================
   THE 360, REWORKED (Anthem, 2026-09-25; snapshot.js roomReportHtml).
   A framed hero like the profile's: the strongest finding on the left,
   the room's shape on the right. Then one list, one row per question,
   each tagged Aligned, Different or Split.
   ============================================================ */
.sq360-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;margin:28px 0 14px;padding:36px 32px 32px 40px;
  border:1px solid rgba(162,78,129,.45);border-radius:22px;}
.sq360-hero .kick{margin:0 0 18px;font:600 11px/1.4 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}
.sq360-hero .archetype{margin:0;font-size:clamp(34px,4.2vw,56px);line-height:1.04;letter-spacing:-.035em;max-width:none;}
.sq360-hero .archetype em{font-style:normal;background:linear-gradient(100deg,var(--hi),var(--plum-bright));-webkit-background-clip:text;background-clip:text;color:transparent;}
.sq360-lede{margin:18px 0 0;font:400 17px/1.6 var(--sans);color:var(--ink-soft);max-width:34em;}
.sq360-lede b{color:var(--ink);font-weight:600;}
.sq360-counts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;}
.sq360-counts span{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;font:600 12.5px/1 var(--disp);color:var(--ink-soft);}
.sq360-counts b{color:var(--hi);}
.sq360-counts .agree{border-color:rgba(162,78,129,.5);} .sq360-counts .gap{border-color:rgba(210,149,74,.55);}
.sq360-progress{margin:24px 0 0;} .sq360-progress .statbar{margin:0 0 10px;} .sq360-progress span{font:400 14px/1.5 var(--sans);color:var(--ink-faint);}
.sq360-progress b{color:var(--ink);}
/* The room's shape */
.rm-fig svg{display:block;width:100%;max-width:470px;margin:0 auto;height:auto;overflow:visible;}
.rm-ring{fill:none;stroke:var(--line);stroke-width:1;}
.rm-spoke{stroke:var(--line);stroke-width:1;}
.rm-poly{fill:rgba(162,78,129,.28);stroke:var(--plum-bright);stroke-width:2;stroke-linejoin:round;}
.rm-dot{stroke:var(--bg);stroke-width:2;cursor:pointer;}
.rm-dot.agree{fill:var(--plum-bright);} .rm-dot.gap{fill:var(--amber-bright);} .rm-dot.split{fill:var(--ink-faint);}
.rm-dot.open{fill:var(--bg);stroke:var(--ink-faint);stroke-width:1.5;stroke-dasharray:2 2;}
.rm-label{font:600 11px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;fill:var(--ink-faint);cursor:pointer;outline:none;}
.rm-label:hover,.rm-label:focus-visible{fill:var(--ink);}
.rm-ghost{opacity:.4;pointer-events:none;} .rm-ghost .rm-dot{display:none;}
.rm-key{margin:0 0 6px;font:400 13px/1.5 var(--sans);color:var(--ink-faint);}
/* One list */
.sq360-list .sqsec{margin-top:36px;}
.rm-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:20px;align-items:start;padding:22px 4px;border-top:1px solid var(--line);transition:background .3s var(--ease);}
.rm-row:last-of-type{border-bottom:1px solid var(--line);}
.rm-row.lit{background:var(--glass);}
.rm-name{display:block;font:600 11px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-bright);}
.rm-q p{margin:6px 0 0;font:500 15.5px/1.45 var(--sans);color:var(--ink);}
.rm-sides{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px;}
.rm-k{display:block;margin:0 0 4px;font:600 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.rm-sides b{display:block;font:600 15px/1.35 var(--sans);color:var(--hi);}
.rm-bar{display:flex;gap:2px;height:6px;margin:10px 0 6px;border-radius:3px;overflow:hidden;background:var(--field);}
.rm-seg.s0{background:var(--plum-bright);} .rm-seg.s1{background:var(--amber);} .rm-seg.s2{background:var(--ink-faint);} .rm-seg.s3{background:var(--line-hard);}
.rm-spread{font:400 12.5px/1.5 var(--sans);color:var(--ink-faint);} .rm-spread b{color:var(--ink-soft);font-weight:600;}
.rm-tag{padding:6px 11px;border-radius:999px;font:600 11px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;border:1px solid var(--line);color:var(--ink-soft);}
.rm-tag.agree{border-color:rgba(162,78,129,.55);color:var(--plum-bright);}
.rm-tag.gap{border-color:rgba(210,149,74,.6);color:var(--amber-bright);}
.sq360-card .sq360-quote{margin:4px 0 0;font:500 20px/1.45 var(--disp);letter-spacing:-.01em;color:var(--hi);}
/* Asking more, folded once the report exists */
.sq360-more{margin-top:40px;}
.sq360-more > summary{list-style:none;display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;}
.sq360-more > summary::-webkit-details-marker{display:none;}
.sq360-more > summary b{font:600 15px/1 var(--disp);color:var(--ink);}
.sq360-more-go{margin-left:auto;font:600 13px/1 var(--disp);color:var(--plum-bright);}
.sq360-more[open] .sq360-more-go{color:var(--ink-faint);}
.sq360-more > summary:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
@media screen and (max-width:899px){
  .sq360-hero{grid-template-columns:minmax(0,1fr);padding:26px 20px 22px;border-radius:18px;margin:18px 0 12px;}
  .rm-row{grid-template-columns:minmax(0,1fr) auto;} .rm-sides{grid-column:1 / -1;grid-row:2;}
}
@media print{ .sq360-more{display:none;} }

.rm-spread b{display:inline;font-size:12.5px;}
.rm-seg.you{background:var(--plum-bright);} .rm-seg.other{background:var(--amber);} .rm-seg.mid{background:var(--ink-faint);}
.sq360-asked{margin:8px 0 0;font:400 14px/1.5 var(--sans);color:var(--ink-faint);}
.sq360-counts i{width:8px;height:8px;border-radius:50%;}
.sq360-counts .agree i{background:var(--plum-bright);} .sq360-counts .gap i{background:var(--amber-bright);} .sq360-counts .split i{border:1.5px dashed var(--ink-faint);}
.rm-fig svg{max-width:520px;}

.rm-spread{display:flex;flex-direction:column;gap:4px;}
.rm-sp{display:flex;align-items:baseline;gap:8px;} .rm-sp i{flex:none;width:7px;height:7px;border-radius:50%;transform:translateY(-1px);}
.rm-sp.you i{background:var(--plum-bright);} .rm-sp.other i{background:var(--amber);} .rm-sp.mid i{background:var(--ink-faint);}
.rm-of{margin-top:2px;font-size:11.5px;color:var(--ink-faint);opacity:.8;}

/* ============================================================
   THE TWELVE-SCREEN GO DEEPER (js/godeeper.js), for enrolled people.
   One screen at a time: a moment at work, five statements, a mark for
   the one most like you and the one least. The same glass and pills as
   the rest of the app.
   ============================================================ */
.gd,.gd-read{padding:26px 28px 24px;border:1px solid rgba(162,78,129,.4);border-radius:var(--r-card);background:var(--glass);}
.gd-top{display:flex;align-items:center;gap:14px;}
.gd-top .link{margin-left:auto;}
.gd-saved{font:500 12px/1 var(--sans);color:var(--ink-faint);}
.gd-bar{height:4px;margin:14px 0 22px;border-radius:2px;background:var(--field);overflow:hidden;}
.gd-bar span{display:block;height:100%;background:var(--plum-bright);transition:width .3s var(--ease);}
.gd-stem{margin:0;font:700 clamp(22px,2.4vw,28px)/1.25 var(--disp);letter-spacing:-.02em;color:var(--hi);outline:none;}
.gd-ask{margin:10px 0 20px;font:400 15px/1.5 var(--sans);color:var(--ink-soft);}
.gd-tiles{display:grid;gap:10px;}
.gd-tile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg);transition:border-color .16s var(--ease),background .16s var(--ease);}
.gd-tile p{margin:0;font:500 16px/1.5 var(--sans);color:var(--ink);}
.gd-tile.up{border-color:rgba(162,78,129,.7);background:rgba(162,78,129,.12);}
.gd-tile.down{border-color:rgba(210,149,74,.6);background:rgba(210,149,74,.08);}
.gd-marks{display:flex;gap:8px;}
.gd-m{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:none;cursor:pointer;white-space:nowrap;
  font:600 12.5px/1 var(--disp);color:var(--ink-soft);transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);}
.gd-m:hover{color:var(--ink);border-color:var(--line-hard);}
.gd-m.up[aria-pressed="true"]{background:var(--plum);border-color:var(--plum);color:#fff;}
.gd-m.down[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#1b1208;}
.gd-m:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
.gd-note{min-height:18px;margin:12px 0 0;font:500 13px/1.4 var(--sans);color:#c0392b;}
.gd-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;}
.gd-foot .primary[disabled]{opacity:.45;cursor:not-allowed;}
/* The read */
.gd-read .gd-top{margin-bottom:6px;}
.gd-sec{padding:20px 0;border-top:1px solid var(--line);}
.gd-sec:first-of-type{border-top:0;}
.gd-sec h3{margin:0 0 10px;font:600 11px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-bright);}
.gd-sec p{margin:0 0 10px;font:400 16.5px/1.65 var(--sans);color:var(--ink);max-width:68ch;}
.gd-S0 p,.gd-S1 p{font:600 clamp(19px,2vw,23px)/1.45 var(--disp);letter-spacing:-.01em;color:var(--hi);}
.gd-S7 p:last-child{font:600 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.gd-S8 p{padding-left:16px;border-left:2px solid var(--amber);color:var(--ink-soft);font-style:italic;}
.gd-preds{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px;}
.gd-preds li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-card);}
.gd-hm{display:flex;gap:6px;}
.gd-hm [aria-pressed="true"]{border-color:var(--plum);color:var(--hi);background:rgba(162,78,129,.18);}
.gd-quality{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-card);color:var(--ink-soft);font:400 14.5px/1.55 var(--sans);}
.gd-dev{margin:16px 0 0;font:500 12.5px/1.4 var(--sans);color:var(--ink-faint);}
@media screen and (max-width:640px){
  .gd,.gd-read{padding:20px 16px;}
  .gd-tile{grid-template-columns:minmax(0,1fr);}
  .gd-preds li{grid-template-columns:minmax(0,1fr);}
}
@media (prefers-reduced-motion:reduce){ .gd-bar span,.gd-tile,.gd-m{transition:none;} }

/* ============================================================
   DS V0.1 REFINEMENT (Anthem, 2026-09-27). Figma's review notes, "SuperQ
   Design System V0.1 Proposed" and the "UI/UX Improvement Document",
   applied as corrective rules to the sandbox as it stands. Refinement, not
   redesign: layout, IA, copy, palette and the Shape stay; hierarchy,
   containment, type roles, radii and glow are brought into line.
   Plan and decisions: superq-internal/2026-09-27_SUPRQ_2-PLAN_DS-V01-Refinement.md
   Not touched on purpose: chapter spacing, DESIGN-CONSISTENCY.md, pill
   buttons, the palette. To undo: delete this block (and the three marked
   edits in snapshot.js), or restore the tarball the plan names.
   ============================================================ */

/* ---- Type roles (DS 01) ------------------------------------------------ */
/* Label: Sora 600, 11/16, +1.2px. Uppercase stays where it labels. */
body.sq-shell .eyebrow,body.sq-shell .sqrail-kick,body.sq-shell .sqhero-kick,body.sq-shell .hero .kick,
body.sq-shell .sq360-hero .kick,body.sq-shell .dyp-head .kick,body.sq-shell .sqshape-n,body.sq-shell .sqnext-track li,
body.sq-shell .sqlean,body.sq-shell .rm-k,body.sq-shell .rm-name,body.sq-shell .rm-tag,body.sq-shell .sqpmenu-kick,
body.sq-shell .sqfoot-mark,body.sq-shell .gd-sec h3,body.sq-shell .sqshift-k,body.sq-shell .sqp .movelabel,
body.sq-shell .sqactivity-state,body.sq-shell .sqrp-index .eyebrow,body.sq-shell .sqcal-quote span{
  font-family:var(--disp);font-weight:600;font-size:11px;line-height:16px;letter-spacing:1.2px;}
/* Counts and notes are metadata, not labels: sentence case, 12/18. */
body.sq-shell .sqsecnav-note,body.sq-shell [data-view="snapshot"] .sqsec > .eyebrow,body.sq-shell .sqh2 > .eyebrow,
body.sq-shell .sqnext-status,body.sq-shell .sqactivity-state{
  font:500 12px/18px var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-faint);}
/* A section heading that happens to be marked up as an eyebrow keeps its role. */
body.sq-shell section.block > .eyebrow{font:600 22px/28px var(--disp);letter-spacing:-.2px;text-transform:none;color:var(--ink);}
body.sq-shell section.sqdaily > .eyebrow{font:600 11px/16px var(--disp);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-faint);}
/* Chapter: Sora 700, 32/38, -0.5px. Section: Sora 600, 22/28. */
body.sq-shell .sqh2{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.2px;}
body.sq-shell [data-view="snapshot"] .sqh2.sqsec,
body.sq-shell [data-view="snapshot"] [data-pf="core"] > #sqsec-overview{font-size:32px;line-height:38px;font-weight:700;letter-spacing:-.5px;}
body.sq-shell [data-view="snapshot"] .sqpair .sqsec{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.2px;}
body.sq-shell .lenshead{font-size:22px;line-height:28px;}
/* Subsection: 17/24. */
body.sq-shell .sqpair .sqtile{font-size:17px;line-height:24px;}
body.sq-shell [data-view="snapshot"] .sqcard .movelabel{font:600 17px/24px var(--disp);letter-spacing:-.1px;}
/* Lead 18/30, body 16/26, compact 14/22, metadata 12/18. */
body.sq-shell .sqaha .sqlead,body.sq-shell .sqcoreprose .sqcore{font-size:18px;line-height:30px;}
body.sq-shell .sqpair .sqtile .sqwhy,body.sq-shell .sqp p,body.sq-shell [data-view="snapshot"] .sqcard .movetext,
body.sq-shell .sqrecs ol li,body.sq-shell .sqrp-copy p,body.sq-shell .sqnext-copy,body.sq-shell .sqcoreprose .sqquote{font-size:16px;line-height:26px;}
body.sq-shell .hint,body.sq-shell .sqwall-sub,body.sq-shell .rm-key{font-size:14px;line-height:22px;}
body.sq-shell .sqrail-note,body.sq-shell .sqhero-note,body.sq-shell .sqacct small,body.sq-shell .sqhero-key{font-size:12px;line-height:18px;}

/* ---- The Shape reads as evidence (DS 07) ------------------------------- */
/* Axis names readable, scale words readable over the fill. */
body.sq-shell .sqshape-label{font-size:11.5px;letter-spacing:.08em;}
body.sq-shell .sqshape-label:not(.lit){fill:var(--ink-soft);}
/* The empty 360 scaffold is labelled, not ghosted: no faint pseudo-data. */
body.sq-shell .rm-ghost{opacity:1;}
body.sq-shell .rm-ghost .rm-poly{display:none;}
body.sq-shell .rm-label{font-size:11.5px;letter-spacing:.08em;fill:var(--ink-soft);}

/* ---- Glow is an event, not a material (DS 10) -------------------------- */
/* Kept: the chosen reading (selected axis), the reveal, Matte Plum's rules. */
body.sq-shell .sqshape-poly{filter:none;}
@keyframes sqbreathe-still{50%{transform:scale(1.03);}}
body.sq-shell .sqgo .sqshape-poly{animation:sqdraw 1.1s var(--ease) .2s both,sqbreathe-still 6s ease-in-out 1.4s infinite;}
body.sq-shell .sqreveal .sqshape-poly{filter:drop-shadow(0 0 10px rgba(184,96,145,.9)) drop-shadow(0 0 28px rgba(162,78,129,.6));}
body.sq-shell .sqshape-dot:not(.lit){filter:none;}
body.sq-shell .primary,body.sq-shell .primary:hover{box-shadow:none;}
body.sq-shell .primary:hover{filter:brightness(1.08);}
body.sq-shell .pill:hover,body.sq-shell .cpill:hover,body.sq-shell .pill.on,body.sq-shell .cpill.on{box-shadow:none;}
body.sq-shell .sqsec::before,body.sq-shell .sqrecs ol li::before{text-shadow:none;}
body.sq-shell .sqrp-lean::before,body.sq-shell .sqbrand-acts .bellcount,body.sq-shell .sqtile::before,
body.sq-shell .sqnext-track li .sqnext-dot,body.sq-shell .move.active,body.sq-shell .moment.on{box-shadow:none;}
body.sq-shell .sqkick-q{filter:none;}
body.sq-shell .moment:hover,body.sq-shell .benchrow[data-nav]:hover,body.sq-shell .invteam:hover,body.sq-shell .ccta:hover,
body.sq-shell .sqtile.plus:hover,body.sq-shell .sqtile.minus:hover{transform:none;box-shadow:none;}
/* No glassmorphism as a default: the glass keeps its tint, loses its blur. */
body.sq-shell :is(.move,.leverage,.lead,.gapfill,.ccta,.coachout,.claim,.moment,.scr,.benchrow,.invteam,.who,.gmiss,.slip,.emailbox,.sharelink,
  .jq,.sqcard,.sqtile,.sqdaily,.co-dossier,.map,.calimport,.dpayoff,.sqlocknote,.sqglass){backdrop-filter:none;-webkit-backdrop-filter:none;}
/* Gradient text is for composed identity names only (DS 01): page titles go solid. */
body.sq-shell [data-view="dyad"] .hero > .archetype,body.sq-shell [data-view="deeper"] .hero > .archetype,
body.sq-shell .sq360-hero .archetype,body.sq-shell .sq360-hero .archetype em{
  background:none;-webkit-text-fill-color:var(--hi);color:var(--hi);}

/* ---- Containment follows behaviour (DS 03, DS 04) ---------------------- */
/* Narrative passages sit open on the canvas, grouped by rules and space. */
body.sq-shell [data-view="snapshot"] .sqgrowth3{gap:0 44px;}
body.sq-shell [data-view="snapshot"] .sqgrowth3 .sqp,
body.sq-shell [data-view="snapshot"] .sqdepth .sqtwo .sqp,
body.sq-shell [data-view="snapshot"] .sqcards .sqcard{
  background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;}
body.sq-shell [data-view="snapshot"] .sqgrowth3 .sqp{padding:20px 0 4px;}
body.sq-shell [data-view="snapshot"] .sqgrowth3 .dev{border-top:2px solid var(--amber);}
body.sq-shell [data-view="snapshot"] .sqgrowth3 .act{border-top:2px solid var(--plum-bright);}
body.sq-shell [data-view="snapshot"] .sqdepth .sqtwo{gap:0 44px;}
body.sq-shell [data-view="snapshot"] .sqdepth .sqtwo .sqp{padding:24px 0 28px;}
body.sq-shell [data-view="snapshot"] .sqcards{gap:0 44px;}
body.sq-shell [data-view="snapshot"] .sqcards .sqcard{padding:20px 0 24px;}
[data-theme="light"] body.sq-shell [data-view="snapshot"] :is(.sqgrowth3 .sqp,.sqdepth .sqtwo .sqp,.sqcards .sqcard){background:none;box-shadow:none;}
/* The selected reading is the page's one highlighted object: accent rule and tint. */
body.sq-shell .sqreadpanel{border:0;border-left:2px solid var(--plum-bright);border-radius:0 4px 4px 0;background:rgba(162,78,129,.09);}
/* The next step is a working surface: a boundary, no gradient, no glow. */
body.sq-shell .sqnext{border:1px solid rgba(162,78,129,.35);border-radius:8px;background:var(--glass);}
/* Dyads: one ruled list, not six equal cards. The rows still open a pair. */
body.sq-shell [data-view="dyad"] .bench{gap:0;}
body.sq-shell [data-view="dyad"] .bench .benchrow{border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none;}
body.sq-shell [data-view="dyad"] .bench .benchrow:last-of-type{border-bottom:1px solid var(--line);}
body.sq-shell [data-view="dyad"] .bench .benchrow[data-nav]:hover{background:var(--glass);border-color:var(--line);}
body.sq-shell [data-view="dyad"] .bench .benchrow:focus-visible{outline:2px solid var(--plum-bright);outline-offset:-2px;}
/* Guide: a single quoted need is an accent rule, not a box. */
body.sq-shell [data-view="guide"] .gmiss{background:none;border:0;border-left:2px solid var(--plum-bright);border-radius:0;padding:4px 0 4px 20px;}

/* ---- Radius: 0 / 4 / 6 / 8 / pill (DS 05) ----------------------------- */
body.sq-shell .sqherocard,body.sq-shell .sqherocard:not(.sqcarding),body.sq-shell .sq360-hero,body.sq-shell .sqtray,
body.sq-shell .sqnotes-card,body.sq-shell .sqhero-read,body.sq-shell .sqimp-drop,body.sq-shell .opt,
body.sq-shell .cmp-quant,body.sq-shell .cmp-script,body.sq-shell .cmp-typing{border-radius:8px;}
body.sq-shell .csave,body.sq-shell .cmp-send,body.sq-shell .cmp-set-done,body.sq-shell .cps-bar textarea,body.sq-shell .cps-err,body.sq-shell .co-icon{border-radius:6px;}
@media screen and (max-width:899px){
  body.sq-shell .sqherocard:not(.sqcarding),body.sq-shell .sq360-hero{border-radius:8px;}
}

/* ---- Navigation states (DS 08) ---------------------------------------- */
body.sq-shell .sqsecnav button:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
@media screen and (max-width:899px){
  /* Every destination visible: the strip wraps instead of clipping. */
  body.sq-shell .sqtabs{flex-wrap:wrap;overflow-x:visible;gap:6px;}
  body.sq-shell #chrome nav .subnav .sub,body.sq-shell #chrome nav .lvl{flex:1 1 auto;justify-content:center;}
  body.sq-shell #chrome .sqnav-group{flex:1 1 auto;}
  body.sq-shell #chrome .sqnav-group > .sub{justify-content:flex-start;}
  /* The section row wraps too, so no jump is cut off at the edge. */
  body.sq-shell .sqsecnav{flex-wrap:wrap;justify-content:flex-start;column-gap:22px;overflow:visible;}
  body.sq-shell .sqsecnav button{min-height:44px;}
  /* Chapters step down on a phone; the reading measure does the rest. */
  body.sq-shell [data-view="snapshot"] .sqh2.sqsec,
  body.sq-shell [data-view="snapshot"] [data-pf="core"] > #sqsec-overview{font-size:28px;line-height:34px;}
  body.sq-shell [data-view="snapshot"] .sqgrowth3{grid-template-columns:minmax(0,1fr);}
  body.sq-shell [data-view="snapshot"] .sqcards{grid-template-columns:minmax(0,1fr);}
}
@media (prefers-reduced-motion:reduce){
  body.sq-shell .sqgo .sqshape-poly{animation:none;}
}
/* Sentence case for metadata whose source text is lower case ("four readings"). */
body.sq-shell [data-view="snapshot"] .sqsec > .eyebrow,body.sq-shell .sqh2 > .eyebrow,body.sq-shell .sqnext-status,body.sq-shell .sqactivity-state{display:inline-block;}
body.sq-shell [data-view="snapshot"] .sqsec > .eyebrow::first-letter,body.sq-shell .sqh2 > .eyebrow::first-letter,
body.sq-shell .sqnext-status::first-letter,body.sq-shell .sqactivity-state::first-letter{text-transform:uppercase;}
body.sq-shell .sqnext-status{display:block;}

/* ============================================================
   THE DEPTH LAYER (Anthem, 2026-09-27: "there's a level missing").
   Three parts, each behind its own flag so they can be compared one at a
   time (app.js SQFlags; ?shape_thread= / ?surfaces= / ?signature= on|off):
     .sq-thread     the Shape carried through the profile
     .sq-surfaces   grouped objects sit on a surface
     .sq-signature  one signature moment per page (Guide card, Deep Read glimpse)
   Inside the DS V0.1 rules above: 8px objects, flat tint, a 1px boundary, no
   blur; glow only on the selected reading (DS 10 allows the selected axis).
   Narrative stays open, as the refinement set it. To undo: delete this block
   and the "depth layer" edits in app.js, pulse.js, snapshot.js, godeeper.js.
   ============================================================ */

/* ---- 1. The Shape thread ------------------------------------------------ */
.sqglyph{display:block;width:100%;height:100%;overflow:visible;}
.sqg-ring{fill:none;stroke:rgba(var(--ink-rgb),.3);stroke-width:1;}
.sqg-pt{fill:rgba(var(--ink-rgb),.35);}
.sqg-stroke{stroke:var(--amber-bright);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(224,174,114,.7));}
.sqg-even{fill:none;stroke:var(--amber-bright);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(224,174,114,.7));}
.sqg-dot{fill:var(--hi);}
[data-theme="light"] .sqg-dot{filter:none;}
/* On each of The Whole You's six readings: the small shape at the head,
   and it is a button (it goes up to the big one). */
body.sq-thread [data-view="snapshot"] .sqcards .sqcard.sqthreaded{position:relative;padding-left:66px;}
.sqthread-up{position:absolute;left:0;top:12px;width:52px;height:52px;padding:3px;border:1px solid transparent;
  border-radius:8px;background:none;cursor:pointer;transition:border-color .16s ease,background .16s ease;}
.sqthread-up:hover{border-color:var(--line);background:var(--glass);}
.sqthread-up:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
/* In the panel under the hero: the same small shape above the name. */
.sqrp-glyph{display:block;width:56px;height:56px;margin:8px 0 6px;}
.sqthread-down{display:inline-flex;margin-top:12px;padding:0;border:0;background:none;cursor:pointer;
  font:600 13px/18px var(--sans);color:var(--plum-bright);}
.sqthread-down::after{content:"\2193";margin-left:6px;}
.sqthread-down:hover{text-decoration:underline;text-underline-offset:3px;}
.sqthread-down:focus-visible{outline:2px solid var(--plum-bright);outline-offset:3px;border-radius:4px;}
/* Where the thread lands is marked for a moment, then let go (an event).
   A transition on box-shadow, never an animation: these elements carry
   .sqrise, whose entrance IS an animation, and replacing it drops them back
   to opacity 0. */
body.sq-thread [data-view="snapshot"] :is([data-readout],[data-readpanel]){transition:box-shadow 1.2s ease;}
body.sq-thread [data-view="snapshot"] :is([data-readout],[data-readpanel]).sqthread-here{
  box-shadow:0 0 0 1px rgba(184,96,145,.7),inset 0 0 0 999px rgba(162,78,129,.10);transition:box-shadow .15s ease;}
@media (max-width:760px){
  body.sq-thread [data-view="snapshot"] .sqcards .sqcard.sqthreaded{padding-left:56px;}
  .sqthread-up{width:44px;height:44px;top:14px;}
}

/* ---- 2. Surfaces -------------------------------------------------------- */
/* Strengths and shadows: each column is one object, its rows inside it. */
body.sq-surfaces.sq-shell [data-view="snapshot"] .sqpair .sqwall{
  background:var(--glass);border:1px solid var(--line);border-top:2px solid var(--plum-bright);
  border-radius:8px;padding:26px 26px 12px;}
body.sq-surfaces.sq-shell [data-view="snapshot"] .sqpair .sqwall.am{border-top-color:var(--amber);}
/* Recommendations and Guide topics remain reading fields. They have no
   independent state; their existing numbered/ruled rows supply structure. */
@media (max-width:760px){
  body.sq-surfaces.sq-shell [data-view="snapshot"] .sqpair .sqwall{padding:22px 18px 8px;}
}

/* ---- 3. Signature moments ----------------------------------------------- */
/* The Guide opens on a card, the way the profile does: the same frame, the
   same Q in the corner. It is the page a colleague reads. Nothing is added to
   it: the shared guide carries no shape, so this one does not either. */
body.sq-signature.sq-shell [data-view="guide"] .page > header.hero{position:relative;
  border:1px solid rgba(162,78,129,.45);border-radius:8px;
  background:var(--glass);
  box-shadow:none;
  padding:34px 40px 30px;margin-bottom:28px;}
body.sq-signature.sq-shell [data-view="guide"] .page > header.hero::after{content:"";position:absolute;top:18px;right:20px;
  width:24px;height:24px;background:url(../q.png) center/contain no-repeat;pointer-events:none;}
[data-theme="light"] body.sq-signature.sq-shell [data-view="guide"] .page > header.hero{background:var(--elev);box-shadow:none;}
@media (max-width:760px){
  body.sq-signature.sq-shell [data-view="guide"] .page > header.hero{padding:26px 20px 22px;}
  body.sq-signature.sq-shell [data-view="guide"] .page > header.hero::after{top:14px;right:14px;width:22px;height:22px;}
}
/* Deep Read: what the report holds, before it is begun. */
.sqdeep-glimpse{margin:22px 0 22px;max-width:760px;}
.sqdeep-glimpse[hidden]{display:none;}
.gdg-head{margin:0 0 10px;font:600 11px/16px var(--disp);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-faint);}
.gdg-head span{margin-left:8px;font:500 12px/18px var(--sans);letter-spacing:0;text-transform:none;}
.gdg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;}
.gdg li{display:grid;grid-template-columns:30px 1fr;column-gap:10px;align-content:start;padding:12px 0;border-top:1px solid var(--line);}
.gdg-n{grid-row:span 2;font:700 13px/20px var(--disp);color:var(--plum-bright);}
.gdg b{font:600 15px/20px var(--disp);color:var(--ink);}
.gdg li > span:last-child{font-size:14px;line-height:21px;color:var(--ink-soft);}
@media (max-width:760px){ .gdg{grid-template-columns:minmax(0,1fr);} }

/* None of the three belongs on paper: the print is designed on its own. */
@media print{ .sqthread-up,.sqrp-glyph,.sqthread-down,.sqdeep-glimpse{display:none !important;}
  body.sq-thread [data-view="snapshot"] .sqcards .sqcard.sqthreaded{padding-left:0;} }

/* NO LINE THROUGH THE GRAPH (Anthem, 2026-09-27). The chosen reading's spoke
   is drawn like every other spoke; its point and name, glowing white, are
   what mark the choice. */
body.sq-shell .sqhero-shape .sqshape-spoke.lit{stroke:var(--line);stroke-width:1;filter:none;}
body.sq-shell .sqherocard[data-finish="paper"] .sqhero-shape .sqshape-spoke.lit{stroke:rgba(36,23,38,.18);}

/* September 28 refinement: reading hierarchy and mobile composition.
   The pre-pass tree is archived in sandbox-backups. Screen-only rules keep
   the existing exported reports intact. Identity, copy and axis order stay. */
@media screen{
  body.sq-shell .sqday-line{font:400 16px/26px var(--sans);color:var(--ink);}
  body.sq-shell [data-view="snapshot"] .sqrecs ol{max-width:76ch;}
  body.sq-shell [data-view="guide"] .lens{margin:64px 0 0;}
  body.sq-shell [data-view="guide"] .hero + .lens{margin-top:32px;}
  body.sq-shell [data-view="guide"] .lenshead{
    font:700 32px/38px var(--disp);letter-spacing:-.5px;
    margin:0 0 24px;padding:0;border:0;}
  body.sq-shell [data-view="guide"] .lens > section.block{margin:32px 0 0;}
  body.sq-shell [data-view="guide"] .lens > .lenshead + section.block{margin-top:0;}
  body.sq-shell [data-view="guide"] .lens[data-lens] > section.block > .eyebrow:first-child{
    display:block;border:0;padding:0;margin:0 0 16px;}
  body.sq-shell [data-view="guide"] .tell .mean{max-width:76ch;}
  body.sq-shell .cmp-panel{border-radius:8px;box-shadow:0 16px 48px rgba(0,0,0,.24);}
  [data-theme="light"] body.sq-shell .cmp-panel{box-shadow:0 16px 48px rgba(36,28,41,.16);}
  body.sq-shell .drawer{border-radius:8px 0 0 8px;}
  body.sq-shell #dbody{padding-top:56px;}
  body.sq-shell :is(.drawer,.cmp-panel) :is(button,a,input,textarea,select):focus-visible{
    outline:2px solid var(--plum-bright);outline-offset:2px;}
  body.sq-shell :is(.dclose,.cmp-x,.cmp-send){min-width:44px;min-height:44px;}
}
@media screen and (min-width:900px){ html{scrollbar-gutter:stable;} }
@media screen and (max-width:899px){
  /* Shell utilities replace a floating obstruction. The Q keeps its mark
     and action; only its mobile placement changes. */
  body.sq-shell #chrome nav{column-gap:4px;}
  body.sq-shell #chrome nav .sqbrandrow{gap:0;}
  body.sq-shell .sqbrand-acts{gap:0;}
  body.sq-shell .sqbrand-acts :is(.bell,.themetoggle){width:44px;height:44px;}
  body.sq-shell #chrome .sqbrand-acts .cmp-fab{
    position:static;flex:none;width:44px;height:44px;padding:10px;
    border:1px solid var(--line);border-radius:6px;background:var(--glass);
    color:var(--ink);box-shadow:none;transform:none;}
  body.sq-shell #chrome .sqbrand-acts .cmp-fab.hide{visibility:hidden;}
  body.sq-shell #chrome .sqbrand-acts .cmp-fab:hover{background:var(--glass-2);}
  body.sq-shell #chrome .cmp-fab .sqmark > circle{stroke:var(--ink);}
  body.sq-shell .cmp-panel{right:12px;bottom:max(12px,env(safe-area-inset-bottom));
    width:calc(100vw - 24px);height:min(600px,calc(100dvh - 24px));}
  body.sq-shell .sqpmenu-btn{min-width:44px;}
  body.sq-shell .sqcust,body.sq-shell .sqthread-down{min-height:44px;align-items:center;}

  /* Keep the full text. Recover reading width and remove duplicate gaps
     where desktop columns become a single reading sequence. */
  body.sq-shell [data-view="snapshot"] .page{padding-top:0;}
  body.sq-shell .sqherocard:not(.sqcarding){margin-top:24px;padding:24px 16px;}
  body.sq-shell .sqherocard:not(.sqcarding) .sqhero-shape{margin-top:24px;padding-top:16px;}
  body.sq-shell .sqherocard .sqshape{max-width:420px;margin-inline:auto;}
  body.sq-shell .sqherocard .sqshape-label{font-size:16px;letter-spacing:.04em;}
  body.sq-shell .sqreadpanel{padding:24px 16px;margin-bottom:24px;}
  body.sq-shell .sqrp-glyph{width:40px;height:40px;margin:0;}
  body.sq-shell [data-view="snapshot"] .sqsecnav{column-gap:24px;row-gap:0;padding:8px 0;}
  body.sq-shell [data-view="snapshot"] .sqpair{margin-top:32px;padding-top:0;border:0;}
  body.sq-surfaces.sq-shell [data-view="snapshot"] .sqpair .sqwall{
    padding:24px 0 0;margin-top:32px;background:none;border:0;
    border-top:1px solid var(--line);border-radius:0;}
  body.sq-shell .sqpair .sqtiles,body.sq-shell .sqpair .sqwall.am .sqtiles{margin-top:16px;}
  body.sq-shell .sqpair .sqtile{grid-template-columns:28px minmax(0,1fr);padding:16px 0;}
  body.sq-shell [data-view="snapshot"] :is(.sqdepth .sqtwo .sqp,.sqcards .sqcard){padding-top:16px;padding-bottom:24px;}
  body.sq-shell [data-view="snapshot"] .sqcards .sqcard.sqthreaded{padding-left:0;padding-top:20px;}
  body.sq-shell .sqcard.sqthreaded .sqthread-up{position:static;float:left;margin:0 12px 8px 0;}
  body.sq-shell .sqcard.sqthreaded .movetext{clear:both;}
  body.sq-shell [data-view="snapshot"] .sqrecs ol li{grid-template-columns:32px minmax(0,1fr);padding:16px 0;}
  body.sq-shell [data-view="guide"] .lenshead{font-size:28px;line-height:34px;}
  body.sq-shell [data-view="guide"] .lens > section.block{margin-top:32px;}
  body.sq-shell [data-view="guide"] .tell{padding:16px 0;}
  body.sq-shell :is(.hint,.sqwall-sub,.gdg li > span:last-child,.sqactivity-wait,
    .dyp-shape.empty .dyp-shape-sum,.advisory,.rm-key,.sqmore p){font-size:15px;line-height:24px;}
  body.sq-shell :is(.sqnext,.sqreadpanel,.drawer,.cmp-panel){overflow-wrap:anywhere;}
}
@media screen and (max-width:359px){
  body.sq-shell #chrome nav{padding-left:12px;padding-right:12px;}
  body.sq-shell .sqtabs{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px;}
  body.sq-shell .qm-super{font-size:20px;}
  body.sq-shell #chrome nav .qm{padding-left:0;padding-right:0;gap:1px;}
  /* SVG text scales with its viewBox; these sizes yield 12px at 320px. */
  body.sq-shell .sqherocard .sqshape-label{font-size:19px;}
}

/* TRY THIS WEEK (2026-09-28): the one thing to do, straight after who you are. */
.sqtry{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:6px 22px;margin:18px 0 0;padding:14px 0 14px 20px;border-left:2px solid var(--amber);}
.sqtry-k{font:600 11px/16px var(--disp);letter-spacing:1.2px;text-transform:uppercase;color:var(--amber-bright);white-space:nowrap;}
.sqtry-t{margin:0;font:500 18px/28px var(--sans);color:var(--hi);max-width:62ch;}
@media (max-width:760px){.sqtry{grid-template-columns:1fr;padding-left:16px}.sqtry-t{font-size:17px;line-height:26px}}
@media print{.sqtry{display:none !important}}

/* SHOW MORE ON PHONE (2026-09-28): a preview of the longest runs, then the rest on a tap. */
.sqfold.folded{max-height:340px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);}
.sqfold-btn{margin:10px 0 6px;}
.sqfold-btn[hidden]{display:none;}
@media print{.sqfold.folded{max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}.sqfold-btn{display:none !important}}

/* THE PRINT IN THE HERO, AND ITS KEY (2026-09-28). */
.sqhero-print{max-width:420px;width:100%;justify-self:end;margin:0 auto;}
.sqhero-print svg{display:block;width:100%;height:auto;}
.sqprint-cap{margin:8px 0 0;text-align:center;font:500 12px/18px var(--sans);color:var(--ink-faint);}
.sqprint-cap b{font:600 11px/16px var(--disp);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-soft);margin-right:4px;}
body.sq-shell .sqkeypanel{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:0 36px;align-items:start;padding:18px 24px 22px 20px;}
.sqkey{display:flex;flex-direction:column;}
.sqkey-row{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:baseline;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:10px 8px;cursor:pointer;color:inherit;border-radius:0;}
.sqkey-row:first-child{border-top:0;}
.sqkey-n{font:600 11px/16px var(--disp);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-faint);}
.sqkey-v{font:500 14.5px/21px var(--sans);color:var(--ink-soft);}
.sqkey-row:hover .sqkey-v{color:var(--ink);}
.sqkey-row[aria-selected="true"]{background:rgba(162,78,129,.12);box-shadow:inset 2px 0 0 var(--plum-bright);}
.sqkey-row[aria-selected="true"] .sqkey-n{color:var(--plum-bright);}
.sqkey-row[aria-selected="true"] .sqkey-v{color:var(--hi);}
.sqkey-row:focus-visible{outline:2px solid var(--plum-bright);outline-offset:-2px;}
.sqkeypanel .sqrp-copy h2{margin-top:8px;}
body.sq-print .sqthread-up,body.sq-print .sqrp-glyph{display:none;}
body.sq-print.sq-thread [data-view="snapshot"] .sqcards .sqcard.sqthreaded{padding-left:0;}
@media (max-width:760px){
  body.sq-shell .sqkeypanel{grid-template-columns:1fr;padding:14px 14px 18px;}
  .sqkey-row{grid-template-columns:96px 1fr;padding:11px 6px;}
  .sqkey-v{font-size:15px;line-height:22px;}
  .sqhero-print{max-width:320px;}
}

/* THE MEMBRANE IN THE HERO (2026-09-28): the live print, no ring around it. */
.sqhero-membrane .sqmem{position:relative;width:100%;aspect-ratio:1/1;}
.sqhero-membrane .sqmem canvas{position:absolute;inset:-6%;width:112%;height:112%;touch-action:none;cursor:crosshair;}
.sqhero-membrane .sqmem-static{display:none;}
.sqhero-membrane.sqmem-off .sqmem{display:none;}
.sqhero-membrane.sqmem-off .sqmem-static{display:block;}
@media print{.sqhero-membrane .sqmem{display:none}.sqhero-membrane .sqmem-static{display:block}}

/* ============================================================
   PHONE PASS (MVP sandbox, 2026-10-04). Anthem, on a phone-width window:
   "the layout is terrible in comparison to the desktop". Five things, each
   seen on screen at 320 and 390 before and after:
   1. The top strip wrapped into three uneven rows (the DS 08 rule "wraps
      instead of clipping"). A swipe row was tried and refused the same day;
      it is a bottom tab bar with a More sheet.
   2. The profile's section row wrapped raggedly the same way. It is a
      picker: the section you are in, and a tap opens the list.
   3. The step track's "Deep Read" label broke one letter per line.
   4. The question screen's top line crowded three things into one row.
   5. Guide: "Share this guide" and "Save as a report" touched.
   ============================================================ */
@media screen and (max-width:899px){
  /* THE BOTTOM BAR (Anthem, 2026-10-04: "a left to right scrollable menu bar
     is not good at UX, especially for mobile"; picked the bottom tab bar).
     The same buttons, fixed to the bottom edge in thumb reach: Super Coach,
     Profile, Deep Read, Dyads, More. Guide, 360 and Super Team and the
     profile's own options (Calibrate, the PDFs) open from More (app.js). */
  body.sq-shell #chrome nav{padding-bottom:10px;}
  body.sq-shell .sqtabs{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
    gap:0;margin:0;padding:0 4px env(safe-area-inset-bottom,0);overflow:visible;flex-wrap:nowrap;
    background:var(--elev);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(0,0,0,.35);}
  body.sq-shell #chrome .sqnav-group{display:contents;}
  body.sq-shell #chrome .sqnav-group .sqpmenu-btn,body.sq-shell #chrome .sqpmenu-list{display:none !important;}
  body.sq-shell #chrome nav .subnav .sub,body.sq-shell #chrome nav .lvl,body.sq-shell .sqbar-more{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    min-width:0;min-height:58px;height:auto;padding:8px 2px 7px;border:0;border-radius:0;background:none;box-shadow:none;cursor:pointer;
    font:600 10.5px/1.1 var(--disp);letter-spacing:0;color:var(--ink-faint);white-space:nowrap;}
  body.sq-shell #chrome nav .subnav .sub[hidden],body.sq-shell #chrome nav .lvl[hidden]{display:none;}
  /* ONE ORDER EVERYWHERE (prod sweep #37, Anthem 2026-10-19: "Profile
     first"). The bar was Super Coach, Profile, Deep Read, Guide while the
     desktop rail put Super Coach last, the tour said "Start with Profile",
     and keyboard focus followed the page (Super Coach fourth). Now the bar
     is the rail's own sequence: Profile, Deep Read, Guide, Super Coach,
     More, which is also the order the page and a screen reader give.
     Guide took Dyads' place on the bar with Anthem's yes (2026-10-05): it is
     the third step of the path, and Dyads needs a team. */
  body.sq-shell #chrome nav .subnav .sub[data-sub="focus"],body.sq-shell #chrome nav .lvl[data-lvl="dyads"],
  body.sq-shell #chrome nav .subnav .sub[data-sub="gap"],body.sq-shell #chrome nav .lvl[data-lvl="superteam"]{display:none;}
  body.sq-shell #chrome .sub[data-sub="profile"]{order:1;} body.sq-shell #chrome .sub[data-sub="deeper"]{order:2;}
  body.sq-shell #chrome .sub[data-sub="guide"]{order:3;} body.sq-shell #chrome .lvl[data-lvl="compass"]{order:4;}
  body.sq-shell .sqbar-more{order:5;}
  body.sq-shell #chrome .sqtabs .navi,body.sq-shell .sqbar-more .navi{width:21px;height:21px;}
  body.sq-shell #chrome nav .subnav .sub.active,body.sq-shell #chrome nav .lvl.active,
  body.sq-shell #chrome nav .subnav .sqnav-group > .sub.active,body.sq-shell .sqbar-more.active,body.sq-shell .sqbar-more[aria-expanded="true"]{
    color:var(--hi);background:none;border:0;box-shadow:inset 0 2px 0 var(--plum-bright);}
  body.sq-shell #chrome nav .subnav .sub.active .navi,body.sq-shell #chrome nav .lvl.active .navi,body.sq-shell .sqbar-more.active .navi{color:var(--plum-bright);}
  body.sq-shell #chrome nav .subnav .sub:focus-visible,body.sq-shell #chrome nav .lvl:focus-visible,body.sq-shell .sqbar-more:focus-visible{outline:2px solid var(--plum-bright);outline-offset:-3px;}
  body.sq-shell #chrome .sqtabs .sub,body.sq-shell #chrome .sqtabs .lvl{position:relative;}
  body.sq-shell #chrome .sqtabs .navbadge{display:none;}
  body.sq-shell #chrome .sqtabs .navbadge.next{display:block;position:absolute;top:8px;left:calc(50% + 9px);margin:0;}
  body.sq-shell #chrome .sqtabs .navbadge.next::after{content:none;}
  /* Room for the bar under every page. */
  body.sq-shell #views{padding-bottom:calc(66px + env(safe-area-inset-bottom,0));}
  /* The More sheet. */
  .sqmore-back{position:fixed;inset:0;z-index:68;background:rgba(4,2,8,.55);}
  .sqmore-sheet{position:fixed;left:8px;right:8px;bottom:calc(66px + env(safe-area-inset-bottom,0));z-index:69;max-height:70vh;overflow-y:auto;
    padding:8px;background:var(--elev);border:1px solid var(--line);border-radius:12px;box-shadow:0 -18px 50px rgba(0,0,0,.5);}
  .sqmore-sheet[hidden],.sqmore-back[hidden]{display:none;}
  .sqmore-sheet button{display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:8px 12px;border:0;border-radius:8px;background:none;cursor:pointer;
    text-align:left;font:600 15px/1.3 var(--disp);color:var(--ink);}
  .sqmore-sheet button:active,.sqmore-sheet button:focus-visible{background:var(--glass-2);outline:none;}
  .sqmore-sheet button.on{color:var(--hi);box-shadow:inset 2px 0 0 var(--plum-bright);}
  .sqmore-sheet .navi{display:block;flex:none;width:19px;height:19px;color:var(--plum-bright);}
  .sqmore-sheet small{display:block;margin-top:2px;font:400 12.5px/1.35 var(--sans);color:var(--ink-faint);}
  .sqmore-kick{margin:12px 12px 4px;font:600 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
  .sqmore-kick:first-child{margin-top:6px;}
  /* THE SECTION ROW IS A PICKER, not a strip to swipe: it shows the section
     you are in; a tap opens the list. */
  body.sq-shell [data-view] .sqsecnav{display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;overflow:visible;margin:0;padding:0 14px;
    border:1px solid var(--line);border-radius:8px;background:var(--glass);}
  body.sq-shell [data-view] .sqsecnav::before{content:"On this page";padding:12px 0 0;font:600 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
  body.sq-shell [data-view] .sqsecnav button{display:none;justify-content:space-between;align-items:center;width:100%;min-height:46px;padding:0;text-align:left;white-space:nowrap;box-shadow:none;}
  body.sq-shell [data-view] .sqsecnav button.on,body.sq-shell [data-view] .sqsecnav:not(:has(button.on)) button:first-of-type,body.sq-shell [data-view] .sqsecnav.open button{display:flex;}
  body.sq-shell [data-view] .sqsecnav button.on{box-shadow:none;color:var(--hi);}
  body.sq-shell [data-view] .sqsecnav:not(.open) button.on::after,body.sq-shell [data-view] .sqsecnav:not(.open):not(:has(button.on)) button:first-of-type::after{content:"";flex:none;width:8px;height:8px;margin:0 4px 4px 12px;
    border-right:1.6px solid var(--ink-soft);border-bottom:1.6px solid var(--ink-soft);transform:rotate(45deg);}
  body.sq-shell [data-view] .sqsecnav.open button{border-top:1px solid var(--line);}
  body.sq-shell [data-view] .sqsecnav.open button.on::after{content:"";flex:none;width:6px;height:6px;margin-right:4px;border-radius:50%;background:var(--plum-bright);}
  .sqnext-track li.next{flex:none;}
  .sqnext-track li.next span:not(.sqnext-dot):not(.vh){white-space:nowrap;}
  .sqnext-track li.next:not(:last-child)::after{flex:none;width:18px;}
}
@media screen and (max-width:480px){
  .gd-top{flex-wrap:wrap;row-gap:8px;}
  .gd-top .eyebrow{white-space:nowrap;}
  .gd-saved{order:3;flex-basis:100%;white-space:nowrap;}
}

.sqbar-more,.sqmore-sheet,.sqmore-back{display:none;}
@media screen and (max-width:899px){ body.sq-shell .sqbar-more{display:flex;} .sqmore-sheet:not([hidden]),.sqmore-back:not([hidden]){display:block;} }
@media print{ .sqbar-more,.sqmore-sheet,.sqmore-back{display:none !important;} }
@media screen and (max-width:359px){
  body.sq-shell #chrome .sqtabs .sqsup{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}
/* Two actions on a phone (Anthem, 2026-10-04: "I don't like how these pills
   looked stacked like this", two pills of different widths, ragged, one over
   the other). Side by side as equal halves where both fit on one line; where
   they do not, each takes the full width, so a stack is two matching bars. */
@media screen and (max-width:899px){
  body.sq-shell .sqactivity-acts{gap:10px;}
  body.sq-shell .sqactivity-acts > button{flex:1 1 max-content;justify-content:center;text-align:center;padding-left:16px;padding-right:16px;white-space:nowrap;}
}
/* The same for "Show more / Show less" and the "Download" under it (Anthem,
   2026-10-04: "should we do the same for pills that appear like this as
   well?"). One was a small pill, one a full bar, and it changed with the
   label. On a phone both are full-width bars, a steady 10px apart. */
@media screen and (max-width:760px){
  body.sq-shell .sqfold-btn{display:flex;justify-content:center;width:100%;margin:12px 0 0;}
  body.sq-shell [data-view="snapshot"] .sqcards:has(> .sqfold-btn:last-child){margin-bottom:0;}
  body.sq-shell [data-view="snapshot"] .sqcards + .sqcorenav{margin-top:10px;}
  body.sq-shell [data-view="snapshot"] .sqcards + .sqcorenav > button{flex:1 1 auto;justify-content:center;text-align:center;}
}
/* The Guide's hero on a phone (Anthem, 2026-10-04: "these pills may need to
   be center format"). The chip row is gone from the hero (guideview.js), so
   only the actions are laid out here. They are one group:
   equal halves where they fit on a line, full-width bars where they do not,
   the same rule as the other paired actions. Off a phone the group is
   invisible to layout (display:contents), so desktop is as it was. */
.gacts{display:contents;}
@media screen and (max-width:899px){
  body.sq-shell .gacts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px;}
  body.sq-shell .gacts:empty{display:none;}
  body.sq-shell .gacts > .gshare,body.sq-shell .gacts > .gprint{min-height:44px;flex:1 1 max-content;align-self:auto;margin:0;justify-content:center;text-align:center;white-space:nowrap;}
}
@media print{ .gacts{display:contents;} }
/* A page's main action standing alone is a full-width bar on a phone
   (Anthem, 2026-10-04: "we need to stretch this pill like the others"), the
   same as the paired ones. The five found standing alone at phone width. */
@media screen and (max-width:899px){
  body.sq-shell #sqGuideTo34,body.sq-shell #cardsTo34,body.sq-shell #prepsTo34,body.sq-shell #tsInvite,body.sq-shell #tmSummary,body.sq-shell #tmLeave,
  body.sq-shell .sqnext-acts > .primary{display:flex;justify-content:center;align-items:center;width:100%;text-align:center;}
}
/* The warning before leaving a team (team.js confirmLeave). Phone and desktop. */
.sqconfirm{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:rgba(4,3,7,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.sqconfirm-card{width:min(100%,440px);padding:26px 26px 22px;background:var(--elev);border:1px solid var(--line);border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6);}
.sqconfirm-t{margin:0 0 10px;font:700 21px/1.25 var(--disp);letter-spacing:0;color:var(--hi);}
.sqconfirm-b{margin:0;font:400 15px/1.55 var(--sans);color:var(--ink-soft);}
.sqconfirm-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:22px;}
.sqconfirm-acts button{min-height:44px;justify-content:center;text-align:center;}
#stLeaveSlot:empty{display:none;}
#stLeaveSlot{margin-top:44px;padding-top:28px;border-top:1px solid var(--line);}
#stLeaveSlot > .dsec{margin-top:0 !important;}
@media screen and (max-width:899px){
  .sqconfirm{place-items:end center;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0));}
  .sqconfirm-acts{flex-direction:column-reverse;}
  .sqconfirm-acts button{width:100%;}
}
@media print{ .sqconfirm,#stLeaveSlot{display:none !important;} }
/* Calibrate on a phone (Anthem, 2026-10-04: "let's clean these pills up.
   I'm thinking just center format for these"). The six reading chips are
   centred, and the two actions follow the paired-action rule. */
@media screen and (max-width:899px){
  .sqcal-pick{justify-content:center;}
  .sqcal > .invrow{justify-content:center;gap:10px;}
  .sqcal > .invrow > button{flex:1 1 max-content;justify-content:center;text-align:center;white-space:nowrap;}
}
/* The profile's section row, pinned (snapshot.js stick()). Phone and desktop.
   A jump lands its heading below the pinned row, not under it. */
/* It has no place in the page: it is only ever the pinned bar. */
body.sq-shell [data-view="snapshot"] .sqsecnav:not(.stuck){display:none !important;}
body.sq-shell [data-view="snapshot"] [id^="sqsec-"]{scroll-margin-top:84px !important;}
body.sq-shell [data-view] .sqsecnav.stuck{position:fixed;top:0;z-index:60;margin:0;background:var(--bg);box-shadow:0 14px 26px -18px rgba(0,0,0,.9);}
@media screen and (min-width:900px){
  body.sq-shell [data-view] .sqsecnav.stuck{padding-top:6px;padding-bottom:0;box-sizing:border-box;}
}
@media screen and (max-width:899px){
  body.sq-shell [data-view] .sqsecnav.stuck{left:0 !important;width:100% !important;padding:0 16px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--elev);}
  body.sq-shell [data-view] .sqsecnav.stuck::before{display:none;}
  body.sq-shell [data-view] .sqsecnav.stuck button{min-height:48px;}
  body.sq-shell [data-view] .sqsecnav.stuck.open{max-height:calc(100vh - 90px);overflow-y:auto;}
}
/* The tour card docks at the top when its subject is the phone's bottom bar. */
.sqtour.docked.docktop .sqtour-card{top:12px !important;bottom:auto;}
/* Dyads: the advisory as small print at the foot of the page. */
/* Fine print (Anthem: "that should be fine print"). The notice draws its own
   rule above itself, so the wrapper adds only the space. */
body.sq-shell .dyadvisory{margin:56px 0 0;}
body.sq-shell .dyadvisory .advisory{margin:0;max-width:64ch;font-size:12px !important;line-height:18px !important;color:var(--ink-faint);}
/* No empty band between the fine print and the footer (Anthem, 2026-10-04:
   "kill this gap under the fine print", phone and desktop). The page's
   120px foot padding is for pages that end on content; this one ends on
   its small print, which sits just above the footer's own rule. */
body.sq-shell [data-view="dyad"] .page:has(> .dyadvisory){padding-bottom:20px;}
/* The profile's three words are a line of text, not pills (Anthem,
   2026-10-04: "another way to display the descriptions that's not a pill or
   looks clickable", then "let's make sure it matches"). They describe;
   nothing happens when pressed. One quiet line with a dot between the words,
   wherever they are drawn: the profile hero, the reveal screen, the page
   header that carries them, and the PDF. Phone and desktop. */
body.sq-shell .codes.sqwords,.codes.sqwords{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;}
body.sq-shell .codes.sqwords span,.codes.sqwords span{display:inline-flex;align-items:center;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  font:600 15px/1.5 var(--disp);letter-spacing:.01em;color:var(--ink-soft);}
body.sq-shell .codes.sqwords span:not(:last-child)::after,.codes.sqwords span:not(:last-child)::after{content:"\2022";margin:0 11px;font-size:.8em;line-height:1;color:var(--plum-bright);}
body.sq-shell .sqherocard[data-finish="paper"] .codes.sqwords span{color:#241726;background:none;border:0;}
@media screen and (max-width:359px){
  body.sq-shell .codes.sqwords span{font-size:13px;}
  body.sq-shell .codes.sqwords span:not(:last-child)::after{margin:0 7px;}
}
@media print{
  body[data-printing^="profile"] .sqprint-head .codes.sqwords span{padding:0;border:0;background:none;font-size:10pt;color:var(--plum-deep);}
  body[data-printing^="profile"] .sqprint-head .codes.sqwords span:not(:last-child)::after{color:var(--plum);margin:0 6pt;}
}
/* The card customiser on a phone (Anthem, 2026-10-04: "we need to clean
   these pills up"). The three finishes wrapped two and one at different
   widths; they are one row of three equal choices, swatch over name. The
   two actions follow the paired-action rule. */
@media screen and (max-width:899px){
  body.sq-shell .sqtray .sqfins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  body.sq-shell .sqtray .sqfin{flex-direction:column;justify-content:center;gap:7px;min-width:0;padding:12px 4px 10px;border-radius:12px;text-align:center;}
  body.sq-shell .sqtray .sqfin-l{font-size:12.5px;white-space:nowrap;}
  body.sq-shell .sqtray > .invrow{gap:10px;}
  body.sq-shell .sqtray > .invrow > button{flex:1 1 max-content;justify-content:center;text-align:center;white-space:nowrap;}
}
@media screen and (max-width:359px){
  body.sq-shell .sqtray .sqfin-l{font-size:11.5px;letter-spacing:0;}
}

/* ============================================================
   ONE RULE EVERYWHERE (2026-10-04, Anthem: "is there any other
   inconsistencies we should address?" -> yes to all six).
   ============================================================ */
/* 1. The advisory is fine print at the foot of its page, on every page that
      carries it, phone and desktop. Where it is tied to one block (the 360
      growth readout) it stays with that block, in the same fine print. */
body.sq-shell .advisory{font-size:12px !important;line-height:18px !important;color:var(--ink-faint);}
body.sq-shell .sqfine{margin:56px 0 0;}
body.sq-shell .sqfine:empty{display:none;}
body.sq-shell .sqfine .advisory{margin:0;max-width:64ch;}
/* 2. No empty band before the footer. A page that ends on its fine print sits
      20px above the footer's rule; a page that ends on content, 48px. */
body.sq-shell [data-view="deeper"] .page,body.sq-shell [data-view="guide"] .page,body.sq-shell [data-view="gap"] .page,
body.sq-shell [data-view="coaching"] .page,body.sq-shell [data-view="superteam"] .page{padding-bottom:48px;}
body.sq-shell [data-view] .page:has(.sqfine:not(:empty)){padding-bottom:20px;}
/* 3. The Guide's two actions on desktop: a gap between them and one height. */
@media screen and (min-width:900px){
  body.sq-shell .gacts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:32px;}
  body.sq-shell .gacts:empty{display:none;}
  body.sq-shell .gacts > .gshare,body.sq-shell .gacts > .gprint{margin:0;min-height:44px;align-self:auto;}
}
/* 5. Calibrate's six readings are equal columns, not centred ragged rows:
      two across on a phone, three in the wider drawer. They are choices, so
      they keep their outline. */
.sqcal-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.sqcal-pick button{display:flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;text-align:center;white-space:nowrap;}
@media screen and (max-width:899px){ .sqcal-pick{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* ── ONE TOP FOR EVERY PAGE (Anthem, 2026-10-04) ─────────────────────────
      The first thing on a page started at 28, 40, 68 or 76px on a desktop
      depending on the page, and at 93, 111 or 123px on a phone, because each
      header kept its own top padding or margin on top of .page's. The page's
      own padding is the one gap now (40px desktop, 24px under the phone's
      bar): Guide and Super Team already sat there, and these join them.
      The open headers (Deep Read, Dyads, Preps) give up their top padding; the
      carded ones (Profile, 360) give up their top margin. On a phone the
      Dyads header also loses the 26px side inset the old .hero rule gave it,
      so it shares the 16px gutter of everything under it. */
body.sq-shell [data-view="deeper"] .page > .hero:first-child,
body.sq-shell [data-view="dyad"] .page > .hero:first-child,
body.sq-shell [data-view="coaching"] .page > .hero:first-child{padding-top:0;}
body.sq-shell [data-view="gap"] .sq360-hero{margin-top:0;}
@media screen and (min-width:900px){
  body.sq-shell [data-view="snapshot"] .sqherocard:not(.sqcarding){margin-top:40px;}
}
@media (max-width:560px){
  body.sq-shell [data-view="deeper"] .page > .hero:first-child,
  body.sq-shell [data-view="dyad"] .page > .hero:first-child,
  body.sq-shell [data-view="coaching"] .page > .hero:first-child{padding-left:0;padding-right:0;}
}

/* ── A PHONE'S CONTROLS ARE 44px TO THE FINGER (Anthem, 2026-10-04) ───────
      Twenty-odd kinds of control on a phone were under the 44px a fingertip
      needs: the small buttons at 35, the 360 row's remove at 34, Super
      Coach's rows at 36 and its send at 36, and the text links (Edit, Copy,
      Make them private again, Kept as your words) at 14 to 18. The boxed
      ones grow to 44. The text links keep their size on the page and take
      an invisible ::after that carries the touch out to 44, so no line of
      copy moves. Desktop is untouched: a pointer does not need it. */
@media screen and (max-width:899px){
  body.sq-shell .primary.small,body.sq-shell .quiet.small,body.sq-shell .addrow{min-height:44px;}
  body.sq-shell .invx{width:44px;height:44px;}
  body.sq-shell button.link,body.sq-shell .cps-kepttag{position:relative;}
  body.sq-shell button.link::after,body.sq-shell .cps-kepttag::after{content:"";position:absolute;inset:-15px -9px;}
  body.sq-shell .cps-ico{width:44px;height:44px;}
  body.sq-shell .cps-new,body.sq-shell .cps-thinks,body.sq-shell .cps-older,body.sq-shell .cps-earlier{min-height:44px;}
  body.sq-shell .cps-search{height:44px;}
  body.sq-shell .cps-row{padding-top:13px;padding-bottom:13px;}
  body.sq-shell .cps-search input{align-self:stretch;height:auto;}
  body.sq-shell .cps-send{width:44px;height:44px;margin:3px;}
  /* The shape's six words are touched through the wide invisible line over
     each spoke (30 units, about 25px on a phone). 54 units is 44px there,
     and still narrower than the gap between two spokes at the innermost
     ring, so a touch on a point never lands on its neighbour's line. */
  body.sq-shell .sqhero-shape .sqshape-hit{stroke-width:54;}
}

/* ── CHAT / PREPS IS ONE SWITCH, AND SHOWS WHICH SIDE IT IS ON (2026-10-04) ──
      .cps-subtabs had no rule of its own: Chat and Preps were two full-size
      .quiet pills, identical whichever was open, and on a phone their width
      cut the conversation's title to "Tou…" while its date wrapped to three
      lines. One bordered track now, the open side filled; keyed on
      aria-selected, which both screens already set. On a phone the date
      stays on one line and gives way before the title does. */
body.sq-shell .cps-subtabs{flex:none;display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;}
body.sq-shell .cps-subtabs .quiet{display:inline-flex;align-items:center;border:0;background:none;padding:7px 14px;font-size:13px;line-height:1.2;color:var(--ink-soft);box-shadow:none;}
body.sq-shell .cps-subtabs .quiet[aria-selected="true"]{background:rgba(162,78,129,.22);color:var(--ink);}
@media screen and (max-width:899px){
  body.sq-shell .cps-subtabs .quiet{min-height:38px;padding:0 12px;}
  body.sq-shell .cps-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}

/* ── THE Q ON THE LIGHT GROUND (Anthem, 2026-10-04) ───────────────────────
      q.png is a translucent magenta: over the dark ground it reads as deep
      plum, over cream it washed out to a pale pink. The paper card finish
      already answers this (.sqherocard[data-finish="paper"] .sqherocard-q):
      the shape laid under itself three times in the mark's plum, which takes
      it to about 93% solid. The same answer for the logo, the hero's small Q
      and the Guide header's, wherever the light theme shows them. */
[data-theme="light"] body.sq-shell #chrome nav .qm img,
[data-theme="light"] body.sq-shell .sqkick-q,
[data-theme="light"] body.sq-signature.sq-shell [data-view="guide"] .page > header.hero::after{filter:drop-shadow(0 0 0 #8E3F6C) drop-shadow(0 0 0 #8E3F6C) drop-shadow(0 0 0 #8E3F6C);}

/* ── 360: "HOW THIS STAYS ANONYMOUS" (Anthem, 2026-10-04) ─────────────────
      The three paragraphs that stood above the invitation rows, folded under
      one line. The disclosure is .fwlearn's, without its top rule. */
.sq360-how{margin:0 0 14px;}
.sq360-how summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;list-style:none;cursor:pointer;color:var(--plum-bright);font-size:13.5px;font-weight:600;}
.sq360-how summary::-webkit-details-marker{display:none;}
.sq360-how summary .chev{width:14px;height:14px;transition:transform .18s ease;}
.sq360-how[open] summary .chev{transform:rotate(90deg);}
.sq360-how summary:hover{color:var(--ink);}
.sq360-how-body .hint{margin:0 0 12px;}

/* ── THE PROFILE'S LAST THIRD (Anthem, 2026-10-04) ────────────────────────
      Three things from the review's item 4.

      1. STRENGTHS AND SHADOWS ON A PHONE: a tile is its title until pressed
         (snapshot.js foldTilesForPhone sets .sqtfold; the first of each
         column starts .open). Paper always prints every paragraph.
      2. "AND UNDERNEATH THOSE" (.squnder): each group is a row like the six
         readings above it, a rule over it and its lead line as the title; an
         odd last group takes the full width instead of leaving half a row
         empty. The day-to-day lines get the same rules.
      3. The Download button says what it saves, so it is as wide as its
         words on a desktop. */
.sqtile.sqtfold{cursor:pointer;padding-right:44px;}
.sqtile.sqtfold::after{content:"";position:absolute;right:8px;top:21px;width:8px;height:8px;border-right:1.6px solid var(--ink-faint);border-bottom:1.6px solid var(--ink-faint);transform:rotate(45deg);transition:transform .18s ease;}
.sqtile.sqtfold.open::after{transform:rotate(225deg);top:26px;}
.sqtile.sqtfold:not(.open) .sqclamp{display:none;}
.sqtile.sqtfold:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
body[data-printing] .sqtile.sqtfold .sqclamp{display:block;}
body[data-printing] .sqtile.sqtfold::after{display:none;}

body.sq-shell [data-view="snapshot"] .squnder .sqtend{columns:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin-top:14px;}
body.sq-shell [data-view="snapshot"] .squnder .sqtend-g{margin:0;padding:18px 0 20px;border-top:1px solid var(--line);}
body.sq-shell [data-view="snapshot"] .squnder .sqtend-g:last-child:nth-child(odd){grid-column:1 / -1;}
body.sq-shell [data-view="snapshot"] .squnder .sqtend-g > .movetext{font:600 16px/1.4 var(--disp) !important;color:var(--ink);}
body.sq-shell [data-view="snapshot"] .squnder .sqtend-g .sqmore{margin-top:8px;}
body.sq-shell [data-view="snapshot"] .squnder .sqtend-g:last-child:nth-child(odd) .sqmore{display:flex;flex-wrap:wrap;gap:0 28px;}
body.sq-shell [data-view="snapshot"] .squnder > .sqmore{margin-top:0;padding-top:18px;border-top:1px solid var(--line);}
body.sq-shell [data-view="snapshot"] .squnder > .sqmore > .movelabel{margin-top:0 !important;}
body.sq-shell [data-view="snapshot"] .squnder > .sqmore .sqday-line{margin:0;padding:12px 0;border-top:1px solid var(--line);}
body.sq-shell [data-view="snapshot"] .squnder > .sqmore .movelabel + .sqday-line{border-top:0;padding-top:8px;}
body.sq-shell [data-view="snapshot"] .squnder > .movetext{margin-top:0 !important;padding-top:14px;border-top:1px solid var(--line);}
@media (max-width:760px){
  body.sq-shell [data-view="snapshot"] .squnder .sqtend{grid-template-columns:minmax(0,1fr);}
  body.sq-shell [data-view="snapshot"] .squnder .sqtend-g:last-child:nth-child(odd) .sqmore{display:block;}
}

/* ── TWO LEFTOVERS FROM THE RE-WALK (Anthem, 2026-10-04) ──────────────────
      1. The member list's initials (.iav) took var(--ink) over plum-deep, so
         on the light theme they were dark on dark. The disc is the same plum
         in both themes, so its letters are the same cream in both, as the
         avatar stack at the top of the page already is.
      2. On a phone, Super Coach's header gave a conversation's title about
         90px ("Tough co…") because Back, the list, the Chat/Preps switch and
         the options all shared one row. The switch takes a row of its own
         under the title there. */
body.sq-shell .invteam .iav{color:#FCF7F0;}
@media screen and (max-width:560px){
  body.sq-shell .cps-head{flex-wrap:wrap;row-gap:2px;}
  body.sq-shell .cps-head .cps-subtabs{order:9;margin:0 0 4px 6px;}
  body.sq-shell .cps-head::after{content:"";order:8;flex-basis:100%;height:0;}
  /* THE TITLE WRAPS BEFORE IT CLIPS (2026-10-08). With Back, the list and the
     options sharing its row, a title has about 220px at 390 wide, and "Tough
     conversation with Dana" still ended in an ellipsis after the switch moved
     to its own row. Two lines now, clipped only past that; the date stays one
     line under it. */
  body.sq-shell .cps-title{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.25;overflow-wrap:anywhere;}
}

/* ── "IN MY OWN WORDS", WAITING (Anthem, 2026-10-04) ──────────────────────
      Three things made the block read as loose text. (1) Its count ("2 of 7
      lines saved") is meant to show only once the lines are open, and the
      script hides it until then, but .sqactivity-state's display:inline-block
      (the sentence-case rule) beat the hidden attribute, so the block said
      lines were saved and that it had not opened yet, together. (2) The
      description was set as bright as body copy with the "opens once" line
      run on under it at 13px, no gap. (3) Nothing said locked. Now the count
      obeys hidden; the description steps back to --ink-soft; and the waiting
      line is a quiet box with a lock, sitting where the buttons will be. */
body.sq-shell .sqactivity-state[hidden]{display:none;}
body.sq-shell .sqactivity[data-activity="notes"] > p:not([class]){color:var(--ink-soft);}
body.sq-shell .sqactivity-wait{display:inline-flex;align-items:center;gap:10px;max-width:none;margin:18px 0 0;padding:12px 18px 12px 14px;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--field);color:var(--ink-soft);font:500 14px/20px var(--sans);}
body.sq-shell .sqactivity-wait svg{flex:none;width:16px;height:16px;color:var(--ink-faint);}
body.sq-shell .sqactivity-wait[hidden]{display:none;}

/* ── THE ROOM MAP, DRAWN AT ITS OWN SIZE (Anthem, 2026-10-04) ─────────────
      dyad.js constellation() now draws at the box's own width, so these are
      real pixel sizes. The old picture's flat halo, flat disc and even 1.5px
      centre-to-centre lines are replaced; see the note over constellation().
      .sqroom scopes every rule: .map/.node/.edge are old, shared names. */
.map.sqroom{border-radius:var(--r,14px);background:
  radial-gradient(60% 75% at 50% 46%,rgba(162,78,129,.13),rgba(162,78,129,0) 70%),var(--field);}
.map.sqroom svg{max-height:440px;margin:0 auto;}
/* A full team: the room is taller (much taller on a phone), the type a step
   smaller, and your own name wears the surface behind it so a line to someone
   below you passes under it cleanly. */
.map.sqroom.dense svg{max-height:none;}
.map.sqroom.dense .nm{font-size:12.5px;}
.map.sqroom.dense .ini{font-size:11.5px;}
/* Until every pair's answer is in, the free-form room holds its space and
   shows nothing, then arrives once. */
.map.sqroom svg{transition:opacity .25s ease;}
.map.sqroom.forming svg{opacity:0;}
/* The room without a shape (a phone's full team): a line may pass behind a
   name, so every name wears the surface behind it. */
.map.sqroom.free .nm{paint-order:stroke;stroke:var(--bg);stroke-width:3.5px;stroke-opacity:.8;stroke-linejoin:round;}
.map.sqroom.dense .node.you .nm{paint-order:stroke;stroke:var(--bg);stroke-width:3.5px;stroke-opacity:.8;stroke-linejoin:round;}
.map.sqroom .orbit{fill:none;stroke:var(--ink-faint);stroke-opacity:.16;stroke-width:1;stroke-dasharray:2 7;stroke-linecap:round;}
.map.sqroom .orbit.in{stroke-opacity:.09;}
.map.sqroom .edge{stroke:url(#sqroomEdge);stroke-width:1.5;stroke-opacity:1;stroke-linecap:round;}
.map.sqroom .edge.lit{stroke-width:2.25;}
.map.sqroom .edge.dim{stroke-opacity:.14;}
.map.sqroom .hit{fill:transparent;}
.map.sqroom .glow{fill:url(#sqroomGlow);opacity:.85;transition:opacity .2s ease;pointer-events:none;}
.map.sqroom .core{fill:url(#sqroomIni);}
.map.sqroom .ini{fill:#FCF7F0;font:600 13px var(--disp);letter-spacing:.02em;}
.map.sqroom .node.you .ini{font-size:12px;}
.map.sqroom .ring{stroke:var(--plum-bright);stroke-width:1.5;stroke-opacity:.9;}
.map.sqroom .ring2{stroke:var(--plum-bright);stroke-width:1;stroke-opacity:.35;}
.map.sqroom .node.off .ring{stroke:var(--ink-faint);stroke-opacity:.38;}
.map.sqroom .node.off .ini{fill-opacity:.8;}
.map.sqroom .nm{fill:var(--ink);font:600 13px var(--sans);letter-spacing:0;}
.map.sqroom .node.off .nm{fill:var(--ink-soft);font-weight:500;}
.map.sqroom .node.you .nm{font:600 13px var(--disp);letter-spacing:.02em;}
.map.sqroom .node:hover .glow,.map.sqroom .node.active .glow{fill:url(#sqroomGlow);opacity:1;}
.map.sqroom .node:hover .ring,.map.sqroom .node.active .ring{stroke-width:2;stroke-opacity:1;}
.map.sqroom .node.off:hover .ring,.map.sqroom .node.off.active .ring{stroke:var(--plum-bright);}
.map.sqroom .node:hover .nm,.map.sqroom .node.active .nm{fill:var(--hi,var(--ink));}
.map.sqroom .node.picked .ring{stroke:var(--amber-bright);stroke-opacity:1;stroke-width:2;}
.map.sqroom .node:focus-visible{outline:none;}
.map.sqroom .node:focus-visible .ring{stroke:var(--hi,var(--ink));stroke-width:2.5;stroke-opacity:1;}
[data-theme="light"] .map.sqroom{background:radial-gradient(60% 75% at 50% 46%,rgba(162,78,129,.10),rgba(162,78,129,0) 70%),var(--field);}

/* ── THE GUIDE HAS A HIERARCHY, AND SOME LIFE (Anthem, 2026-10-04) ────────
      "This page doesn't have enough visual hierarchy, especially the answers
      they can edit... there isn't really any life to this page." It was one
      long table: every row the same 15px, the situation brighter than the
      answer it introduces, and the person's own sentences (the only lines on
      the page nobody else could have written) set smaller than a section
      heading behind a 2px bar, with "Edit" as an 11px word.

      On screen only (the saved report and the shared guide are untouched):
        1. THEIR OWN WORDS are the high points: a lit card, the sentence in
           the display face at 24px with its first letter raised, a plum
           quotation mark, and Edit as a real button at the card's corner.
           This brings back the card the 2026-09-27 flattening took away, for
           these blocks only, because flat is what made them disappear. Only
           a block with an Edit button gets it: a line the product wrote
           ("What I need when we work closely") is not a quotation.
        2. THE THREE CHAPTERS are numbered like the profile's sections
           (01 / About me) and ruled off from each other.
        3. THE ROWS READ ANSWER-FIRST: the situation is a small label, the
           answer is the bright line under it. Groups run in two columns on a
           wide screen, each under a heading with a plum tick, so the page is
           a set of short lists rather than one long one. */
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)){counter-reset:sqlens;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens{counter-increment:sqlens;padding-top:40px;border-top:1px solid var(--line);}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .hero + .lens{border-top:0;padding-top:8px;}


body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .gmiss.gown{position:relative;border:1px solid rgba(162,78,129,.34);border-radius:var(--r,14px);
  padding:22px 26px 24px 64px;background:linear-gradient(135deg,rgba(162,78,129,.16),rgba(162,78,129,.04) 55%,rgba(210,149,74,.05));}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .gmiss.gown::before{content:"\201C";position:absolute;left:22px;top:14px;
  font:700 56px/1 var(--disp);color:var(--plum-bright);opacity:.9;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .gmiss.gown .eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 10px;min-height:30px;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .gmiss.gown p{font:600 24px/1.32 var(--disp);letter-spacing:-.01em;color:var(--hi,var(--ink));max-width:30em;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .gmiss.gown p::first-letter{text-transform:uppercase;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .gmiss.gown .gedit{margin-left:auto;padding:6px 14px;border:1px solid rgba(184,96,145,.5);border-radius:999px;
  font:600 12px/16px var(--disp);letter-spacing:.02em;color:var(--plum-bright);background:rgba(162,78,129,.08);transition:background .15s ease,color .15s ease,border-color .15s ease;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .gmiss.gown .gedit:hover{background:rgba(162,78,129,.22);color:var(--hi,var(--ink));border-color:var(--plum-bright);}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .gmiss.gown .gedit::before{content:"";display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 2.5 13.5 5 5.5 13H3v-2.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 2.5 13.5 5 5.5 13H3v-2.5z'/%3E%3C/svg%3E") center/contain no-repeat;}

body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens] > section.block > .eyebrow:first-child{position:relative;padding-left:14px;margin:0 0 6px;font-size:18px;line-height:24px;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens] > section.block > .eyebrow:first-child::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;background:var(--plum-bright);}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .tell{display:block;padding:13px 0 14px;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .tell .sig{display:block;margin:0 0 3px;font:500 12.5px/18px var(--sans);letter-spacing:.01em;color:var(--ink-faint);}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .tell .mean{display:block;font:500 16px/24px var(--sans);color:var(--ink);}
@media screen and (min-width:1000px){
  body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens="me"]{columns:2;column-gap:56px;}
  body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens="me"] > .lenshead,
  body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens="me"] > section.block:has(> .gmiss){column-span:all;}
  body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens="me"] > section.block{break-inside:avoid;margin:0 0 34px;}
  body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens="me"] > section.block:has(> .gmiss){margin:0 0 36px;}
  /* Own-words cards stacked together sit closer to each other than to the lists. */
  body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens="me"] > section.block:has(> .gmiss):has(+ section.block > .gmiss){margin-bottom:14px;}
}
@media screen and (max-width:899px){
  body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .gmiss.gown{padding:18px 18px 20px 18px;}
  body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .gmiss.gown::before{position:static;display:block;height:30px;font-size:44px;}
  body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .gmiss.gown p{font-size:20px;}
  body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .gmiss.gown .gedit{padding:9px 14px;}
}
[data-theme="light"] body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .gmiss.gown{background:linear-gradient(135deg,rgba(162,78,129,.11),rgba(162,78,129,.03) 55%,rgba(210,149,74,.05));}

/* ── THE GUIDE'S ANSWER GROUPS ARE SECTIONS (Anthem, 2026-10-04) ──────────
      "Now it feels like this needs visual hierarchy. Maybe we can create
      sections for these?" The six groups were headings over open rows, so two
      columns of them ran together as one field of text. Each group is a panel
      of its own now: a quiet surface and border, its heading in a ruled
      header strip with the number of answers in it, the rows inside. Quieter
      than the own-words cards above them, which stay the brightest thing on
      the page. On screen only. */
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens] > section.block:has(> .tells){
  padding:0;border:1px solid var(--line);border-radius:var(--r,14px);background:var(--field);overflow:hidden;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens] > section.block:has(> .tells) > .eyebrow:first-child{
  display:flex;align-items:center;gap:10px;margin:0;padding:14px 20px 13px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(162,78,129,.14),rgba(162,78,129,0) 70%);font-size:17px;line-height:24px;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens] > section.block:has(> .tells) > .eyebrow:first-child::before{
  position:static;flex:none;width:8px;height:8px;border-radius:50%;top:auto;bottom:auto;background:var(--plum-bright);box-shadow:0 0 10px rgba(184,96,145,.7);}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .tells{counter-reset:sqtell;padding:2px 20px 4px;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .tells .tell{counter-increment:sqtell;border-bottom:1px solid var(--line);}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .tells .tell:last-child{border-bottom:0;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .tells .tell:first-child{border-top:0;}
@media screen and (min-width:1000px){
  body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens="me"]{column-gap:24px;}
  body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens="me"] > section.block:has(> .tells){margin:0 0 24px;}
}
@media screen and (max-width:999px){
  body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens] > section.block:has(> .tells){margin-top:16px;}
}
[data-theme="light"] body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens] > section.block:has(> .tells) > .eyebrow:first-child{background:linear-gradient(90deg,rgba(162,78,129,.10),rgba(162,78,129,0) 70%);}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens[data-lens] > section.block:has(> .tells) > .tells{border-top:0;margin-top:0;}

/* The answer panels' columns end together: guideview.js flushColumns sets
   --sqflush on the shorter column's panels, shared between each row's top and
   bottom. */
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .tells .tell{padding-top:calc(13px + var(--sqflush,0px) / 2);padding-bottom:calc(14px + var(--sqflush,0px) / 2);}

/* "Your lines have been saved": the Save pill, once it has. Quiet and ticked,
   still a button (pressing it again saves again, harmlessly). */
#sqNotesSave.is-saved{background:none;border:1px solid rgba(184,96,145,.5);color:var(--plum-bright);box-shadow:none;}
#sqNotesSave.is-saved::before{content:"";display:inline-block;width:14px;height:8px;margin:0 9px 4px 0;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);}

/* A page's own Back, at its top: an arrow and the word, 44px to the finger. */
.sqpageback{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 0 18px -10px;padding:0 14px 0 8px;border:0;border-radius:999px;background:none;
  color:var(--ink-soft);font:600 14px/1 var(--disp);cursor:pointer;transition:background .15s ease,color .15s ease;}
.sqpageback svg{width:18px;height:18px;}
.sqpageback:hover{background:var(--field);color:var(--ink);}
.sqpageback:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}

/* ── YOUR READS, IN THE RAIL (reads.js; Anthem, 2026-10-04) ───────────────
      The summary row sits under the menu, above the rail's note.
      Pressing it slides the menu's destinations out to the left and the list
      of reads in from the right, in the same space; "Menu" slides it back. */
.sqreads,.sqreads-panel{display:none;}
@media screen and (min-width:900px){
  body.sq-shell .sqreads{display:block;grid-column:1 / -1;margin:14px -4px 0;}
  body.sq-shell .sqrail-note{padding-top:16px;}
  body.sq-shell #chrome nav .brand{position:relative;}
  body.sq-shell .sqreads-panel{display:block;position:absolute;left:0;right:0;bottom:0;overflow-y:auto;scrollbar-width:none;
    transform:translateX(108%);opacity:0;visibility:hidden;transition:transform .28s cubic-bezier(.3,.7,.2,1),opacity .2s ease,visibility 0s linear .28s;}
  body.sq-shell #chrome nav .sqrail-kick,body.sq-shell #chrome nav .sqtabs{transition:transform .28s cubic-bezier(.3,.7,.2,1),opacity .2s ease;}
  body.sq-shell #chrome nav.sqreads-on .sqrail-kick,body.sq-shell #chrome nav.sqreads-on .sqtabs{transform:translateX(-108%);opacity:0;pointer-events:none;}
  body.sq-shell #chrome nav.sqreads-on .sqreads-panel{transform:none;opacity:1;visibility:visible;transition-delay:0s;}
}
/* A short window has room for the checklist or the note, not both: the note
   goes (it is said on the profile too), the checklist stays. */
@media screen and (min-width:900px) and (max-height:860px){
  body.sq-shell .sqrail-note{display:none;}
  body.sq-shell .sqreads{margin-bottom:6px;}
}
@media (prefers-reduced-motion:reduce){
  body.sq-shell .sqreads-panel,body.sq-shell #chrome nav .sqrail-kick,body.sq-shell #chrome nav .sqtabs{transition:none;}
}
.sqreads-sum{display:grid;grid-template-columns:1fr auto;gap:7px 8px;align-items:center;width:100%;padding:11px 12px 12px;
  border:1px solid rgba(255,255,255,.07);border-radius:var(--r,14px);text-align:left;cursor:pointer;color:var(--ink-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 26px -14px rgba(0,0,0,.75);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.sqreads-sum:hover,.sqreads.open .sqreads-sum{border-color:rgba(184,96,145,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 30px -14px rgba(0,0,0,.8),0 0 0 3px rgba(162,78,129,.10);}
.sqreads-sum:active{transform:translateY(1px);}
.sqreads-sum:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
.sqreads-k{font:600 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.sqreads-chev{width:14px;height:14px;color:var(--ink-faint);transition:transform .2s ease,color .18s ease;}
.sqreads-sum:hover .sqreads-chev{color:var(--ink);}
.sqreads.open .sqreads-chev{transform:rotate(180deg);}
.sqreads-n{grid-column:1 / -1;font:500 13.5px/18px var(--sans);color:var(--ink-soft);white-space:nowrap;}
.sqreads-n b{color:var(--ink);font-weight:700;}
.sqreads-alert{font-style:normal;margin-left:8px;padding:2px 8px;border-radius:999px;background:rgba(210,149,74,.16);color:var(--amber-bright);font:600 11.5px/16px var(--disp);white-space:nowrap;}
.sqreads-pips{grid-column:1 / -1;display:flex;gap:4px;}
.sqreads-pips i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.12);}
.sqreads-pips i.done{background:var(--plum-bright);box-shadow:0 0 8px rgba(184,96,145,.55);}
.sqreads-pips i.part{background:var(--amber-bright);}
[data-theme="light"] .sqreads-sum{border-color:var(--line);background:var(--elev);box-shadow:0 8px 22px -14px rgba(36,28,41,.35);}
[data-theme="light"] .sqreads-pips i{background:rgba(36,28,41,.12);}
[data-theme="light"] .sqreads-pips i.done{background:var(--plum);box-shadow:none;}
[data-theme="light"] .sqreads-pips i.part{background:var(--amber);}
.sqreads-head{margin:0 12px 10px;font:700 19px/24px var(--disp);letter-spacing:-.01em;color:var(--ink);}
.sqreads-list{display:flex;flex-direction:column;gap:4px;}
.sqreads-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;column-gap:12px;row-gap:5px;align-items:center;width:100%;min-height:44px;padding:9px 12px;
  border:1px solid transparent;border-radius:var(--r,14px);background:none;text-align:left;cursor:pointer;color:var(--ink);transition:background .15s ease,border-color .15s ease;}
.sqreads-row:hover{background:rgba(162,78,129,.12);border-color:rgba(162,78,129,.3);}
.sqreads-row:focus-visible{outline:2px solid var(--plum-bright);outline-offset:-2px;}
.sqreads-row.part{background:rgba(210,149,74,.06);border-color:rgba(210,149,74,.22);}
.sqreads-row.part:hover{background:rgba(210,149,74,.12);border-color:rgba(210,149,74,.45);}
.sqreads-mark{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink-faint);display:grid;place-items:center;}
.sqreads-mark svg{width:11px;height:11px;}
.sqreads-row.done .sqreads-mark{border-color:var(--plum-bright);background:var(--plum-bright);color:#fff;}
.sqreads-row.part .sqreads-mark{border-color:var(--amber-bright);background:conic-gradient(var(--amber-bright) 0 var(--p,8%),transparent 0);}
.sqreads-row.todo .sqreads-mark{border-style:dashed;opacity:.8;}
.sqreads-t{font:600 14px/18px var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sqreads-row.todo .sqreads-t{color:var(--ink-soft);}
.sqreads-s{font:600 11.5px/16px var(--disp);letter-spacing:.02em;color:var(--ink-faint);white-space:nowrap;}
.sqreads-row.done .sqreads-s{color:var(--plum-bright);}
.sqreads-row.part .sqreads-t{grid-column:2 / -1;}
.sqreads-row.part .sqreads-s{grid-row:2;grid-column:3;color:var(--amber-bright);}
.sqreads-row.todo .sqreads-s::after{content:"\203A";font-size:16px;}
.sqreads-bar{grid-row:2;grid-column:2;height:3px;border-radius:2px;background:var(--line);overflow:hidden;}
.sqreads-bar i{display:block;height:100%;border-radius:2px;background:var(--amber-bright);}
[data-theme="light"] .sqreads-alert{color:var(--amber);}
[data-theme="light"] .sqreads-row.part .sqreads-s{color:var(--amber);}

.sqpending-line{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 14px;border:1px solid rgba(210,149,74,.35);border-radius:var(--r,14px);background:rgba(210,149,74,.08);color:var(--ink);font:500 14px/20px var(--sans);max-width:66ch;}
.sqpending-line::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--amber-bright);}

/* ── 360 AND SUPER TEAM JOIN THE REST (Anthem, 2026-10-04) ────────────────
      "The 360 and Super Team page is starting to feel a little bland now
      that we've been doing these changes." Both were plain stacks: label,
      paragraph, control, repeat, with nothing ruled off and nothing lit. They
      take the language the Guide now has: quiet panels
      with a header strip, and plum where something is the person's to act
      on. On screen only; no words and no behaviour change. */
/* No chapter numbers on these two (Anthem, 2026-10-04: "I don't think these
   need numbers next to the titles. I doubt users will get lost"). */

/* 360: the empty figure in the hero is a promise, so it is lit, not faint. */
body.sq-shell:not([data-printing]) [data-view="gap"] .rm-ghost .rm-ring{stroke:rgba(184,96,145,.30);}
body.sq-shell:not([data-printing]) [data-view="gap"] .rm-ghost .rm-ring:nth-of-type(4){stroke:rgba(184,96,145,.55);}
body.sq-shell:not([data-printing]) [data-view="gap"] .rm-ghost .rm-spoke{stroke:rgba(184,96,145,.35);}
body.sq-shell:not([data-printing]) [data-view="gap"] .rm-ghost .rm-dot{display:block;fill:var(--bg);stroke:var(--plum-bright);stroke-width:1.5;stroke-dasharray:2.5 2.5;}
body.sq-shell:not([data-printing]) [data-view="gap"] .rm-ghost .rm-fig{filter:drop-shadow(0 0 26px rgba(162,78,129,.28));}
body.sq-shell:not([data-printing]) [data-view="gap"] .sq360-progress .statbar{height:6px;border-radius:3px;}

/* 360: who you are asking, and the note, are two panels; each address is a numbered seat. */
body.sq-shell:not([data-printing]) [data-view="gap"] :is(.invwrap,.notewrap){margin-top:18px;padding:0 20px 18px;border:1px solid var(--line);border-radius:var(--r,14px);background:var(--field);}
body.sq-shell:not([data-printing]) [data-view="gap"] :is(.invhead,.notelbl){display:flex;align-items:center;gap:10px;margin:0 -20px 16px;padding:14px 20px 13px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(162,78,129,.14),rgba(162,78,129,0) 70%);border-radius:var(--r,14px) var(--r,14px) 0 0;}
body.sq-shell:not([data-printing]) [data-view="gap"] :is(.invhead > span:first-child,.notelbl){font:600 16px/22px var(--disp);letter-spacing:0;text-transform:none;color:var(--ink);}
body.sq-shell:not([data-printing]) [data-view="gap"] :is(.invhead,.notelbl)::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--plum-bright);box-shadow:0 0 10px rgba(184,96,145,.7);}
body.sq-shell:not([data-printing]) [data-view="gap"] .invcount{margin-left:auto;padding:3px 10px;border-radius:999px;background:rgba(162,78,129,.16);color:var(--plum-bright);font:600 12px/16px var(--disp);}
body.sq-shell:not([data-printing]) [data-view="gap"] #tsRows{counter-reset:sqseat;}
body.sq-shell:not([data-printing]) [data-view="gap"] #tsRows .invrow{counter-increment:sqseat;align-items:center;}
body.sq-shell:not([data-printing]) [data-view="gap"] #tsRows .invrow::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;
  border:1.5px dashed rgba(184,96,145,.6);}
body.sq-shell:not([data-printing]) [data-view="gap"] #tsRows .invrow:has(input:not(:placeholder-shown))::before{border-style:solid;background:var(--plum-bright);color:#fff;}
body.sq-shell:not([data-printing]) [data-view="gap"] .notewrap .invnote{background:var(--bg);}
body.sq-shell:not([data-printing]) [data-view="gap"] #tsInvite{margin-top:20px;}

/* Super Team: people in two columns, you marked; the four settings as panels; the code as the thing to hand over. */
body.sq-shell:not([data-printing]) [data-view="superteam"] .head .avrow .a{width:40px;height:40px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] .invteam{transition:border-color .15s ease,background .15s ease;}
body.sq-shell:not([data-printing]) [data-view="superteam"] .invteam[style*="pointer"]:hover{border-color:rgba(184,96,145,.5);background:rgba(162,78,129,.08);}
body.sq-shell:not([data-printing]) [data-view="superteam"] .invteam[style*="default"]{border-color:rgba(184,96,145,.45);background:linear-gradient(135deg,rgba(162,78,129,.16),rgba(162,78,129,.03));}
body.sq-shell:not([data-printing]) [data-view="superteam"] .invteam > span:last-child[style]{color:var(--plum-bright) !important;font-weight:600;}
body.sq-shell:not([data-printing]) [data-view="superteam"] .dsec{margin-top:0 !important;padding:0 20px 18px;border:1px solid var(--line);border-radius:var(--r,14px);background:var(--field);}
body.sq-shell:not([data-printing]) [data-view="superteam"] .dsec > .se{display:flex;align-items:center;gap:10px;margin:0 -20px 14px;padding:14px 20px 13px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(162,78,129,.14),rgba(162,78,129,0) 70%);border-radius:var(--r,14px) var(--r,14px) 0 0;font:600 16px/22px var(--disp);letter-spacing:0;text-transform:none;color:var(--ink);}
body.sq-shell:not([data-printing]) [data-view="superteam"] .dsec > .se::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--plum-bright);box-shadow:0 0 10px rgba(184,96,145,.7);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .hint{margin:0 !important;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #tmCodeVal{border:1px dashed rgba(184,96,145,.6);background:rgba(162,78,129,.10);color:var(--hi,var(--ink));font-size:20px !important;font-weight:600;letter-spacing:.22em !important;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #tmCopy{padding:10px 16px;border:1px solid rgba(184,96,145,.5);border-radius:999px;color:var(--plum-bright);font:600 13px/16px var(--disp);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #tmCopy:hover{background:rgba(162,78,129,.18);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #tmShare{color:var(--plum-bright);font-weight:600;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stLeaveSlot .dsec{margin-top:32px !important;border-color:var(--line);background:none;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stLeaveSlot .dsec > .se{background:none;font-size:14px;color:var(--ink-soft);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stLeaveSlot .dsec > .se::before{background:var(--ink-faint);box-shadow:none;}
/* Team Shape and Team health: two panels that are visibly waiting. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:40px;padding-top:40px;border-top:1px solid var(--line);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block{margin:0;padding:22px 24px 24px;border:1px solid var(--line);border-radius:var(--r,14px);background:var(--field);border-top-width:1px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom .sq360-progress .statbar{height:6px;border-radius:3px;}
@media screen and (min-width:1000px){
  body.sq-shell:not([data-printing]) [data-view="superteam"] .invlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] .invlist .invteam{margin:0;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > :not(.dsec){grid-column:1 / -1;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > :not(section.block){grid-column:1 / -1;}
}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block > .eyebrow:first-child{border-top:0;padding-top:0;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block{padding-top:24px;}

/* ── NO DECORATIVE NUMBERS (Anthem, 2026-10-04) ───────────────────────────
      "There's a lot of unnecessary numbers all over this app." Section
      numbers ("01 /"), the count beside Strengths and Shadows ("05"), the
      01-05 down each list, the 01-10 on what the deeper report holds, the
      01-07 on the lines form, and the 1-2-3 seats on 360 numbered things
      nobody needs to refer to by number. They are gone on screen; a list
      keeps a small dot where its number was, so its rows still read as a
      list. Counts that say something stay: "12 of 76", "3 of 5 have shared",
      "1 of 5 done". Paper is untouched. */
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqsec::before{content:none;}
body.sq-shell:not([data-printing]) .sqwall-n,
body.sq-shell:not([data-printing]) .sqnotes-n{display:none;}
body.sq-shell:not([data-printing]) .sqpair .sqtile{grid-template-columns:20px minmax(0,1fr);}
body.sq-shell:not([data-printing]) .sqpair .sqtile::before,
body.sq-shell:not([data-printing]) .sqrecs ol li::before{content:"";width:6px;height:6px;margin-top:.55em;border-radius:50%;background:var(--plum-bright);align-self:start;text-shadow:none;}
body.sq-shell:not([data-printing]) .sqpair .sqtile.minus::before{background:var(--amber-bright);}
body.sq-shell:not([data-printing]) .sqrecs ol li{grid-template-columns:20px minmax(0,1fr);}
body.sq-shell:not([data-printing]) .gdg li{grid-template-columns:14px 1fr;}
body.sq-shell:not([data-printing]) .gdg-n{font-size:0;line-height:0;}
body.sq-shell:not([data-printing]) .gdg-n::before{content:"";display:block;width:6px;height:6px;margin-top:7px;border-radius:50%;background:var(--plum-bright);}
/* The wall's caption was printed twice on screen, once inside the heading and
   once under it (seen once the count beside it went). The one under stays. */
body.sq-shell:not([data-printing]) .sqwall > .sqh2 > .eyebrow{display:none;}

/* ── THE GUIDE'S LATER CHAPTERS (Anthem, 2026-10-04: "the visual hierarchy
      here feels weird") ─────────────────────────────────────────────────
      Own-words cards stacked together sit close, in every chapter. A line
      derived from the person's answers (no Edit) is a quiet panel, not a
      loose bar. "Three more questions fill this in" is a waiting note with a
      lock, like Deep Read's, instead of a paragraph under the title. */
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens > section.block:has(> .gmiss.gown) + section.block:has(> .gmiss.gown){margin-top:14px;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens > section.block > .gmiss:not(.gown){border:1px solid var(--line);border-left:1px solid var(--line);border-radius:var(--r,14px);
  background:var(--field);padding:18px 22px 20px;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens > section.block > .gmiss:not(.gown) .eyebrow{margin-bottom:8px;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens > section.block > .gmiss:not(.gown) p{font:500 16px/24px var(--sans);color:var(--ink);}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens > section.block > p.hint:only-child,
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens > p.lensblank{display:flex;gap:12px;align-items:flex-start;max-width:none;margin:0;padding:14px 18px;
  border:1px dashed var(--line);border-radius:var(--r,14px);color:var(--ink-soft);font:400 14px/21px var(--sans);}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens > section.block > p.hint:only-child::before,
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens > p.lensblank::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;background:var(--ink-faint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7' width='9' height='6.5' rx='1.5'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7' width='9' height='6.5' rx='1.5'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2'/%3E%3C/svg%3E") center/contain no-repeat;}

/* ── EVERY PAGE'S TOP IS THE SAME LIT CARD (Anthem, 2026-10-04) ───────────
      Profile, Guide and 360 opened on a bordered, lit card; Deep Read, Dyads
      and Super Team on a bare heading, so half the app felt finished and
      half felt like a title. All six are the card now, and each of the three
      new ones carries the page's own number and its own act (.sqhero-stat).
      The cards sit above the page: a top highlight and a soft shadow, the
      raised surface "Your reads" has. Heroes and controls are raised;
      content is not. On screen only. */
body.sq-shell:not([data-printing]) :is([data-view="deeper"],[data-view="dyad"]) .page > .hero:first-child,
body.sq-shell:not([data-printing]) [data-view="dyad"] .os-hero,
body.sq-shell:not([data-printing]) [data-view="superteam"] .page > header.head{position:relative;margin:0 0 32px;padding:34px 40px 32px;
  border:1px solid rgba(162,78,129,.45);border-radius:8px;background:var(--glass);}
body.sq-shell:not([data-printing]) :is([data-view="deeper"],[data-view="dyad"]) .page > .hero:first-child .essence{max-width:38em;}
body.sq-shell:not([data-printing]) [data-view="superteam"] .page > header.head{border-bottom:1px solid rgba(162,78,129,.45);}
body.sq-shell:not([data-printing]) :is([data-view="deeper"],[data-view="dyad"]) .page > .hero:first-child,
body.sq-shell:not([data-printing]) [data-view="dyad"] .os-hero,
body.sq-shell:not([data-printing]) [data-view="superteam"] .page > header.head,
body.sq-shell:not([data-printing]) [data-view="guide"] .page > header.hero,
body.sq-shell:not([data-printing]) [data-view="gap"] .sq360-hero,
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqherocard:not(.sqcarding){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 28px 60px -34px rgba(0,0,0,.9),0 0 80px -40px rgba(162,78,129,.55);}
[data-theme="light"] body.sq-shell:not([data-printing]) :is([data-view="deeper"],[data-view="dyad"]) .page > .hero:first-child,
[data-theme="light"] body.sq-shell:not([data-printing]) [data-view="dyad"] .os-hero,
[data-theme="light"] body.sq-shell:not([data-printing]) [data-view="superteam"] .page > header.head,
[data-theme="light"] body.sq-shell:not([data-printing]) [data-view="guide"] .page > header.hero,
[data-theme="light"] body.sq-shell:not([data-printing]) [data-view="gap"] .sq360-hero,
[data-theme="light"] body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqherocard:not(.sqcarding){
  box-shadow:0 22px 50px -32px rgba(36,28,41,.45);}
[data-theme="light"] body.sq-shell:not([data-printing]) :is([data-view="deeper"],[data-view="dyad"]) .page > .hero:first-child,
[data-theme="light"] body.sq-shell:not([data-printing]) [data-view="dyad"] .os-hero,
[data-theme="light"] body.sq-shell:not([data-printing]) [data-view="superteam"] .page > header.head{background:var(--elev);}
.sqhero-stat{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:26px 0 0;}
.sqhero-stat[hidden]{display:none;}
.sqhero-meter{flex:1 1 260px;max-width:440px;}
.sqhero-meter .statbar{height:6px;border-radius:3px;margin:0 0 10px;}
.sqhero-meter > span{font:400 14px/1.5 var(--sans);color:var(--ink-faint);}
.sqhero-meter b{color:var(--ink);}
/* One way in on Deep Read: the hero's. The pill it presses stays in the page for it. */
body.sq-shell:not([data-printing]) [data-view="deeper"] [data-activity="deep"] [data-godeeper]{display:none;}
/* The seats line over the member list is said in the hero now. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .hint{display:none;}
@media screen and (max-width:899px){
  body.sq-shell:not([data-printing]) :is([data-view="deeper"],[data-view="dyad"]) .page > .hero:first-child,
  body.sq-shell:not([data-printing]) [data-view="dyad"] .os-hero,
  body.sq-shell:not([data-printing]) [data-view="superteam"] .page > header.head{padding:26px 20px 24px;margin-bottom:24px;}
  .sqhero-stat .primary{width:100%;justify-content:center;}
}
.sqhero-meter .statbar[hidden]{display:none;}
/* The hero says the report's status line; the section under it does not say it again. */
body.sq-shell:not([data-printing]) [data-view="deeper"] [data-activity="deep"] [data-deep-state-line]{display:none;}

/* ── YOUR READS IN THE PHONE'S MORE SHEET (Anthem, 2026-10-04) ────────────
      Beside the menu where the sheet is wide enough (a tablet, a narrow
      desktop window), under it on a phone. The rows are the rail's own. */
@media screen and (max-width:899px){
  .sqmore-sheet.two{max-height:78vh;}
  .sqmore-reads{margin:6px 0 0;padding:10px 0 4px;border-top:1px solid var(--line);}
  .sqmore-reads .sqmore-kick{display:flex;align-items:baseline;gap:10px;}
  .sqmore-reads .sqmore-kick span{font:500 12px/16px var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-faint);}
  .sqmore-sheet .sqreads-list{gap:4px;}
  .sqmore-sheet button.sqreads-row{display:grid;min-height:44px;gap:0;column-gap:12px;row-gap:5px;padding:9px 12px;border:1px solid transparent;border-radius:var(--r,14px);}
  .sqmore-sheet button.sqreads-row.part{background:rgba(210,149,74,.06);border-color:rgba(210,149,74,.22);}
}
@media screen and (min-width:640px) and (max-width:899px){
  /* Split down the middle (Anthem, 2026-10-04); the reads side is its own
     inset panel, so the sheet reads as two things and not a list with a line. */
  .sqmore-sheet.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px;align-items:stretch;}
  .sqmore-sheet.two .sqmore-reads{margin:0;padding:10px 10px 10px;border:1px solid rgba(255,255,255,.06);border-radius:14px;
    background:linear-gradient(180deg,rgba(162,78,129,.10),rgba(162,78,129,.02) 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
}
.sqmore-sheet.two[hidden]{display:none;}

/* ── THE MORE SHEET IS LIFTED (Anthem, 2026-10-04: "make it visually feel a
      little more lifted. It just feels cheap again") ────────────────────
      It was a flat --elev box with a hairline. A raised surface now, the one
      the heroes and Your reads have: a soft gradient, a top highlight, a
      deep shadow and a plum glow, a larger radius, more air inside, and a
      darker, blurred page behind it. Rows light on touch with a plum wash. */
@media screen and (max-width:899px){
  .sqmore-back{background:rgba(4,2,8,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
  .sqmore-sheet{left:12px;right:12px;bottom:calc(74px + env(safe-area-inset-bottom,0));padding:12px;border-radius:20px;
    border:1px solid rgba(255,255,255,.09);
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),var(--elev);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 -6px 24px rgba(0,0,0,.35),0 30px 80px -20px rgba(0,0,0,.9),0 0 90px -30px rgba(162,78,129,.6);}
  .sqmore-sheet button{border-radius:12px;transition:background .15s ease;}
  .sqmore-sheet button:hover,.sqmore-sheet button:active,.sqmore-sheet button:focus-visible{background:rgba(162,78,129,.14);}
  .sqmore-sheet button.on{background:rgba(162,78,129,.16);box-shadow:inset 2px 0 0 var(--plum-bright);}
  .sqmore-sheet .sqmore-kick{margin-top:6px;}
  [data-theme="light"] .sqmore-sheet{border-color:var(--line);background:var(--elev);box-shadow:0 30px 80px -24px rgba(36,28,41,.5);}
  [data-theme="light"] .sqmore-back{background:rgba(36,28,41,.35);}
  [data-theme="light"] .sqmore-sheet.two .sqmore-reads{border-color:var(--line);box-shadow:none;}
}
@media screen and (max-width:899px){
  .sqmore-reads{display:flex;flex-direction:column;}
  .sqmore-prog{display:flex;flex-direction:column;gap:9px;margin-top:auto;padding:16px 12px 6px;}
  .sqmore-prog .sqreads-pips i{height:5px;border-radius:3px;}
  .sqmore-reads .sqreads-list{margin-bottom:8px;}
}
@media screen and (min-width:640px) and (max-width:899px){
  .sqmore-prog{border-top:1px solid rgba(255,255,255,.07);padding-top:14px;}
  [data-theme="light"] .sqmore-prog{border-top-color:var(--line);}
}

/* ── THE ACCOUNT MENU IS LIFTED (Anthem, 2026-10-04: "can we lift this
      visually as well?") ───────────────────────────────────────────────
      The raised surface the More sheet and the heroes have: gradient, top
      highlight, deep shadow, plum glow, a larger radius. Who you are signed
      in as is its own inset strip at the top; Sign out is ruled off at the
      foot. The avatar that opens it takes a round focus ring, not a square. */
.sqacct-menu{padding:10px;border-radius:18px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),var(--elev);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 80px -20px rgba(0,0,0,.9),0 0 90px -30px rgba(162,78,129,.6);}
.sqacct-menu > p{margin:0 !important;padding:12px 14px 0;}
.sqacct-menu > p:first-child{border-radius:12px 12px 0 0;background:rgba(162,78,129,.10);}
.sqacct-menu > p:nth-child(2){padding:2px 14px 12px;border-radius:0 0 12px 12px;background:rgba(162,78,129,.10);font-size:13px;}
.sqacct-menu > p:first-child:nth-last-child(n+1) + div{display:none;}
.sqacct-menu > div[style*="height:1px"]{display:none;}
.sqacct-menu button{margin:4px 0 0 !important;border-radius:12px !important;}
.sqacct-menu #sqSignOut{margin-top:8px !important;border-top:1px solid var(--line) !important;border-radius:0 0 12px 12px !important;padding-top:14px !important;}
.navright .avatar[role="button"]{border-radius:50%;}
.navright .avatar[role="button"]:focus{outline:none;}
.navright .avatar[role="button"]:focus-visible{outline:2px solid var(--plum-bright);outline-offset:3px;}
[data-theme="light"] .sqacct-menu{border-color:var(--line);background:var(--elev);box-shadow:0 30px 80px -24px rgba(36,28,41,.5);}

/* Each row of the account menu has its mark, in plum, like the main menu's
   (Anthem, 2026-10-04: "just feels bland in relation to everything else"). */
.sqacct-menu button{display:flex !important;align-items:center;gap:12px;}
.sqacct-menu button::before{content:"";flex:none;width:18px;height:18px;background:var(--plum-bright);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;}
.sqacct-menu #sqSignOut::before{background:var(--ink-faint);}
.sqacct-menu #sqEditProfile{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 20c.8-3.6 3.6-5.5 7-5.5s6.200 1.900 7 5.500'/%3E%3C/svg%3E");}
.sqacct-menu #sqYourData{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6.500' rx='7' ry='2.800'/%3E%3Cpath d='M5 6.500v5.500c0 1.500 3.100 2.800 7 2.800s7-1.300 7-2.800V6.500'/%3E%3Cpath d='M5 12v5.500c0 1.500 3.100 2.800 7 2.800s7-1.300 7-2.800V12'/%3E%3C/svg%3E");}
.sqacct-menu #sqKeptSettings{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v16l-5-3.500L7 20z'/%3E%3C/svg%3E");}
.sqacct-menu #sqSharedWith{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6.500' cy='12' r='2.500'/%3E%3Ccircle cx='17.500' cy='6' r='2.500'/%3E%3Ccircle cx='17.500' cy='18' r='2.500'/%3E%3Cpath d='M8.700 10.800l6.600-3.600M8.700 13.200l6.600 3.600'/%3E%3C/svg%3E");}
.sqacct-menu #sqUploadRead{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.500V4.500M7.500 9 12 4.500 16.500 9'/%3E%3Cpath d='M5 15v4.500h14V15'/%3E%3C/svg%3E");}
.sqacct-menu #sqThemeRow{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v2M12 19v2M3 12h2M19 12h2M5.600 5.600l1.400 1.400M17 17l1.400 1.400M5.600 18.400 7 17M17 7l1.400-1.400'/%3E%3C/svg%3E");}
.sqacct-menu #sqSignOut{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.500h4.500v15H14'/%3E%3Cpath d='M4.500 12H14M10.500 8l4 4-4 4'/%3E%3C/svg%3E");}
.sqacct-menu > p:nth-child(2){font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal !important;}

/* ── PREPS JOINS THE REST (Anthem, 2026-10-05: "the inconsistencies left on
      the list") ─────────────────────────────────────────────────────────
      Super Coach's second tab kept the old bare heading, asked for the
      under-pressure read twice, and listed preps as a title and two buttons.
      The same raised hero as every page, with the Chat / Preps switch at its
      head and its one act inside it; each prep is a panel that says which
      one it is. */
body.sq-shell:not([data-printing]) [data-view="coaching"] .page > .hero:first-child{position:relative;margin:0 0 32px;padding:26px 40px 32px;
  border:1px solid rgba(162,78,129,.45);border-radius:8px;background:var(--glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 28px 60px -34px rgba(0,0,0,.9),0 0 80px -40px rgba(162,78,129,.55);}
body.sq-shell:not([data-printing]) [data-view="coaching"] .page > .hero:first-child .cps-subtabs{margin:0 0 22px;}
body.sq-shell:not([data-printing]) [data-view="coaching"] .page > .hero:first-child .essence{max-width:38em;}
[data-theme="light"] body.sq-shell:not([data-printing]) [data-view="coaching"] .page > .hero:first-child{background:var(--elev);box-shadow:0 22px 50px -32px rgba(36,28,41,.45);}
.sqpreps{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:14px;}
.sqprep{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"ic t d" "ic a a";column-gap:14px;row-gap:12px;align-items:start;
  padding:16px 18px;border:1px solid var(--line);border-radius:var(--r,14px);background:var(--field);transition:border-color .15s ease;}
.sqprep:hover,.sqprep.open{border-color:rgba(184,96,145,.45);}
.sqprep-ic{grid-area:ic;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(162,78,129,.16);color:var(--plum-bright);}
.sqprep-ic svg{width:19px;height:19px;}
.sqprep-t{grid-area:t;min-width:0;}
.sqprep-t b{display:block;font:600 15.5px/22px var(--disp);color:var(--ink);}
.sqprep-t b span{font-weight:500;color:var(--ink-soft);}
.sqprep-t p{margin:3px 0 0;font:400 14px/21px var(--sans);color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sqprep-d{grid-area:d;font:500 12px/22px var(--sans);color:var(--ink-faint);white-space:nowrap;}
.sqprep-a{grid-area:a;display:flex;align-items:center;gap:16px;}
.sqprep-x{color:var(--ink-faint);font-size:13px;}
.sqprep-x:hover{color:#E0705F;}
.sqprep-body{grid-column:1 / -1;margin-top:4px;}
@media screen and (min-width:1000px){ .sqpreps{grid-template-columns:repeat(2,minmax(0,1fr));} .sqprep.open{grid-column:1 / -1;} }
@media screen and (max-width:899px){
  body.sq-shell:not([data-printing]) [data-view="coaching"] .page > .hero:first-child{padding:20px 20px 24px;margin-bottom:24px;}
  .sqprep{grid-template-columns:36px minmax(0,1fr) auto;padding:14px;}
  .sqprep-ic{width:36px;height:36px;}
  .sqprep-a .quiet.small{min-width:96px;justify-content:center;}
}

/* ── THE UNDER-PRESSURE READ'S WELCOME IS A CARD (2026-10-05) ─────────────
      The raised hero surface, a readable measure, the first paragraph as the
      lead and the rest a step quieter, and a 44px Back. Words unchanged. */
.asmstage:has(> .sqwelcome){max-width:680px;}
.sqwelcome{padding:44px 48px 40px;border:1px solid rgba(162,78,129,.45);border-radius:8px;background:var(--glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 28px 60px -34px rgba(0,0,0,.9),0 0 80px -40px rgba(162,78,129,.55);}
.sqwelcome .eyebrow{color:var(--plum-bright);}
.sqwelcome .lede{max-width:34em;margin-left:auto;margin-right:auto;font-size:16px;line-height:1.6;color:var(--ink-soft);}
.sqwelcome h1 + .lede{font-size:18px;color:var(--ink);}
.sqwelcome .fine{margin-top:26px;}
.sqwelcome .primary{margin-top:18px !important;min-width:180px;justify-content:center;}
[data-view="assessment"] .asmback{min-height:44px;padding:0 12px 0 6px;border-radius:999px;font:600 14px/1 var(--disp);}
[data-view="assessment"] .asmback:hover{background:var(--field);}
[data-theme="light"] .sqwelcome{background:var(--elev);box-shadow:0 22px 50px -32px rgba(36,28,41,.45);}
@media screen and (max-width:899px){ .sqwelcome{padding:28px 20px 26px;} .asmscene:has(.sqwelcome){padding:24px 16px 48px;align-items:flex-start;} }

/* ── A TEAMMATE'S GUIDE READS LIKE YOUR OWN (2026-10-05) ──────────────────
      The guide a reader opens from Super Team was still the old layout: the
      rules above were scoped to the owner's page. They cover the drawer now
      (#drawer:has(.lens)), and a written line is marked .gown by the
      renderer, so a reader sees the same lit cards without an Edit. The
      narrow drawer keeps one column; expanded, it takes two. The brand
      lockup is not repeated inside the app. */
body.sq-shell:not([data-printing]) #drawer:has(.lens) .gmark{display:none;}
body.sq-shell:not([data-printing]) #drawer:has(.lens) .hero{padding:0;margin:0 0 20px;border:0;background:none;box-shadow:none;}
body.sq-shell:not([data-printing]) #drawer:not(.wide):has(.lens) .lens[data-lens="me"]{columns:auto;}
body.sq-shell:not([data-printing]) #drawer:not(.wide):has(.lens) .lens > section.block:has(> .tells){margin:16px 0 0;}
body.sq-shell:not([data-printing]) #drawer:not(.wide):has(.lens) .gmiss.gown{padding:18px 18px 20px;}
body.sq-shell:not([data-printing]) #drawer:not(.wide):has(.lens) .gmiss.gown::before{position:static;display:block;height:28px;font-size:42px;}
body.sq-shell:not([data-printing]) #drawer:not(.wide):has(.lens) .gmiss.gown p{font-size:19px;}
body.sq-shell:not([data-printing]) #drawer:has(.lens) .lens{margin-top:36px;}
.sqguide-empty{display:flex;gap:12px;align-items:flex-start;margin:8px 0 0;padding:14px 18px;border:1px dashed var(--line);border-radius:var(--r,14px);color:var(--ink-soft);font:400 14px/21px var(--sans);}

/* ── THE PDFs BREAK WHERE THEY SHOULD (2026-10-05) ────────────────────────
      Found reviewing the reports, and already so before the redesign:
      - The Guide report printed its title and then a blank page: a whole
        chapter (.lens) was forbidden to split, so "About me", taller than a
        page, was pushed whole to page 2. A chapter may split now; a single
        block inside it still may not, and a heading stays with what follows.
      - A grey band ran down the right of every Guide page: the closed side
        drawer's shadow, printed. The profile PDFs already hid the drawer,
        the scrim, the background and the helper; the Guide report does too.
      - The profile PDFs left half of page 1 empty: Strengths and Shadows
        together could not split, so the pair jumped to page 2. The pair may
        split between items; an item still may not. */
@media print {
  body[data-printing="guide"] .bg,
  body[data-printing="guide"] .scrim,
  body[data-printing="guide"] .drawer,
  body[data-printing="guide"] .cmp-fab,
  body[data-printing="guide"] .cmp-panel,
  body[data-printing="guide"] .sqmore-sheet,
  body[data-printing="guide"] .sqmore-back { display:none !important; }
  body[data-printing="guide"] .lens { break-inside:auto !important; page-break-inside:auto !important; }
  body[data-printing="guide"] .lens > section.block,
  body[data-printing="guide"] .gmiss,
  body[data-printing="guide"] .tell { break-inside:avoid; page-break-inside:avoid; }
  body[data-printing="guide"] .lens > section.block > .eyebrow:first-child { break-after:avoid; page-break-after:avoid; }
  body[data-printing^="profile"] .sqpair,
  body[data-printing^="profile"] .sqwall { break-inside:auto !important; page-break-inside:auto !important; }
  body[data-printing^="profile"] .sqtile { break-inside:avoid; page-break-inside:avoid; }
  body[data-printing^="profile"] .sqh2 { break-after:avoid; page-break-after:avoid; }
}

/* ── THE PUBLIC GUIDE LINK READS LIKE THE GUIDE (2026-10-05) ──────────────
      The page someone outside the team opens from a shared link was the last
      copy of the old layout: a narrow column of plain rows. It takes the
      Guide's rules (above, widened to [data-view="publicguide"]) and the
      same raised hero. */
body.sq-shell:not([data-printing]) [data-view="publicguide"] .page header.hero{position:relative;margin:0 0 32px;padding:34px 40px 30px;
  border:1px solid rgba(162,78,129,.45);border-radius:8px;background:var(--glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 28px 60px -34px rgba(0,0,0,.9),0 0 80px -40px rgba(162,78,129,.55);}
body.sq-shell:not([data-printing]) [data-view="publicguide"] .lens{margin-top:48px;}
[data-theme="light"] body.sq-shell:not([data-printing]) [data-view="publicguide"] .page header.hero{background:var(--elev);box-shadow:0 22px 50px -32px rgba(36,28,41,.45);}
@media screen and (max-width:899px){ body.sq-shell:not([data-printing]) [data-view="publicguide"] .page header.hero{padding:26px 20px 24px;} }
/* Wide enough for the two columns of answers; it was a 560px form column. */
body.sq-shell:not([data-printing]) [data-view="publicguide"] #pubGuideStage{max-width:920px;}

/* ── THE PROFILE'S LOWER HALF JOINS THE REST (Anthem, 2026-10-05) ─────────
      Growth pathway, Recommendations and How you work were the one stretch
      still set as plain text in columns. On screen only; words and order
      unchanged.
        Growth pathway   two panels, amber for the cost and plum for the
                         strength, as Strengths and Shadows pair above it
        Recommendations  four cards, two by two: actions, so they look like
                         things to pick up
        How you work     one panel of label-left rows (the PDFs' layout)   */
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqgrowth3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:6px;}
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqgrowth3 .sqp{display:block;padding:0 22px 20px;border:1px solid var(--line);border-radius:var(--r,14px);background:var(--field);box-shadow:none;}
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqgrowth3 .sqp .movelabel{display:flex;align-items:center;gap:10px;margin:0 -22px 16px;padding:13px 22px 12px;border:0;border-bottom:1px solid var(--line);
  border-radius:var(--r,14px) var(--r,14px) 0 0;background:linear-gradient(90deg,rgba(162,78,129,.14),rgba(162,78,129,0) 70%);color:var(--plum-bright);}
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqgrowth3 .sqp .movelabel::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--plum-bright);box-shadow:0 0 10px rgba(184,96,145,.7);}
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqgrowth3 .sqp.dev .movelabel{background:linear-gradient(90deg,rgba(210,149,74,.14),rgba(210,149,74,0) 70%);color:var(--amber-bright);}
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqgrowth3 .sqp.dev .movelabel::before{background:var(--amber-bright);box-shadow:0 0 10px rgba(210,149,74,.6);}
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqgrowth3 .sqp p{margin:0;font:400 16px/26px var(--sans);color:var(--ink);}

body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqrecs ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:none;margin-top:6px;}
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqrecs ol li{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:12px;align-items:start;margin:0;padding:18px 20px;
  border:1px solid var(--line) !important;border-radius:var(--r,14px);background:var(--field);font:400 16px/25px var(--sans);color:var(--ink);transition:border-color .15s ease;}
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqrecs ol li:hover{border-color:rgba(184,96,145,.45) !important;}
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqrecs ol li::before{width:8px;height:8px;margin-top:9px;box-shadow:0 0 10px rgba(184,96,145,.7);}

body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqdepth .sqtwo{display:block;margin-top:6px;padding:0 22px;border:1px solid var(--line);border-radius:var(--r,14px);background:var(--field);}
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqdepth .sqtwo > .sqp{display:grid;grid-template-columns:minmax(150px,24%) minmax(0,1fr);column-gap:28px;align-items:start;
  padding:20px 0 22px;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none;}
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqdepth .sqtwo > .sqp:first-child{border-top:0;}
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqdepth .sqtwo > .sqp .movelabel{margin:5px 0 0;padding:0;border:0;color:var(--plum-bright);}
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqdepth .sqtwo > .sqp .sqclamp{display:block;-webkit-line-clamp:unset;overflow:visible;}
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqdepth .sqtwo > .sqp p{margin:0;font:400 16px/26px var(--sans);color:var(--ink);max-width:68ch;}
@media screen and (max-width:899px){
  body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqgrowth3,
  body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqrecs ol{grid-template-columns:minmax(0,1fr);}
  body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqdepth .sqtwo{padding:0 16px;}
  body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqdepth .sqtwo > .sqp{grid-template-columns:minmax(0,1fr);row-gap:8px;padding:16px 0 18px;}
}
/* On a phone a reading of How you work is its label until pressed (snapshot.js). */
body.sq-shell:not([data-printing]) .sqtwo > .sqp.sqtfold{position:relative;cursor:pointer;padding-right:34px !important;min-height:52px;}
body.sq-shell:not([data-printing]) .sqtwo > .sqp.sqtfold::after{content:"";position:absolute;right:6px;top:22px;width:8px;height:8px;border-right:1.6px solid var(--ink-faint);border-bottom:1.6px solid var(--ink-faint);transform:rotate(45deg);transition:transform .18s ease;}
body.sq-shell:not([data-printing]) .sqtwo > .sqp.sqtfold.open::after{transform:rotate(225deg);top:26px;}
body.sq-shell:not([data-printing]) .sqtwo > .sqp.sqtfold:not(.open) .sqclamp{display:none !important;}
body.sq-shell:not([data-printing]) .sqtwo > .sqp.sqtfold .movelabel{margin-top:2px !important;}

/* ── THE GUIDE'S ANSWER PANELS OPEN ON A PRESS, ON A PHONE (guideview.js) ── */
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"]) .lens > section.block.sqgfold > .eyebrow:first-child{cursor:pointer;min-height:52px;border-bottom-color:transparent;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"]) .lens > section.block.sqgfold.open > .eyebrow:first-child{border-bottom-color:var(--line);}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"]) .lens > section.block.sqgfold > .eyebrow:first-child::after{content:attr(data-n) " answers";margin-left:auto;padding-right:18px;
  font:500 12px/16px var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-faint);
  background:no-repeat right 2px center/9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%238A7F93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5'/%3E%3C/svg%3E");}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"]) .lens > section.block.sqgfold:not(.open) > .tells{display:none;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"]) .lens > section.block.sqgfold{margin-top:10px;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"]) .lens > section.block.sqgfold > .eyebrow:focus-visible{outline:2px solid var(--plum-bright);outline-offset:-2px;}

/* ── SUPER COACH'S LIST AND HEADER (2026-10-05) ───────────────────────────
      Desktop rows a little taller and their dates a point larger; the list
      stays dense, it is a history. On a phone the search field and the
      Chat / Preps tabs are a full 44px. */
@media screen and (min-width:900px){
  body.sq-shell .cps-row{min-height:40px;padding-top:10px;padding-bottom:10px;}
  body.sq-shell .cps-row > span:last-child:not(.cps-row-t),body.sq-shell .cps-row-w{font-size:12px;}
}
@media screen and (max-width:899px){
  body.sq-shell .cps-subtabs .quiet{min-height:44px;}
  body.sq-shell .cps-search input{min-height:44px;}
}

/* On a phone: The Whole You's readings fold like the rest, and the
   recommendations are one panel of rows instead of four padded cards. */
body.sq-shell:not([data-printing]) .sqcards > .sqcard.sqtfold{position:relative;cursor:pointer;padding-right:34px !important;min-height:52px;}
body.sq-shell:not([data-printing]) .sqcards > .sqcard.sqtfold::after{content:"";position:absolute;right:6px;top:24px;width:8px;height:8px;border-right:1.6px solid var(--ink-faint);border-bottom:1.6px solid var(--ink-faint);transform:rotate(45deg);transition:transform .18s ease;}
body.sq-shell:not([data-printing]) .sqcards > .sqcard.sqtfold.open::after{transform:rotate(225deg);top:28px;}
body.sq-shell:not([data-printing]) .sqcards > .sqcard.sqtfold:not(.open) .sqclamp{display:none !important;}
body.sq-shell:not([data-printing]) .sqcards > .sqcard.sqtfold:not(.open){padding-top:14px !important;padding-bottom:14px !important;}
body.sq-shell:not([data-printing]) .sqcards > .sqcard.sqtfold:focus-visible,body.sq-shell:not([data-printing]) .sqtwo > .sqp.sqtfold:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
@media screen and (max-width:899px){
  body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqrecs ol{gap:0;padding:0 16px;border:1px solid var(--line);border-radius:var(--r,14px);background:var(--field);}
  body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqrecs ol li{padding:14px 0;border:0 !important;border-top:1px solid var(--line) !important;border-radius:0;background:none;}
  body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqrecs ol li:first-child{border-top:0 !important;}
  body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqgrowth3 .sqp{padding:0 16px 16px;}
  body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqgrowth3 .sqp .movelabel{margin:0 -16px 12px;padding:12px 16px 11px;}
}

/* SIGNED-OUT TEXT LINKS, ON A PHONE (2026-10-05). "Forgot?", "Create an
   account", "Sign in" and the privacy link are a line of text 16px tall. The
   touch area is widened to 44px without moving the line, so the form keeps
   its rhythm and the thumb still lands. */
@media (max-width:760px){
  :is([data-view="login"],[data-view="signup"]) :is(button.link,.legal a,a.quiet.small){position:relative;}
  [data-view="login"] a.quiet.small{position:fixed;}
  :is([data-view="login"],[data-view="signup"]) :is(button.link,.legal a,a.quiet.small)::after{content:"";position:absolute;left:-10px;right:-10px;top:50%;height:44px;transform:translateY(-50%);}
}

/* AFTER "CREATE ACCOUNT" (2026-10-05). The panel stops being a form and
   becomes the one thing left to do. Built from the panel's own heading, sub
   line and .quiet pill, so it is the same card in a second state. */
.susent{display:none;flex-direction:column;align-items:center;width:100%;text-align:center;}
.panel.is-sent > :is(h1,.sub,form,.legal){display:none;}
.panel.is-sent .susent{display:flex;}
.susent-mark{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin-bottom:20px;color:var(--plum-bright);
  background:radial-gradient(circle at 30% 25%,rgba(214,120,170,.28),rgba(214,120,170,.08) 70%);border:1px solid rgba(214,120,170,.35);
  box-shadow:0 10px 30px -12px rgba(214,120,170,.55);}
.susent h1:focus{outline:none;}
.susent-addr{margin-top:6px;font:600 16px var(--disp);color:var(--ink);overflow-wrap:anywhere;}
.susent-how{margin-top:16px;font-size:13.5px;line-height:1.55;color:var(--ink-faint);max-width:34ch;}
.susent .quiet{margin-top:26px;min-height:44px;}
.susent-note{min-height:20px;margin-top:10px;font-size:13px;color:var(--plum-bright);}
.susent-note.bad{color:#E0776A;}
.susent .link{margin-top:6px;min-height:44px;color:var(--ink-soft);}
@media (max-width:480px){ .susent-addr{font-size:14px;} }
/* THE SWITCH IS SEEN (Anthem, 2026-10-08: "it just kind of peers at the
   bottom, you could barely notice the change"). The sent state is the same
   card in a second state, and that was the problem: same width, same corner,
   same place on the page, so the swap read as a line changing under the
   button. Now the form leaves and the message arrives: the panel dips and
   fades as the form goes, then comes back narrower with the mark rising
   into place, and the scene behind it brightens for a moment. Two short
   movements, both honoured by prefers-reduced-motion. */
.panel{transition:width .36s cubic-bezier(.2,.8,.2,1),padding .36s cubic-bezier(.2,.8,.2,1);}
.panel.is-leaving{animation:susent-leave .26s ease-in forwards;}
.panel.is-sent{width:min(400px,100%);padding:44px 34px 34px;animation:susent-arrive .5s cubic-bezier(.2,.8,.2,1) both;}
.panel.is-sent .susent-mark{width:76px;height:76px;margin-bottom:22px;animation:susent-mark .7s cubic-bezier(.2,.8,.2,1) .12s both;}
.panel.is-sent .susent-mark svg{width:32px;height:32px;}
.panel.is-sent .susent h1{font-size:28px;}
.panel.is-sent .susent-how{margin-top:18px;}
.loginscene::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(60% 50% at 50% 45%,rgba(214,120,170,.22),rgba(214,120,170,0) 70%);}
.loginscene.is-sent::after{animation:susent-glow 1.4s ease-out both;}
@keyframes susent-leave{to{opacity:0;transform:translateY(14px) scale(.985);}}
@keyframes susent-arrive{from{opacity:0;transform:translateY(-18px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes susent-mark{from{opacity:0;transform:translateY(16px) scale(.8);}to{opacity:1;transform:none;}}
@keyframes susent-glow{0%{opacity:0;}30%{opacity:1;}100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .panel,.panel.is-leaving,.panel.is-sent,.panel.is-sent .susent-mark,.loginscene.is-sent::after{animation:none;transition:none;}
}

/* A PROFILE WITH NOTHING IN IT YET (2026-10-05). The way into the read is
   part of the hero card, with room above it; and a page shorter than the
   window still ends at the foot of the window, so the SuperQ mark that closes
   every page does not float in the middle of an empty one. */
body.sq-shell .hero .sqcorenav-in{margin-top:28px;}
body.sq-shell:not([data-printing]) .view.on > .page{min-height:calc(100vh - 74px);}
@media (max-width:760px){
  body.sq-shell:not([data-printing]) .view.on > .page{min-height:calc(100vh - 53px - 66px - 84px - env(safe-area-inset-bottom,0px));}
}

/* A QUESTION SCREEN ENDS WHERE ITS QUESTION DOES (2026-10-05). The scene kept
   a full window of its own height under the progress bar, and the page's
   closing mark sat below that, so every question scrolled about a quarter of
   a screen to an empty footer. While a read is being answered there is no
   footer and no reserved room: one screen, unless the answers need more. */
body.sq-onboarding .sqfoot{display:none !important;}
body.sq-shell.sq-onboarding:not([data-printing]) .view.on > .page{min-height:100vh;padding-bottom:32px;}
body.sq-onboarding .asmscene{min-height:0;padding-bottom:24px;}
@media (max-width:760px){ body.sq-shell.sq-onboarding #views{padding-bottom:0;} }
/* On a phone the question shares the counter's left edge, and the answers get
   the width back. */
@media (max-width:760px){ body.sq-onboarding .asmscene{padding-left:0;padding-right:0;} }

/* FOCUS SENT TO A HEADING IS FOR A SCREEN READER, NOT A BOX (2026-10-05).
   When the tour closes it hands focus to the name at the top of the profile so
   reading starts there; the browser drew its focus ring around the three-line
   name. A heading that only takes focus from code shows none. */
body.sq-shell :is(h1,h2,h3)[tabindex="-1"]:focus{outline:none;}
@media (max-width:760px){ .sqtour-skip{min-height:44px;padding-left:10px;padding-right:10px;margin-right:-10px;} }

/* NOT IN A TEAM YET: ONE DECISION, TWO ANSWERS (2026-10-05). */
.sqsolo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;align-items:stretch;}
.sqsolo-card{display:flex;flex-direction:column;gap:12px;padding:26px 26px 24px;border:1px solid var(--line);border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:0 18px 44px -28px rgba(0,0,0,.7);}
.sqsolo-card:first-child{border-color:rgba(214,120,170,.38);background:linear-gradient(160deg,rgba(214,120,170,.10),rgba(255,255,255,.015) 60%);}
.sqsolo-k{font:700 11px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--plum-bright);}
.sqsolo-card h3{font:700 22px/1.15 var(--disp);letter-spacing:-.01em;color:var(--ink);margin:0;}
.sqsolo-say{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0 0 6px;min-height:42px;}
.sqsolo-card input{flex:none !important;width:100%;min-height:46px;background:var(--field);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;color:var(--ink);font-family:inherit;font-size:14.5px;transition:border-color .15s ease,background .15s ease;}
.sqsolo-card input:focus{outline:none;border-color:rgba(162,78,129,.55);background:rgba(162,78,129,.06);}
.sqsolo-card input::placeholder{color:var(--ink-faint);}
.sqsolo-card > button{margin-top:auto;align-self:flex-start;min-height:44px;}
.sqsolo-card > button.primary{margin-top:10px;}
.sqsolo-card > button.quiet{margin-top:10px;color:var(--ink);}
@media (max-width:760px){ .sqsolo{grid-template-columns:1fr;gap:14px;} .sqsolo-card{padding:22px 18px 20px;} .sqsolo-say{min-height:0;} .sqsolo-card > button{align-self:stretch;justify-content:center;text-align:center;} }
@media (max-width:760px){ body.sq-shell .gd-m{min-height:44px;} }
/* The count in the under-pressure read sat under the theme button on a phone. */
@media (max-width:760px){ [data-view="assessment"] .asmmeta{padding-right:64px;} }

/* The Calibrate heading's glow reached past the right edge, and a phone laid
   the whole screen out 4px wider to fit it (2026-10-05). */
@media (max-width:760px){
  [data-view="calibrate"] .calscene{overflow-x:clip;}
  body.sq-shell #sqToCalibrate{min-height:44px;display:inline-flex;align-items:center;}
}

/* THE CORE READ'S WELCOME (2026-10-05): the under-pressure welcome's card. */
.sqcorewelcome{align-items:center;}
.sqcorewelcome .sqwelcome .primary{margin-top:30px;min-width:180px;justify-content:center;}
.sqcorewelcome .sqwelcome .link{margin-top:6px;min-height:44px;color:var(--ink-faint);}
.sqcorewelcome .sqwelcome h1:focus{outline:none;}
body.sq-onboarding .asmscene.sqcorewelcome{min-height:calc(100vh - 80px);}
@media (max-width:760px){ .sqcorewelcome .sqwelcome{padding:28px 20px 22px;} body.sq-onboarding .asmscene.sqcorewelcome{align-items:flex-start;min-height:0;padding-top:8px;} }

/* The Guide's locked sections carry their own way in (2026-10-05). */
body.sq-shell .sqlayerask{margin-top:14px;min-height:44px;color:var(--ink);}

/* A card that declines on purpose answers in the page's voice (2026-10-05). */
body.sq-shell .sqcard-answer{font-size:15px;line-height:1.55;margin-top:14px;max-width:60ch;}

/* The More sheet holds the menu and six rows of Your reads now (2026-10-05):
   it may use the height of the screen, so the count at its foot is in view. */
@media (max-width:760px){
  .sqmore-sheet,.sqmore-sheet.two{max-height:calc(100vh - 66px - 20px - env(safe-area-inset-bottom,0px));
    /* dvh, not vh: on iPhone 100vh is taller than the visible screen, so the
       sheet's top (Pairs) ran off it. 80px keeps it below the pinned top bar. */
    max-height:calc(100dvh - 66px - 80px - env(safe-area-inset-bottom,0px));}
  .sqmore-sheet .sqmore-reads button{min-height:44px;padding-top:4px;padding-bottom:4px;}
}

/* THE PINNED SECTION BAR SITS UNDER ANYTHING THAT OPENS OVER THE PAGE
   (Anthem, 2026-10-05: "the X disappears under the navigation bar"). It was
   stacked above the side drawer and its backdrop, so with the profile
   scrolled it covered the drawer's top edge, close button included, and
   stayed bright while the rest of the page dimmed. It belongs to the page:
   above the page's content, below the backdrop (40) and the drawer (50). */
body.sq-shell [data-view] .sqsecnav.stuck{z-index:38;}

/* WHO CAN READ THIS, LIFTED (2026-10-05). Two cards in the drawer, each with
   its mark, its name and a pill for its state. */
.drawer .sqshare-card{margin:0 0 16px;padding:22px 22px 20px;border:1px solid var(--line);border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));box-shadow:0 18px 44px -28px rgba(0,0,0,.75);}
.drawer .sqshare-card.on{border-color:rgba(214,120,170,.38);background:linear-gradient(160deg,rgba(214,120,170,.11),rgba(255,255,255,.015) 62%);}
.drawer .sqshare-card + .sqshare-card{border-top:1px solid var(--line);}
.drawer .sqshare-card.on + .sqshare-card.on,.drawer .sqshare-card + .sqshare-card.on{border-top-color:rgba(214,120,170,.38);}
.drawer .sqshare-head{display:flex;align-items:center;gap:12px;margin:0 0 12px;}
.drawer .sqshare-head .eyebrow{flex:1;margin:0;font:700 17px/1.2 var(--disp);letter-spacing:-.01em;text-transform:none;color:var(--ink);}
.drawer .sqshare-ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink-faint);
  background:rgba(255,255,255,.04);border:1px solid var(--line);}
.drawer .sqshare-card.on .sqshare-ic{color:var(--plum-bright);background:radial-gradient(circle at 30% 25%,rgba(214,120,170,.28),rgba(214,120,170,.08) 70%);border-color:rgba(214,120,170,.35);}
.drawer .sqshare-ic svg{width:19px;height:19px;}
.drawer .sqshare-pill{flex:none;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;border:1px solid var(--line);
  font:700 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.drawer .sqshare-pill.on{color:var(--plum-bright);border-color:rgba(214,120,170,.45);background:rgba(214,120,170,.10);}
.drawer .sqshare-pill.on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--plum-bright);box-shadow:0 0 8px rgba(214,120,170,.9);}
.drawer .sqshare-card .hint{font-size:14px;line-height:1.55;color:var(--ink-soft);}
.drawer .sqshare-card .invrow{align-items:center;}
.drawer .sqshare-card button{min-height:44px;}
.drawer .sqshare-card #sqCopyLink{color:var(--ink);}

/* WHAT SITS UNDERNEATH, ACROSS BOTH COLUMNS (2026-10-05). */
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens > section.block.gunder{
  column-span:all;break-inside:avoid;margin-top:32px;padding:28px 30px 30px;border:1px solid var(--line);border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:0 18px 44px -28px rgba(0,0,0,.7);}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .gunder > .eyebrow{display:block;margin:0;font:700 20px/1.2 var(--disp);letter-spacing:-.01em;text-transform:none;color:var(--ink);border:0;padding:0;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"]) .gunder > .grules{display:grid;grid-template-columns:1fr;gap:22px 34px;margin-top:22px !important;}
@media (min-width:1280px){ body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"]) .gunder > .grules{grid-template-columns:repeat(3,1fr);} }
body.sq-shell:not([data-printing]) .gunder .grule{border-left-color:rgba(214,120,170,.55);}
@media (max-width:760px){
  body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .lens > section.block.gunder{padding:22px 18px;}
}

/* ---------------------------------------------------------------- THE LOCK
   One look for anything not open yet (lock.js, 2026-10-05). */
.sqlock{position:relative;display:flex;flex-direction:column;gap:14px;margin:0;padding:26px 26px 24px;border:1px dashed rgba(214,120,170,.42);border-radius:var(--r-card);
  background:linear-gradient(160deg,rgba(214,120,170,.07),rgba(255,255,255,.012) 60%);}
.sqlock-head{display:flex;align-items:center;gap:14px;}
.sqlock-ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--plum-bright);
  background:radial-gradient(circle at 30% 25%,rgba(214,120,170,.30),rgba(214,120,170,.08) 70%);border:1px solid rgba(214,120,170,.40);box-shadow:0 10px 26px -12px rgba(214,120,170,.6);}
.sqlock-ic svg{width:21px;height:21px;}
.sqlock-name{flex:1;min-width:0;}
.sqlock-k{display:block;font:700 10.5px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--plum-bright);margin-bottom:6px;}
.sqlock-t{margin:0;font:700 22px/1.15 var(--disp);letter-spacing:-.01em;color:var(--ink);}
.sqlock-count{flex:none;font:500 15px/1 var(--disp);color:var(--ink-soft);white-space:nowrap;}
.sqlock-count b{font-size:22px;font-weight:700;color:var(--ink);}
.sqlock-gets{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-soft);max-width:52ch;}
.sqlock-pips{display:flex;gap:6px;max-width:420px;}
.sqlock-pips i{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.10);}
.sqlock-pips i.on{background:linear-gradient(90deg,#B4699A,#D678AA);box-shadow:0 0 10px rgba(214,120,170,.55);}
.sqlock-bar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.10);max-width:420px;overflow:hidden;}
.sqlock-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#B4699A,#D678AA);}
.sqlock-needs{margin:0;font:600 15px/1.45 var(--disp);color:var(--ink);}
.sqlock-acts{display:flex;gap:10px;flex-wrap:wrap;}
.sqlock-acts button{min-height:44px;}
.sqlock-why{margin:2px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--ink-faint);max-width:64ch;}
[data-theme="light"] .sqlock-pips i,[data-theme="light"] .sqlock-bar{background:rgba(60,30,60,.12);}
@media (max-width:760px){ .sqlock{padding:22px 18px 20px;} .sqlock-t{font-size:20px;} .sqlock-acts button{flex:1 1 auto;justify-content:center;text-align:center;} }
@media print{ .sqlock{display:none !important;} }

/* TEAM HEALTH, OPEN (2026-10-05). */
body.sq-shell .sqhealth-sum{margin:10px 0 0;font:600 17px/1.45 var(--disp);color:var(--ink);max-width:48ch;}
body.sq-shell .sqhealth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;}
body.sq-shell .sqhealth-tile{display:flex;flex-direction:column;gap:10px;padding:16px 16px 14px;border:1px solid var(--line);border-radius:var(--r-card);background:rgba(255,255,255,.025);}
body.sq-shell .sqhealth-d{font:700 16px/1.2 var(--disp);color:var(--ink);}
body.sq-shell .sqhealth-v{display:inline-flex;align-items:center;gap:8px;font:700 11px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);}
body.sq-shell :is(.sqhealth-v,.sqhealth-key span) i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink-faint);}
body.sq-shell .sqhealth-tile.click{border-color:rgba(214,120,170,.40);background:linear-gradient(160deg,rgba(214,120,170,.10),rgba(255,255,255,.015) 70%);}
body.sq-shell .sqhealth-tile.click .sqhealth-v{color:var(--plum-bright);}
body.sq-shell :is(.sqhealth-tile.click .sqhealth-v,.sqhealth-key .click) i{background:var(--plum-bright);box-shadow:0 0 8px rgba(214,120,170,.8);}
body.sq-shell .sqhealth-tile.grind{border-color:rgba(224,174,114,.38);background:linear-gradient(160deg,rgba(224,174,114,.08),rgba(255,255,255,.015) 70%);}
body.sq-shell .sqhealth-tile.grind .sqhealth-v{color:var(--amber-bright);}
body.sq-shell :is(.sqhealth-tile.grind .sqhealth-v,.sqhealth-key .grind) i{background:var(--amber-bright);box-shadow:0 0 8px rgba(224,174,114,.7);}
body.sq-shell .sqhealth-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;font-size:13px;color:var(--ink-faint);}
body.sq-shell .sqhealth-key span{display:inline-flex;align-items:center;gap:8px;}

/* On Super Team the lock keeps its own edge and wash inside the room's grid,
   and the open room is laid out so nothing stretches to fill a column:
   Team Shape down the left, Team health and the way to Dyads on the right. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block.sqlock{padding:26px 26px 24px;border:1px dashed rgba(214,120,170,.42);
  background:linear-gradient(160deg,rgba(214,120,170,.07),rgba(255,255,255,.012) 60%);}
@media (min-width:1000px){
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom{align-items:start;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom:has(> .sqhealth){grid-template-rows:auto 1fr;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block:first-of-type:not(.sqlock){grid-column:1;grid-row:1 / span 2;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block.sqhealth{grid-column:2;grid-row:1;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block:has(> #stToDyads){grid-column:2;grid-row:2;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block.sqlock{align-self:stretch;}
}

/* ------------------------------------------------ SUPER TEAM, RE-ORDERED
   (Anthem, 2026-10-05: "the layout seems a bit weird on this page... visual
   hierarchy is also a big problem... it just feels a little cheap").

   The page ran: hero, the people, four settings cards, and only then what the
   team is for (its shape and health), then nine full-width cards of advice.
   It now reads in the order of what matters: the room (shape and health),
   your first 90 days in it, the people, and the settings for your seat last.
   The order is CSS only; nothing in team.js is drawn in a different place. */
body.sq-shell:not([data-printing]) [data-view="superteam"] .page{display:flex;flex-direction:column;}
body.sq-shell:not([data-printing]) [data-view="superteam"] .page > header.head{order:1;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom{order:2;margin-top:8px;padding-top:0;border-top:0;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart{order:3;margin-top:64px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] .page > section.block{order:4;margin-top:64px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stLeaveSlot{order:5;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFine{order:6;}
/* One heading style for the page's three parts. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom:not(:empty)::before{content:"The room";grid-column:1 / -1;
  font:700 28px/1.15 var(--disp);letter-spacing:-.02em;color:var(--ink);margin:0 0 6px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] :is(#stFastStart > .block,.page > section.block) > .eyebrow:first-child{display:block;
  font:700 28px/1.15 var(--disp);letter-spacing:-.02em;text-transform:none;color:var(--ink);margin:0;padding:0;border:0;height:auto;}

/* YOUR FIRST 90 DAYS: where you sit as three tiles, then the three stages
   side by side, each one card with its three moves, instead of nine cards
   in a column. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart > .block{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;border:0;background:none;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart > .block > :is(.eyebrow,.hint,.tells){grid-column:1 / -1;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart > .block > .hint{margin:-6px 0 6px !important;max-width:64ch;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .tells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 !important;padding:0;border:0;background:none;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .tells .tell{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0;padding:18px 20px;
  border:1px solid rgba(214,120,170,.34);border-radius:var(--r-card);background:linear-gradient(160deg,rgba(214,120,170,.10),rgba(255,255,255,.015) 70%);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .tells .tell .sig{font:700 11px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--plum-bright);width:auto;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .tells .tell .mean{font:600 16px/1.4 var(--disp);color:var(--ink);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .pattern{display:flex;flex-direction:column;margin:0 !important;padding:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:0 18px 44px -28px rgba(0,0,0,.7);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .pattern .prow{display:block;margin:0;padding:20px 22px 18px;border:0;border-bottom:1px solid var(--line);background:rgba(255,255,255,.025);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .pattern .prow .k{font:700 11px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--amber-bright);width:auto;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .pattern .prow .v{margin-top:10px;font:600 16px/1.4 var(--disp);color:var(--ink);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .pattern .move{margin:0 !important;padding:16px 22px 16px;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .pattern .prow + .move{border-top:0;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .pattern .movelabel{margin:0;font:700 10.5px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--plum-bright);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .pattern .movetext{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);}
@media (max-width:1099px){
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart > .block{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:760px){
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .tells{grid-template-columns:minmax(0,1fr);gap:10px;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] :is(#stFastStart,.page > section.block){margin-top:44px;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom:not(:empty)::before,
  body.sq-shell:not([data-printing]) [data-view="superteam"] :is(#stFastStart > .block,.page > section.block) > .eyebrow:first-child{font-size:24px;}
}

/* The room's heading leads its grid; the settings get a name of their own. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom:not(:empty)::before{order:-1;}
@media (min-width:1000px){
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom:not(:empty)::before{grid-row:1;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom:has(> .sqhealth){grid-template-rows:auto auto 1fr;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block:first-of-type:not(.sqlock){grid-row:2 / span 2;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block.sqhealth{grid-row:2;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block:has(> #stToDyads){grid-row:3;}
}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .invlist{order:1;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec{order:3;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList:has(> .dsec)::before{content:"Your seat on this team";order:2;grid-column:1 / -1;
  margin:28px 0 0;font:700 11px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);}

/* SUPER TEAM, WITH SOME LIFE IN IT (2026-10-05). */
/* Nothing in the room stretches to fill a row, with or without Team health. */
@media (min-width:1000px){
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block{align-self:start;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom:not(:has(> .sqhealth,> .sqlock)) > section.block:has(> #stToDyads){grid-row:2;}
}
/* The faces: bigger, overlapping, each lifting on its own. */
body.sq-shell:not([data-printing]) [data-view="superteam"] .head .avrow{display:flex;align-items:center;padding-left:6px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] .head .avrow .a{width:52px;height:52px;margin-left:-10px;border:2px solid var(--bg);border-radius:50%;
  box-shadow:0 0 0 1px rgba(214,120,170,.45),0 10px 22px -10px rgba(0,0,0,.8);transition:transform .22s var(--ease),box-shadow .22s var(--ease);font-size:15px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] .head .avrow .a:hover{transform:translateY(-5px) scale(1.06);z-index:2;box-shadow:0 0 0 2px var(--plum-bright),0 16px 26px -10px rgba(214,120,170,.55);}
body.sq-shell:not([data-printing]) [data-view="superteam"] .head .meta{align-items:center;gap:14px;}
@media (prefers-reduced-motion:no-preference){
  body.sq-shell:not([data-printing]) [data-view="superteam"].on .head .avrow .a{animation:sqfacein .5s var(--ease) both;}
  body.sq-shell:not([data-printing]) [data-view="superteam"].on .head .avrow .a:nth-child(2){animation-delay:.05s}
  body.sq-shell:not([data-printing]) [data-view="superteam"].on .head .avrow .a:nth-child(3){animation-delay:.1s}
  body.sq-shell:not([data-printing]) [data-view="superteam"].on .head .avrow .a:nth-child(4){animation-delay:.15s}
  body.sq-shell:not([data-printing]) [data-view="superteam"].on .head .avrow .a:nth-child(5){animation-delay:.2s}
  body.sq-shell:not([data-printing]) [data-view="superteam"].on .head .avrow .a:nth-child(6){animation-delay:.25s}
  body.sq-shell:not([data-printing]) [data-view="superteam"].on .head .avrow .a:nth-child(n+7){animation-delay:.3s}
}
@keyframes sqfacein{from{opacity:0;transform:translateY(10px) scale(.86);}to{opacity:1;transform:none;}}
/* Two facts about the whole team, under the seats. */
body.sq-shell .sqhero-chips{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
body.sq-shell .sqhero-chip{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  font:500 13px/1 var(--disp);color:var(--ink-soft);}
body.sq-shell .sqhero-chip[hidden]{display:none;}
body.sq-shell .sqhero-chip b{color:var(--ink);font-weight:700;}
body.sq-shell .sqhero-chip i{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);}
body.sq-shell .sqhero-chip i.on{background:var(--plum-bright);box-shadow:0 0 8px rgba(214,120,170,.9);}
/* The room in a line. */
body.sq-shell .sqleans-k{margin:14px 0 10px;font:700 10.5px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--plum-bright);}
body.sq-shell .sqleans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 18px;}
body.sq-shell .sqlean{display:flex;flex-direction:column;gap:5px;padding:11px 13px 12px;border-radius:var(--r-card);border:1px solid rgba(214,120,170,.34);
  background:linear-gradient(160deg,rgba(214,120,170,.12),rgba(255,255,255,.015) 75%);transition:transform .2s var(--ease),border-color .2s var(--ease);}
body.sq-shell .sqlean:hover{transform:translateY(-2px);border-color:rgba(214,120,170,.6);}
body.sq-shell .sqlean small{font:600 10px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}
body.sq-shell .sqlean b{font:700 16px/1.1 var(--disp);color:var(--ink);}
body.sq-shell .sqlean.even{border-color:var(--line);background:rgba(255,255,255,.025);}
body.sq-shell .sqlean.even b{color:var(--ink-soft);}
/* The people: a little bigger, and each card lifts. */
body.sq-shell:not([data-printing]) [data-view="superteam"] .invlist .invteam{transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);}
body.sq-shell:not([data-printing]) [data-view="superteam"] .invlist .invteam[data-guide]:hover{transform:translateY(-2px);border-color:rgba(214,120,170,.5);box-shadow:0 14px 30px -18px rgba(214,120,170,.5);}
body.sq-shell:not([data-printing]) [data-view="superteam"] .invlist .invteam .iav{width:46px;height:46px;font-size:14px;}
body.sq-shell .sqlean b{text-transform:none;letter-spacing:-.005em;}

/* THE ROOM, WITHOUT A TALL COLUMN BESIDE A SHORT ONE (Anthem, 2026-10-05:
   "that huge gap under pairs and the layout is still there"). Team Shape is
   six bars tall and nothing beside it is, so any two-column arrangement left
   a hole. Team Shape now takes the full width, its six leans in one row and
   its bars in two columns of three; Team health and the way to Pairs share
   the row under it at the same height. */
@media (min-width:1000px){
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom:has(> .sqhealth){grid-template-rows:none;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block:first-of-type:not(.sqlock){grid-column:1 / -1;grid-row:2;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;align-content:start;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block:first-of-type:not(.sqlock) > :not(div),
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block:first-of-type:not(.sqlock) > .sqleans{grid-column:1 / -1;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block:first-of-type:not(.sqlock) > .sqleans{grid-template-columns:repeat(6,minmax(0,1fr));}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block.sqhealth{grid-column:1;grid-row:3;align-self:stretch;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block:has(> #stToDyads){grid-column:2;grid-row:3;align-self:stretch;display:flex;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block:has(> #stToDyads) > #stToDyads{flex:1;display:flex;flex-direction:column;justify-content:center;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom:not(:has(> .sqhealth,> .sqlock)) > section.block:has(> #stToDyads){grid-column:1 / -1;grid-row:3;}
}

/* HOW THIS TEAM TENDS TO WORK (2026-10-05): six plain sentences, and the
   ones where you differ carry an amber edge and say how. */
body.sq-shell .sqways-k,body.sq-shell .sqways-d{grid-column:1 / -1;margin:16px 0 12px;font:700 10.5px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--plum-bright);}
body.sq-shell .sqways-d{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line);color:var(--ink-faint);}
body.sq-shell .sqways{grid-column:1 / -1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
body.sq-shell .sqway{display:flex;flex-direction:column;gap:10px;padding:16px 16px 15px;border-radius:var(--r-card);border:1px solid var(--line);background:rgba(255,255,255,.03);}
body.sq-shell .sqway-t{font:700 16px/1.3 var(--disp);color:var(--ink);}
body.sq-shell .sqway.even .sqway-t{color:var(--ink-soft);}
body.sq-shell .sqway.you{border-color:rgba(224,174,114,.45);background:linear-gradient(160deg,rgba(224,174,114,.10),rgba(255,255,255,.015) 75%);}
body.sq-shell .sqway-you{font-size:13.5px;line-height:1.45;color:var(--ink-soft);}
body.sq-shell .sqway-you b{display:block;margin-bottom:5px;font:700 10px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--amber-bright);}
body.sq-shell .sqways-you{grid-column:1 / -1;margin:14px 0 0;font:600 15px/1.45 var(--disp);color:var(--ink);}
body.sq-shell .sqways-you[hidden]{display:none;}
@media (max-width:760px){ body.sq-shell .sqways{grid-template-columns:minmax(0,1fr);} }
@media (min-width:761px) and (max-width:999px){ body.sq-shell .sqways{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* ------------------------------------------- SUPER TEAM, HIGH END (2026-10-05)
   Anthem: lift the tiles, keep what is shared together and what differs
   together, meters that do not look cheap; visual polish, not points. */
body.sq-shell .sqmatch{grid-column:1 / -1;margin:14px 0 4px;}
body.sq-shell .sqmatch[hidden]{display:none;}
body.sq-shell .sqmatch-say b{display:block;font:700 22px/1.25 var(--disp);letter-spacing:-.01em;color:var(--ink);}
body.sq-shell .sqmatch-say span{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink-soft);}
body.sq-shell .sqways-wrap{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:10px;}
body.sq-shell .sqways-wrap:has(#stWaysDiff:not([hidden])){grid-template-columns:repeat(2,minmax(0,1fr));}
body.sq-shell .sqways-wrap:has(#stWaysDiff:not([hidden])) .sqways{grid-template-columns:minmax(0,1fr);}
body.sq-shell .sqways-col[hidden]{display:none;}
body.sq-shell .sqways-col .sqways-k{display:flex;align-items:center;gap:10px;margin:8px 0 12px;}
body.sq-shell .sqways-col .sqways-k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--plum-bright);box-shadow:0 0 10px rgba(214,120,170,.9);}
body.sq-shell .sqways-col.differ .sqways-k{color:var(--amber-bright);}
body.sq-shell .sqways-col.differ .sqways-k::before{background:var(--amber-bright);box-shadow:0 0 10px rgba(224,174,114,.85);}
/* The tiles, lifted. */
body.sq-shell .sqway{position:relative;gap:8px;padding:18px 20px 17px 22px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 40px -26px rgba(0,0,0,.95),0 2px 6px -2px rgba(0,0,0,.5);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);overflow:hidden;}
body.sq-shell .sqway::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#D678AA,#A24E81);}
body.sq-shell .sqway:hover{transform:translateY(-3px);border-color:rgba(214,120,170,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 28px 46px -24px rgba(214,120,170,.35),0 2px 6px -2px rgba(0,0,0,.5);}
body.sq-shell .sqway.you{border-color:rgba(224,174,114,.30);background:linear-gradient(180deg,rgba(224,174,114,.11),rgba(255,255,255,.02));}
body.sq-shell .sqway.you::before{background:linear-gradient(180deg,#E7BE86,#C98E4C);}
body.sq-shell .sqway.you:hover{border-color:rgba(224,174,114,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 28px 46px -24px rgba(224,174,114,.32),0 2px 6px -2px rgba(0,0,0,.5);}
body.sq-shell .sqway-t{font-size:17px;}
body.sq-shell .sqway-you{font-size:14px;color:var(--ink-soft);}
[data-theme="light"] body.sq-shell .sqway{background:var(--elev);border-color:var(--line);box-shadow:0 16px 30px -22px rgba(60,30,60,.35);}
/* The meters: one dot a person, in the zone they sit in. */
body.sq-shell .sqmeter{margin:0 0 22px;}
body.sq-shell .sqmeter-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;}
body.sq-shell .sqmeter-h b{font:700 16px/1.2 var(--disp);color:var(--ink);}
body.sq-shell .sqmeter-h span{font-size:12.5px;color:var(--ink-faint);text-align:right;}
body.sq-shell .sqmeter-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(255,255,255,.02));box-shadow:inset 0 2px 8px rgba(0,0,0,.5);}
body.sq-shell .sqmeter-z{display:flex;flex-direction:column;gap:9px;min-height:66px;padding:11px 12px 10px;border-radius:10px;border:1px solid transparent;transition:background .2s var(--ease);}
body.sq-shell .sqmeter-z.top{background:linear-gradient(180deg,rgba(214,120,170,.20),rgba(214,120,170,.06));border-color:rgba(214,120,170,.36);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
body.sq-shell .sqmeter-dots{display:flex;flex-wrap:wrap;gap:6px;min-height:14px;}
body.sq-shell .sqmeter-dots i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#F3B5D5,#B8608F 62%,#7C3B62);box-shadow:0 0 0 1px rgba(255,255,255,.10),0 4px 10px -3px rgba(214,120,170,.75);}
body.sq-shell .sqmeter-z:not(.top) .sqmeter-dots i{background:radial-gradient(circle at 32% 28%,#C9B4C4,#7B6577 62%,#4A3C48);box-shadow:0 0 0 1px rgba(255,255,255,.08);}
body.sq-shell .sqmeter-n{display:flex;align-items:baseline;gap:6px;margin-top:auto;font-size:12px;line-height:1.25;color:var(--ink-faint);}
body.sq-shell .sqmeter-n b{font:700 14px/1 var(--disp);color:var(--ink-soft);}
body.sq-shell .sqmeter-z.top .sqmeter-n{color:var(--ink-soft);} body.sq-shell .sqmeter-z.top .sqmeter-n b{color:var(--ink);}
[data-theme="light"] body.sq-shell .sqmeter-track{background:rgba(60,30,60,.05);box-shadow:inset 0 1px 4px rgba(60,30,60,.12);border-color:var(--line);}
/* What the team has opened, in the hero. */
body.sq-shell .sqmiles{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0;padding:0;}
body.sq-shell .sqmiles li{display:flex;align-items:center;gap:11px;padding:9px 16px 9px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);}
body.sq-shell .sqmiles li i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;position:relative;background:conic-gradient(var(--amber-bright) var(--arc,0%),rgba(255,255,255,.14) 0);-webkit-mask:radial-gradient(circle,transparent 8px,#000 8.5px);mask:radial-gradient(circle,transparent 8px,#000 8.5px);}
body.sq-shell .sqmiles li i svg{display:none;}
body.sq-shell .sqmiles li i svg{width:13px;height:13px;}
body.sq-shell .sqmiles li span{display:flex;flex-direction:column;gap:3px;}
body.sq-shell .sqmiles li b{font:700 13.5px/1 var(--disp);color:var(--ink-soft);}
body.sq-shell .sqmiles li small{font-size:11.5px;line-height:1;color:var(--ink-faint);}
body.sq-shell .sqmiles li.done{border-color:rgba(214,120,170,.42);background:linear-gradient(160deg,rgba(214,120,170,.16),rgba(255,255,255,.02));box-shadow:0 12px 26px -16px rgba(214,120,170,.6);}
body.sq-shell .sqmiles li.done i{border:0;background:conic-gradient(var(--amber-bright) 100%,transparent 0);box-shadow:0 0 12px rgba(224,174,114,.6);}
body.sq-shell .sqmiles li.done b{color:var(--ink);}
/* The room's cards, lifted to match. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block:not(.sqlock){border-color:rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -40px rgba(0,0,0,.95);}
@media (max-width:760px){ body.sq-shell .sqways-wrap:has(#stWaysDiff:not([hidden])){grid-template-columns:minmax(0,1fr);} body.sq-shell .sqmeter-z{padding:9px 8px;} body.sq-shell .sqmeter-n{flex-direction:column;gap:3px;} }

/* WHERE THE TEAM SITS: a question, a line, the people on it (2026-10-05). */
body.sq-shell .sqline-key{display:flex;align-items:center;gap:10px;grid-column:1 / -1;max-width:none;}
body.sq-shell .sqline-key i{flex:none;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#F3B5D5,#B8608F 62%,#7C3B62);
  box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgba(214,120,170,.35),0 6px 12px -4px rgba(214,120,170,.8);}
body.sq-shell .sqline{margin:0 0 26px;padding:20px 22px 18px;border-radius:var(--r-card);border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 36px -28px rgba(0,0,0,.95);}
body.sq-shell .sqline-q{margin:0 0 20px;font:700 17px/1.2 var(--disp);color:var(--ink);}
body.sq-shell .sqline-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;height:28px;margin:0 8px;}
body.sq-shell .sqline-rail{position:absolute;left:-8px;right:-8px;top:50%;height:4px;margin-top:-2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(214,120,170,.55),rgba(255,255,255,.14) 50%,rgba(214,120,170,.55));}
body.sq-shell .sqline-rail::before,body.sq-shell .sqline-rail::after{content:"";position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--bg);border:2px solid rgba(214,120,170,.7);}
body.sq-shell .sqline-rail::before{left:-2px;} body.sq-shell .sqline-rail::after{right:-2px;}
body.sq-shell .sqline-ends{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font:600 13px/1.3 var(--disp);color:var(--ink-soft);}
body.sq-shell .sqline-ends span:last-child{text-align:right;}
body.sq-shell .sqline-say{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--ink-faint);}
@media (min-width:1000px){ body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom .sqline{margin-bottom:16px;} }

/* THE METER (2026-10-05): a recessed track, a lit fill from the middle, one marker. */
body.sq-shell .sqgauge{position:relative;height:14px;border-radius:999px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(255,255,255,.04));box-shadow:inset 0 2px 6px rgba(0,0,0,.65);}
body.sq-shell .sqgauge-fill{position:absolute;top:2px;bottom:2px;border-radius:999px;background:linear-gradient(90deg,#A24E81,#E08BBB);box-shadow:0 0 14px rgba(214,120,170,.6);}
body.sq-shell .sqgauge-mid{position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:rgba(255,255,255,.28);}
body.sq-shell .sqgauge-knob{position:absolute;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#FFE3F1,#E08BBB 45%,#9A4477);border:2px solid #fff;
  box-shadow:0 0 0 4px rgba(214,120,170,.22),0 8px 18px -4px rgba(214,120,170,.9);}
body.sq-shell .sqline-key i{width:14px;height:14px;border:2px solid #fff;box-shadow:0 0 0 3px rgba(214,120,170,.22);}
[data-theme="light"] body.sq-shell .sqgauge{background:rgba(60,30,60,.08);box-shadow:inset 0 1px 4px rgba(60,30,60,.18);border-color:var(--line);}
[data-theme="light"] body.sq-shell .sqgauge-mid{background:rgba(60,30,60,.3);}

/* THE SPREAD (2026-10-05): the scale as one bar in three parts, each lit by
   how many sit there and carrying the number. */
body.sq-shell .sqspread{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:3px;border-radius:14px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(255,255,255,.03));box-shadow:inset 0 2px 6px rgba(0,0,0,.6);}
body.sq-shell .sqspread-p{display:grid;place-items:center;height:44px;border-radius:4px;
  background:linear-gradient(180deg,rgba(224,139,187,calc(.18 + var(--a) * .82)),rgba(162,78,129,calc(.14 + var(--a) * .78)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,calc(.06 + var(--a) * .3));}
body.sq-shell .sqspread-p.lo{border-radius:11px 4px 4px 11px;} body.sq-shell .sqspread-p.hi{border-radius:4px 11px 11px 4px;}
body.sq-shell .sqspread-p b{font:700 18px/1 var(--disp);color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.45);}
body.sq-shell .sqspread-p.top{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 22px -2px rgba(214,120,170,.75);}
body.sq-shell .sqspread-p.none{background:rgba(255,255,255,.025);box-shadow:none;}
body.sq-shell .sqspread-p.none b{color:var(--ink-faint);font-weight:500;text-shadow:none;}
body.sq-shell .sqline-ends.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:0 3px;}
body.sq-shell .sqline-ends.three span{text-align:center;}
body.sq-shell .sqline-ends.three span:nth-child(2){color:var(--ink-faint);font-weight:500;}
body.sq-shell .sqline-key{display:block;}
[data-theme="light"] body.sq-shell .sqspread{background:rgba(60,30,60,.06);box-shadow:inset 0 1px 4px rgba(60,30,60,.15);border-color:var(--line);}
[data-theme="light"] body.sq-shell .sqspread-p.none b{color:rgba(60,30,60,.45);}

/* ONE SECOND (2026-10-05): the question small, the conclusion as the headline,
   one strip divided by share, a legend of the parts with anyone in them. */
body.sq-shell .sqline-k{margin:0 0 8px;font:700 10.5px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--plum-bright);}
body.sq-shell .sqline-lead{margin:0;font:700 20px/1.2 var(--disp);letter-spacing:-.01em;color:var(--ink);}
body.sq-shell .sqline-sub{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--ink-soft);}
body.sq-shell .sqshare-bar{display:flex;gap:3px;height:12px;margin:16px 0 10px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.05);box-shadow:inset 0 1px 3px rgba(0,0,0,.5);}
body.sq-shell .sqshare-seg{display:block;height:100%;}
body.sq-shell .sqshare-seg.lo,body.sq-shell .sqshare-key.lo i{background:linear-gradient(90deg,#8E4472,#A24E81);}
body.sq-shell .sqshare-seg.mid,body.sq-shell .sqshare-key.mid i{background:linear-gradient(90deg,#D08BB5,#E3A4CC);}
body.sq-shell .sqshare-seg.hi,body.sq-shell .sqshare-key.hi i{background:linear-gradient(90deg,#F0C2DD,#FBE3F1);}
body.sq-shell .sqshare-keys{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink-soft);}
body.sq-shell .sqshare-key{display:inline-flex;align-items:center;gap:7px;}
body.sq-shell .sqshare-key i{width:10px;height:10px;border-radius:3px;}

/* The two groups weigh the same: both columns stretch, their tiles share the
   height equally, and the in-step tiles carry a line of their own. */
body.sq-shell .sqways-wrap:has(#stWaysDiff:not([hidden])){align-items:stretch;}
body.sq-shell .sqways-wrap:has(#stWaysDiff:not([hidden])) .sqways-col{display:flex;flex-direction:column;}
body.sq-shell .sqways-wrap:has(#stWaysDiff:not([hidden])) .sqways{flex:1;grid-auto-rows:1fr;}
body.sq-shell .sqways-wrap:has(#stWaysDiff:not([hidden])) .sqway{justify-content:center;}
body.sq-shell .sqway-same{font-size:14px;color:var(--ink-soft);}

/* NOT CLICKABLE, SO NO HOVER (Anthem, 2026-10-05): the tiles, the room's
   cards and the people cards without a guide stay still under the pointer. */
body.sq-shell .sqway:hover,body.sq-shell .sqway.you:hover,body.sq-shell .sqlean:hover{transform:none;border-color:inherit;}
body.sq-shell .sqway:hover{border-color:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 40px -26px rgba(0,0,0,.95),0 2px 6px -2px rgba(0,0,0,.5);}
body.sq-shell .sqway.you:hover{border-color:rgba(224,174,114,.30);}

/* THE THREE DIFFERENCES, LIFTED (Anthem, 2026-10-06: "lifted", not listed):
   three tiles with the same raised finish as the rest of the page. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .tells .tell{position:relative;overflow:hidden;padding:20px 22px 20px 24px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 40px -26px rgba(0,0,0,.95),0 2px 6px -2px rgba(0,0,0,.5);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .tells .tell::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#D678AA,#A24E81);}
[data-theme="light"] body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .tells .tell{background:var(--elev);border-color:var(--line);box-shadow:0 16px 30px -22px rgba(60,30,60,.35);}
/* The three stage cards and the people cards, lifted the same way. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFastStart .pattern{border-color:rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -40px rgba(0,0,0,.95);}
body.sq-shell:not([data-printing]) [data-view="superteam"] .invlist .invteam,body.sq-shell:not([data-printing]) [data-view="superteam"] .dsec{border-color:rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 20px 36px -30px rgba(0,0,0,.95);}

/* No "The room" heading (Anthem, 2026-10-05): the Team Shape and Team health
   cards name themselves, and the hero already says what is open. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom:not(:empty)::before{display:none;content:none;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom{margin-top:16px;}

/* "Where the team sits" is a title of the same rank as Team Shape and Team
   health (Anthem, 2026-10-05). */
body.sq-shell .sqways-d{margin:34px 0 10px;padding-top:30px;font:700 22px/1.15 var(--disp);letter-spacing:-.02em;text-transform:none;color:var(--ink);}

/* THE TEAM'S LOGO (2026-10-06): a lit tile in the hero's top-right corner,
   made of the hero's own materials (its plum edge, its glass, its glow), so
   it reads as part of the card rather than a square set on it. Logos sit
   inside with room around them. Empty, the owner sees a plus and the words
   "Add your logo"; everyone else the team's initials. */
body.sq-shell:not([data-printing]) [data-view="superteam"] .page > header.head{padding-right:220px;}
body.sq-shell .sqlogo{position:absolute;right:36px;top:36px;width:136px;height:136px;border-radius:30px;display:grid;place-items:center;
  border:1px solid rgba(162,78,129,.45);background:linear-gradient(160deg,rgba(214,120,170,.10),rgba(255,255,255,.015) 65%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 48px -28px rgba(0,0,0,.95);}
body.sq-shell .sqlogo::before{content:"";position:absolute;inset:-18px;border-radius:44px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(214,120,170,.22),rgba(214,120,170,0) 70%);}
body.sq-shell .sqlogo:not(.has){border-style:dashed;border-color:rgba(214,120,170,.5);}
body.sq-shell .sqlogo.has{background:rgba(255,255,255,.03);}
body.sq-shell .sqlogo img{width:100%;height:100%;padding:16px;box-sizing:border-box;object-fit:contain;border-radius:30px;display:block;}
body.sq-shell .sqlogo-init{font:700 36px/1 var(--disp);letter-spacing:-.02em;color:var(--plum-bright);opacity:.85;}
body.sq-shell .sqlogo-plus{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;margin-bottom:34px;
  background:linear-gradient(160deg,#D678AA,#A24E81);box-shadow:0 10px 24px -8px rgba(214,120,170,.8);}
body.sq-shell .sqlogo-plus svg{width:18px;height:18px;}
body.sq-shell .sqlogo-add{position:absolute;left:0;right:0;bottom:20px;text-align:center;font:600 10px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);opacity:.85;pointer-events:none;}
body.sq-shell .sqlogo:not(.has):hover .sqlogo-add{color:var(--plum-bright);opacity:1;}
body.sq-shell .sqlogo-acts{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:6px;justify-content:center;padding:6px;border-radius:999px;
  opacity:0;transform:translateY(6px);transition:opacity .18s var(--ease),transform .18s var(--ease);background:rgba(10,6,14,.78);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);}
body.sq-shell .sqlogo.has:hover .sqlogo-acts,body.sq-shell .sqlogo.has:focus-within .sqlogo-acts{opacity:1;transform:none;}
body.sq-shell .sqlogo:not(.has) .sqlogo-acts{inset:0;padding:0;border:0;background:transparent;opacity:1;transform:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
body.sq-shell .sqlogo:not(.has) .sqlogo-acts .sqlogo-btn{position:absolute;inset:0;opacity:0;border-radius:30px;cursor:pointer;}
body.sq-shell .sqlogo:not(.has):hover{border-color:rgba(214,120,170,.9);background:linear-gradient(160deg,rgba(214,120,170,.16),rgba(255,255,255,.02) 65%);}
body.sq-shell .sqlogo-btn{min-height:30px;padding:0 12px;border-radius:999px;border:0;background:transparent;color:#fff;font:600 12px/1 var(--disp);cursor:pointer;}
body.sq-shell .sqlogo-btn:hover{background:rgba(255,255,255,.14);}
body.sq-shell .sqlogo-note{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;font-size:12px;color:var(--ink-faint);}
body.sq-shell .sqlogo-note.bad{color:#E0776A;}
body.sq-shell .sqlogo-note:empty{display:none;}
[data-theme="light"] body.sq-shell .sqlogo{background:var(--elev);box-shadow:0 18px 36px -24px rgba(60,30,60,.4);}
[data-theme="light"] body.sq-shell .sqlogo-acts{background:rgba(255,255,255,.92);border-color:var(--line);}
[data-theme="light"] body.sq-shell .sqlogo-btn{color:var(--ink);}
@media (max-width:760px){
  /* On a phone the mark sits in the hero's top-right corner, small, and the
     faces row may wrap under it. */
  body.sq-shell:not([data-printing]) [data-view="superteam"] .page > header.head{padding-right:20px;}
  body.sq-shell .sqlogo{top:20px;right:20px;width:76px;height:76px;border-radius:20px;}
  body.sq-shell .sqlogo::before{inset:-10px;border-radius:28px;}
  body.sq-shell .sqlogo img{padding:9px;border-radius:20px;} body.sq-shell .sqlogo:not(.has) .sqlogo-acts .sqlogo-btn{border-radius:20px;}
  body.sq-shell .sqlogo-init{font-size:22px;} body.sq-shell .sqlogo-add{display:none;} body.sq-shell .sqlogo-plus{margin:0;width:34px;height:34px;}
  body.sq-shell .sqlogo.has .sqlogo-acts{left:6px;right:6px;bottom:6px;padding:3px;}
  body.sq-shell .sqlogo:not(.has) .sqlogo-acts{opacity:1;}
  body.sq-shell .sqlogo-note{left:auto;right:0;transform:none;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] .page > header.head > .eyebrow,
  body.sq-shell:not([data-printing]) [data-view="superteam"] .page > header.head > h1{padding-right:92px;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] .head .meta{flex-wrap:wrap;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] .head .avrow .a{width:44px;height:44px;margin-left:-12px;font-size:13px;}
}

/* YOUR SEAT ON THIS TEAM, AS A LIST (Anthem, 2026-10-05: "I don't think this
   section needs to be in windows. We could keep this listed"). The four
   settings were four cards in a 2x2 grid; they are now four rows of one
   lifted card, each row a heading on the left and its text and control on
   the right, divided by hairlines. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList:has(> .dsec)::after{content:"";order:4;grid-column:1 / -1;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec{grid-column:1 / -1;display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:32px;align-items:start;
  padding:24px 26px;border-radius:0;border:1px solid rgba(255,255,255,.09);border-top-width:0;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));box-shadow:none;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec:nth-of-type(1){border-top-width:1px;border-radius:var(--r-card) var(--r-card) 0 0;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec:last-of-type{border-radius:0 0 var(--r-card) var(--r-card);box-shadow:0 20px 36px -30px rgba(0,0,0,.95);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > .se{grid-column:1;margin:0;padding:0;border:0;font:700 17px/1.25 var(--disp);color:var(--ink);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > .se::before{display:none;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > :not(.se){grid-column:2;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > .hint:first-of-type{margin-top:0;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList{gap:16px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec + .dsec{margin-top:-16px !important;}
@media (max-width:760px){
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:18px 18px;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > :not(.se){grid-column:1;}
}
/* Rows read left to right: text and controls start at the left of their
   column and stop stretching. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > :not(.se){text-align:left;justify-self:start;max-width:100%;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > .hint{max-width:62ch;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > button.primary,
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > button.quiet{width:auto !important;max-width:none !important;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > .invrow{width:100%;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > .invrow:has(> textarea){max-width:560px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > .invrow:has(> .iemail){max-width:520px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > .invrow:has(> #tmCodeVal, > .code){max-width:460px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec button.link{padding-left:0;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > div[style*="justify-content:center"],
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > .invrow[style*="center"]{justify-content:flex-start !important;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec.center{text-align:left;margin-top:0 !important;padding-top:24px !important;border-top:0 !important;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec.center > .hint{margin-left:0 !important;margin-right:0 !important;}

/* THE SEAT'S SETTINGS, IN TWO NAMED GROUPS (2026-10-05). The old small
   "Your seat on this team" label goes; each group has a title of the same
   rank as the page's other sections, and its rows form one card. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList:has(> .dsec)::before,
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList:has(> .dsec)::after{display:none;content:none;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > *{order:0;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .stgroup{grid-column:1 / -1;margin:48px 0 0;font:700 28px/1.15 var(--disp);letter-spacing:-.02em;color:var(--ink);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec{border-top-width:0;border-radius:0;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .stgroup + .dsec{border-top-width:1px;border-radius:var(--r-card) var(--r-card) 0 0;margin-top:0 !important;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec:has(+ .stgroup),
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec:last-child{border-radius:0 0 var(--r-card) var(--r-card);box-shadow:0 20px 36px -30px rgba(0,0,0,.95);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec:has(+ .stgroup):has(+ .stgroup + .dsec){border-radius:0 0 var(--r-card) var(--r-card);}
@media (max-width:760px){ body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .stgroup{font-size:24px;margin-top:40px;} }

/* THE FOOT OF SUPER TEAM, TIDIED (Anthem, 2026-10-05: "we need to clean this
   up at the bottom"). An owner's Leave block only said they cannot leave, so
   it goes for owners; a member's Leave is the last row of the "Invite and
   manage" card, flush under it, not a loose box after a gap and a rule. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stLeaveSlot{margin:0;padding:0;border:0;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stLeaveSlot:has(#tmLeaveSec:not(:has(#tmLeave))){display:none;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stLeaveSlot > .dsec{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:32px;align-items:start;
  padding:24px 26px;border:1px solid rgba(255,255,255,.09);border-top-width:0;border-radius:0 0 var(--r-card) var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));box-shadow:0 20px 36px -30px rgba(0,0,0,.95);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stLeaveSlot > .dsec > .se{grid-column:1;margin:0;padding:0;border:0;font:700 17px/1.25 var(--disp);color:var(--ink);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stLeaveSlot > .dsec > .se::before{display:none;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stLeaveSlot > .dsec > :not(.se){grid-column:2;text-align:left;justify-self:start;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stLeaveSlot > .dsec > .hint{max-width:62ch;margin-top:0;}
/* With a Leave row following, the card above hands its bottom edge on. */
body.sq-shell:not([data-printing]) [data-view="superteam"] .page:has(#stLeaveSlot #tmLeave) #stPendList > .dsec:last-child{border-radius:0;box-shadow:none;}
/* The fine print sits a steady distance under whatever is last. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFine{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);}
@media (max-width:760px){
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stLeaveSlot > .dsec{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:18px;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stLeaveSlot > .dsec > :not(.se){grid-column:1;}
}
/* Headings and rows keep their written order (the rows had an order of their
   own from the 2x2 grid; :has() inside :has() is not allowed, so the owner's
   dead Leave block is hidden by its own rule). */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .stgroup,
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec{order:3;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #tmLeaveSec:not(:has(#tmLeave)){display:none;}
/* No gaps between rows (the grid's row gap is off for the list; the group
   titles carry their own space), and one rule above the fine print, not two. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList{row-gap:0;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec + .dsec{margin-top:0 !important;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .invlist{margin-bottom:0;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .stgroup{margin-bottom:16px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec.center{margin-top:0 !important;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFine{border-top:0;padding-top:0;margin-top:40px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stLeaveSlot > .dsec#tmLeaveSec{margin-top:0 !important;}

/* INVITE BY CODE, BALANCED (Anthem, 2026-10-05: "the copy in the invite code
   section is sloppy. It's not balanced"): the code and Copy are one row, the
   same height, Copy a quiet pill like every other row's second action. */
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > .invrow:has(> #tmCodeVal){display:flex;align-items:stretch;gap:10px;max-width:460px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #tmCodeVal{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px !important;font-size:18px !important;letter-spacing:.18em;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #tmCopy{flex:0 0 auto;min-height:48px;padding:0 18px;border:1px solid var(--line);border-radius:var(--r-card);background:none;color:var(--ink);font:600 14px/1 var(--disp);}
body.sq-shell:not([data-printing]) [data-view="superteam"] #tmCopy:hover{border-color:rgba(214,120,170,.6);background:rgba(214,120,170,.10);}

/* THE ADVISORY, BACK ON THE PAGE, SET AS A COLOPHON (Anthem, 2026-10-05:
   tried the footer, "I don't like it in the footer either... center
   format"). Where it was, at the foot of each surface FR-25 names, but
   designed: centred, a short hairline above, small faint type on a measure
   of about 56 characters. */
body.sq-shell:not([data-printing]) .page :is(.sqfine,.dyadvisory,.advisorywrap:not(.screenhide)){display:block;margin:56px auto 0;padding:22px 0 0;max-width:56ch;text-align:center;position:relative;}
body.sq-shell:not([data-printing]) .page :is(.sqfine,.dyadvisory,.advisorywrap:not(.screenhide))::before{content:"";position:absolute;left:50%;top:0;width:56px;height:1px;margin-left:-28px;background:linear-gradient(90deg,rgba(214,120,170,0),rgba(214,120,170,.7),rgba(214,120,170,0));}
body.sq-shell:not([data-printing]) .page p.advisory{margin:0 auto;max-width:60ch;text-align:center;font-size:10.5px !important;line-height:1.6 !important;letter-spacing:.01em;color:var(--ink-faint);opacity:.8;}
body.sq-shell:not([data-printing]) .page :is(.sqfine,.dyadvisory) .advisory{margin:0 auto;}
/* ENGINE PROSE WITH A SHAPE (snapshot.js prose). */
body.sq-shell .sqprose{font-size:14.5px;line-height:1.65;color:var(--ink-soft);}
body.sq-shell .sqprose > p{margin:0 0 12px;}
body.sq-shell .sqprose > p > b{color:var(--ink);}
body.sq-shell .sqprose-h{margin:26px 0 12px;font:700 11px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--plum-bright);}
body.sq-shell .sqprose-h:first-child{margin-top:0;}
body.sq-shell .sqprose-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px;}
body.sq-shell .sqprose-list li{position:relative;padding:12px 16px 12px 36px;border:1px solid var(--line);border-radius:var(--r-card);background:rgba(255,255,255,.03);color:var(--ink-soft);}
body.sq-shell .sqprose-list li::before{content:"";position:absolute;left:16px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--plum-bright);box-shadow:0 0 8px rgba(214,120,170,.8);}
body.sq-shell .sqprose > p:last-child > i:only-child{display:block;margin-top:6px;color:var(--ink-faint);}
@media print{ .sqprose-list li{border:0;padding:2pt 0 2pt 12pt;} .sqprose-list li::before{left:0;top:7pt;width:4pt;height:4pt;box-shadow:none;background:#8E3F6C;} .sqprose-h{color:#8E3F6C;} }

/* SHARING, LIFTED (2026-10-05). */
body.sq-shell:not([data-printing]) [data-view="snapshot"] .sqsharing{padding:24px 26px;border:1px solid rgba(255,255,255,.09);border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 36px -28px rgba(0,0,0,.95);}
body.sq-shell .sqsharing-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;}
body.sq-shell .sqsharing-head .eyebrow{margin:0;flex:1 1 auto;}
body.sq-shell .sqsharing-pills{display:flex;flex-wrap:wrap;gap:8px;}
body.sq-shell .sqsharing .sqshare-pill{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;border:1px solid var(--line);font:700 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
body.sq-shell .sqsharing .sqshare-pill.on{color:var(--plum-bright);border-color:rgba(214,120,170,.45);background:rgba(214,120,170,.10);}
body.sq-shell .sqsharing .sqshare-pill.on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--plum-bright);box-shadow:0 0 8px rgba(214,120,170,.9);}
body.sq-shell .sqsharing > .hint{margin:12px 0 16px !important;max-width:62ch;}
body.sq-shell .sqsharing-acts{display:flex;}
body.sq-shell:not([data-printing]) .page p.advisory{border:0 !important;padding-top:0 !important;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stFine{padding-top:22px;margin-top:56px;}
@media (max-width:760px){ body.sq-shell #tmOrgJson{display:inline-flex;align-items:center;min-height:44px;} }

/* THE 360 ROWS, CONCLUSION FIRST (2026-10-05). The row is the question's
   plain name, one sentence that says what the team said versus you, then one
   bar of how the colleagues answered, with the verdict pill on the right. */
body.sq-shell .rm-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:24px;padding:24px 4px;}
body.sq-shell .rm-lead{margin:8px 0 0 !important;font:600 17px/1.4 var(--disp) !important;letter-spacing:-.005em;color:var(--ink) !important;}
body.sq-shell .rm-q p:not(.rm-lead){font-size:14px !important;color:var(--ink-soft) !important;}
body.sq-shell .rm-sides-one{grid-template-columns:minmax(0,1fr);}
body.sq-shell .rm-sides-one .rm-k{display:block;margin-bottom:10px;}
body.sq-shell .rm-sides-one .rm-bar{height:12px;}
body.sq-shell .rm-sides-one .rm-spread{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 16px;}
body.sq-shell .rm-sides-one .rm-sp b{color:var(--ink);}
body.sq-shell .rm-tag.agree{color:var(--plum-bright);border-color:rgba(214,120,170,.45);background:rgba(214,120,170,.10);}
body.sq-shell .rm-tag.gap{color:var(--amber-bright);border-color:rgba(224,174,114,.45);background:rgba(224,174,114,.10);}
@media (max-width:760px){ body.sq-shell .rm-row{grid-template-columns:minmax(0,1fr) auto;} body.sq-shell .rm-sides-one{grid-column:1 / -1;} body.sq-shell .rm-lead{font-size:16px !important;} }

/* No chapter numbers anywhere in the app (Anthem, 2026-10-05; the profile
   dropped them on 10-04, the rest of the pages follow). */
body.sq-shell:not([data-printing]) .sqsec::before{content:none !important;display:none !important;}
/* The fourth kind on the 360: the team leans where you sat between. */
body.sq-shell .rm-tag.lean{color:var(--ink);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.05);}
.rm-dot.lean{fill:var(--ink-soft);}
body.sq-shell .sq360-counts .lean i{background:var(--ink-soft);}
/* Longer verdict words: the pill may wrap to two lines and stays readable. */
body.sq-shell .rm-tag{white-space:normal;text-align:center;max-width:120px;line-height:1.3;padding:7px 11px;}
body.sq-shell .sq360-counts{flex-wrap:wrap;}

/* ------------------------------------------------- THE 360 PORTRAIT (2026-10-05) */
body.sq-shell .sq360-portrait .archetype em{font-style:normal;color:var(--plum-bright);}
body.sq-shell .pt-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px;}
body.sq-shell .pt-col{margin:0 !important;padding:24px 26px !important;border:1px solid rgba(255,255,255,.09);border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 48px -32px rgba(0,0,0,.95);}
body.sq-shell .pt-who{display:block;font:700 11px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;}
body.sq-shell .pt-col h3{margin:0 0 14px;font:700 18px/1.2 var(--disp);color:var(--ink);}
body.sq-shell .pt-ln{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px;padding:13px 0;border-top:1px solid var(--line);align-items:baseline;}
body.sq-shell .pt-ln small{font:600 10.5px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
body.sq-shell .pt-ln b{font:600 16px/1.35 var(--disp);color:var(--ink);}
body.sq-shell .pt-ln.both b{color:var(--ink-soft);font-weight:500;}
body.sq-shell .pt-ln.same b{color:var(--plum-bright);}
body.sq-shell .pt-ln.diff b{color:var(--amber-bright);}
body.sq-shell .pt-ln.open b{color:var(--ink-faint);font-weight:500;font-style:italic;}
body.sq-shell .pt-legend{display:flex;flex-wrap:wrap;gap:10px 20px;margin:16px 0 0;font-size:13px;color:var(--ink-soft);}
body.sq-shell .pt-legend span{display:inline-flex;align-items:center;gap:8px;}
body.sq-shell .pt-legend i{width:10px;height:10px;border-radius:3px;background:var(--ink-faint);}
body.sq-shell .pt-legend .same i{background:var(--plum-bright);} body.sq-shell .pt-legend .diff i{background:var(--amber-bright);}
body.sq-shell .pt-every{margin-top:48px;}
body.sq-shell .pt-every summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;}
body.sq-shell .pt-every summary::-webkit-details-marker{display:none;}
body.sq-shell .pt-every summary .sqsec{margin:0 !important;padding:0 !important;border:0 !important;}
body.sq-shell .pt-every summary .hint{margin:0;}
body.sq-shell .pt-every summary::after{content:"Show";margin-left:auto;font:600 13px/1 var(--disp);color:var(--plum-bright);padding:10px 16px;border:1px solid rgba(214,120,170,.45);border-radius:999px;}
body.sq-shell .pt-every[open] summary::after{content:"Hide";}
body.sq-shell .pt-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;align-items:center;margin-top:10px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-card);background:rgba(255,255,255,.025);}
body.sq-shell .pt-row > b{font:700 15px/1.3 var(--disp);color:var(--ink);} body.sq-shell .pt-row > span{color:var(--ink-soft);font-size:14.5px;} body.sq-shell .pt-row > span b{color:var(--ink);}
body.sq-shell .pt-every > .pt-row:first-of-type{margin-top:18px;}
@media (max-width:760px){
  body.sq-shell .pt-cols{grid-template-columns:minmax(0,1fr);}
  body.sq-shell .pt-ln{grid-template-columns:minmax(0,1fr);gap:4px;}
  body.sq-shell .pt-row{grid-template-columns:minmax(0,1fr);gap:6px;}
  body.sq-shell .pt-every summary::after{flex-basis:100%;text-align:center;margin-left:0;}
}
body.sq-shell .sq360-hero.sq360-portrait{display:block;}
body.sq-shell .sq360-portrait .archetype{max-width:22ch;}
body.sq-shell .sq360-portrait .sq360-lede{max-width:62ch;}

/* THE PORTRAIT, WITH HIERARCHY (2026-10-05): their column first and heavier,
   yours quieter beside it; the sections below sit at one clear rank. */
body.sq-shell .pt-cols{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start;}
body.sq-shell .pt-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;margin-bottom:6px;}
body.sq-shell .pt-head h3{margin:0;}
body.sq-shell .pt-legend{margin:0 0 6px;font-size:12px;}
body.sq-shell .pt-them{border-color:rgba(214,120,170,.38) !important;background:linear-gradient(160deg,rgba(214,120,170,.10),rgba(255,255,255,.015) 60%) !important;}
body.sq-shell .pt-them .pt-who{color:var(--plum-bright);}
body.sq-shell .pt-them .pt-ln{grid-template-columns:150px minmax(0,1fr);padding:15px 0;}
body.sq-shell .pt-them .pt-ln b{font-size:19px;letter-spacing:-.01em;}
body.sq-shell .pt-them .pt-ln.open b{font-size:16px;}
body.sq-shell .pt-you{background:rgba(255,255,255,.02) !important;box-shadow:none !important;}
body.sq-shell .pt-you h3,body.sq-shell .pt-you .pt-ln b{color:var(--ink-soft);}
body.sq-shell .pt-you .pt-ln b{font-size:15px;font-weight:500;}
body.sq-shell .pt-you .pt-ln.both b{color:var(--ink-faint);}
body.sq-shell .pt-you .pt-ln{padding:16.5px 0;}
body.sq-shell .pt-every{margin-top:40px;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important;}
body.sq-shell .pt-every summary .sqsec{font-size:18px !important;color:var(--ink-soft) !important;}
@media (max-width:760px){
  body.sq-shell .pt-cols{grid-template-columns:minmax(0,1fr);}
  body.sq-shell .pt-them .pt-ln,body.sq-shell .pt-you .pt-ln{grid-template-columns:minmax(0,1fr);padding:13px 0;}
  body.sq-shell .pt-them .pt-ln b{font-size:17px;}
}
/* The two columns end on one line, and the sections under them are cards of
   the same rank, so the page steps down evenly: statement, the two columns,
   then what the read predicted and the readout. */
body.sq-shell .pt-cols{align-items:stretch;}
body.sq-shell:not([data-printing]) [data-view="gap"] .page > section.block:not(.pt-col){margin-top:24px;padding:26px 28px 28px;border:1px solid rgba(255,255,255,.09);border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 48px -32px rgba(0,0,0,.95);}
body.sq-shell:not([data-printing]) [data-view="gap"] .page > section.block:not(.pt-col) > .sqsec{margin:0 0 6px !important;padding:0 !important;border:0 !important;font-size:22px !important;}
body.sq-shell:not([data-printing]) [data-view="gap"] .page > .pt-every{margin-top:28px;}
body.sq-shell:not([data-printing]) [data-view="gap"] .page > .sq360-more{margin-top:24px;}
@media (max-width:760px){ body.sq-shell:not([data-printing]) [data-view="gap"] .page > section.block:not(.pt-col){padding:20px 18px;} }

/* THE 360 HERO, FILLED (2026-10-05): statement and pills on the left, who
   answered, the sealed read's score and the two actions on the right. */
body.sq-shell .sq360-hero.sq360-portrait{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:36px;align-items:stretch;}
body.sq-shell .sq360-portrait .archetype{max-width:none;}
body.sq-shell .sq360-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
body.sq-shell .sq360-pill{display:inline-flex;align-items:center;gap:9px;min-height:34px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font:500 13px/1 var(--disp);color:var(--ink-soft);}
body.sq-shell .sq360-pill b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;font:700 12px/1 var(--disp);color:#fff;background:var(--ink-faint);}
body.sq-shell .sq360-pill.agree b{background:var(--plum-bright);} body.sq-shell .sq360-pill.gap b,body.sq-shell .sq360-pill.lean b{background:var(--amber-bright);color:#1D1A22;}
body.sq-shell .sq360-pill.agree{border-color:rgba(214,120,170,.4);} body.sq-shell .sq360-pill.gap,body.sq-shell .sq360-pill.lean{border-color:rgba(224,174,114,.4);}
body.sq-shell .sq360-hero-side{display:flex;flex-direction:column;gap:14px;padding:22px 24px;border-radius:var(--r-card);border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.07);}
body.sq-shell .sq360-who,body.sq-shell .sq360-sealed{display:flex;flex-direction:column;gap:4px;}
body.sq-shell .sq360-who b,body.sq-shell .sq360-sealed b{font:700 17px/1.2 var(--disp);color:var(--ink);}
body.sq-shell .sq360-who small,body.sq-shell .sq360-sealed small{font-size:12.5px;line-height:1.45;color:var(--ink-faint);}
body.sq-shell .sq360-marks{display:flex;margin-bottom:6px;}
body.sq-shell .sq360-marks i{width:34px;height:34px;border-radius:50%;margin-left:-8px;border:2px solid var(--bg);background:radial-gradient(circle at 35% 30%,#3A2C3F,#1E1724);box-shadow:0 0 0 1px rgba(214,120,170,.4);}
body.sq-shell .sq360-marks i:first-child{margin-left:0;}
body.sq-shell .sq360-marks i{box-shadow:0 0 0 2px var(--plum-bright),0 0 10px rgba(184,96,145,.55);}
body.sq-shell .sq360-marks i::after{content:"";display:block;width:12px;height:12px;border-radius:50%;margin:7px auto 0;background:rgba(214,120,170,.55);}
body.sq-shell .sq360-sealed{padding-top:14px;border-top:1px solid var(--line);}
body.sq-shell .sq360-k{font:700 10.5px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--plum-bright);margin-bottom:4px;}
body.sq-shell .sq360-hero-acts{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);}
body.sq-shell .sq360-hero-acts button{min-height:44px;justify-content:center;text-align:center;}
@media (max-width:900px){ body.sq-shell .sq360-hero.sq360-portrait{grid-template-columns:minmax(0,1fr);} }
@media (max-width:760px){ body.sq-shell [data-view="gap"] .invhead{max-width:100%;box-sizing:border-box;overflow:hidden;} }
/* The two column titles are titles: same size and colour in both columns. */
body.sq-shell .pt-col h3,body.sq-shell .pt-you h3{font:700 22px/1.15 var(--disp);letter-spacing:-.02em;color:var(--ink);}

/* ---------------------------------------- THE 360 IN PANES (2026-10-05) */
body.sq-shell .sq360-tabs{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:28px;margin:28px 0 0;padding:0 2px;border-bottom:1px solid var(--line);background:var(--bg);overflow-x:auto;scrollbar-width:none;}
body.sq-shell .sq360-tabs::-webkit-scrollbar{display:none;}
body.sq-shell .sq360-tabs [data-pane]{flex:none;min-height:50px;padding:0;border:0;background:none;cursor:pointer;font:600 14px/1 var(--disp);color:var(--ink-faint);white-space:nowrap;}
body.sq-shell .sq360-tabs [data-pane]:hover{color:var(--ink);}
body.sq-shell .sq360-tabs [data-pane][aria-selected="true"]{color:var(--hi);box-shadow:inset 0 -2px 0 var(--plum-bright);}
body.sq-shell .sq360-arrows{margin-left:auto;display:flex;gap:6px;}
body.sq-shell .sq360-arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink-soft);font:600 20px/1 var(--disp);cursor:pointer;}
body.sq-shell .sq360-arrow:hover{color:var(--ink);border-color:rgba(214,120,170,.5);}
body.sq-shell .sq360-panes{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -8px;transition:height .25s var(--ease);}
body.sq-shell .sq360-panes::-webkit-scrollbar{display:none;}
body.sq-shell .sq360-pane{flex:0 0 100%;min-width:100%;scroll-snap-align:start;scroll-snap-stop:always;padding:8px 8px 0;box-sizing:border-box;}
body.sq-shell .sq360-pane > section.block{margin-top:24px;}
body.sq-shell .sq360-pane > section.block:not(.sq360-group-card) > .sqsec{margin:0 0 6px !important;padding:0 !important;border:0 !important;font-size:22px !important;}
/* The groups. */
body.sq-shell .sq360-group{margin-top:28px;}
body.sq-shell .sq360-group-h{display:flex;align-items:center;gap:12px;margin:0 0 4px;font:700 22px/1.15 var(--disp);letter-spacing:-.02em;color:var(--ink);}
body.sq-shell .sq360-num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:999px;font:800 14px/1 var(--disp);color:#fff;background:var(--ink-faint);}
body.sq-shell .sq360-group.same .sq360-num{background:var(--plum-bright);} body.sq-shell .sq360-group.diff .sq360-num{background:var(--amber-bright);color:#1D1A22;}
body.sq-shell .sq360-group-sub{margin:0 0 14px;font-size:14.5px;color:var(--ink-soft);}
body.sq-shell .sq360-group-card{margin:0 !important;padding:6px 26px 8px !important;border:1px solid rgba(255,255,255,.09);border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 48px -32px rgba(0,0,0,.95);}
body.sq-shell .sq360-group.diff .sq360-group-card{border-color:rgba(224,174,114,.32);} body.sq-shell .sq360-group.same .sq360-group-card{border-color:rgba(214,120,170,.38);}
body.sq-shell .sq360-gr{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center;padding:18px 0;border-top:1px solid var(--line);}
body.sq-shell .sq360-gr:first-child{border-top:0;}
body.sq-shell .sq360-gr .n{font:700 15px/1.3 var(--disp);color:var(--ink);}
body.sq-shell .sq360-gr .k{display:block;margin-bottom:5px;font:700 11px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}
body.sq-shell .sq360-gr .t,body.sq-shell .sq360-gr .y{font:600 17px/1.3 var(--disp);color:var(--ink);}
body.sq-shell .sq360-gr .y{color:var(--ink-soft);font-weight:500;}
body.sq-shell .sq360-group.diff .sq360-gr .t{color:var(--amber-bright);} body.sq-shell .sq360-group.same .sq360-gr .t{color:var(--plum-bright);}
body.sq-shell .sq360-group.open .sq360-gr .t{color:var(--ink-faint);font-style:italic;font-weight:500;font-size:15px;}
body.sq-shell .sq360-pane .pt-every{margin-top:36px;}
@media (max-width:760px){
  body.sq-shell .sq360-tabs{gap:18px;top:53px;}
  body.sq-shell .sq360-arrows{display:none;}
  body.sq-shell .sq360-gr{grid-template-columns:minmax(0,1fr);gap:10px;padding:14px 0;}
  body.sq-shell .sq360-group-card{padding:4px 18px 6px !important;}
}
body.sq-shell .sq360-pane-intro{margin:22px 0 0;font-size:16px;line-height:1.55;color:var(--ink-soft);max-width:64ch;}
body.sq-shell .sq360-dots{display:none;justify-content:center;gap:6px;padding:10px 0 0;}
body.sq-shell .sq360-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18);}
body.sq-shell .sq360-dots i.on{background:var(--plum-bright);box-shadow:0 0 8px rgba(214,120,170,.8);}
body.sq-shell .sq360-readout-wait{padding:26px 28px;border:1px dashed rgba(214,120,170,.4) !important;}
@media (max-width:760px){
  body.sq-shell .sq360-dots{display:flex;}
  /* Full width per pane (Anthem, 2026-10-06: the sliver of the next pane
     read as clipping). The dots and the tabs say there is more. */
  body.sq-shell .sq360-panes{scroll-padding-left:0;}
  body.sq-shell .sq360-pane{flex-basis:100%;min-width:100%;padding-right:8px;}
}
body.sq-shell .sq360-panes{align-items:flex-start;}
body.sq-shell .sq360-readout-wait > .eyebrow{border-top:0 !important;padding-top:0 !important;margin-top:0 !important;}
body.sq-shell .sq360-readout-wait{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:18px 22px;border-style:solid !important;border-color:var(--line) !important;}
body.sq-shell .sq360-readout-wait #tsReadoutNote{flex-basis:100%;}
body.sq-shell .sq360-every{margin-top:22px !important;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important;}
body.sq-shell .sq360-every > .pt-row:first-of-type{margin-top:0;}
/* The section bar: see-through in flow, a blurred surface when pinned, flush
   with the content edges. */
body.sq-shell .sq360-tabs-sentinel{display:block;height:1px;margin-top:-1px;}
body.sq-shell .sq360-tabs{background:transparent;padding:0;margin:28px 0 0;border-bottom:1px solid var(--line);}
body.sq-shell .sq360-tabs.stuck{background:rgba(11,8,16,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);margin-left:-8px;margin-right:-8px;padding:0 8px;border-bottom-color:rgba(255,255,255,.12);}
[data-theme="light"] body.sq-shell .sq360-tabs.stuck{background:rgba(250,246,251,.78);}
body.sq-shell .sq360-tabs [data-pane]{font-size:14.5px;}
/* Pinned, the bar runs the full content width, including the page gutter,
   and sits flush under the top edge. */
body.sq-shell .sq360-tabs.stuck{margin-left:-40px;margin-right:-40px;padding:0 40px;}
@media (max-width:760px){ body.sq-shell .sq360-tabs.stuck{margin-left:-16px;margin-right:-16px;padding:0 16px;} }
/* THE BAR NEVER SCROLLS SIDEWAYS (Anthem, 2026-10-05: "the bar should be
   pinned, not something I rotate right to left"). Every section is always
   visible; the row wraps when it must. */
body.sq-shell .sq360-tabs{overflow:visible;flex-wrap:wrap;gap:0 24px;}
body.sq-shell .sq360-tabs [data-pane]{min-height:46px;}
@media (max-width:760px){
  body.sq-shell .sq360-tabs{gap:0 16px;}
  body.sq-shell .sq360-tabs [data-pane]{font-size:13px;min-height:42px;}
  body.sq-shell .sq360-dots{display:none;}
}
/* Short labels on a phone, so the bar is two rows at most. */
body.sq-shell .sq360-tab-short{display:none;}
@media (max-width:760px){ body.sq-shell .sq360-tab-long{display:none;} body.sq-shell .sq360-tab-short{display:inline;} body.sq-shell .sq360-tabs{gap:0 20px;} }
/* The hero's one statement about you wears the archetype gradient (Anthem,
   2026-10-06: "put the action statement in gradient to give the hero more
   character"). */
body.sq-shell .sq360-portrait .archetype em{font-style:normal;background:linear-gradient(92deg,#F3B5D5 0%,#D678AA 45%,#E0AE72 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.04em;}
@media print{ body .sq360-portrait .archetype em{color:#8E3F6C;-webkit-text-fill-color:#8E3F6C;background:none;} }
/* THE "DIFFERENT VIEWS" GROUP IN COLOUR (Anthem, 2026-10-06: monochrome made
   it "feel detached from the page"). It uses the app's own plum tokens, the
   same ones the "see you the way you do" group uses, at a lower key. */
body.sq-shell .sq360-group.open .sq360-num{background:var(--plum);color:#fff;}
body.sq-shell .sq360-group.open .sq360-group-card{border-color:rgba(214,120,170,.30);background:linear-gradient(160deg,rgba(214,120,170,.08),rgba(255,255,255,.015) 65%);}
body.sq-shell .sq360-group.open .sq360-gr .t{color:var(--plum-bright);opacity:.8;font-style:normal;font-weight:600;font-size:17px;}
body.sq-shell .sq360-pill.split b{background:var(--plum);color:#fff;}
body.sq-shell .sq360-pill.split{border-color:rgba(214,120,170,.35);}
body.sq-shell .pt-ln.open b{color:var(--plum-bright);opacity:.8;font-style:normal;}
body.sq-shell .pt-legend .open i{background:var(--plum);}

/* ---- 360: Every count as cards (2026-10-06) ---- */
body.sq-shell .sq360-every{margin-top:22px !important;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important;}
body.sq-shell .sqevery-h{margin:30px 0 4px;font:700 20px/1.2 var(--disp);letter-spacing:-.02em;color:var(--ink);}
body.sq-shell .sqevery-h:first-child{margin-top:4px;}
body.sq-shell .sqevery-sub{margin:0 0 14px;font-size:14px;color:var(--ink-soft);}
body.sq-shell .sqevery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
body.sq-shell .sqevery-card{position:relative;margin:0 !important;padding:20px 22px 18px !important;border:1px solid rgba(255,255,255,.09);border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 48px -32px rgba(0,0,0,.95);}
body.sq-shell .sqevery-k{display:block;padding-right:84px;font:700 17px/1.25 var(--disp);letter-spacing:-.01em;color:var(--ink);}
body.sq-shell .sqevery-of{position:absolute;top:21px;right:22px;font:600 11px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
body.sq-shell .sqevery-bar{display:flex;gap:3px;height:14px;margin:18px 0 8px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.05);box-shadow:inset 0 1px 3px rgba(0,0,0,.5);}
body.sq-shell .sqevery-bar i{display:block;height:100%;}
body.sq-shell .sqevery-bar .s0,body.sq-shell .sqevery-rows .s0{background:linear-gradient(90deg,#8E4472,#A24E81);}
body.sq-shell .sqevery-bar .s1,body.sq-shell .sqevery-rows .s1{background:linear-gradient(90deg,#D08BB5,#E3A4CC);}
body.sq-shell .sqevery-bar .s2,body.sq-shell .sqevery-rows .s2{background:linear-gradient(90deg,#F0C2DD,#FBE3F1);}
body.sq-shell .sqevery-bar .s3,body.sq-shell .sqevery-rows .s3{background:#5C2A4E;}
body.sq-shell .sqevery-bar .s4,body.sq-shell .sqevery-rows .s4{background:#6A6172;}
body.sq-shell .sqevery-ends{display:flex;justify-content:space-between;gap:12px;font:500 11.5px/1.3 var(--disp);color:var(--ink-faint);}
body.sq-shell .sqevery-ends span:last-child{text-align:right;}
body.sq-shell .sqevery-rows{list-style:none;margin:16px 0 0;padding:0;}
body.sq-shell .sqevery-rows li{display:grid;grid-template-columns:10px 30px minmax(0,1fr);gap:10px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line);}
body.sq-shell .sqevery-rows li:first-child{border-top:0;padding-top:0;}
body.sq-shell .sqevery-rows li i{width:10px;height:10px;border-radius:3px;align-self:center;}
body.sq-shell .sqevery-rows li b{font:800 24px/1 var(--disp);letter-spacing:-.03em;color:var(--ink);}
body.sq-shell .sqevery-rows li span{font-size:14.5px;line-height:1.35;color:var(--ink-soft);}
body.sq-shell .sqevery-rows li.you span{color:var(--ink);}
body.sq-shell .sqevery-rows li em{font:600 11px/1 var(--disp);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--plum-bright);margin-left:6px;white-space:nowrap;}
body.sq-shell .sqevery-you{display:flex;gap:10px;align-items:baseline;margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--line);font-size:14px;color:var(--ink);}
body.sq-shell .sqevery-you span{font:700 10px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;}
body.sq-shell:not([data-printing]) .page .sqevery-note{margin-top:44px;max-width:60ch;}
@media (max-width:1180px){ body.sq-shell .sqevery-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){
  body.sq-shell .sqevery-grid{grid-template-columns:minmax(0,1fr);gap:12px;}
  body.sq-shell .sqevery-card{padding:18px 18px 16px !important;}
  body.sq-shell .sqevery-of{top:19px;right:18px;}
}
body.sq-shell .sqevery-card{display:flex;flex-direction:column;}
body.sq-shell .sqevery-rows{flex:1;}
body.sq-shell .sqevery-you{margin-top:auto;padding-top:12px;}
body.sq-shell .sqevery-rows + .sqevery-you{margin-top:14px;}

body.sq-shell .sqevery-k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--plum-bright);}
body.sq-shell .sqevery-q{margin:8px 0 0;font:600 16px/1.35 var(--disp);letter-spacing:-.01em;color:var(--ink);}
body.sq-shell .sqevery-bar{margin-top:16px;}

/* Two sections, fully committed (Anthem, 2026-10-06). */
body.sq-shell .sqevery-h{margin:52px 0 6px;font-size:30px;line-height:1.1;letter-spacing:-.025em;}
body.sq-shell .sqevery-h:first-child{margin-top:12px;}
body.sq-shell .sqevery-sub{margin:0 0 20px;max-width:64ch;font-size:15px;line-height:1.5;}
@media (max-width:760px){ body.sq-shell .sqevery-h{margin-top:40px;font-size:25px;} body.sq-shell .sqevery-h:first-child{margin-top:6px;} }

/* What they said: the groups are the sections, fully committed (Anthem, 2026-10-06). */
body.sq-shell .sq360-group{margin-top:52px;}
body.sq-shell .sq360-pane .sq360-group:first-child{margin-top:12px;}
body.sq-shell .sq360-group-h{margin:0 0 8px;font-size:30px;line-height:1.1;letter-spacing:-.025em;}
body.sq-shell .sq360-num{width:36px;height:36px;font-size:16px;}
body.sq-shell .sq360-group-sub{margin:0 0 20px;max-width:64ch;font-size:15px;line-height:1.5;}
body.sq-shell .sq360-pane > section.block{margin-top:52px;}
@media (max-width:760px){ body.sq-shell .sq360-group{margin-top:40px;} body.sq-shell .sq360-pane .sq360-group:first-child{margin-top:6px;} body.sq-shell .sq360-group-h{font-size:25px;} body.sq-shell .sq360-num{width:30px;height:30px;font-size:14px;} }

/* ---- ONE SECTION-TITLE SIZE, APP-WIDE (Anthem, 2026-10-06: "fully commit").
   Page heroes sit at 56–68px, card titles at 16–18px, eyebrows at 10–12px.
   The tier between them was four different sizes (22, 28, 30, 32); it is
   one now, the size the 360 settled on. Phone: 25px. ---- */
body.sq-shell:not([data-printing]) :is(
  section.block > .eyebrow,
  .sqh2:not(.sqsec-quiet),
  .sqsec.sqh2:not(.sqsec-quiet),
  [data-view="gap"] .sq360-pane > section.block:not(.sq360-group-card) > .sqsec,
  [data-view="guide"] .lenshead,
  [data-view="superteam"] #stPendList > .stgroup,
  [data-view="superteam"] :is(#stFastStart > .block,.page > section.block) > .eyebrow:first-child,
  [data-view="superteam"] .sqlock-t,
  .sqevery-h, .sq360-group-h
){font-family:var(--disp);font-size:30px !important;line-height:1.1 !important;font-weight:700;letter-spacing:-.025em;text-transform:none;color:var(--ink);}
body.sq-shell:not([data-printing]) section.sqdaily > .eyebrow{font-size:11px !important;line-height:16px !important;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-faint);}
body.sq-shell:not([data-printing]) .sqh2 > .eyebrow{font-size:12px !important;line-height:18px !important;font-weight:500;letter-spacing:0;}
@media (max-width:760px){
  body.sq-shell:not([data-printing]) :is(
    section.block > .eyebrow, .sqh2:not(.sqsec-quiet), .sqsec.sqh2:not(.sqsec-quiet),
    [data-view="gap"] .sq360-pane > section.block:not(.sq360-group-card) > .sqsec,
    [data-view="guide"] .lenshead,
    [data-view="superteam"] #stPendList > .stgroup,
    [data-view="superteam"] :is(#stFastStart > .block,.page > section.block) > .eyebrow:first-child,
    [data-view="superteam"] .sqlock-t,
    .sqevery-h, .sq360-group-h
  ){font-size:25px !important;}
}
/* The Guide's lens blocks keep their deliberate second tier (17px eyebrows,
   18px for "What sits underneath"); only the lens heads are section titles. */
body.sq-shell:not([data-printing]) [data-view="guide"] .lens > section.block > .eyebrow:not(#_){font-size:17px !important;line-height:1.3 !important;font-weight:600;letter-spacing:-.01em;}
body.sq-shell:not([data-printing]) [data-view="guide"] .lens > section.block.gunder > .eyebrow:not(#_){font-size:18px !important;font-weight:700;}

/* ---- 360: What your read predicted (2026-10-06) ---- */
body.sq-shell .sq360-pane .sq360-sealedsec:first-child{margin-top:12px;}
body.sq-shell .sqsealed-pills{margin:0 0 20px;}
body.sq-shell .sq360-pill.open b{background:var(--ink-faint);}
body.sq-shell .sqsealed-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:22px;align-items:start;padding:20px 0;border-top:1px solid var(--line);}
body.sq-shell .sqsealed-row:first-child{border-top:0;}
body.sq-shell .sqsealed-mark{display:inline-flex;align-items:center;justify-self:start;min-height:28px;padding:0 12px;border-radius:999px;font:700 11px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);background:rgba(255,255,255,.03);margin-top:1px;}
body.sq-shell .sqsealed-row.held .sqsealed-mark{color:#fff;background:var(--plum-bright);border-color:transparent;}
body.sq-shell .sqsealed-row.missed .sqsealed-mark{color:#1D1A22;background:var(--amber-bright);border-color:transparent;}
body.sq-shell .sqsealed-claim{margin:0;font:600 17px/1.35 var(--disp);letter-spacing:-.01em;color:var(--ink);}
body.sq-shell .sqsealed-row.open .sqsealed-claim{color:var(--ink-soft);font-weight:500;}
body.sq-shell .sqsealed-why{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink-soft);}
body.sq-shell .sqsealed-why span{display:block;margin-bottom:3px;font:700 10px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}
body.sq-shell .sqsealed-obs{margin:8px 0 0;font-size:14.5px;color:var(--plum-bright);font-weight:600;}
@media (max-width:760px){ body.sq-shell .sqsealed-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:18px 0;} }
body.sq-shell .sqsealed-obs.open{color:var(--ink-soft);font-weight:500;}
body.sq-shell .sqsealed-k{display:block;margin-bottom:4px;font:700 10px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--plum-bright);}
body.sq-shell .sqsealed-mark{min-width:0;white-space:nowrap;}
body.sq-shell .sqsealed-row{grid-template-columns:132px minmax(0,1fr);}
@media (max-width:760px){ body.sq-shell .sqsealed-row{grid-template-columns:minmax(0,1fr);} }
body.sq-shell .sq360-readout-wait{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 28px !important;}
body.sq-shell .sq360-readout-wait #tsReadoutNote:empty{display:none;}
body.sq-shell .sq360-pane .sq360-readoutsec:first-child{margin-top:12px;}
body.sq-shell .sq360-readoutsec .sq360-readout-wait{margin-top:0;}
body.sq-shell .sq360-pane > section.sq360-asksec{margin-top:12px;padding-top:0 !important;border-top:0 !important;}
body.sq-shell .sq360-asksec > section.block > .eyebrow:first-child{border-top:0;padding-top:0;margin-top:0;}
/* Colleagues pane: the invite bands sit on the bare page, so they stay flush
   with the title and the rows (Anthem, 2026-10-06). The bleed is kept where
   a band caps a card (Super Team, Profile growth cards). */
body.sq-shell:not([data-printing]) [data-view="gap"] .sq360-asksec :is(.invhead,.notelbl){margin-left:0;margin-right:0;padding-left:0;padding-right:0;}
body.sq-shell:not([data-printing]) [data-view="gap"] .sq360-asksec > section.block > .eyebrow:first-child{border-top:0 !important;padding-top:0 !important;}
/* OMBRE KEPT, FLUSH WITH THE BORDER (Anthem, 2026-10-06). A band's tint
   starts at its card's inner edge, never a step inside it. The bare band on
   the Colleagues pane (no card) stays flush with the page column. */
body.sq-shell:not([data-printing]) [data-view="gap"] .sq360-asksec .block :is(.invhead,.notelbl){margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;}
body.sq-shell:not([data-printing]) [data-view="superteam"] #stPendList > .dsec > .se{margin-left:-26px;padding-left:26px;}
body.sq-shell:not([data-printing]) [data-view="gap"] .askedwrap .invlist{margin-top:0;}
body.sq-shell:not([data-printing]) [data-view="gap"] .askedwrap + .statprog{margin-top:18px;}
/* When the tabs wrap, the arrows get their own breathing room instead of
   sitting on the active tab's underline (Anthem, 2026-10-06). */
body.sq-shell .sq360-tabs{row-gap:6px;}
body.sq-shell .sq360-arrows{padding:6px 0 10px;align-self:center;}

/* ---- LIFTED DRAWERS (Anthem, 2026-10-06: "all panels that pop out from
   right to left should be lifted; it feels static"). One surface rule for
   every drawer: a lit gradient, an inner highlight, a deep layered shadow,
   rounded leading edge, and an entrance that eases in with a little scale
   while the content rises. ---- */
body.sq-shell .drawer{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 38%),var(--elev);border-left:1px solid rgba(255,255,255,.10);border-radius:18px 0 0 18px;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.06),-24px 0 60px -20px rgba(0,0,0,.75),-60px 0 140px -30px rgba(0,0,0,.9);
  transform:translateX(100%) scale(.985);transform-origin:right center;opacity:.6;
  transition:transform .46s cubic-bezier(.22,1,.36,1),opacity .3s ease;}
body.sq-shell .drawer.open{transform:translateX(0) scale(1);opacity:1;}
[data-theme="light"] body.sq-shell .drawer{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 40%),var(--elev);border-left-color:rgba(36,28,41,.12);box-shadow:inset 1px 0 0 rgba(255,255,255,.8),-24px 0 60px -20px rgba(80,60,92,.25),-60px 0 140px -30px rgba(80,60,92,.3);}
@keyframes sqDrawerRise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
body.sq-shell .drawer.open > :not(.dclose):not(.sqback):not(#dwide){animation:sqDrawerRise .55s cubic-bezier(.22,1,.36,1) both;}
body.sq-shell .drawer.open > :not(.dclose):not(.sqback):not(#dwide):nth-child(n+3){animation-delay:.06s;}
@media (prefers-reduced-motion:reduce){ body.sq-shell .drawer{transition:none;transform:translateX(100%);opacity:1;} body.sq-shell .drawer.open > *{animation:none !important;} }

/* ---- THE PAIR PANEL: hero, shape, hierarchy ---- */
body.sq-shell .dyp-head{padding:10px 0 18px;border-bottom:1px solid var(--line);}
body.sq-shell .dyp-head .pair{margin:0 0 18px;}
body.sq-shell .dyp-head .pav{width:60px;height:60px;font-size:17px;border-width:3px;box-shadow:0 10px 30px -12px rgba(0,0,0,.9);}
body.sq-shell .dyp-head .pav.two{margin-left:-16px;}
body.sq-shell .dyp-head .kick{font-size:11.5px;color:var(--ink-faint);}
body.sq-shell .dyp-head .dyp-rel{margin:10px 0 0;font:800 clamp(28px,3.2vw,36px)/1.08 var(--disp);letter-spacing:-.03em;color:var(--hi);}
body.sq-shell .dyp-head .dyp-title{font-weight:800;}
body.sq-shell .dyp-state{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:7px 12px 7px 9px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font:600 12px/1 var(--disp);letter-spacing:.02em;color:var(--ink-soft);}
body.sq-shell .dyp-state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-faint);}
body.sq-shell .dyp-state.written{color:var(--plum-bright);border-color:rgba(214,120,170,.4);background:rgba(162,78,129,.10);}
body.sq-shell .dyp-state.written::before{background:var(--plum-bright);box-shadow:0 0 10px rgba(184,96,145,.8);}

/* The shape card. */
body.sq-shell .dyp-shape{grid-template-columns:minmax(0,1fr) minmax(0,240px);gap:10px 28px;margin:22px 0 8px;padding:22px 24px;border:1px solid rgba(255,255,255,.09);border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 48px -32px rgba(0,0,0,.95);}
body.sq-shell .dyp-shape-copy .eyebrow{color:var(--plum-bright);}
body.sq-shell .dyp-shape-sum{font:600 17px/1.4 var(--disp);letter-spacing:-.01em;}
body.sq-shell .dyp-meet{display:flex;flex-direction:column;gap:2px;}
body.sq-shell .dyp-meet-row{display:grid;grid-template-columns:86px minmax(0,1fr) 72px;align-items:center;gap:14px;padding:9px 8px;border-radius:10px;outline:none;}
body.sq-shell .dyp-meet-row[data-arc]{cursor:pointer;}
body.sq-shell .dyp-meet-row[data-arc]:hover,body.sq-shell .dyp-meet-row[data-arc]:focus-visible{background:rgba(255,255,255,.04);}
body.sq-shell .dyp-meet-row .n{font:700 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
body.sq-shell .dyp-meet-row .w{font:600 12px/1 var(--disp);text-align:right;color:var(--ink-faint);}
body.sq-shell .dyp-meet-row.click .w{color:var(--plum-bright);} body.sq-shell .dyp-meet-row.grind .w{color:var(--amber-bright);}
body.sq-shell .dyp-meet-row .track{position:relative;height:26px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 1px 3px rgba(0,0,0,.5);}
body.sq-shell .dyp-meet-row .track i{position:absolute;top:3px;width:20px;height:20px;border-radius:50%;border:2.5px solid;transition:left .45s cubic-bezier(.22,1,.36,1);}
body.sq-shell .dyp-meet-row .track .you{border-color:var(--plum-bright);background:rgba(184,96,145,.22);}
body.sq-shell .dyp-meet-row .track .them{border-color:var(--amber-bright);background:rgba(224,174,114,.18);}
body.sq-shell .dyp-meet-row.click .track .you{left:calc(50% - 15px);} body.sq-shell .dyp-meet-row.click .track .them{left:calc(50% - 5px);}
body.sq-shell .dyp-meet-row.click .track .them{border-color:var(--plum-bright);background:rgba(184,96,145,.22);}
body.sq-shell .dyp-meet-row.click .track::after{content:"";position:absolute;left:calc(50% - 26px);right:calc(50% - 26px);top:0;bottom:0;border-radius:999px;background:rgba(162,78,129,.16);}
body.sq-shell .dyp-meet-row.grind .track .you{left:calc(22% - 10px);} body.sq-shell .dyp-meet-row.grind .track .them{left:calc(78% - 10px);}
body.sq-shell .dyp-meet-row.none .track i{border-style:dashed;border-color:var(--ink-faint);background:none;}
body.sq-shell .dyp-meet-row.none .track .you{left:calc(50% - 15px);} body.sq-shell .dyp-meet-row.none .track .them{left:calc(50% - 5px);}
body.sq-shell .dyp-shape-key{flex-direction:row;flex-wrap:wrap;gap:6px 16px;}
@media screen and (max-width:640px){ body.sq-shell .dyp-shape{grid-template-columns:minmax(0,1fr);padding:18px;} body.sq-shell .dyp-shape-fig{max-width:none;} body.sq-shell .dyp-meet-row{grid-template-columns:78px minmax(0,1fr) 64px;gap:10px;} }

/* Hierarchy in the body: real titles, cards for the two summaries, a lifted
   list for the five lines. */
body.sq-shell .dyp-h{margin:28px 0 4px;font:700 22px/1.15 var(--disp);letter-spacing:-.02em;color:var(--ink);}
body.sq-shell .dyp-hsub{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--ink-soft);}
body.sq-shell .dyp-body .pattern{display:grid;gap:10px;border:0;margin:0 0 6px !important;}
body.sq-shell .dyp-body .pattern .prow{display:block;padding:18px 20px;border:1px solid rgba(255,255,255,.09);border-radius:var(--r-card);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
body.sq-shell .dyp-body .pattern .prow .k{font:700 11px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--plum-bright);}
body.sq-shell .dyp-body .pattern .prow:nth-child(2) .k{color:var(--amber-bright);}
body.sq-shell .dyp-body .pattern .prow .v{margin-top:8px;font:500 16px/1.45 var(--disp);color:var(--ink);}
body.sq-shell .dyp-body .cglist{border:1px solid rgba(255,255,255,.09);border-radius:var(--r-card);overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 48px -32px rgba(0,0,0,.95);}
body.sq-shell .dyp-body .cgrow{padding:16px 18px 16px 22px;}
body.sq-shell .dyp-body .cgrow:last-child{border-bottom:0;}
body.sq-shell .dyp-body > .block > .eyebrow:first-child,body.sq-shell .dyp-body .eyebrow[style*="display:block"]{font:700 20px/1.15 var(--disp) !important;letter-spacing:-.02em !important;text-transform:none !important;color:var(--ink) !important;}
/* The shape card stacks: the five lines take the full width, the sentence
   and the legend sit under them. */
body.sq-shell .dyp-shape{grid-template-columns:minmax(0,1fr);gap:16px;}
body.sq-shell .dyp-shape-copy{padding-top:16px;border-top:1px solid var(--line);}
body.sq-shell .dyp-shape-key{margin-top:10px;}
body.sq-shell .dyp-meet{gap:4px;}
body.sq-shell .dyp-meet-row{grid-template-columns:96px minmax(0,1fr) 78px;gap:16px;padding:8px 10px;}
body.sq-shell .dyp-meet-row .n{letter-spacing:.1em;white-space:nowrap;}
body.sq-shell .dyp-meet-row .track{height:30px;}
body.sq-shell .dyp-meet-row .track i{top:3px;width:24px;height:24px;}
body.sq-shell .dyp-meet-row.click .track .you{left:calc(50% - 18px);} body.sq-shell .dyp-meet-row.click .track .them{left:calc(50% - 6px);}
body.sq-shell .dyp-meet-row.none .track .you{left:calc(50% - 18px);} body.sq-shell .dyp-meet-row.none .track .them{left:calc(50% - 6px);}
body.sq-shell .dyp-meet-row.click .track::after{left:calc(50% - 30px);right:calc(50% - 30px);}
body.sq-shell .dyp-meet-row.grind .track .you{left:calc(20% - 12px);} body.sq-shell .dyp-meet-row.grind .track .them{left:calc(80% - 12px);}
@media screen and (max-width:640px){ body.sq-shell .dyp-meet-row{grid-template-columns:84px minmax(0,1fr) 68px;gap:10px;padding:8px 4px;} body.sq-shell .dyp-meet-row .n{font-size:10px;letter-spacing:.08em;} }
@media screen and (max-width:640px){ body.sq-shell .dyp-shape-fig.dyp-meet{width:100%;max-width:none;margin:0;justify-self:stretch;} }
/* The pair's shape card is sentence + count now; no figure. */
body.sq-shell .dyp-shape{display:block;padding:22px 24px 20px;}
body.sq-shell .dyp-shape-copy{padding-top:0;border-top:0;}
body.sq-shell .dyp-pills{margin:14px 0 0;}
body.sq-shell .dyp-shape-key{margin-top:14px;}
body.sq-shell .tag.open{color:var(--ink-faint);border:1px solid var(--line);background:rgba(255,255,255,.03);}
body.sq-shell .dyp-shape{padding:20px 24px;}
body.sq-shell .dyp-shape-sum{margin-top:6px;font-size:16.5px;}
body.sq-shell .dyp-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px;}
body.sq-shell .dyp-pills .sq360-pill{justify-content:flex-start;}
body.sq-shell .dyp-pills .sq360-pill:empty{display:none;}
body.sq-shell .dyp-note{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-faint);}
body.sq-shell .dyp-note.show{color:var(--plum-bright);font-weight:600;}
/* ---- Pair panel: one grouped list (2026-10-06) ---- */
body.sq-shell .dyp-shape{display:block;margin:20px 0 6px;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important;}
body.sq-shell .dyp-shape.empty{padding:20px 24px !important;border:1px solid rgba(255,255,255,.09) !important;border-radius:var(--r-card);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)) !important;}
body.sq-shell .dyp-group{margin-top:18px;}
body.sq-shell .dyp-group-h{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:700 15px/1.2 var(--disp);letter-spacing:-.01em;color:var(--ink);}
body.sq-shell .dyp-group-h .sq360-num{width:26px;height:26px;font-size:13px;}
body.sq-shell .dyp-group.same .sq360-num{background:var(--plum-bright);} body.sq-shell .dyp-group.diff .sq360-num{background:var(--amber-bright);color:#1D1A22;} body.sq-shell .dyp-group.open .sq360-num{background:var(--ink-faint);}
body.sq-shell .dyp-group-card{margin:0 !important;padding:0 !important;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:var(--r-card);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 48px -32px rgba(0,0,0,.95);}
body.sq-shell .dyp-group.same .dyp-group-card{border-color:rgba(214,120,170,.32);} body.sq-shell .dyp-group.diff .dyp-group-card{border-color:rgba(224,174,114,.3);}
body.sq-shell .dyp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n c" "s c";gap:4px 14px;align-items:center;padding:16px 18px 16px 22px;border:0;border-bottom:1px solid var(--line);}
body.sq-shell .dyp-row:last-child{border-bottom:0;}
body.sq-shell .dyp-row::before{top:18px;}
body.sq-shell .dyp-row .dyp-row-n{grid-area:n;font:700 16px/1.25 var(--disp);letter-spacing:-.01em;color:var(--ink);text-transform:none;}
body.sq-shell .dyp-row .dyp-row-s{grid-area:s;font-size:14px;line-height:1.45;color:var(--ink-soft);}
body.sq-shell .dyp-row .chev{grid-area:c;}
body.sq-shell .dyp-row.open::before{background:var(--ink-faint);box-shadow:none;}
body.sq-shell .dyp-row + .dyp-detail{margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;}
body.sq-shell .dyp-detail-said{margin:0 0 14px;font:700 15px/1.3 var(--disp);color:var(--plum-bright);}
body.sq-shell .dyp-detail-said.diff{color:var(--amber-bright);}
body.sq-shell .dyp-detail{padding:18px 22px 20px;background:rgba(255,255,255,.02);}
body.sq-shell .dyp-rewrite{margin:0 0 18px !important;padding:18px 20px !important;border:1px solid rgba(214,120,170,.4);border-radius:var(--r-card);background:linear-gradient(180deg,rgba(162,78,129,.14),rgba(162,78,129,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
body.sq-shell .dyp-rewrite-k{display:block;margin-bottom:6px;font:700 11px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--plum-bright);}
body.sq-shell .dyp-rewrite p{margin:0 0 12px;font-size:14.5px;line-height:1.5;color:var(--ink);}

/* ---- Signals: the weekly move's actions (2026-10-06) ---- */
.sqtry-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px;}
.sqtry-btn{min-height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--amber);background:rgba(210,149,74,.14);color:var(--amber-bright);font:600 13px/1 var(--disp);cursor:pointer;}
.sqtry-btn.quiet{border-color:var(--line);background:rgba(255,255,255,.03);color:var(--ink-soft);}
.sqtry-btn:disabled{opacity:.5;cursor:default;}
.sqtry-pill{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font:600 12px/1 var(--disp);color:var(--ink-soft);}
.sqtry-pill.on{border-color:rgba(214,120,170,.4);color:var(--plum-bright);background:rgba(162,78,129,.10);}
.sqtry-prov{margin-left:auto;font:600 11px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
.sqsig .sqrem-acts .sqtry-pill{min-height:28px;}
@media (max-width:760px){.sqtry-prov{margin-left:0;flex-basis:100%;}}
@media print{.sqtry-acts{display:none !important}}

/* ---- THIS WEEK: the inline notification on the Overview (2026-10-06).
   The Activity box's own look, in the flow, governed by state. ---- */
.sqweek{display:block;margin:0 0 18px;padding:15px 18px 14px;border:1px solid rgba(255,255,255,.24);border-left:3px solid var(--amber);color:#F4EEF3;
  background:linear-gradient(100deg,rgba(162,78,129,.62),rgba(58,26,52,.9) 70%),rgba(14,10,18,.86);box-shadow:0 22px 60px rgba(0,0,0,.65),0 0 46px rgba(184,96,145,.5);}
.sqweek-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font:600 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,238,243,.72);}
.sqweek-x{background:none;border:0;color:rgba(244,238,243,.72);font:400 18px/1 var(--disp);cursor:pointer;padding:2px 4px;margin:-4px -6px -4px 0;}
.sqweek-x:hover{color:#fff;}
.sqweek-t{margin:9px 0 11px;font:600 16px/1.4 var(--disp);letter-spacing:-.01em;color:#F8F3F7;max-width:70ch;}
.sqweek-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.sqweek-btn{min-height:32px;padding:0 14px;border-radius:999px;border:1px solid rgba(244,238,243,.6);background:rgba(255,255,255,.08);color:#F8F3F7;font:600 13px/1 var(--disp);cursor:pointer;}
.sqweek-btn.quiet{border-color:rgba(244,238,243,.28);background:none;color:rgba(244,238,243,.85);}
.sqweek-btn:disabled{opacity:.5;cursor:default;}
.sqweek-note{font:600 12px/1 var(--disp);color:rgba(244,238,243,.8);}
.sqweek-chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:7px 12px;border-radius:999px;border:1px solid rgba(214,120,170,.4);background:rgba(162,78,129,.10);font:600 12px/1 var(--disp);color:var(--plum-bright);}
.sqweek-chip i{width:7px;height:7px;border-radius:50%;background:var(--plum-bright);box-shadow:0 0 8px rgba(184,96,145,.8);}
[data-theme="light"] .sqweek{color:#2A1F2E;background:linear-gradient(100deg,rgba(162,78,129,.18),rgba(255,255,255,.85) 70%),rgba(255,255,255,.9);border-color:rgba(36,28,41,.14);box-shadow:0 18px 50px rgba(80,60,92,.18),0 0 36px rgba(184,96,145,.18);}
[data-theme="light"] .sqweek-meta,[data-theme="light"] .sqweek-x,[data-theme="light"] .sqweek-note{color:rgba(42,31,46,.7);} [data-theme="light"] .sqweek-t{color:#241C29;}
[data-theme="light"] .sqweek-btn{border-color:rgba(36,28,41,.35);background:rgba(36,28,41,.05);color:#241C29;} [data-theme="light"] .sqweek-btn.quiet{color:rgba(36,28,41,.8);}
@media (max-width:760px){.sqweek{margin:0 0 14px;padding:13px 14px 12px;}}
@media print{.sqweek,.sqweek-chip{display:none !important}}

/* PIPS (visual language, 2026-10-07): a meter that counts things, one pip each. */
.sqpips{display:flex;gap:4px;width:100%;}
.sqpips i{flex:1 1 0;height:8px;border-radius:4px;background:rgba(var(--ink-rgb),.12);}
.sqpips i.on{background:var(--amber-bright);box-shadow:0 0 8px rgba(224,174,114,.45);}

/* THE FIGURE'S FIELD (Anthem, 2026-10-07: "the words sitting on top of the
   graph"). The ring names recede into the background, the figure sits on a
   lit plum field, and the stroke carries more light. These come last so they
   win over the shell's earlier sizes for the ring names. */
body.sq-shell .sqshape-rname,body.sq-shell .sqherocard .sqshape-rname{font:500 10px var(--disp);fill:rgba(var(--ink-rgb),.3);stroke:none;paint-order:normal;letter-spacing:.02em;}
@media (min-width:900px){ body.sq-shell .sqherocard .sqshape-rname{font-size:11px;} }
body.sq-shell .sqshape-ring{stroke:rgba(var(--ink-rgb),.09);}
body.sq-shell .sqshape-spoke{stroke:rgba(var(--ink-rgb),.09);}
body.sq-shell .sqhero-shape::before{content:"";position:absolute;left:50%;top:50%;width:92%;aspect-ratio:1;transform:translate(-50%,-52%);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(92,42,78,.70) 0%,rgba(58,27,51,.52) 36%,rgba(162,78,129,.16) 58%,transparent 72%);filter:blur(12px);}
body.sq-shell .sqhero-shape .sqshape{position:relative;z-index:1;}
body.sq-shell .sqherocard[data-finish="paper"] .sqhero-shape::before{display:none;}
body.sq-shell .sqshape-poly{filter:drop-shadow(0 0 6px rgba(230,169,201,.95)) drop-shadow(0 0 16px rgba(184,96,145,.85)) drop-shadow(0 0 34px rgba(162,78,129,.55));}
body.sq-shell .sqreveal .sqshape-poly{filter:drop-shadow(0 0 6px rgba(230,169,201,.95)) drop-shadow(0 0 16px rgba(184,96,145,.85)) drop-shadow(0 0 34px rgba(162,78,129,.55));}

/* THE HERO FIGURE AS GLASS (visual language, 2026-10-07; Anthem picked
   treatment A). The svg carries class sqfig; the console's own .sqglass is
   a bordered panel and must not be reused here. */
.sqfig .sqfig-spoke{stroke:transparent;}
.sqfig .sqfig-rip{opacity:.55;}  /* still rings, soft but not drifting: between an instrument and a nebula (2026-10-07) */
.sqfig .sqfig-rip:nth-of-type(2){animation-delay:1.6s;} .sqfig .sqfig-rip:nth-of-type(3){animation-delay:3.2s;} .sqfig .sqfig-rip:nth-of-type(4){animation-delay:4.8s;}
@keyframes sqripple{0%{transform:scale(.97);opacity:.9}100%{transform:scale(1.04);opacity:.35}}
@media (prefers-reduced-motion:reduce){.sqfig .sqfig-rip{animation:none;}}
.sqfig .sqfig-poly{stroke-width:3.5;filter:drop-shadow(0 0 7px rgba(230,169,201,.9)) drop-shadow(0 0 18px rgba(184,96,145,.7));}
.sqfig .sqfig-inner{stroke:rgba(246,241,249,.35);stroke-width:1;}
.sqfig .sqfig-halo{fill:rgba(246,241,249,.18);}
.sqfig .sqshape-dot{fill:#FBF6FA;r:3;filter:none;}
.sqfig .sqshape-label{font:500 12px var(--disp);letter-spacing:0;fill:#E9D3E1;filter:drop-shadow(0 0 6px rgba(184,96,145,.55));}
.sqfig .sqfig-mark{fill:rgba(246,241,249,.55);}
.sqfig .sqfig-key{fill:none;stroke:rgba(246,241,249,.11);stroke-width:.7;}
.sqfig .sqfig-key.on{stroke:rgba(246,241,249,.55);stroke-width:1.1;}
.sqfig .sqfig-keyname{font:500 8.5px var(--disp);letter-spacing:.18em;fill:rgba(246,241,249,.4);}
body.sq-shell .sqhero-shape::before{display:none;} /* the figure carries its own field */
body.sq-shell .sqhero-shape .sqfig .sqshape-dot.lit{r:5;fill:var(--hi);filter:drop-shadow(0 0 6px rgba(255,255,255,.9));}
body.sq-shell .sqhero-shape .sqfig .sqshape-spoke.lit{stroke:transparent;}

/* TRAIT ROWS, solid meters in the stroke (Anthem, 2026-10-07). */
.sqtrait-row{margin:0 0 18px;}
.sqtrait-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.sqtrait-name{font:600 15px var(--disp);}
.sqtrait-scale{font-size:12px;color:var(--ink-faint);}
.sqtrait-bar{height:8px;margin:8px 0 8px;}
.sqtrait-blurb{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-soft);}
/* THE REMAINING ROWS OF THE SWEEP (visual language, 2026-10-07): the reads
   pips, the Up-next stepper, the team's split bar, the 360 count badges. */
.sqnext-track li.done .sqnext-dot{background:linear-gradient(135deg,var(--plum-bright),var(--amber-bright));border-color:transparent;}
body.sq-shell .sqnext-track li.next .sqnext-dot{border-color:var(--amber-bright);background:rgba(224,174,114,.3);box-shadow:0 0 10px rgba(224,174,114,.7);}
body.sq-shell .sqshare-bar{background:rgba(var(--ink-rgb),.08);box-shadow:none;height:9px;}
body.sq-shell .sqshare-seg{border-radius:999px;}
body.sq-shell .sqshare-seg.lo,body.sq-shell .sqshare-key.lo i{background:var(--plum-bright);box-shadow:0 0 8px rgba(184,96,145,.5);}
body.sq-shell .sqshare-seg.mid,body.sq-shell .sqshare-key.mid i{background:linear-gradient(90deg,var(--plum-bright),var(--amber-bright));box-shadow:0 0 8px rgba(224,174,114,.4);}
body.sq-shell .sqshare-seg.hi,body.sq-shell .sqshare-key.hi i{background:var(--amber-bright);box-shadow:0 0 8px rgba(224,174,114,.5);}
body.sq-shell .sq360-pill b{background:transparent;border:2px solid var(--ink-faint);color:var(--ink);box-shadow:none;}
body.sq-shell .sq360-pill.agree b{background:transparent;border-color:var(--plum-bright);box-shadow:0 0 8px rgba(184,96,145,.5);}
body.sq-shell .sq360-pill.gap b,body.sq-shell .sq360-pill.lean b{background:transparent;border-color:var(--amber-bright);color:var(--ink);box-shadow:0 0 8px rgba(224,174,114,.5);}

/* SUPER TEAM: Team health and Pairs on one row, the same size (Anthem, 2026-10-07).
   DOM order is Team Shape, Pairs, Team health; placement is explicit. */
@media (min-width:1000px){
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom:has(> .sqhealth),body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom:has(> .sqlock){grid-template-rows:auto auto;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block:first-of-type:not(.sqlock){grid-column:1 / -1;grid-row:1;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block.sqhealth,body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block.sqlock{grid-column:1;grid-row:2;align-self:stretch;}
  /* A new team has both locked (2026-10-10): Team Shape and Team health were
     both placed in column 1, row 2, one on top of the other. Health goes beside it. */
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom:has(> [data-lock="teamshape"]) > section.block[data-lock="teamhealth"],body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom:has(> [data-lock="teamshape"]) > section.block.sqhealth{grid-column:2;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block:has(> #stToDyads){grid-column:2;grid-row:2;align-self:stretch;display:flex;flex-direction:column;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block:has(> #stToDyads) .ccta{flex:1;display:flex;flex-direction:column;justify-content:center;}
}

/* CONSTELLATION in the stroke (visual language, 2026-10-07). */
.map.sqroom .edge{stroke-width:2;filter:drop-shadow(0 0 5px rgba(184,96,145,.55));}
.map.sqroom .edge.lit{stroke-width:3;}
.map.sqroom .orbit{stroke-dasharray:none;stroke-opacity:.1;}
.map.sqroom .node.you .ring{stroke:var(--amber-bright);stroke-width:2;filter:drop-shadow(0 0 6px rgba(224,174,114,.6));}
.map.sqroom .node.you .ring2{stroke:var(--amber-bright);stroke-opacity:.3;}
.map.sqroom .ring{filter:drop-shadow(0 0 5px rgba(184,96,145,.45));}
.sqfig-aura .sqfig-poly{stroke-width:3;filter:drop-shadow(0 0 4px rgba(230,169,201,.55)) drop-shadow(0 0 10px rgba(184,96,145,.35));}
.sqfig-aura .sqfig-soft{fill:rgba(230,169,201,.1);}
.sqfig-aura .sqshape-dot{fill:#FBEFF6;opacity:.92;}

/* THE PROFILE'S MIDDLE (scorecard item 3, 2026-10-07). */
/* (a) the Whole You cards: a larger glyph, the lean as a quiet second line */
body.sq-thread [data-view="snapshot"] .sqcards .sqcard.sqthreaded{padding-left:82px;}
.sqthread-up{width:64px;height:64px;top:14px;left:4px;}
.sqcard-lean{display:block;margin:4px 0 8px;font:400 13px/1.4 var(--sans);color:var(--ink-faint);}
.sqcard-lean b{font-weight:600;color:var(--amber-bright);}
/* (b) two tiers of section heading: the read itself at full weight, advice and derived sections quieter */
/* !important matches the file's own precedent for section-heading tiers (the 360 and gap rules above). */
/* The quiet tier is excluded from the unified heading rule above (:not(.sqsec-quiet)), so this needs no !important. */
body.sq-shell:not([data-printing]) [data-view="snapshot"] h2.sqh2.sqsec.sqsec-quiet{font-size:21px;line-height:26px;font-weight:600;margin-top:48px;padding-top:18px;border-top-color:var(--line);color:var(--ink-soft);}
/* (c) the fold on the two long reads (.sqlong; .sqfold belongs to Activity) */
.sqlong{position:relative;display:block;}
.sqlong:not(.open) .sqlong-body{max-height:380px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);mask-image:linear-gradient(to bottom,#000 60%,transparent);}
.sqlong-btn,body.sq-shell .sqlong .sqlong-btn{display:block;position:static;float:none;width:auto;margin:10px 0 0;text-align:left;font:600 13px var(--disp);color:var(--plum-bright);background:none;border:0;padding:0;cursor:pointer;}
.sqlong-btn:hover{color:var(--ink);}
@media (max-width:760px){ .sqthread-up{width:52px;height:52px;} body.sq-thread [data-view="snapshot"] .sqcards .sqcard.sqthreaded{padding-left:68px;} }
@media print{ .sqlong .sqlong-body{max-height:none !important;-webkit-mask-image:none !important;mask-image:none !important;} .sqlong-btn{display:none !important;} }
/* On a phone the glyph floats left and the lean line wrapped back under it; it keeps the title's left edge. */
@media (max-width:760px){ body.sq-shell .sqcards .sqcard.sqthreaded .sqcard-lean{margin-left:64px;} }

/* CROSS-LIGHT (scorecard item 2, 2026-10-07): the reading shown on the figure is lit on its card, and back. */
body.sq-shell [data-view="snapshot"] .sqcards .sqcard.sqlit{border-color:rgba(184,96,145,.55);box-shadow:0 0 0 1px rgba(184,96,145,.22),0 0 24px -8px rgba(184,96,145,.5);}
body.sq-shell [data-view="snapshot"] .sqcards .sqcard.sqlit .sqg-ring{stroke:rgba(246,241,249,.6);}
body.sq-shell [data-view="snapshot"] .sqcards .sqcard{transition:border-color .25s ease,box-shadow .25s ease;}
body.sq-shell .sqhero-shape .sqfig .sqshape-label.lit{fill:var(--hi);filter:drop-shadow(0 0 6px rgba(230,169,201,.75));}
body.sq-shell .sqhero-shape .sqfig .sqshape-hit{cursor:pointer;}

/* SIMULATED PIECES, sandbox only (scorecard item 2 emulation, 2026-10-07). */
.sqfig .sqfig-prev{stroke:var(--rose);stroke-width:2.2;stroke-linecap:round;opacity:.9;}
.sqsim{margin:8px 0 0;font:500 11px var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--amber-bright);opacity:.8;}
.sqhero-shape .sqsim{text-align:center;margin-top:0;}
.sqdrag{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.sqdrag-k{margin:0 0 10px;font:600 13px var(--disp);color:var(--ink-soft);}
.sqdrag-line{position:relative;height:28px;max-width:320px;}
.sqdrag-line::before{content:"";position:absolute;left:0;right:0;top:13px;height:1.6px;background:rgba(var(--ink-rgb),.22);border-radius:1px;}
.sqdrag-pip{position:absolute;top:12px;width:4px;height:4px;border-radius:50%;background:rgba(var(--ink-rgb),.35);transform:translateX(-50%);}
.sqdrag-pip[data-step="-1"]{left:12%;} .sqdrag-pip[data-step="1"]{left:88%;}
.sqdrag-mid{position:absolute;left:50%;top:11px;width:6px;height:6px;border-radius:50%;background:rgba(var(--ink-rgb),.5);transform:translateX(-50%);}
.sqdrag-mark{position:absolute;left:50%;top:4px;width:20px;height:20px;border-radius:50%;border:0;padding:0;background:var(--amber-bright);box-shadow:0 0 10px rgba(224,174,114,.6);transform:translateX(-50%);cursor:grab;touch-action:none;transition:left .18s ease;}
.sqdrag-mark:active{cursor:grabbing;}
.sqdrag-mark:focus-visible{outline:2px solid var(--plum-bright);outline-offset:3px;}
.sqdrag-say{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--ink-soft);min-height:21px;}
.sqdrag.moved .sqdrag-say{color:var(--ink);}
.sqdrag-acts{display:flex;gap:10px;margin-top:10px;}
.sqdrag-acts[hidden]{display:none;}

/* Hover only brightens; a press chooses (2026-10-07). */
body.sq-shell .sqhero-shape .sqfig .sqshape-dot.hover:not(.lit){r:4.5;filter:drop-shadow(0 0 5px rgba(251,239,246,.8));}
body.sq-shell .sqhero-shape .sqfig .sqshape-label.hover:not(.lit){fill:var(--ink);}

/* THE 360 IN THE SAME DIALECT (scorecard item 4, 2026-10-07): the count strips take
   the stroke's two sides (plum one way, amber the other, the gradient between);
   confirmed / missed marks become rings in the stroke like the hero's badges. */
body.sq-shell .sqevery-bar{background:rgba(var(--ink-rgb),.08);box-shadow:none;height:9px;}
body.sq-shell .sqevery-bar i{border-radius:999px;}
body.sq-shell .sqevery-bar .s0,body.sq-shell .sqevery-rows .s0{background:var(--plum-bright);box-shadow:0 0 8px rgba(184,96,145,.5);}
body.sq-shell .sqevery-bar .s1,body.sq-shell .sqevery-rows .s1{background:linear-gradient(90deg,var(--plum-bright),var(--amber-bright));box-shadow:0 0 8px rgba(224,174,114,.4);}
body.sq-shell .sqevery-bar .s2,body.sq-shell .sqevery-rows .s2{background:var(--amber-bright);box-shadow:0 0 8px rgba(224,174,114,.5);}
body.sq-shell .sqevery-bar .s3,body.sq-shell .sqevery-rows .s3{background:var(--plum-deep);}
body.sq-shell .sqevery-bar .s4,body.sq-shell .sqevery-rows .s4{background:rgba(var(--ink-rgb),.3);}
body.sq-shell .sqsealed-row.held .sqsealed-mark{color:var(--ink);background:transparent;border:1.5px solid var(--plum-bright);box-shadow:0 0 8px rgba(184,96,145,.5);}
body.sq-shell .sqsealed-row.missed .sqsealed-mark{color:var(--ink);background:transparent;border:1.5px solid var(--amber-bright);box-shadow:0 0 8px rgba(224,174,114,.5);}
/* Super Team on a phone: Team health above Pairs (scorecard item 4). */
@media (max-width:999px){
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom{display:flex;flex-direction:column;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block.sqhealth,body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block.sqlock{order:2;}
  body.sq-shell:not([data-printing]) [data-view="superteam"] #stRoom > section.block:has(> #stToDyads){order:3;}
}
/* THE FIGURE ON PAPER (scorecard item 4, 2026-10-07): the hero card's Warm Paper
   finish had white words and white points on cream. On paper the stroke is the
   deep plum, the aura a faint plum wash, the words and legend ink, the points
   plum, the rings a dark hairline. */
body.sq-shell .sqherocard[data-finish="paper"] .sqfig .sqshape-label{fill:rgba(36,23,38,.78);filter:none;}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig .sqshape-label.lit{fill:#241726;filter:none;}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig .sqfig-mark{fill:rgba(36,23,38,.45);}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig .sqshape-ring{stroke:rgba(36,23,38,.16) !important;}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig .sqfig-poly:not(.sqfig-seg){stroke:#8E3F6C !important;filter:none;fill:rgba(142,63,108,.08) !important;}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig .sqshape-dot{fill:#8E3F6C;opacity:1;}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig .sqfig-soft{fill:rgba(142,63,108,.12);}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig .sqfig-aura-mid,body.sq-shell .sqherocard[data-finish="paper"] .sqfig path[fill="#B86091"]{opacity:.12;}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig .sqfig-key{stroke:rgba(36,23,38,.18);}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig .sqfig-key.on{stroke:#8E3F6C;}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig .sqfig-keyname{fill:rgba(36,23,38,.55);}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig .sqfig-spoke{stroke:rgba(36,23,38,.1);}

/* THE PHONE PASS (scorecard item 5, 2026-10-07). Found by walking every view at 390 wide. */
/* 1. The bold lead-ins ran off the edge because the fold's class collided with Activity's .sqfold; the fold is .sqlong now. */
/* 2. The 360's tab row wrapped to two lines; it scrolls sideways instead, with the arrows as the key. */
@media (max-width:760px){
  body.sq-shell .sq360-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;row-gap:0;}
  body.sq-shell .sq360-tabs::-webkit-scrollbar{display:none;}
  body.sq-shell .sq360-tabs > *{flex:0 0 auto;}
}
/* 3. The team's logo tile squeezed the team name to two lines; on a phone it sits beside the people row, smaller. */
@media (max-width:760px){
  body.sq-shell .sqlogo{position:absolute;right:18px;top:18px;width:56px;height:56px;border-radius:14px;}
  body.sq-shell .sqlogo::before{inset:-6px;border-radius:18px;}
  body.sq-shell .sqlogo .sqlogo-acts,body.sq-shell .sqlogo .sqlogo-note{display:none;}
  body.sq-shell [data-view="superteam"] .hero h1.archetype{padding-right:70px;}
}
/* 4. Text-link buttons were 16px tall; a thumb needs 44. */
@media (max-width:760px){
  body.sq-shell .sqlong-btn,body.sq-shell .sqprep-x,body.sq-shell .sqcard .link,body.sq-shell .sqthread-down{min-height:44px;display:inline-flex;align-items:center;}
}

/* STAGE 2 on the figure (scorecard item 1, 2026-10-07) and the constellation's weights. */
.sqfig-sided .sqfig-even{opacity:.9;}
.sqfig-sided .sqshape-label.even{fill:rgba(246,241,249,.42);font-weight:400;}
.map.sqroom .edge.w1{stroke-width:1.5;opacity:.7;}
.map.sqroom .edge.w2{stroke-width:2.5;}
.map.sqroom .edge.w3{stroke-width:4;}

/* THE FIGURE ON THE PRINTED PROFILE (scorecard item 6, 2026-10-07): the PDF is
   white paper, so the figure prints the way the Warm Paper finish draws it:
   deep plum stroke, ink words, no aura, hairline rings. */
@media print{
  body[data-printing^="profile"] .sqfig .sqshape-label{fill:rgba(36,23,38,.78) !important;filter:none !important;}
  body[data-printing^="profile"] .sqfig .sqshape-label.even{fill:rgba(36,23,38,.45) !important;}
  body[data-printing^="profile"] .sqfig .sqfig-mark{fill:rgba(36,23,38,.45) !important;}
  body[data-printing^="profile"] .sqfig .sqshape-ring{stroke:rgba(36,23,38,.18) !important;filter:none !important;opacity:1 !important;}
  body[data-printing^="profile"] .sqfig .sqfig-even{stroke:rgba(36,23,38,.4) !important;}
  body[data-printing^="profile"] .sqfig .sqfig-poly:not(.sqfig-seg){stroke:#8E3F6C !important;filter:none !important;fill:rgba(142,63,108,.08) !important;animation:none !important;}
  body[data-printing^="profile"] .sqfig .sqshape-dot{fill:#8E3F6C !important;opacity:1 !important;filter:none !important;}
  body[data-printing^="profile"] .sqfig .sqfig-soft,body[data-printing^="profile"] .sqfig .sqfig-aura-big,body[data-printing^="profile"] .sqfig .sqfig-aura-mid,body[data-printing^="profile"] .sqfig path[fill="#6A3159"],body[data-printing^="profile"] .sqfig path[fill="#B86091"]{display:none !important;}
  body[data-printing^="profile"] .sqfig .sqfig-key{stroke:rgba(36,23,38,.2) !important;}
  body[data-printing^="profile"] .sqfig .sqfig-key.on{stroke:#8E3F6C !important;}
  body[data-printing^="profile"] .sqfig .sqfig-keyname{fill:rgba(36,23,38,.55) !important;}
  body[data-printing^="profile"] .sqfig .sqfig-spoke{stroke:rgba(36,23,38,.1) !important;}
  body[data-printing^="profile"] .sqhero-shape::before{display:none !important;}
}

/* THE KEY under the hero figure (2026-10-07). */
body.sq-shell .sqhero-shape .sqkey6{display:grid;gap:4px;margin:6px 8px 0;position:relative;z-index:1}
body.sq-shell .sqhero-shape .sqkrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:3px 6px;border:0;border-radius:8px;background:none;color:var(--ink-soft);font:inherit;text-align:left;cursor:pointer;transition:background .18s ease}
body.sq-shell .sqhero-shape .sqkrow:hover{background:rgba(var(--ink-rgb),.04)}
body.sq-shell .sqhero-shape .sqkrow.lit{background:rgba(184,96,145,.12)}
body.sq-shell .sqhero-shape .sqkrow:focus-visible{outline:2px solid var(--plum-bright);outline-offset:1px}
body.sq-shell .sqhero-shape .sqkrow .kn{font:500 11px var(--disp);color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.sq-shell .sqhero-shape .sqkrow.lit .kn{color:var(--ink)}
body.sq-shell .sqhero-shape .kline{display:grid;grid-template-columns:auto 64px auto;align-items:center;gap:6px}
body.sq-shell .sqhero-shape .kline .a,body.sq-shell .sqhero-shape .kline .b{font-size:11px;color:var(--ink-faint);white-space:nowrap;max-width:108px;overflow:hidden;text-overflow:ellipsis}
body.sq-shell .sqhero-shape .kline .a{text-align:right}
body.sq-shell .sqhero-shape .kline .a.on,body.sq-shell .sqhero-shape .kline .b.on{color:var(--ink);font-weight:600}
body.sq-shell .sqhero-shape .ktrack{position:relative;height:12px}
body.sq-shell .sqhero-shape .ktrack::before{content:"";position:absolute;left:0;right:0;top:5.5px;height:1px;background:rgba(var(--ink-rgb),.25)}
body.sq-shell .sqhero-shape .ktrack i{position:absolute;top:3px;left:50%;width:6px;height:6px;border-radius:50%;background:rgba(var(--ink-rgb),.5);transform:translateX(-50%)}
body.sq-shell .sqhero-shape .ktrack b{position:absolute;top:2px;width:8px;height:8px;border-radius:50%;background:var(--amber-bright);box-shadow:0 0 6px rgba(224,174,114,.6);transform:translateX(-50%)}
body.sq-shell .sqhero-shape .ktrack b.even{background:var(--ink);box-shadow:none;width:6px;height:6px;top:3px}
body.sq-shell .sqhero-shape .knamed{font-size:11px;color:var(--ink);font-weight:600;justify-self:end}
body.sq-shell .sqhero-shape .knamed.even{color:var(--ink-faint);font-weight:400}
body.sq-shell .sqherocard[data-finish="paper"] .sqhero-shape .sqkrow,body.sq-shell .sqherocard[data-finish="paper"] .sqhero-shape .kline .a,body.sq-shell .sqherocard[data-finish="paper"] .sqhero-shape .kline .b,body.sq-shell .sqherocard[data-finish="paper"] .sqhero-shape .sqkrow .kn{color:rgba(36,23,38,.6)}
body.sq-shell .sqherocard[data-finish="paper"] .sqhero-shape .kline .on,body.sq-shell .sqherocard[data-finish="paper"] .sqhero-shape .knamed,body.sq-shell .sqherocard[data-finish="paper"] .sqhero-shape .sqkrow.lit .kn{color:#241726}
body.sq-shell .sqherocard[data-finish="paper"] .sqhero-shape .ktrack::before{background:rgba(36,23,38,.25)}
body.sq-shell .sqherocard[data-finish="paper"] .sqhero-shape .ktrack b{background:#8E3F6C;box-shadow:none}
@media print{ body[data-printing^="profile"] .sqkey6{display:none !important;} }

/* Which way, in colour (2026-10-07): the four rings are the scale, outward
   only; rose is a reading's first pole, amber its second, the warm white of
   the points where there is no side. The word says the same thing. */
.sqfig-sided .sqshape-dot[data-side="a"]{fill:#E6A9C9}
.sqfig-sided .sqshape-dot[data-side="b"]{fill:#E0AE72}
.sqfig-sided .sqfig-soft[data-side="a"]{fill:rgba(230,169,201,.22)}
.sqfig-sided .sqfig-soft[data-side="b"]{fill:rgba(224,174,114,.22)}
.sqfig-sided .sqshape-label[data-side="a"]{fill:#EDB9D3;filter:drop-shadow(0 0 6px rgba(230,169,201,.45))}
.sqfig-sided .sqshape-label[data-side="b"]{fill:#E8B97F;filter:drop-shadow(0 0 6px rgba(224,174,114,.45))}
body.sq-shell .sqhero-shape .kline .a.on{color:#EDB9D3}
body.sq-shell .sqhero-shape .kline .b.on{color:#E8B97F}
body.sq-shell .sqhero-shape .ktrack b.a{background:#E6A9C9;box-shadow:0 0 6px rgba(230,169,201,.6)}
body.sq-shell .sqhero-shape .ktrack b.b{background:#E0AE72;box-shadow:0 0 6px rgba(224,174,114,.6)}
/* In the light theme the hero sits on the light ground unless the plum finish
   is chosen, and the two tints vanish on the lit row's pink highlight: the pole
   word measured 1.31:1 (light walk, 2026-10-08). Light takes the paper inks;
   the plum finish keeps the tints because its card is still dark. */
[data-theme="light"] body.sq-shell .sqhero-shape .kline .a.on{color:#8E3F6C}
[data-theme="light"] body.sq-shell .sqhero-shape .kline .b.on{color:#946124}
[data-theme="light"] body.sq-shell .sqhero-shape .ktrack b.a{background:#8E3F6C;box-shadow:none}
[data-theme="light"] body.sq-shell .sqhero-shape .ktrack b.b{background:#946124;box-shadow:none}
[data-theme="light"] body.sq-shell .sqfig-sided .sqshape-label[data-side="a"]{fill:#8E3F6C;filter:none}
[data-theme="light"] body.sq-shell .sqfig-sided .sqshape-label[data-side="b"]{fill:#946124;filter:none}
[data-theme="light"] body.sq-shell .sqherocard[data-finish="plum"] .sqhero-shape .kline .a.on{color:#EDB9D3}
[data-theme="light"] body.sq-shell .sqherocard[data-finish="plum"] .sqhero-shape .kline .b.on{color:#E8B97F}
[data-theme="light"] body.sq-shell .sqherocard[data-finish="plum"] .sqhero-shape .ktrack b.a{background:#E6A9C9;box-shadow:0 0 6px rgba(230,169,201,.6)}
[data-theme="light"] body.sq-shell .sqherocard[data-finish="plum"] .sqhero-shape .ktrack b.b{background:#E0AE72;box-shadow:0 0 6px rgba(224,174,114,.6)}
[data-theme="light"] body.sq-shell .sqherocard[data-finish="plum"] .sqfig-sided .sqshape-label[data-side="a"]{fill:#EDB9D3;filter:drop-shadow(0 0 6px rgba(230,169,201,.45))}
[data-theme="light"] body.sq-shell .sqherocard[data-finish="plum"] .sqfig-sided .sqshape-label[data-side="b"]{fill:#E8B97F;filter:drop-shadow(0 0 6px rgba(224,174,114,.45))}
/* THE FIGURE IN LIGHT (Anthem, 2026-10-08: "the graph just doesn't seem as
   present in light mode... we just need to find ways for it to sit properly
   in light" without breaking the aesthetic). Same construction as the dark:
   the aura, the glow, the rose stroke. In the dark the aura is a dark plum
   that a pale stroke lifts off. On the light ground the two blurred copies
   went darker than the stroke and pooled at the top point. Here the aura is
   a lighter plum at lower opacity, so it spreads flat inside the form; the
   stroke goes one step deeper into rose so it carries the edge; the dots
   and the rings take enough tone to be seen. The plum finish is untouched. */
/* Ombre glow (Anthem): rose at the top running to peach below, the title's
   plum-to-amber in the light. */
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig .sqfig-aura-big{opacity:.30}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig .sqfig-aura-mid{opacity:.30}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig stop.sqfig-la{stop-color:#D889B5}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig stop.sqfig-lb{stop-color:#E9B48F}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig stop.sqfig-ma{stop-color:#E6A9C9}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig stop.sqfig-mb{stop-color:#F0C9A0}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig .sqfig-fill{fill:rgba(184,96,145,.10)}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig .sqfig-poly:not(.sqfig-seg){fill:rgba(184,96,145,.10)}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig stop.sqfig-ga{stop-color:#8E3F6C}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig stop.sqfig-gb{stop-color:#946124}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig stop.sqfig-gn{stop-color:#9C6B8E}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig .sqfig-poly{filter:drop-shadow(0 0 5px rgba(230,169,201,.7)) drop-shadow(0 0 14px rgba(184,96,145,.3))}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig .sqshape-ring{stroke:rgba(92,42,78,.13) !important}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig .sqfig-mark{fill:rgba(92,42,78,.35)}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig .sqshape-dot{fill:#FBEFF6;stroke:#8E3F6C;stroke-width:1.4}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig-sided .sqshape-dot[data-side="a"]{fill:#E6A9C9;stroke:#8E3F6C}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig-sided .sqshape-dot[data-side="b"]{fill:#E0AE72;stroke:#946124}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig .sqfig-soft{fill:rgba(184,96,145,.18)}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig .sqfig-key{stroke:rgba(92,42,78,.18)}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig .sqfig-key.on{stroke:#8E3F6C}
[data-theme="light"] body.sq-shell .sqherocard:not([data-finish="plum"]) .sqhero-shape .sqfig .sqfig-keyname{fill:rgba(36,23,38,.55)}
/* On paper the two tints are deep plum and deep amber ink. */
body.sq-shell .sqherocard[data-finish="paper"] .sqfig .sqfig-seg{filter:none}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig stop.sqfig-ga{stop-color:#8E3F6C}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig stop.sqfig-gb{stop-color:#946124}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig stop.sqfig-gn{stop-color:#5C2A4E}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig .sqfig-fill{fill:rgba(142,63,108,.08)}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig-sided .sqshape-dot[data-side="a"]{fill:#8E3F6C}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig-sided .sqshape-dot[data-side="b"]{fill:#946124}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig-sided .sqshape-label[data-side="a"]{fill:#8E3F6C;filter:none}
body.sq-shell .sqherocard[data-finish="paper"] .sqfig-sided .sqshape-label[data-side="b"]{fill:#946124;filter:none}
body.sq-shell .sqherocard[data-finish="paper"] .sqhero-shape .kline .a.on{color:#8E3F6C}
body.sq-shell .sqherocard[data-finish="paper"] .sqhero-shape .kline .b.on{color:#946124}
body.sq-shell .sqherocard[data-finish="paper"] .sqhero-shape .ktrack b.a{background:#8E3F6C}
body.sq-shell .sqherocard[data-finish="paper"] .sqhero-shape .ktrack b.b{background:#946124}
@media print{
  body[data-printing^="profile"] .sqfig .sqfig-seg{filter:none !important;animation:none !important}
  body[data-printing^="profile"] .sqfig stop.sqfig-ga{stop-color:#8E3F6C}
  body[data-printing^="profile"] .sqfig stop.sqfig-gb{stop-color:#946124}
  body[data-printing^="profile"] .sqfig stop.sqfig-gn{stop-color:#5C2A4E}
  body[data-printing^="profile"] .sqfig .sqfig-fill{fill:rgba(142,63,108,.08)}
  body[data-printing^="profile"] .sqfig-sided .sqshape-dot[data-side="a"]{fill:#8E3F6C !important}
  body[data-printing^="profile"] .sqfig-sided .sqshape-dot[data-side="b"]{fill:#946124 !important}
}

/* THE KEY ROWS ON A PHONE (2026-10-08): "Deciding" had 24px and read "D.."
   because its two pole words took 188px of a 308px row. Under 480px the
   label keeps at least 78px and a long pole word wraps to a second line
   instead of pushing the label out. Last in the file so it outranks the
   desktop rule for the same selectors. */
@media screen and (max-width:480px){
  body.sq-shell .sqhero-shape .sqkrow{grid-template-columns:minmax(78px,1fr) auto;}
  body.sq-shell .sqhero-shape .kline .a,body.sq-shell .sqhero-shape .kline .b{white-space:normal;max-width:84px;line-height:1.15;overflow:visible;text-overflow:clip;}
}
/* THE KEY ROWS UNDER THE HERO FIGURE ARE OFF (Anthem, 2026-10-08: "get rid of
   the whole description under the graph in the hero, because we're probably
   not going to roll with this"). snapshot.js still renders them and the
   rules above still style them; this one line hides them in the hero. With
   them gone the hero's sizing is back to 3b4c182: two columns from 900 up,
   34px at the foot. */
body.sq-shell .sqhero-shape .sqkey6{display:none;}

/* THE WORLDS' HERO (themes step 3, 2026-10-08). Under a world the hero card
   wears that world's wallpaper for the chosen finish and mode (js/heroart.js
   sets data-world and the art variables; js/worldart.js resolves the file).
   Plum night never carries data-world, so none of this touches it.

   The art is the card's own background. Over it sits a veil (::before) that
   keeps the headline column on the finish's ground and lets the art come
   through from the middle outwards, and under the shape a soft pool of the
   same ground (the existing halo, repurposed): localized protection, never
   an opaque plate, so the art stays visible around and through the figure
   (decision C5). The card isolates its stacking so the veil paints above
   the background and below every child. */
/* The hero's own inks: every descendant that reads --ink, --ink-soft,
   --ink-faint or --ink-rgb follows the finish's tone (a matte card stays
   dark in light mode, a print card stays light in dark mode), so the kicker,
   the codes, the shape's labels and the small print never inherit the
   page's ink across a card of the opposite tone. */
.sqherocard[data-world]{isolation:isolate;color:var(--hero-ink);--ink:var(--hero-ink);--ink-rgb:var(--hero-ink-rgb);--ink-soft:rgba(var(--hero-ink-rgb),.74);--ink-faint:rgba(var(--hero-ink-rgb),.58);--hi:var(--hero-ink);}
.sqherocard[data-world][data-art]{background-image:var(--hero-art) !important;background-size:cover !important;background-repeat:no-repeat !important;
  background-position:var(--hero-art-x,100%) 50% !important;background-color:var(--hero-bg) !important;}
.sqherocard[data-world][data-art]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,var(--hero-bg) 0%,var(--hero-bg) 30%,rgba(var(--hero-bg-rgb),.86) 44%,rgba(var(--hero-bg-rgb),.38) 60%,rgba(var(--hero-bg-rgb),.08) 78%,transparent 100%);}
.sqherocard[data-world][data-art] .sqshape-wrap::before{inset:-18%;background:radial-gradient(circle at 50% 48%,rgba(var(--hero-bg-rgb),.82) 0%,rgba(var(--hero-bg-rgb),.66) 40%,rgba(var(--hero-bg-rgb),.4) 58%,rgba(var(--hero-bg-rgb),.12) 68%,transparent 76%);filter:blur(10px);animation:none;}
/* The figure's words sit at the rim of the pool, over whatever the art puts
   there, so each carries a soft halo of the ground: protection the size of
   the word, not a plate. The lit word keeps its colour, loses its pink glow. */
html body.sq-shell .sqherocard[data-world][data-art] .sqshape-label,html body.sq-shell .sqherocard[data-world][data-art] .sqshape-rname{paint-order:stroke fill;stroke:var(--hero-bg);stroke-width:7px;stroke-linejoin:round;filter:drop-shadow(0 0 3px var(--hero-bg)) drop-shadow(0 0 6px var(--hero-bg)) drop-shadow(0 0 12px var(--hero-bg));}
/* Every point carries a rim of the ground (a 1.6 px stroke under its fill)
   plus a soft shadow, so a point over art keeps its edge whichever tint it
   has; measured on dark cards the shadow alone left points at 2.3 to 2.9:1. */
html body.sq-shell .sqherocard[data-world][data-art] .sqhero-shape .sqfig .sqshape-dot{paint-order:stroke fill;stroke:var(--hero-bg);stroke-width:2px;filter:drop-shadow(0 0 2px var(--hero-bg)) drop-shadow(0 0 4px var(--hero-bg));opacity:1;}
/* On a LIGHT-TONE card (print in either mode, luminous in light mode) the
   points take the light semantic set as solid fills (first pole #8E3F6C,
   second #946124, no side = the ink) with the ground as their rim: the pale
   tints Plum's light mode uses read on cream, not on stone or paper art. */
html[data-theme="light"] body.sq-shell .sqherocard[data-world][data-art][data-finish="pulse"] .sqhero-shape .sqfig .sqshape-dot,html body.sq-shell .sqherocard[data-world][data-art][data-finish="paper"] .sqhero-shape .sqfig .sqshape-dot{fill:var(--hero-ink);stroke:var(--hero-bg);stroke-width:1.6;opacity:1;}
html[data-theme="light"] body.sq-shell .sqherocard[data-world][data-art][data-finish="pulse"] .sqhero-shape .sqfig-sided .sqshape-dot[data-side="a"],html body.sq-shell .sqherocard[data-world][data-art][data-finish="paper"] .sqhero-shape .sqfig-sided .sqshape-dot[data-side="a"]{fill:#8E3F6C;stroke:var(--hero-bg);}
html[data-theme="light"] body.sq-shell .sqherocard[data-world][data-art][data-finish="pulse"] .sqhero-shape .sqfig-sided .sqshape-dot[data-side="b"],html body.sq-shell .sqherocard[data-world][data-art][data-finish="paper"] .sqhero-shape .sqfig-sided .sqshape-dot[data-side="b"]{fill:#946124;stroke:var(--hero-bg);}
/* Customize card sits on the art's side; a pill of the ground under it is
   protection the size of the control. */
html body.sq-shell .sqherocard[data-world][data-art] .sqcust{background:rgba(var(--hero-bg-rgb),.72);padding:6px 10px;border-radius:var(--r);text-shadow:0 0 6px var(--hero-bg);}
/* Finish rules above paint `background:` shorthand per finish; under a world
   those grounds come from the world (build_themes.py), and the art sits on
   them with the same veil. The open hero (no finish frame) keeps its art. */
body.sq-shell .sqherocard[data-world][data-art]:not(.sqcarding){background-color:var(--hero-bg);}
.sqherocard[data-world] .archetype{color:var(--hero-ink);-webkit-text-fill-color:var(--hero-ink);background:none;}
html body.sq-shell .sqherocard[data-world] .sqlead,html body.sq-shell .sqherocard[data-world] .sqhero-kick span,html body.sq-shell .sqherocard[data-world] .codes span,html body.sq-shell .sqherocard[data-world] .sqshape-cap,html body.sq-shell .sqherocard[data-world] .kick{color:var(--hero-ink);}
/* The three code words carry no box under a world (Anthem, 2026-10-08: the
   boxes met in one hard-edged block). They sit in the quiet field; what
   protection they need is a soft halo of the ground that fades out, the
   same as the shape's words. */
html body.sq-shell .sqherocard[data-world] .codes span{border-color:transparent;background:none;text-shadow:0 0 6px var(--hero-bg),0 0 14px var(--hero-bg);}
html body.sq-shell .sqherocard[data-world] .sqshape-label:not(.lit):not([data-side]){fill:rgba(var(--hero-ink-rgb),.74);}
html body.sq-shell .sqherocard[data-world] .sqshape-rname{fill:rgba(var(--hero-ink-rgb),.4);}
.sqherocard[data-world] .sqcust{color:rgba(var(--hero-ink-rgb),.72);}
.sqherocard[data-world] .sqcust:hover{color:var(--hero-accent);}
/* On a phone the card is tall and the text sits at the top, so the veil runs
   top to bottom and the art is placed at its weight (the manifest's mobile
   x), showing a close crop under the figure. */
@media (max-width:560px){
  .sqherocard[data-world][data-art]{background-position:var(--hero-art-mx,80%) 50% !important;}
  .sqherocard[data-world][data-art]::before{background:linear-gradient(180deg,var(--hero-bg) 0%,var(--hero-bg) 34%,rgba(var(--hero-bg-rgb),.8) 50%,rgba(var(--hero-bg-rgb),.3) 70%,rgba(var(--hero-bg-rgb),.08) 100%);}
}
@media (prefers-reduced-motion:reduce){ .sqherocard[data-world] .sqshape-wrap::before{animation:none;} }
/* EVERY WORLD'S PHONE ART (2026-10-21, SuperQ-All-Mobile-Heroes-v1). The ten
   worlds and Plum night's four options now have portrait masters that are the
   whole card (worldart.js serves them on a phone and heroart.js marks the
   card data-phone-art). The art covers the card, anchored bottom-centre and
   never stretched; heroart.js sets the height (twice the width, or more so
   the words and Customize card use no more than the top 57 %). No veil, strip
   or fade: the art's own quiet upper field is the ground, in the finish's
   tone, so the hero's inks above still hold. The partner editions keep the
   rules in their own sheets. */
@media (max-width:560px){
  body.sq-shell .sqherocard[data-world][data-art][data-phone-art]:not([data-world^="liquid-death"]):not([data-world="zico"]):not(.sqcarding){
    align-content:start;background-size:cover !important;background-position:50% 100% !important;}
  .sqherocard[data-world][data-art][data-phone-art]:not([data-world^="liquid-death"]):not([data-world="zico"])::before{background:none;}
}

/* PLUM NIGHT'S OWN HEROES (handoff of 2026-10-08): the main theme's four
   backgrounds for the open hero, Essential the default. The card follows the
   mode (its ground and inks are the theme's own tokens, confirmed against
   :root and the light block above), so the semantic rules for the open
   finish apply unchanged. Only carries data-world when a background is on,
   which only happens with themes on; otherwise Plum night is as it was. */
.sqherocard[data-world="plum"]{--hero-bg:#06040B;--hero-bg-rgb:6,4,11;--hero-ink:#F6F1F9;--hero-ink-rgb:246,241,249;--hero-accent:#B86091;}
[data-theme="light"] .sqherocard[data-world="plum"]{--hero-bg:#F4F1EB;--hero-bg-rgb:244,241,235;--hero-ink:#241C29;--hero-ink-rgb:36,28,41;--hero-accent:#8E3F6C;}
/* Essential is a uniform plane: no veil needed, the art is the ground. */
.sqherocard[data-world="plum"][data-hero="essential"][data-art]::before{background:none;}
.sqherocard[data-world="plum"][data-hero="essential"][data-art] .sqshape-wrap::before{background:none;}
/* The archetype keeps Plum's gradient name on the open hero. */
.sqherocard[data-world="plum"] .archetype{color:var(--hi);-webkit-text-fill-color:initial;background:initial;}
/* The Background group in the tray. */
.sqheroopts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px;}
.sqheroopt .sqfin-sw{background-size:cover;background-position:72% 50%;border-radius:6px;width:34px;height:22px;}
/* The Whole You's small glyph when the hero has no figure to jump to (heroShape off, 2026-10-09). */
.sqthread-up.sqthread-still{cursor:default;pointer-events:none;}

/* ── THEA: ONE ACTION ON SCREEN (Marcus, 2026-10-10) ──────────────────────
      The message bar is the page's one action. History, New and More are
      icons at the header's right; Speak is a mic inside the bar; Tasks shows
      as a chip only when one is waiting. Reuses the coach room's own parts
      (.cps-subtabs, .cps-ico, .cps-menu, .cps-field, .cps-send). */
.thea-head .cps-subtabs{margin:0 0 var(--sp-4);}
.thea-tools{display:flex;align-items:center;gap:2px;margin-bottom:var(--sp-1);}
.thea-tools .cps-ico{width:40px;height:40px;}
.thea-menu{right:0;top:calc(100% + 6px);}
.thea-menu[hidden]{display:none;}
.thea-lede{margin:var(--sp-3) 0 0;max-width:560px;color:var(--ink-soft);font-size:15px;line-height:1.6;}
.thea-room{padding:0;overflow:hidden;}
.thea-room .cmp-msgs{min-height:280px;max-height:62vh;}
.thea-dock{padding:var(--sp-3) var(--sp-4) var(--sp-4);border-top:1px solid var(--line);}
.thea-dock .cps-field{align-items:center;}
.thea-dock .cps-field textarea{min-height:50px;}
.thea-mic{width:36px;height:36px;}
.thea-waiting{display:inline-flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-3);padding:var(--sp-2) var(--sp-3);border:1px solid rgba(162,78,129,.4);
  border-radius:999px;background:rgba(162,78,129,.12);color:var(--ink);font:500 13px/1.2 var(--sans);cursor:pointer;}
.thea-waiting:hover{background:rgba(162,78,129,.2);}
.thea-voicebar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:52px;}
.thea-voicebar p{margin:0;font-size:15px;}
.thea-room .cmp-msgs:empty{min-height:0;padding:0;}

/* ── PREPS: ONE SHORT FLOW (Marcus, 2026-10-10) ───────────────────────────
      Who, what kind of moment, what is happening, Prepare me; then saved
      preps as one-line rows that open in place. Small questions, not
      section headings, so the page reads as one sentence. */
.prep-flow .prepq,.prep-shelf .prepq{margin:var(--sp-5) 0 var(--sp-3);font:600 15px/1.3 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none;}
.prep-flow .prepq:first-child{margin-top:0;}
.prep-flow .cpick-note{margin:var(--sp-3) 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-soft);max-width:600px;}
.prep-mos{display:flex;flex-wrap:wrap;gap:var(--sp-2);}
.prep-mo{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);border:1px solid var(--line);border-radius:999px;background:none;
  color:var(--ink-soft);font:500 14px/1.2 var(--sans);cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);}
.prep-mo svg{width:17px;height:17px;flex:none;}
.prep-mo:hover{color:var(--ink);border-color:rgba(162,78,129,.5);}
.prep-mo.on{background:rgba(162,78,129,.22);border-color:rgba(162,78,129,.6);color:var(--ink);}
.prep-flow textarea.field{width:100%;}
.prep-go{margin-top:var(--sp-3);text-align:right;}
.prep-count{margin-left:var(--sp-2);font-weight:500;color:var(--ink-faint);}
.prep-row{border-top:1px solid var(--line);}
.prep-row:last-of-type{border-bottom:1px solid var(--line);}
.prep-row-main{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-3) 2px;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;}
.prep-row-main:hover .prep-row-t b{color:var(--plum-bright);}
.prep-row-ic{width:18px;height:18px;flex:none;color:var(--plum-bright);}
.prep-row-t{flex:1;min-width:0;}
.prep-row-t b{display:block;font:500 14.5px/1.4 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .16s var(--ease);}
.prep-row-t span{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:2px;}
.prep-row-d{flex:none;font-size:12.5px;color:var(--ink-faint);}
.prep-row.open .sqprep-body{margin:0 0 var(--sp-1) var(--sp-6);}
.prep-row-a{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-3) 0 var(--sp-4) var(--sp-6);}
.thea-head .archetype.prep-title{font-size:clamp(30px,4.2vw,46px);line-height:1.08;}
/* Thea's inner pages: the way back sits at the top (Marcus, 2026-10-10). */
.thea-topback{display:inline-flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-4);padding:var(--sp-2) 0;border:0;background:none;
  color:var(--ink-soft);font:500 14px/1.2 var(--sans);cursor:pointer;}
.thea-topback:hover{color:var(--ink);}
.thea-topback span{font-size:20px;line-height:1;}
/* Preps on a phone (2026-10-10): names and moments are one row each that
   scrolls sideways, not a wrapped wall of buttons. */
@media (max-width:760px){
  .prep-flow .cpick,.prep-flow .prep-mos{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 calc(var(--sp-4) * -1);padding:2px var(--sp-4) var(--sp-1);-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}
  .prep-flow .cpick::-webkit-scrollbar,.prep-flow .prep-mos::-webkit-scrollbar{display:none;}
  .prep-flow .cpill,.prep-flow .prep-mo{flex:none;scroll-snap-align:start;}
  .prep-flow .prep-mo{padding:var(--sp-2) var(--sp-3);font-size:13.5px;}
  .prep-flow .prepq{margin:var(--sp-4) 0 var(--sp-2);}
}
@media (max-width:760px){
  .prep-flow + .prep-shelf,.prep-shelf{margin-top:var(--sp-5);}
  .prep-row .sqprep-body{margin:0 0 var(--sp-1);padding:var(--sp-4) var(--sp-4);}
  .prep-row-a{margin:var(--sp-3) 0 var(--sp-4);}
}
@media (max-width:760px){
  .prep-row .coachout.sqprep-body{padding:var(--sp-4) var(--sp-4) var(--sp-4);}
  .prep-row .coachout.sqprep-body > :first-child{margin-top:0;padding-top:0;}
}
/* Preps, room to breathe (Marcus, 2026-10-10: "everything seems jammed
   together"). One left edge for the whole page, a small gap between a
   question and its choices, a clear gap between questions, and the widest gap
   between making a prep and the saved ones. The hero no longer carries extra
   space under its lede that the working part of the page then lacked. */
#sqPreps .hero{padding-bottom:0;}
#sqPreps .prep-flow{margin-top:var(--sp-7);}
.prep-flow .prepq,.prep-shelf .prepq{margin:var(--sp-6) 0 var(--sp-3);}
.prep-flow .prepq:first-child{margin-top:0;}
.prep-flow .prepq + .cpick-note{margin-top:0;}
.prep-go{margin-top:var(--sp-4);}
#sqPreps .prep-shelf{margin-top:var(--sp-8);}
.prep-shelf .prepq{margin:0 0 var(--sp-2);font-size:17px;}
.prep-row-main{padding:var(--sp-4) 2px;}
.prep-row-t span{margin-top:var(--sp-1);}
.prep-shelf-more{display:flex;gap:var(--sp-5);align-items:center;margin-top:var(--sp-4);}
@media (max-width:760px){
  #sqPreps .hero{padding-left:0;padding-right:0;}
  #sqPreps .prep-flow{margin-top:var(--sp-6);}
  .prep-flow .prepq{margin:var(--sp-6) 0 var(--sp-3);}
  .prep-flow .cpick,.prep-flow .prep-mos{scroll-padding-inline:var(--sp-4);}
  #sqPreps .prep-shelf{margin-top:var(--sp-7);}
}
/* Preps, quieter (Marcus, 2026-10-10, from the Empire Design and UX reviews
   in /opt/handoff/design-review-2026-10-10). Tight inside a group, generous
   between groups, and one loud thing per screen: Prepare me is the only solid
   fill; a chosen pill is a ring (and a check on names), not a second fill. */
#sqPreps .prep-flow .cpill,#sqPreps .prep-mo{background:var(--field);border:1px solid transparent;color:var(--ink-soft);
  opacity:1;box-shadow:none;transform:none;font:500 14px/1.2 var(--sans);padding:var(--sp-2) var(--sp-4);}
#sqPreps .prep-flow .cpill:hover,#sqPreps .prep-mo:hover{color:var(--ink);border-color:var(--line);box-shadow:none;transform:none;}
#sqPreps .prep-flow .cpill.on,#sqPreps .prep-mo.on{background:var(--field);border-color:var(--plum-bright);color:var(--ink);box-shadow:none;}
#sqPreps .prep-flow .cpill.on::before{content:"";display:inline-block;width:13px;height:13px;margin:0 var(--sp-2) 0 -2px;vertical-align:-2px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;}
#sqPreps .prep-mo svg{color:var(--ink-faint);}
#sqPreps .prep-mo.on svg{color:var(--plum-bright);}

/* Saved preps: neutral icons (the open one takes the accent), faint meta,
   dates that line up. */
#sqPreps .prep-row-ic{color:var(--ink-faint);}
#sqPreps .prep-row.open .prep-row-ic{color:var(--plum-bright);}
#sqPreps .prep-row-d{font-variant-numeric:tabular-nums;}
#sqPreps .prep-row-gone{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) 2px;color:var(--ink-soft);font-size:14px;}
#sqPreps .prep-undo{padding:var(--sp-2) 0;border:0;background:none;color:var(--plum-bright);font:600 14px/1.2 var(--sans);cursor:pointer;}

/* The open prep reads as a document: small labels, no bullets, the opening
   line as the one boxed thing, then one action row. */
#sqPreps .sqprep-body .co-lbl,#sqPreps .sqprep-body .co-lbl.plum,#sqPreps .sqprep-body .co-lbl.amber{
  font:600 11px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 var(--sp-2);}
#sqPreps .sqprep-body .co-sec{margin-top:var(--sp-5);}
#sqPreps .sqprep-body > .co-sec:first-child{margin-top:0;}
#sqPreps .sqprep-body .co-sec.read p{color:var(--ink);max-width:62ch;}
#sqPreps .sqprep-body .co-sec ul{gap:var(--sp-3);}
#sqPreps .sqprep-body .co-sec li{padding-left:0;max-width:62ch;}
#sqPreps .sqprep-body .co-sec li::before{display:none;}
#sqPreps .sqprep-body .co-script{margin-top:var(--sp-5);padding-top:0;border-top:0;}
#sqPreps .co-script-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin:0 0 var(--sp-2);}
#sqPreps .co-script-h .co-lbl{margin:0;}
#sqPreps .sqprep-body .co-q{margin:0;padding:var(--sp-4) var(--sp-4);border:0;border-radius:var(--r);background:var(--field);color:var(--ink);font-style:normal;font-size:16px;line-height:1.6;}
#sqPreps .prep-copy{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:36px;padding:0 2px;border:0;background:none;color:var(--ink-soft);
  font:500 13px/1 var(--sans);cursor:pointer;}
#sqPreps .prep-copy:hover{color:var(--ink);}
#sqPreps .prep-copy svg{width:15px;height:15px;}
#sqPreps .prep-acts{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-6);}
#sqPreps .prep-act-main{min-height:44px;padding:0 var(--sp-5);border:1px solid var(--plum-bright);border-radius:999px;background:none;color:var(--ink);
  font:600 14px/1 var(--sans);cursor:pointer;transition:background .16s var(--ease);}
#sqPreps .prep-act-main:hover{background:var(--glass-2);}
#sqPreps .prep-act-link{min-height:44px;padding:0;border:0;background:none;color:var(--ink-soft);font:500 14px/1 var(--sans);cursor:pointer;}
#sqPreps .prep-act-link:hover{color:var(--ink);}
#sqPreps .prep-more-wrap{position:relative;display:inline-flex;margin-left:auto;}
#sqPreps .prep-more{width:40px;height:40px;}
#sqPreps .prep-menu{right:0;top:calc(100% + 6px);}
#sqPreps .prep-menu[hidden]{display:none;}
#sqPreps .prep-menu .prep-menu-del{color:var(--plum-bright);}
#sqPreps :is(.prep-act-main,.prep-act-link,.prep-copy,.prep-undo):focus-visible{outline:2px solid var(--plum-bright);outline-offset:3px;}

@media (max-width:760px){
  /* The tab bar already says where you are. */
  #sqPreps .hero .kick{display:none;}
  /* Prepare me fills the width on a phone, where a right-aligned button floats. */
  #sqPreps .prep-go .primary{width:100%;min-height:48px;}
  #sqPreps .prep-acts{margin-top:var(--sp-5);}
}
/* Visually hidden, still read aloud (a real label for a field whose question
   is already on screen). */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Preps states (2026-10-10): one quiet note style for offline, hints and a
   list that did not load; long names truncate inside their pill. */
.prep-note{margin:var(--sp-3) 0 0;font-size:13px;line-height:1.5;color:var(--ink-faint);}
.prep-note:empty{display:none;}
#sqPreps .prep-flow .cpill{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#sqPreps .prep-go .primary:disabled{opacity:.45;cursor:not-allowed;}

/* THEA, A CONVERSATION RATHER THAN TWO STACKS OF BOXES (Marcus, 2026-10-10,
   from the Empire Design and UX reviews). Her words sit on the card as text;
   only yours are in a bubble. Messages from the same side sit close, and a
   change of speaker gets more room. */
.thea-room .cmp-msgs{gap:var(--sp-3);padding:var(--sp-5) var(--sp-5) var(--sp-4);}
.thea-room .cmp-m{font-size:15px;line-height:1.6;}
.thea-room .cmp-m.bot{max-width:62ch;padding:0;border:0;border-radius:0;background:none;}
.thea-room .cmp-m.user{max-width:80%;padding:var(--sp-3) var(--sp-4);border-radius:var(--r);}
.thea-room .cmp-m.user + .cmp-m.bot,.thea-room .cmp-m.bot + .cmp-m.user,
.thea-room .thea-failed + .cmp-m.bot{margin-top:var(--sp-3);}
.thea-room .cmp-m.user.failed{opacity:.7;}
.thea-failed{align-self:flex-end;margin:calc(var(--sp-2) * -1) 0 0;font-size:12.5px;color:var(--ink-faint);}
.thea-retry{margin-left:var(--sp-2);padding:var(--sp-1) 0;border:0;background:none;color:var(--plum-bright);font:600 12.5px/1.2 var(--sans);cursor:pointer;}
.thea-retry:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
.thea-room .cmp-typing{align-self:flex-start;}

/* On a phone the conversation is the page: no box scrolling inside a page
   scrolling inside a screen. The message bar stays at the bottom above the
   tab bar, and while you type the tab bar steps aside for the keyboard. */
@media (max-width:760px){
  .thea-room{overflow:visible;}
  .thea-room .cmp-msgs{max-height:none;min-height:0;overflow:visible;padding:var(--sp-4) var(--sp-4) var(--sp-3);}
  .thea-room .cmp-m.user{max-width:88%;}
  .thea-dock{position:sticky;bottom:calc(58px + env(safe-area-inset-bottom,0px));z-index:5;
    background:var(--elev);border-radius:0 0 var(--r) var(--r);}
  body.thea-typing .sqtabs{display:none;}
  body.thea-typing .thea-dock{bottom:env(safe-area-inset-bottom,0px);}
}
/* Super Coach keeps the bar up to 899px now (prod sweep #34), so it steps
   aside for the keyboard there too, landscape phones included. */
@media (min-width:761px) and (max-width:899px){ body.thea-typing .sqtabs{display:none;} }
/* Thea's header gives the conversation the room (2026-10-10). */
[data-view="thea"] .page > .thea-head{padding-bottom:0;}
[data-view="thea"] .page > .thea-head + .thea-room{margin-top:var(--sp-5);}
@media (max-width:760px){
  [data-view="thea"] .thea-head{padding-left:0;padding-right:0;}
  [data-view="thea"] .thea-head .kick{display:none;}
  /* Scrolling to the end stops above the tab bar, not under it. */
  .thea-room{scroll-margin-bottom:calc(58px + env(safe-area-inset-bottom,0px));}
}
/* Your preps, long (2026-10-10): month labels in the small-label style, and a
   search above the list once there are more than ten. */
#sqPreps .prep-month{margin:var(--sp-5) 0 var(--sp-2);font:600 11px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
#sqPreps .prep-search{width:100%;margin:var(--sp-2) 0 var(--sp-2);}
#sqPreps .prep-search + .prep-month,#sqPreps .prep-search + .prep-note + .prep-month{margin-top:var(--sp-4);}

/* Thea's ways to start (empty chat only): quiet pills that fill the bar. */
.thea-starters{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-3);}
.thea-starter{padding:var(--sp-2) var(--sp-4);border:1px solid transparent;border-radius:999px;background:var(--field);color:var(--ink-soft);
  font:500 14px/1.2 var(--sans);cursor:pointer;transition:color .16s var(--ease),border-color .16s var(--ease);}
.thea-starter:hover{color:var(--ink);border-color:var(--line);}
.thea-starter:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
.thea-inner-err{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);}
@media (max-width:760px){
  .thea-starters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--sp-4) * -1) var(--sp-3);
    padding:2px var(--sp-4) var(--sp-1);scroll-padding-inline:var(--sp-4);-webkit-overflow-scrolling:touch;}
  .thea-starters::-webkit-scrollbar{display:none;}
  .thea-starter{flex:none;}
}

/* ── THEA GETS THE APP'S OWN HERO (Anthem, 2026-10-10) ────────────────────
      Every other page opens on the lit card (2026-10-04); Thea, her inner
      pages and the Preps tab still opened on a bare heading, so Super Coach
      read as unfinished next to Pairs or Deep Read. Same card, same lede
      size, links in the app's colour, the conversation in a panel the hero
      lines up with, and one quiet Delete instead of a red pill per row. */
body.sq-shell:not([data-printing]) [data-view="thea"] .page > .hero:is(:first-child,.sqcoachtabs + *),
body.sq-shell:not([data-printing]) [data-view="coaching"] #sqPreps > .thea-head{position:relative;margin:0 0 32px;padding:26px 40px 32px;
  border:1px solid rgba(162,78,129,.45);border-radius:8px;background:var(--glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 28px 60px -34px rgba(0,0,0,.9),0 0 80px -40px rgba(162,78,129,.55);}
[data-theme="light"] body.sq-shell:not([data-printing]) [data-view="thea"] .page > .hero:is(:first-child,.sqcoachtabs + *),
[data-theme="light"] body.sq-shell:not([data-printing]) [data-view="coaching"] #sqPreps > .thea-head{background:var(--elev);box-shadow:0 22px 50px -32px rgba(36,28,41,.45);}
body.sq-shell:not([data-printing]) :is([data-view="thea"],[data-view="coaching"]) .thea-head .cps-subtabs{margin:0 0 22px;}
body.sq-shell:not([data-printing]) [data-view="thea"] .page > .thea-head + .thea-room{margin-top:0;}
/* The lede is the hero's essence, at the size every hero uses. */
.thea-head .thea-lede,
[data-view="thea"] .page > .hero > .hint:not(.thea-memnote){margin:20px 0 0;max-width:38em;font-size:17px;line-height:1.6;color:var(--ink-soft);}
.thea-head .thea-memnote{margin:14px 0 0;max-width:46em;font-size:13.5px;line-height:1.55;color:var(--ink-faint);}
.thea-memnote a{color:var(--plum-bright);text-decoration:underline;text-decoration-color:rgba(184,96,145,.45);text-underline-offset:3px;}
.thea-memnote a:hover{text-decoration-color:currentColor;}
.thea-head .thea-topback{margin-bottom:var(--sp-3);}
/* The conversation sits in a panel, edge to edge with the hero above it. */
body.sq-shell:not([data-printing]) .thea-room{margin-top:0;border:1px solid var(--line);border-radius:var(--r,14px);background:var(--field);}
.thea-room .thea-dock{border-top:0;padding:var(--sp-4);}
.thea-room .cmp-msgs:not(:empty) + .thea-dock,.thea-room .cmp-msgs:not(:empty) ~ .thea-dock{border-top:1px solid var(--line);}
/* First visit. */
.thea-ob .sqh2{margin-top:0;}
.thea-ob-p{margin:0 0 var(--sp-3);max-width:38em;font-size:15.5px;line-height:1.6;color:var(--ink-soft);}
/* Inner pages: rows, section labels, one quiet Delete. */
.thea-sec{margin:var(--sp-6) 0 var(--sp-2);font:600 11px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.thea-sec:first-child{margin-top:0;}
.thea-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-3) 0;border-bottom:1px solid var(--line);}
.thea-row-t,.thea-row-text{font-size:15px;line-height:1.55;color:var(--ink);}
.thea-row-open{flex:1;min-width:0;padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;}
.thea-row-open b{display:block;font:500 15px/1.45 var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .16s var(--ease);}
.thea-row-open span{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-faint);}
.thea-row-open:hover b{color:var(--plum-bright);}
.thea-row-open:focus-visible{outline:2px solid var(--plum-bright);outline-offset:4px;border-radius:4px;}
.thea-del{flex:none;padding:var(--sp-1) 0;border:0;background:none;color:var(--ink-faint);font:500 13px/1.4 var(--sans);cursor:pointer;transition:color .16s var(--ease);}
.thea-rename{width:100%;font:500 15px/1.45 var(--sans);padding:6px 10px;}
.thea-del:hover{color:#E0705F;}
[data-theme="light"] .thea-del:hover{color:#B23A27;}
.thea-del:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;border-radius:4px;}
@media screen and (max-width:899px){
  body.sq-shell:not([data-printing]) [data-view="thea"] .page > .hero:is(:first-child,.sqcoachtabs + *),
  body.sq-shell:not([data-printing]) [data-view="coaching"] #sqPreps > .thea-head{padding:20px 20px 24px;margin-bottom:24px;}
  [data-view="thea"] .thea-head .kick{display:block;}
  .thea-head .thea-lede,[data-view="thea"] .page > .hero > .hint:not(.thea-memnote){font-size:16px;}
}
@media (max-width:760px){
  .thea-room .thea-dock{border-radius:0 0 var(--r,14px) var(--r,14px);}
}

/* Thea's top row: the label at the left, Preps, History and the icons at
   the right (2026-10-10). */
.thea-toprow{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin:0 0 4px;}
.thea-toprow .thea-tools{margin:0;}
.thea-toprow .kick{margin:0;}
/* Preps, labelled, beside Thea's icons (2026-10-10). */
.thea-toprow .thea-pill{display:inline-flex;align-items:center;gap:6px;margin-right:var(--sp-2);padding:7px 14px 7px 11px;}
.thea-pill .cps-i{width:16px;height:16px;}
#sqPreps > .thea-head .thea-topback{margin:0 0 var(--sp-3);}
/* Recent conversations under Thea's hero, in Your preps' rows (2026-10-10). */
.thea-recent{margin-top:var(--sp-7);}
.thea-recent .prepq{margin:0 0 var(--sp-2);font-size:17px;}
.thea-recent .prep-row-main{padding:var(--sp-4) 2px;}
.thea-recent .prep-row:last-of-type{border-bottom:1px solid var(--line);}
.thea-recent .prep-row-ic .cps-i{width:18px;height:18px;}
.thea-recent .prep-shelf-more{margin-top:var(--sp-3);}
@media (max-width:760px){
  [data-view="thea"] .thea-head .thea-toprow .kick{display:none;}
  .thea-toprow{justify-content:flex-end;}
  .thea-recent{margin-top:var(--sp-6);}
}
/* The name keeps its own width, so the gradient runs across "Thea", not the card. */
.thea-head > .archetype{display:inline-block;}
.thea-head > .archetype + .thea-lede{display:block;}
@media (max-width:760px){ .thea-toprow{margin-bottom:var(--sp-3);} }
/* Preps' flow in a panel under the hero, like Thea's conversation (2026-10-10). */
body.sq-shell:not([data-printing]) #sqPreps > .prep-flow{margin-top:0;padding:var(--sp-5) var(--sp-6) var(--sp-6);border:1px solid var(--line);border-radius:var(--r,14px);background:var(--field);scroll-margin-top:var(--sp-5);}
#sqPreps > .prep-flow > .prepq:first-child{margin-top:0;}
#sqPreps .prep-flow .cpill,#sqPreps .prep-mo{background:var(--glass-2);}
@media screen and (max-width:899px){
  body.sq-shell:not([data-printing]) #sqPreps > .prep-flow{padding:var(--sp-4) var(--sp-4) var(--sp-5);}
}
.thea-head > .thea-topback{display:flex;width:max-content;}
/* ── SUPER COACH TAP TARGETS (WP1, 2026-10-10) ────────────────────────────
      The walk measured chips and pills at 35px, Delete at 26px and See all at
      16px on a phone. On touch screens every Super Coach control is 44px;
      desktop density is unchanged. */
@media (pointer:coarse),(max-width:760px){
  .thea-starter,
  #sqPreps .prep-flow .cpill,#sqPreps .prep-mo{min-height:44px;}
  .thea-del{min-height:44px;min-width:44px;padding:0 var(--sp-1);}
  .thea-recent .prep-shelf-more .link,#sqPreps .prep-shelf-more .link{display:inline-flex;align-items:center;min-height:44px;}
  .thea-topback{min-height:44px;}
  .thea-toprow .thea-pill{min-height:44px;}
  .thea-tools .cps-ico,.thea-dock .thea-mic,.thea-dock .cps-send,.prep-more{width:44px;height:44px;}
  .prep-acts .prep-act-link,#sqPreps .prep-copy{min-height:44px;}
  #sqPreps .prep-more{width:44px;height:44px;}
  .thea-menu button,.prep-menu button{min-height:44px;}
  /* What Thea may remember: the whole row is the target, not the 13px box. */
  [data-view="thea"] label:has(> input[type="checkbox"]){min-height:44px;}
}
/* ── FACES IN PREPS (WP2, 2026-10-10) ─────────────────────────────────────
      A person is a face, as on Pairs: a round photo, initials until it lands. */
.sqface{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,rgba(162,78,129,.55),rgba(162,78,129,.25)) center/cover no-repeat;
  box-shadow:0 0 0 1.5px var(--elev);color:#fff;font:600 11px/1 var(--sans);letter-spacing:.02em;}
.sqface[style*="background-image"]{background-size:cover;background-position:center;}
.sqface i{font-style:normal;}
#sqPreps .prep-flow .cpill:has(.sqface-pill){display:inline-flex;align-items:center;gap:var(--sp-2);padding:5px 16px 5px 5px;min-height:40px;}
#sqPreps .prep-flow .cpill.on .sqface-pill{box-shadow:0 0 0 2px var(--plum-bright);}
.prep-whose{color:var(--ink-soft);}
#sqPreps .prep-flow .cpill.on:has(.sqface-pill)::before{display:none;}
/* ── A PREP IS ITS OWN PAGE (WP3, 2026-10-10) ─────────────────────────────
      The hero names the moment, shows both faces and the person's own words;
      Open with leads the body as the line people use. */
.prep-pair{display:flex;margin:var(--sp-3) 0 0;}
.sqface-lg{width:52px;height:52px;font-size:17px;box-shadow:0 0 0 3px var(--elev);}
.prep-pair .sqface + .sqface{margin-left:-12px;}
.prep-hero .archetype{margin-top:var(--sp-3);}
.prep-hero .prep-sit{font-style:italic;}
.prep-hero .hint{margin:var(--sp-3) 0 0 !important;}
body.sq-shell:not([data-printing]) #sqPreps > .prep-page{margin-top:0;padding:var(--sp-6) var(--sp-7) var(--sp-6);border-radius:var(--r,14px);background:var(--field);animation:none;}
#sqPreps .prep-page .co-script{margin:0 0 var(--sp-6);}
#sqPreps .prep-page .co-q{padding:var(--sp-5) var(--sp-5);font-size:20px;line-height:1.55;border-left:3px solid var(--plum-bright);border-radius:0 var(--r) var(--r) 0;background:var(--glass-2);}
#sqPreps .prep-page .co-sec{margin-top:var(--sp-6);}
#sqPreps .prep-page .co-sec p,#sqPreps .prep-page .co-sec li{font-size:16px;line-height:1.65;max-width:68ch;}
#sqPreps .prep-page .prep-acts{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line);}
@media screen and (max-width:899px){
  body.sq-shell:not([data-printing]) #sqPreps > .prep-page{padding:var(--sp-5) var(--sp-4);}
  #sqPreps .prep-page .co-q{font-size:18px;padding:var(--sp-4);}
  .sqface-lg{width:44px;height:44px;font-size:15px;}
}
#sqPreps .prep-hero .kick{display:block;}  /* on the prep page the label names the moment, so it stays on phone */
/* Saved preps show both people (WP4, 2026-10-10). */
.prep-row-pair{display:inline-flex;flex:none;width:46px;}
.sqface-sm{width:28px;height:28px;font-size:10px;box-shadow:0 0 0 2px var(--bg);}
.prep-row-pair .sqface + .sqface{margin-left:-10px;}
#sqPreps .prep-row-main > .prep-row-ic{margin:0 14px;}  /* the icon sits in the same 46px slot as two faces, so every title starts on one line */
/* WP7: on a phone Thea's description is two lines and More, so the message
   bar is on the first screen; desktop shows it all and no More. */
.thea-lede-more{display:none;}
@media (max-width:760px){
  [data-view="thea"] .thea-head .thea-lede:not(.open){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .thea-head .thea-lede-more{display:inline-flex;align-items:center;min-height:44px;padding:0;color:var(--plum-bright);font-size:14px;}
  .thea-head .thea-lede + .thea-lede-more + .thea-memnote{margin-top:var(--sp-1);}
}
/* ── WHAT THEA REMEMBERS, IN PLAIN LANGUAGE (WP5, 2026-10-10) ─────────────
      Sections fold with a count; an item is a line, a quieter second line,
      and Details with every other stored field. */
.thea-memsec{border-bottom:1px solid var(--line);}
.thea-memsec:first-of-type{border-top:1px solid var(--line);}
.thea-memsec > summary{display:flex;align-items:center;gap:var(--sp-3);min-height:52px;padding:var(--sp-2) 2px;cursor:pointer;list-style:none;
  font:600 15.5px/1.35 var(--sans);color:var(--ink);}
.thea-memsec > summary::-webkit-details-marker{display:none;}
.thea-memsec > summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:1.6px solid var(--ink-faint);border-bottom:1.6px solid var(--ink-faint);transform:rotate(45deg) translateY(-3px);transition:transform .16s var(--ease);}
.thea-memsec[open] > summary::after{transform:rotate(-135deg) translateY(-1px);}
.thea-memsec > summary:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;border-radius:4px;}
.thea-memsec-n{font-weight:500;color:var(--ink-faint);}
.thea-memsec-b{padding:0 0 var(--sp-3);}
.thea-memsec-b .thea-row:last-child{border-bottom:0;}
.thea-row-t{flex:1;min-width:0;}
.thea-mem-t{display:block;font-size:15px;line-height:1.55;color:var(--ink);}
.thea-mem-sub{display:block;margin-top:3px;font-size:13px;color:var(--ink-faint);}
.thea-more{margin-top:var(--sp-1);}
.thea-more > summary{display:inline-flex;align-items:center;min-height:32px;cursor:pointer;font-size:13px;color:var(--ink-faint);list-style:none;}
.thea-more > summary::-webkit-details-marker{display:none;}
.thea-more > summary:hover{color:var(--ink);}
.thea-more dl{display:grid;grid-template-columns:max-content 1fr;gap:4px var(--sp-3);margin:var(--sp-1) 0 var(--sp-2);font-size:13px;line-height:1.5;}
.thea-more dt{color:var(--ink-faint);}
.thea-more dd{margin:0;color:var(--ink-soft);overflow-wrap:anywhere;}
.thea-more-pre{white-space:pre-wrap;font-size:13px;line-height:1.55;color:var(--ink-soft);margin:var(--sp-1) 0 var(--sp-2);}
@media (pointer:coarse),(max-width:760px){ .thea-more > summary{min-height:44px;} }
@media (max-width:520px){ .thea-more dl{grid-template-columns:1fr;} .thea-more dd{margin-bottom:6px;} }
.thea-mem-body{display:block;margin-top:2px;font-weight:400;}
.thea-mem-long{font-size:14px;max-width:72ch;}
/* CHIPS WRAP ON A PHONE (Anthem, 2026-10-10, WP8). Thea's ways to start and
   Preps' people and moments were one sideways-scrolling row each; Anthem
   ruled out sideways-scrolling menus on 2026-10-04, so every option shows
   without a swipe. Overrides the 2026-10-10 one-row rules above. */
@media (max-width:760px){
  .prep-flow .cpick,.prep-flow .prep-mos,.thea-starters,
  .thea-fresh .thea-dock .thea-starters{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding:0;gap:var(--sp-2);scroll-snap-type:none;}
  .prep-flow .cpill,.prep-flow .prep-mo,.thea-starter{flex:0 1 auto;max-width:100%;}
}
/* With the chips wrapped, a phone shows the message bar first and the ways
   to start under it, so the bar stays on the first screen (WP7). */
@media (max-width:760px){
  .thea-room .thea-dock{display:flex;flex-direction:column;}
  .thea-room .thea-dock > .cps-field,.thea-room .thea-dock > .thea-voicebar{order:1;}
  .thea-room .thea-dock > .thea-starters{order:2;margin:var(--sp-3) 0 0;}
  .thea-room .thea-dock > .thea-waiting{order:3;margin:var(--sp-3) 0 0;align-self:flex-start;}
  .thea-room .thea-dock > #theaNote{order:4;}
}
/* Super Coach's Chat · Preps · History bar (2026-10-10) was retired on
   2026-10-11: the coach side's list (below) is the way around Super Coach. */
/* ── SUPER COACH AS ITS OWN SIDE (Anthem, 2026-10-11; js/coachside.js) ────
      On the coach side the rail's places give way to Super Coach's own list;
      the logo row (Activity, light/dark) and the account stay. Same items,
      sizes and lit state as the rail's own, so it is the same product in a
      different room. Behind SQFlags.coachSide. */
#sqCoachNav[hidden]{display:none !important;}
/* THE MAIN MENU STAYS (prod sweep #34, Mira M-15; Anthem 2026-10-19: "keep
   the main menu"). Crossing to Super Coach used to swap SuperQ's places out
   of the rail, so it read as a different app. The places stay, Super Coach
   stays lit among them, and its own list sits under them (coachside.js
   moves it there); its "‹ SuperQ" row has nothing left to do on a desktop. */
/* "‹ SuperQ" said you had left SuperQ, the split this removes (Mira): gone
   on both sides, the menu is the way back. On a desktop the lit Super Coach
   row above names the list, so its kicker goes too, and the rail's privacy
   line (true of the profile, not of Thea) steps aside as it did before. */
body.sq-shell .sqcoachnav .sqcn-back{display:none;}
@media screen and (min-width:900px){
  body.sq-shell .sqcoachnav{display:flex;flex-direction:column;gap:4px;margin:20px 0 16px;padding-top:12px;border-top:1px solid var(--line);}
  body.sq-shell .sqcoachnav .sqcn-kick{display:none;}
  body.sq-shell.sq-coachside #chrome .sqrail-note{display:none !important;}
}
.sqcoachnav .navi{width:20px;height:20px;flex:none;}
.sqcn-back{display:flex;align-items:center;gap:8px;min-height:40px;margin:0 0 8px;padding:0 12px 0 8px;border:0;border-radius:var(--r);background:none;
  color:var(--ink-faint);font:600 13px/1 var(--disp);cursor:pointer;width:max-content;transition:color .16s var(--ease),background .16s var(--ease);}
.sqcn-back .navi{width:18px;height:18px;}
.sqcn-back:hover{color:var(--ink);background:var(--glass);}
.sqcn-kick{margin:16px 12px 10px;font:600 10.5px/1 var(--disp);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-faint);}
.sqcn-item{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:0 12px;border:1px solid transparent;border-radius:var(--r);
  background:none;font:600 14px/1.2 var(--disp);color:var(--ink-soft);text-align:left;cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);}
.sqcn-item:hover{color:var(--ink);background:var(--glass);}
.sqcn-item.on{color:var(--hi);background:rgba(162,78,129,.15);border-color:rgba(162,78,129,.42);}
.sqcn-item.on .navi{color:var(--plum-bright);}
#sqCnNew .navi{color:var(--plum-bright);}
.sqcn-head{display:flex;align-items:center;gap:6px;margin:20px 12px 6px;font:600 10.5px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.sqcn-head .navi{width:13px;height:13px;}
.sqcn-list{display:flex;flex-direction:column;gap:2px;}
.sqcn-conv{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 12px;border:1px solid transparent;border-radius:var(--r);
  background:none;color:var(--ink-soft);text-align:left;cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease);}
.sqcn-conv:hover{color:var(--ink);background:var(--glass);}
.sqcn-conv.on{color:var(--hi);background:rgba(162,78,129,.15);border-color:rgba(162,78,129,.42);}
.sqcn-t{flex:1;min-width:0;font:500 13.5px/1.35 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sqcn-d{flex:none;font:500 11.5px/1 var(--sans);color:var(--ink-faint);}
.sqcn-all{margin-top:12px;}
.sqcn-empty{margin:8px 12px 0;font-size:13px;line-height:1.5;color:var(--ink-faint);}
:is(.sqcn-back,.sqcn-item,.sqcn-conv):focus-visible{outline:2px solid var(--plum-bright);outline-offset:-2px;}
/* Crossing sides is seen: the rail's list arrives with a short fade. */
@keyframes sqcross{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
#chrome nav.sq-crossing :is(.sqcoachnav,.sqtabs,.sqrail-kick){animation:sqcross .28s var(--ease) both;}
@media (prefers-reduced-motion:reduce){ #chrome nav.sq-crossing :is(.sqcoachnav,.sqtabs,.sqrail-kick){animation:none;} }
/* The floating Q (help) never sits over the message bar on this side (D4). */
body.sq-coachside #cmpFab{display:none !important;}
/* Your reads is SuperQ's: it steps aside on the coach side. */
@media screen and (min-width:900px){ body.sq-shell.sq-coachside #chrome :is(#sqReads,#sqReadsPanel){display:none !important;} }
/* ── THE COACH SIDE ON A PHONE (D3): full screen, the list is a drawer ──── */
.sqcn-topback,.sqcn-menu,.sqcn-scrim{display:none;}
@media screen and (max-width:899px){
  /* The bottom bar stays on this side too (prod sweep #34), and the logo
     stays as on every page; the list's menu button sits beside it. */
  body.sq-shell.sq-coachside .sqcn-menu{display:inline-grid;place-items:center;width:44px;height:44px;margin:0 2px 0 -6px;padding:0;border:0;border-radius:var(--r);
    background:none;color:var(--ink);cursor:pointer;}
  body.sq-shell.sq-coachside .sqcn-topback{display:none !important;align-items:center;gap:4px;min-height:44px;padding:0 8px 0 2px;border:0;background:none;
    color:var(--ink);font:700 17px/1 var(--disp);letter-spacing:-.01em;cursor:pointer;}
  body.sq-shell.sq-coachside .sqcn-topback .navi{width:18px;height:18px;color:var(--ink-faint);}
  :is(.sqcn-menu,.sqcn-topback):focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
  /* The drawer. */
  body.sq-shell .sqcoachnav{position:fixed;top:0;left:0;bottom:0;z-index:72;display:flex;flex-direction:column;gap:4px;
    width:min(320px,86vw);padding:calc(env(safe-area-inset-top,0px) + 16px) 12px calc(env(safe-area-inset-bottom,0px) + 16px);overflow-y:auto;
    background:var(--elev);border-right:1px solid var(--line);box-shadow:24px 0 60px -30px rgba(0,0,0,.6);
    transform:translateX(-102%);transition:transform .26s var(--ease);visibility:hidden;}
  body.sq-shell.sq-coachdrawer .sqcoachnav{transform:none;visibility:visible;}
  body.sq-coachside .sqcn-scrim{display:block;position:fixed;inset:0;z-index:71;background:rgba(6,4,11,.5);opacity:0;pointer-events:none;transition:opacity .26s var(--ease);}
  body.sq-coachdrawer .sqcn-scrim{opacity:1;pointer-events:auto;}
  body.sq-coachdrawer{overflow:hidden;}
  .sqcoachnav .sqcn-item,.sqcoachnav .sqcn-conv,.sqcoachnav .sqcn-back{min-height:44px;}
}
@media (prefers-reduced-motion:reduce){ .sqcoachnav,.sqcn-scrim{transition:none !important;} }
/* ── PINNED CONVERSATIONS (API 0128, 2026-10-11) ──────────────────────────
      In the coach list a pin sits at each row's end: shown on hover or focus
      on a desktop, always on a touch screen, and lit on a pinned row. */
.sqcn-row{position:relative;display:flex;align-items:center;}
.sqcn-row .sqcn-conv{flex:1;min-width:0;}
/* The pin takes the date's place when it shows, so titles keep their width. */
.sqcn-pin{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;
  background:none;color:var(--ink-faint);cursor:pointer;opacity:0;transition:opacity .14s var(--ease),color .14s var(--ease),background .14s var(--ease);}
.sqcn-pin .navi{width:15px;height:15px;}
.sqcn-row:hover .sqcn-pin,.sqcn-row:focus-within .sqcn-pin,.sqcn-row.pinned .sqcn-pin{opacity:1;}
.sqcn-row:hover .sqcn-d,.sqcn-row:focus-within .sqcn-d{visibility:hidden;}
.sqcn-row.pinned .sqcn-d{visibility:hidden;}
.sqcn-pin:hover{color:var(--ink);background:var(--glass-2);}
.sqcn-pin[aria-pressed="true"]{color:var(--plum-bright);}
.sqcn-pin[aria-pressed="true"] .navi{fill:currentColor;fill-opacity:.25;}
.sqcn-pin:focus-visible{outline:2px solid var(--plum-bright);outline-offset:-2px;opacity:1;}
.sqcn-note{margin:8px 12px 0;font-size:12.5px;line-height:1.45;color:var(--ink-faint);}
.sqcn-note:empty{display:none;}
@media (pointer:coarse){
  .sqcn-pin{opacity:.7;width:44px;height:44px;right:0;}
  .sqcn-row .sqcn-conv{padding-right:48px;}
  .sqcn-row .sqcn-d{display:none;}  /* on touch the pin is always there, so the date gives way */
}
/* All conversations: a small pin before a pinned title; Pin/Unpin beside Delete. */
.thea-pinmark{display:inline-flex;vertical-align:-2px;margin-right:6px;color:var(--plum-bright);}
.thea-pinmark .cps-i{width:14px;height:14px;fill:currentColor;fill-opacity:.25;}
.thea-row .thea-pinbtn{margin-right:var(--sp-3);}
.thea-row .thea-pinbtn:hover{color:var(--ink);}
/* ── THE COACH SIDE'S LANDING (2026-10-11) ────────────────────────────────
      An empty chat in Super Coach's room: the greeting and the bar, centered
      in the window, the ways to start under the bar. Nothing framed. */
.thea-landing{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 140px);min-height:calc(100svh - 140px);
  padding:var(--sp-6) 0 var(--sp-8);text-align:center;}
.thea-greet{margin:0;font:700 clamp(34px,4.2vw,54px)/1.08 var(--disp-theme);font-style:var(--disp-style);letter-spacing:-.03em;color:var(--hi);}
.thea-greet-sub{margin:var(--sp-3) 0 0;font-size:17px;line-height:1.5;color:var(--ink-soft);}
body.sq-shell:not([data-printing]) .thea-landing .thea-room{width:100%;max-width:760px;margin:var(--sp-6) 0 0;border:0;border-radius:0;background:none;overflow:visible;text-align:left;}
.thea-landing .thea-room .cmp-msgs:empty{display:none;}
.thea-landing .thea-room .thea-dock{display:flex;flex-direction:column;padding:0;border:0;}
.thea-landing .thea-dock > .cps-field,.thea-landing .thea-dock > .thea-voicebar{order:1;}
.thea-landing .thea-dock > .thea-starters{order:2;justify-content:center;margin:var(--sp-4) 0 0;}
.thea-landing .thea-dock > .thea-waiting{order:3;align-self:center;margin:var(--sp-4) 0 0;}
.thea-landing .thea-dock > #theaNote{order:4;text-align:center;}
.thea-landing .cps-field{align-items:flex-end;min-height:104px;padding:6px 6px 6px 4px;border-radius:20px;background:var(--elev);border-color:var(--line);
  box-shadow:0 18px 50px -28px rgba(0,0,0,.6);}
[data-theme="light"] .thea-landing .cps-field{box-shadow:0 18px 44px -26px rgba(36,28,41,.35);}
.thea-landing .cps-field textarea{min-height:90px;padding:16px 4px 16px 18px;font-size:16.5px;}
body.sq-shell .thea-landing .cps-send{width:40px;height:40px;margin:4px;border-radius:12px;}
@media (max-width:760px){
  .thea-landing{justify-content:flex-start;min-height:0;padding:var(--sp-7) 0 var(--sp-5);}
  .thea-landing .thea-dock{position:static !important;background:none;}
  .thea-landing .thea-dock > .thea-starters{justify-content:flex-start;}
}
/* Thea, named in the coach side's top right on a desktop (2026-10-11). */
.sqcn-who{display:none;}
@media screen and (min-width:900px){
  body.sq-coachside .sqcn-who{position:fixed;top:24px;right:32px;z-index:15;display:inline-flex;align-items:center;gap:8px;
    padding:7px 14px 7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--glass);
    font:600 14px/1 var(--disp);color:var(--ink);letter-spacing:-.005em;pointer-events:none;}
  @supports (backdrop-filter:blur(8px)){ body.sq-coachside .sqcn-who{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);} }
  .sqcn-who-dot{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--plum-bright),var(--plum));
    box-shadow:0 0 0 3px rgba(162,78,129,.18),0 0 14px rgba(184,96,145,.55);}
}
/* The Privacy Policy sits last in the coach list, a little quieter than the places. */
.sqcn-policy{margin-top:4px;color:var(--ink-faint);text-decoration:none;font-weight:500;}
.sqcn-policy:hover{color:var(--ink);}
.sqcn-policy:focus-visible{outline:2px solid var(--plum-bright);outline-offset:-2px;}
/* ── TALK TO THEA, OUTSIDE THE BAR (2026-10-11) ───────────────────────────
      Anthem: the in-bar Talk was "too discreet"; dictation is off. The bar
      (message + Send) and a named Talk to Thea button sit side by side; the
      button opens the voice window. */
.thea-barrow{display:flex;align-items:stretch;gap:10px;}
.thea-barrow > .cps-field{flex:1;min-width:0;}
.thea-talk-out{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;align-self:flex-end;height:52px;padding:0 20px 0 16px;
  border:1px solid color-mix(in oklab,var(--plum) 60%,transparent);border-radius:16px;
  background:linear-gradient(160deg,color-mix(in oklab,var(--plum) 34%,var(--elev)),color-mix(in oklab,var(--plum) 14%,var(--elev)));
  color:var(--ink);font:600 15px/1 var(--disp);letter-spacing:-.005em;cursor:pointer;white-space:nowrap;
  box-shadow:0 10px 28px -16px color-mix(in oklab,var(--plum) 80%,transparent);
  transition:border-color .16s var(--ease),transform .12s var(--ease),box-shadow .16s var(--ease);}
.thea-talk-out .cps-i{width:20px;height:20px;color:var(--plum-bright);}
.thea-talk-out:hover{border-color:var(--plum-bright);box-shadow:0 12px 32px -14px color-mix(in oklab,var(--plum) 90%,transparent);}
.thea-talk-out:active{transform:scale(.98);}
.thea-talk-out:focus-visible{outline:2px solid var(--plum-bright);outline-offset:2px;}
.thea-landing .thea-talk-out{height:58px;padding:0 24px 0 19px;border-radius:20px;font-size:16px;}
@media (max-width:560px){
  .thea-talk-out{height:48px;padding:0 14px;gap:7px;}
  .thea-talk-out span{font-size:14px;}
  .thea-landing .thea-barrow{flex-direction:column;}
  .thea-landing .thea-talk-out{align-self:stretch;height:52px;}
}

/* Thea's settings page (D2): the same controls, given room. */
.thea-settings .thea-sec:first-child{margin-top:0;}
.thea-settings .thea-sec{margin-top:var(--sp-7);}
.thea-settings label{font-size:15px !important;}
[data-view="thea"] input[type="checkbox"],[data-view="thea"] input[type="radio"]{accent-color:var(--plum-bright);width:18px;height:18px;}
/* ── A CONVERSATION'S HEADER ON THE COACH SIDE (D3, 2026-10-11) ────────────
      Its title and a ⋯ (Pin / Unpin, Delete), slim, in place of the hero. */
.thea-convhead{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-4);padding:0 0 var(--sp-3);border-bottom:1px solid var(--line);}
.thea-convtitle{flex:1;min-width:0;margin:0;font:600 17px/1.35 var(--disp);letter-spacing:-.01em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.thea-convmenu-wrap{position:relative;display:inline-flex;flex:none;}
.thea-convmenu{right:0;top:calc(100% + 6px);min-width:180px;}
.thea-convmenu[hidden]{display:none;}
.thea-convmenu button.armed{color:#E0705F;}
@media (pointer:coarse),(max-width:760px){ .thea-convhead .cps-ico{width:44px;height:44px;} }
@media screen and (min-width:900px){ body.sq-coachside [data-view="thea"] .thea-convhead{margin-right:110px;} }  /* clear of the Thea label in the window corner */
/* ── TASKS AND CONNECTIONS ON THE COACH SIDE (2026-10-11) ─────────────────
      Built in, shown when the launch switches allow (?coach_preview=on in
      the sandbox). */
.sqcn-count{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--plum);color:#fff;
  font:700 12px/22px var(--sans);text-align:center;}
.thea-tasks .thea-sec:first-child{margin-top:0;}
.thea-tasks .thea-sec{margin-top:var(--sp-6);}
/* Connections: connections.js's own list, laid out as the coach side's rows. */
.thea-connections #connBox > .eyebrow,.thea-connections #connBox > .dtitle{display:none;}
.thea-connections #connBox > .hint:first-of-type{max-width:62ch;font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0 0 var(--sp-5) !important;}
.thea-connections #connBox .prow{display:flex !important;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) 0 !important;border-bottom:1px solid var(--line);}
.thea-connections #connBox .prow > div:first-child{flex:1;min-width:0;}
.thea-connections #connBox .prow > div[style*="margin-top"]{margin:0 !important;}
.thea-connections #connBox [data-connect]{display:inline-flex;margin:var(--sp-3) var(--sp-3) 0 0 !important;}


/* IN MY OWN WORDS, AT ANY LENGTH (Marcus, 2026-10-11). A line can be up to
   3,000 characters, so its paragraph breaks are kept wherever it is shown,
   and a long one (guideview ownClass) is set at reading size instead of the
   24px display face a one-line catchphrase gets. */
.gmiss.gown p,.sqhole-print .grule p{white-space:pre-line;}
body.sq-shell:not([data-printing]) :is([data-view="guide"],[data-view="publicguide"],#drawer:has(.lens)) .gmiss.gown.gown-long p{font:400 17px/1.6 var(--sans);letter-spacing:0;max-width:40em;}
body.sq-shell:not([data-printing]) #drawer:not(.wide):has(.lens) .gmiss.gown.gown-long p{font-size:16px;}


/* PAIRS: YOUR NEXT STEPS (Marcus, 2026-10-11; dyad.js stepsBlock). */
.dy-steplist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.dy-step{display:flex;gap:12px;align-items:flex-start;}
.dy-stepn{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--plum-bright);color:var(--plum-bright);font:600 12px/1 var(--sans);}
.dy-step.done .dy-stepn{background:var(--plum-bright);color:#fff;border-color:var(--plum-bright);}
.dy-steptitle{margin:2px 0 0;font:600 15px/1.35 var(--sans);color:var(--ink);}
.dy-step.done .dy-steptitle{color:var(--ink-soft);}


/* DYAD V1, THE PAIRING QUESTIONS AND READ (pairing.js; Marcus, 2026-10-11).
   Anthem's rules (DESIGN-CONSISTENCY.md): built from the pair header (.dyp-head,
   .pav), the core read's answer rows (.opt), Go-deeper's bar (.gd-bar) and the
   prep page's quote (.co-q); cards are glass at var(--r), pills at 999px;
   every gap is on the --sp scale; the palette is closed; one loud thing. */
.pr{padding-bottom:var(--sp-6);}
.pr-head{margin-bottom:var(--sp-5);}
.pr-head .pair{margin-bottom:var(--sp-4);}
.pr-head .kick{margin-bottom:var(--sp-2);}
.pr-sub{margin:var(--sp-3) 0 0;max-width:62ch;}
.pr-block,.pr-sec,.pr-move{margin:0 0 var(--sp-5);}
.pr-lead{margin:var(--sp-3) 0 0;font:500 17px/1.6 var(--sans);color:var(--ink);max-width:62ch;}
.pr-body{margin:var(--sp-3) 0 0;font-size:16px;line-height:1.65;color:var(--ink-soft);max-width:62ch;}
.pr-facts{margin:var(--sp-3) 0 0;padding-left:var(--sp-5);color:var(--ink-soft);font-size:15px;line-height:1.65;}
.pr-actions{margin:var(--sp-5) 0 0;}
.pr-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;}
.pr-count{font:600 12px/1.4 var(--sans);color:var(--ink-faint);}
.pr-bar{margin:var(--sp-2) 0 var(--sp-5);}
.pr-btitle{margin:0;}
.pr-frame{margin:var(--sp-3) 0 0;max-width:62ch;}
.pr-item{margin:var(--sp-6) 0 0;padding-top:var(--sp-5);border-top:1px solid var(--line);}
.pr-about{margin:0;font:600 11px/1.4 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);}
.pr-q{margin:var(--sp-2) 0 0;font:600 17px/1.45 var(--sans);color:var(--ink);max-width:60ch;}
.pr-q2{margin-top:var(--sp-5);}
.pr-priv{display:flex;gap:var(--sp-2);align-items:flex-start;margin:var(--sp-2) 0 var(--sp-3);font-size:13px;line-height:1.5;color:var(--ink-faint);max-width:62ch;}
.pr-priv svg{flex:none;width:14px;height:14px;margin-top:2px;fill:none;stroke:var(--plum-bright);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.pr-how{margin:0 0 var(--sp-2);}
.pr-options{gap:var(--sp-2);}
.pr-options .opt{padding:var(--sp-3) var(--sp-4);font-size:15px;border-radius:var(--r);}
.pr-options .opt .mark{display:grid;place-items:center;}
.pr-options .opt .mark b{font:700 11px/1 var(--sans);color:#fff;}
.pr-extra{margin-top:var(--sp-3);}
.pr-poles{display:flex;justify-content:space-between;gap:var(--sp-4);margin:var(--sp-3) 0 0;font:600 14px/1.4 var(--sans);color:var(--ink-soft);}
.pr-poles span:last-child{text-align:right;}
.pr-state{margin:var(--sp-4) 0 var(--sp-2);font:600 13px/1.4 var(--sans);color:var(--ink);}
.pr-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);}
.pr-segb{min-height:48px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:999px;background:var(--field);color:var(--ink);font:500 13.5px/1.3 var(--sans);cursor:pointer;transition:border-color .16s var(--ease),background .16s var(--ease);}
.pr-segb:hover{border-color:rgba(162,78,129,.5);}
.pr-segb.sel{border-color:var(--plum);background:rgba(162,78,129,.12);box-shadow:0 0 0 1px var(--plum) inset;}
.pr-nav{position:sticky;bottom:0;display:flex;justify-content:space-between;gap:var(--sp-3);margin:var(--sp-6) calc(-1 * var(--sp-5)) 0;padding:var(--sp-4) var(--sp-5);background:var(--elev);border-top:1px solid var(--line);}
.pr-nav .primary:disabled{opacity:.45;cursor:not-allowed;}
.pr-note{min-height:1em;margin:var(--sp-2) 0 0;font-size:13px;color:var(--ink-faint);}
.pr-note.bad{color:#c0392b;}
.pr-move{padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r);background:var(--glass);}
.pr-move-q{margin:var(--sp-3) 0 0;font-size:19px;line-height:1.5;font-style:normal;}
.pr-sec{padding-top:var(--sp-5);border-top:1px solid var(--line);}
.pr-subh{margin:var(--sp-5) 0 var(--sp-2);font:600 15px/1.4 var(--sans);color:var(--ink);}
.pr-line{margin:var(--sp-3) 0 0;padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r);background:var(--glass);}
.pr-line-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);flex-wrap:wrap;}
.pr-line-top h4{margin:0;font:600 15px/1.4 var(--sans);color:var(--ink);}
.pr-verdict{flex:none;padding:var(--sp-1) var(--sp-3);border:1px solid var(--plum);border-radius:999px;font:600 12px/1.3 var(--sans);color:var(--plum-bright);}
.pr-line .pr-body{margin-top:var(--sp-2);}
.pr-quote{margin:var(--sp-3) 0 0;}
.pr-quote .co-q{margin:0;font-style:normal;font-size:15.5px;}
.pr-quote figcaption{margin:var(--sp-1) 0 0;}
.pr-row{margin:var(--sp-3) 0 0;}
.pr-k{display:block;font:600 12px/1.4 var(--sans);color:var(--ink-faint);}
.pr-v{display:block;margin-top:var(--sp-1);font-size:16px;line-height:1.6;color:var(--ink);}
.pr-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2);}
.pr-chip{padding:var(--sp-1) var(--sp-3);border:1px solid var(--line);border-radius:999px;font-size:13px;line-height:1.4;color:var(--ink-soft);}
.pr-callout{margin:var(--sp-4) 0 0;padding:var(--sp-4);border-left:2px solid var(--plum);background:rgba(162,78,129,.05);border-radius:0 var(--r) var(--r) 0;}
.pr-callout .pr-body:first-child,.pr-callout .pr-k + .pr-body{margin-top:var(--sp-1);}
.pr-private{margin:var(--sp-4) 0 0;padding:var(--sp-4);border:1px dashed var(--line);border-radius:var(--r);}
.pr-private .quiet{margin-top:var(--sp-3);}
.pr-aside{margin-top:var(--sp-3);}
.pr-done{margin:var(--sp-3) 0 0;font:600 14px/1.4 var(--sans);color:var(--plum-bright);}
.pr-cmp{margin:var(--sp-4) 0 0;}
.pr-cmp-cells{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-2);}
.pr-cmp-cells > div{padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r);background:var(--field);}
.pr-cmp-cells p{margin:var(--sp-1) 0 0;font-size:15px;line-height:1.55;color:var(--ink);}
.pr-who{display:block;font:600 11px/1.4 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--plum-bright);}
.pr-granted{margin:var(--sp-4) 0 0;padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r);background:var(--glass);}
.pr-granted p{margin:var(--sp-2) 0 0;font:600 20px/1.45 var(--disp);letter-spacing:-.01em;color:var(--hi,var(--ink));}
.pr-card,.pr-note-doc{margin:var(--sp-6) 0 0;padding:var(--sp-5);border:1px solid rgba(162,78,129,.4);border-radius:var(--r);background:var(--glass);}
.pr-card .kick,.pr-note-doc .kick{margin:0;font:600 12px/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.pr-card-title{margin:var(--sp-2) 0 0;font:700 22px/1.25 var(--disp);letter-spacing:-.02em;color:var(--hi,var(--ink));}
.pr-card-sec{margin:var(--sp-5) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--line);}
.pr-asks{margin:var(--sp-2) 0 0;padding-left:var(--sp-5);font-size:15px;line-height:1.55;color:var(--ink);}
.pr-asks li + li{margin-top:var(--sp-2);}
.pr-granted-s{font:600 16px/1.45 var(--disp) !important;}
.pr-clauses{margin:var(--sp-4) 0 0;padding-left:var(--sp-5);}
.pr-clauses li{margin:0 0 var(--sp-5);padding-left:var(--sp-1);}
.pr-clauses li::marker{color:var(--plum-bright);font-weight:600;}
.pr-cname{margin:0;font:600 13px/1.4 var(--sans);letter-spacing:.02em;color:var(--ink);}
.pr-clauses .pr-body{margin-top:var(--sp-1);}
.pr-test{margin-top:var(--sp-2) !important;}
.pr-sigs{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin:var(--sp-5) 0 0;}
.pr-sig{padding:var(--sp-3) var(--sp-4);border-bottom:2px solid var(--line);font-size:14px;color:var(--ink-faint);}
.pr-sig.on{border-bottom-color:var(--plum-bright);color:var(--ink);}
.pr-standing{margin:var(--sp-7) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--line);}
@media screen and (max-width:899px){
  .pr-seg{grid-template-columns:1fr;}
  .pr-segb{text-align:left;border-radius:var(--r);padding:var(--sp-3) var(--sp-4);}
  .pr-cmp-cells,.pr-sigs{grid-template-columns:1fr;}
  .pr-nav{margin:var(--sp-5) calc(-1 * var(--sp-4)) 0;padding:var(--sp-3) var(--sp-4);}
  .pr-q{font-size:16px;}
  .pr-lead{font-size:16px;}
  .pr-granted p{font-size:18px;}
  .pr-card,.pr-note-doc,.pr-move{padding:var(--sp-4);}
}


/* ── SUPER COACH, CLEANED UP (Anthem, 2026-10-11: "we need to clean all of
      this up"; "the message pill is too big") ─────────────────────────────
      One tidy row: a slim message pill and Talk to Thea at the same height;
      starters in an even grid instead of a three-and-an-orphan wrap; the coach
      list dense enough to fit, and a fade with a divider above the account
      when it still scrolls. */
.thea-barrow{align-items:flex-end;}
body.sq-shell .thea-barrow > .cps-field{min-height:56px;align-items:center;padding:4px 6px 4px 4px;border-radius:16px;}
body.sq-shell .thea-barrow > .cps-field textarea{min-height:46px;padding:13px 6px 13px 16px;font-size:15.5px;line-height:1.3;}
body.sq-shell .thea-barrow .cps-send{width:40px;height:40px;margin:0;border-radius:12px;align-self:flex-end;margin-bottom:4px;}
.thea-talk-out{height:56px;border-radius:16px;}
.thea-landing .thea-barrow > .cps-field{min-height:60px;border-radius:18px;}
.thea-landing .thea-barrow > .cps-field textarea{min-height:50px;padding:15px 6px 15px 18px;font-size:16px;}
.thea-landing .cps-field{min-height:0;}
.thea-landing .cps-field textarea{min-height:0;}
.thea-landing .thea-talk-out{height:60px;border-radius:18px;font-size:15.5px;padding:0 22px 0 18px;}
.thea-greet{font-size:clamp(30px,3.4vw,46px);}
.thea-greet-sub{font-size:16px;}
.thea-landing .thea-dock > .thea-starters{display:grid;grid-template-columns:repeat(4,max-content);justify-content:center;gap:8px;margin:var(--sp-4) 0 0;}
.thea-landing .thea-starter{font-size:13.5px;padding:8px 14px;text-align:center;}
@media (max-width:1180px){ .thea-landing .thea-dock > .thea-starters{grid-template-columns:repeat(2,max-content);} }
@media (max-width:560px){
  .thea-landing .thea-dock > .thea-starters{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;}
  .thea-landing .thea-starter{font-size:13px;padding:9px 10px;line-height:1.3;white-space:normal;}
  .thea-landing .thea-talk-out{height:48px;border-radius:14px;font-size:14.5px;}
  body.sq-shell .thea-landing .thea-barrow > .cps-field{min-height:56px;}
}
@media screen and (min-width:900px){
  body.sq-shell .sqcoachnav{margin:12px 0 8px;gap:2px;}
  body.sq-shell.sq-coachside .sqcn-item{min-height:42px;}
  body.sq-shell.sq-coachside .sqcn-kick{margin:10px 12px 8px;}
  body.sq-shell.sq-coachside .sqcn-head{margin:14px 12px 4px;}
  body.sq-shell.sq-coachside .sqcn-conv{min-height:34px;}
  body.sq-shell.sq-coachside .sqcn-all{margin-top:8px;}
  body.sq-shell.sq-coachside .sqcn-back{min-height:34px;margin-bottom:4px;}
  body.sq-shell.sq-coachside #chrome nav .brand{-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent);padding-bottom:20px;}
  body.sq-shell.sq-coachside #chrome nav .navright{padding-top:14px;border-top:1px solid var(--line);}
  /* Two lists in one rail (prod sweep #34, Mira): on this side SuperQ's places
     sit a little tighter, so Thea's memory and settings stay above the fold
     on a 720-high laptop. */
  body.sq-shell.sq-coachside .sqrail-kick{margin:24px 12px 10px;}
  body.sq-shell.sq-coachside #chrome nav .sqtabs .sub,body.sq-shell.sq-coachside #chrome nav .sqtabs .lvl{min-height:40px;}
}
body.sq-shell .thea-landing .thea-barrow > .cps-field{min-height:60px;}
@media (max-width:560px){
  .thea-landing .thea-barrow{align-items:stretch;}
  body.sq-shell .thea-landing .thea-barrow > .cps-field{min-height:56px;}
  .thea-greet{font-size:28px;line-height:1.15;}
}

/* ── QUIET STARTERS (Anthem, 2026-10-12: "the suggestions at the bottom an
      eye sore?") ──────────────────────────────────────────────────────────
      Suggestions whisper: small, unfilled, a hairline, each only as wide as
      its words, left-aligned under the message pill so they belong to it. A
      fill only on hover. Replaces the even grid of filled tiles. */
.thea-landing .thea-dock > .thea-starters,
.thea-room .thea-dock > .thea-starters{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;margin:12px 0 0 4px;}
body.sq-shell .thea-starter{height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:transparent;
  color:var(--ink-faint);font:500 13px/30px var(--sans);white-space:nowrap;text-align:left;max-width:100%;}
body.sq-shell .thea-starter:hover{color:var(--ink);background:var(--glass);border-color:color-mix(in oklab,var(--plum) 40%,var(--line));}
.thea-landing .thea-starter{font-size:13px;padding:0 12px;}
@media (max-width:560px){
  .thea-landing .thea-dock > .thea-starters{display:flex;justify-content:flex-start;margin-left:2px;}
  .thea-landing .thea-starter{font-size:12.5px;padding:0 11px;line-height:30px;white-space:nowrap;}
}
@media (max-width:560px){
  body.sq-shell .thea-landing .thea-starter{font-size:12px;padding:0 10px;}
}
/* A 44px tap area (WP1) without a 44px look: the hit zone reaches past the chip. */
@media (pointer:coarse),(max-width:760px){
  body.sq-shell .thea-starter{position:relative;min-height:32px !important;height:32px;}
  body.sq-shell .thea-starter::after{content:"";position:absolute;inset:-6px -3px;}
}


/* ── NOTES (Anthem, 2026-10-12; thea.js renderNotes) ────────────────────── */
.thea-notes{display:flex;flex-direction:column;gap:var(--sp-4);}
.thea-note{padding:var(--sp-5) var(--sp-6);}
.thea-note-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);margin:0 0 var(--sp-2);}
.thea-note-head h2{margin:0;font:600 18px/1.3 var(--disp);letter-spacing:-.01em;color:var(--hi);}
.thea-note-meta{flex:none;font:500 12.5px/1 var(--sans);color:var(--ink-faint);}
.thea-note-topics{margin:0 0 var(--sp-3);color:var(--ink-soft);font-size:14.5px;}
.thea-note .thea-sec{margin:var(--sp-4) 0 var(--sp-2);}
.thea-note-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.5;color:var(--ink);}
.thea-note-open{display:inline-flex;margin-top:var(--sp-4);font-size:14px;}
.thea-notes-empty p{margin:0 0 6px;}
@media (max-width:560px){ .thea-note{padding:var(--sp-4);} .thea-note-head{flex-direction:column;gap:4px;} }
.thea-notes{margin-top:var(--sp-5);}
body.sq-shell .thea-note{margin:0;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card,var(--r));}
body.sq-shell .thea-note:hover{border-color:color-mix(in oklab,var(--plum) 35%,var(--line));}


/* ── NOTES, UP TO PAR (Anthem, 2026-10-12) ──────────────────────────────
      The app's hero grammar; grouped by week; tighter cards with the two
      lists side by side on a wide screen. */
.thea-notes-title{display:inline-block;max-width:none;padding-right:.06em;}
.thea-notes{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5);}
.thea-notes-group{margin:var(--sp-5) 0 var(--sp-1);}
.thea-notes-group:first-child{margin-top:0;}
.thea-notes-none{margin:0;}
body.sq-shell .thea-note{margin:0;padding:var(--sp-5) var(--sp-6) var(--sp-4);background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card,var(--r));
  transition:border-color .16s var(--ease);}
body.sq-shell .thea-note:hover{border-color:color-mix(in oklab,var(--plum) 35%,var(--line));}
.thea-note-head{display:block;margin:0 0 var(--sp-2);}
.thea-note-head h2{margin:0;font:600 19px/1.3 var(--disp);letter-spacing:-.012em;color:var(--hi);}
.thea-note-meta{display:flex;align-items:center;gap:8px;margin:4px 0 0;font:500 12.5px/1.2 var(--sans);color:var(--ink-faint);}
.thea-note-tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font:600 11px/1 var(--sans);letter-spacing:.02em;
  color:var(--plum-bright);background:color-mix(in oklab,var(--plum) 16%,transparent);border:1px solid color-mix(in oklab,var(--plum) 34%,transparent);}
.thea-note-topics{margin:0 0 var(--sp-3);max-width:72ch;font-size:15px;line-height:1.55;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.thea-note-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-2) var(--sp-6);}
@media (min-width:900px){ .thea-note-cols.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }
.thea-note .thea-sec{margin:var(--sp-2) 0 var(--sp-2);}
.thea-note-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14.5px;line-height:1.5;color:var(--ink);}
.thea-note-list li{position:relative;padding-left:16px;}
.thea-note-list li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--ink-faint);}
.thea-note-list.commit li{padding-left:22px;}
.thea-note-list.commit li::before{left:0;top:.3em;width:13px;height:13px;border-radius:50%;background:none;border:1.5px solid var(--plum-bright);}
.thea-note-list.commit li::after{content:"";position:absolute;left:4px;top:calc(.3em + 3px);width:4px;height:6px;border:solid var(--plum-bright);border-width:0 1.5px 1.5px 0;transform:rotate(40deg);}
.thea-note-foot{display:flex;justify-content:flex-end;margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line);}
body.sq-shell .thea-note-open{height:34px;padding:0 14px;font-size:13.5px;}
@media (max-width:560px){
  body.sq-shell .thea-note{padding:var(--sp-4);}
  .thea-note-foot{justify-content:stretch;}
  body.sq-shell .thea-note-open{width:100%;}
}
/* the whole note opens its conversation: the title is the link, the card lights */
.thea-note{position:relative;}
.thea-note-head h2{display:block;}
.thea-note-open{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;margin:0;padding:0;border:0;background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer;}
.thea-note-open::after{content:"";position:absolute;inset:0;border-radius:inherit;}
.thea-note-go{flex:none;font-size:22px;line-height:1;color:var(--ink-faint);transition:color .16s var(--ease),transform .16s var(--ease);}
.thea-note:hover .thea-note-go{color:var(--plum-bright);transform:translateX(2px);}
.thea-note-open:focus-visible{outline:none;}
.thea-note:has(.thea-note-open:focus-visible){outline:2px solid var(--plum-bright);outline-offset:2px;}
body.sq-shell .thea-note{padding-bottom:var(--sp-5);cursor:pointer;}
body.sq-shell .view .thea-note .thea-note-open{height:auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  font:600 19px/1.3 var(--disp);letter-spacing:-.012em;color:var(--hi);text-transform:none;}
@media (max-width:560px){ body.sq-shell .view .thea-note .thea-note-open{font-size:17px;} }

/* ── EVERYTHING THAT POPS UP CAN BE SENT AWAY (Marcus, 2026-10-12: "any and
      all of them, should be able to be swiped away or clicked away";
      js/dismiss.js). One close, the same on every notice: a quiet round x in
      the corner that brightens when you reach for it, with a 44px target.
      It sits on the notice's own colour (currentColor), so it belongs to the
      plum box, the legal note and the toasts alike, in every world. A notice
      follows the finger along its axis; vertical scrolling still scrolls. */
.sqdx{touch-action:pan-y;}
.sqdx-drag{cursor:grabbing;-webkit-user-select:none;user-select:none;}
.sqdx-x{position:absolute;top:10px;right:10px;z-index:1;width:28px;height:28px;display:grid;place-items:center;padding:0;margin:0;
  border:0;border-radius:50%;background:rgba(255,255,255,.07);color:inherit;opacity:.62;cursor:pointer;
  transition:opacity .15s ease,background .15s ease,transform .15s var(--ease);}
.sqdx-x::before{content:"";position:absolute;inset:-8px;border-radius:50%;}
.sqdx-x svg{width:14px;height:14px;}
.sqdx-x:hover{opacity:1;background:rgba(255,255,255,.15);}
.sqdx-x:active{transform:scale(.9);}
.sqdx-x:focus{outline:none;}
.sqdx-x:focus-visible{opacity:1;outline:2px solid var(--plum-bright);outline-offset:2px;}
[data-theme="light"] .sqdx-x{background:rgba(36,28,41,.06);}
[data-theme="light"] .sqdx-x:hover{background:rgba(36,28,41,.12);}

/* The box under the bell: the message is the button, the x sits beside it. */
.sqbox{padding:0;}
.sqbox-main{display:block;width:100%;margin:0;padding:15px 52px 14px 18px;border:0;border-radius:0;background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer;}
.sqbox .sqdx-x{top:12px;right:12px;color:#F4EEF3;}
[data-theme="light"] .sqbox .sqdx-x{background:rgba(255,255,255,.1);}
[data-theme="light"] .sqbox .sqdx-x:hover{background:rgba(255,255,255,.2);}

/* The legal note: its x is a second way to say Got it. */
#sqLegalNotice.sqdx{padding-right:52px !important;}
/* Its links in the world's accent, not the browser's default blue. */
#sqLegalNotice a{color:var(--plum-bright);text-decoration-thickness:1px;text-underline-offset:2px;}

/* The small centred notes: the x rides the middle of the line. */
.sqlocknote.on{pointer-events:auto;}
.sqlocknote.sqdx{padding-right:44px;}
.sqlocknote .sqdx-x,.cps-toast .sqdx-x{top:50%;right:7px;width:24px;height:24px;margin-top:-12px;}
.cps-toast.sqdx{padding-right:38px;}

@media (prefers-reduced-motion:reduce){ .sqdx-x{transition:none;} }
@media print{ .sqdx-x{display:none !important;} }


/* THE NAME TAG (prod sweep #41): the instrument's or the report's own name,
   quiet, after the plain title it belongs to. One treatment in all three
   places (trait rows, the shift list, Deep Read). */
.sq-nametag{display:inline;font:500 12px/1.3 var(--sans);font-style:normal;color:var(--ink-faint);letter-spacing:.02em;margin-left:8px;text-transform:none;}
.sqshift b .sq-nametag{display:inline;}
.gdg .sq-nametag{display:block;margin:4px 0 0;}
.sqtrait-head{flex-wrap:wrap;row-gap:2px;}