/*
 * Hex Marks the Spot: live demos on the home page, loaded by index.html only.
 * Every value shown is a real output of the app's own formulas for #3CB371
 * (ColorCodeFormat.swift, ColorMath.swift). Recompute if those formulas change.
 */

.table-scroll { overflow-x: auto; }

/* =========================================================================
   Ten formats
   ========================================================================= */

.formats { border-collapse: collapse; width: 100%; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); }
.formats th, .formats td { text-align: left; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.formats tr:last-child th, .formats tr:last-child td { border-bottom: 0; }
.formats th { font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.formats td { font-family: var(--mono); font-size: 0.88rem; }
.formats caption { caption-side: bottom; text-align: left; font-size: 0.85rem; color: var(--ink-soft); padding-top: 0.6rem; }

/* =========================================================================
   Ramps and harmonies
   ========================================================================= */

.ramps { margin: 0; }
.ramp-block { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); }
.ramp { display: grid; grid-template-columns: repeat(9, 1fr); height: clamp(40px, 6vw, 52px); }
.ramp span, .harmony span { display: block; }
.ramps figcaption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.6rem; }

/* Site delight 3: point at a chip and an X marks it, in ink that reads on that chip. */
.ramp span { position: relative; color: #1B2430; cursor: crosshair; }
.ramp span.on-dark { color: #FBF6EA; }
.ramp span::before, .ramp span::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44%; max-width: 22px; height: 3px; border-radius: 2px;
    background: currentColor; opacity: 0;
    translate: -50% -50%;
}
.ramp span::before { rotate: 45deg; }
.ramp span::after { rotate: -45deg; }
.ramp span:hover::before, .ramp span:hover::after { opacity: 0.9; }
@media (prefers-reduced-motion: no-preference) {
    .ramp span::before, .ramp span::after { scale: 0.4; transition: opacity 120ms ease-out, scale 120ms ease-out; }
    .ramp span:hover::before, .ramp span:hover::after { scale: 1; }
}

.harmonies { display: grid; gap: 0.9rem; margin: 1.5rem 0 0; }
.harmonies div { display: grid; grid-template-columns: 8.5rem 1fr; align-items: center; gap: 0.75rem; }
.harmonies dt { font-size: 0.92rem; font-weight: 600; }
.harmonies dd { margin: 0; }
.harmony { display: flex; height: 32px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.harmony span { flex: 1; }
@media (max-width: 30rem) {
    .harmonies div { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* Swatch fills, computed with ColorMath for #3CB371 */
.c-ECF7F1{background:#ECF7F1}.c-D8F0E3{background:#D8F0E3}.c-C4E8D4{background:#C4E8D4}
.c-B1E1C6{background:#B1E1C6}.c-9ED9B8{background:#9ED9B8}.c-8AD1AA{background:#8AD1AA}
.c-76CA9C{background:#76CA9C}.c-63C28D{background:#63C28D}.c-50BB7F{background:#50BB7F}
.c-00B350{background:#00B350}.c-14B35B{background:#14B35B}.c-28B366{background:#28B366}
.c-3CB371{background:#3CB371}.c-50B37C{background:#50B37C}.c-63B387{background:#63B387}
.c-77B392{background:#77B392}.c-8BB39D{background:#8BB39D}.c-9FB3A8{background:#9FB3A8}
.c-06120B{background:#06120B}.c-0C2417{background:#0C2417}.c-123622{background:#123622}
.c-18482D{background:#18482D}.c-1E5A39{background:#1E5A39}.c-246B44{background:#246B44}
.c-2A7D4F{background:#2A7D4F}.c-308F5A{background:#308F5A}.c-36A166{background:#36A166}
.c-713CB3{background:#713CB3}.c-B3713C{background:#B3713C}.c-3CB3AC{background:#3CB3AC}
.c-43B33C{background:#43B33C}.c-B33C7E{background:#B33C7E}

/* =========================================================================
   A shared palette, as the plain text it is
   ========================================================================= */

.share-sample {
    margin: 1.25rem 0 0; padding: 1rem 1.2rem; overflow-x: auto;
    background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius);
    font: 0.88rem/1.55 var(--mono); white-space: pre-wrap;
}

/* =========================================================================
   Contrast samples keep their own fixed colors: they are measurements, not theme
   ========================================================================= */

.contrast-sample { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper-raised); box-shadow: var(--card-shadow); }
.contrast-sample + .contrast-sample { margin-top: 1.25rem; }
.contrast-text { background: #F2E8D5; padding: 1rem 1.2rem; margin: 0; max-width: none; font: 600 1.15rem/1.3 var(--serif); }
.contrast-text.t-2E3A48 { color: #2E3A48; }
.contrast-text.t-24693F { color: #24693F; }
.contrast-result { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.75rem 1.2rem; }
.ratio { font: 700 1.5rem var(--serif); min-width: 4.5rem; }
.badges { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.badges li { font-size: 0.82rem; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1.5px solid currentColor; }
.badges .pass { color: var(--green-ink); }
.badges .fail { color: var(--sepia); text-decoration: line-through; }

/* =========================================================================
   Keyboard shortcuts
   ========================================================================= */

.keys { border-collapse: collapse; width: 100%; max-width: 44rem; }
.keys th, .keys td { text-align: left; padding: 0.7rem 0.5rem; border-bottom: 1px dashed var(--rule); }
.keys th { width: 1%; padding-right: 1.5rem; white-space: nowrap; font-weight: 400; }
.keys .scope { font-size: 0.88rem; color: var(--ink-soft); }