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

.sg-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}
.sg-wrap main section{margin:0 0 3.2rem;scroll-margin-top:calc(var(--hc-nav-h,110px) + 14px)}
.sg-wrap main h2{font-family:var(--ff-display);font-weight:500;font-size:1.7rem;letter-spacing:.015em;margin:0 0 .5em}
.sg-wrap main p{max-width:72ch;font-size:1.05rem;line-height:1.6}

/* the rail */
.sg-side{position:sticky;top:calc(var(--hc-nav-h,110px) + 14px);display:grid;gap:1.4rem}
.sg-side nav{display:grid;gap:.1rem}
.sg-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)}
.sg-side nav a:hover,.sg-side nav a:focus-visible{color:var(--gold)}

/* the sentence */
.sg-field{display:grid;gap:.35rem;margin:0 0 1rem;max-width:72ch}
.sg-field label,.sg-k{font-family:var(--ff-ui);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.sg-field input{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--ff-body);font-size:1.15rem;padding:.6rem .8rem;min-height:44px;width:100%;box-sizing:border-box}
.sg-field input:focus{outline:none;border-color:var(--gold)}

.sg-modes{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}
.sg-btn{font-family:var(--ff-ui);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:var(--ink2);border:1px solid var(--line);border-radius:var(--radius);
  padding:.5rem .8rem;cursor:pointer;min-height:38px;line-height:1.1}
.sg-btn:hover{border-color:var(--gold);color:var(--ink)}
.sg-btn[aria-pressed="true"]{border-color:var(--gold);color:var(--ink);background:var(--card)}
.sg-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sg-btn[disabled]{opacity:.45;cursor:default}

/* the sentence reduced */
.sg-letters{font-family:var(--ff-display);font-size:1.3rem;letter-spacing:.08em;line-height:1.9;
  margin:0 0 .4rem;max-width:72ch;color:var(--ink);word-spacing:.5em}
.sg-letters .x{color:var(--mute);text-decoration:line-through;text-decoration-color:var(--gold);opacity:.55}
.sg-count{font-size:.95rem;color:var(--ink2);margin:0 0 1.6rem}

/* the board */
.sg-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:2rem;align-items:start}
.sg-figure{border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--card);
  box-shadow:inset 0 1px 0 var(--edge-hi);aspect-ratio:1/1;color:var(--ink);max-height:calc(100vh - var(--hc-nav-h,110px) - 6rem);
  margin:0 auto;width:100%;touch-action:none}
.sg-figure svg{display:block;width:100%;height:100%}
.sg-plain .sg-main{font-size:12px;padding:.8rem 1rem;border-color:var(--gold);color:var(--gold-ink);width:100%}
.sg-main:hover{background:var(--paper2)}
.sg-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:sg-draw .55s ease-out forwards}
@keyframes sg-draw{to{stroke-dashoffset:0}}
.sg-empty{font-family:var(--ff-ui);font-size:7px;letter-spacing:.12em;text-transform:uppercase;fill:var(--mute);text-anchor:middle}

/* the panel beside the board */
.sg-panel{border:1px solid var(--line);border-left:2px solid var(--gold);background:var(--card);
  padding:1.1rem 1.2rem;border-radius:0 var(--radius) var(--radius) 0;display:grid;gap:1.1rem}
.sg-panel .sg-k{margin:0 0 .45rem;display:block}
.sg-row{display:flex;flex-wrap:wrap;gap:.35rem}
.sg-range{display:grid;gap:.35rem}
.sg-range input{width:100%;accent-color:var(--gold)}
.sg-status{font-size:.9rem;color:var(--ink2);min-height:1.2em;margin:0}

/* the folds */
details.sg-fold{margin:1.2rem 0 0;border-top:1px solid var(--line);max-width:82ch}
details.sg-fold>summary{cursor:pointer;padding:11px 0;font-family:var(--ff-ui);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-ink);list-style:none;display:flex;align-items:center;gap:10px}
details.sg-fold>summary::-webkit-details-marker{display:none}
details.sg-fold>summary::before{content:"+";font-family:var(--ff-ui);font-size:13px;line-height:1;width:18px;height:18px;
  border:1px solid var(--line2);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--mute);flex:0 0 auto}
details.sg-fold[open]>summary::before{content:"\2212"}
details.sg-fold>summary:hover{color:var(--ink)}
details.sg-fold>div{padding:0 0 10px}
details.sg-fold>div>:first-child{margin-top:0}

@media (max-width:1000px){
  .sg-wrap{grid-template-columns:minmax(0,1fr);padding:1.2rem 1rem 2rem}
  .sg-side{position:static;order:-1}
  .sg-side nav{display:flex;flex-wrap:wrap;gap:.2rem 1rem}
  .sg-side nav a{border-bottom:0;padding:.2rem 0}
    .sg-board{grid-template-columns:minmax(0,1fr)}
  .sg-figure{max-height:none}
}
@media print{
  .hc-navwrap,.sg-side,.sg-panel,.sg-modes,.sg-field,.hc-footer,details.sg-fold{display:none!important}
  .sg-figure{border:0;box-shadow:none;background:#fff;color:#000}
}