/* ==========================================================================
   Draco EMT Prep — TABLET experience (2.9.27)
   Loaded AFTER phone.css (the shared touch component library: tokens, cards, rows, buttons, answer cards).
   This file adds the tablet's own layouts — a navigation rail, a public top nav, multi-column grids, a split
   sign-in, a two-pane quiz, centered dialogs — and larger type for a device held at arm's length.
   ========================================================================== */
:root{ --rail-w:96px; --tnav-h:70px; }
body{font-size:17px}
.m-h1{font-size:36px}
.m-h2{font-size:23px;margin-top:34px}
.m-lead{font-size:17px}
.m-card{padding:22px;border-radius:20px}
.m-btn{min-height:54px;font-size:17px}
.m-row{min-height:64px;padding:13px 18px}
.m-row__title{font-size:17px}
.m-opt{min-height:66px;padding:16px 16px 16px 14px}
.m-opt__body{font-size:17px}
.m-stat b{font-size:28px}

/* ---------- Public top navigation ---------- */
.t-nav{position:sticky;top:0;z-index:60;background:var(--grad-bar);color:#fff;padding:var(--safe-t) calc(28px + var(--safe-r)) 0 calc(28px + var(--safe-l));
  box-shadow:0 6px 18px -12px rgba(0,0,0,.6)}
.t-nav__row{height:var(--tnav-h);display:flex;align-items:center;gap:6px;max-width:1180px;margin:0 auto}
.t-nav__links{display:flex;gap:2px;margin-left:18px}
.t-nav__links a{color:rgba(255,255,255,.85);font-weight:600;font-size:16px;padding:0 13px;min-height:44px;display:inline-flex;align-items:center;border-radius:10px}
.t-nav__links a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.1)}
.t-nav__spacer{flex:1}
.t-nav .m-btn{width:auto;min-height:44px;padding:0 20px;font-size:15.5px}
/* Narrower windows tighten the links instead of dropping About and Contact (2.13.1); only the narrowest Split View
   hides them, and the footer lists both. */
@media (max-width:900px){ .t-nav__links{margin-left:8px} .t-nav__links a{padding:0 8px;font-size:15px} }
@media (max-width:720px){ .t-nav__links a:nth-child(n+4){display:none} }
/* Resources (2026-10-17): six links don't fit an iPad mini in portrait; About steps out, and at the narrowest Contact
   too (the footer lists both). */
@media (min-width:721px) and (max-width:840px){ .t-nav__links a[href="/about.php"]{display:none} .t-nav__links a{padding:0 6px} }
@media (min-width:721px) and (max-width:760px){ .t-nav__links a[href="/contact.php"]{display:none} }

/* ---------- Signed-in rail ---------- */
.t-rail{position:fixed;top:0;bottom:0;left:0;z-index:70;width:calc(var(--rail-w) + var(--safe-l));padding:calc(14px + var(--safe-t)) 0 calc(14px + var(--safe-b)) var(--safe-l);
  background:var(--grad-bar);display:flex;flex-direction:column;align-items:center;gap:6px}
.t-rail__brand{width:52px;height:52px;display:grid;place-items:center;margin-bottom:14px}
.t-rail__brand img{width:44px;height:44px}
.t-rail a,.t-rail button{width:78px;min-height:66px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:rgba(255,255,255,.72);font-size:12px;font-weight:500;border:0;background:transparent;cursor:pointer}
.t-rail svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.t-rail a[aria-current="page"]{background:rgba(125,211,252,.14);color:#fff}
.t-rail a[aria-current="page"] svg{stroke:var(--sky-2)}
.t-rail a:active,.t-rail button:active{background:rgba(255,255,255,.08)}
.t-rail__spacer{flex:1}
.t-app--rail .t-main{margin-left:calc(var(--rail-w) + var(--safe-l))}
/* Anchors and Check Yourself land below the 72px top bar (phone.css's padding is for its 56px bar). */
html{scroll-padding-top:calc(72px + var(--safe-t) + 12px)}
.t-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;min-height:72px;padding:var(--safe-t) calc(32px + var(--safe-r)) 0 32px;
  background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--hair)}
.t-top__title{flex:1;font:700 24px/1.2 var(--font-display);letter-spacing:-.01em}
.t-top .m-avatar{width:40px;height:40px;font-size:16px}
.t-top button.m-iconbtn{color:var(--text)}

/* ---------- Page structure ---------- */
.t-wrap{max-width:1180px;margin:0 auto;padding:28px calc(32px + var(--safe-r)) 48px calc(32px + var(--safe-l))}
.t-wrap--narrow{max-width:880px}
.t-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.t-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.t-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.t-cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:start}
.t-sticky{position:sticky;top:96px}
@media (max-width:980px){
  .t-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-cols{grid-template-columns:1fr}
  .t-sticky{position:static}
}

/* ---------- Public hero ---------- */
.t-hero{background:var(--grad-hero);color:#fff;position:relative;overflow:hidden}
.t-hero::after{content:"";position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:420px;height:420px;opacity:.14;
  background:url('/assets/images/star-of-life.svg') center/contain no-repeat;pointer-events:none}
.t-hero__in{max-width:1180px;margin:0 auto;padding:54px calc(32px + var(--safe-r)) 58px calc(32px + var(--safe-l));position:relative;z-index:1}
.t-hero h1{color:#fff;font-size:50px;line-height:1.05;font-weight:700;margin:16px 0 14px;max-width:760px;text-wrap:balance}
.t-hero h1 em{font-style:normal;background:linear-gradient(110deg,#38bdf8,#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-hero p{color:rgba(255,255,255,.85);font-size:19px;max-width:680px;margin:0 0 24px}
.t-hero .m-btn{width:auto;display:inline-flex;padding:0 28px}
.t-hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.t-hero .m-trust{font-size:14.5px;margin-top:20px}
@media (max-width:900px){ .t-hero h1{font-size:42px} }

/* ---------- Split sign-in ---------- */
.t-auth{min-height:calc(100dvh - var(--tnav-h));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.t-auth__brand{background:var(--grad-hero);color:#fff;padding:56px 44px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.t-auth__brand::after{content:"";position:absolute;right:-80px;bottom:-60px;width:360px;height:360px;opacity:.13;background:url('/assets/images/star-of-life.svg') center/contain no-repeat}
.t-auth__brand h2,.t-auth__brand .t-auth__claim{color:#fff;font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;font-size:32px;line-height:1.15;margin:18px 0 12px}
.t-auth__brand p{color:rgba(255,255,255,.8)}
.t-auth__brand .m-checks li{color:rgba(255,255,255,.9)}
.t-auth__brand .m-checks svg{stroke:var(--sky)}
.t-auth__form{display:flex;align-items:center;justify-content:center;padding:44px 40px}
.t-auth__form>div{width:100%;max-width:460px}
@media (max-width:880px){ .t-auth{grid-template-columns:1fr} .t-auth__brand{padding:36px 36px 30px} .t-auth__brand h2{font-size:26px} }

/* ---------- Quiz: two panes ---------- */
.t-qbar{position:sticky;top:0;z-index:60;background:var(--grad-bar);color:#fff;padding:var(--safe-t) calc(20px + var(--safe-r)) 0 calc(20px + var(--safe-l))}
.t-qbar__row{height:64px;display:flex;align-items:center;gap:12px;max-width:1280px;margin:0 auto}
.t-qbar__count{flex:1;font:700 18px/1.2 var(--font-display)}
.t-qbar__count small{display:block;font:500 13px/1.2 var(--font);color:rgba(255,255,255,.7);margin-top:2px}
.t-quiz{max-width:1280px;margin:0 auto;padding:26px calc(28px + var(--safe-r)) 40px calc(28px + var(--safe-l));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:28px;align-items:start}
.t-quiz__q{position:sticky;top:96px}
.t-quiz__q .m-q__stem{font-size:21px;line-height:1.55}
.t-quiz__a .m-actionbar{position:sticky;bottom:0;left:auto;right:auto;margin-top:18px;border-radius:18px;border:1px solid var(--hair);padding:14px}
@media (max-width:900px){
  .t-quiz{grid-template-columns:1fr}
  .t-quiz__q{position:static}
}

/* ---------- Footer ---------- */
.t-foot{background:var(--navy-deep);color:rgba(255,255,255,.78);font-size:14.5px;margin-top:40px}
.t-foot__in{max-width:1180px;margin:0 auto;padding:34px calc(32px + var(--safe-r)) calc(26px + var(--safe-b)) calc(32px + var(--safe-l))}
.t-foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:18px 26px}
.t-foot a{color:#fff}
.t-foot h5{margin:0 0 10px;color:#fff;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.t-foot__grid p{margin:0 0 8px}
.t-foot .m-foot__legal{margin:22px 0 14px}
.t-foot .m-foot__bottom{font-size:13px}
.t-appfoot{padding:18px 32px calc(22px + var(--safe-b));text-align:center;font-size:13px;color:var(--faint)}
.t-appfoot .dev-switch{color:var(--faint)}.t-appfoot .dev-switch a{color:var(--muted)}.t-appfoot .dev-switch__cur{color:var(--text)}

/* ---------- Dialogs: centered on a tablet, not bottom sheets ---------- */
.modal-overlay{align-items:center;padding:24px}
.modal,.m-sheet .m-sheet__panel{border-radius:22px;max-width:520px;padding-bottom:0}
.modal__foot{flex-direction:row;justify-content:flex-end}
.modal__foot .btn{width:auto;min-width:130px;padding:0 20px}
.m-sheet__grab,.modal__head::before{display:none}

/* ---------- Flashcards ---------- */
.m-fc__card{min-height:380px}
.m-fc__text{font-size:30px}
.m-fc__face--back .m-fc__text{font-size:20px}