/* Screen styles: Settings and the pages it opens (6 Nov rebuild, step 5b): Settings, Alerts on your phone, Send missed
   calls to Jeevz, Website enquiries, How closing works, Close your account, Account closed, a tool you took off, and the
   public "link has stopped working" page. Every rule is scoped to main.se, which only these templates carry.
   Reads the role tokens only (docs/design-system.md), so both looks follow. No new tokens, no new components.
   The row markup a.hm-row > .hm-ic + .hm-t (+ .hm-l line, .hm-v value) is kept as written because tests read it;
   this file draws it as the new grouped row: a 44px icon circle, the name (18/600), one quiet line, a chevron. */

main.se{padding-bottom:var(--jz-s10)}
main.se b{font-weight:600}
main.se .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* section heading: Cabinet 22, as .jz-sechead */
main.se .hm-sec{margin:var(--jz-s7) var(--jz-s1) var(--jz-s3);padding:0;font:700 var(--jz-t-h2)/1.15 var(--jz-display);letter-spacing:var(--jz-track-h2);text-transform:none;color:var(--jz-ink)}
main.se .jz-lt+.hm-sec,main.se .jz-lt+.se-me+.hm-sec{margin-top:var(--jz-s6)}

/* ---------- grouped rows ---------- */
main.se .se-group{display:block;margin:0 0 14px;padding:0;background:var(--jz-surface);border-radius:var(--jz-r-card);box-shadow:var(--jz-shadow);overflow:hidden;list-style:none}
main.se .se-group nav,main.se .se-group form{margin:0}
main.se .hm-row{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:14px;row-gap:2px;width:100%;box-sizing:border-box;min-height:var(--jz-row);margin:0;padding:12px 18px;background:none;border:0;border-radius:0;box-shadow:none;color:var(--jz-ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
main.se .hm-row:has(.hm-l){min-height:76px}
main.se .hm-row:active{background:var(--jz-press)}
main.se .hm-row:focus-visible{outline:3px solid var(--jz-forest);outline-offset:-3px}
main.se .hm-ic{grid-area:1/1/3/2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--jz-surface-2);color:var(--jz-forest)}
main.se .hm-ic .jz-ic{width:22px;height:22px;stroke-width:2}
main.se .hm-t{grid-area:1/2/2/3;min-width:0;font:600 18px/1.25 var(--jz-sans);letter-spacing:-.01em;color:inherit;overflow-wrap:anywhere}
main.se .hm-row:not(:has(.hm-l)) .hm-t{grid-row:1/3}
main.se .hm-l{grid-area:2/2/3/3;min-width:0;font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
main.se .hm-v{grid-area:1/3/3/4;font:600 var(--jz-t-meta)/1 var(--jz-sans);color:var(--jz-ink-2);white-space:nowrap}
main.se .hm-v.is-on{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:var(--jz-r-full);background:var(--jz-wash);color:var(--jz-forest)}
/* hairline between rows, inset to the words */
main.se .se-group .hm-row::before{content:"";position:absolute;top:0;left:76px;right:18px;height:1.5px;background:var(--jz-hair)}
main.se .se-group>.hm-row:first-child::before,main.se .se-group>:first-child>.hm-row:first-child::before,main.se .se-group>:first-child>:first-child>.hm-row:first-child::before{display:none}
/* the chevron: a link goes somewhere, a fold opens down */
main.se a.hm-row::after,main.se .hm-link::after,main.se summary.hm-row::after{content:"";grid-area:1/4/3/5;width:9px;height:9px;margin:0 3px 0 2px;border:solid var(--jz-ink-2);border-width:2.4px 2.4px 0 0;border-radius:1px;transform:rotate(45deg)}
main.se summary.hm-row::after{transform:rotate(135deg);margin-top:-5px;transition:transform var(--jz-dur-press) var(--jz-ease-out)}
main.se details[open]>summary.hm-row::after{transform:rotate(-45deg);margin-top:5px}
main.se summary.hm-row{list-style:none}
main.se summary.hm-row::-webkit-details-marker{display:none}
/* a row whose link must stay a bare <a> (Privacy policy): the link fills the row */
main.se .hm-link a{grid-area:1/2/3/3;font:600 18px/1.25 var(--jz-sans);color:var(--jz-ink);text-decoration:none}
main.se .hm-link a::before{content:"";position:absolute;inset:0}
/* Sign out is a button: no button look, just the row */
main.se button.hm-row{min-height:var(--jz-row);font:inherit}
main.se button.hm-row:active{transform:none}
/* Close your account: the one red row, on its own */
main.se .se-end{margin-top:var(--jz-s7)}
main.se .danger-text{color:var(--jz-danger)}
main.se .danger-text .hm-ic{background:var(--jz-chip-danger);color:var(--jz-on-chip-danger)}
main.se .danger-text::after{border-color:var(--jz-danger)}

/* folds open in place */
main.se .se-fold{margin:0}
main.se .se-foldbody{padding:var(--jz-s1) 18px var(--jz-s5)}
main.se .se-foldbody .jz-btn{margin:var(--jz-s1) 0 0}

/* ---------- small words ---------- */
main.se .se-hint{margin:var(--jz-s3) 0;font:500 var(--jz-t-meta)/1.45 var(--jz-sans);color:var(--jz-ink-2);text-wrap:pretty}
main.se .se-hint a,main.se .se-foot a,main.se .se-qa a,main.se .se-line a{color:var(--jz-forest);font-weight:600;text-underline-offset:3px}
main.se .se-note{margin:var(--jz-s3) var(--jz-s1) 0;font:500 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
main.se .se-foot{margin:var(--jz-s5) var(--jz-s1) 0;font:500 var(--jz-t-meta)/1.45 var(--jz-sans);color:var(--jz-ink-2);text-wrap:pretty}
main.se .se-card{display:block;margin:0 0 14px;padding:var(--jz-s5);background:var(--jz-surface);border-radius:var(--jz-r-card);box-shadow:var(--jz-shadow)}
main.se .se-card>:first-child{margin-top:0}
main.se .se-card>:last-child{margin-bottom:0}
main.se .se-line{display:flex;gap:12px;align-items:flex-start;margin:0 0 var(--jz-s3);font:500 16px/1.45 var(--jz-sans);color:var(--jz-ink-2);text-wrap:pretty}
main.se .se-line>.jz-ic{flex:none;width:22px;height:22px;margin-top:1px;color:var(--jz-forest);stroke-width:2}
main.se .se-line b{color:var(--jz-ink)}
main.se .se-line:last-child{margin-bottom:0}

/* ---------- Settings ---------- */
main.se-set .se-me{display:flex;align-items:center;gap:var(--jz-s4);margin:0 0 var(--jz-s2);padding:var(--jz-s4) var(--jz-s5);background:var(--jz-surface);border-radius:var(--jz-r-card);box-shadow:var(--jz-shadow)}
main.se-set .se-mono{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--jz-wash);color:var(--jz-forest);font:800 22px/1 var(--jz-display);letter-spacing:-.02em}
main.se-set .se-me-t{min-width:0;display:flex;flex-direction:column;gap:3px}
main.se-set .se-me-t b{font:700 var(--jz-t-card)/1.15 var(--jz-display);letter-spacing:-.02em;color:var(--jz-ink);overflow-wrap:anywhere}
main.se-set .se-me-t small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2);overflow-wrap:anywhere}
main.se-set .se-look{margin:0}
main.se-set .se-look .jz-choice label{min-height:104px;font:600 17px/1.2 var(--jz-sans);color:var(--jz-ink)}
main.se-set .se-look .btn{margin-top:var(--jz-s3)}
/* your plan, inside its fold: no card on a card */
main.se-set .plancard{margin:0;padding:var(--jz-s1) 18px var(--jz-s5) 76px;background:none;border:0;border-radius:0;box-shadow:none}
main.se-set .plancard>b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main.se-set .plancard .hint{margin:0 0 var(--jz-s2);font:500 var(--jz-t-meta)/1.45 var(--jz-sans);color:var(--jz-ink-2)}
main.se-set .planextras{margin:var(--jz-s2) 0 0;padding:0;list-style:none}
main.se-set .planextras:empty{display:none}
main.se-set .planextras li{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);min-height:48px;border-top:1.5px solid var(--jz-hair);font:500 16px/1.3 var(--jz-sans)}
main.se-set .planextras em{font:600 var(--jz-t-meta)/1 var(--jz-sans);font-style:normal;color:var(--jz-forest)}
main.se-set .se-pwr{margin:var(--jz-s6) 0 0;font:500 13px/1.3 var(--jz-sans);text-align:center;color:var(--jz-ink-2)}

/* ---------- Close your account (the real danger) ---------- */
main.se .se-steps{padding:var(--jz-s1) 0}
main.se .se-steps li{position:relative;display:flex;gap:14px;align-items:center;margin:0;padding:14px 18px;font:500 17px/1.4 var(--jz-sans);color:var(--jz-ink)}
main.se .se-steps li+li::before{content:"";position:absolute;top:0;left:76px;right:18px;height:1.5px;background:var(--jz-hair)}
main.se .se-steps .hm-ic{flex:none}
main.se .se-warn{display:flex;gap:10px;align-items:flex-start;margin:var(--jz-s4) var(--jz-s1) var(--jz-s5);font:600 16px/1.4 var(--jz-sans);color:var(--jz-danger)}
main.se .se-warn .jz-ic{flex:none;width:22px;height:22px;stroke-width:2.2}
main.se #close-form .jz-btn{margin-top:var(--jz-s2)}
main.se #close-form .jz-field-hint b{color:var(--jz-ink)}
main.se #close-form>ul.errorlist{margin:0 0 var(--jz-s3);padding:0;list-style:none;font:600 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-danger)}

/* How closing works: four answers, each with who it is for */
main.se .se-qa section{position:relative;display:flex;gap:14px;align-items:flex-start;padding:var(--jz-s5) 18px}
main.se .se-qa section+section::before{content:"";position:absolute;top:0;left:76px;right:18px;height:1.5px;background:var(--jz-hair)}
main.se .se-qa .hm-ic{flex:none}
main.se .se-qa h2{margin:2px 0 var(--jz-s1);font:600 18px/1.3 var(--jz-sans);letter-spacing:-.01em;color:var(--jz-ink)}
main.se .se-qa p{margin:0;font:500 16px/1.5 var(--jz-sans);color:var(--jz-ink-2)}

/* Account closed: calm, a tick in a soft circle */
main.se-closed{padding-top:calc(var(--jz-safe-t) + var(--jz-s10))}
main.se .se-done{display:flex;flex-direction:column;align-items:center;gap:var(--jz-s2);margin:var(--jz-s10) 0 var(--jz-s6);text-align:center}
main.se .se-done-ic{display:grid;place-items:center;width:88px;height:88px;margin-bottom:var(--jz-s2);border-radius:50%;background:var(--jz-wash);color:var(--jz-forest)}
main.se .se-done-ic .jz-ic{width:42px;height:42px;stroke-width:2.6}
main.se .se-done h1{margin:0;font:700 var(--jz-t-title)/1.1 var(--jz-display);letter-spacing:var(--jz-track-display);color:var(--jz-ink)}
main.se .se-done p{margin:0;font:500 var(--jz-t-body)/1.4 var(--jz-sans);color:var(--jz-ink-2)}
main.se-closed .jz-btn{margin-top:var(--jz-s2)}

/* Link has stopped working (public, light only) */
main.se-gone{max-width:430px;margin:0 auto;padding-top:calc(var(--jz-safe-t) + var(--jz-s8))}
main.se-gone .se-gone-box{margin:var(--jz-s6) 0 var(--jz-s4)}
#app main.se-gone .se-gone-box .jz-empty-ic{background:var(--jz-surface-2);color:var(--jz-ink)}
#app main.se-gone .se-gone-box b{font-size:var(--jz-t-title);line-height:1.1}

/* A tool you took off */
main.se-off .se-off-card{padding:var(--jz-s6) var(--jz-s5) var(--jz-s5)}
main.se-off .se-off-ic{display:grid;place-items:center;width:56px;height:56px;margin:0 0 var(--jz-s4);border-radius:50%;background:var(--jz-surface-2);color:var(--jz-ink-2)}
main.se-off .se-off-ic .jz-ic{width:26px;height:26px;stroke-width:2}
main.se-off .se-off-does{margin:0 0 var(--jz-s4);font:500 16px/1.45 var(--jz-sans);color:var(--jz-ink-2)}
main.se-off .se-off-lead{margin:0 0 var(--jz-s1);font:600 19px/1.4 var(--jz-sans);color:var(--jz-ink);text-wrap:pretty}
main.se-off form{margin:var(--jz-s5) 0 0}

/* ---------- Alerts on your phone: three steps down one track ---------- */
main.se .se-track{margin:0 0 14px;padding:var(--jz-s2) 0;background:var(--jz-surface);border-radius:var(--jz-r-card);box-shadow:var(--jz-shadow);list-style:none}
main.se .se-track .step{position:relative;display:flex;gap:var(--jz-s4);align-items:flex-start;margin:0;padding:var(--jz-s4) var(--jz-s5)}
main.se .se-track .step:not(:last-child)::after{content:"";position:absolute;left:calc(var(--jz-s5) + 21px);top:calc(var(--jz-s4) + 48px);bottom:calc(-1 * var(--jz-s4));width:2px;border-radius:var(--jz-r-full);background:var(--jz-edge)}
main.se .se-track .num{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--jz-surface-2);color:var(--jz-ink);font:800 20px/1 var(--jz-display);font-variant-numeric:tabular-nums}
main.se .se-track .stepbody{flex:1;min-width:0;padding-top:8px}
main.se .se-track h3{margin:0 0 var(--jz-s1);font:700 20px/1.2 var(--jz-display);letter-spacing:-.01em;color:var(--jz-ink)}
main.se .se-track p{margin:0 0 var(--jz-s3);font:500 16px/1.45 var(--jz-sans);color:var(--jz-ink-2)}
main.se .se-track p b{color:var(--jz-ink)}
main.se .se-track .note{margin:0;padding:var(--jz-s3) var(--jz-s4);border-radius:var(--jz-r-inner);background:var(--jz-surface-2);font:500 var(--jz-t-meta)/1.45 var(--jz-sans);color:var(--jz-ink-2)}
main.se .se-track .jz-btn{margin:var(--jz-s1) 0 0}
main.se .se-track .jz-btn+.jz-btn{margin-top:var(--jz-s2)}
main.se #ios-steps:not([hidden])+.andnote{display:none}
main.se .step:has(#installed:not([hidden])) #install-btn{display:none}
main.se .step:has(#installed:not([hidden])) .num{background:var(--jz-done);color:var(--jz-on-done);font-size:0}
main.se .step:has(#installed:not([hidden])) .num::after{content:"\2713";font:800 20px/1 var(--jz-sans)}
main.se #installed{font-weight:600;color:var(--jz-forest)}
main.se #alerts-state{font-weight:600;color:var(--jz-ink)}
main.se .asoon{display:flex;align-items:center;gap:var(--jz-s3);min-height:64px;margin:var(--jz-s1) 0 0;padding:var(--jz-s2) var(--jz-s4);border-radius:var(--jz-r-inner);background:var(--jz-surface-2)}
main.se .asoon-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
main.se .asoon-t b{font:600 17px/1.25 var(--jz-sans);color:var(--jz-ink)}
main.se .asoon-t small{font:500 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
main.se .asoon .switch:disabled{opacity:.55;cursor:not-allowed}

/* ---------- Send missed calls to Jeevz ---------- */
/* the number is this page's hero: Cabinet 800 on the accent fill, ink on it */
main.se .se-num{padding:var(--jz-s6) var(--jz-s5);background:var(--jz-accent);color:var(--jz-on-accent);box-shadow:var(--jz-shadow-btn)}
main.se .se-num p{margin:0}
main.se .se-num-l{display:block;font:600 var(--jz-t-meta)/1.3 var(--jz-sans)}
main.se .se-num .jznum{display:block;margin:var(--jz-s2) 0 var(--jz-s1);font:800 clamp(28px,8.6vw,40px)/1.05 var(--jz-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
main.se .se-num-s{font:500 var(--jz-t-meta)/1.35 var(--jz-sans)}
main.se .se-result{display:flex;gap:12px;align-items:center;margin:0 0 var(--jz-s4);padding:var(--jz-s3) var(--jz-s4);border-radius:var(--jz-r-inner);background:var(--jz-surface-2);color:var(--jz-ink);font:600 17px/1.35 var(--jz-sans)}
main.se .se-result-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--jz-surface);color:var(--jz-ink-2)}
main.se .se-result-ic .jz-ic{width:22px;height:22px;stroke-width:2.4}
main.se .se-result.is-passed{background:var(--jz-wash);color:var(--jz-forest)}
main.se .se-result.is-passed .se-result-ic{background:var(--jz-done);color:var(--jz-on-done)}
main.se .se-result:is(.is-caller_lost,.is-withheld,.is-nothing,.is-arrived){background:var(--jz-surface-2);color:var(--jz-ink);box-shadow:inset 6px 0 0 var(--jz-late-edge)}
main.se .se-result:is(.is-caller_lost,.is-withheld,.is-nothing,.is-arrived) .se-result-ic{background:var(--jz-late-fill);color:var(--jz-on-late)}
main.se .se-result.is-waiting .se-result-ic{animation:se-tick 2s var(--jz-ease-out) infinite}
@keyframes se-tick{50%{transform:rotate(12deg)}}
main.se .se-test .jz-field-err{margin:0 0 var(--jz-s2)}
main.se .se-test .jz-field-err+form{margin-top:var(--jz-s4)}
main.se .se-test .se-line{margin-top:var(--jz-s2)}
main.se-setup{padding-bottom:calc(var(--jz-s10) + 96px)}
main.se .se-wait{display:flex;gap:14px;align-items:flex-start}
main.se .se-wait .hm-ic{flex:none}
main.se .se-wait b{display:block;margin:10px 0 var(--jz-s1);font:700 20px/1.2 var(--jz-display);color:var(--jz-ink)}
main.se .se-wait p{margin:0;font:500 16px/1.45 var(--jz-sans);color:var(--jz-ink-2)}
main.se .se-guide{margin-top:var(--jz-s5)}
main.se .guide{font:500 16px/1.5 var(--jz-sans);color:var(--jz-ink);overflow-wrap:anywhere}
main.se .guide :is(h3,h4){margin:var(--jz-s5) 0 var(--jz-s2);font:700 18px/1.3 var(--jz-display);color:var(--jz-ink)}
main.se .guide :is(ol,ul){margin:0 0 var(--jz-s3);padding-left:1.2em}
main.se .guide li{margin:0 0 var(--jz-s2)}
main.se .guide a{color:var(--jz-forest);font-weight:600}
main.se .guide code{padding:2px 8px;border-radius:var(--jz-r-s);background:var(--jz-surface-2);color:var(--jz-ink);font:700 16px/1.4 var(--jz-sans);font-variant-numeric:tabular-nums}

/* ---------- Website enquiries ---------- */
main.se-site .jz-field{margin:0 0 var(--jz-s2)}
main.se-site input#form-url{min-height:var(--jz-btn);padding:14px 16px;border-radius:var(--jz-r-inner);background:var(--jz-surface-2);color:var(--jz-ink);box-shadow:none;font:600 16px/1.3 var(--jz-sans);text-overflow:ellipsis}
main.se-site textarea#form-snippet{min-height:200px;max-height:240px;padding:14px 16px;border-radius:var(--jz-r-inner);background:var(--jz-surface-2);color:var(--jz-ink-2);box-shadow:none;resize:none;font:500 13px/1.5 var(--jz-sans)}
main.se-site .hm-copy{margin-top:var(--jz-s3)}
main.se-site .se-copied:empty{display:none}
main.se-site .se-copied{margin:var(--jz-s2) 0 0;padding:0;background:none;border:0;font:600 var(--jz-t-meta)/1.4 var(--jz-sans);color:var(--jz-danger)}

@media (prefers-reduced-motion:reduce){
  main.se .se-result.is-waiting .se-result-ic{animation:none}
  main.se summary.hm-row::after{transition:none}
}