/* SMAU FILE
 * Path: css/smau-studio2-device.css
 * Owns: Creator Studio 2.0 — the per-phone DEVICE EDITOR inside the World
 *       "Phones" screen (js/creator/creator.phones.js): the section tabs, the
 *       4×4 home-screen grid + dock, the slot picker / folder composer, the
 *       installed-apps matrix, and the Home Screen Checks card. Every rule is
 *       scoped to a dv2- prefixed class so it never collides with the phones
 *       screen's own ph2- names (css/smau-studio2-phones.css) or the shared
 *       Studio 2.0 primitives in css/smau-studio2.css.
 * Depends: css/smau-studio2.css tokens on #studio-root — --s2-accent,
 *          --s2-accent-soft, --s2-ok, --s2-warn, --s2-danger, --s2-ink,
 *          --s2-muted, --s2-card, --s2-card-border, --s2-radius. Each falls
 *          back to a sane literal so this file never renders blank.
 * No: ids (the folder-name field is minted at runtime, so it is styled by
 *     class — an id-anchored rule here would be dead by construction).
 */

#studio-root {
  --dv2-accent: var(--s2-accent, #8b7cf8);
  --dv2-accent-soft: var(--s2-accent-soft, rgba(139, 124, 248, 0.16));
  --dv2-ok: var(--s2-ok, #3ecf8e);
  --dv2-warn: var(--s2-warn, #ffb454);
  --dv2-danger: var(--s2-danger, #ff5c5c);
  --dv2-ink: var(--s2-ink, rgba(238, 240, 248, 0.94));
  --dv2-muted: var(--s2-muted, rgba(238, 240, 248, 0.55));
  --dv2-card: var(--s2-card, rgba(255, 255, 255, 0.035));
  --dv2-border: var(--s2-card-border, rgba(255, 255, 255, 0.09));
  --dv2-slot-bg: rgba(255, 255, 255, 0.05);
}

@media (prefers-color-scheme: light) {
  #studio-root {
    --dv2-ink: var(--s2-ink, rgba(20, 20, 30, 0.92));
    --dv2-muted: var(--s2-muted, rgba(20, 20, 30, 0.55));
    --dv2-card: var(--s2-card, rgba(20, 20, 30, 0.035));
    --dv2-border: var(--s2-card-border, rgba(20, 20, 30, 0.12));
    --dv2-slot-bg: rgba(20, 20, 30, 0.05);
  }
}

/* The explicit theme toggle wins over the OS media query in both directions:
   :root[data-theme] #studio-root out-specifies the plain #studio-root above
   regardless of source order. */
:root[data-theme="light"] #studio-root {
  --dv2-ink: var(--s2-ink, rgba(20, 20, 30, 0.92));
  --dv2-muted: var(--s2-muted, rgba(20, 20, 30, 0.55));
  --dv2-card: var(--s2-card, rgba(20, 20, 30, 0.035));
  --dv2-border: var(--s2-card-border, rgba(20, 20, 30, 0.12));
  --dv2-slot-bg: rgba(20, 20, 30, 0.05);
}

:root[data-theme="dark"] #studio-root {
  --dv2-ink: var(--s2-ink, rgba(238, 240, 248, 0.94));
  --dv2-muted: var(--s2-muted, rgba(238, 240, 248, 0.55));
  --dv2-card: var(--s2-card, rgba(255, 255, 255, 0.035));
  --dv2-border: var(--s2-card-border, rgba(255, 255, 255, 0.09));
  --dv2-slot-bg: rgba(255, 255, 255, 0.05);
}

/* ── Section tabs ──────────────────────────────────────────────── */

.dv2-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--dv2-border);
  padding-bottom: 8px;
}

.dv2-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dv2-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.dv2-tab:hover { color: var(--dv2-ink); }

.dv2-tab[data-state="on"] {
  background: var(--dv2-accent-soft);
  border-color: var(--dv2-accent);
  color: var(--dv2-ink);
}

.dv2-body { display: block; }

.dv2-note,
.dv2-hint,
.dv2-footnote {
  color: var(--dv2-muted);
  font-size: 11.5px;
  line-height: 1.5;
  margin: 8px 0;
}

.dv2-footnote {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--dv2-border);
  font-style: italic;
}

.dv2-facts {
  color: var(--dv2-muted);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.dv2-danger-btn { color: var(--dv2-danger); margin-top: 12px; }

/* ── Pages: stepper + mini-map chips ───────────────────────────── */

.dv2-pages-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.dv2-page-count {
  min-width: 1.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--dv2-ink);
}

.dv2-step[disabled] { opacity: 0.4; cursor: not-allowed; }

.dv2-page-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.dv2-page-chip {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--dv2-card);
  border: 1px solid var(--dv2-border);
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--dv2-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.dv2-page-chip[data-state="on"] {
  border-color: var(--dv2-accent);
  background: var(--dv2-accent-soft);
  color: var(--dv2-ink);
}

.dv2-mini-map {
  display: grid;
  grid-template-columns: repeat(4, 3px);
  gap: 2px;
}

.dv2-mini-dot {
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background: var(--dv2-border);
}

.dv2-mini-dot[data-state="on"] { background: var(--dv2-accent); }

/* ── The 4×4 grid and the dock ─────────────────────────────────── */

.dv2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}

.dv2-dock {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  background: var(--dv2-slot-bg);
  margin-bottom: 14px;
}

.dv2-dock-label {
  display: block;
  margin-bottom: 6px;
}

.dv2-dock-note {
  color: var(--dv2-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.dv2-slot {
  appearance: none;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  border: 1px dashed var(--dv2-border);
  border-radius: 10px;
  background: var(--dv2-slot-bg);
  color: var(--dv2-ink);
  font: inherit;
  font-size: 9.5px;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.dv2-slot:hover { border-color: var(--dv2-accent); }

.dv2-slot[data-kind="app"],
.dv2-slot[data-kind="folder"] {
  border-style: solid;
  background: var(--dv2-card);
}

.dv2-slot[data-kind="folder"] { border-color: var(--dv2-accent); }

.dv2-slot[data-state="on"] {
  border-color: var(--dv2-accent);
  background: var(--dv2-accent-soft);
}

/* An app placed here but not installed on this phone — the same fact the
   Home Screen Checks card spells out in words. */
.dv2-slot[data-warn="uninstalled"] {
  border-color: var(--dv2-warn);
  color: var(--dv2-warn);
}

.dv2-slot-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.dv2-slot-empty { color: var(--dv2-muted); font-size: 14px; }
.dv2-slot-sub { color: var(--dv2-muted); font-size: 8.5px; }

/* ── Slot picker / folder composer ─────────────────────────────── */

.dv2-picker { margin-bottom: 14px; }

.dv2-picker-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--dv2-ink);
  margin-bottom: 8px;
}

.dv2-picker-sub { display: block; margin: 10px 0 6px; }

.dv2-picker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 190px;
  overflow-y: auto;
  margin: 8px 0;
}

.dv2-pick-app,
.dv2-pick-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--dv2-slot-bg);
  border: 1px solid var(--dv2-border);
  border-radius: 7px;
  padding: 5px 8px;
  color: var(--dv2-ink);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.dv2-pick-app:hover { border-color: var(--dv2-accent); }

.dv2-pick-app[data-installed="no"] { color: var(--dv2-warn); }

.dv2-pick-note {
  color: var(--dv2-warn);
  font-size: 9.5px;
  margin-left: 4px;
}

.dv2-pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  font-size: 11.5px;
  color: var(--dv2-ink);
  padding: 3px 0;
}

.dv2-pick-empty {
  color: var(--dv2-muted);
  font-size: 11.5px;
  padding: 6px 0;
}

.dv2-picker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* ── Home Screen Checks ────────────────────────────────────────── */

.dv2-checks { margin: 14px 0; }

.dv2-checks[data-state="warn"] { border-color: var(--dv2-warn); }

.dv2-check-row {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dv2-warn);
  padding: 3px 0;
}

.dv2-check-row--ok { color: var(--dv2-ok); }

/* ── Installed apps matrix ─────────────────────────────────────── */

.dv2-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.dv2-count {
  color: var(--dv2-muted);
  font-size: 11px;
}

.dv2-count b {
  color: var(--dv2-ink);
  font-size: 14px;
  margin-right: 3px;
}

.dv2-app-rows {
  display: flex;
  flex-direction: column;
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--dv2-border);
  border-radius: 10px;
  margin-top: 10px;
}

.dv2-app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--dv2-border);
}

.dv2-app-row:last-child { border-bottom: none; }

.dv2-app-row[data-installed="no"] { opacity: 0.55; }

.dv2-app-name {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--dv2-ink);
  min-width: 0;
}

.dv2-app-id {
  color: var(--dv2-muted);
  font-size: 9.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.dv2-lock {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dv2-ok);
  border: 1px solid var(--dv2-ok);
  border-radius: 5px;
  padding: 2px 6px;
}

.dv2-toggle {
  appearance: none;
  flex: none;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid var(--dv2-border);
  background: var(--dv2-slot-bg);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.dv2-toggle i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--dv2-muted);
  transition: transform 0.14s ease, background 0.14s ease;
}

.dv2-toggle[data-state="on"] {
  background: var(--dv2-accent-soft);
  border-color: var(--dv2-accent);
}

.dv2-toggle[data-state="on"] i {
  transform: translateX(16px);
  background: var(--dv2-accent);
}

/* ── Desktop: the section rail sits beside the body ────────────── */

@media (min-width: 900px) {
  .dv2-editor {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    grid-template-areas:
      "tabs body"
      "tabs done";
    gap: 0 18px;
    align-items: start;
  }

  .dv2-tabs {
    grid-area: tabs;
    flex-direction: column;
    align-items: stretch;
    border-bottom: none;
    border-right: 1px solid var(--dv2-border);
    padding: 0 10px 0 0;
    margin-bottom: 0;
  }

  .dv2-tab { text-align: left; }

  .dv2-body { grid-area: body; min-width: 0; }

  .dv2-editor .ph2-ed-done { grid-area: done; justify-self: start; margin-top: 12px; }
}