/* cybee v3 · S5 the menu bar (prefix cy-mb, section id on-your-mac kept). Step 4 of the step by step pass (29 Sep 2026, Kristian chose B
   from qa/options/step4/): "On your Mac" became the menu bar section: the icon in a Mac menu bar, the card it opens, four clickable
   states and how it works in three lines; the privacy facts are one line with a link to /security. Facts: FACTS §4 menu bar, DS §19,
   docs/assistant; every card text is already on the site (/product, /docs/protection, /docs/hardening, /product/training).
   Before: _cybee-redesign-2026-09-26/snapshots/steps/step4-menubar-before/. */

.mac{background:var(--s-raised)}
.mac .cy-fade{color:var(--s-ink-3)}

/* the DS menu bar card and its small buttons (css/components.css 19d and .cy-mbtn, which the landing does not load) */
.cy-mbtn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;border-radius:10px;background:#2757C9;color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  font-size:calc(14px + var(--pg-mock-bump));font-weight:500;line-height:1;white-space:nowrap}
.cy-mbtn--quiet{background:rgba(0,0,0,.05);color:#151515;box-shadow:none}
/* ------------------------------------------------------------------- 19d a Mac screen with the menu bar card (.cy-mframe + .cy-mcard), DS SUR 178 to 217 */
.cy-mframe{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:22px;box-shadow:0 0 0 1px var(--pg-rule);background:#B8BABF;color:#151515;font-family:var(--font-body);isolation:isolate}
.cy-mframe>.cy-photo{position:absolute;inset:0;z-index:0}
.cy-mframe>.cy-photo picture{display:block;width:100%;height:100%}
.cy-mframe__bar{position:absolute;top:0;left:0;right:0;z-index:1;box-sizing:border-box;height:26px;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 14px;
  background:rgba(255,255,255,.28);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:#151515;font-size:calc(13px + var(--pg-mock-bump));font-weight:500;line-height:1;white-space:nowrap}
.cy-mframe__key{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:22px;border-radius:6px;background:rgba(255,255,255,.72)}
.cy-mframe__key .cybee-emblem{--cy-emblem-height:13px;--wordmark:#2757C9}
.cy-mcard{position:absolute;z-index:2;right:16px;bottom:16px;box-sizing:border-box;width:320px;max-width:calc(100% - 32px);padding:14px;display:grid;gap:12px;border-radius:14px;
  background:rgba(246,246,248,.94);-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);
  box-shadow:0 0 0 1px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.8),0 24px 60px -18px rgba(0,0,0,.5);color:#151515;line-height:1.3;container:cy-mcard/inline-size}
.cy-mcard--left{right:auto;left:16px}
.cy-mcard--top{bottom:auto;top:42px}
.cy-mcard__head{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:12px;row-gap:1px;align-items:baseline}
.cy-mcard__hex{--hex-w:30px;grid-row:1/span 2;align-self:center}
.cy-mcard__state{font-size:calc(15px + var(--pg-mock-bump));font-weight:500}
.cy-mcard__name{justify-self:end;font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));color:#515154;white-space:nowrap}
.cy-mcard__sub{grid-column:2/-1;font-size:calc(13px + var(--pg-mock-bump));color:#515154}
.cy-mcard__line{font-size:calc(14px + var(--pg-mock-bump));line-height:1.4;color:#151515;text-wrap:pretty}
.cy-mcard__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cy-mcard__tile{display:grid;gap:1px;padding:10px 12px;background:rgba(0,0,0,.04)}
.cy-mcard__tile-l{font-size:calc(13px + var(--pg-mock-bump));color:#515154}
.cy-mcard__tile-v{font-size:calc(15px + var(--pg-mock-bump));font-weight:500;font-feature-settings:"tnum"}
.cy-mcard__btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cy-mcard__btns .cy-mbtn{height:32px;font-size:calc(14px + var(--pg-mock-bump))}
@container cy-mcard (max-width:279px){.cy-mcard__hex{grid-row:1/span 3}.cy-mcard__name{grid-row:3;grid-column:2/-1;justify-self:start}}
@media (max-width:1279px){.cy-mcard{right:12px;bottom:12px}.cy-mcard--left{left:12px}}
@media (max-width:519px){.cy-mframe{aspect-ratio:auto;height:460px}.cy-mcard,.cy-mcard--left{left:12px;right:12px;width:auto;max-width:none}}
.cy-mcard__hex.cy-sq{width:26px;height:26px}

/* ------------------------------------------------------------------- 23b the menu bar (.cy-mb, include "menubar"): the glyph, its states, the
   card it opens and how it works. A flat #F2F2F2 well (4191 style) with a glass menu bar strip, the monochrome glyph with one state badge
   (ember only when a person is needed, DS §19), and the 320px card under it. State buttons switch the card (sections/s5-mac.js). */
.cy-mb__grid{align-items:center;row-gap:48px}
.cy-mb__text{grid-column:1/span 5;min-width:0}
.cy-mb__fig{grid-column:7/-1;min-width:0;margin:0;display:grid;gap:20px}
.cy-mb__lead{margin-top:20px;max-width:34em;font-size:18px;line-height:1.55;color:var(--s-ink-2);text-wrap:pretty}
.cy-mb__how{margin-top:32px;display:grid;gap:14px;max-width:34em}
.cy-mb__step{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:baseline;font-size:16px;line-height:1.5;color:var(--s-ink-2)}
.cy-mb__step b{font-weight:500;color:var(--s-ink)}
.cy-mb__n{font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-3)}
.cy-mb__screen{position:relative;overflow:hidden;display:grid;align-content:start;min-height:360px;border-radius:14px;background:#F2F2F2;box-shadow:inset 0 0 0 1px var(--s-line)}
.cy-mb__bar{display:flex;align-items:center;justify-content:flex-end;gap:14px;height:28px;padding:0 14px;background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(0,0,0,.06);font-family:var(--font-body);font-size:13px;font-weight:500;line-height:1;color:#151515;white-space:nowrap}
.cy-mb__glyph{position:relative;display:grid;place-items:center;width:30px;height:22px;border-radius:6px;background:rgba(0,0,0,.09)}
.cy-mb__glyph .cybee-emblem{--cy-emblem-height:13px;--wordmark:#151515}
.cy-mb__badge{position:absolute;right:2px;top:2px;width:7px;height:7px;border-radius:999px;background:transparent;box-shadow:0 0 0 1.5px transparent;transition:background-color 160ms var(--ease-out)}
.cy-mb__glyph[data-state="needs"] .cy-mb__badge{background:#FF6B2B;box-shadow:0 0 0 1.5px #F2F2F2}
.cy-mb__glyph[data-state="training"] .cy-mb__badge{background:#794DFF;box-shadow:0 0 0 1.5px #F2F2F2}
.cy-mb__glyph[data-state="stopped"] .cy-mb__badge{background:#2757C9;box-shadow:0 0 0 1.5px #F2F2F2}
.cy-mb__time{font-variant-numeric:tabular-nums}
.cy-mb__cards{display:grid;justify-items:end;padding:10px 88px 32px 24px}
.cy-mb__card.cy-mcard{position:relative;inset:auto;right:auto;bottom:auto;width:320px;max-width:100%;background:rgba(255,255,255,.96);-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 18px 44px -18px rgba(0,0,0,.28)}
.cy-mb__card[hidden]{display:none}
html.js .cy-mb__card:not([hidden]){animation:cy-mb-in 180ms var(--ease-out)}
@keyframes cy-mb-in{from{opacity:0;transform:translateY(-4px)}}
.cy-mb__states{display:grid;gap:10px}
.cy-mb__states-l{font-family:var(--font-mono);font-size:12px;font-weight:500;line-height:1.4;color:var(--s-ink-3)}
.cy-mb__list{display:flex;flex-wrap:wrap;gap:8px}
.cy-mb__state{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:6px;background:transparent;box-shadow:inset 0 0 0 1px var(--pg-rule);
  font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1;color:var(--s-ink-2);white-space:nowrap;cursor:pointer;
  transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.cy-mb__state .cy-hex,.cy-mb__state .cy-sq{--hex-w:12px;width:12px}
.cy-mb__state .cy-sq{height:10px;width:10px}
.cy-mb__state[aria-pressed="true"]{background:var(--s-raised);color:var(--s-ink);box-shadow:inset 0 0 0 1px var(--s-ink)}
.cy-mb__state:focus-visible{outline:3px solid #2757C9;outline-offset:2px}
@media (any-hover:hover){.cy-mb__state[aria-pressed="false"]:hover{color:var(--s-ink);box-shadow:inset 0 0 0 1px var(--s-ink-3)}}
.cy-mb__state--static{cursor:default;box-shadow:none;padding:0 6px;color:var(--s-ink-3)}
.cy-mb__scan{--hex-w:12px;display:inline-block;width:12px;aspect-ratio:1/.866;background:var(--s-ink-3);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,12.4% 50%,31.2% 87.6%,68.8% 87.6%,87.6% 50%,68.8% 12.4%,31.2% 12.4%,12.4% 50%,0 50%)}
html:not(.js) .cy-mb__state[data-mb-show]{pointer-events:none}
@media (max-width:1019px){.cy-mb__text,.cy-mb__fig{grid-column:1/-1}.cy-mb__fig{max-width:640px}}
@media (max-width:519px){.cy-mb__cards{padding:10px 12px 20px}.cy-mb__card.cy-mcard{width:100%}.cy-mb__screen{min-height:0}.cy-mb__lead{font-size:17px}}
/* the landing: the heading at the 4191 scale (40 to 44px), the text on six columns, a screen a shade darker than the grey ground,
   the caption as label and note, the privacy line with its link */
.cy-mb .cy-h2{font-size:clamp(30px,3.1vw,44px);line-height:1.05}
.cy-mb__text{grid-column:1/span 6}
.cy-mb__fig{grid-column:7/-1}
.mac .cy-mb__screen{background:#EBEBEE}
.mac .cy-mb__glyph[data-state="needs"] .cy-mb__badge,.mac .cy-mb__glyph[data-state="training"] .cy-mb__badge,.mac .cy-mb__glyph[data-state="stopped"] .cy-mb__badge{box-shadow:0 0 0 1.5px #EBEBEE}
.cy-mb .cy-fig__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font-size:14px;line-height:1.5;color:var(--s-ink-2)}
.cy-mb__privacy{margin-top:28px;padding-top:20px;border-top:1px solid var(--pg-rule);max-width:34em;font-size:15px;line-height:1.55;color:var(--s-ink-2)}
.cy-mb__privacy .cy-link{margin-left:6px;white-space:nowrap}
@media (max-width:1019px){.cy-mb__text,.cy-mb__fig{grid-column:1/-1}}

/* ==== the old S5 block, still used by the "safe" include on 13 inner pages (pages/_includes/safe.html: "Watches programs, not
   people", the stays and leaves table, the card on a photo). Restored after step 4 replaced this file (gate, 29 Sep). */
/* cybee v3 · S5 On your Mac (track T4, prefix mac-). Spec: DIRECTION-v3.md §3 S5.
   Every class starts with mac-; shared primitives (cy-wrap, cy-grid, cy-section, cy-kicker, cy-h2, cy-fade, cy-hex, cy-link,
   cy-photo, cy-figlabel) come from css/foundation.css; .swiss-flag and .cybee-emblem come from ds/tokens/brand.css.
   DS sources: SUR 178 to 183 (menu bar card, Protected state, d.8) · SIG 350 and 353 (photo T1, T4 glass artifact) ·
   WEB 186 to 189 and STA css 119 to 122 (privacy list, rebuilt as the stays / leaves table) · d.15 hexes · brand.css flag.
   Layouts: 12 columns at 900 and wider (text cols 1 to 6, figure cols 7 to 12) · 520 to 899 stacked, table stays two columns ·
   below 520 the table becomes two stacked lists and the frame is 460px tall (review taste-05: the card clears both faces). No JS: the section has no behaviour. */

/* ------------------------------------------------------------------ ground and grid */
.mac{background:var(--s-raised)}
/* integration (F0): --s-fade on frost measures 2.99:1, under the 3:1 large text floor (§8.4 item 5). Same fix as S4 on the
   iris tint: the fade on a non paper light ground uses --s-ink-3 (4.66:1 here), the ?stage=1 value. Owner sign off with K3;
   delete this rule to go back to --s-fade. */
.mac .cy-fade{color:var(--s-ink-3)}
.mac-grid{align-items:start;row-gap:0}
.mac-head{grid-column:1/span 9}
.mac-kicker{margin:0 0 20px}
.mac-l{display:block}
.mac-text{grid-column:1/span 6;margin-top:var(--pg-title-gap);min-width:0}
.mac-fig{grid-column:7/span 6;margin:var(--pg-title-gap) 0 0;min-width:0}

/* ------------------------------------------------------------------ the stays / leaves table (two lists sharing one row grid)
   The closing rule is the last row's own bottom border (14px under its text), not a border on the wrapper, so no box ends flush
   against a line; the last track is 1px taller to hold it, which keeps every rule where the wrapper's border drew it. */
.mac-table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:44px repeat(2,minmax(56px,auto)) minmax(57px,auto)}
.mac-col{display:grid;grid-row:1/-1;grid-template-rows:subgrid;min-width:0}
.mac-col+.mac-col{border-left:1px solid var(--pg-rule)}
.mac-th{box-sizing:border-box;display:flex;align-items:center;margin:0;padding:0 16px 0 0;border-top:1px solid var(--pg-rule);
  font-family:var(--font-mono);font-size:14px;font-weight:500;line-height:1.4;color:var(--s-ink-3)}
.mac-list{display:grid;grid-row:2/-1;grid-template-rows:subgrid;margin:0;padding:0;list-style:none}
.mac-td{box-sizing:border-box;min-width:0;padding:14px 16px 14px 0;border-top:1px solid var(--pg-rule);
  font-size:18px;font-weight:400;line-height:1.4;color:var(--s-ink);text-wrap:pretty}
.mac-td:last-child{border-bottom:1px solid var(--pg-rule)}
/* the second column starts 16px after the rule between the columns */
.mac-col+.mac-col .mac-th,.mac-col+.mac-col .mac-td{padding-left:16px}
/* without subgrid (pre 2023 browsers) the rows cannot share heights: minimum heights keep the rules close, text never clips */
@supports not (grid-template-rows:subgrid){
  .mac-col{display:block}
  .mac-th{height:44px}
  .mac-td{min-height:56px}
  .mac-td:nth-child(3){min-height:calc(2 * 1.4em + 29px)}
}

/* ------------------------------------------------------------------ the two statement lines, the company line, the link */
.mac-lines{display:grid;gap:10px;margin:32px 0 0;padding:0;list-style:none}
.mac-line{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:12px;align-items:start;
  font-size:18px;font-weight:400;line-height:1.5;color:var(--s-ink);text-wrap:balance}
.mac-line-hex{margin-top:7px}
.mac-co{display:flex;align-items:flex-start;gap:12px;margin-top:32px;font-size:16px;line-height:1.5;color:var(--s-ink);text-wrap:balance}
.mac-flag{width:14px;height:14px;flex:0 0 14px;margin-top:5px}
.mac-more{margin-top:20px;font-size:16px;line-height:1.5}
.mac-link{position:relative}
.mac-link::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}   /* 44px target */

/* ------------------------------------------------------------------ fig. 04: the frame (a Mac screen, radius 22) */
.mac-frame{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:22px;box-shadow:0 0 0 1px var(--pg-rule);
  background:#B8BABF;color:#151515;font-family:var(--font-body);isolation:isolate}
.mac-photo{position:absolute;inset:0;z-index:0}
.mac-photo picture{display:block;width:100%;height:100%}
.mac-photo img{object-position:30% 50%}

/* the menu strip: 26px glass across the top, the blue emblem in a 28×22 key, then the time (T9, D3).
   Deviation: the time is ink, not white with a shadow. The photo's top is bright sky and pale stone, so white measured
   1.13:1 at worst (2.46 median); ink measures 4.51 to 6.70 at every width, as macOS draws menu bar text over a light image. */
.mac-bar{position:absolute;top:0;left:0;right:0;z-index:1;box-sizing:border-box;height:26px;display:flex;align-items:center;justify-content:flex-end;gap:16px;
  padding:0 14px;background:rgba(255,255,255,.28);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  color:#151515;font-size:calc(13px + var(--pg-mock-bump));font-weight:500;line-height:1;white-space:nowrap}
.mac-key{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:22px;border-radius:6px;background:rgba(255,255,255,.72)}
.mac-emblem{--cy-emblem-height:13px;--wordmark:#2757C9}

/* review taste-05: the card sits bottom left, clear of both faces (at least 24px from every face box, measured with
   qa/review/fixes/s5-faces.js) and of the letter, the photo's focal point; top right it covered a face.
   the menu bar card, Protected state (SUR 181): glass over the photo, every string on the card's solid layer (d.13).
   Deviations, both for 4.5:1 on 13px mock text: the fill is .82 (at .74 the Protection label measured 4.12:1 over the dark
   jacket at 375 and 1024) and secondary text is #515154 (#6E6E73 cannot reach 4.5:1 on a 4% tile even over an opaque card). */
.mac-card{position:absolute;top:auto;right:auto;bottom:16px;left:16px;z-index:2;box-sizing:border-box;width:320px;padding:14px;display:grid;gap:12px;
  border-radius:14px;background:rgba(246,246,248,.82);-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);
  box-shadow:0 0 0 1px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.8),0 24px 60px -18px rgba(0,0,0,.5);color:#151515;line-height:1.3;
  container:mac-card/inline-size}
.mac-card-head{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:12px;row-gap:1px;align-items:baseline}
.mac-card-hex{--hex-w:30px;grid-row:1/span 2;align-self:center}
.mac-state{font-size:calc(15px + var(--pg-mock-bump));font-weight:500}
.mac-name{justify-self:end;font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));color:#515154;white-space:nowrap}
.mac-ago{grid-column:2/-1;font-size:calc(13px + var(--pg-mock-bump));color:#515154}
/* a narrow card (content box under 280px: 360px phones) puts the Mac name on its own row instead of crowding the state */
@container mac-card (max-width:279px){
  .mac-card-hex{grid-row:1/span 3}
  .mac-name{grid-row:3;grid-column:2/-1;justify-self:start}
}
.mac-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mac-tile{display:grid;gap:1px;padding:10px 12px;border-radius:0;background:rgba(0,0,0,.04)}
.mac-tile-l{font-size:calc(13px + var(--pg-mock-bump));color:#515154}
.mac-tile-v{font-size:calc(15px + var(--pg-mock-bump));font-weight:500;font-feature-settings:"tnum"}
.mac-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mac-btn{display:flex;align-items:center;justify-content:center;height:32px;border-radius:10px;font-size:calc(14px + var(--pg-mock-bump));font-weight:500;line-height:1;white-space:nowrap}
.mac-btn--primary{background:#2757C9;color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.mac-btn--secondary{background:rgba(0,0,0,.05);color:#151515}

/* caption row under the frame: caption left, label right (the label takes its own line when both do not fit) */
.mac-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px;margin-top:12px}
.mac-cap-t{font-size:16px;line-height:1.5;color:var(--s-ink-2);text-wrap:balance}
.mac-cap-l{margin-left:auto;white-space:nowrap}

/* review taste-06 (stage only, with K3): the frame is 648 × 440 so S5 fits one projector screen; the card sits 12px from the
   bottom so both faces still clear it by 24px */
@media (min-width:1020px) and (max-height:940px){
  html[data-stage="1"] .mac-frame{aspect-ratio:auto;height:440px}
  html[data-stage="1"] .mac-card{bottom:12px}
}

/* ------------------------------------------------------------------ 900 to 1279 (the 1024 frame): a taller frame so the faces clear the card */
@media (min-width:900px) and (max-width:1279px){
  .mac-frame{aspect-ratio:auto;height:430px}
  .mac-photo img{object-position:45% 50%}
}
@media (max-width:1279px){.mac-card{bottom:12px;left:12px}}

/* ------------------------------------------------------------------ 520 to 899: one column; the table keeps two columns */
@media (max-width:899px){
  .mac-head,.mac-text,.mac-fig{grid-column:1/-1}
  .mac-fig{margin-top:52px}
}

/* ------------------------------------------------------------------ below 520: two stacked lists, 300px frame */
@media (max-width:519px){
  .mac-table{display:block}
  .mac-col{display:block}
  .mac-col+.mac-col{margin-top:32px;border-left:0}
  .mac-th{height:44px}
  .mac-list{display:block}
  .mac-td{min-height:56px}
  .mac-td:last-child{min-height:57px}
  .mac-col+.mac-col .mac-th,.mac-col+.mac-col .mac-td{padding-left:0}
  .mac-fig{margin-top:40px}
  .mac-frame{aspect-ratio:auto;height:460px}
  .mac-photo img{object-position:65% 50%}
  .mac-card{left:12px;right:12px;width:auto}
  .mac-cap{flex-direction:column;align-items:flex-start;gap:4px}
  .mac-cap-l{margin-left:0;white-space:normal}
}