/* Rám aplikace Správa webu (obě stránky správy): na počítači černý panel vlevo, na telefonu černá lišta
   nahoře a záložky dole. Barvy z webu U Tomana (černá, bílá) + stavové: chmel = na webu, ležák = připravený, cihla = chybí. */
:root {
  --uhel:#0d0d0d; --bila:#fff; --dlazba:#e9eaea; --linka:#d6d8d8; --seda:#6b6f70;
  --chmel:#4f7a34; --lezak:#c4851a; --cihla:#b3261e;
  --disp:"Montserrat",sans-serif; --text:"Source Sans 3",system-ui,-apple-system,sans-serif;
}
body.framed { margin:0; background:var(--dlazba); color:var(--uhel); font:16px/1.45 var(--text); font-variant-numeric:tabular-nums; }
body.framed .fr-app { display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100vh; }
.fr-side { background:var(--uhel); color:#fff; padding:26px 18px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh; }
.fr-brand { display:flex; align-items:center; gap:12px; margin:0 6px 30px; color:#fff; text-decoration:none; }
.fr-brand img { height:46px; }
.fr-brand b { font:800 15px/1.15 var(--disp); letter-spacing:.14em; text-transform:uppercase; }
.fr-brand small { display:block; font:600 10px/1 var(--disp); letter-spacing:.28em; color:#9a9d9e; margin-top:5px; text-transform:uppercase; }
.fr-side a.fr-l { display:flex; justify-content:space-between; align-items:center; padding:11px 12px; border-radius:3px; text-decoration:none;
  font:600 13px/1 var(--disp); letter-spacing:.12em; text-transform:uppercase; color:#c9cbcc; }
.fr-side a.fr-l:hover { color:#fff; }
.fr-side a.fr-l.on { background:#fff; color:var(--uhel); }
.fr-dot { width:8px; height:8px; border-radius:50%; background:var(--cihla); display:none; }
.fr-alert .fr-dot { display:block; }
.fr-foot { margin-top:auto; font-size:13px; color:#9a9d9e; padding:0 12px; overflow-wrap:anywhere; }
.fr-foot a, .fr-foot button { display:block; padding:7px 0; font:600 14px/1.2 var(--text); color:#fff; text-decoration:none; background:none; border:0; cursor:pointer; text-align:left; }
.fr-foot a.on { text-decoration:underline; text-underline-offset:4px; }
.fr-top, .fr-tabs { display:none; }
.fr-main { padding:34px 44px 60px; min-width:0; }
.fr-main > .fr-in { max-width:1080px; }
body.framed .eyebrow { font:600 11px/1 var(--disp); letter-spacing:.28em; text-transform:uppercase; color:var(--seda); margin:0 0 10px; }
body.framed h1.fr-h { font:800 30px/1.05 var(--disp); letter-spacing:.06em; text-transform:uppercase; margin:0 0 26px; }
body.framed a:focus-visible, body.framed button:focus-visible, body.framed input:focus-visible, body.framed select:focus-visible, body.framed summary:focus-visible { outline:3px solid var(--lezak); outline-offset:2px; }

@media (max-width: 900px) {
  body.framed .fr-app { display:block; padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
  .fr-side { display:none; }
  .fr-top { display:flex; align-items:center; justify-content:space-between; background:var(--uhel); color:#fff; padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top)); position:sticky; top:0; z-index:5; }
  .fr-top img { height:30px; display:block; }
  .fr-top b { font:800 13px/1 var(--disp); letter-spacing:.16em; text-transform:uppercase; }
  .fr-top a.fr-set { width:36px; height:36px; border:1px solid #444; border-radius:50%; display:grid; place-items:center; }
  .fr-top a.fr-set.on { background:#fff; } .fr-top a.fr-set.on svg { stroke:var(--uhel); }
  .fr-tabs { display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; background:var(--uhel); padding:8px 6px calc(8px + env(safe-area-inset-bottom)); z-index:5; }
  .fr-tabs a { text-decoration:none; color:#9a9d9e; text-align:center; font:600 10px/1.1 var(--disp); letter-spacing:.08em; text-transform:uppercase; padding:4px 2px; position:relative; }
  .fr-tabs a svg { display:block; margin:0 auto 5px; width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; }
  .fr-tabs a.on { color:#fff; }
  .fr-tabs .fr-dot { position:absolute; top:2px; left:calc(50% + 8px); }
  .fr-main { padding:20px 16px 30px; }
  body.framed h1.fr-h { font-size:23px; margin-bottom:18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }