/* Styles for the batch-2 features (API keys, branding, previews, ZIP, captcha). Kept apart from
   app.css so parallel work on app.css merges cleanly. */
label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
code.secret { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); word-break: break-all; font-size: .9rem; user-select: all; }
.files li.muted { opacity: .6; }
.zip-all { margin: 12px 0 0; }
.brand-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line); font-weight: 600; }
.brand-bar img { max-height: 40px; max-width: 160px; object-fit: contain; }
.brand-preview { display: grid; gap: 10px; padding: 14px; border: 1px dashed var(--line);
  border-radius: 10px; }
.brand-preview .btn { justify-self: start; pointer-events: none; }
.w-events { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }
.w-events legend { padding: 0 4px; font-weight: 600; }
.w-history { list-style: none; margin: 6px 0 0; padding: 0; }

/* Backups page */
.bk .section-title { margin: 8px 0 10px; font-size: 1.25rem; }
.bk-devices { display: grid; gap: 14px; }
.bk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bk-head h3 { margin: 0; font-size: 1.1rem; }
.bk-head .sub { margin: 4px 0 0; }
.pill { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--brand-soft); color: var(--ink-2); vertical-align: middle; }
.pill.ok { background: #dcfce7; color: #166534; }
pre.cmd { white-space: pre-wrap; word-break: break-all; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin: 6px 0; font-size: .85rem; }
.dl-list { margin: 6px 0 0; padding-left: 18px; }
#job-dlg { width: min(560px, calc(100vw - 32px)); }
#job-form.stack.wide { max-width: none; }
#job-form textarea { width: 100%; font: inherit; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
#job-form fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; display: grid; gap: 8px; }
#job-form legend { padding: 0 4px; font-weight: 600; }
#job-form .num { width: 5.5em; }
.bk-sched .days { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-left: 22px; }
#crumbs a { color: inherit; }
@media (prefers-color-scheme: dark) { .pill.ok { background: #14532d; color: #bbf7d0; } }

/* Browse a backup (backup-browse.html), on the My Files shell */
.bb-job { padding: 0 12px; }
.bb-machine { margin: 0; font-size: .82rem; color: var(--ink-2); overflow-wrap: anywhere; }
.bb-jobname { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
#snaps { display: grid; gap: 2px; max-height: calc(100vh - 240px); overflow-y: auto; }
.bb-snap { flex-direction: column; align-items: flex-start; gap: 0; }
.bb-snap .bb-date { font-size: .9rem; }
.bb-snap .bb-state { font-size: .75rem; color: var(--ink-2); }
.bb-snap .bb-state.partial { color: #b45309; }
.bb-snap .bb-state.failed { color: var(--danger); }
.bb-snap:disabled { opacity: .55; cursor: default; }
.bb-when { margin: 4px 0 10px; }
.bb-name { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.bb-in { font: inherit; font-size: .8rem; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.bb-in:hover { color: var(--brand); text-decoration: underline; }
.bb-restore { margin-top: 24px; }
.rs-form { max-width: none; }
.rs-form fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; display: grid; gap: 8px; margin: 0; }
.rs-form legend { font-weight: 650; font-size: .9rem; padding: 0 4px; }
.rs-form .sub { margin: 0; }
#rs-folder { margin-left: 26px; }
/* Backups page: restores */
.rs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rs-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.rs-item .rs-main { min-width: 0; flex: 1 1 260px; }
.rs-item .rs-head { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.rs-item .rs-meta { margin: 2px 0 0; font-size: .85rem; color: var(--ink-2); overflow-wrap: anywhere; }
.rs-state { font-size: .85rem; font-weight: 650; white-space: nowrap; }
.rs-state.done { color: var(--ok); } .rs-state.failed { color: var(--danger); }
.rs-state.queued, .rs-state.running { color: var(--brand); } .rs-state.cancelled { color: var(--ink-2); }
.rs-item details { flex-basis: 100%; font-size: .85rem; }

/* Send a copy (My Files and backups) */
.sc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-link { display: flex; gap: 8px; align-items: center; }
.sc-link input { flex: 1; min-width: 0; }
@media (max-width: 520px) { .sc-row { grid-template-columns: 1fr; } }
.sc-form .notice.ok { background: var(--ok-soft); color: var(--ok); }