/* style — the Create rooms (Recast, Swap, Remove, Change environment,
   Motion transfer, Relight, Change angle, Reshoot, Enhance, the image
   tools), to the same design as the generation panel.

   Simon: "update the button design, spacing, colors, and general design of
   all of the different modes (such as recast, swap, remove, etc.) so it
   follows a similar design aesthetic as the create mode."

   The numbers here are 31-generation-panel.css's, restated for the rooms'
   own classes: #121212 cards with 8px corners on a #1c1c1c hairline, small
   grey tracked headings, dashed #343434 wells on a darker ground, #090909
   prompt boxes with 5px corners, 39-tall fields with 6px corners on
   #0c0c0c, the two-way switch and the model bench with the chosen one in
   the crimson gradient, and Generate as the one lit thing: 43 tall, the
   gradient, the glow. The font is untouched.

   The rooms carry their own stylesheet (js/simple.js injects it at boot,
   which puts it AFTER every linked sheet), so every rule here is written
   one notch more specific than the one it revises -- `html` in front, or
   the pane's id -- rather than relying on order. */

/* ---- the task list ---- */
#sm-tasks .sm-tk { border-radius: 7px; padding: 9px 10px; margin-bottom: 3px; }
#sm-tasks .sm-tk:hover { background: #121212; }
#sm-tasks .sm-tk.on {
  border-color: var(--accent);
  background: linear-gradient(135deg, #2a0616 0%, #2b0a1c 100%);
}
#sm-tasks .sm-tkico { border-radius: 6px; }
#sm-tasks .sm-tkgrp, #sm-tasks .sm-grp { font-size: 10px; font-weight: 500; letter-spacing: .13em; color: #8e8e8e; }

/* ---- the hero and the headings ---- */
html .sm-hero { border-radius: 8px; border-color: #1c1c1c; }
html #sm-main .sec-title, html #sm-main .sm-lab, html #sm-adv .sec-title {
  font-size: 10px; font-weight: 500; letter-spacing: .13em; color: #8e8e8e;
}
html #sm-main .sm-opt { font-weight: 400; letter-spacing: 0; color: #6f6f6f; }
html #sm-main .sm-fold { font-size: 10px; font-weight: 500; letter-spacing: .13em; color: #8e8e8e; }
html #sm-main .sm-fold:hover { color: #dedede; }

/* ---- the cards: one surface, soft corners, a hairline ---- */
html #sm-main .sm-step, html #sm-adv {
  background: #121212; border: 1px solid #1c1c1c; border-radius: 8px; padding: 13px 13px 14px; margin: 0 0 10px;
}
html #sm-main .sm-step > .sec-title { margin-bottom: 10px; }
html #sm-main .sm-adv-wrap { padding: 2px 2px 0; margin-bottom: 12px; }
html #sm-adv { margin-top: 10px; }

/* ---- wells: the shot, the references, the characters ---- */
html #sm-main .vtrim-empty, html #sm-main .sm-drop,
html #sm-main .sm-castadd, html #sm-main .slot-card.empty {
  border: 1px dashed #343434; background: rgba(0, 0, 0, .3); border-radius: 5px; color: #9a9a9a;
}
html #sm-main .vtrim-empty:hover, html #sm-main .sm-castadd:hover, html #sm-main .slot-card.empty:hover,
html #sm-main .sm-drop.over, html #sm-main .sm-castadd.over {
  border-color: var(--accent); background: #100c0e; color: #e6e6e6;
}
html #sm-stage { border-radius: 6px; border-color: #1c1c1c; }
html #sm-main .slot-grid { gap: 12px; }

/* ---- the boxes you write in ---- */
/* 11px, not 13 -- the same 15% off the create room's prompt boxes that
   31-generation-panel.css takes off the classic one. Kept in step by hand:
   they are the same control in two rooms and should not read as two sizes. */
html #sm-note, html #sm-main .sm-fld.txt textarea, html #sm-main textarea.sm-prompt, html #sm-main .sm-step textarea {
  background: #090909; border: 1px solid #232323; border-radius: 5px;
  padding: 11px 13px; font-size: 11px; line-height: 1.5; min-height: 80px;
}
html #sm-note:focus, html #sm-main .sm-fld.txt textarea:focus, html #sm-main .sm-step textarea:focus { border-color: var(--accent); }

/* ---- the fields: one height, one corner, one surface ---- */
html #sm-main .sm-fldrow { gap: 10px; }
html #sm-main .sm-fld {
  height: 39px; background: #0c0c0c; border: 1px solid #232323; border-radius: 6px; padding: 0 12px;
}
html #sm-main .sm-fld:hover { background: #111111; border-color: #3a3a3a; }
html #sm-main .sm-fld.txt, html #sm-main .sm-fld.txt:hover { height: auto; background: none; border: 0; border-radius: 0; padding: 0; }
html #sm-main .sm-fld.pick, html #sm-main .sm-fld.pick:hover { height: auto; background: #0c0c0c; }
html #sm-main .sm-fldk { font-size: 10px; font-weight: 500; letter-spacing: .1em; color: #bababa; }
html #sm-main .sm-fldv { font-size: 12px; font-weight: 500; }
html #sm-main .sm-lk { font-size: 10px; font-weight: 500; letter-spacing: .1em; color: #bababa; }

/* Picker tiles (lenses, looks): the same surface, the chosen one outlined
   in crimson on the faint crimson wash the tab strip uses. */
html #sm-main .sm-pickt { background: #121212; border-color: #272727; border-radius: 5px; color: #bdbdbd; }
html #sm-main .sm-pickt:hover { border-color: #3a3a3a; color: #f3f3f3; }
html #sm-main .sm-pickt.active {
  border-color: var(--accent); color: #fff;
  background: linear-gradient(135deg, #2a0616 0%, #2b0a1c 100%);
}

/* The two-way switch: the dark well, the chosen side in the gradient. */
html #sm-main .sm-seg { background: #0c0c0c; border-color: #1e1e1e; border-radius: 6px; padding: 4px; }
html #sm-main .sm-seg .sm-pickt, html #sm-main .sm-seg .sm-pickt:hover, html #sm-main .sm-seg .sm-pickt.active {
  background: none; border-color: transparent; border-radius: 5px; font-size: 12px; font-weight: 500;
}
html #sm-main .sm-seg .sm-pickt { color: #bdbdbd; padding: 8px 10px; }
html #sm-main .sm-seg .sm-pickt.active { color: #fff; }
html #sm-main .sm-segthumb {
  border-radius: 5px; box-shadow: none;
  background: linear-gradient(135deg, #e8114e 0%, #dd1560 55%, #c9228c 100%);
}

/* The model bench and the resolution row under Advanced: 34-tall pills,
   the chosen one in the gradient -- the MODE row from the generation panel. */
html #sm-bench, html #sm-res .tier-tabs { gap: 8px; }
html #sm-bench .tier-tab, html #sm-res .tier-tab, html #sm-main .tier-tab {
  height: 34px; line-height: 32px; border-radius: 5px; font-size: 12px; font-weight: 500;
  background: #121212; border: 1px solid #272727; color: #dedede;
}
html #sm-bench .tier-tab:hover, html #sm-res .tier-tab:hover, html #sm-main .tier-tab:hover { border-color: #3a3a3a; color: #fff; }
html #sm-bench .tier-tab.active, html #sm-res .tier-tab.active, html #sm-main .tier-tab.active {
  background: linear-gradient(135deg, #e8114e 0%, #dd1560 55%, #c9228c 100%); border-color: transparent; color: #fff;
}

/* The small buttons a room carries -- clear the selection, back to the
   original camera, send: quiet squares of the field's own surface. */
html #sm-main .sm-selclear, html #sm-main .btn.small, html #sm-main .sm-acamsend,
html #sm-main .sm-stagerow .btn, html #sm-main .sm-guide .btn {
  height: 30px; padding: 0 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
  background: #121212; border: 1px solid #272727; color: #f3f3f3;
}
html #sm-main .sm-selclear:hover, html #sm-main .btn.small:hover, html #sm-main .sm-acamsend:hover,
html #sm-main .sm-stagerow .btn:hover, html #sm-main .sm-guide .btn:hover {
  border-color: #3a3a3a; background: #161616; color: #fff;
}

/* Sliders: the crimson thumb on a quiet track. */
html #sm-main input[type=range] { accent-color: var(--accent); }

/* ---- Generate: the one lit thing ---- */
html #sm-main .sm-go-row { gap: 10px; margin-top: 12px; }
html #sm-go.btn.big, html #sm-go {
  height: 43px; padding: 0 22px; border-radius: 6px; font-size: 14px; font-weight: 500;
  background: linear-gradient(135deg, #e8114e 0%, #dd1560 55%, #c9228c 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 22px rgba(232, 17, 78, .35);
}
html #sm-go:hover:not(:disabled) { filter: brightness(1.08); }
html #sm-go:disabled { box-shadow: none; }
html #sm-cost, html #sm-why { font-size: 10px; color: #8e8e8e; }
html #sm-why.need { color: #bababa; }