/* Graceful Voyage Studio — creator workbench. Scoped to body.cw; customer style.css untouched. */
:root {
  --cw-ink: #1f2b33;
  --cw-ink-soft: #4d5b63;
  --cw-muted: #7b8580;
  --cw-paper: #f3efe6;
  --cw-sheet: #fbf9f4;
  --cw-line: #ddd5c6;
  --cw-harbor: #24485a;      /* deep harbor teal: operator chrome */
  --cw-harbor-2: #2f5d71;
  --cw-sage: #6b8f71;        /* brand sage */
  --cw-sage-wash: #e6eee5;
  --cw-brass: #b8923f;       /* global edition gold, toned */
  --cw-brass-wash: #f4ead2;
  --cw-clay: #b5573f;
  --cw-clay-wash: #f7e4dc;
  --cw-r: 8px;
  --cw-ease: cubic-bezier(.2,.7,.2,1);
  --cw-display: "Fraunces", Georgia, serif;
  --cw-sans: "Instrument Sans", system-ui, sans-serif;
  --cw-mono: "Spline Sans Mono", ui-monospace, monospace;
}
* , *::before, *::after { box-sizing: border-box; }
body.cw { margin: 0; min-height: 100dvh; background: var(--cw-paper); color: var(--cw-ink); font: 14px/1.5 var(--cw-sans);
  background-image: linear-gradient(var(--cw-paper), var(--cw-paper)), repeating-linear-gradient(0deg, transparent 0 27px, rgba(36,72,90,.035) 27px 28px); background-blend-mode: multiply; }
.cw-skip { position: absolute; left: -999px; top: 8px; background: var(--cw-harbor); color: var(--cw-sheet); padding: 8px 12px; border-radius: 6px; z-index: 50; }
.cw-skip:focus { left: 8px; }
code { font-family: var(--cw-mono); font-size: .9em; background: var(--cw-brass-wash); padding: 1px 5px; border-radius: 4px; }

/* bar */
.cw-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; height: 54px; background: var(--cw-harbor); color: #eef2ef; border-bottom: 3px solid var(--cw-brass); }
.cw-bar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cw-mark { width: 18px; height: 18px; border: 2px solid var(--cw-brass); border-radius: 50%; position: relative; flex: none; }
.cw-mark::after { content: ""; position: absolute; inset: 3px; background: var(--cw-sage); border-radius: 50%; }
.cw-bar__name { font-family: var(--cw-display); font-size: 1.05rem; white-space: nowrap; }
.cw-bar__tag { font: 500 .7rem/1 var(--cw-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cw-harbor); background: var(--cw-brass-wash); padding: 4px 7px; border-radius: 3px; white-space: nowrap; }
.cw-bar__nav { display: flex; align-items: center; gap: 4px; }
.cw-bar__nav form { margin: 0; }
.cw-navlink { color: #d6e1df; text-decoration: none; font: 500 .85rem var(--cw-sans); padding: 7px 12px; border-radius: 6px; transition: background .18s, color .18s; }
.cw-navlink:hover, .cw-navlink.is-active { background: rgba(255,255,255,.1); color: #fff; }
.cw-navlink--btn { background: none; border: 1px solid rgba(255,255,255,.25); cursor: pointer; }

.cw-main { padding: 28px 24px 64px; max-width: 1440px; margin: 0 auto; }

/* type */
.cw-eyebrow { font: 500 .7rem/1 var(--cw-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cw-sage); margin: 0 0 10px; }
.cw-h1 { font: 600 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--cw-display); margin: 0 0 8px; letter-spacing: -.01em; }
.cw-h2 { font: 600 1rem/1.2 var(--cw-display); margin: 0; display: flex; align-items: baseline; gap: 10px; }
.cw-h3 { font: 600 .95rem/1.2 var(--cw-display); margin: 0 0 8px; }
.cw-num { font: 500 .72rem var(--cw-mono); color: var(--cw-brass); }
.cw-muted { color: var(--cw-ink-soft); max-width: 72ch; margin: 0; }
.cw-hint { color: var(--cw-muted); font-size: .78rem; margin: 0 0 6px; }
.cw-opt { font-weight: 400; color: var(--cw-muted); font-size: .75rem; }
.cw-mono { font-family: var(--cw-mono); }

/* layout */
.cw-ws__head { margin-bottom: 20px; }
.cw-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 270px; gap: 16px; align-items: start; }
.cw-col { display: grid; gap: 16px; min-width: 0; }
.cw-rail { position: sticky; top: 70px; display: grid; gap: 12px; }
.cw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.cw-three { display: grid; grid-template-columns: 1fr 1fr 110px; gap: 0 12px; }

.cw-panel { background: var(--cw-sheet); border: 1px solid var(--cw-line); border-radius: var(--cw-r); padding: 16px 18px 6px; box-shadow: 0 1px 0 rgba(36,72,90,.04); }
.cw-panel__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px dashed var(--cw-line); }
.cw-panel--brief { border-top: 3px solid var(--cw-sage); }
.cw-panel--rail { padding: 14px 16px; }
.cw-panel--go { padding: 14px 16px; background: var(--cw-harbor); border-color: var(--cw-harbor); color: #e6eeec; }
.cw-panel--go .cw-hint { color: #b9cac7; margin-top: 10px; }
.cw-chip { font: 500 .68rem var(--cw-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cw-sage); background: var(--cw-sage-wash); padding: 3px 8px; border-radius: 99px; }

/* fields */
.cw-field { margin-bottom: 12px; min-width: 0; }
.cw-label { display: block; font-weight: 600; font-size: .8rem; margin-bottom: 4px; color: var(--cw-ink); }
.cw-input { width: 100%; font: inherit; color: var(--cw-ink); background: #fffdf8; border: 1px solid var(--cw-line); border-radius: 6px; padding: 7px 10px; transition: border-color .16s, box-shadow .16s, background .16s; }
.cw-input:hover { border-color: #c6bba7; }
.cw-input:focus { outline: none; border-color: var(--cw-harbor-2); box-shadow: 0 0 0 3px rgba(47,93,113,.16); background: #fff; }
.cw-ta { resize: vertical; min-height: 58px; line-height: 1.45; }
.cw-ta--brief { font-family: var(--cw-mono); font-size: .82rem; min-height: 260px; background: #fffef9; }
select.cw-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cw-ink-soft) 50%), linear-gradient(135deg, var(--cw-ink-soft) 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.has-error .cw-input { border-color: var(--cw-clay); background: #fffaf7; }
.cw-ferr { color: var(--cw-clay); font-size: .78rem; margin: 4px 0 0; font-weight: 500; }
.cw-input.is-suggested { border-color: var(--cw-brass); box-shadow: 0 0 0 3px rgba(184,146,63,.18); }

/* buttons */
.cw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 .83rem var(--cw-sans); padding: 8px 14px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .16s, border-color .16s, color .16s, transform .12s; }
.cw-btn:active { transform: translateY(1px); }
.cw-btn:focus-visible, .cw-navlink:focus-visible, .cw-file:focus-within { outline: 2px solid var(--cw-brass); outline-offset: 2px; }
.cw-btn--primary { background: var(--cw-sage); color: #fbfaf4; }
.cw-btn--primary:hover { background: #5b7e61; }
.cw-panel--go .cw-btn--primary { background: var(--cw-brass); color: #1f2b33; }
.cw-panel--go .cw-btn--primary:hover { background: #c9a44a; }
.cw-btn--ghost { background: var(--cw-sheet); color: var(--cw-ink); border-color: var(--cw-line); }
.cw-btn--ghost:hover { border-color: var(--cw-harbor-2); color: var(--cw-harbor); }
.cw-btn--quiet { background: none; color: var(--cw-clay); padding-left: 4px; padding-right: 4px; justify-content: flex-start; }
.cw-btn--quiet:hover { text-decoration: underline; }
.cw-btn--sm { padding: 5px 10px; font-size: .78rem; }
.cw-btn--wide { width: 100%; padding: 11px; font-size: .9rem; }
.cw-btn[disabled] { opacity: .55; cursor: progress; }
.cw-file { position: relative; }
.cw-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.cw-stack { display: grid; gap: 6px; }

.cw-import { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.cw-status { font-size: .78rem; color: var(--cw-ink-soft); min-height: 1.2em; margin: 4px 0 8px; transition: color .2s; }
.cw-status.is-ok { color: var(--cw-sage); }
.cw-status.is-err { color: var(--cw-clay); }

/* suggestions */
.cw-suggest { background: var(--cw-brass-wash); border: 1px solid #e4d2a5; border-radius: 6px; padding: 12px; margin-bottom: 12px; animation: cw-in .25s var(--cw-ease); }
.cw-suggest__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.cw-suggest__acts { display: flex; gap: 6px; }
.cw-suggest__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cw-suggest__list li { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px; align-items: start; background: var(--cw-sheet); border-radius: 5px; padding: 6px 8px; font-size: .8rem; }
.cw-suggest__list .k { font: 500 .72rem var(--cw-mono); color: var(--cw-harbor); padding-top: 2px; }
.cw-suggest__list .v { white-space: pre-wrap; word-break: break-word; }
.cw-suggest__list .s { font-size: .72rem; color: var(--cw-muted); }
.cw-suggest__list .s.conflict { color: var(--cw-clay); }
.cw-warn { margin: 6px 0 0; padding-left: 18px; color: #7a5a1c; font-size: .78rem; }
.cw-warn:empty { display: none; }

/* summary */
.cw-meter { font: 500 .8rem var(--cw-mono); margin: 0 0 6px; color: var(--cw-ink-soft); }
.cw-bar-track { height: 4px; background: var(--cw-sage-wash); border-radius: 99px; overflow: hidden; margin-bottom: 10px; }
.cw-bar-track span { display: block; height: 100%; width: 100%; background: var(--cw-sage); transform-origin: left; transform: scaleX(0); transition: transform .35s var(--cw-ease); }
.cw-sumlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: .78rem; max-height: 38dvh; overflow: auto; }
.cw-sumlist li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dotted var(--cw-line); }
.cw-sumlist .k { color: var(--cw-muted); }
.cw-sumlist .v { text-align: right; font-family: var(--cw-mono); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.cw-sumlist .empty { color: var(--cw-muted); font-style: italic; border: 0; }
#cwDuration { font: .78rem var(--cw-mono); color: var(--cw-harbor-2); margin-top: -4px; min-height: 0; }

.cw [hidden] { display: none !important; }
.cw-pending { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; margin: 10px 0 0; color: #f4ead2; }
.cw-pulse { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--cw-brass); flex: none; animation: cw-pulse 1.4s ease-in-out infinite; }

/* alerts */
.cw-alert { border-radius: 6px; padding: 10px 14px; margin: 0 0 14px; font-size: .85rem; border: 1px solid; }
.cw-alert p { margin: 6px 0 0; }
.cw-alert--error { background: var(--cw-clay-wash); border-color: #e7b9a9; color: #7d3523; }
.cw-alert--hold { background: var(--cw-brass-wash); border-color: #e4d2a5; color: #5b4718; }

/* login */
.cw-login .cw-main { display: grid; place-items: center; min-height: calc(100dvh - 54px); padding: 24px; }
.cw-gate { display: grid; grid-template-columns: 1fr 1fr; max-width: 820px; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--cw-line); background: var(--cw-sheet); animation: cw-in .4s var(--cw-ease); }
.cw-gate__side { background: var(--cw-harbor); color: #e6eeec; padding: 40px 32px; display: flex; flex-direction: column; justify-content: flex-end;
  background-image: radial-gradient(circle at 80% 20%, rgba(184,146,63,.35), transparent 45%), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 28px); }
.cw-gate__side .cw-eyebrow { color: var(--cw-brass); }
.cw-gate__quote { font: 400 1.5rem/1.3 var(--cw-display); margin: 0; }
.cw-gate__card { padding: 40px 34px; }
.cw-gate__form { display: grid; gap: 8px; margin-top: 18px; }
.cw-gate__form .cw-btn { margin-top: 6px; }

@keyframes cw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cw-pulse { 50% { opacity: .3; transform: scale(.7); } }

@media (max-width: 1180px) {
  .cw-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .cw-rail { grid-column: 1 / -1; position: static; grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .cw-main { padding: 18px 14px 48px; }
  .cw-bar { padding: 0 14px; }
  .cw-bar__name { display: none; }
  .cw-grid, .cw-rail, .cw-two, .cw-gate { grid-template-columns: 1fr; }
  .cw-three { grid-template-columns: 1fr 1fr; }
  .cw-rail { order: -1; }
  .cw-panel--go { position: sticky; bottom: 8px; z-index: 5; }
  .cw-gate__side { padding: 24px; }
  .cw-gate__card { padding: 26px 22px; }
  .cw-suggest__list li { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}