/* Hermetic Cloud · Kameas and sigils. Page styles only; the palette, type and components come from
   styles.css and css/components.css. */

.km-wrap{max-width:1480px;margin:0;padding:1.8rem 2.5rem 3rem;display:grid;
  grid-template-columns:minmax(0,1fr) 250px;gap:2.6rem;align-items:start}
.km-wrap main section{margin:0 0 3.2rem;scroll-margin-top:calc(var(--hc-nav-h,110px) + 14px)}
.km-wrap main h2{font-family:var(--ff-display);font-weight:500;font-size:1.7rem;letter-spacing:.015em;margin:0 0 .5em}
.km-wrap main p{max-width:72ch;font-size:1.05rem;line-height:1.6}

/* the rail */
.km-side{position:sticky;top:calc(var(--hc-nav-h,110px) + 14px);display:grid;gap:1.4rem}
.km-side nav{display:grid;gap:.1rem}
.km-side nav a{font-family:var(--ff-ui);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);text-decoration:none;padding:.42rem 0;border-bottom:1px solid var(--line)}
.km-side nav a:hover,.km-side nav a:focus-visible{color:var(--gold)}
.km-facts{display:grid;gap:.34rem;font-size:.92rem;color:var(--ink2)}
.km-facts b{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);font-weight:400;display:block}

/* the planet chooser */
.km-planets{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem}
.km-planets button{font-family:var(--ff-ui);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:var(--ink2);border:1px solid var(--line);padding:.55rem .85rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.45rem;min-height:40px}
.km-planets button .g{font-size:15px;line-height:1;color:var(--gold)}
.km-planets button:hover{border-color:var(--gold);color:var(--ink)}
.km-planets button[aria-pressed="true"]{border-color:var(--gold);color:var(--ink);background:var(--card)}
.km-planets button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* the square */
.km-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:2rem;align-items:start}
.km-figure{position:relative}
.km-figure svg{display:block;width:100%;height:auto;max-width:100%;
  max-height:calc(100vh - var(--hc-nav-h,110px) - 13rem)}
.km-cell rect{fill:var(--card);stroke:var(--line);stroke-width:1.2}
.km-cell text{font-family:var(--ff-ui);font-size:26px;fill:var(--ink2);text-anchor:middle;dominant-baseline:central}
.km-cell.on rect{fill:rgba(196,162,101,.16);stroke:var(--gold)}
.km-cell.on text{fill:var(--ink)}
.km-cell.step rect{fill:rgba(196,162,101,.28);stroke:var(--gold)}
.km-cell.step text{fill:var(--ink)}
.km-hit{fill:transparent;stroke:transparent;pointer-events:all;cursor:pointer}
.km-hit:focus-visible{outline:none;stroke:var(--gold);stroke-width:2}
.km-trace{fill:none;stroke:var(--gold);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.km-mark{fill:none;stroke:var(--gold);stroke-width:3}
.km-start{fill:var(--bg);stroke:var(--gold);stroke-width:3}

/* the panel beside the figure */
.km-panel{border:1px solid var(--line);background:var(--card);padding:1.1rem 1.2rem}
.km-panel .k{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 .5rem}
.km-panel h3{font-family:var(--ff-display);font-weight:500;font-size:1.25rem;margin:0 0 .6rem;letter-spacing:.015em}
.km-panel dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:0;font-size:.95rem}
.km-panel dt{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:.22rem}
.km-panel dd{margin:0;color:var(--ink2)}

/* the names */
.km-names{width:100%;border-collapse:collapse;font-size:.98rem;margin:0 0 1rem}
.km-names th{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);font-weight:400;text-align:left;padding:.5rem .8rem .5rem 0;border-bottom:1px solid var(--line2)}
.km-names td{padding:.55rem .8rem .55rem 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink2)}
.km-names td.n{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.km-names td.h{font-family:var(--ff-heb,var(--ff-body));font-size:1.3rem;direction:rtl;text-align:right;
  white-space:nowrap;color:var(--ink)}
.km-names td.nm{color:var(--ink)}
.km-names .km-role{color:var(--mute)}
.km-names button.t{font-family:var(--ff-ui);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;border:1px solid var(--line);color:var(--mute);padding:.3rem .55rem;cursor:pointer;white-space:nowrap}
.km-names button.t:hover{border-color:var(--gold);color:var(--ink)}
.km-note{font-size:.95rem;color:var(--ink2);max-width:72ch}

/* the tracer */
.km-form{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end;margin:0 0 1.4rem}
.km-field{display:grid;gap:.3rem}
.km-field label{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.km-field input,.km-field select{background:var(--bg);color:var(--ink);border:1px solid var(--line);
  font-family:var(--ff-body);font-size:1.05rem;padding:.5rem .7rem;min-height:40px}
.km-field input{font-family:var(--ff-heb,var(--ff-body));font-size:1.25rem;direction:rtl;text-align:right;min-width:13rem}
.km-field input:focus,.km-field select:focus{outline:none;border-color:var(--gold)}
.km-keys{display:flex;flex-wrap:wrap;gap:.25rem;margin:0 0 1.2rem}
.km-keys button{font-family:var(--ff-heb,var(--ff-body));font-size:1.15rem;background:transparent;color:var(--ink2);
  border:1px solid var(--line);min-width:38px;min-height:38px;cursor:pointer;line-height:1}
.km-keys button:hover{border-color:var(--gold);color:var(--ink)}
.km-keys button.clear{font-family:var(--ff-ui);font-size:10px;letter-spacing:.1em;text-transform:uppercase;min-width:66px}
.km-steps{font-size:.95rem;color:var(--ink2);max-width:72ch}
.km-steps ol{margin:.4rem 0 0;padding-left:1.2rem}
.km-steps li{margin:.18rem 0}
.km-rule{font-size:.95rem;color:var(--ink2);max-width:72ch;border-left:2px solid var(--gold);padding-left:.9rem;margin:1rem 0}
.km-empty{color:var(--mute);font-size:.95rem}

/* the rose */
.km-rose circle.petal{fill:var(--card);stroke:var(--line);stroke-width:1.4}
.km-rose circle.petal.on{fill:rgba(196,162,101,.2);stroke:var(--gold)}
.km-rose text.pl{font-family:var(--ff-heb,var(--ff-body));font-size:26px;fill:var(--ink2);text-anchor:middle;dominant-baseline:central}
.km-rose circle.petal.on + text.pl,.km-rose text.pl.on{fill:var(--ink)}
.km-rose circle.ring{fill:none;stroke:var(--line);stroke-width:1}

/* the fold */
details.km-fold{border-top:1px solid var(--line);margin:2.4rem 0 0}
details.km-fold summary{font-family:var(--ff-ui);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);padding:.9rem 0;cursor:pointer;list-style:none}
details.km-fold summary::-webkit-details-marker{display:none}
details.km-fold summary::before{content:"+ ";color:var(--gold)}
details.km-fold[open] summary::before{content:"\2013 "}
details.km-fold p{font-size:.98rem;color:var(--ink2)}

@media (max-width:1100px){
  .km-board{grid-template-columns:minmax(0,1fr)}
  .km-figure svg{max-height:none}
}
@media (max-width:900px){
  .km-wrap{grid-template-columns:minmax(0,1fr);padding:1.4rem 1.2rem 2.4rem;gap:1.8rem}
  .km-side{position:static;order:2;border-top:1px solid var(--line);padding-top:1.2rem}
}
@media (max-width:560px){
  .km-wrap{padding:1.2rem 1rem 2rem}
  .km-planets button{min-height:44px}
  .km-keys button{min-width:44px;min-height:44px}
  .km-names td.h{font-size:1.15rem}
  .km-cell text{font-size:30px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}