/*
 * Components that exist only in the image builder.
 * Built on the SEYSOFT tokens from app.css (--ink-soft, --paper, --surface, --green-wash, ...),
 * so the light/dark themes carry through.
 */

/* Build statuses. app.css draws .status as a dot; these just set its colour. */
.status.queued::before { background: transparent; border: 2px solid var(--ink-soft); }  /* hollow ring, so it differs from Expired */
.status.running::before { background: var(--brass); animation: status-pulse 1.4s ease-in-out infinite; }
.status.failed::before { background: var(--danger); }
@keyframes status-pulse { 50% { opacity: .35; } }

/* Pi model picker */
.model-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; border: 0; margin: 0; padding: 0; min-width: 0; }
@media (max-width: 30rem) { .model-picker { grid-template-columns: 1fr; } }
.model-picker legend { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: .4rem; }
.model-option { position: relative; display: block; padding: .8rem .95rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); cursor: pointer; }
.model-option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.model-option strong { display: block; }
.model-option span { display: block; color: var(--ink-soft); font-size: .87rem; }
.model-option:hover { border-color: var(--ink-soft); }
.model-option:has(input:checked) { border-color: var(--green); background: var(--green-wash); box-shadow: 0 0 0 1px var(--green); }
.model-option:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }

/* Collapsible options */
.options { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 0 1rem; background: var(--surface); }
.options summary { cursor: pointer; font-weight: 600; padding: .8rem 0; }
.options[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.options .form { padding-bottom: 1rem; }

/* Build progress */
.progress { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .6rem; }
.progress li { display: flex; gap: .75rem; align-items: center; color: var(--ink-soft); }
.progress li::before { content: ""; flex: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--line); }
.progress li.done { color: var(--ink); }
.progress li.done::before { background: var(--green); border-color: var(--green); }
.progress li.now { color: var(--ink); font-weight: 600; }
.progress li.now::before { border-color: var(--green); border-top-color: transparent; animation: progress-spin .9s linear infinite; }
@keyframes progress-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .progress li.now::before { border-top-color: var(--green); background: var(--green-wash); } }

/* Build log: dark in both themes, like a terminal */
.logbox { margin: 0; max-height: 20rem; overflow: auto; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: #0f1513; color: #cfe0d9; font: 400 .82rem/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; }

/* Boot-from notes beside the new-build form */
.boot-notes { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: .95rem; }
.boot-notes li + li { margin-top: .6rem; }
.boot-notes strong { color: var(--ink); }

/* SEYSOFT's tag held one short word ("Lifetime"). Pi model names are longer, so the
   tag in the narrow sidebar uses a smaller title and wraps instead of overflowing. */
.panel .key-tag .tag-plan { font-size: 1.45rem; overflow-wrap: anywhere; }

/* An author `display` rule beats the browser's [hidden]; the upload UI relies on hidden. */
[hidden] { display: none !important; }

/* Upload dropzone */
.dropzone { border: 1px dashed var(--ink-soft); border-radius: var(--radius-m); padding: 1.1rem; background: var(--surface); }
.dropzone.is-done { border-style: solid; border-color: var(--green); background: var(--green-wash); }
.dropzone.is-error { border-color: var(--danger); }
.dropzone > label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .5rem; }
.dropzone input[type="file"] { width: 100%; font: inherit; color: var(--ink); }
.dropzone input[type="file"]::file-selector-button { font: 600 .92rem/1 var(--sans); padding: .5rem .8rem; margin-right: .75rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); cursor: pointer; }
.dropzone .hint { margin: .6rem 0 0; font-size: .87rem; color: var(--ink-soft); }
.upload-progress { margin-top: 1rem; }
.upload-bar { height: .6rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.upload-bar > span { display: block; height: 100%; width: 0; background: var(--green); transition: width .2s linear; }
.upload-status { margin: .6rem 0 0; font-size: .92rem; }
.is-error .upload-status { color: var(--danger); }
.is-error .upload-bar > span { background: var(--danger); }
.upload-actions { display: flex; gap: 1.25rem; margin: .5rem 0 0; }
.upload-actions:not(:has(> :not([hidden]))) { display: none; }  /* nothing to show: no empty gap */
.is-done .upload-status { color: var(--green-deep); font-weight: 600; }
.how-to { margin-top: .75rem; font-size: .92rem; color: var(--ink-soft); }
.how-to summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.how-to pre { margin: .5rem 0 .75rem; padding: .8rem 1rem; overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); font: 400 .82rem/1.55 var(--mono); color: var(--ink); }

/* app.css has no disabled look; without one, "Start build" appears clickable while an upload is still running. */
.button:disabled, .button:disabled:hover { background: var(--green); border-color: transparent; opacity: .45; cursor: not-allowed; }

/* The original .plans grid is three columns; Free / Premium is two. */
.plans.plans-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 52rem) { .plans.plans-2 { grid-template-columns: 1fr; } }
.check span { line-height: 1.4; }