/* public/styles.css - S-SHELL stream (DESIGN.md S1/S2/S9, AMENDMENTS M7/m2).
   House skin for micrograph-studio: dark-first app chrome around a
   structural donor (MICROGRAPH) whose light theme/type are NOT reused.
   No em dashes anywhere in this file (m2/S8b copy rule - it's all code
   comments + generated content, still swept). */

/* ============================================================
   1. TOKENS (DESIGN.md S1 block, verbatim first, extended after)
   ============================================================ */

:root {
  --bg:        #0c0c0e;
  --panel:     #17171a;
  --panel-2:   #202024;
  --border:    #2c2c31;
  --text:      #f4f4f6;
  --text-dim:  #a2a2ab;
  --accent:    #d09e52;
  --danger:    #c06a3e;
  --radius:    14px;

  /* ---- supplementary tokens (not in the locked S1 list, needed for a
     complete skin; values follow the same house palette family, see
     ../link-vault/worker/public/styles.css reference) ---- */
  --border-2:   #3a3a41;
  --text-faint: #6e6e77;
  --on-accent:  #2f2410;
  --sage:       #b9b98f;

  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 160ms;
  --dur-sheet: 220ms;
  --scrim: rgba(0, 0, 0, 0.55);

  --fs-display: 22px;
  --fs-title:   16px;
  --fs-body:    14px;
  --fs-sub:     13px;
  --fs-micro:   11px;

  /* iOS/PWA chrome insets (app-design S6): every fixed chrome element pads
     by env(safe-area-inset-*); --bottom-chrome-h is what scrollable content
     pads by so the mobile bottom toolbar never covers the last row. */
  --topbar-h: 52px;
  --bottom-toolbar-h: 52px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --bottom-chrome-h: calc(var(--bottom-toolbar-h) + var(--safe-b));

  --left-col-w: 260px;
  --right-col-w: 300px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   2. Reset + base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  height: 100%;
  overflow: hidden; /* the app is one fixed-height shell; each panel scrolls internally */
  font-size: var(--fs-sub);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}

a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 100px; }

/* ============================================================
   3. App shell grid
   ============================================================ */

#appRoot {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.mg-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

/* ============================================================
   4. Topbar
   ============================================================ */

#topbar.mg-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: calc(var(--safe-t) + 8px) calc(10px + var(--safe-r)) 8px calc(10px + var(--safe-l));
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
  z-index: 200;
}

#topbar.mg-topbar::-webkit-scrollbar { display: none; }

.mg-top-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding-right: 10px;
  margin-right: 4px;
  border-right: 1px solid var(--border);
}

.mg-top-group:last-child { border-right: none; }

.mg-aspect-bar { gap: 4px; }

.mg-build-stamp {
  font-size: var(--fs-micro);
  color: var(--text-faint);
  white-space: nowrap;
}

/* Export dropdown panel (topbar.js toggles its inline display:none/'') */
.mg-export-menu { position: relative; }

.mg-export-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  max-width: calc(100vw - 24px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  padding: 10px;
  white-space: normal;
  z-index: 210;
}

.mg-export-row {
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mg-export-row:last-child { border-bottom: none; }

.mg-export-title {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 700;
}

.mg-export-note {
  font-size: var(--fs-micro);
  color: var(--text-dim);
  line-height: 1.4;
}

/* ============================================================
   5. Buttons, chips, inputs (shared house atoms)
   ============================================================ */

.mg-btn {
  flex: 0 0 auto;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-sub);
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-press) ease-out, background var(--dur-press) ease-out;
}

.mg-btn:hover { background: var(--border); }
.mg-btn:active { transform: scale(0.97); }
.mg-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mg-btn:disabled:active { transform: none; }

.mg-btn-danger {
  color: var(--danger);
  border-color: var(--danger);
  background: transparent;
}

.mg-btn-danger.is-armed {
  background: var(--danger);
  color: var(--text);
  border-color: var(--danger);
}

.mg-chip {
  flex: 0 0 auto;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: var(--fs-sub);
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-press) ease-out, background var(--dur-press) ease-out, color var(--dur-press) ease-out;
}

.mg-chip:active { transform: scale(0.97); }

.mg-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.mg-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* M7: every text input/textarea/select computes to >=16px so Safari never
   focus-zooms. Visually tamed with a hairline scale-down the way link-vault
   does it would be nicer, but the simplest compliant fix here (short
   labels, generous chrome) is to just let 16px be the visual size too -
   it reads fine in this chrome density. */
.mg-input {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 16px;
  color: var(--text);
  resize: vertical;
}

.mg-input:focus { outline: none; border-color: var(--accent); }

select.mg-input { cursor: pointer; }

/* photobar.js's treatment sliders are plain <input type="range"> with no
   class (verified against the real file - it never sets .mg-input on
   these), so this must NOT be scoped to .mg-input. */
input[type="range"] {
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  accent-color: var(--accent);
  height: 24px;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.mg-file-input-hidden { display: none; }

/* ============================================================
   6. Left column: library + photo (docked desktop / drawer mobile)
   ============================================================ */

#leftDrawer.mg-left-col {
  flex: 0 0 var(--left-col-w);
  width: var(--left-col-w);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding-left: var(--safe-l);
}

.mg-drawer-close, .mg-drawer-scrim { display: none; }

.mg-panel { min-height: 0; }

.mg-library-panel {
  flex: 1 1 55%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
}

.mg-photo-panel {
  flex: 1 1 45%;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}

/* ---- library.js internals ---- */

.mg-tabbar {
  display: flex;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
}

.mg-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-faint);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 12px 8px;
  cursor: pointer;
}

.mg-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.mg-lib-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.mg-lib-templates, .mg-lib-components { padding: 12px; }

.mg-lib-section-head {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 700;
  margin: 4px 0 8px;
}

.mg-tpl-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

.mg-tpl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.mg-tpl-name { flex: 1; min-width: 0; font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mg-tpl-apply, .mg-tpl-delete { flex: 0 0 auto; padding: 6px 10px; font-size: var(--fs-micro); }

.mg-tpl-empty { color: var(--text-faint); font-size: var(--fs-sub); padding: 8px 2px 16px; }

.mg-tpl-save-row { display: flex; gap: 6px; }

.mg-tpl-name-input { flex: 1; }

.mg-lib-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.mg-lib-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  cursor: grab;
  text-align: left;
  transition: transform var(--dur-press) ease-out, border-color var(--dur-press) ease-out;
}

.mg-lib-card:active { transform: scale(0.97); cursor: grabbing; }
.mg-lib-card:focus-visible { outline: none; border-color: var(--accent); }

.mg-lib-thumb {
  width: 100%;
  aspect-ratio: 108 / 72;
  background: var(--bg);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
  display: block;
}

.mg-lib-thumb canvas { display: block; width: 100%; height: 100%; }

.mg-lib-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  text-align: center;
}

.mg-lib-hint {
  font-size: var(--fs-sub);
  color: var(--text-faint);
  padding: 6px 2px 14px;
  line-height: 1.4;
}

.mg-brush-row {
  display: flex;
  gap: 6px;
  padding: 0 12px 12px;
  flex-wrap: wrap;
}

.mg-brush-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* ---- photobar.js internals ---- */

.mg-photo-section { padding: 14px 0; border-bottom: 1px solid var(--border); }
.mg-photo-section:last-child { border-bottom: none; }

.mg-insp-heading {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 10px;
}

.mg-sample-row { display: flex; gap: 8px; margin-top: 10px; }

.mg-sample-thumb {
  flex: 1;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
  aspect-ratio: 4 / 3;
  transition: transform var(--dur-press) ease-out, border-color var(--dur-press) ease-out;
}

.mg-sample-thumb:active { transform: scale(0.97); }
.mg-sample-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mg-insp-field { margin-bottom: 12px; }

.mg-insp-label {
  display: block;
  font-size: var(--fs-sub);
  color: var(--text-dim);
  margin-bottom: 6px;
}

.mg-live-input-row { display: flex; gap: 6px; margin-bottom: 8px; }
.mg-live-input-row .mg-input { flex: 1; }

.mg-live-status { font-size: var(--fs-sub); color: var(--sage); min-height: 16px; }

.mg-live-hint {
  font-size: var(--fs-sub);
  color: var(--danger);
  background: rgba(192, 106, 62, 0.14);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 6px 0;
  line-height: 1.4;
}

.mg-live-insert-row { display: flex; gap: 6px; margin: 10px 0; }
.mg-live-insert-row .mg-btn { flex: 1; }

.mg-live-privacy, .mg-live-attribution {
  font-size: var(--fs-micro);
  color: var(--text-faint);
  line-height: 1.5;
  margin-top: 6px;
}

/* ============================================================
   7. Stage (compose surface)
   ============================================================ */

.mg-stage {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}

.mg-overlay-layer {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
  max-height: 100%;
}

.mg-poster-canvas {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - var(--topbar-h) - var(--safe-t) - 40px);
  width: auto;
  height: auto;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  touch-action: none;
}

/* the overlay canvas itself (#mgCanvasOverlay) is created + positioned by
   canvas.js inline styles; nothing further needed here beyond making sure
   its host is the positioned box above. */

/* ============================================================
   8. Right column: inspector
   ============================================================ */

#inspectorPanel.mg-inspector-panel {
  flex: 0 0 var(--right-col-w);
  width: var(--right-col-w);
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
  border-left: 1px solid var(--border);
  padding: 16px;
  padding-right: calc(16px + var(--safe-r));
}

#inspectorPanel.mg-inspector-panel:empty::before {
  content: "Select an element to edit it here.";
  display: block;
  color: var(--text-faint);
  font-size: var(--fs-sub);
  padding-top: 4px;
  line-height: 1.5;
}

.mg-insp-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.mg-insp-title {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mg-insp-close { padding: 6px 12px; font-size: var(--fs-micro); }

.mg-insp-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.mg-insp-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.mg-insp-textarea { min-height: 96px; font-family: ui-monospace, "SF Mono", Menlo, monospace; line-height: 1.5; }

.mg-color-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.mg-insp-arrange-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mg-insp-arrange-row .mg-btn { flex: 1 1 auto; }

/* ============================================================
   9. Toast (#mgToast created + positioned inline by core.js - this file
      only supplies the visual pill; core.js sets position/opacity/timing)
   ============================================================ */

#mgToast {
  background: var(--panel);
  border: 1px solid var(--border-2);
  color: var(--text);
  font-size: var(--fs-sub);
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 100px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  max-width: 86vw;
  text-align: center;
}

/* ============================================================
   10. Shell build stamp (separate from topbar.js's own #topbar-scoped one -
       see index.html comment; kept quiet in a corner, always visible per
       app-design S6, never overwritten by any screen's innerHTML rebuild)
   ============================================================ */

.mg-build-shell-stamp {
  position: fixed;
  left: calc(8px + var(--safe-l));
  bottom: calc(4px + var(--safe-b));
  font-size: 9px;
  color: var(--text-faint);
  opacity: 0.55;
  z-index: 5;
  pointer-events: none;
  letter-spacing: 0.02em;
}

/* ============================================================
   11. Bottom toolbar (mobile only)
   ============================================================ */

.mg-bottom-toolbar { display: none; }

/* ============================================================
   12. Mobile layout (<=768px, matches inspector.js's own isMobileViewport)
   ============================================================ */

@media (max-width: 768px) {

  .mg-body { position: relative; }

  .mg-stage { padding: 12px; padding-bottom: calc(12px + var(--bottom-chrome-h)); }

  .mg-poster-canvas { max-height: calc(100dvh - var(--topbar-h) - var(--safe-t) - var(--bottom-chrome-h) - 24px); }

  /* left drawer: fixed off-canvas panel, revealed via :has(:target) on its
     own children (library.js/photobar.js panels) - CSS-only, no script. */
  #leftDrawer.mg-left-col {
    position: fixed;
    top: calc(var(--topbar-h) + var(--safe-t));
    bottom: calc(var(--bottom-toolbar-h) + var(--safe-b));
    left: 0;
    width: min(86vw, 360px);
    flex: none;
    border-right: 1px solid var(--border);
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5);
    transform: translateX(-105%);
    transition: transform var(--dur-sheet) var(--ease-drawer);
    z-index: 260;
  }

  #leftDrawer.mg-left-col:has(#libraryPanel:target),
  #leftDrawer.mg-left-col:has(#photoPanel:target) {
    transform: translateX(0);
  }

  .mg-drawer-close {
    display: block;
    flex: 0 0 auto;
    text-align: center;
    padding: 10px;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    border-bottom: 1px solid var(--border);
  }

  .mg-drawer-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-sheet) var(--ease-drawer), background-color var(--dur-sheet) var(--ease-drawer);
    z-index: 255;
  }

  #leftDrawer.mg-left-col:has(#libraryPanel:target) ~ .mg-drawer-scrim,
  #leftDrawer.mg-left-col:has(#photoPanel:target) ~ .mg-drawer-scrim {
    background: var(--scrim);
    opacity: 1;
    pointer-events: auto;
  }

  .mg-library-panel, .mg-photo-panel { flex: 1 1 auto; }

  /* inspector becomes a fixed bottom sheet, keyed off the real 'is-open'
     class inspector.js already toggles (B4/M5 - real JS behavior, not a
     CSS-only substitute). */
  #inspectorPanel.mg-inspector-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 78vh;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
    /* item 13: the sheet spans the full device width (left:0; right:0
       above), so BOTH physical side edges need the safe-area inset, not
       just the bottom (a landscape notch/home-indicator can sit on either
       side depending on device rotation). */
    padding-left: calc(16px + var(--safe-l));
    padding-right: calc(16px + var(--safe-r));
    padding-bottom: calc(16px + var(--safe-b));
    transform: translateY(100%);
    transition: transform var(--dur-sheet) var(--ease-drawer);
    z-index: 280;
  }

  #inspectorPanel.mg-inspector-panel:empty::before { display: none; }

  #inspectorPanel.mg-inspector-panel.is-open { transform: translateY(0); }

  .mg-bottom-toolbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--bottom-toolbar-h) + var(--safe-b));
    padding-bottom: var(--safe-b);
    padding-left: var(--safe-l);
    padding-right: var(--safe-r);
    background: var(--panel);
    border-top: 1px solid var(--border);
    z-index: 240;
  }

  .mg-bt-link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-dim);
  }

  .mg-bt-link:active { color: var(--accent); }
}

/* ============================================================
   13. Reduced motion (mandatory kill switch, DESIGN.md S1)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .mg-btn:active, .mg-chip:active, .mg-sample-thumb:active, .mg-lib-card:active {
    transform: none !important;
  }
}