/* logo.geneticker.com — overlay on the shared Geneticker theme (styles.css, imported
   verbatim from Cipher). This sheet (1) sets the Logo studio's accent so it reads as
   a sibling of Cipher (teal) / Decipher (indigo) / Swap (violet) / Locus (cyan) —
   the studio borrows the MARK's own teal — and (2) adds the three-pane editor
   chrome: the slide rail, the stage, and the inspector.

   DARK-MODE RULE (see darkmode-token-traps): every token and every hard-coded
   accent-rgba rule below is declared THREE times — light :root, explicit
   [data-theme="dark"], and the @media prefers-dark block. Both dark blocks are
   byte-identical. Add to all three or the theme flip will miss one path. */

/* ---------------------------------------------------------------- accent */
:root {
  --logo:      #2f7f93;   /* the mark's teal, darkened to hold AA as text on white */
  --logo-h:    #24697a;
  --logo-on:   #fff;
  --logo-soft: rgba(65,147,168,.10);
  --logo-line: rgba(65,147,168,.42);
  --teal:      #2f7f93;   /* remap the family accent so .brand / .btn-teal inherit it */
  --teal-h:    #24697a;
  --stage-bg:  #eef0f3;   /* the surface the artboard floats on */
  --checker-a: #ffffff;   /* transparency checkerboard */
  --checker-b: #e6e9ee;
  --rail-sel:  rgba(65,147,168,.13);
}
:root[data-theme="dark"] {
  --logo:      #6bb6c9;
  --logo-h:    #8ccadb;
  --logo-on:   #06222b;
  --logo-soft: rgba(107,182,201,.14);
  --logo-line: rgba(107,182,201,.50);
  --teal:      #6bb6c9;
  --teal-h:    #8ccadb;
  --stage-bg:  #0b0d11;
  --checker-a: #1b1f27;
  --checker-b: #141821;
  --rail-sel:  rgba(107,182,201,.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --logo:      #6bb6c9;
    --logo-h:    #8ccadb;
    --logo-on:   #06222b;
    --logo-soft: rgba(107,182,201,.14);
    --logo-line: rgba(107,182,201,.50);
    --teal:      #6bb6c9;
    --teal-h:    #8ccadb;
    --stage-bg:  #0b0d11;
    --checker-a: #1b1f27;
    --checker-b: #141821;
    --rail-sel:  rgba(107,182,201,.16);
  }
}

/* ------------------------------------------------------------------ shell */
/* Column flex rather than `height: calc(100vh - <topbar>)`: the topbar's height is
   set by the shared sheet and its own content, so any number hard-coded here is a
   number that silently goes stale and pushes the editor a few pixels off-screen. */
body { overflow: hidden; display: flex; flex-direction: column; }

.lg-shell {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr) 320px;
  flex: 1;
  min-height: 0;
}

/* ------------------------------------------------------------- slide rail */
.lg-rail {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.lg-rail-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line2);
  font-size: 12px; font-weight: 500; color: var(--ink2);
  letter-spacing: .3px; text-transform: uppercase;
}
.lg-rail-head .count { color: var(--ink3); font-weight: 400; text-transform: none; letter-spacing: 0; }
.lg-slides { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }

.lg-slide {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel2);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.lg-slide:hover { border-color: var(--logo-line); }
.lg-slide.sel {
  border-color: var(--logo);
  background: var(--rail-sel);
  box-shadow: 0 0 0 1px var(--logo);
}
.lg-slide .num {
  position: absolute; top: 6px; left: 8px;
  font: 500 10px var(--mono); color: var(--ink3);
}
.lg-slide .thumb {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 9px 9px 0 0;
  background-color: var(--checker-a);
  background-image:
    linear-gradient(45deg, var(--checker-b) 25%, transparent 25%, transparent 75%, var(--checker-b) 75%),
    linear-gradient(45deg, var(--checker-b) 25%, transparent 25%, transparent 75%, var(--checker-b) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
.lg-slide .thumb svg { display: block; width: 100%; height: 100%; }
.lg-slide .name {
  padding: 6px 8px;
  font-size: 12px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: 1px solid var(--line2);
}
.lg-slide .name input {
  width: 100%; font: inherit; color: inherit;
  background: var(--panel); border: 1px solid var(--logo); border-radius: 5px;
  padding: 1px 4px;
}
.lg-slide.drag-over { border-top: 3px solid var(--logo); }
.lg-rail-foot { padding: 10px; border-top: 1px solid var(--line2); display: flex; gap: 6px; }

/* ----------------------------------------------------------------- stage */
.lg-stage {
  position: relative;
  background: var(--stage-bg);
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}
.lg-stage-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex-wrap: wrap;
}
.lg-stage-wrap {
  flex: 1; display: grid; place-items: center;
  overflow: auto; padding: 24px; min-height: 0;
}
.lg-artboard {
  position: relative;
  box-shadow: var(--shadow-lg);
  border-radius: 4px;
  background-color: var(--checker-a);
  background-image:
    linear-gradient(45deg, var(--checker-b) 25%, transparent 25%, transparent 75%, var(--checker-b) 75%),
    linear-gradient(45deg, var(--checker-b) 25%, transparent 25%, transparent 75%, var(--checker-b) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
.lg-artboard.solid { background-image: none; }
.lg-artboard svg { display: block; border-radius: 4px; }
#lg-canvas { position: absolute; inset: 0; touch-action: none; cursor: default; }
#lg-canvas .hit { cursor: move; }
#lg-canvas .hit.locked { cursor: not-allowed; }
#lg-canvas .outline { fill: none; stroke: var(--logo); vector-effect: non-scaling-stroke; }
#lg-canvas .handle {
  fill: var(--panel); stroke: var(--logo); stroke-width: 1.5;
  vector-effect: non-scaling-stroke; cursor: pointer;
}
#lg-canvas .handle.rot { cursor: grab; }
#lg-canvas .handle.size { cursor: nwse-resize; }
#lg-canvas .guide { stroke: var(--logo-line); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; fill: none; }

/* favicon legibility strip */
.lg-sizes { display: flex; align-items: flex-end; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.lg-sizes .s { text-align: center; }
.lg-sizes .s .pair { display: flex; gap: 3px; align-items: flex-end; }
.lg-sizes .s svg { display: block; }
.lg-sizes .s > span { display: block; font: 400 10px var(--mono); color: var(--ink3); margin-top: 2px; }
.lg-sizes .on-dark { background: #0f1115; border-radius: 3px; padding: 2px; }
.lg-sizes .on-light { background: #ffffff; border-radius: 3px; padding: 2px; }

/* ------------------------------------------------------------- inspector */
.lg-insp {
  background: var(--panel);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  min-height: 0;
}
.lg-sec { border-bottom: 1px solid var(--line2); padding: 12px 14px; }
.lg-sec h3 {
  font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink3); margin-bottom: 10px;
}
.lg-layers { display: flex; flex-direction: column; gap: 3px; }
.lg-layer {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 7px; border-radius: 7px; cursor: pointer;
  border: 1px solid transparent; font-size: 12.5px;
}
.lg-layer:hover { background: var(--panel2); }
.lg-layer.sel { background: var(--rail-sel); border-color: var(--logo-line); }
.lg-layer .sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); flex: none; }
.lg-layer .lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-layer .mini { opacity: .55; font-size: 15px; line-height: 1; }
.lg-layer .mini:hover { opacity: 1; }
.lg-layer.off .lbl { text-decoration: line-through; color: var(--ink3); }

.lg-field { margin-bottom: 9px; }
.lg-field > label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; color: var(--ink2); margin-bottom: 3px;
}
.lg-field > label .val { font: 400 11px var(--mono); color: var(--ink3); }
.lg-field .ctl { display: flex; align-items: center; gap: 7px; }
.lg-field input[type=range] { flex: 1; accent-color: var(--logo); min-width: 0; }
.lg-field input[type=number], .lg-field input[type=text], .lg-field select {
  font: 400 12px var(--mono);
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 6px; width: 66px; flex: none;
}
.lg-field select { width: 100%; font-family: var(--body); }
.lg-field input[type=color] {
  width: 34px; height: 26px; padding: 0; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel2); cursor: pointer; flex: none;
}
.lg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }

.lg-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.lg-swatches button {
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid var(--line); padding: 0;
}
.lg-swatches button:hover { outline: 2px solid var(--logo); outline-offset: 1px; }

.lg-empty { color: var(--ink3); font-size: 12.5px; padding: 6px 0 2px; }

/* ------------------------------------------------------------------ bits */
.btn-sm {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 12px var(--body);
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
}
.btn-sm:hover { border-color: var(--logo-line); background: var(--logo-soft); }
.btn-sm[disabled] { opacity: .45; cursor: not-allowed; }
.btn-sm .material-icons-outlined { font-size: 16px; }
.btn-accent { background: var(--logo); border-color: var(--logo); color: var(--logo-on); }
.btn-accent:hover { background: var(--logo-h); border-color: var(--logo-h); }
.btn-danger:hover { border-color: var(--red); background: rgba(217,48,37,.10); color: var(--red); }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button {
  font: 500 12px var(--body); padding: 5px 10px;
  background: var(--panel2); color: var(--ink2); border: none;
  border-right: 1px solid var(--line);
}
.seg button:last-child { border-right: none; }
.seg button.on { background: var(--logo); color: var(--logo-on); }

.lg-dot { flex: 1; }
.hint { font-size: 11.5px; color: var(--ink3); }

/* --------------------------------------------------------------- dialogs */
.lg-modal-bg {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15,17,21,.55);
  display: grid; place-items: center; padding: 20px;
}
.lg-modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); width: min(460px, 100%);
  max-height: 86vh; overflow: auto;
}
.lg-modal header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--line2);
  font-family: var(--display); font-size: 16px; font-weight: 500;
}
.lg-modal .body { padding: 16px 18px; }
.lg-modal footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--line2);
}
.lg-modal textarea {
  width: 100%; height: 190px; resize: vertical;
  font: 400 11px/1.5 var(--mono);
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px;
}

.lg-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 70; padding: 9px 16px; border-radius: 10px;
  background: var(--ink); color: var(--bg);
  font-size: 13px; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.lg-toast.show { opacity: 1; }
.lg-toast.err { background: var(--red); color: #fff; }

/* ------------------------------------------------------------ small screens */
@media (max-width: 1100px) {
  .lg-shell { grid-template-columns: 168px minmax(0,1fr) 280px; }
}
@media (max-width: 880px) {
  body { overflow: auto; }
  .lg-shell { grid-template-columns: 1fr; height: auto; }
  .lg-rail { border-right: none; border-bottom: 1px solid var(--line); }
  .lg-slides { flex-direction: row; overflow-x: auto; }
  .lg-slide { flex: none; width: 130px; }
  .lg-insp { border-left: none; border-top: 1px solid var(--line); }
}