/* Talewright player styles. Hosts link this as _content/Talewright.Player/talewright.css.
   Colours are CSS variables so a host (or a future story theme) can override them. */

:root {
    --tw-bg: #faf8f3;
    --tw-fg: #222;
    --tw-muted: #6b6558;
    --tw-accent: #7a4b1f;
    --tw-panel: #f0ebe0;
    --tw-border: #d8cfbd;
    --tw-error: #a12020;
    --tw-warning: #8a6200;
    --tw-font: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    --tw-ui-font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tw-bg: #1c1a17;
        --tw-fg: #e8e2d6;
        --tw-muted: #a49c8c;
        --tw-accent: #e0a96d;
        --tw-panel: #26231f;
        --tw-border: #3d382f;
        --tw-error: #ff8080;
        --tw-warning: #f0c060;
    }
}

html, body {
    margin: 0;
    background: var(--tw-bg);
    color: var(--tw-fg);
    font-family: var(--tw-font);
    font-size: 18px;
    line-height: 1.6;
}

button { font: inherit; color: inherit; }
html { scroll-padding-top: var(--tw-toolbar-offset, 1rem); }

.tw-app { max-width: 72rem; margin: 0 auto; padding: 1rem 1.5rem 4rem; }

/* Library */
.tw-library h1 { font-size: 2.2rem; margin-bottom: 0.5rem; }
.tw-library h2 { font-family: var(--tw-ui-font); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tw-muted); margin-top: 2rem; }
.tw-story-list { list-style: none; padding: 0; }
.tw-story-title { display: block; font-weight: bold; }
.tw-story-origin { display: block; font-family: var(--tw-ui-font); font-size: 0.8rem; color: var(--tw-muted); }
.tw-error { color: var(--tw-error); }
.tw-resume { margin: 1rem 0; }
.tw-empty { color: var(--tw-muted); font-style: italic; }

/* Player layout */
.tw-bar { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: center; background: var(--tw-bg); border-bottom: 1px solid var(--tw-border); margin-bottom: 1rem; }
.tw-toolbar-feedback { grid-column: 1 / -1; min-width: 0; margin: 0 0 .5rem; overflow-wrap: anywhere; font-family: var(--tw-ui-font); font-size: .85rem; }
.tw-bar h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.5rem; margin: 0.5rem 0; }
.tw-bar-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.tw-bar-actions > .tw-link, .tw-overflow > .tw-link { min-width: 44px; min-height: 44px; padding: .25rem .5rem; }
.tw-overflow-actions { position: absolute; right: 0; top: 100%; box-sizing: border-box; min-width: min(10rem, 100%); max-width: 100%; padding: .5rem; background: var(--tw-panel); border: 1px solid var(--tw-border); border-radius: 6px; box-shadow: 0 3px 8px #0003; }
.tw-overflow-actions:not([hidden]) { display: grid; }
.tw-overflow-actions .tw-link { text-align: left; min-height: 44px; padding: .25rem .5rem; }
.tw-confirm { max-width: min(28rem, calc(100% - 4rem)); color: var(--tw-fg); background: var(--tw-panel); border: 1px solid var(--tw-border); border-radius: 6px; }
.tw-confirm::backdrop { background: #0008; }
.tw-confirm-actions { display: flex; gap: 1rem; }
@media (max-width: 52rem) {
    .tw-bar h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .tw-bar { grid-template-columns: minmax(0, 1fr); }
    .tw-bar-actions { flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
    .tw-bar-actions > .tw-link, .tw-overflow > .tw-link { font-size: .8rem; padding: .25rem; }
    .tw-bar-actions > .tw-quick-save { max-width: 3.5rem; }
}
@media (min-width: 360px) and (max-width: 52rem) {
    .tw-bar-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min-content, 1fr); width: 100%; }
    .tw-bar-actions > .tw-link, .tw-overflow > .tw-link { width: 100%; }
    .tw-bar-actions > .tw-quick-save { max-width: none; }
}
.tw-link { background: none; border: none; cursor: pointer; color: var(--tw-accent); font-family: var(--tw-ui-font); font-size: 0.9rem; padding: 0; }
.tw-link:hover { text-decoration: underline; }
.tw-link:disabled { color: var(--tw-muted); cursor: default; text-decoration: none; }
.tw-saves { box-sizing: border-box; width: min(36rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow: auto; overflow-wrap: anywhere; padding: 1rem; color: var(--tw-fg); background: var(--tw-panel); border: 1px solid var(--tw-border); border-radius: 6px; font-family: var(--tw-ui-font); }
.tw-saves::backdrop { background: #0008; }
.tw-saves fieldset { min-width: 0; border: 1px solid var(--tw-border); }
.tw-saves .tw-save-form { margin: 1rem 0; padding: .75rem; border-radius: 6px; background: var(--tw-bg); }
.tw-save-section { margin-top: 1.25rem; border-top: 1px solid var(--tw-border); padding-top: .75rem; }
.tw-save-section h3 { margin: 0; font-size: .9rem; }
.tw-save-list { display: grid; gap: .75rem; list-style: none; margin: .5rem 0 0; padding: 0; }
.tw-save-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: .75rem; border: 1px solid var(--tw-border); border-radius: 6px; background: var(--tw-bg); overflow-wrap: anywhere; }
.tw-save-list li strong { font-size: 1.05rem; }
.tw-save-kind { justify-self: start; padding: .1rem .4rem; border: 1px solid var(--tw-border); border-radius: 999px; color: var(--tw-muted); font-size: .8rem; }
.tw-saves input { box-sizing: border-box; max-width: 100%; color: var(--tw-fg); background: var(--tw-bg); border: 1px solid var(--tw-border); font: inherit; }
.tw-saves button { min-width: 0; overflow-wrap: anywhere; margin: 0.25rem; padding: 0.25rem 0.5rem; color: var(--tw-fg); background: var(--tw-panel); border: 1px solid var(--tw-border); border-radius: 4px; cursor: pointer; }
.tw-columns { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 2rem; align-items: start; }
.tw-columns[hidden] { display: none; }
.tw-history { max-width: 52rem; }
.tw-history-heading { outline: none; }
.tw-history-frame { border-top: 1px solid var(--tw-border); margin-top: 1rem; padding-top: 1rem; }
.tw-history-media { display: inline-block; max-width: 100%; vertical-align: middle; }
.tw-history-image { display: block; height: 18rem; max-width: 100%; overflow: auto; overflow-anchor: none; }
@media (max-width: 52rem) { .tw-columns { grid-template-columns: 1fr; } }

/* Transcript */
.tw-frame { outline: none; }
.tw-choices button { scroll-margin-top: 1rem; }
.tw-past { opacity: 0.7; }
.tw-scene-title { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; }
.tw-speech { margin-left: 1rem; }
.tw-speaker { font-variant: small-caps; font-weight: bold; margin-right: 0.5rem; }
.tw-note { font-family: var(--tw-ui-font); font-size: 0.85rem; color: var(--tw-muted); border-left: 3px solid var(--tw-border); padding-left: 0.75rem; margin: 0.25rem 0; }
.tw-chosen { color: var(--tw-accent); font-style: italic; }
.tw-the-end { font-size: 1.4rem; text-align: center; margin: 2rem 0 1rem; letter-spacing: 0.2em; text-transform: uppercase; }

/* Choices (also used for library buttons) */
.tw-choices { list-style: none; padding: 0; margin: 1.5rem 0; }
.tw-choices li, .tw-story-list li { margin: 0.5rem 0; }
.tw-choice { display: block; width: 100%; text-align: left; padding: 0.6rem 1rem; background: var(--tw-panel); border: 1px solid var(--tw-border); border-radius: 6px; cursor: pointer; }
.tw-choice:hover, .tw-choice:focus-visible { border-color: var(--tw-accent); }
.tw-choice-number { color: var(--tw-muted); margin-right: 0.5rem; }

.tw-media { display: inline-block; max-width: 100%; vertical-align: middle; }
.tw-media img { display: block; max-width: 100%; height: auto; min-width: 1px; min-height: 1px; }
.tw-media img[hidden] { display: none; }
.tw-media-error { display: inline-block; border: 1px solid currentColor; padding: .25em; }
.tw-media-strong { font-weight: bold; }
.tw-media-emphasis { font-style: italic; }
.tw-media-code { font-family: monospace; }

/* Character sheet */
.tw-sheet { position: sticky; top: var(--tw-toolbar-offset, 1rem); background: var(--tw-panel); border: 1px solid var(--tw-border); border-radius: 6px; padding: 0.75rem 1rem; font-family: var(--tw-ui-font); font-size: 0.85rem; }
.tw-sheet h2 { font-size: 1.05rem; margin: 0 0 0.5rem; font-family: var(--tw-font); }
.tw-sheet h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tw-muted); margin: 0.75rem 0 0.25rem; }
.tw-stats { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.75rem; margin: 0; }
.tw-stats dd { margin: 0; text-align: right; }
.tw-modified { color: var(--tw-muted); font-size: 0.8em; }
.tw-inventory { margin: 0; padding-left: 1.1rem; }

/* Diagnostics */
.tw-diagnostics { list-style: none; padding: 0; font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 0.8rem; }
.tw-diagnostic { padding: 0.25rem 0.5rem; border-left: 3px solid; margin: 0.25rem 0; }
.tw-diagnostic.tw-error { border-color: var(--tw-error); }
.tw-diagnostic.tw-warning { border-color: var(--tw-warning); }
.tw-diagnostic-code { font-weight: bold; margin: 0 0.5rem; }
.tw-creation form { display: grid; gap: 1rem; max-width: 32rem; }
.tw-creation label { display: grid; gap: .25rem; }
.tw-creation-library { display: block; margin-top: 1rem; }
.tw-creation input, .tw-creation select { font: inherit; padding: .5rem; max-width: 100%; }
.tw-default-name { padding: .5rem; color: var(--tw-fg); background: var(--tw-panel); border: 1px solid var(--tw-border); border-radius: 4px; cursor: pointer; }
.tw-default-name:hover, .tw-default-name:focus-visible { border-color: var(--tw-accent); }