/*
 * The controls every screen is built from. An app adds layout in its own stylesheet and
 * takes its look from here, so a new skin reaches it untouched. See specs/09-web-ui.md §Look.
 */

/* ── A glass pane ── */
.panel {
  display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; min-width: 0; padding: var(--panel-pad);
  color: var(--window-text); background: var(--window-bg); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter);
  border: var(--window-border-w) solid var(--window-border); border-radius: var(--r-panel);
  box-shadow: var(--window-shadow), inset 0 1px 0 var(--window-glow);
}
.panel--scroll { overflow-y: auto; }

/* ── Text ── */
.app-title { margin: 0; font-size: var(--title); font-weight: 400; letter-spacing: var(--track-title); text-transform: uppercase; color: var(--accent); text-shadow: var(--title-shadow); }
.section-title { margin: 0; font-size: var(--md-body); font-weight: 600; color: var(--edge); }
.muted { color: var(--window-text-muted); font-size: var(--md-small); }
.error-text { margin: 0; color: var(--notif-err-text); }
.ok-text { margin: 0; color: var(--notif-ok-text); }
.link { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: var(--sp-1); }
.link:hover { color: var(--hover-text); }

/* ── Buttons: one look, and an accent one for what the screen is for ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); flex: none;
  min-height: var(--btn-h); padding: var(--sp-1) var(--sp-3);
  font: inherit; font-size: var(--md-small); letter-spacing: var(--track); white-space: nowrap; cursor: pointer; user-select: none;
  color: var(--window-text); background: var(--ctl-bg); border: 0; border-radius: var(--r-ctl); box-shadow: var(--ctl-edge);
  transition: color var(--tr-fast), box-shadow var(--tr-fast);
}
.btn:hover { color: var(--hover-text); box-shadow: var(--ctl-edge-hover); }
.btn--primary { min-height: var(--field-h); padding: 0 var(--sp-4); color: var(--accent); letter-spacing: var(--track-wide); text-transform: uppercase; box-shadow: var(--add-edge); }
.btn--primary:hover { box-shadow: var(--add-edge-hover); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:disabled:hover { color: var(--window-text); box-shadow: var(--ctl-edge); }
.btn.is-on, .btn[aria-pressed="true"] { color: var(--active-text); background: var(--selected-bg); box-shadow: var(--selected-edge); }

/* ── Fields ── */
.field {
  width: 100%; min-width: 0; min-height: var(--field-h); padding: var(--sp-2) var(--sp-3);
  font: inherit; font-size: var(--md-code); letter-spacing: var(--track);
  color: var(--window-text); background: var(--ctl-bg); border: 0; border-radius: var(--r-ctl); box-shadow: var(--ctl-edge);
  transition: box-shadow var(--tr-fast);
}
.field:hover, .field:focus { outline: none; box-shadow: var(--ctl-edge-hover); }
.field::placeholder { color: var(--text-faint); }
.field:disabled { opacity: 0.6; }
select.field { appearance: none; -webkit-appearance: none; padding-right: var(--sp-8); background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right var(--sp-3) center; }
select.field option { color: var(--text); background: var(--bg); }
textarea.field { resize: vertical; line-height: var(--md-body-lh); }
.field-label { display: flex; flex-direction: column; gap: var(--sp-1); color: var(--window-text-muted); font-size: var(--md-small); min-width: 0; }
.check { display: flex; align-items: center; gap: var(--sp-2); color: var(--window-text); font-size: var(--md-code); }
.check input { accent-color: var(--accent); }

/* ── A row in a list: orange (the skin's active colour) marks the one that is open ── */
.row {
  display: flex; flex-direction: column; gap: var(--sp-1); flex: none; width: 100%; min-width: 0; padding: var(--sp-2) var(--sp-3);
  font: inherit; font-size: var(--md-code); text-align: left; cursor: pointer;
  color: var(--window-text); background: var(--row-bg); border: 0; border-radius: var(--r-row); box-shadow: var(--row-edge);
  transition: background var(--tr-fast), box-shadow var(--tr-fast);
}
.row:hover { background: var(--row-hover-bg); box-shadow: var(--row-edge-hover); }
.row.is-open { color: var(--active-text); background: var(--selected-bg); box-shadow: var(--selected-edge); }

/* ── Tabs among a few views of one thing ── */
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ── A message, a block of output ── */
.block { flex: none; padding: var(--sp-2) var(--sp-3); background: var(--msg-bg); border-radius: var(--r-ctl); box-shadow: var(--msg-edge); overflow-wrap: anywhere; }

/* ── A small state word ── */
.chip { display: inline-flex; align-items: center; padding: 0 var(--sp-2); font: inherit; font-size: var(--md-small); color: var(--accent); background: var(--chip-bg); border: 0; border-radius: var(--r-ctl); box-shadow: var(--chip-edge); }
button.chip { cursor: pointer; }

/* ── Something the person should read before going on ── */
.strip { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex: none; padding: var(--sp-2) var(--sp-3); font-size: var(--md-small); color: var(--notif-info-text); background: var(--notif-info-bg); border: 1px solid var(--notif-info-border); border-radius: var(--r-ctl); }
.strip[role="alert"], .strip--danger { color: var(--notif-err-text); background: var(--notif-err-bg); border-color: var(--notif-err-border); }

/* ── A list still loading ── */
.skeleton { height: var(--field-h); margin-bottom: var(--sp-1); border-radius: var(--r-row); background: var(--btn-hover); opacity: 0.5; }