/* PHONES (<=700px): tab bar and the reduced layout; the centred top bar */
/* ---------- PHONES: less on screen. Navigation moves to a bottom tab bar; the top bar keeps the brand and the account ---------- */
.tabbar{display:none}
.q-back{border:none;background:none;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.q-back:hover{color:var(--acc)}
@media (max-width:700px){
  .tabbar{display:grid;grid-template-columns:repeat(6,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);border-top:1px solid var(--line);padding:2px 2px calc(2px + env(safe-area-inset-bottom,0px))}
  .tabbar button{position:relative;border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 5px;font:700 11px/14px var(--font);color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tabbar svg{width:23px;height:23px}
  .tabbar button[aria-current="page"]{color:var(--acc)}
  .tabbar button[aria-current="page"] svg{stroke-width:2.4}
  .tb-dot{position:absolute;top:6px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--tm,#f08c00)}
  .tb-dot[hidden]{display:none}
  body:not(.focus){padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  body.focus .tabbar{display:none}
  body:not(.focus) .simpill{bottom:calc(74px + env(safe-area-inset-bottom,0px))!important}
  body:not(.focus) .tm-foot{bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  /* top bar: brand left, account right */
  .top-l,#nav-start,.top .nav{display:none!important}
  .top-in{min-height:56px!important;padding-top:6px!important;padding-bottom:6px!important}
  .top-in>.brand{margin:0 auto 0 0!important}
  .top .brand .bname{display:inline!important}
  .acct.out .acct-in{display:inline-flex!important;font-size:14px!important;padding:6px 8px!important}
  .acct.out .acct-up{display:inline-flex!important;font-size:14px!important;padding:8px 14px!important;box-shadow:none!important}
  .acct.out .acct-me{display:none!important}
  /* exercise page: the exercise only; the chapter list is one tap away (the chapter name above the exercise) */
  .app.prac .side{display:none}
  .app.prac .dots{display:none}
  .app.prac .foot{padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px))}
  .app.prac .rep-line{margin-top:8px}
  /* nothing may push the page wider than the screen: a wide matrix scrolls inside the statement instead */
  .app.prac{padding-left:max(14px,env(safe-area-inset-left,0px))!important;padding-right:max(14px,env(safe-area-inset-right,0px))!important}
  .app.prac .pl{grid-template-columns:minmax(0,1fr)!important}
  .app.prac .pl>section{min-width:0}
  .app.prac .card{padding:14px 12px!important}
  .app.prac .qleft,.app.prac #af,.app.prac #out{min-width:0}
  .app.prac .st,.app.prac .sol .tx,.app.prac .rightans .v,.app.prac .cmp .v{overflow-x:auto;overflow-y:hidden;max-width:100%}
  .app.prac .katex-display{overflow-x:auto;overflow-y:hidden;margin:.5em 0}
  .app.prac .yours{padding:14px 12px!important}
  .app.prac .qhead{flex-wrap:nowrap;align-items:center;gap:10px;margin-bottom:10px}
  .app.prac .qhead .eyebrow{flex:1;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app.prac .qnav{flex:none;margin:0}
  .app.prac .qnav button{width:36px;height:36px}
  .app.prac .src{font-size:12px;line-height:17px;padding:4px 10px}
  .app.prac .calc-h{display:none}
  .app.prac .q-w,.app.prac .ck-x{display:none}
  .app.prac .acts .btn{white-space:nowrap}
  /* bottom bar: four equal tools, each an icon above its full name (Indiciu, Verifică cu AI, Mă notez singur,
     Sari peste), and below them one big, full-width "Verifică" / "Următorul" */
  .app.prac .foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;align-items:stretch;padding:8px 0 10px}
  .app.prac .foot .dots{display:none}
  .app.prac .fmid,.app.prac .acts{display:contents}
  .app.prac .fmid button,.app.prac .acts .skip{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding-top:9px!important;
    width:auto;min-width:0;height:auto;min-height:54px;margin:0;padding:6px 4px;border-radius:12px;border:1.5px solid var(--line);
    background:var(--card);font:700 11.5px/14px var(--font);color:var(--ink);text-align:center;white-space:normal;box-shadow:none}
  .app.prac .fmid button span{font-size:inherit;line-height:inherit}
  .app.prac .fmid button svg{width:20px;height:20px;margin:0;flex:none}
  .app.prac .fmid #ai-open{color:var(--acc);border-color:var(--acc);background:var(--acc-w)}
  .app.prac .fmid #self-open{color:var(--tm);border-color:var(--tm);background:var(--tm-w)}
  .app.prac .fmid button:disabled,.app.prac .fmid #self-open:disabled{color:var(--muted);border-color:var(--line);background:var(--card);opacity:.7}
  .app.prac .acts .skip{color:var(--muted)}
  .app.prac .acts .skip::before{content:'';width:20px;height:20px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h12M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h12M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
  .app.prac .acts .btn{grid-column:1 / -1;width:100%;min-height:52px;padding:12px 18px;font-size:17px;border-radius:14px;justify-content:center}
  /* keyboard up (body.kbd): no top bar, no tools row, a slimmer "Verifică" */
  body.kbd .top{display:none}
  body.kbd .app.prac .fmid button,body.kbd .app.prac .acts .skip{display:none}
  body.kbd .app.prac .foot{padding:6px 0}
  body.kbd .app.prac .acts .btn{min-height:44px;padding:9px 18px;font-size:16px}
  /* Capitole: the chapters come right after the daily goal (the goal stepper and the counters live on Progres) */
  .app.hm .lead,.app.hm .stats,.app.hm .legend,.app.hm .gstep{display:none}
  .app.hm .goal .goal-top{border-bottom:none;padding-bottom:0;margin-bottom:0}
  .app.hm .ch{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:10px;min-height:0;padding:10px 12px}
  .app.hm .ch .r1{flex:1;min-width:0;margin:0;justify-content:flex-start}
  .app.hm .ch .r1 .nm{flex:1;min-width:0}
  .app.hm .ch .r2 .cbar{width:44px;flex:none}
  .app.hm .ch .r2 .cbar:has(i[style="width:0%"]){display:none}
  .app.hm .ch .r2{flex:none;margin:0;gap:8px;font-size:12px}
  .app.hm .ch .r2>span:first-child{display:none}
  .app.hm .chapters{gap:8px}
  /* Teste, Simulare, Teme: the title is enough, the long intro goes */
  .app.sim .sim-start>.eyebrow,.app.sim .sim-start>.lead{display:none}
  .app.sim .sim-start>h1{margin-top:4px}
  .ts-new .tm-nh{display:none}
  .ts-new .tm-nh+.ts-row{border-top:none;padding-top:0}
  .ts-new{padding-top:16px!important}
  .ts-prow .ts-h:not(:has(button)),.ts-new .ts-h:empty{display:none}
  .ts-kinds{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding:2px 4px}
  .ts-kinds::-webkit-scrollbar{display:none}
  .ts-kinds button{flex:none}
  /* Simulare: no intro chips; the grid becomes one row of chips per year ("Iunie · V3"), no sideways scrolling */
  .sx-head .eyebrow,.sx-head .lead,.sx-chips,.sx .sx-sub,.gt-leg{display:none!important}
  .sx-head{margin-bottom:8px}
  .gt-wrap{overflow:visible;border:none!important;background:none!important}
  .gt-t,.gt-t tbody{display:block}
  .gt-t thead{display:none}
  .gt-t tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 0;border-top:1px solid var(--line)}
  .gt-t tbody tr:first-child{border-top:none}
  .gt-t tbody th{display:flex;align-items:baseline;gap:8px;width:100%;padding:0 0 2px;border:none}
  .gt-t tbody th b{font-size:17px;line-height:22px;display:inline}
  .gt-t td{display:block;padding:0;border:none!important}
  .gt-t td:has(.gt-none){display:none}
  .gt-cells{display:flex;flex-wrap:wrap;gap:6px}
  .gt-sq{width:auto;height:auto;flex-direction:row;align-items:baseline;gap:0;padding:7px 12px;border-radius:999px}
  .gt-sq b{font-size:14px;line-height:18px}
  .gt-sq span{font-size:12px;margin-left:8px}
  .gt-sq.todo span{display:none}
  .gt-ss{display:inline;font-style:normal;font-size:13px;font-weight:700}
  .gt-sel{position:sticky;bottom:calc(62px + env(safe-area-inset-bottom,0px));z-index:3;padding-top:8px;background:linear-gradient(transparent,var(--bg) 14px)}
  @media (max-width:300px){.top .brand .bname{display:none!important}}
  /* landing: the message stays, the big demo pictures go (they are made for wide screens) */
  .hero .ai-badge,.aif-arrow,.aif-l,#sim .lx-card,#unelte .tools-row,#surse .loaded{display:none!important}
  .aif-demo{gap:12px}
  .lx{gap:0!important;padding-block:8px}
  /* Teme: the whole simulations scroll sideways in one row instead of a 25-card wall */
  .tm-new .tm-nh{display:none}
  .tm-new{padding-top:14px!important}
  .tm-th span,.tm-th [data-tq="2"],.tm-th [data-tq="3"]{display:none}
  .tm-th{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .tm-tq{margin:0}
  .tm-filt{display:flex!important;flex-wrap:wrap;gap:8px}
  .tm-filt .tm-pills{width:100%}
  .tm-filt select{flex:1 1 40%;min-width:0;width:auto}
  .tm-filt .tm-tog{flex:1 1 100%}
  .tm-filt #tm-rand{flex:none}
  .tm-tp{display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:8px;scrollbar-width:none;margin-inline:-14px;padding:2px 14px 6px;scroll-snap-type:x proximity}
  .tm-tp::-webkit-scrollbar{display:none}
  .tm-tp .tm-tt{flex:none;width:150px;scroll-snap-align:start}
  .tm-new .tm-foot{flex-wrap:nowrap}
  .tm-new .tm-foot>span,.tm-new .tm-foot>p{flex:1;min-width:0;font-size:14px;line-height:19px}
  .ts-new .tm-foot{flex-wrap:nowrap}
  .ts-new .tm-foot #ts-cnt{flex:1;min-width:0;font-size:14px}
}

/* ---------- top bar: MateSim always in the middle; Teme lives in the account menu on phones and tablets ---------- */
.ph-start{display:none}
.m-teme,.m-res{display:none}
@media (min-width:701px){
  .top-in{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .top-l{justify-self:start;min-width:0}
  .top-r{justify-self:end}
  .top-in>.brand{margin:0!important;justify-self:center}
}
@media (min-width:701px) and (max-width:1500px){
  .top-in{gap:10px}
  #nav-teme{display:none!important}
  .m-teme{display:flex}
  .top-nav{gap:0}.top-nav .linkbtn,.top-nav>button{padding-left:8px!important;padding-right:8px!important}
  #nav-start{padding:0 12px}#nav-start .ns-l{display:none}#nav-start .ns-s{display:inline!important}
  .acct.out .acct-up{display:none!important}
}
@media (min-width:701px) and (max-width:1100px){#nav-res2{display:none!important}.m-res{display:block}}
@media (min-width:701px) and (max-width:900px){
  .top-in{gap:8px;padding-left:12px!important;padding-right:12px!important}
  .top .explore{font-size:14px;padding-left:8px;padding-right:6px}
  .top .top-nav .linkbtn{font-size:13.5px;padding-left:6px!important;padding-right:6px!important}
  .top-in>.brand{font-size:19px}.top-in>.brand .logo{width:30px;height:30px}
  #nav-start{padding:0 10px;font-size:14px}
}
@media (max-width:700px){
  .top-in{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px!important}
  .top-l{display:flex!important;justify-self:start;min-width:0}
  .top-l .menu-wrap,.top-l .top-nav{display:none!important}
  .ph-start{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;font-size:14px;font-weight:800;border-radius:10px;white-space:nowrap}
  .ph-start svg{width:16px;height:16px;flex:none}
  /* both corner buttons as quiet pills on the dark bar: visible, but the brand stays the centre */
  .top .ph-start.btn-acc,.acct.out .acct-in{height:36px;padding:0 12px!important;border-radius:999px;background:rgba(255,255,255,.1)!important;border:1.5px solid rgba(255,255,255,.28)!important;color:#fff!important;box-shadow:none!important;font-size:14px!important;font-weight:800}
  .top .ph-start.btn-acc{width:36px;padding:0!important;justify-content:center;font-size:0!important;gap:0}
  .top .ph-start.btn-acc svg{color:var(--sun);width:19px;height:19px}
  .top .ph-start.btn-acc:active,.acct.out .acct-in:active{background:rgba(255,255,255,.2)!important}
  .acct.out .acct-in{width:36px;padding:0!important;justify-content:center}.acct-in .ai-m{align-items:center}.acct-in .ai-m svg{width:19px;height:19px;flex:none}
  .top-in>.brand{margin:0!important;justify-self:center}
  .top-r{justify-self:end;min-width:0}
  .acct.out .acct-up{display:none!important}
  .m-teme{display:flex}
  .tabbar{grid-template-columns:repeat(5,1fr)!important}
  #tb-teme{display:none!important}
}
@media (max-width:380px){.ph-start{padding:0 9px;font-size:13px;gap:4px}.top .brand{font-size:17px}.top .logo{width:26px;height:26px}}
.m-teme .m-n{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--tm,#f08c00);color:#fff;font-size:12px;font-weight:800;display:inline-grid;place-items:center}

/* phones, practice page: the tools sit in one centred row whatever their number (an EN multiple-choice item has no
   "Mă notez singur", and four fixed columns left a gap on the right); "Verifică" stays full width below; the long
   "Ai găsit o greșeală?" line goes (the "?" in the card's corner does the same) */
@media (max-width:700px){
  .app.prac .foot{display:flex;flex-wrap:wrap;justify-content:center}
  .app.prac .fmid button:not([hidden]),.app.prac .acts .skip{flex:1 1 0;max-width:calc(25% - 4.5px)}
  .app.prac .acts .btn{flex:1 1 100%}
  .app.prac .rep-line{display:none}
}

/* phones, practice page: the page fills the screen and the tools + "Verifică" sit at the bottom even when the
   exercise is short (an EN multiple-choice item ended with a third of the screen empty under "Verifică"); a long
   exercise (Subiectul III, with the calculator) scrolls as before and the bar stays sticky */
@media (max-width:700px){
  .app.prac{display:flex;flex-direction:column;min-height:calc(100dvh - var(--toph,56px))}
  .app.prac>main{flex:1 0 auto;display:flex;flex-direction:column}
  .app.prac>main>.pl{flex:1 0 auto;display:flex;flex-direction:column}
  .app.prac>main>.pl>section{flex:1 0 auto;display:flex;flex-direction:column}
  .app.prac>main>.pl>section>.foot{margin-top:auto}
}
/* phones, multiple choice: the options one under another, full width and taller (a 2×2 grid squeezed long
   expressions), and the exercise card reaches down to the tools, so no empty band sits between them */
@media (max-width:700px){
  .app.prac .mcq{grid-template-columns:1fr!important;gap:10px}
  .app.prac .mcq button{min-height:56px}
  .app.prac>main>.pl>section>.ex-card{flex:1 0 auto}
}
/* phones, zoom like app-like sites: no double-tap zoom (and no tap delay) on the page, no sideways rubber band;
   pinching in to read a formula still works (js/boot.js stops iOS's zoom into a field and pinching out below the page) */
@media (max-width:700px){
  html{touch-action:manipulation;overscroll-behavior-x:none}
}