/* Doteira Studio (Studio S1): the workspace switcher in the shared header and Studio's pages. */
/* Until studio.js has drawn Studio's menu, Social's menu is not shown on a Studio page. */
html[data-ws="studio"] header .nav:not(.studio-nav) { visibility: hidden; }

/* The switcher: "Doteira [Social | Studio]" for people who use both. */
.ws-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; gap: 2px; background: var(--chip); text-transform: none; letter-spacing: 0; }
.ws-switch[hidden] { display: none; }
.ws-switch a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; padding: 4px 10px; border-radius: 999px; line-height: 1.2; min-height: 28px; display: inline-flex; align-items: center; }
.ws-switch a.on { background: var(--accent); color: var(--accent-ink); }
.ws-switch a:not(.on):hover { background: var(--accent-soft); }
@media (max-width: 430px) { .ws-switch a { padding: 4px 8px; } }
@media (max-width: 760px) { .ws-switch a { min-height: 36px; } }

.studio-empty p:first-child { margin-top: 0; }
/* Phone: the header stays one row with the switcher; "Go to…" is the search at the top of Menu there. */
@media (max-width: 430px) { body:has(#wsSwitch:not([hidden])) #findBtn { display: none; } .ws-switch a { font-size: 13px; padding: 4px 8px; } }

/* ---------- Studio S2: the board, cards and the card page ---------- */
.st-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 0 0 12px; }
.st-filters label { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--muted); margin: 0; text-transform: none; letter-spacing: 0; }
.st-filters select { width: auto; min-width: 150px; }
.st-colpick { display: none; margin: 0 0 10px; max-width: 100%; }
.st-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.st-col { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-width: 0; }
.st-col h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.st-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: 8px; }
.st-list.drop-ok { outline: 2px dashed var(--line); outline-offset: 2px; }
.st-list.over { outline-color: var(--accent); background: var(--accent-soft); }
.st-none { margin: 4px 2px; font-size: 14px; }
.st-card { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.st-card[draggable] { cursor: grab; }
.st-card.dragging { opacity: .5; }
.st-card.st-back { border-left: 3px solid var(--warn); }
.st-title { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.st-title:hover { color: var(--accent); text-decoration: underline; }
.st-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--muted); align-items: center; }
.st-sub, .st-ws { font-size: 13px; }
.st-late { color: var(--danger); }
.st-flag { font-size: 13px; color: var(--warn); }
.st-type { display: inline-block; border-radius: 999px; padding: 0 8px; font-size: 12px; line-height: 20px; background: var(--chip); color: var(--ink); }
.st-type.t-art { background: var(--accent-soft); color: var(--accent); }
.st-type.t-gd { background: var(--ok-bg); color: var(--ok); }
.st-type.t-pp { background: var(--chip); color: var(--ink); }
.st-move select { width: 100%; font-size: 14px; min-height: 32px; padding: 2px 6px; }
.st-col-chip { display: inline-block; border-radius: 999px; padding: 0 8px; font-size: 13px; background: var(--chip); color: var(--ink); font-weight: 600; }
.st-col-chip.c-in_review { background: var(--warn-bg); color: var(--warn); }
.st-col-chip.c-approved { background: var(--ok-bg); color: var(--ok); }
.st-backlink { display: inline-block; margin-bottom: 6px; }

/* The card page: the next action at the top in the accent colour, brief and references first. */
.st-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; }
.st-next span { flex: 1 1 220px; }
.st-next .st-move { flex: 0 1 200px; }
.st-next .st-move select { min-height: 40px; }
.st-next.calm { background: var(--panel); border-color: var(--line); }
.st-facts { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0 0 10px; }
.st-page { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 12px; align-items: start; }
.st-main, .st-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.st-main > .card, .st-side > .card { margin: 0; }
.st-brief { line-height: 1.5; overflow-wrap: anywhere; }
.st-links, .st-check, .st-comments, .st-history, .st-appr-list, .st-wslist { list-style: none; margin: 0; padding: 0; }
.st-link { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.st-lk { width: 28px; text-align: center; }
.st-prev { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; }
.st-lt { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.st-note { margin-top: -4px; }
.st-row { display: flex; gap: 8px; flex-wrap: wrap; }
.st-row input { flex: 1 1 200px; min-width: 0; }
.st-addlink { margin-top: 10px; }
.st-check li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 4px 0; }
.st-check .mini-check { color: var(--ink); font-size: 15px; }
.st-done { text-decoration: line-through; color: var(--muted); }
.st-comments li { padding: 6px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
#stCommentForm textarea { width: 100%; margin-top: 8px; }
.st-history li { padding: 4px 0; font-size: 14px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.st-appr-list li { padding: 3px 0; }
.st-moveside { margin-top: 8px; }
.st-changes { border-left: 3px solid var(--warn); }
.st-defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.st-def { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.st-def h3 { margin-top: 4px; }
.st-wslist li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.st-appr { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.st-appr legend { font-size: 14px; padding: 0 4px; }
.st-appr .mini-check { color: var(--ink); }
.st-wait { border-left: 3px solid var(--accent); }
.st-people { list-style: none; margin: 0 0 8px; padding: 0; }
.st-people li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.st-pn { display: flex; flex-direction: column; min-width: 0; }
.st-pa { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.login-or { margin: 14px 0 6px; }
.st-places { list-style: none; margin: 0 0 8px; padding: 0; }
.st-places li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.st-places .st-pn { flex: 1 1 220px; }
.st-inline select { width: auto; max-width: 100%; }
#stPlaceForm select { flex: 0 1 220px; width: auto; }
.st-imp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 8px 0; }
.st-imp-grid h4 { margin: 6px 0; font-size: 14px; }
.st-imp-row { display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.st-imp-row select { width: 100%; }
.st-imp-cards { margin: 6px 0; padding-left: 18px; font-size: 14px; }
.st-imp-cards li { margin: 3px 0; overflow-wrap: anywhere; }
.st-watch { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 8px 0; padding: 4px 0; }

@media (max-width: 1100px) { .st-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .st-page { grid-template-columns: 1fr; } }
/* Phone: one column at a time, chosen above the board; no sideways scrolling. */
@media (max-width: 760px) {
  .st-colpick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 12px; width: 100%; }
  .st-colpick button { min-height: 44px; }
  .st-colpick button:nth-child(3) { border-left: 0; }
  .st-colpick button:nth-child(n+3) { border-top: 1px solid var(--line); }
  .st-board { grid-template-columns: 1fr; }
  .st-col:not(.on) { display: none; }
  .st-col h2 { display: none; }
  .st-filters label { flex: 1 1 140px; }
  .st-filters select { min-width: 0; width: 100%; }
  .st-move select { min-height: 44px; }
}
.q-type.t-approve-card { background: var(--accent-soft); color: var(--accent); }
.q-type.t-sent-back { background: var(--warn-bg); color: var(--warn); }

/* ---------- Each workspace looks different at a glance (Tyson, 2026-11-09) ----------
   Social keeps the blue and purple galaxy. Studio: the same photo recoloured to a warm ember palette (a colour blend in
   CSS, no new image), a warm header and phone bar, and its own surface, line and accent colours.
   Studio's look is these settings only. For your own artwork: put the image in public/brand/ and set --ws-img to it;
   set --ws-recolour to transparent to show it as it is (or another colour to tint it). The surface tint over the photo is
   --ws-surface (with blur) and --ws-surface-plain (without); keep muted text at 4.5:1 or better over the brightest point
   (test/studio-look.test.mjs checks it). */
html[data-ws="studio"] {
  --ws-img: url(/brand/galaxy.jpg);
  --ws-recolour: #c4561f;
  --ws-surface: rgba(20, 11, 7, .80);
  --ws-surface-plain: rgba(20, 11, 7, .84);
  --bg: #140b07;
  --panel: #23150d; --panel-solid: #25160d; --ink: #f6ece4; --muted: #d8bca6; --line: rgba(232, 168, 120, .24); --chip: rgba(232, 176, 128, .14);
  --accent: #f2a65a; --accent-ink: #1a0c06; --accent-soft: rgba(242, 166, 90, .16);
  --top-bg: linear-gradient(90deg, #1e0f07 0%, #4a1f0c 55%, #7a3410 100%);
}
html[data-ws="studio"][data-theme="light"] {
  --bg: #f5e9de; --ws-img: none;
  --accent: #a8461a; --accent-ink: #ffffff; --accent-soft: rgba(168, 70, 26, .10);
  --top-bg: linear-gradient(90deg, #2a1206 0%, #7a3410 60%, #a8481a 100%);
}
html[data-ws="studio"]:not([data-theme="light"]) body { background-image: linear-gradient(var(--ws-recolour), var(--ws-recolour)), var(--ws-img); background-blend-mode: color, normal; background-size: cover; background-position: center; background-attachment: fixed; }
html[data-ws="studio"]:not([data-theme="light"]) main::before { background: var(--ws-surface-plain); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html[data-ws="studio"]:not([data-theme="light"]) main::before { background: var(--ws-surface); } }
@media (prefers-reduced-transparency: reduce) { html[data-ws="studio"]:not([data-theme="light"]) main::before { background: var(--bg); } }
html[data-ws="studio"] .top { border-bottom-color: rgba(242, 166, 90, .45); }
html[data-ws="studio"] .bottombar { border-top-color: rgba(242, 166, 90, .45); }
html[data-ws="studio"] .nav a.active { background: rgba(242, 166, 90, .24); box-shadow: inset 0 -2px 0 #f2a65a; }
html[data-ws="studio"] .brand .brand-name b { color: #f7b778; }
html[data-ws="studio"] .ws-switch a.on { background: #f2a65a; color: #1a0c06; }
/* Grids that draw cells keep a solid backing, as in Social's calendar. */
html[data-ws="studio"] .st-col { background: var(--panel-solid); }
html[data-ws="studio"] { --field-line: #8f6f5a; }
html[data-ws="studio"][data-theme="light"] { --field-line: #8a826f; }
html[data-ws="studio"] button.primary, html[data-ws="studio"] a.btn.primary-link { background: #b4531c; color: #fff; }
html[data-ws="studio"] button.primary:hover, html[data-ws="studio"] a.btn.primary-link:hover { background: #9c4516; }
html[data-ws="studio"] .bottombar a.active, html[data-ws="studio"] .bottombar button.active { background: rgba(242, 166, 90, .24); }