/* Klinicznik — responsive and accessibility styles
   Extracted from app.css without changing declarations or their cascade order. */

@media(max-width:950px){.app{grid-template-columns:1fr}.sidebar{height:auto;min-height:0;position:relative;padding:12px}.brand{padding-bottom:10px}.nav{display:flex;overflow:auto}.nav button{white-space:nowrap;padding:9px 11px}.sidefoot{display:none}.main{padding:22px 16px 40px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.two{grid-template-columns:1fr}}

@media(max-width:530px){.pageTitle{font-size:23px}.topbar{align-items:flex-start}.stats{gap:9px}.card{padding:15px}.statval{font-size:25px}.qtext{font-size:17px}.hero{padding:20px}.hero h2{font-size:22px}.toolbar .field{width:100%;flex:none}.toolbar select{flex:1}}

@media(max-width:950px){
  .app{display:block;width:100%;max-width:100%}
  .main{width:100%;max-width:100%}
}

@media(max-width:700px){
  html,body,#app{width:100%;max-width:100%;overflow-x:clip}
  .app{display:block;width:100%;max-width:100%;min-width:0}
  .sidebar{width:100%;max-width:100%;min-width:0}
  .main{width:100%;max-width:100%;min-width:0;padding-left:clamp(10px,3.5vw,14px);padding-right:clamp(10px,3.5vw,14px)}
  .topbar,.topactions,.card,.grid,.toolbar,.quizwrap,.qcard,.editor-form,.editor-grid,.proposal-card{min-width:0;max-width:100%}
  .topbar>*{min-width:0;max-width:100%}
  .pageTitle,.sub,.sectionTitle,.qtext,.proposal-card p{overflow-wrap:anywhere;word-break:normal}
  .toolbar>*{min-width:0;max-width:100%}
  .toolbar .field,.toolbar select,.field.search{width:100%;min-width:0;max-width:100%}
  .field,.editor-field .field{width:100%;min-width:0}
  .editor-grid{grid-template-columns:minmax(0,1fr)}
  .editor-field{min-width:0}
  .editor-field .field{width:100%;min-width:0}
  .proposal-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proposal-actions .btn{min-width:0;white-space:normal;overflow-wrap:anywhere}
  .row{min-width:0;flex-wrap:wrap}
  .row>*{min-width:0;max-width:100%}
  .table{display:block;width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
  .quizmeta{min-width:0;max-width:100%}
  .options,.option{min-width:0;max-width:100%}
  .option>*{min-width:0}
  .modalback{width:100%;max-width:100%;overflow-x:clip}
  .modal{width:100%;max-width:100%;min-width:0}
}

@media(max-width:380px){
  .proposal-actions{grid-template-columns:minmax(0,1fr)}
  .main{padding-left:10px;padding-right:10px}
}

@media(max-width:700px){
  body{font-size:14px}
  .app{display:block;min-height:100svh}
  .sidebar{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:1000;
    width:100%;height:auto;min-height:0;padding:6px 7px calc(6px + env(safe-area-inset-bottom));
    gap:0;border-top:1px solid #ffffff24;box-shadow:0 -8px 24px rgba(9,28,45,.16)
  }
  .brand,.sidefoot{display:none}
  .nav{
    display:flex;flex-direction:row;align-items:stretch;gap:3px;width:100%;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity
  }
  .nav::-webkit-scrollbar{display:none}
  .nav button{
    flex:0 0 78px;min-width:78px;min-height:52px;height:52px;
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;
    padding:5px 3px;border-radius:9px;text-align:center;white-space:normal;
    font-size:10px;line-height:1.08;font-weight:700;scroll-snap-align:start
  }
  .nav button span{font-size:15px;line-height:1}
  .nav button.active{box-shadow:inset 0 3px #50c6b4}
  .main{width:100%;padding:18px 13px calc(88px + env(safe-area-inset-bottom))}
  .topbar{display:flex;flex-direction:column;align-items:stretch;gap:11px;margin-bottom:16px}
  .pageTitle{font-size:25px;line-height:1.16;letter-spacing:-.6px}
  .sub{font-size:13px;line-height:1.4}
  .topactions{display:flex;width:100%;gap:7px;align-items:center;flex-wrap:wrap}
  .topactions .btn{flex:1 1 auto;min-width:0;min-height:42px;padding:9px 8px;font-size:12px}
  #klinicznikCloud{flex:1 0 100%;order:-1;margin:0;font-size:11px}
  .hero{padding:20px 18px;border-radius:15px;margin-bottom:13px}
  .hero h2{font-size:22px;line-height:1.2}
  .hero p{font-size:13px;line-height:1.5;margin-bottom:15px}
  .heroActions{display:grid;grid-template-columns:1fr;gap:8px}
  .heroActions .btn{width:100%;min-height:44px;justify-content:center}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:13px}
  .stats .card{padding:13px;min-height:94px}
  .statlabel{font-size:11px;line-height:1.3}
  .statval{font-size:25px;line-height:1.1;margin-top:8px}
  .grid{gap:11px}
  .two{grid-template-columns:minmax(0,1fr)}
  .card{padding:15px;border-radius:14px}
  .sectionTitle{font-size:16px;line-height:1.3}
  .toolbar{display:grid;grid-template-columns:1fr;gap:8px}
  .toolbar .field,.toolbar select,.field.search{width:100%;min-width:0;min-height:44px}
  .field,select,input,textarea{font-size:16px}
  .topiclist{gap:8px}
  .topic{padding:12px}
  .quizwrap{width:100%;max-width:100%}
  .quizmeta{align-items:flex-start;flex-wrap:wrap}
  .qcard{padding:16px}
  .qtext{font-size:18px;line-height:1.42;margin:12px 0 16px}
  .scenario{padding:12px;font-size:13px}
  .options{gap:8px}
  .option{min-height:54px;padding:13px 12px;gap:10px;font-size:14px;line-height:1.4}
  .option .letter{width:30px;height:30px;flex-basis:30px}
  .qactions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .qactions .btn{min-height:44px;padding:10px 8px}
  .qnav{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:2px 1px 7px;scrollbar-width:thin}
  .qnav button{flex:0 0 34px;height:34px;min-width:34px}
  .resultScore{font-size:38px}
  .table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .table th,.table td{padding:10px 8px}
  .modalback{align-items:end;padding:0}
  .modal{width:100%;max-width:none;max-height:88dvh;border-radius:18px 18px 0 0;padding:19px 16px calc(19px + env(safe-area-inset-bottom))}
  .empty{padding:24px 14px}
  #klinicznikAuth{padding:14px}
  #klinicznikAuth .authcard{width:100%;max-width:440px;padding:24px 20px;border-radius:16px}
  #klinicznikAuth h1{font-size:21px}
  #klinicznikAuth input{min-height:48px;font-size:16px}
  #klinicznikAuth button{min-height:48px}
}

@media(max-width:380px){
  .main{padding-left:10px;padding-right:10px}
  .pageTitle{font-size:23px}
  .stats{gap:7px}
  .stats .card{padding:11px;min-height:88px}
  .statval{font-size:23px}
  .nav button{flex-basis:73px;min-width:73px;font-size:9px}
  .qactions{grid-template-columns:1fr}
  .topactions .btn{font-size:11px;padding-left:6px;padding-right:6px}
}

@media(hover:none){
  .option:hover{background:#fff;border-color:var(--line)}
  .nav button:hover{background:transparent}
}

@media(max-width:700px){.editor-grid{grid-template-columns:1fr}.proposal-actions{display:grid;grid-template-columns:1fr 1fr}.proposal-actions .btn{width:100%;font-size:12px}.proposal-card{padding:12px}}

@media(max-width:700px){
  .app{display:block}
  .sidebar{padding:6px 7px calc(6px + env(safe-area-inset-bottom))}
  .brand,.sidefoot{display:none}
  .nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:4px;width:100%;overflow:visible}
  .nav button{display:flex;flex:initial;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;width:100%;min-height:58px;height:auto;padding:6px 3px;border-radius:10px;text-align:center;white-space:normal;font-size:10px;line-height:1.1}
  .nav button span{font-size:17px;line-height:1}
  .nav button.active{box-shadow:inset 0 3px #50c6b4}
  .learning-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .learning-card{min-height:148px;padding:12px;display:flex;flex-direction:column;gap:8px}
  .learning-icon{width:36px;height:36px;flex-basis:36px;font-size:18px}
  .learning-copy b{font-size:13px}
  .learning-copy small{font-size:11px;line-height:1.4}
  .learning-copy em{font-size:10px}
  .learn-heading{font-size:20px}
  .learn-spark{width:40px;height:40px;flex-basis:40px}
  .profile-card{align-items:flex-start;padding:14px}
  .profile-avatar{width:48px;height:48px;flex-basis:48px}
  .profile-setting-row{align-items:flex-start;flex-direction:column}
  .profile-actions{display:grid;grid-template-columns:1fr 1fr}
  .profile-actions .btn{width:100%;min-height:44px}
  .profile-logout{justify-content:stretch}
  .profile-logout .btn{width:100%;min-height:44px}
}

@media(max-width:360px){
  .learning-grid{grid-template-columns:minmax(0,1fr)}
  .learning-card{min-height:0;flex-direction:row}
}

@media (max-width:700px) {
  .ranking-scroll { width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  .ranking-table { min-width:620px; }
  .ranking-table th, .ranking-table td { white-space:nowrap; }
  .ranking-table th:first-child, .ranking-table td:first-child { white-space:normal; min-width:112px; }
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body { overscroll-behavior-x:none; }
  button, .btn, .nav button, .option { touch-action:manipulation; }
  button:focus-visible, a:focus-visible, select:focus-visible,
  input:focus-visible, textarea:focus-visible {
    outline:3px solid rgba(15,159,154,.38);
    outline-offset:2px;
  }
  .sidebar {
    padding-left:max(7px, env(safe-area-inset-left));
    padding-right:max(7px, env(safe-area-inset-right));
  }
  .nav { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .nav button { min-height:56px; }
  .main { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
  .card, .learning-card, .qcard, .proposal-card { overflow-wrap:anywhere; }
  .learning-grid { align-items:stretch; }
  .learning-card { min-width:0; }
  .option { min-height:56px; }
  .qactions .btn, .heroActions .btn, .topactions .btn {
    min-height:44px;
  }
  .modalback { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
  .modal { padding-bottom:calc(19px + env(safe-area-inset-bottom)); }
  .table { max-width:100%; }
}

@media (max-width:420px) {
  .main { padding-left:10px; padding-right:10px; }
  .topactions { gap:6px; }
  .topactions .btn { flex:1 1 calc(50% - 6px); }
  .stats .card { min-width:0; }
  .learning-grid { gap:8px; }
  .learning-card { padding:11px; }
  .qcard { padding:13px; }
  .option { padding:12px 10px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}