/* Panel styles.
 *
 * Hand-written, no framework, no CDN. The WordPress.org plugin directory forbids
 * loading styles from an external CDN, so the front end has to be self-contained
 * regardless — and doing it from the start avoids a rewrite later.
 *
 * Mobile-first: the creator is linear with large controls, so the phone layout is
 * the base and the desktop layout is the enhancement. Sizing in rem so the
 * browser's own font-size setting is respected.
 */

:root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #eef0f4;
    --border: #d8dce4;
    --text: #16181d;
    --text-dim: #5c6370;
    --accent: #2f6df6;
    --accent-text: #ffffff;
    --ok: #1c8b53;
    --warn: #b26a00;
    --danger: #c0392b;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04);
    --step: 3.5rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #12141a;
        --surface: #1a1d25;
        --surface-2: #22262f;
        --border: #333844;
        --text: #e8eaee;
        --text-dim: #99a1b0;
        --accent: #5b8cff;
        --ok: #3ecf8e;
        --warn: #e0a642;
        --danger: #ef6b5e;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }

/* --- chrome ------------------------------------------------------------- */

header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

header .brand { font-weight: 650; letter-spacing: -.01em; }
header .spacer { flex: 1; }
header .who { color: var(--text-dim); font-size: .85rem; }

main { max-width: 60rem; margin: 0 auto; padding: 1rem; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem;
    margin-bottom: 1rem;
}

/* --- controls ----------------------------------------------------------- */
/* Minimum 44px tall: below that, touch accuracy drops sharply. */

button, .btn {
    font: inherit;
    min-height: 2.75rem;
    padding: .6rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: not-allowed; }

button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
    font-weight: 600;
}

button.danger { color: var(--danger); }
button.small { min-height: 2rem; padding: .25rem .6rem; font-size: .85rem; }

input, textarea, select {
    font: inherit;
    width: 100%;
    min-height: 2.75rem;
    padding: .6rem .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
}

textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

label { display: block; margin: .75rem 0 .25rem; font-size: .85rem; color: var(--text-dim); }

.row { display: flex; flex-wrap: wrap; gap: .5rem; }
.row > * { flex: 1 1 12rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* --- stepper ------------------------------------------------------------ */
/* Horizontally scrollable on a phone rather than wrapping: the sequence stays
 * readable as a sequence. */

.stepper {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding: .25rem 0 .5rem;
    scrollbar-width: none;
}
.stepper::-webkit-scrollbar { display: none; }

.stepper button {
    flex: 0 0 auto;
    min-height: 2.25rem;
    padding: .35rem .7rem;
    font-size: .85rem;
    border-radius: 999px;
    white-space: nowrap;
}

.stepper button[aria-current="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}

/* Freshness is the whole point of the creator's model, so it is visible at all
 * times rather than discovered on failure. */
.dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.dot.fresh { background: var(--ok); }
.dot.stale { background: var(--warn); }
.dot.missing { background: var(--border); }

.badge {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--text-dim);
}
.badge.stale { background: var(--warn); color: #1b1400; }
.badge.ok { background: var(--ok); color: #04160d; }

/* --- gallery ------------------------------------------------------------ */
/* auto-fill so the column count follows the viewport with no breakpoints. */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: .6rem;
}

.tile {
    position: relative;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-2);
    cursor: pointer;
}

.tile.selected { border-color: var(--accent); }

/* 9:16 preview so the crop is visible before rendering, not after. */
.tile .frame { aspect-ratio: 9 / 16; display: grid; place-items: center; overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: contain; display: block; }

.tile .order {
    position: absolute;
    top: .35rem;
    left: .35rem;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-text);
    font-size: .8rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.tile .origin {
    position: absolute;
    top: .35rem;
    right: .35rem;
    font-size: .65rem;
    padding: .1rem .35rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
}

.tile .move {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: .2rem;
    padding: .25rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, .6));
}
.tile .move button { flex: 1; min-height: 1.75rem; padding: 0; font-size: .8rem; background: rgba(255,255,255,.9); color: #111; border: 0; }

/* On a touch screen these have to obey the same 44px floor as every other
 * control. Compact is fine with a mouse; on a phone a 28px target is a
 * mis-tap that reorders the wrong photo. Verified at 375x812 — the audit that
 * caught this measured 28px here while the rest of the panel was compliant. */
@media (pointer: coarse) {
    .tile .move { padding: .3rem; gap: .3rem; }
    .tile .move button { min-height: 2.75rem; font-size: 1rem; }
    .tile .score { bottom: 3.6rem; }
}

.tile .score {
    position: absolute;
    bottom: 2.25rem;
    left: .35rem;
    font-size: .65rem;
    padding: .1rem .35rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
}

.tabs { display: flex; gap: .4rem; margin-bottom: .75rem; flex-wrap: wrap; }
.tabs button { min-height: 2.25rem; font-size: .85rem; }
.tabs button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* --- templates ---------------------------------------------------------- */

.templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; }

.tpl {
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: .6rem;
    cursor: pointer;
    background: var(--surface-2);
}
.tpl.selected { border-color: var(--accent); }
.tpl .name { font-weight: 600; font-size: .9rem; }
.tpl .desc { font-size: .75rem; color: var(--text-dim); }

/* Live swatch of the template's actual colours, so the choice is visible without
 * a render. */
.tpl .swatch {
    aspect-ratio: 9 / 16;
    max-height: 7rem;
    margin: 0 auto .4rem;
    border-radius: 6px;
    display: grid;
    place-items: end center;
    padding-bottom: .5rem;
    overflow: hidden;
}
.tpl .swatch span { font-size: .6rem; font-weight: 700; padding: 0 .2rem; text-align: center; }

/* --- misc --------------------------------------------------------------- */

.muted { color: var(--text-dim); font-size: .85rem; }
.notice { font-size: .8rem; color: var(--warn); border-left: 3px solid var(--warn); padding-left: .6rem; margin: .5rem 0; }
.error { color: var(--danger); font-size: .9rem; margin: .5rem 0; }
.hidden { display: none !important; }

.spin {
    width: 1rem; height: 1rem;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spin { animation-duration: 2s; }
}

progress { width: 100%; height: .5rem; }

video { width: 100%; max-width: 20rem; border-radius: var(--radius); display: block; margin: .5rem auto; background: #000; }

audio { width: 100%; margin: .5rem 0; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; font-size: .85rem; }
.kv dt { color: var(--text-dim); }
.kv dd { margin: 0; }

.draft-list { display: grid; gap: .5rem; }
.draft-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--surface-2);
    cursor: pointer; text-align: left;
    min-height: 3.25rem;
}
.draft-item .t { flex: 1; min-width: 0; }
.draft-item .t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-item .t small { color: var(--text-dim); }

@media (min-width: 40rem) {
    header { padding: .85rem 1.5rem; }
    main { padding: 1.5rem; }
    h1 { font-size: 1.6rem; }
}