/* Screen styles: home area (Today, More, Settings, Your tools, Alerts on your phone, Send missed calls,
   Website enquiries, Close your account, Account closed, Log in).
   Loaded on every app page after jeevz.css (core/templates/core/base.html). Every rule here is scoped to
   main.hm, which only this area's templates carry, so nothing leaks to other screens.
   Read --jz-* tokens only (see jeevz.css section 1). Never read --ink --text --font --brand --accent --on-brand
   --on-accent --needs-bg --needs-fg (the firm brand sets those). Local url() only.
   Pass 2 (design-review-2.md): title + grouped lists + one action. 4/8 grid, radii 16 (groups) and 28 (hero),
   32px icon tiles, sentence-case section headers, no caps eyebrows, no dashed boxes, no borders on cards. */

/* ================= shared parts ================= */
main.hm{--hm-shadow:0 1px 2px rgba(23,33,29,.04),0 4px 16px -8px rgba(23,33,29,.10);--hm-hair:rgba(23,33,29,.07);--hm-chev:rgba(23,33,29,.28);--hm-r:16px;
  padding:0 var(--jz-gutter) var(--jz-s8)}
main.hm b{font-weight:600}

/* back: a drawn chevron and the page it goes to */
main.hm .hm-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin:var(--jz-s1) 0 0 -6px;padding:0 var(--jz-s2) 0 0;font:400 17px/1 var(--jz-sans);color:var(--jz-forest);text-decoration:none}
main.hm .hm-back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}

/* title: 34/800, then a 15/400 muted line. Nothing above it. */
main.hm .hm-head{padding:var(--jz-s4) 0 var(--jz-s6)}
main.hm .hm-back+.hm-head{padding-top:var(--jz-s1)}
main.hm .hm-title{margin:0;font:800 34px/1.1 var(--jz-sans);letter-spacing:-.035em;color:var(--jz-ink);text-wrap:balance}
main.hm .hm-sub{margin:var(--jz-s2) 0 0;font:400 15px/1.45 var(--jz-sans);color:var(--jz-muted);text-wrap:pretty}
main.hm .hm-sub b{color:var(--jz-ink)}

/* section header: sentence case, 15/600, inset to the row text */
main.hm .hm-sec{display:block;margin:var(--jz-s8) var(--jz-s4) var(--jz-s2);padding:0;font:600 15px/1.3 var(--jz-sans);letter-spacing:0;text-transform:none;color:var(--jz-muted)}
main.hm .hm-head+.hm-sec{margin-top:0}

/* one white surface per idea: 16px radius, soft shadow, no border */
main.hm .hm-group{display:block;margin:0 0 var(--jz-s4);padding:0;background:var(--jz-card);border:0;border-radius:var(--hm-r);box-shadow:var(--hm-shadow);overflow:hidden;list-style:none}
main.hm .hm-group+.hm-group{margin-top:var(--jz-s4)}
main.hm .hm-pad{padding:var(--jz-s5) var(--jz-s4) var(--jz-s4)}

/* 56px row: [16] tile 32 [12] title ........ value [8] chevron [16] */
main.hm .hm-row{position:relative;display:flex;align-items:center;gap:var(--jz-s3);width:100%;box-sizing:border-box;min-height:56px;margin:0;padding:var(--jz-s2) var(--jz-s4);background:none;border:0;border-radius:0;box-shadow:none;color:var(--jz-ink);font:600 17px/1.25 var(--jz-sans);letter-spacing:-.01em;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
main.hm .hm-row:active{background:var(--jz-field)}
/* hairline between rows, inset to the text (16 + 32 + 12 = 60) */
main.hm .hm-group>.hm-row+.hm-row::before,main.hm .hm-group>*+*>.hm-row:first-child::before,main.hm .hm-group>*+.hm-row::before,main.hm .hm-group>*+form>.hm-row::before,main.hm .hm-group>.hm-fold>summary::before,main.hm .hm-group nav>.hm-row+.hm-row::before{content:"";position:absolute;top:0;left:60px;right:0;height:1px;background:var(--hm-hair)}
main.hm .hm-group>.hm-fold:first-child>summary::before,main.hm details.hm-group>summary::before{display:none}
main.hm .hm-group .hm-row:not(:has(.hm-ic))::before{left:var(--jz-s4)}
/* chevron on every row that goes somewhere */
main.hm a.hm-row::after,main.hm .hm-link::after{content:"";flex:none;width:8px;height:8px;margin:0 2px 0 var(--jz-s1);border:solid var(--hm-chev);border-width:2px 2px 0 0;border-radius:1px;transform:rotate(45deg)}
main.hm .hm-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
main.hm .hm-t b{font:600 17px/1.25 var(--jz-sans)}
main.hm .hm-t small{display:block;font:400 15px/1.35 var(--jz-sans);letter-spacing:0;color:var(--jz-muted)}
main.hm .hm-v{flex:none;font:400 17px/1 var(--jz-sans);color:var(--jz-muted);font-variant-numeric:tabular-nums}

/* icon tile: 32px, radius 27.5%, mint tint, 18px glyph, 1.75 stroke */
main.hm .hm-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--jz-r-icon);background:var(--jz-soft);box-shadow:none}
main.hm .hm-ic svg{width:18px;height:18px;fill:none;stroke:var(--jz-forest);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* a row whose real link must stay a bare <a> (tests compare it as written): the link fills the row */
main.hm .hm-link a{flex:1;color:var(--jz-ink);text-decoration:none}
main.hm .hm-link a::before{content:"";position:absolute;inset:0}

/* fold: a row that opens in place */
main.hm .hm-fold>summary{list-style:none}
main.hm .hm-fold>summary::-webkit-details-marker{display:none}
/* same chevron as a link row; it turns down when the row is open */
main.hm .hm-fold>summary::after{content:"";flex:none;width:8px;height:8px;margin:0 2px 0 var(--jz-s1);border:solid var(--hm-chev);border-width:2px 2px 0 0;border-radius:1px;transform:rotate(45deg);transition:transform var(--jz-ease)}
main.hm .hm-fold[open]>summary::after{margin-top:-4px;transform:rotate(135deg)}
main.hm .sr,main.hm .hm-t small.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main.hm .hm-foldbody{margin:0;padding:var(--jz-s2) var(--jz-s4) var(--jz-s5) 60px}
main.hm .hm-foldbody .btn{margin:var(--jz-s1) 0 var(--jz-s4)}

/* small print under a group: 15/400 muted, inset to the row text */
main.hm .hm-foot{margin:var(--jz-s3) var(--jz-s4) 0;font:400 15px/1.45 var(--jz-sans);color:var(--jz-muted)}
main.hm .hm-center{text-align:center}
main.hm .note,main.hm .hint{font-size:15px;line-height:1.45;color:var(--jz-muted)}

/* fields inside a padded group: quiet filled wells, not outlined boxes */
main.hm .hm-pad .field{font:600 15px/1.3 var(--jz-sans);color:var(--jz-ink)}
main.hm .hm-pad input:not([type=checkbox]):not([type=radio]):not([type=hidden]),main.hm .hm-foldbody input:not([type=checkbox]):not([type=hidden]),main.hm .hm-foldbody textarea{min-height:52px;border:0;border-radius:12px;background:var(--jz-field);font-family:var(--jz-sans);font-variant-numeric:tabular-nums}
main.hm .hm-pad input:focus,main.hm .hm-foldbody input:focus,main.hm .hm-foldbody textarea:focus{outline:2px solid var(--jz-forest);outline-offset:0;background:var(--jz-card)}


/* ================= More ================= */
/* every tool as one iOS row: icon, name, one short line, chevron. Same rows as Settings, so the two pages read as one family */
main.more .hm-tools{margin:0 0 var(--jz-s6)}
main.more .hm-tools .hm-row{min-height:64px;padding-top:10px;padding-bottom:10px}
main.more .hm-tools .hm-ic svg{width:20px;height:20px}
main.more .hm-tools .hm-t small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* add or remove: the last row, a forest plus and forest words, no different shape */
main.more .hm-me .hm-av{width:32px;height:32px;font-size:15px}
main.more .addtools .hm-ic{background:var(--jz-soft)}
main.more .addtools .hm-ic svg{stroke:var(--jz-forest);stroke-width:2.25}
main.more .addtools .hm-t b{color:var(--jz-forest)}
/* settings behind the firm's own initial, like the account row at the top of iOS Settings */
main.more .hm-me{min-height:64px;padding-top:10px;padding-bottom:10px}
main.more .hm-me .hm-t small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
main.more .hm-av{width:40px;height:40px;border-radius:50%;background:var(--jz-soft);color:var(--jz-forest-ink);font:700 17px/1 var(--jz-sans)}

/* ================= Settings ================= */
main.settings-page .hm-firm{display:flex;align-items:center;gap:var(--jz-s4);margin:0 0 var(--jz-s2);padding:var(--jz-s4);background:var(--jz-card);border-radius:var(--hm-r);box-shadow:var(--hm-shadow)}
main.settings-page .hm-mono{flex:none;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--jz-soft);color:var(--jz-forest-ink);font:700 24px/1 var(--jz-sans);letter-spacing:-.02em}
main.settings-page .hm-firm .hm-t b{font:700 20px/1.2 var(--jz-sans);letter-spacing:-.02em}
main.settings-page .hm-fold .hm-t small{margin-top:1px}
main.settings-page form>.hm-row{border-radius:0}
main.settings-page .danger-text,main.settings-page .danger-text .hm-t{justify-content:center;text-align:center;color:var(--jz-red);font-weight:600}
main.settings-page .danger-text::after{display:none}
/* your plan: read only, no prices; set as a quiet group */
main.settings-page .plancard{margin:0;padding:var(--jz-s4) var(--jz-s4) 0;border:0;border-radius:var(--hm-r);box-shadow:var(--hm-shadow)}
main.settings-page .plancard>b{display:block;font:700 20px/1.2 var(--jz-sans);letter-spacing:-.02em}
main.settings-page .plancard>.hint{margin:var(--jz-s1) 0 var(--jz-s3)}
main.settings-page .planextras{list-style:none;margin:0 calc(-1 * var(--jz-s4));padding:0}
main.settings-page .planextras li{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);min-height:52px;padding:0 var(--jz-s4);border-top:1px solid var(--hm-hair);font:400 17px/1.25 var(--jz-sans)}
main.settings-page .planextras em{flex:none;font:400 15px/1.2 var(--jz-sans);font-style:normal;color:var(--jz-muted)}
main.settings-page .planextras em.on{color:var(--jz-forest);font-weight:600}

/* ================= Your tools ================= */
main.tools .hm-pick{cursor:default}
main.tools .hm-pick::after{content:"";flex:none;width:7px;height:7px;margin:-4px 4px 0 0;border:solid var(--hm-chev);border-width:0 2px 2px 0;border-radius:1px;transform:rotate(45deg);pointer-events:none}
main.tools .hm-pick select[name]{flex:0 1 auto;width:auto;max-width:58%;min-height:44px;margin:0 -4px 0 0;padding:0 0 0 var(--jz-s2);border:0;background:none;font:400 17px/1.2 var(--jz-sans);color:var(--jz-muted);text-align:right;text-align-last:right;text-overflow:ellipsis}
main.tools .hm-pick select[name]:focus{outline:2px solid var(--jz-forest);outline-offset:2px;background-color:transparent}
main.tools .hm-also{margin:0;padding:0;border:0;min-width:0}
main.tools .hm-also legend.hm-sec{float:left;width:calc(100% - 32px);margin-top:var(--jz-s6)}
main.tools .hm-also legend+.hm-group{clear:both}
/* other work: on/off rows with the same iOS switch as the tools below (a round tick read as "pick one") */
main.tools .hm-check{cursor:pointer}
main.tools .hm-check .hm-t{font-weight:400}
main.tools .hm-group>.hm-check+.hm-check::before{left:var(--jz-s4)}
/* tool switches: two-line rows */
main.tools .switchrow{min-height:72px;padding-top:var(--jz-s3);padding-bottom:var(--jz-s3);cursor:pointer}
main.tools .switchrow .hm-t b{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
main.tools .switchrow:has(.switch:not(:checked)) .hm-ic{background:var(--jz-field)}
main.tools .switchrow:has(.switch:not(:checked)) .hm-ic svg{stroke:var(--jz-faint)}
main.tools .onbar{display:inline-flex;align-items:center;min-height:0;padding:2px 8px;border-radius:var(--jz-r-full);background:var(--jz-soft);color:var(--jz-forest-ink);font:600 13px/1.4 var(--jz-sans);letter-spacing:0;text-transform:none}
main.tools .switch{width:51px;height:31px;flex:none}
main.tools .switch::after{top:2px;left:2px;width:27px;height:27px}
main.tools .switch:checked::after{transform:translateX(20px)}
main.tools .usual{margin:var(--jz-s3) var(--jz-s4) 0;padding:0;background:none;border:0;font:400 15px/1.45 var(--jz-sans);color:var(--jz-muted)}
main.tools .usual b{color:var(--jz-ink);font-weight:600}
main.tools .hm-quiet{display:flex;margin:var(--jz-s4) auto 0;font:600 15px/1.2 var(--jz-sans);text-decoration:none}

/* ================= Alerts on your phone ================= */
main.phone-alerts .hm-steps{counter-reset:none}
main.phone-alerts .step{position:relative;display:flex;gap:var(--jz-s4);align-items:flex-start;margin:0;padding:var(--jz-s5) var(--jz-s4)}
main.phone-alerts .step+.step::before{content:"";position:absolute;top:0;left:60px;right:0;height:1px;background:var(--hm-hair)}
main.phone-alerts .step .num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--jz-soft);color:var(--jz-forest-ink);font:700 15px/1 var(--jz-sans);font-variant-numeric:tabular-nums}
main.phone-alerts .stepbody{flex:1;min-width:0}
main.phone-alerts .stepbody h3{margin:5px 0 var(--jz-s1);font:600 17px/1.3 var(--jz-sans);letter-spacing:-.01em}
main.phone-alerts .stepbody p{margin:0 0 var(--jz-s3);font-size:15px;line-height:1.45;color:var(--jz-muted)}
main.phone-alerts .stepbody p b{color:var(--jz-ink)}
main.phone-alerts .stepbody .note{margin:0;padding:0;background:none;border:0;font-size:15px;line-height:1.45;color:var(--jz-muted)}
main.phone-alerts .stepbody .btn{margin:var(--jz-s1) 0 0}
main.phone-alerts .asoon{display:flex;align-items:center;gap:var(--jz-s3);min-height:56px;margin:var(--jz-s2) 0 0;padding:var(--jz-s2) var(--jz-s3) var(--jz-s2) var(--jz-s4);border-radius:var(--jz-r-m);background:var(--jz-field)}
main.phone-alerts .asoon-t{flex:1;min-width:0;display:flex;flex-direction:column}
main.phone-alerts .asoon-t b{font:600 17px/22px var(--jz-sans);color:var(--jz-ink)}
main.phone-alerts .asoon-t small{font:400 15px/20px var(--jz-sans);color:var(--jz-muted)}
main.phone-alerts .asoon .switch:disabled{opacity:.55;cursor:not-allowed}
main.phone-alerts #ios-steps:not([hidden])+.andnote{display:none} /* re-check 1 Nov: iPhone sees its own steps only */
main.phone-alerts .hm-inline{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin:-8px 0 -12px;font:600 17px/1 var(--jz-sans);color:var(--jz-forest);text-decoration:none}
main.phone-alerts .hm-inline svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
/* a done step: a tick in the disc, and its button goes */
main.phone-alerts .step:has(#installed:not([hidden])) .btn{display:none}
main.phone-alerts .step:has(#installed:not([hidden])) .num{background:var(--jz-ok);color:#fff;font-size:0}
main.phone-alerts .step:has(#installed:not([hidden])) .num::after{content:"\2713";font:800 16px/1 var(--jz-sans)}
main.phone-alerts #installed{font-weight:600;color:var(--jz-ok)}
main.hm .hm-lock{display:flex;gap:var(--jz-s2);align-items:flex-start}
main.hm .hm-lock svg{flex:none;width:16px;height:16px;margin-top:3px;fill:none;stroke:var(--jz-faint);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ================= Send missed calls to Jeevz ================= */
main.setup .hm-num{margin:0 0 var(--jz-s2);padding:var(--jz-s6) var(--jz-s5);border-radius:28px}
main.setup .hm-num::before{display:none}
main.setup .hm-num small{display:block;font:400 15px/1.3 var(--jz-sans);color:var(--jz-night-muted)}
main.setup .hm-num .jznum{display:block;margin:var(--jz-s2) 0 var(--jz-s1);font:800 34px/1.1 var(--jz-sans);letter-spacing:-.02em;color:var(--jz-hero-num);font-variant-numeric:tabular-nums;word-break:break-all}
main.setup .hm-num p{margin:0;font-size:15px}
main.setup #divert-test .result{margin:0 0 var(--jz-s4);font:600 17px/1.35 var(--jz-sans)}
main.setup .hm-wait{display:flex;gap:var(--jz-s3);align-items:flex-start;padding:var(--jz-s4)}
main.setup .hm-wait b{display:block;margin:5px 0 var(--jz-s1);font:600 17px/1.3 var(--jz-sans)}
main.setup .hm-wait p{margin:0;font-size:15px;line-height:1.45;color:var(--jz-muted)}
main.setup .hm-guide{margin-top:var(--jz-s4)}
main.setup .hm-guide .hm-foldbody{padding-left:var(--jz-s4);font-size:15px;line-height:1.5;overflow-wrap:anywhere}
main.setup .guide h3,main.setup .guide h4{margin:var(--jz-s5) 0 var(--jz-s2);font:600 17px/1.3 var(--jz-sans)}
main.setup .guide code{font-family:var(--jz-sans);font-weight:600;font-variant-numeric:tabular-nums;padding:1px 6px;border-radius:6px;background:var(--jz-field)}

/* ================= Close your account ================= */
main.closing .plainsteps{counter-reset:s;margin:0;padding:var(--jz-s1) 0}
main.closing .plainsteps li{counter-increment:s;position:relative;display:flex;gap:var(--jz-s3);margin:0;padding:var(--jz-s3) var(--jz-s4);font:400 17px/1.4 var(--jz-sans)}
main.closing .plainsteps li::before{content:counter(s);flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--jz-field);font:600 15px/1 var(--jz-sans);font-variant-numeric:tabular-nums;color:var(--jz-ink)}
main.closing .plainsteps li+li{margin-top:0}
main.closing .hm-warn{display:flex;gap:var(--jz-s2);align-items:flex-start;margin:var(--jz-s4) var(--jz-s4) var(--jz-s6);font:600 15px/1.4 var(--jz-sans);color:var(--jz-red)}
main.closing .hm-warn svg{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
main.closing #close-form .hint{margin:calc(-1 * var(--jz-s2)) 0 var(--jz-s4)}
main.closing #close-form .btn.danger{margin-top:var(--jz-s2)}
main.closing .hm-doc section{position:relative;padding:var(--jz-s5) var(--jz-s4)}
main.closing .hm-doc section+section::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:1px;background:var(--hm-hair)}
main.closing .hm-doc h2{margin:0 0 var(--jz-s2);font:600 17px/1.3 var(--jz-sans);letter-spacing:-.01em}
main.closing .hm-doc p{margin:0;font-size:15px;line-height:1.5;color:var(--jz-muted)}

/* ================= Account closed ================= */
main.closed .hm-done{padding-top:var(--jz-s10)}
main.closed .hm-tick{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:var(--jz-s4);border-radius:50%;background:var(--jz-soft)}
main.closed .hm-tick svg{width:28px;height:28px;fill:none;stroke:var(--jz-forest);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
main.closed .hm-pad p{font-size:17px;line-height:1.5}
main.closed .hm-pad p:last-child{margin:0;font-size:15px;color:var(--jz-muted)}

/* ================= Log in ================= */
main.login.hm{padding:calc(48px + var(--jz-safe-t)) var(--jz-s6) calc(32px + var(--jz-safe-b));justify-content:center}
main.login .lhead{margin-bottom:var(--jz-s8)}
main.login .lmark{width:72px;height:72px}
main.login .lword{margin:var(--jz-s4) 0 var(--jz-s2);font:800 40px/1 var(--jz-sans);letter-spacing:-.045em}
main.login .lhead p{max-width:28ch;margin:0 auto;font-size:17px;line-height:1.4}
/* the two fields in one white group, iOS style: label on the left, what you type on the right, 56px rows */
main.login .lgroup{margin:0 0 var(--jz-s4);background:var(--jz-card);border-radius:var(--hm-r);box-shadow:var(--hm-shadow);overflow:hidden}
main.login .lgroup:focus-within{box-shadow:var(--hm-shadow),0 0 0 2px var(--jz-forest)}
main.login .lgroup label{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;min-height:56px;margin:0;padding:0 var(--jz-s4)}
main.login .lgroup label+label::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:1px;background:var(--hm-hair)}
main.login .lgroup span{font:600 17px/1.3 var(--jz-sans);color:var(--jz-ink)}
main.login .lgroup input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.switch){min-height:54px;padding:0;border:0;border-radius:0;background:transparent;font:400 17px/1.3 var(--jz-sans)}
main.login .lgroup input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not(.switch):focus{outline:0;background:transparent}
main.login .lgo{margin-top:var(--jz-s2)}
main.login .lfoot{margin-top:var(--jz-s5);font-size:15px}
main.login .lfoot+.lfoot{margin-top:var(--jz-s2)}
main.login .lfoot a{color:var(--jz-forest);font-weight:600;text-decoration:none}
/* art director judge 1: "Close your account" was a full-size green link under the form. It is a 13px muted footnote. */
main.login .lfoot.lfine{margin-top:var(--jz-s8);font-size:13px;line-height:1.4}
main.login .lfoot.lfine a{color:var(--jz-muted);font-weight:400;text-decoration:underline;text-underline-offset:2px}

/* tool glyphs from core/tools.py sit small in their box: give them 20px */
main.tools .switchrow .hm-ic svg{width:20px;height:20px}
main.tools .hm-pick .hm-t{flex:1 0 auto;white-space:nowrap}
main.tools .hm-pick select[name]{flex:0 1 auto;min-width:0}

/* ================= Website enquiries ================= */
main.siteform .field{display:block}
main.siteform .field code{font:inherit;font-weight:600}
main.siteform input#form-url{text-overflow:ellipsis;font-size:15px}
main.siteform textarea#form-snippet{resize:none;max-height:220px;font:400 13px/1.5 var(--jz-sans);color:var(--jz-muted)}
main.siteform .hm-copy{margin-top:var(--jz-s3)}
main.siteform .note:empty{display:none}
main.siteform p.note{padding:0;margin-left:0;margin-right:0;background:none;border:0}

/* ================= Team ================= */
/* people as rows: their initial in a round chip, the email, the role under it. Add a login is the last row, as on More */
main.team .hm-people .hm-row{min-height:64px;padding-top:10px;padding-bottom:10px}
main.team .hm-av{width:32px;height:32px;border-radius:50%;background:var(--jz-soft);color:var(--jz-forest-ink);font:700 15px/1 var(--jz-sans);text-transform:uppercase}
main.team .hm-people .hm-t small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
main.team .hm-people .hm-t b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
main.team .hm-people .hm-t strong{font-weight:600;color:var(--jz-red)}
main.team .hm-people .is-off .hm-t b{color:var(--jz-muted)}
main.team .addtools .hm-ic{background:var(--jz-soft)}
main.team .addtools .hm-ic svg{stroke:var(--jz-forest);stroke-width:2.25}
main.team .addtools .hm-t b{color:var(--jz-forest)}
/* what they can see: one choice, the picker's round tick on the right */
main.team .hm-role{min-height:64px;padding-top:10px;padding-bottom:10px}
main.team .hm-role input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
main.team .hm-role .hm-t b{font-weight:600}
/* the same round tick as the customer picker on New quote: an empty ring, then a filled forest circle with a white tick */
main.team .hm-role .hm-tick{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.75px rgba(23,33,29,.22)}
main.team .hm-role:has(input:checked) .hm-tick{background:var(--jz-forest);box-shadow:none}
main.team .hm-role:has(input:checked) .hm-tick::after{content:"";width:10px;height:5px;margin-top:-3px;border:solid #fff;border-width:0 0 2.25px 2.25px;transform:rotate(-45deg)}
main.team .hm-role:has(input:focus-visible){outline:2px solid var(--jz-forest);outline-offset:-2px}
main.team .hm-roles .hm-role+.hm-role::before{content:"";position:absolute;top:0;left:var(--jz-s4);right:0;height:1px;background:var(--hm-hair)}
main.team .hm-roles{margin-bottom:calc(var(--jz-s4) + var(--jz-s2))}
main.team .hm-roles+.jz-foot{margin-bottom:var(--jz-s6)}
/* member facts: label left, value right */
main.team .hm-facts .hm-row{cursor:default;font-weight:400}
main.team .hm-facts .hm-row+.hm-row::before{left:var(--jz-s4)}
main.team .hm-facts .hm-v{font-size:17px}
main.team .hm-facts+.sr+.err,main.team .hm-facts~form{margin-top:var(--jz-s6)}
main.team .hm-again{margin-top:var(--jz-s6)}
/* the one-time link: a quiet card, the link in a field that is easy to select */
main.team .hm-made b{display:block;font:600 17px/1.3 var(--jz-sans)}
main.team .hm-made p{margin:var(--jz-s1) 0 var(--jz-s3);font-size:15px;line-height:1.45;color:var(--jz-muted)}
main.team .hm-made input{width:100%;box-sizing:border-box;min-height:48px;padding:0 var(--jz-s3);border:0;border-radius:12px;background:var(--jz-field);font:400 15px/1.3 var(--jz-sans);text-overflow:ellipsis}
#app main.team .jz-lt.is-detail h1{font-size:24px;line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}

/* ================= pass 3 (art director, 1 Nov) ================= */

/* Settings: Your plan is a row in Account; open it to see what you have. Nothing you don't have is listed */
main.settings-page .hm-plan .plancard{margin:0;padding:0 var(--jz-s4) var(--jz-s3) 60px;background:none;border-radius:0;box-shadow:none}
main.settings-page .hm-plan .plancard>b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main.settings-page .hm-plan .plancard>.hint{margin:0;font:400 15px/1.4 var(--jz-sans);color:var(--jz-muted)}
main.settings-page .hm-plan .planextras{margin:var(--jz-s2) 0 0;padding:0}
main.settings-page .hm-plan .planextras:empty{display:none}
main.settings-page .hm-plan .planextras li{min-height:44px;padding:0;border-top:1px solid var(--hm-hair)}
/* the credit: sentence case, 12px, 24px under Close your account, centred */
#app main.settings-page .hm-pwr{margin:var(--jz-s6) 0 0;padding:0;font:400 12px/16px var(--jz-sans);text-align:center;color:var(--jz-faint)}



/* Team member: the person's initials and name head the page (the email only when there is no name).
   Destructive actions are rows in one group, red last, the same as Close your account in Settings. */
#app main.team .hm-person{display:flex;align-items:center;gap:var(--jz-s4)}
#app main.team .hm-person>div{min-width:0}
#app main.team .hm-person h1{overflow-wrap:anywhere}
#app main.team .hm-person .hm-mono{flex:none;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--jz-soft);color:var(--jz-forest-ink);font:700 20px/1 var(--jz-sans);letter-spacing:-.02em}
#app main.team .hm-person .hm-mono svg{width:26px;height:26px;fill:none;stroke:var(--jz-forest);stroke-width:1.75;stroke-linecap:round}
#app main.team .hm-acts{margin-bottom:0}
#app main.team .hm-acts .hm-row{text-align:left;cursor:pointer}
#app main.team .hm-acts .danger-text,#app main.team .hm-acts .danger-text .hm-t{color:var(--jz-red)}
#app main.team .hm-acts .danger-text .hm-ic{background:var(--jz-red-soft)}
#app main.team .hm-acts .danger-text .hm-ic svg{stroke:var(--jz-red)}
#app main.team .hm-acts+.jz-foot{margin-top:var(--jz-s3)}
#app main.team .hm-acts .hm-again{margin:0}
/* the day sits straight under the big card, so the first screen shows the day and not only counters */
main.tools{padding-bottom:calc(var(--jz-s6,24px) * 4)}

/* ================= Home (6 Nov rebuild: docs/redesign/{light,night}/home.html, home-clear.html, salon-home.html) =====
   main.hm.hm-home only. Composes the jz-* parts; every colour is a role token, so one rule draws both looks. The tiles
   keep their .stat / data-tile markup (core/test_today.py), drawn here as the late card, the lead card, rows and the
   "Jeevz wrote these" boxes. */
#app main.hm-home{padding:0 var(--jz-gutter) var(--jz-s8)}
#app main.hm-home b{font-weight:inherit}
#app main.hm-home .hm-hello{padding:var(--jz-s2) var(--jz-s1) var(--jz-s5)}
#app main.hm-home .hm-hello .jz-headline{margin-top:var(--jz-s2);font-size:var(--jz-t-display)}
#app main.hm-home .hm-hello .jz-lede{margin:var(--jz-s2) 0 0}
#app main.hm-home .hm-sec{margin:var(--jz-s7) var(--jz-s1) var(--jz-s3);font:700 var(--jz-t-h2)/1.1 var(--jz-display);letter-spacing:var(--jz-track-h2);color:var(--jz-ink)}
#app main.hm-home .jz-sechead{margin:var(--jz-s7) var(--jz-s1) var(--jz-s3)}
#app main.hm-home .hm-dz>.jz-danger{margin-bottom:14px}
#app main.hm-home .jz-danger .jz-btn+form{margin-top:10px}
/* the sr-only parts of a tile: its label and count stay for screen readers and tests where the card says it in words */
#app main.hm-home .hm-late>:is(small,b),#app main.hm-home .hm-dayhead>:is(small:nth-of-type(2),b),#app main.hm-home .stat.hero:not(.hm-late):not(.hm-dayhead)>small:nth-of-type(2){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the clock strip (timesheets/_home_clock.html): a quiet surface row with a live dot, the time in Cabinet */
#app main.hm-home .ts-homeclock{min-height:72px;margin:0 0 14px;padding:12px 18px;border-radius:var(--jz-r-inner);background:var(--jz-surface);color:var(--jz-ink);box-shadow:var(--jz-shadow)}
#app main.hm-home .ts-homeclock .ts-hc-dot{width:12px;height:12px;background:var(--jz-done);box-shadow:0 0 0 4px color-mix(in srgb,var(--jz-done) 25%,transparent)}
#app main.hm-home .ts-homeclock.is-due .ts-hc-dot{background:var(--jz-late-fill);box-shadow:0 0 0 4px color-mix(in srgb,var(--jz-late-fill) 30%,transparent)}
#app main.hm-home .ts-homeclock .ts-hc-t b{font:600 18px/1.25 var(--jz-sans)}
#app main.hm-home .ts-homeclock .ts-hc-t small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app main.hm-home .ts-homeclock .ts-hc-v{font:800 26px/1 var(--jz-display);letter-spacing:-.03em;color:var(--jz-ink)}
#app main.hm-home .ts-homeclock svg{stroke:var(--jz-ink-2)}

/* the lead card (any busy tile but late money): a card with the reason as a chip, the count as the hero number */
#app main.hm-home .stat.hero{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"lbl lbl" "n says" "amt amt" "who who" "go go";column-gap:12px;align-items:baseline;margin:0 0 14px;padding:var(--jz-s5);border:0;border-radius:var(--jz-r-card);background:var(--jz-surface);color:var(--jz-ink);box-shadow:var(--jz-shadow);text-decoration:none;text-align:left;overflow:hidden;isolation:auto;animation:jz-rise var(--jz-dur-rise) var(--jz-ease-out) both;animation-delay:calc(2 * var(--jz-stagger))}
#app main.hm-home .stat.hero::before,#app main.hm-home .stat.hero::after{content:none}
#app main.hm-home .stat.hero:active{transform:scale(.99)}
#app main.hm-home .stat.hero>small:first-child{grid-area:lbl;justify-self:start;display:inline-flex;align-items:center;min-height:36px;margin:0 0 14px;padding:0 14px;border-radius:var(--jz-r-full);box-shadow:inset 0 0 0 1.5px var(--jz-chev);font:600 var(--jz-t-chip)/1 var(--jz-sans);color:var(--jz-ink)}
#app main.hm-home .stat.hero>b{grid-area:n;margin:0;font:800 var(--jz-t-hero)/.9 var(--jz-display);letter-spacing:var(--jz-track-num);font-variant-numeric:tabular-nums;color:var(--jz-ink);-webkit-text-fill-color:currentColor;background:none}
#app main.hm-home .stat.hero .hm-says{grid-area:says;font:700 22px/1.15 var(--jz-display);letter-spacing:-.015em;color:var(--jz-ink)}
#app main.hm-home .stat.hero .hm-amt{grid-area:amt;margin-top:var(--jz-s3);font-size:48px;color:var(--jz-ink)}
#app main.hm-home .stat.hero:has(.hm-amt){grid-template-areas:"lbl lbl" "amt amt" "n says" "who who" "go go"}
#app main.hm-home .stat.hero:has(.hm-amt) .hm-amt{margin:0 0 var(--jz-s2)}
#app main.hm-home .stat.hero:has(.hm-amt)>b,#app main.hm-home .stat.hero:has(.hm-amt) .hm-says{font:600 var(--jz-t-body)/1.3 var(--jz-sans);letter-spacing:0}
#app main.hm-home .stat.hero .hm-who{grid-area:who;margin-top:var(--jz-s2);font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app main.hm-home .stat.hero .go{grid-area:go;margin-top:18px;width:100%}
#app main.hm-home .stat.hero .go .jz-ic{width:21px;height:21px}

/* late money: the amber card. Light: white with the amber edge bar; night: paper with the amber band (tokens) */
#app main.hm-home .stat.hero.hm-late{display:block;padding:calc(var(--jz-s5) + var(--jz-band)) var(--jz-s5) var(--jz-s5) calc(var(--jz-s5) + var(--jz-late-bar) - 2px);background:var(--jz-surface)}
#app main.hm-home .stat.hero.hm-late::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:var(--jz-late-bar);border-radius:0 var(--jz-r-s) var(--jz-r-s) 0;background:var(--jz-late-edge)}
#app main.hm-home .stat.hero.hm-late::after{content:"";position:absolute;left:0;right:0;top:0;width:auto;height:var(--jz-band);border-radius:0;background:var(--jz-late-fill);opacity:1;filter:none;z-index:auto}
#app main.hm-home .hm-late>.jz-rowline{margin:14px 0 4px}
#app main.hm-home .hm-late .jz-grow{display:flex;flex-direction:column;gap:2px}
#app main.hm-home .hm-late .jz-title{display:block;font:700 var(--jz-t-card)/1.12 var(--jz-display)}
#app main.hm-home .hm-late .jz-amt{font:800 52px/.92 var(--jz-display);letter-spacing:var(--jz-track-num);font-variant-numeric:tabular-nums;color:var(--jz-late);white-space:nowrap}
#app main.hm-home .hm-late .jz-jnote{margin:16px 0 0}
#app main.hm-home .hm-late .go{margin-top:18px}

/* the day's diary: the bookings tile is its heading row, then one row per visit, the time in Cabinet */
#app main.hm-home .hm-diary{margin:0 0 14px}
#app main.hm-home .stat.hero.hm-dayhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--jz-s3);margin:var(--jz-s2) var(--jz-s1) var(--jz-s3);padding:0;background:none;box-shadow:none;border-radius:0;overflow:visible;animation:none}
#app main.hm-home .stat.hero.hm-dayhead>small:first-child{margin:0;padding:0;min-height:0;box-shadow:none;font:700 var(--jz-t-h2)/1.1 var(--jz-display);letter-spacing:var(--jz-track-h2);color:var(--jz-ink)}
#app main.hm-home .hm-dayhead>small:first-child{white-space:nowrap}
#app main.hm-home .hm-dayhead .go{flex:none;width:auto;background:none;box-shadow:none;border-radius:var(--jz-r-full);display:inline-flex;align-items:center;gap:2px;min-height:48px;margin:-12px -6px -12px 0;padding:0 6px;font:600 var(--jz-t-meta)/1 var(--jz-sans);color:var(--jz-forest)}
#app main.hm-home .hm-dayhead .go .jz-ic{width:18px;height:18px}
#app main.hm-home .hm-visit{gap:16px}
#app main.hm-home .hm-visit time{flex:none;min-width:64px;font-size:22px;color:var(--jz-ink)}
#app main.hm-home .hm-visit.is-next{background:var(--jz-wash)}
#app main.hm-home .hm-visit.is-next time{color:var(--jz-forest)}
#app main.hm-home .hm-visit.is-next .jz-li-t b::after{content:" · next";font-weight:600;color:var(--jz-forest)}
#app main.hm-home .hm-visit.is-more time,#app main.hm-home .hm-visit.is-more b{color:var(--jz-forest)}
#app main.hm-home .hm-visit>.jz-ic{flex:none;width:20px;height:20px;color:var(--jz-ink-2)}
#app main.hm-home .hm-sec-go{display:inline-flex;align-items:center;min-height:48px;margin:-12px 0;font:600 var(--jz-t-meta)/1 var(--jz-sans);color:var(--jz-forest);text-decoration:none}

/* Next up and the rest: one card of rows, an icon in a round tile, the count on the right in Cabinet */
#app main.hm-home .hm-group{margin:0 0 14px;padding:0;background:var(--jz-surface);border-radius:var(--jz-r-card);box-shadow:var(--jz-shadow);overflow:hidden}
#app main.hm-home .hm-next .stat,#app main.hm-home .hm-restbody .stat{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto 20px;grid-template-areas:"ic lbl n ch" "ic nt n ch";column-gap:14px;align-items:center;min-height:var(--jz-row);margin:0;padding:12px 18px;background:none;border:0;border-radius:0;box-shadow:none;color:var(--jz-ink);text-decoration:none}
#app main.hm-home .hm-next .stat:active,#app main.hm-home .hm-restbody .stat:active{background:var(--jz-press)}
#app main.hm-home .hm-next .stat+.stat::before,#app main.hm-home .hm-restbody .stat+.stat::before{content:"";position:absolute;top:0;left:18px;right:18px;height:1.5px;background:var(--jz-hair)}
#app main.hm-home .hm-next .stat>small:first-child,#app main.hm-home .hm-restbody .stat>small:first-child{grid-area:lbl;grid-row:1/3;font:600 18px/1.25 var(--jz-sans);letter-spacing:-.01em;color:var(--jz-ink)}
#app main.hm-home .hm-next .stat>b,#app main.hm-home .hm-restbody .stat>b{grid-area:n;margin:0;font:800 24px/1 var(--jz-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--jz-ink)}
#app main.hm-home .hm-next .stat>small:nth-of-type(2),#app main.hm-home .hm-restbody .stat>small:nth-of-type(2){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#app main.hm-home .hm-next .stat:is([data-tile=owed],[data-tile=overdue])>small:first-child{grid-row:1;align-self:end}
#app main.hm-home .hm-next .stat:is([data-tile=owed],[data-tile=overdue])>small:nth-of-type(2){position:static;width:auto;height:auto;clip:auto;grid-area:nt;align-self:start;margin-top:3px;font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app main.hm-home .hm-next .stat.risk>b{color:var(--jz-late)}
#app main.hm-home .hm-next .hm-ic{grid-area:ic;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--jz-surface-2)}
#app main.hm-home .hm-next .hm-ic svg{width:24px;height:24px;fill:none;stroke:var(--jz-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#app main.hm-home .hm-next .stat.risk .hm-ic{background:var(--jz-late-fill)}
#app main.hm-home .hm-next .stat.risk .hm-ic svg{stroke:var(--jz-on-late)}
#app main.hm-home .hm-next .stat::after,#app main.hm-home .hm-restbody .stat::after{content:"";grid-area:ch;justify-self:end;width:9px;height:9px;border:solid var(--jz-ink-2);border-width:2.4px 2.4px 0 0;border-radius:1px;transform:rotate(45deg)}
#app main.hm-home .hm-restbody .stat{grid-template-columns:minmax(0,1fr) auto 20px;grid-template-areas:"lbl n ch" "lbl n ch";min-height:64px}
#app main.hm-home .hm-restbody .stat.zero>b{color:var(--jz-ink-2);font-weight:700}
#app main.hm-home .hm-rest{margin:var(--jz-s7) 0 14px}
#app main.hm-home .hm-rest>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3);min-height:56px;margin:0;padding:0 18px;border-radius:var(--jz-r-full);background:var(--jz-surface-2);box-shadow:none;font:600 var(--jz-t-meta)/1.3 var(--jz-sans);color:var(--jz-ink);white-space:nowrap;cursor:pointer}
#app main.hm-home .hm-rest>summary::before{content:none}
#app main.hm-home .hm-rest>summary::-webkit-details-marker{display:none}
#app main.hm-home .hm-rest>summary span{display:inline-flex;align-items:center;gap:8px;font:600 var(--jz-t-meta)/1 var(--jz-sans);color:var(--jz-forest)}
#app main.hm-home .hm-rest>summary span::after{content:"";width:8px;height:8px;margin-top:-4px;border:solid currentColor;border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}
#app main.hm-home .hm-rest[open]>summary span{font-size:0}
#app main.hm-home .hm-rest[open]>summary span::before{content:"Hide";font:600 var(--jz-t-meta)/1 var(--jz-sans)}
#app main.hm-home .hm-rest[open]>summary span::after{margin-top:4px;transform:rotate(-135deg)}
#app main.hm-home .hm-rest .hm-restbody{margin:10px 0 0}
#app main.hm-home .hm-list+.hm-rest{margin-top:-4px}

/* what Jeevz wrote: the J mark, then one box per tile (count in Cabinet, the words under it) */
#app main.hm-home .hm-jdid{margin-top:var(--jz-s6)}
#app main.hm-home .hm-jhead{display:flex;align-items:center;gap:12px}
#app main.hm-home .hm-jhead .jz-title{font-size:22px}
#app main.hm-home .hm-jhead .jz-meta{margin:2px 0 0}
#app main.hm-home .hm-jstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin:16px 0 0}
#app main.hm-home .hm-jstats .stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;min-height:104px;margin:0;padding:14px;border-radius:var(--jz-r-inner);background:var(--jz-surface-2);box-shadow:none;color:var(--jz-ink);text-decoration:none}
#app main.hm-home .hm-jstats .stat:active{transform:scale(.97)}
#app main.hm-home .hm-jstats .stat>b{font:800 40px/.95 var(--jz-display);letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--jz-ink)}
#app main.hm-home .hm-jstats .stat>small:first-child{font:600 var(--jz-t-meta)/1.25 var(--jz-sans);color:var(--jz-ink)}
#app main.hm-home .hm-jstats .stat>small:nth-of-type(2){display:none}

/* also waiting: the same rows as Next up (core/_go.html), a late one with a red tile and a word */
#app main.hm-home .hm-also .jz-go,#app main.hm-home .hm-setup .jz-go{gap:14px;min-height:84px;padding:14px 18px}
#app main.hm-home :is(.hm-also,.hm-setup) .jz-go+.jz-go::before{content:"";position:absolute;top:0;left:18px;right:18px;height:1.5px;background:var(--jz-hair)}
#app main.hm-home :is(.hm-also,.hm-setup) .jz-go:active{background:var(--jz-press)}
#app main.hm-home :is(.hm-also,.hm-setup) .jz-go-ic{width:52px;height:52px;border-radius:50%;background:var(--jz-surface-2)}
#app main.hm-home :is(.hm-also,.hm-setup) .jz-go-ic svg{width:24px;height:24px;stroke:var(--jz-ink);stroke-width:2}
#app main.hm-home :is(.hm-also,.hm-setup) .jz-go-t{gap:3px}
#app main.hm-home :is(.hm-also,.hm-setup) .jz-go-t b{font:600 18px/1.25 var(--jz-sans);letter-spacing:-.01em}
#app main.hm-home :is(.hm-also,.hm-setup) .jz-go-t small{font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2);white-space:normal}
#app main.hm-home :is(.hm-also,.hm-setup) .jz-go-chev{width:20px;height:20px;stroke:var(--jz-ink-2);stroke-width:2.4}
#app main.hm-home .hm-also .jz-go.is-risk .jz-go-ic{background:var(--jz-chip-danger)}
#app main.hm-home .hm-also .jz-go.is-risk .jz-go-ic svg{stroke:var(--jz-on-chip-danger)}
#app main.hm-home .hm-also .jz-go.is-risk .jz-go-t b{color:var(--jz-danger)}

/* coming up: legal dates as cards, a ring of the days left out of 30 */
#app main.hm-home .hm-soon{margin-bottom:14px}
#app main.hm-home .hm-soonc{display:flex;flex-direction:column;gap:4px;margin:0;padding:18px;color:var(--jz-ink)}
#app main.hm-home .hm-soonc:only-child{grid-column:1/-1;display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;align-content:center}
#app main.hm-home .hm-soonc:only-child .jz-ring{grid-row:1/3}
#app main.hm-home .hm-soonc:only-child>b{align-self:end;margin-top:0}
#app main.hm-home .hm-soonc>b{margin-top:10px;font:600 18px/1.2 var(--jz-sans)}
#app main.hm-home .hm-soonc .jz-ring-in .jz-num{font-size:30px}

/* the calm screen: the full ring (a tick drawn in the today fill) beside "All clear. Back to work." */
#app main.hm-home .hm-calm{display:flex;align-items:center;gap:20px;margin:var(--jz-s4) 0 0}
#app main.hm-home .hm-calm .jz-ring-in{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:var(--jz-now-bg);color:var(--jz-now-fg)}
#app main.hm-home .hm-calm .jz-ring-in .jz-ic{width:44px;height:44px;stroke-width:3;stroke-dasharray:40;animation:jz-draw .6s .5s var(--jz-ease-out) both}
#app main.hm-home .hm-calm .jz-headline{font-size:44px}
#app main.hm-home .hm-calm-b{margin:6px 0 0;font:700 var(--jz-t-h2)/1.15 var(--jz-display);color:var(--jz-ink)}
#app main.hm-home .hm-calm+.jz-lede{margin:var(--jz-s5) var(--jz-s1) 0}
#app main.hm-home .jz-lock{margin:var(--jz-s7) 0 0}


/* Step 6: the first visit after the first run leads with the first enquiry (core/today.py first_enquiry). Night: a
   paper island, as the prototype's enquiry card (docs/redesign/first-run). */
#app main.hm-home .hm-first{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:20px;border-radius:30px;margin:0 0 var(--jz-s4);text-decoration:none;color:var(--jz-ink)}
#app main.hm-home .hm-first .jz-card-top{display:flex;align-items:center;gap:8px;margin:0 0 14px}
#app main.hm-home .hm-first-new{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:999px;background:#06100c;color:#c6ff5e;font:700 14px/32px var(--jz-sans)}
#app main.hm-home .hm-first-new i{width:8px;height:8px;border-radius:50%;background:#c6ff5e;animation:hm-pulse 1.4s infinite}
@keyframes hm-pulse{50%{opacity:.25}}
#app main.hm-home .hm-first .jz-card-top .jz-meta{font-weight:700}
#app main.hm-home .hm-first .jz-name{display:block}
#app main.hm-home .hm-first>.jz-meta{display:block;margin-top:4px;font-weight:600}
#app main.hm-home .hm-first .jz-say{display:block;margin-top:12px;font-weight:600;font-size:20px;line-height:1.3}
#app main.hm-home .hm-first .jz-jnote{margin-top:14px;color:var(--jz-ink-2);font-weight:600}
#app main.hm-home .hm-first .jz-btn{margin-top:16px;width:100%;min-height:62px}
@media (prefers-reduced-motion:reduce){#app main.hm-home .hm-first-new i{animation:none}}
#app main.hm-home .hm-first-promise{display:flex;gap:10px;align-items:center;margin-top:14px;padding:12px 14px;border-radius:16px;background:#06100c;color:#ffd0c0;font:700 16px/1.3 var(--jz-sans)}
#app main.hm-home .hm-first-promise svg{width:22px;height:22px;flex:none;stroke:currentColor;fill:none}

/* ================= Q7b: Home without the header bar, Night salon strip, Night All clear =================
   Home has no top bar (today.html empties base.html's topbar block): the date, the firm and the J mark (Settings) sit
   in the greeting, as in every Home mockup. A difference between the looks is a home token (--hm-*), set once for
   light and once for night; the [data-theme=dark] block and the auto-on-a-dark-phone block stay identical
   (core/test_home_q7b.py checks). Night salon: today's appointments as a strip of tiles above the danger card
   (night/salon-home.html), and the list below hides. Night All clear: the gradient card with the ink tick tile
   (night/home-clear.html). Light keeps the list and the ring (light/salon-home.html, light/home-clear.html). */
#app main.hm-home{
  --hm-strip:none; --hm-diary:block;
  --hm-calm-bg:none; --hm-calm-pad:0px; --hm-calm-r:0px; --hm-calm-ink:var(--jz-ink); --hm-calm-lede:var(--jz-ink-2);
  --hm-calm-in:96px; --hm-calm-in-r:50%; --hm-calm-in-bg:var(--jz-now-bg); --hm-calm-in-fg:var(--jz-now-fg);
  --hm-calm-svg:block; --hm-calm-ring:132px; --hm-calm-em-fg:var(--jz-em-fg); --hm-calm-em-fill:var(--jz-em-fill);
  --hm-calm-cols:132px minmax(0,1fr); --hm-calm-areas:"ring t" "l l"; --hm-calm-h:44px; --hm-calm-shadow:none;
  --hm-calm-lede-m:var(--jz-s5) var(--jz-s1) 0; --hm-calm-lede-w:500; --hm-calm-rgap:0px; --hm-calm-b:700 var(--jz-t-h2)/1.15 var(--jz-display)}
[data-theme=dark] #app main.hm-home{
  --hm-strip:grid; --hm-diary:none;
  --hm-calm-bg:var(--jz-accent); --hm-calm-pad:28px 24px 26px; --hm-calm-r:var(--jz-r-card); --hm-calm-ink:#06100c; --hm-calm-lede:#14281f;
  --hm-calm-in:96px; --hm-calm-in-r:30px; --hm-calm-in-bg:#06100c; --hm-calm-in-fg:#c6ff5e;
  --hm-calm-svg:none; --hm-calm-ring:96px; --hm-calm-em-fg:#06100c; --hm-calm-em-fill:none;
  --hm-calm-cols:minmax(0,1fr); --hm-calm-areas:"ring" "t" "l"; --hm-calm-h:48px; --hm-calm-shadow:0 18px 40px -18px rgba(124,247,212,.45);
  --hm-calm-lede-m:12px 0 0; --hm-calm-lede-w:600; --hm-calm-rgap:22px; --hm-calm-b:800 36px/1 var(--jz-display)}
@media (prefers-color-scheme:dark){
[data-theme=auto] #app main.hm-home{
  --hm-strip:grid; --hm-diary:none;
  --hm-calm-bg:var(--jz-accent); --hm-calm-pad:28px 24px 26px; --hm-calm-r:var(--jz-r-card); --hm-calm-ink:#06100c; --hm-calm-lede:#14281f;
  --hm-calm-in:96px; --hm-calm-in-r:30px; --hm-calm-in-bg:#06100c; --hm-calm-in-fg:#c6ff5e;
  --hm-calm-svg:none; --hm-calm-ring:96px; --hm-calm-em-fg:#06100c; --hm-calm-em-fill:none;
  --hm-calm-cols:minmax(0,1fr); --hm-calm-areas:"ring" "t" "l"; --hm-calm-h:48px; --hm-calm-shadow:0 18px 40px -18px rgba(124,247,212,.45);
  --hm-calm-lede-m:12px 0 0; --hm-calm-lede-w:600; --hm-calm-rgap:22px; --hm-calm-b:800 36px/1 var(--jz-display)}
}

/* the greeting carries what the bar did: date, firm, and the J mark (or the firm's own tile) opening Settings */
#app main.hm-home .hm-hello{padding-top:calc(var(--jz-safe-t) + var(--jz-s4))}
#app main.hm-home .hm-top{display:flex;align-items:center;justify-content:space-between;gap:var(--jz-s3)}
#app main.hm-home .hm-top-t{min-width:0}
#app main.hm-home .hm-top .jz-over{margin:0}
#app main.hm-home .hm-firm{margin:2px 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 var(--jz-t-body)/1.25 var(--jz-sans);color:var(--jz-ink)}
#app main.hm-home .hm-me{flex:none;display:grid;place-items:center;width:56px;height:56px;margin:-4px -4px -4px 0;border-radius:var(--jz-r-inner);text-decoration:none;transition:transform var(--jz-dur-press) var(--jz-ease-out)}
#app main.hm-home .hm-me:active{transform:scale(.94)}
#app main.hm-home .hm-me .jz-mark{border-radius:14px;box-shadow:0 8px 22px -10px rgba(124,247,212,.7)}
#app main.hm-home .hm-flogo{display:grid;place-items:center;width:48px;height:48px;overflow:hidden;border-radius:14px;background:var(--brand,var(--jz-ink));color:var(--on-brand,var(--jz-on-ink,#fff));font:700 20px/1 var(--jz-sans);box-shadow:0 0 0 1.5px var(--jz-edge)}
#app main.hm-home .hm-flogo:has(img){width:auto;min-width:48px;max-width:136px;padding:0 10px;box-sizing:border-box;background:#fff}
#app main.hm-home .hm-flogo img{display:block;width:auto;max-width:100%;height:30px;object-fit:contain}
#app main.hm-home .hm-hello .jz-headline{margin-top:var(--jz-s5)}

/* Night salon: the day as four tiles, the next one a paper island, the last opening the day */
#app main.hm-home .hm-strip{display:var(--hm-strip);grid-auto-flow:column;grid-auto-columns:minmax(84px,1fr);gap:6px;margin:0 -8px 14px;overflow-x:auto;scrollbar-width:none}
#app main.hm-home .hm-strip::-webkit-scrollbar{display:none}
#app main.hm-home .hm-ap{display:flex;flex-direction:column;min-height:132px;padding:12px 10px;border-radius:var(--jz-r-inner);background:var(--jz-surface);box-shadow:inset 0 0 0 1.5px var(--jz-edge);color:var(--jz-ink);text-decoration:none;transition:transform var(--jz-dur-press) var(--jz-ease-out)}
#app main.hm-home .hm-ap:active{transform:scale(.97)}
#app main.hm-home .hm-ap time{font:800 21px/1 var(--jz-display);letter-spacing:-.03em}
#app main.hm-home .hm-ap b{margin-top:10px;font:700 var(--jz-t-body)/1.15 var(--jz-sans);overflow-wrap:anywhere}
#app main.hm-home .hm-ap small{margin-top:4px;font:500 var(--jz-t-label)/1.25 var(--jz-sans);color:var(--jz-ink-2)}
#app main.hm-home .hm-ap.is-next{background:#f4f5f2;box-shadow:none;color:#06100c}
#app main.hm-home .hm-ap.is-next small{color:#3d4842}
#app main.hm-home .hm-ap em{margin-top:auto;padding-top:10px;font:700 var(--jz-t-label)/1.2 var(--jz-sans);font-style:normal;color:#306d55}
#app main.hm-home .hm-ap.is-more{background:transparent;box-shadow:none;border:1.5px dashed #46505a}
#app main.hm-home .hm-ap.is-more time{display:flex;align-items:center;min-height:21px;color:var(--jz-forest)}
#app main.hm-home .hm-ap.is-more time .jz-ic{width:22px;height:22px}
#app main.hm-home .hm-ap.is-more small{margin-top:auto}
#app main.hm-home.is-salon .hm-diary{display:var(--hm-diary)}

/* All clear: light keeps the ring beside the words; Night is the gradient card with the ink tick tile */
#app main.hm-home .hm-calm{display:grid;grid-template-columns:var(--hm-calm-cols);grid-template-areas:var(--hm-calm-areas);align-items:center;column-gap:20px;row-gap:var(--hm-calm-rgap);padding:var(--hm-calm-pad);border-radius:var(--hm-calm-r);background:var(--hm-calm-bg);box-shadow:var(--hm-calm-shadow);color:var(--hm-calm-ink)}
#app main.hm-home .hm-calm>.jz-ring{grid-area:ring;width:var(--hm-calm-ring)!important;height:var(--hm-calm-ring)!important}
#app main.hm-home .hm-calm>.jz-ring>svg{display:var(--hm-calm-svg)}
#app main.hm-home .hm-calm .jz-ring-in{width:var(--hm-calm-in);height:var(--hm-calm-in);border-radius:var(--hm-calm-in-r);background:var(--hm-calm-in-bg);color:var(--hm-calm-in-fg)}
#app main.hm-home .hm-calm .jz-ring-in .jz-ic{width:50px;height:50px}
#app main.hm-home .hm-calm-t{grid-area:t;min-width:0}
#app main.hm-home .hm-calm .jz-headline{font-size:var(--hm-calm-h);color:var(--hm-calm-ink)}
#app main.hm-home .hm-calm .jz-headline em{color:var(--hm-calm-em-fg);background:var(--hm-calm-em-fill);-webkit-background-clip:text;background-clip:text}
#app main.hm-home .hm-calm .hm-calm-b{font:var(--hm-calm-b);letter-spacing:-.025em;color:var(--hm-calm-ink)}
#app main.hm-home .hm-calm>.jz-lede{grid-area:l;margin:var(--hm-calm-lede-m);color:var(--hm-calm-lede);font-weight:var(--hm-calm-lede-w)}

/* Polish (8 Nov): a wide wordmark (Ashdene's is 120x32) was squeezed into the 56px square link, so it drew 36px wide
   and read as a speck. A logo tile now sizes to its logo: 48px tall, the logo 34px tall and up to 150px wide.
   A square logo still sits in the 48px square. */
#app main.hm-home .hm-me:has(.hm-flogo img){width:auto;max-width:176px;margin-right:0}
#app main.hm-home .hm-flogo:has(img){max-width:172px;padding:0 10px}
#app main.hm-home .hm-flogo img{height:34px;max-width:150px}
#app main.hm-home .hm-top-t{min-width:0}