/* Learnova's look for the login and admin pages: Nunito (learnova.se) and the whiteboard's pen colours
   (js/tillstand.js COLORS). The pastels are backgrounds and accents only; text in a colour uses the
   whiteboard's own darker blue (#3c6d87) for contrast (AA on white). */
@font-face{font-family:Nunito;src:url(/_la/nunito.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{
  --ink:#111111; --muted:#5a636b; --line:#e4e7eb; --bg:#f5f6f8; --card:#fff;
  --pink:#e9b7d6; --lilac:#bc8cbe; --blue:#9dc3d6; --green:#afd396; --yellow:#eee672; --orange:#f8c26d; --red:#e94856;
  --accent:var(--blue); --accent-text:#3c6d87; --accent-soft:#eef6fa; --danger:#b8323d;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Nunito,system-ui,sans-serif}
main{max-width:34rem;margin:10vh auto;padding:0 16px}
main.wide{max-width:60rem;margin-top:5vh}
/* Inloggningssidorna (html.la-fit + fit.js): låst sida, kortet följer den synliga ytan när tangentbordet är
   uppe på iPad. Får kortet inte plats scrollar main, inte sidan. */
html.la-fit,html.la-fit body{height:100%;overflow:hidden;overscroll-behavior:none}
html.la-fit body{position:fixed;inset:0;width:100%}
html.la-fit main{position:absolute;left:0;right:0;top:var(--vv-top,0px);height:var(--vv-h,100%);margin:0 auto;
  padding:min(10vh,64px) 16px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.card{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:28px;box-shadow:0 15px 44px #26374a1a;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--pink) 0 14.3%,var(--lilac) 0 28.6%,var(--blue) 0 42.9%,var(--green) 0 57.1%,var(--yellow) 0 71.4%,var(--orange) 0 85.7%,var(--red) 0)}
.brand{font-weight:800;font-size:1.05rem;letter-spacing:.02em;color:var(--ink);margin:6px 0 14px}
h1{font-size:1.5rem;font-weight:800;margin:0 0 12px}
h2{font-size:1.1rem;font-weight:800;margin:28px 0 10px}
a{color:var(--accent-text)}
p{margin:0 0 12px}
.muted{color:var(--muted);font-size:.92rem}
button,.button{font:inherit;font-weight:700;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:.6rem 1.3rem;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.button:hover{background:var(--accent-text)}
button.secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}
button.secondary:hover{background:var(--accent-soft)}
input,select{font:inherit;border:1px solid #c9d0cf;border-radius:10px;padding:.5rem .7rem;background:#fff;color:var(--ink);min-width:0}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:3px solid #78a8c3;outline-offset:2px}
form.row{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
form.row label{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:var(--muted)}
form.inline{display:inline;margin:0}
.choices{display:grid;gap:10px;margin-top:8px}
.choices .button{text-align:center}
.notice{background:#fdfbe3;border:2px solid var(--yellow);border-radius:14px;padding:16px 18px;margin:18px 0}
.code{font:700 1.6rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;user-select:all}
.error{color:var(--danger);font-weight:700}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{text-align:left;color:var(--muted);font-weight:700;border-bottom:1px solid var(--line);padding:8px 6px}
td{border-bottom:1px solid var(--line);padding:8px 6px;vertical-align:middle}
.status-ok{color:var(--accent-text);font-weight:700}
.status-off{color:var(--muted)}
.status-warn{color:#8a5a00;font-weight:700}
.table-wrap{overflow-x:auto}
.topbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-bottom:8px}
input[name=code]{width:min(19em,100%);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase}
/* /<app>/installera och /it (install.py) */
main.mid{max-width:44rem;margin-top:8vh}
.la-sub{text-align:center;font-size:.9rem;margin:-4px 0 8px}
.la-install{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start}
@media (max-width:560px){.la-install{grid-template-columns:1fr}}
.la-app-row{display:flex;gap:14px;align-items:center;margin:0 0 20px}
.la-app-row p{margin:0}
.la-app-name{font-weight:800;font-size:1.15rem}
.la-app-icon{border-radius:14px;flex:none}
button.la-big{font-size:1.05rem;padding:.75rem 1.6rem;margin:0 0 12px}
.la-steps{padding-left:1.4em;margin:0 0 12px}
.la-steps li{margin:0 0 8px}
.la-ico{width:1.2em;height:1.2em;vertical-align:-.2em;color:#0a84ff}
.la-qr-box{border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;width:172px}
.la-qr-box p{margin:8px 0 0;font-size:.85rem}
.la-qr svg{width:100%;height:auto;display:block}
.la-foot{margin:24px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.9rem}
pre{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;overflow-x:auto;font-size:.85rem}
code{font-size:.9em;word-break:break-all}
h3{font-size:1rem;font-weight:800;margin:18px 0 6px}