/* Process tab: calmer structure (2026-09-26).
   Steps: 1 file -> 2 showcase type -> 3 style (frame + watermark) -> quality (collapsed) -> 4 create.
   Loaded last on /app; every rule is scoped to the Process tab. */

/* One navigation layer is enough: the numbered cards already are the steps. */
.page-tools #tab-process>#processRoute {display:none!important}
body.page-tools.is-showcase-workspace #toolTaskChooser,body.page-tools:has(#tab-process.active) #toolTaskChooser {display:none!important}
.page-tools #tab-process>.process-controls,
.page-tools #tab-process>.process-preview-column {grid-row:1!important}
.page-tools #tab-process>.process-preview-column {top:84px}

/* ---- 3 · Style it ---- */
.page-tools #processDesignCard {display:grid;gap:0}
.page-tools #processDesignCard>.editor-note {margin:-8px 0 14px}
.process-design__block {padding:16px 0 4px;border-top:1px solid var(--editor-line,#29414f)}
.process-design__block+.process-design__block {margin-top:14px}
.process-design__head {display:grid;gap:3px;margin-bottom:12px}
.process-design__head b {font:800 14px/1.35 Mulish,sans-serif;color:var(--editor-ink,#edf8fc)}
.process-design__head small {font:400 12px/1.5 Mulish,sans-serif;color:var(--editor-muted,#a2b6c2)}
.process-design__head--toggle {display:flex;align-items:center;justify-content:space-between;gap:14px}
.process-design__head--toggle>span {display:grid;gap:3px}

/* Frame: style tiles on top, then the few controls the chosen style needs. */
.page-tools #tab-process #workshopOutlineSettings {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-areas:none!important;gap:12px 14px!important;margin:0!important;padding:0!important;border:0!important;background:none!important}
.page-tools #tab-process #workshopOutlineSettings>.workshop-outline__fx {display:contents}
.page-tools #tab-process #workshopOutlineSettings .field {margin:0!important;min-width:0!important;grid-area:auto!important}
.page-tools #tab-process #workshopOutlineSettings [hidden] {display:none!important}
.page-tools #tab-process .process-frame__styles {order:1;grid-column:1/-1;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.page-tools #tab-process .process-frame__styles .sqfx__style {min-height:74px}
.page-tools #tab-process .workshop-outline__color {order:2}
.page-tools #tab-process .workshop-outline__color2 {order:3}
.page-tools #tab-process .workshop-outline__width {order:4}
.page-tools #tab-process .workshop-outline__speed {order:5}
.page-tools #tab-process .process-frame__target {order:6;grid-column:1/-1}
.page-tools #tab-process .workshop-outline__fxnote {order:7;grid-column:1/-1;margin:0}
.page-tools #tab-process #workshopOutlineSettings input[type=color] {width:100%;height:38px;padding:3px;cursor:pointer}
.process-frame__target {display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.process-frame__target>span {margin-right:4px;font:600 12px/1.5 Mulish,sans-serif;color:var(--editor-muted,#a2b6c2)}
.process-frame__target button {padding:8px 12px;border:1px solid #2a4757;background:#0a1721;color:#bcd0da;font:700 12px Mulish,sans-serif;cursor:pointer}
.process-frame__target button[aria-pressed=true] {border-color:var(--editor-accent,#4dd5f5);background:#123f50;color:#f1fcff}

/* Watermark */
.process-wm__toggle {display:flex!important;align-items:center;margin:0!important}
.process-wm__free {display:none;margin:0 0 12px;padding:10px 12px;border-left:2px solid var(--editor-accent,#4dd5f5);background:rgba(77,213,245,.07);color:#bfe9f5;font:500 12px/1.55 Mulish,sans-serif}
#processWatermarkBlock:has(#wmEnable:disabled) .process-wm__free {display:block}
/* Free plan: the fixed mark is explained once instead of showing greyed-out fields. */
#processWatermarkBlock:has(#wmEnable:disabled) :is(.process-wm__grid,.process-wm__more,.process-wm__reset) {display:none}
#processWatermarkBlock:has(#wmEnable:disabled) .process-wm__toggle {opacity:.5}
#processWatermarkBlock:has(#wmEnable:not(:checked):not(:disabled)) :is(.process-wm__grid,.process-wm__more,.process-wm__reset) {display:none}
.process-wm__reset {margin-top:10px;padding:0;border:0;background:none;color:var(--editor-accent,#4dd5f5);font:700 12px Mulish,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.process-wm__reset:hover {color:#9bebff}
.process-wm__reset:disabled {display:none}
.process-wm__grid {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr) minmax(0,1fr);gap:12px}
.process-wm__grid>.field {margin:0!important;min-width:0;grid-area:auto!important}
.process-wm__grid input[type=color] {width:100%;height:38px;padding:3px;cursor:pointer}
.process-wm__more {margin-top:12px}
.process-wm__more>summary {cursor:pointer;color:var(--editor-muted,#a2b6c2);font:700 12px Mulish,sans-serif;padding:4px 0}
.process-wm__more>summary:hover {color:var(--editor-ink,#edf8fc)}
.process-wm__more[open]>summary {margin-bottom:10px}
.page-tools #tab-process .field>span {font:600 12px/1.5 Mulish,sans-serif!important;text-transform:none!important;letter-spacing:0!important;color:var(--editor-muted,#a2b6c2)}

/* Preview card: rotation as one tidy toolbar under the canvas. */
.page-tools #tab-process .process-rotation {display:grid!important;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
.page-tools #tab-process .process-rotation__controls {justify-content:flex-start!important}
.page-tools #tab-process #btnWmReset {min-height:34px;padding:7px 12px;font-size:12px}

/* ---- Quality (collapsed) ---- */
.page-tools #processAdvanced>.process-basics {grid-template-columns:repeat(2,minmax(0,1fr))!important}
.page-tools #processAdvanced .process-advanced__toggles {grid-column:1/-1;display:flex!important;flex-wrap:wrap;gap:10px 22px}

/* ---- 4 · Create: summary above the main button ---- */
.process-summary {display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 12px;padding:0;list-style:none}
.process-summary li {padding:5px 9px;border:1px solid #2a4757;background:#0a1721;color:#cfe3ec;font:600 11px/1.3 Mulish,sans-serif}
.process-summary li:first-child {border-color:#2f6e82;color:#e9fbff}
.page-tools #processSubmit #btnRun {width:100%;min-height:50px;font-size:15px}
.page-tools #processSubmit .row {flex-wrap:wrap;gap:8px}

/* ---- Phone dock ---- */
.process-dock {position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(5,12,18,.96);border-top:1px solid #29414f;box-shadow:0 -10px 30px #0009}
.process-dock[hidden] {display:none!important}
.process-dock__summary {flex:1;min-width:0;color:#cfe3ec;font:600 12px/1.35 Mulish,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.process-dock .btn {flex:0 0 auto;min-height:44px;padding:10px 16px}
body.has-process-dock .studio-support {bottom:max(80px,var(--support-lift,0px))!important}

@media (max-width:1100px) {
  .process-wm__grid {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .process-wm__grid .process-field--watermark {grid-column:1/-1}
}
@media (max-width:760px) {
  .page-tools #tab-process .process-preview-column>#wmPreviewCard {order:3}
  .page-tools #processDesignCard {order:4}
  .page-tools #processSettingsCard {order:5}
  .page-tools #processSubmit {order:6}
  .page-tools #tab-process .process-frame__styles {grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-tools #tab-process #workshopOutlineSettings {grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  body.has-process-dock .main {padding-bottom:96px!important}
}

/* ---- Workspace header: one segmented mode switch + quiet utilities ---- */
.is-showcase-workspace .workspace-switch {align-items:center!important;gap:10px 14px!important}
.workspace-switch__modes {display:flex;flex:1 1 560px;gap:4px;padding:4px;border:1px solid var(--editor-line,#29414f);border-radius:8px;background:var(--editor-inset,#08121b)}
.workspace-switch__modes>button {flex:1 1 0;display:flex;align-items:center;gap:12px;min-height:54px;padding:10px 16px;border:0;border-radius:6px;background:transparent;color:var(--editor-muted,#a2b6c2);font:700 12px/1.4 Mulish,sans-serif;text-align:left;cursor:pointer;transition:background .15s,color .15s}
.workspace-switch__modes>button:hover {background:#0f2531;color:var(--editor-ink,#edf8fc)}
.workspace-switch__modes>button.active {background:#123343;box-shadow:inset 0 0 0 1px var(--editor-accent,#4dd5f5);color:var(--editor-accent,#4dd5f5)}
.workspace-switch__modes>button>span:last-child {display:grid;gap:3px}
.is-showcase-workspace .workspace-switch>button {min-height:40px!important;padding:8px 12px!important;border-color:transparent!important;background:transparent!important;color:var(--editor-muted,#a2b6c2)!important}
.is-showcase-workspace .workspace-switch>button:hover,.is-showcase-workspace .workspace-switch>button.active {border-color:var(--editor-line,#29414f)!important;color:var(--editor-ink,#edf8fc)!important}
@media (max-width:760px) {
  .workspace-switch__modes {flex:1 1 100%}
  .workspace-switch__modes>button {padding:10px;gap:8px;min-height:60px;align-items:flex-start}
}

/* ---- Which type do I have? ---- */
.process-mode-help {margin-top:12px;border-top:1px solid var(--editor-line,#29414f);padding-top:10px}
.process-mode-help>summary {cursor:pointer;color:var(--editor-accent,#4dd5f5);font:700 12px Mulish,sans-serif;padding:4px 0}
.process-mode-help p {margin:8px 0;color:var(--editor-muted,#a2b6c2);font:400 12px/1.6 Mulish,sans-serif}
.process-mode-help ul {margin:0;padding:0;list-style:none;display:grid;gap:6px}
.process-mode-help li {display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;padding:7px 10px;background:var(--editor-inset,#08121b);border:1px solid #1f3542;color:var(--editor-ink,#edf8fc);font:600 12px/1.4 Mulish,sans-serif}
.process-mode-help li b {font:700 11px/1.4 Consolas,monospace;color:#9fdcef}

/* ---- Rotation: plain language, one row ---- */
.page-tools #tab-process .process-rotation__kicker {font:600 12px/1.4 Mulish,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:var(--editor-muted,#a2b6c2)!important}
.page-tools #tab-process .process-rotation__identity strong {font-size:13px}

/* ---- Support launcher: compact on the Tools page so it never covers controls ---- */
@media (min-width:761px) {
  body.page-tools .studio-support {right:18px;bottom:max(18px,var(--support-lift,0px))}
  body.page-tools .studio-support .studio-chat-launch {width:48px;height:48px;min-height:48px;padding:0;justify-content:center;border-radius:50%}
  body.page-tools .studio-support .chat-launch-label {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.workspace-switch__modes>button,.workspace-switch__modes>button * {text-transform:none!important;letter-spacing:0!important;font-family:Mulish,sans-serif!important}
.workspace-switch__modes b {font-size:14px!important;font-weight:800!important;color:var(--editor-ink,#edf8fc)}
.workspace-switch__modes small {font-size:12px!important;font-weight:400!important;color:var(--editor-muted,#a2b6c2)}
.workspace-switch__modes>button.active b {color:#f2fcff}
.is-showcase-workspace .workspace-switch>button,.workspace-more>summary {text-transform:none!important;letter-spacing:0!important;font:700 12px/1.3 Mulish,sans-serif!important}
.page-tools #tab-process .process-rotation__controls .file-rotate {font:700 12px/1 Mulish,sans-serif!important;text-transform:none!important;letter-spacing:0!important;padding:0 12px}
.page-tools #tab-process .process-rotation__controls .process-file__angle {font:700 12px/1 Mulish,sans-serif}
.page-tools #tab-process .btn.ghost,.page-tools #tab-process .asset-library-open {font:700 12px/1.3 Mulish,sans-serif!important;text-transform:none!important;letter-spacing:0!important}
.process-studio-link {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:12px 0 0;padding:10px 12px;border:1px dashed #2f5a6b;background:#0a1924;color:var(--editor-muted,#a2b6c2);font:500 12px/1.5 Mulish,sans-serif}
.process-studio-link[hidden] {display:none}
.process-studio-link button {padding:7px 12px;border:1px solid #2f6e82;background:#0f2a37;color:#e9fbff;font:700 12px Mulish,sans-serif;cursor:pointer}
.process-studio-link button:hover {border-color:var(--editor-accent,#4dd5f5)}
.process-sample {display:block;width:100%;margin-top:8px;padding:11px 12px;border:1px solid #2f6e82;border-radius:6px;background:linear-gradient(90deg,rgba(77,213,245,.12),rgba(138,98,255,.12));color:#e9fbff;font:800 13px/1.3 Mulish,sans-serif;cursor:pointer;transition:border-color .15s,transform .15s}
.process-sample:hover {border-color:var(--editor-accent,#4dd5f5);transform:translateY(-1px)}
.process-sample:disabled {opacity:.6;cursor:progress}
.page-tools #tab-process.has-files .process-sample {display:none}
.page-tools #tab-process .process-frame__looks {order:0;grid-column:1/-1;display:grid;gap:6px}
.page-tools #tab-process .process-frame__looks>span {font:600 12px/1.5 Mulish,sans-serif;color:var(--editor-muted,#a2b6c2)}

/* Drop anywhere, link source, paste tip, "you can leave" note */
.page-tools #tab-process {position:relative}
.process-droplayer {position:absolute;inset:-8px;z-index:30;display:grid;place-items:center;border:2px dashed var(--editor-accent,#4dd5f5);border-radius:10px;background:rgba(4,16,24,.82);pointer-events:none}
.process-droplayer[hidden] {display:none}
.process-droplayer span {padding:14px 22px;border:1px solid #2f6e82;background:#0c2a37;color:#eafcff;font:800 16px Mulish,sans-serif}
.process-link {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px}
.process-link input {min-width:0;min-height:40px;padding:8px 12px;border:1px solid var(--editor-line,#29414f);background:var(--editor-inset,#08121b);color:var(--editor-ink,#edf8fc);font:500 13px Mulish,sans-serif}
.process-link input:focus {outline:none;border-color:var(--editor-accent,#4dd5f5)}
.process-link .btn {min-height:40px}
.process-link__status {grid-column:1/-1;margin:0;min-height:0;color:var(--editor-muted,#a2b6c2);font:500 12px/1.5 Mulish,sans-serif}
.process-link__status:empty {display:none}
.process-link__status.is-error {color:#ff9aaa}
.process-paste-hint {margin:6px 0 0;color:#7f9aaa;font:500 11px/1.5 Mulish,sans-serif}
.page-tools #tab-process.has-files .process-paste-hint {display:none}
.process-close-note {margin:10px 0 0;padding:9px 12px;border-left:2px solid #64dcb8;background:rgba(100,220,184,.07);color:#bff3e1;font:600 12px/1.5 Mulish,sans-serif}
.process-close-note[hidden] {display:none}

/* "Add from a link": its own highlighted block so it is not lost under the upload box */
.process-link {margin-top:12px!important;padding:12px 12px 12px;border:1px solid rgba(31,201,241,.45);border-radius:12px;background:linear-gradient(135deg,rgba(31,201,241,.1),rgba(138,125,255,.1)),rgba(5,10,28,.8);box-shadow:0 0 0 1px rgba(31,201,241,.06),0 10px 26px rgba(31,201,241,.08)}
.process-link__title {grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 2px}
.process-link__title svg {width:18px;height:18px;flex:0 0 auto;color:#1fc9f1}
.process-link__title b {font:800 14px/1.3 Montserrat,Mulish,sans-serif;color:#f2fbff}
.process-link__title small {font:600 11px/1.4 Montserrat,Mulish,sans-serif;color:rgba(214,229,250,.7)}
.process-link input {border-color:rgba(31,201,241,.35)!important}

/* Colour correction block */
.process-grade__grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.process-grade__field {margin:0!important;min-width:0}
.process-grade__field>span {display:flex!important;align-items:baseline;justify-content:space-between;gap:8px}
.process-grade__field i {font-style:normal}
.process-grade__field output {font:700 12px/1 Montserrat,Mulish,sans-serif;color:#9fe9ff}
.process-grade__field input[type=range] {width:100%}
.process-grade__reset {padding:6px 11px;border:1px solid rgba(110,160,230,.3);border-radius:8px;background:rgba(8,16,36,.85);color:#e6f0ff;font:700 12px Montserrat,Mulish,sans-serif;cursor:pointer}
.process-grade__reset:disabled {opacity:.45;cursor:default}
.process-grade__reset:not(:disabled):hover {border-color:rgba(111,227,255,.6)}
@media (max-width:760px){.process-grade__grid{grid-template-columns:1fr}}