/* Smartin Kompas: interaktivní lodní kompas (stránka kompas.html). Používá tokeny ze styles.css. */
#kompas-demo,.skins{--panel:#07090A;--glow:rgba(10,186,181,.55)}
/* atribut hidden musí vyhrát nad display:flex/grid u bloků níž */
#kompas-demo [hidden]{display:none!important}
/* ===== Lodní kompas (samostatný blok, přenositelný na web) ===== */
.kd{border:1px solid var(--ink-line);border-radius:6px;background:radial-gradient(120% 70% at 50% 0%,#0d1314 0%,var(--black) 60%);overflow:hidden}
.kd-tabs{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--ink-line)}
.kd-tablist{display:grid;grid-template-columns:1fr 1fr}
.kd-tabs .kd-full-btn{width:48px;font-size:18px;letter-spacing:0;text-transform:none;color:var(--gray-300);border-left:1px solid var(--ink-line)}
.kd-tabs .kd-full-btn:hover{color:var(--tiffany)}
/* celá obrazovka */
.kd.full{position:fixed;inset:0;z-index:1000;border:0;border-radius:0;overflow-y:auto;overscroll-behavior:contain}
.kd.full .housing{width:min(100%,640px,calc(100vh - 220px));min-width:280px}
@media (min-width:900px){
  .kd.full{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,1fr);grid-template-rows:repeat(7,auto) 1fr;align-content:start}
  .kd.full > *{grid-column:2}
  .kd.full .kd-wheel{grid-column:1;grid-row:1 / span 8;min-height:100vh;border-block:0;border-right:1px solid #0c1517;padding:32px}
  .kd.full .housing{width:min(100%,760px,calc(100vh - 64px))}
}
.kd-tabs button{background:none;border:0;padding:14px 12px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-400);cursor:pointer;border-bottom:2px solid transparent}
.kd-tabs button[aria-selected="true"]{color:var(--tiffany);border-bottom-color:var(--tiffany)}
.kd-tabs button:focus-visible{outline:2px solid var(--tiffany);outline-offset:-2px}
.kd-idea{font-size:15px;color:var(--line);padding:16px 20px 0}
.kd-idea b{color:var(--white)}
.kd-wheel{position:relative;display:grid;place-items:center;padding:40px 16px 36px;overflow:hidden;background:#01060a;border-block:1px solid #0c1517}
.sea{position:absolute;inset:0;width:100%;height:100%;display:block}
.housing{position:relative;width:min(100%,360px);aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 20deg,#8d979a,#3b4346 12%,#c9d1d3 22%,#4a5356 35%,#a8b1b3 48%,#30373a 60%,#bfc7c9 72%,#454d50 85%,#8d979a);
  box-shadow:0 34px 48px -12px rgba(0,0,0,.95),0 0 0 1px #0a0d0e,0 0 60px rgba(10,186,181,.08),inset 0 2px 3px rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.6);
  animation:bob 7s ease-in-out infinite}
.housing::after{content:"";position:absolute;inset:8.6%;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(0,0,0,.7),inset 0 8px 16px rgba(0,0,0,.85)}
/* Rámeček 4,2 % z velikosti kompasu. Procentní padding by se počítal z šířky okolí a Safari by kompas na širších displejích (iPad) protáhl do výšky. */
.housing svg{position:absolute;left:4.2%;top:4.2%;width:91.6%;height:91.6%;display:block;overflow:visible}
@supports not (aspect-ratio:1){.housing::before{content:"";display:block;padding-top:100%}}
.dome{position:absolute;inset:8.8%;border-radius:50%;pointer-events:none;
  background:radial-gradient(55% 38% at 33% 22%,rgba(255,255,255,.20),rgba(255,255,255,0) 70%),radial-gradient(18% 10% at 72% 80%,rgba(255,255,255,.07),transparent 70%),radial-gradient(120% 120% at 50% 125%,rgba(10,186,181,.08),transparent 50%)}
.bolt{position:absolute;width:3.6%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f4f7f7,#7d8789 45%,#1d2224);box-shadow:0 1px 1.5px rgba(0,0,0,.8)}
.bolt::after{content:"";position:absolute;left:20%;right:20%;top:46%;height:1px;background:rgba(0,0,0,.6);transform:rotate(35deg)}
.b1{top:14.3%;left:14.3%}.b2{top:14.3%;right:14.3%}.b3{bottom:14.3%;left:14.3%}.b4{bottom:14.3%;right:14.3%}
@keyframes bob{0%,100%{transform:rotate(-1.4deg) translateY(0)}50%{transform:rotate(1.4deg) translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.housing{animation:none}}
.wedge{cursor:pointer;outline:none}
.wedge path.fill{transition:fill .6s ease, stroke .3s}
.wedge:hover path.fill{filter:brightness(1.2)}
.wedge:focus-visible path.fill,.wedge[aria-pressed="true"] path.fill{stroke:var(--tiffany);stroke-width:2.5;stroke-dasharray:none}
.wedge text{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;pointer-events:none;transition:fill .6s}
.deg{font-family:var(--mono);font-size:7.5px;fill:var(--gray-400);letter-spacing:.04em}
.hub{cursor:pointer;outline:none}
.hub:focus-visible{stroke:var(--tiffany);stroke-width:2}
@media (prefers-reduced-motion:reduce){.wedge path.fill,.wedge text{transition:none}}

/* digitální displej kurzu */
.kd-display{margin:6px 20px 14px;border:1px solid #1d2a2b;border-radius:6px;background:linear-gradient(180deg,#040808,#081112);padding:12px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 24px rgba(10,186,181,.06);font-family:var(--mono);font-variant-numeric:tabular-nums}
.disp-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.disp-k{font-size:10.5px;letter-spacing:.18em;color:#5f8f8d;text-transform:uppercase}
.disp-big{font-size:26px;font-weight:600;color:var(--tiffany);text-shadow:0 0 12px var(--glow);letter-spacing:.04em}
.disp-target{font-size:15px;font-weight:600;color:var(--tiffany-light);text-shadow:0 0 10px var(--glow);letter-spacing:.12em;text-transform:uppercase}
.disp-log{margin-top:8px;padding-top:8px;border-top:1px dashed #1d2a2b;font-size:12.5px;line-height:1.55;color:#9fc9c6;min-height:3.1em}
.disp-log .wk{color:var(--tiffany);margin-right:8px}
.kd-controls{display:flex;align-items:center;gap:14px;padding:0 20px 14px;flex-wrap:wrap}
.play{display:inline-flex;align-items:center;gap:8px;background:var(--tiffany);color:var(--black);border:0;border-radius:4px;padding:8px 14px;font-weight:700;font-size:14px;cursor:pointer}
.play:hover{background:var(--tiffany-light)}
.play:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.pips{display:flex;gap:6px;flex:1;min-width:150px}
.pips button{flex:1;height:22px;border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;gap:3px;align-items:stretch}
.pips button i{height:3px;border-radius:2px;background:var(--ink-line);transition:background .3s}
.pips button span{font-family:var(--mono);font-size:9.5px;color:var(--gray-400);text-align:center}
.pips button[aria-current="true"] i,.pips button.done i{background:var(--tiffany)}
.pips button[aria-current="true"] span{color:var(--tiffany)}
.pips button:focus-visible{outline:1px solid var(--tiffany)}
.kd-legend{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;padding:0 20px 14px;font-family:var(--mono);font-size:11px;color:var(--gray-400)}
.kd-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:0}

.kd-card{border-top:1px solid var(--ink-line);padding:20px;display:flex;flex-direction:column;gap:14px}
.kd-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.kd-card h3{font-size:22px;font-weight:900;letter-spacing:-.02em}
.chip{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:4px;border:1px solid currentColor}
.q{font-size:16px;color:var(--white)}
.start-here{font-family:var(--mono);font-size:12px;color:var(--black);background:var(--tiffany);padding:6px 10px;border-radius:4px;align-self:flex-start}
.rows{display:grid;gap:10px;margin:0}
.rows div{display:grid;grid-template-columns:118px 1fr;gap:12px;font-size:14.5px;line-height:1.55;border-top:1px solid var(--ink-2);padding-top:10px}
.rows dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400);padding-top:3px}
.rows dd{margin:0;color:var(--line);min-width:0}
@media (max-width:420px){.rows div{grid-template-columns:1fr;gap:2px}}
.dots{display:inline-flex;gap:4px;vertical-align:middle;margin-right:8px}
.dots span{width:10px;height:10px;border-radius:50%}
.dots .r{background:var(--tiffany)}
.dots .o{border:1.5px solid var(--gray-400)}

/* ukázka vzhledů v sekci pluginu */
.skins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.skin-tile{background:var(--black);border:1px solid var(--black);border-radius:6px;padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;overflow:hidden}
.skin-tile span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-300)}
.skin-tile .housing{width:100%;animation:none}
.skin-tile.kd.clean .housing svg{left:0;top:0;width:100%;height:100%}
.skin-tile.own{background:transparent;border:1.5px dashed var(--gray-400);justify-content:center}
.skin-tile.own b{font-size:36px;font-weight:400;color:var(--muted);line-height:1}
.skin-tile.own span{color:var(--muted)}
/* čistý vzhled */
.kd.clean{background:var(--black)}
.kd.clean .kd-wheel{background:transparent;border-block:0;padding:24px 16px 12px}
.kd.clean .sea,.kd.clean .dome,.kd.clean .bolt,.kd.clean .housing::after,.kd.clean .deco{display:none}
.kd.clean .housing{background:none;box-shadow:none;animation:none}
.kd.clean .housing svg{left:0;top:0;width:100%;height:100%}
.kd.clean [filter]{filter:none}
.kd.clean .kd-display{background:transparent;box-shadow:none;border-color:var(--ink-line)}
.kd.clean .disp-big,.kd.clean .disp-target{text-shadow:none}

/* vlastní nápad */
.own{padding:16px 20px 4px;display:flex;flex-direction:column;gap:12px}
.own label.t{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-400)}
.own textarea{width:100%;resize:vertical;min-height:58px;background:var(--panel);border:1px solid var(--ink-line);border-radius:6px;color:var(--white);font:inherit;font-size:15px;padding:10px 12px}
.own textarea:focus-visible{outline:none;border-color:var(--tiffany);box-shadow:0 0 0 3px rgba(10,186,181,.25)}
.own-list{display:grid;gap:6px}
.own-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;font-size:14.5px;border-top:1px solid var(--ink-2);padding-top:6px}
.own-row b{font-weight:700}
.own-row small{display:block;color:var(--gray-400);font-size:12.5px;line-height:1.4}
.seg{display:inline-flex;border:1px solid var(--ink-line);border-radius:4px;overflow:hidden}
.seg button{background:none;border:0;padding:6px 10px;font-family:var(--mono);font-size:11px;color:var(--gray-400);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"].k{background:var(--green);color:var(--white)}
.seg button[aria-pressed="true"].m{background:#22292a;color:var(--white)}
.seg button:focus-visible{outline:2px solid var(--tiffany);outline-offset:-2px}
@media (max-width:420px){.own-row{grid-template-columns:1fr}}
.cta{display:inline-block;background:var(--tiffany);color:var(--black);font-weight:700;text-decoration:none;padding:10px 16px;border-radius:4px;align-self:flex-start}
.cta:hover{background:var(--tiffany-light)}