/* 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:#8d96a2!important; }
.vertex-v3 #app .safety-view { display:flex; flex-direction:column; gap:12px; color:#eef1f5; font:500 14px/1.4 system-ui,sans-serif; }
.vertex-v3 #app .safety-view[hidden] { display:none; }
.vertex-v3 #app .safety-view button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
.vertex-v3 #app .safety-view button:focus-visible,.vertex-v3 #app .safety-row:focus-visible { outline:2px solid #93c5fd; 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:16px; background:#2a2e35; }
.vertex-v3 #app .safety-card h3 { margin:0; font:650 17px/1.25 system-ui; color:#f1f3f5; }
.vertex-v3 #app .safety-card > p { margin:4px 0 0; color:#9aa3ad; 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:13px; background:#3a3f48; color:#cfd4dc; font:600 12px/1.2 system-ui; }
.vertex-v3 #app .safety-pill[hidden] { display:none; }
.vertex-v3 #app .safety-pill.ok { background:#173226; color:#7ee2b0; }
.vertex-v3 #app .safety-pill[data-level="1"],.vertex-v3 #app .safety-pill[data-level="2"] { background:#3d3d1c; color:#f4ef8a; }
.vertex-v3 #app .safety-pill[data-level="3"] { background:#4a3416; color:#f8b864; }
.vertex-v3 #app .safety-pill[data-level="4"],.vertex-v3 #app .safety-pill[data-level="5"] { background:#4a1c1c; color:#ff8c8c; }
.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:24px; background:#3b82f6; color:#fff; font:650 15.5px system-ui; }
.vertex-v3 #app .safety-view .safety-primary:disabled { background:#3a3f48; color:#8d96a2; cursor:default; }
.vertex-v3 #app .safety-view .safety-secondary { display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:24px; background:#3a3f48; color:#eef1f5; font:600 15px system-ui; }
.vertex-v3 #app .safety-bar { height:6px; margin:14px 0 6px; border-radius:3px; background:#3a3f48; overflow:hidden; }
.vertex-v3 #app .safety-bar i { display:block; height:100%; border-radius:3px; background:#3b82f6; }
.vertex-v3 #app .safety-bar-note { display:flex; justify-content:space-between; color:#9aa3ad; 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 #ffffff10; text-align:left; color:#eef1f5; 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:#8d96a2; 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 #4a505a; border-radius:7px; color:#fff; font:700 13px/1 system-ui; }
.vertex-v3 #app .safety-row.on .safety-box { background:#3b82f6; border-color:#3b82f6; }
.vertex-v3 #app .safety-time { flex:none; height:34px; padding:0 8px; border:1px solid #ffffff22; border-radius:10px; background:#1e2126; color:#eef1f5; font:500 15px system-ui; color-scheme:dark; }
.vertex-v3 #app .safety-section { margin:4px 4px -6px; color:#8d96a2; font:650 12px system-ui; letter-spacing:.08em; }
.vertex-v3 #app .safety-muted { margin:0!important; color:#9aa3ad!important; }
.vertex-v3 #app .safety-danger { display:flex; align-items:center; gap:12px; }
.vertex-v3 #app .safety-danger b { display:block; font:650 16px system-ui; color:#f1f3f5; }
.vertex-v3 #app .safety-danger small { display:block; margin-top:2px; color:#9aa3ad; font-size:13px; }
.vertex-v3 #app .safety-level { flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; font:800 22px/1 system-ui; }
.vertex-v3 #app .safety-view .safety-link { display:inline-flex; align-self:flex-start; min-height:36px; margin-top:8px; padding:0; color:#93c5fd; font:600 13.5px system-ui; }
.vertex-v3 #app .safety-foot { position:sticky; bottom:-16px; z-index:1; margin-bottom:-16px; padding:12px 0 16px; background:linear-gradient(180deg,#1e212600,#1e2126 12px); }
.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:24px; background:#3a3f48; color:#9aa3ad; font:650 15px system-ui; }
.vertex-v3 #app .safety-ready { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:52px; border-radius:26px; background:#1f9d63; color:#fff; }
.vertex-v3 #app .safety-ready b { font:700 16px system-ui; }
.vertex-v3 #app .safety-ready small { font-size:12px; opacity:.9; }
.vertex-v3 #app .safety-disclaimer { margin:0 4px; color:#8d96a2; font-size:12.5px; line-height:1.45; }
.vertex-v3 #app .safety-disclaimer a { color:#93c5fd; 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:2px; background:#3a3f48; }
.vertex-v3 #app .safety-dots i.on { background:#3b82f6; }
.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:16px; }
.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:#9aa3ad; 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:700 21px/1.28 system-ui; color:#f1f3f5; text-wrap:balance; }
.vertex-v3 #app .safety-text { margin:0 2px; color:#cfd4dc; 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:16px; background:#2a2e35; }
.vertex-v3 #app .safety-scale > div { display:flex; align-items:center; gap:12px; min-height:44px; padding:4px 0; border-top:1px solid #ffffff10; }
.vertex-v3 #app .safety-scale > div:first-child { border-top:0; }
.vertex-v3 #app .safety-scale .safety-level { width:32px; height:32px; border-radius:9px; font-size:16px; }
.vertex-v3 #app .safety-scale b { display:block; font:650 14px system-ui; color:#f1f3f5; }
.vertex-v3 #app .safety-scale small { display:block; color:#9aa3ad; 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:#2a2e35; text-align:left; font-size:15px; }
.vertex-v3 #app .safety-view .safety-option:disabled { cursor:default; opacity:.55; color:#eef1f5; }
.vertex-v3 #app .safety-view .safety-option.right { opacity:1; border-color:#3fb37f; background:#173226; }
.vertex-v3 #app .safety-view .safety-option.right b { color:#3fb37f; }
.vertex-v3 #app .safety-view .safety-option.wrong { opacity:1; border-color:#e5484d; background:#3a1c1e; }
.vertex-v3 #app .safety-why { margin-top:4px; padding:14px 16px; border-radius:16px; }
.vertex-v3 #app .safety-why.right { background:#173226; }
.vertex-v3 #app .safety-why.wrong { background:#3a2a16; }
.vertex-v3 #app .safety-why b { font:650 16px system-ui; color:#7ee2b0; }
.vertex-v3 #app .safety-why.wrong b { color:#f8b864; }
.vertex-v3 #app .safety-why p { margin:4px 0 0; color:#dfe5ea; 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:#fff; font:700 32px/1 system-ui; }
/* 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:700 19px/1.2 system-ui!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:650 17px/1.25 system-ui!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:700 21px/1.28 system-ui!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; }
}