/* Safety & learning: a view inside the You sheet. Same dark grouped cards as the You menu. */
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet[data-safety-view] > :not(#safetyView) { display:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .you-menu > button small { display:block; margin-top:2px; font-size:12.5px!important; color:var(--g-muted)!important; }
.vertex-v3 #app .safety-view { display:flex; flex-direction:column; gap:12px; color:var(--g-contrast); font:500 14px/1.4 var(--font-sans); }
.vertex-v3 #app .safety-view[hidden] { display:none; }
.vertex-v3 #app .safety-view button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
.vertex-v3 #app .safety-view button:focus-visible,.vertex-v3 #app .safety-row:focus-visible { outline:2px solid var(--g-accent); outline-offset:2px; }
.vertex-v3 #app#app#app#app #youSheet .safety-head { margin:0!important; }
.vertex-v3 #app .safety-card { margin:0; padding:16px; border-radius:14px; background:var(--g-raised); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .safety-card h3 { margin:0; font:600 17px/1.25 var(--font-sans); color:var(--g-contrast); }
.vertex-v3 #app .safety-card > p { margin:4px 0 0; color:var(--g-muted); font-size:13.5px; }
.vertex-v3 #app .safety-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vertex-v3 #app .safety-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.vertex-v3 #app .safety-pill { display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border-radius:999px; background:var(--g-raised); color:var(--g-muted); font:600 12px/1.2 var(--font-sans); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .safety-pill[hidden] { display:none; }
.vertex-v3 #app .safety-pill.ok { background:var(--g-raised); color:var(--g-success); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
/* Standard EAWS danger colours, the same as on the map (red is allowed here: it is the danger scale, not UI). */
.vertex-v3 #app .safety-pill[data-level="1"] { background:#ccff66; color:#111; }
.vertex-v3 #app .safety-pill[data-level="2"] { background:#ffff00; color:#111; }
.vertex-v3 #app .safety-pill[data-level="3"] { background:#ff9900; color:#111; }
.vertex-v3 #app .safety-pill[data-level="4"] { background:#ff0000; color:#fff; }
.vertex-v3 #app .safety-pill[data-level="5"] { background:repeating-conic-gradient(#ff0000 0 25%,#111 0 50%) 0 0/8px 8px; color:#fff; text-shadow:0 0 3px #000,0 0 2px #000; }
.vertex-v3 #app .safety-view .safety-primary { display:flex; align-items:center; justify-content:center; width:100%; min-height:48px; margin-top:14px; border-radius:999px; background:var(--g-accent); color:var(--g-contrast); font:600 15.5px var(--font-sans); --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .safety-view .safety-primary:disabled { background:var(--g-raised); color:var(--g-muted); cursor:default; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .safety-view .safety-secondary { display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:999px; background:var(--g-raised); color:var(--g-contrast); font:600 15px var(--font-sans); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .safety-bar { height:6px; margin:14px 0 6px; border-radius:999px; background:var(--g-raised); overflow:hidden; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .safety-bar i { display:block; height:100%; border-radius:3px; background:var(--g-accent); color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .safety-bar-note { display:flex; justify-content:space-between; color:var(--g-muted); font-size:12.5px; }
.vertex-v3 #app .safety-list { display:flex; flex-direction:column; margin-top:8px; }
.vertex-v3 #app .safety-card.safety-list { margin-top:0; padding:2px 14px; }
.vertex-v3 #app .safety-view .safety-row { display:flex; align-items:center; gap:12px; width:100%; min-height:46px; padding:4px 0; border-top:1px solid rgba(var(--g-ink-rgb),0.063); text-align:left; color:var(--g-contrast); font-size:14.5px; cursor:pointer; }
.vertex-v3 #app .safety-view .safety-row:first-child { border-top:0; }
.vertex-v3 #app .safety-row > span { flex:1 1 auto; min-width:0; }
.vertex-v3 #app .safety-row > small { flex:none; color:var(--g-muted); font-size:12px; }
.vertex-v3 #app .safety-box { flex:none; display:grid; place-items:center; width:22px; height:22px; box-sizing:border-box; border:2px solid rgba(var(--g-ink-rgb),0.200); border-radius:7px; color:var(--g-contrast); font:600 13px/1 var(--font-sans); }
.vertex-v3 #app .safety-row.on .safety-box { background:var(--g-accent); border-color:var(--g-accent); color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .safety-time { flex:none; height:34px; padding:0 8px; border:1px solid rgba(var(--g-ink-rgb),0.133); border-radius:10px; background:var(--g-surface); color:var(--g-contrast); font:500 15px var(--font-sans); color-scheme:light; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .safety-section { margin:4px 4px -6px; color:var(--g-muted); font:600 12px var(--font-sans); letter-spacing:.08em; }
.vertex-v3 #app .safety-muted { margin:0!important; color:var(--g-muted)!important; }
.vertex-v3 #app .safety-danger { display:flex; align-items:center; gap:12px; }
.vertex-v3 #app .safety-danger b { display:block; font:600 16px var(--font-sans); color:var(--g-contrast); }
.vertex-v3 #app .safety-danger small { display:block; margin-top:2px; color:var(--g-muted); font-size:13px; }
.vertex-v3 #app .safety-level { flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:14px; font:600 22px/1 var(--font-sans); }
.vertex-v3 #app .safety-view .safety-link { display:inline-flex; align-self:flex-start; min-height:36px; margin-top:8px; padding:0; color:var(--g-accent); font:600 13.5px var(--font-sans); }
.vertex-v3 #app .safety-foot { position:sticky; bottom:-16px; z-index:1; margin-bottom:-16px; padding:12px 0 16px; background:linear-gradient(180deg,#12121400,var(--g-surface) 12px); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .safety-foot-buttons { display:flex; gap:10px; }
.vertex-v3 #app .safety-foot-buttons > * { flex:1 1 0; margin-top:0!important; }
.vertex-v3 #app .safety-foot-buttons > .safety-primary { flex:2 1 0; }
.vertex-v3 #app .safety-count { display:grid; place-items:center; min-height:48px; border-radius:999px; background:var(--g-raised); color:var(--g-muted); font:600 15px var(--font-sans); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .safety-ready { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:52px; border-radius:999px; background:#1f9d63; color:var(--g-contrast); --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .safety-ready b { font:600 16px var(--font-sans); }
.vertex-v3 #app .safety-ready small { font-size:12px; opacity:.9; }
.vertex-v3 #app .safety-disclaimer { margin:0 4px; color:var(--g-muted); font-size:12.5px; line-height:1.45; }
.vertex-v3 #app .safety-disclaimer a { color:var(--g-accent); text-decoration:none; white-space:nowrap; margin-right:8px; }
.vertex-v3 #app .safety-dots { display:flex; justify-content:center; gap:5px; margin-top:-4px; }
.vertex-v3 #app .safety-dots i { flex:0 1 26px; height:4px; border-radius:999px; background:var(--g-raised); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .safety-dots i.on { background:var(--g-accent); color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .safety-step { display:flex; flex-direction:column; gap:8px; }
.vertex-v3 #app .safety-img { display:block; width:100%; height:clamp(150px,30dvh,250px); object-fit:cover; border-radius:14px; }
.vertex-v3 #app .safety-bands { display:flex; gap:4px; }
.vertex-v3 #app .safety-bands span { flex:1; display:flex; flex-direction:column; gap:3px; color:var(--g-muted); font-size:11.5px; }
.vertex-v3 #app .safety-bands i { height:8px; border-radius:2px; }
.vertex-v3 #app .safety-title { margin:6px 2px 0; font:600 21px/1.28 var(--font-sans); color:var(--g-contrast); text-wrap:balance; }
.vertex-v3 #app .safety-text { margin:0 2px; color:var(--g-muted); font-size:15.5px; line-height:1.5; }
.vertex-v3 #app .safety-scale { display:flex; flex-direction:column; gap:2px; padding:6px 12px; border-radius:14px; background:var(--g-raised); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .safety-scale > div { display:flex; align-items:center; gap:12px; min-height:44px; padding:4px 0; border-top:1px solid rgba(var(--g-ink-rgb),0.063); }
.vertex-v3 #app .safety-scale > div:first-child { border-top:0; }
.vertex-v3 #app .safety-scale .safety-level { width:32px; height:32px; border-radius:10px; font-size:16px; }
.vertex-v3 #app .safety-scale b { display:block; font:600 14px var(--font-sans); color:var(--g-contrast); }
.vertex-v3 #app .safety-scale small { display:block; color:var(--g-muted); font-size:12.5px; line-height:1.35; }
.vertex-v3 #app .safety-options { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.vertex-v3 #app .safety-view .safety-option { display:flex; align-items:center; gap:10px; min-height:50px; padding:8px 14px; border:2px solid transparent; border-radius:14px; background:var(--g-raised); text-align:left; font-size:15px; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .safety-view .safety-option:disabled { cursor:default; opacity:.55; color:var(--g-contrast); }
.vertex-v3 #app .safety-view .safety-option.right { opacity:1; border-color:#3fb37f; background:var(--g-raised); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .safety-view .safety-option.right b { color:#3fb37f; }
.vertex-v3 #app .safety-view .safety-option.wrong { opacity:1; border-color:var(--ripa-red); background:var(--g-raised); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .safety-why { margin-top:4px; padding:14px 16px; border-radius:14px; }
.vertex-v3 #app .safety-why.right { background:var(--g-raised); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .safety-why.wrong { background:var(--g-raised); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .safety-why b { font:600 16px var(--font-sans); color:var(--g-success); }
.vertex-v3 #app .safety-why.wrong b { color:var(--g-warning); }
.vertex-v3 #app .safety-why p { margin:4px 0 0; color:var(--g-contrast); font-size:13.5px; line-height:1.45; }
.vertex-v3 #app .safety-done { display:flex; flex-direction:column; align-items:center; gap:6px; padding:24px 8px 8px; text-align:center; }
.vertex-v3 #app .safety-done > b { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:#1f9d63; color:var(--g-contrast); font:600 32px/1 var(--font-sans); --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
/* The sheet's shared rules shrink text and right-align titles; these views keep their own sizes. */
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .safety-head { display:flex!important; align-items:center!important; justify-content:flex-start!important; gap:10px!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .safety-head > div { flex:1 1 auto; min-width:0; text-align:left!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .safety-head h2 { margin:0!important; text-align:left!important; font:600 19px/1.2 var(--font-sans)!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .safety-head small { display:none!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .safety-card h3 { font:600 17px/1.25 var(--font-sans)!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .safety-card > p { font-size:13.5px!important; line-height:1.4!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .safety-title { font:600 21px/1.28 var(--font-sans)!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .safety-text { font-size:15.5px!important; line-height:1.5!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .safety-why p { font-size:14px!important; line-height:1.45!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .safety-scale b { font-size:14.5px!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .safety-scale small { font-size:13px!important; }
.vertex-v3 #app#app#app#app#app#app#app#app #youSheet .safety-muted { font-size:14px!important; line-height:1.45!important; }
/* Phones: the check and the course need the room, so the You sheet grows to nearly full height while they are open. */
@media (max-width:899px) {
  .vertex-v3 #app#app#app#app#app#app #youSheet:is([data-safety-view="check"],[data-safety-view="chapter"]) { height:auto!important; max-height:calc(100dvh - var(--corner-clear,0px) - 14px)!important; }
  .vertex-v3 #app#app#app#app#app#app #youSheet[data-safety-view="hub"] { max-height:min(78dvh,680px)!important; }
}
/* Desktop: the side panel is tall enough, so the buttons simply follow the content. */
@media (min-width:900px) {
  .vertex-v3 #app .safety-foot { position:static; margin:0; padding:12px 0 0; background:none; --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
}