/* Square seal calculator. Loads after /styles.css and /planetary-hours/hours.css. */
.sg-controls input[type="text"] { min-width: min(18rem, 100%); text-transform: uppercase; }
.sg-info { margin: 0 0 1.4rem; color: var(--muted); font-size: .92rem; }

.sg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem; align-items: start; }
.sg-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sg-table th { text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: .3rem .4rem; border-bottom: 1px solid var(--ink); }
.sg-table td { padding: .35rem .4rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sg-table td:first-child { font-family: var(--serif); font-size: 1.1rem; }
.muted { color: var(--muted); }
.sg-seq { margin: 1.1rem 0 0; font-size: 1rem; }

.sg-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sg-fig { margin: 0; }
.sg-fig figcaption { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.sg-fig svg { width: 100%; height: auto; display: block; background: var(--paper); border: 1px solid var(--line); }
.sq-cell { fill: none; stroke: var(--line); stroke-width: 1; }
.sq-num { fill: var(--muted); text-anchor: middle; dominant-baseline: central; font-family: var(--sans); }

.sg-sigil { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.sg-sigil h3 { margin: 0 0 .4rem; font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.sg-strike { font-family: var(--serif); font-size: 1.6rem; letter-spacing: .12em; margin: .8rem 0 .3rem; word-break: break-all; }
.sg-strike .struck { color: var(--muted); opacity: .55; }
.sg-strike .kept { color: var(--ink); }

@media (max-width: 860px) {
  .sg-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sg-controls input[type="text"] { min-width: 0; width: 100%; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }