/* /obs-overlay/ builder and guides. Sits on top of /assets/global/home/site.css and only
   uses its colour tokens, so light and dark mode come for free. */

.ob-lede { color: var(--muted); font-size: 1.0625rem; margin-top: 12px; max-width: 68ch; }
.ob-try { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0.9375rem; color: var(--muted); }
.ob-try button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}
.ob-try button:hover { border-color: var(--line-strong); background: var(--surface-2); }
.ob-try .ic { width: 15px; height: 15px; }

/* Builder: settings on the left, preview and links on the right (stacked on phones) */
.ob-builder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 20px 0 40px; }
@media (min-width: 960px) {
    .ob-builder { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
    .ob-result { position: sticky; top: 16px; }
}
.ob-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px; }
.ob-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ob-form fieldset + fieldset { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.ob-form legend { padding: 0; font-weight: 700; font-size: 1.0625rem; margin-bottom: 12px; }
.ob-form fieldset[disabled] .ob-field { opacity: 0.55; }
.ob-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 14px; }
@media (min-width: 520px) { .ob-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ob-grid + .ob-grid { margin-top: 12px; }
.ob-field label, .ob-out-label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 6px; }
.ob-field .ob-opt { font-weight: 400; color: var(--muted); }
.ob-input,
.ob-form select,
.ob-copy input,
.ob-copy textarea {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    font: inherit;
    font-size: 0.9688rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
}
.ob-form select { padding-inline-end: 8px; cursor: pointer; }
.ob-input::placeholder { color: var(--muted); opacity: 1; }
.ob-input:focus, .ob-form select:focus, .ob-copy input:focus, .ob-copy textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--tint);
}
.ob-account { display: flex; gap: 8px; }
.ob-account .btn { height: 44px; padding: 0 16px; }
.ob-help { margin-top: 6px; font-size: 0.8125rem; color: var(--muted); min-height: 1.3em; }
.ob-help.is-ok { color: var(--text); }
.ob-help.is-error { color: var(--link); }
.ob-note { font-size: 0.875rem; color: var(--muted); margin-bottom: 12px; }
.ob-note[hidden] { display: none; }
.ob-colour { display: flex; gap: 8px; align-items: center; }
.ob-colour input[type="color"] {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 3px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--bg);
    cursor: pointer;
}
.ob-colour input[type="color"]:disabled { opacity: 0.4; cursor: default; }
.ob-hidden { display: none !important; }

/* Preview: a fake scene so a transparent overlay is visible at all */
.ob-scene-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ob-scene-bar h2 { font-size: 1.0625rem; }
.ob-scene-bar .chips { margin: 0; }
.ob-scene-bar .chip span { height: 30px; font-size: 0.8125rem; }
.ob-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 16px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--line);
    background-color: #2a2c31;
    background-image: linear-gradient(45deg, #34363c 25%, transparent 25%), linear-gradient(-45deg, #34363c 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #34363c 75%), linear-gradient(-45deg, transparent 75%, #34363c 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
/* dark text gets a light checkerboard, white text a dark one */
.ob-stage[data-scene="checker"][data-ink="dark"] {
    background-color: #e9eaec;
    background-image: linear-gradient(45deg, #d4d6da 25%, transparent 25%), linear-gradient(-45deg, #d4d6da 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d4d6da 75%), linear-gradient(-45deg, transparent 75%, #d4d6da 75%);
}
.ob-stage[data-scene="checker"][data-ink="dark"] .ob-empty { color: #3a3d44; }
.ob-stage[data-scene="dark"] { background: #0e0e10; }
.ob-stage[data-scene="light"] { background: #f2f2f2; }
.ob-stage[data-scene="game"] { background: linear-gradient(135deg, #1d3b53 0%, #3c6e71 45%, #d9a441 100%); }
.ob-frame-box { position: relative; flex: none; }
/* color-scheme must match the embed (light) or Chrome paints the frame opaque white */
.ob-frame-box iframe { display: block; border: 0; background: transparent; color-scheme: normal; transform-origin: 0 0; position: absolute; top: 0; left: 0; }
.ob-empty { max-width: 34ch; text-align: center; color: #e8e8ea; font-size: 0.9375rem; }
.ob-stage[data-scene="light"] .ob-empty { color: #3a3d44; }

.ob-links { margin-top: 16px; display: grid; gap: 14px; }
.ob-copy { display: flex; gap: 8px; align-items: stretch; }
.ob-copy input, .ob-copy textarea { font-family: var(--mono); font-size: 0.8125rem; background: var(--bg); }
.ob-copy textarea { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; line-height: 1.4; }
.ob-copy .btn-line { flex: none; min-height: 44px; }
.ob-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.875rem; color: var(--muted); }
.ob-meta strong { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* Guides */
.ob-section { margin: 8px 0 40px; }
.ob-section > h2 { font-size: 1.5rem; margin-bottom: 8px; }
.ob-section > p { color: var(--muted); max-width: 75ch; }
.ob-steps { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 860px) { .ob-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ob-step { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; }
.ob-step h3 { font-size: 1.125rem; margin-bottom: 10px; }
.ob-step ol { margin: 0; padding-inline-start: 20px; }
.ob-step li { margin-bottom: 8px; color: var(--text); }
.ob-step li::marker { color: var(--muted); }
.ob-step .ob-tip { margin-top: 10px; font-size: 0.875rem; color: var(--muted); }
.ob-params-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ob-params { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.ob-params th, .ob-params td { text-align: start; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ob-params tbody tr:last-child td { border-bottom: 0; }
.ob-params th { font-size: 0.8125rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.ob-params code { font-family: var(--mono); font-size: 0.8438rem; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.ob-section .spacenode-promo-card { margin-top: 16px; }
.ob-counters { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

[dir="rtl"] .ob-copy input, [dir="rtl"] .ob-copy textarea { direction: ltr; text-align: left; }

/* Phones: the options table becomes a list, one option per block */
@media (max-width: 600px) {
    .ob-params thead { display: none; }
    .ob-params, .ob-params tbody, .ob-params tr, .ob-params td { display: block; width: 100%; }
    .ob-params tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
    .ob-params tbody tr:last-child { border-bottom: 0; }
    .ob-params td { border: 0; padding: 2px 0; }
    .ob-params td:first-child code { font-weight: 700; }
    .ob-params td:last-child { color: var(--muted); font-size: 0.875rem; }
}