/* ============================================================
   MANGO DESK — the editor's desk (desk.js). Owner only.
   The memo is a quiet, solid sheet of paper beside the proof, so it reads the same whatever colour the page turns.
   ============================================================ */

/* the dot on Desk in the header: a version is waiting (solid), or the editor is working (a slow pulse) */
.bar nav a[data-nav="desk"] { position: relative; }
.bar nav a[data-nav="desk"][hidden] { display: none; }
.bar nav a[data-nav="desk"].has-new::after, .bar nav a[data-nav="desk"].is-busy::after { content: ''; position: absolute; top: -2px; right: -8px; width: 7px; height: 7px; border-radius: 50%; background: #f0a020; }
.bar nav a[data-nav="desk"].is-busy::after { background: transparent; box-shadow: inset 0 0 0 1.5px #f0a020; animation: dk-pulse 1.8s ease-in-out infinite; }
@keyframes dk-pulse { 50% { opacity: .35; } }
.dk-dot { display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; background: #f0a020; vertical-align: middle; }
.dk-spin { display: inline-block; animation: ai-spin 1.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .dk-spin, .bar nav a[data-nav="desk"].is-busy::after { animation: none; } }

/* ---- #/desk ---- */
.desk .dk-h { font-family: var(--font-ui); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin: 40px 0 6px; }
.desk .dk-h span { color: var(--ink); margin-left: 4px; }
.dk-list { list-style: none; margin: 0; padding: 0; }
.dk-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.dk-list li .t { color: var(--ink); flex: 1 1 260px; }
.dk-list li.new .t { font-weight: 600; }
.dk-list li .meta { font-family: var(--font-ui); font-size: var(--size-small); color: var(--ink-faint); }
.dk-send { font-family: var(--font-ui); font-size: 12px; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.dk-send:hover { border-color: var(--ink); }
.dk-empty { font-family: var(--font-ui); font-size: var(--size-small); color: var(--ink-soft); margin: 10px 0 0; }

/* ---- #/versions/<id>: the proof, with the memo beside it ---- */
.dk-page { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 clamp(20px, 2vw, 40px); align-items: start; }
.dk-proof { min-width: 0; }
.dk-memo { order: 2; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; z-index: 5;
  background: #fbfaf6; color: #1d1b17; border: 1px solid rgba(60, 50, 30, .18); border-radius: 14px; box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 12px 32px rgba(0,0,0,.06);
  font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; }
.dk-memo-in { padding: 16px 18px 18px; display: grid; gap: 12px; }
.dk-grip { display: none; }
.dk-strip { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.055); width: max-content; max-width: 100%; }
.dk-strip a { position: relative; display: inline-block; min-width: 34px; padding: 6px 11px; border-radius: 999px; text-align: center; color: #1d1b17; font-size: 12.5px; text-decoration: none; }
.dk-strip a.on { background: #1d1b17; color: #fbfaf6; }
.dk-strip a:not(.on):hover { background: rgba(0,0,0,.06); text-decoration: none; }
.dk-strip .dk-dot { position: absolute; top: 3px; right: 3px; margin: 0; width: 6px; height: 6px; }
.dk-k { margin: 0; font-size: 12px; color: #8a8478; }
.dk-why { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.45; }
.dk-intro { margin: 0; font-family: var(--font-body); font-size: 15.5px; line-height: 1.5; color: #45413a; }
.dk-dl { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; margin: 0; }
.dk-dl dt { color: #8a8478; font-size: 12px; padding-top: 1px; }
.dk-dl dd { margin: 0; }
.dk-dl .dk-hl { font-weight: 600; }
.dk-h3 { display: block; margin: 6px 0 0; font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: #8a8478; }
.dk-small { margin: 0; font-size: 12.5px; color: #6b655a; }
.dk-notes { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.dk-notes q { display: block; color: #8a8478; font-style: italic; quotes: '“' '”'; }
.dk-flags { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.dk-flags span { padding: 1px 8px; border-radius: 999px; background: #fff3c4; color: #6a4700; border: 1px solid #e3c37a; font-size: 12px; }
.dk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dk-acts button { font-family: var(--font-ui); font-size: 13px; }
.dk-memo button.ghost { border: 1px solid rgba(60,50,30,.18); background: transparent; color: #1d1b17; }
.dk-memo .dk-link { border: 0 !important; color: #6b655a !important; padding-left: 4px; padding-right: 4px; }
.dk-inuse { font-size: 12.5px; color: #3f5a2a; background: #dfe9c9; padding: 4px 10px; border-radius: 999px; }
.dk-req { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.dk-chip { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.06); color: #45413a; }
.dk-req .dk-asked { flex-basis: 100%; }
.dk-asked p { margin: 6px 0 0; }
/* the proof says what it is: the editor's version (and how it was asked for), or the writer's own text */
.dk-tag { position: sticky; top: 8px; z-index: 4; display: inline-block; margin: 0 0 8px; padding: 5px 11px; border-radius: 999px; background: #1d1b17; color: #fbfaf6; font: 12px/1.3 var(--font-ui); }
.dk-asked summary { cursor: pointer; font-size: 12px; color: #8a8478; }
.dk-asked p { white-space: pre-wrap; color: #45413a; }
.dk-form { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(60,50,30,.14); }
.dk-form textarea { width: 100%; box-sizing: border-box; font: 14px/1.45 var(--font-ui); color: #1d1b17; background: #fff; border: 1px solid rgba(60,50,30,.2); border-radius: 10px; padding: 9px 11px; resize: vertical; outline: none; }
.dk-form textarea:focus { border-color: #1d1b17; }
.dk-opts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dk-lab { width: 56px; font-size: 12px; color: #8a8478; }
.dk-memo .seg { border-color: rgba(60,50,30,.18); }
.dk-memo .seg button { color: #6b655a; padding: 5px 10px; font-size: 12.5px; }
.dk-memo .seg button.on { background: #1d1b17; color: #fbfaf6; }
.dk-busy { padding: 12px; border-radius: 10px; background: rgba(240, 160, 32, .1); color: #45413a; }
.dk-err { margin: 0; padding: 8px 10px; border-radius: 8px; background: #fbe9e7; font-size: 12.5px; line-height: 1.45; color: #8a1c26; overflow-wrap: anywhere; user-select: text; }
.dk-stop { color: #9c1f2a; }

/* questions: the interview that finds the story */
.dk-qs { margin: 0; padding-left: 18px; display: grid; gap: 10px; }
.dk-qs label { display: block; margin-bottom: 4px; }
.dk-qs q { display: block; color: #8a8478; font-style: italic; quotes: '“' '”'; }
.dk-qs textarea, .dk-whys input { width: 100%; box-sizing: border-box; font: 13.5px/1.4 var(--font-ui); color: #1d1b17; background: #fff; border: 1px solid rgba(60,50,30,.2); border-radius: 8px; padding: 6px 9px; resize: vertical; outline: none; }
.dk-qs textarea:focus, .dk-whys input:focus { border-color: #1d1b17; }
/* other stories the editor sees in the same notes */
.dk-angles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dk-angles li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid rgba(60,50,30,.14); border-radius: 10px; }
.dk-angles span { color: #45413a; }
.dk-angles button { justify-self: start; margin-top: 6px; font-size: 12.5px; padding: 5px 10px; }
/* the contact sheet: in this version (full), left out (faded), must-have (starred, ringed) */
.dk-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.dk-ph { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: rgba(0,0,0,.06); }
.dk-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s, filter .2s; }
.dk-ph.out img { opacity: .38; filter: grayscale(.7); }
.dk-ph.must { box-shadow: 0 0 0 2px #f0a020; }
.dk-ph button { position: absolute; right: 3px; top: 3px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(20,19,15,.45); color: rgba(255,255,255,.85); font-size: 12px; line-height: 22px; cursor: pointer; }
.dk-ph.must button { background: #f0a020; color: #fff; }
.dk-whys { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dk-whys li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; }
.dk-whys img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 2px #f0a020; }

/* phones and tablets: the memo is a sheet at the bottom; tap its handle to open it */
@media (max-width: 1099px) {
  .dk-page { display: block; padding-bottom: 72px; }
  .dk-memo { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; max-height: 52px; overflow: hidden; border-radius: 16px; transition: max-height .25s ease; box-shadow: 0 10px 40px rgba(0,0,0,.18); }
  .dk-memo.open { max-height: min(78vh, 760px); overflow: auto; }
  .dk-grip { display: block; position: sticky; top: 0; z-index: 1; width: 100%; height: 52px; padding: 0 18px; border: 0; border-radius: 0; background: #fbfaf6; color: #1d1b17; font: 500 13.5px/52px var(--font-ui); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
  .dk-grip::after { content: '▴'; float: right; color: #8a8478; transition: transform .2s; }
  .dk-memo.open .dk-grip::after { transform: rotate(180deg); }
  .dk-memo-in { padding-top: 4px; }
}