/* Valkyrie: an internal control panel, read mostly on a phone.
   Dense, high contrast, no decoration that isn't carrying information.
   Brand palette from Theme.swift so it feels like part of Songkrate. */

:root {
  --plum:   #6B2D5C;
  --ink:    #2A1F18;
  --muted:  #6B6055;
  --cream:  #F7F2EA;
  --card:   #FFFFFF;
  --line:   #E0D9CA;
  --danger: #B3261E;
  --warn:   #B26B00;
  --ok:     #2E7D5B;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 48px;
  background: var(--cream);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--plum); }

.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px; background: var(--plum); color: var(--cream);
  position: sticky; top: 0; z-index: 5;
}
.bar h1 { margin: 0; font-size: 18px; letter-spacing: -0.3px; }
.bar .muted { color: #E4D6DF; font-size: 13px; }
.bar .quote {
  color: #D9BFD0; font-size: 12px; font-style: italic; letter-spacing: 0.2px;
  opacity: 0.85;
}
/* On a phone the quote would push the clock off the edge. The clock is the
   part that carries information, so the quote is what goes. */
@media (max-width: 560px) { .bar .quote { display: none; } }

.all-clear {
  margin: 16px; padding: 14px 16px; background: #EAF5EF;
  border: 1px solid #CBE5D8; border-radius: 12px; color: var(--ok); font-weight: 600;
}
.all-clear .muted { font-weight: 400; }

.panel {
  margin: 16px; padding: 4px 16px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
.panel.danger { border-color: #E8C4C0; background: #FDF6F5; }
.panel.warn   { border-color: #EBD9B8; background: #FFFBF3; }

.panel h2 {
  font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 8px;
}
.panel.danger h2 { color: var(--danger); }
.panel.warn h2   { color: var(--warn); }
.count {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  background: var(--ink); color: var(--cream); border-radius: 999px;
  font-size: 11px; letter-spacing: 0;
}
.panel.danger .count { background: var(--danger); }
.panel.warn .count   { background: var(--warn); }

.row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.row.stack { display: block; }
.row-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.panel h2 + .row, .panel p + .row { border-top: 0; }
.row a { color: var(--plum); font-weight: 600; text-decoration: none; }
.row a:hover { text-decoration: underline; }

/* Channel is the first thing to scan for, so it gets a fixed-width chip. */
.chan {
  display: inline-block; min-width: 52px; text-align: center;
  padding: 2px 8px; margin-right: 8px; border-radius: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  background: var(--line); color: var(--ink);
}
.chan.x        { background: var(--ink);   color: var(--cream); }
.chan.blog     { background: var(--plum);  color: var(--cream); }
.chan.facebook { background: #38569E;      color: var(--cream); }
.chan.manual { background: #E8C468;      color: var(--ink); }
.chan.email  { background: #5FB6A8;      color: var(--ink); }

.muted { color: var(--muted); font-size: 13px; }
.task-key {
  display: inline-block; margin-right: 5px; color: var(--muted);
  font: 700 11px/1.5 ui-monospace, monospace; letter-spacing: 0.3px;
}
.queue-position {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  background: #EAF5EF; color: var(--ok); border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.err { margin: 4px 0 0; color: var(--danger); font-size: 13px; font-family: ui-monospace, monospace; }

.stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); white-space: nowrap; }
.stats b { color: var(--ink); }

.payload {
  white-space: pre-wrap; word-break: break-word;
  background: var(--cream); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; margin: 8px 0; font: 13px/1.5 ui-monospace, monospace;
}

.approval-card { padding: 14px 0; }
.approval-card .payload { font-size: 14px; }
.approval-card .payload.long { max-height: 360px; overflow: auto; }
.approval-details summary { cursor: pointer; list-style: none; }
.approval-details summary::-webkit-details-marker { display: none; }
.approval-preview {
  display: -webkit-box; overflow: hidden; white-space: pre-wrap;
  -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.approval-details[open] .approval-preview, .approval-details .hide-label { display: none; }
.approval-details[open] .hide-label { display: inline-block; }
.approval-details[open] .show-label { display: none; }
.expand-label { color: var(--plum); font-size: 13px; font-weight: 600; }
.character-count {
  float: right; color: var(--muted); font: 12px/1.8 ui-monospace, monospace;
}
.approval-options { font-weight: 600; margin: 8px 0 -4px; }
.approval-notes { margin: 8px 0; }
.approval-actions { flex-wrap: wrap; margin-top: 10px; }

.review-feedback {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.feedback-heading {
  margin-bottom: 6px; color: var(--danger); font-size: 12px;
  font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.feedback-heading .count { background: var(--danger); }
.feedback-item {
  margin: 6px 0; padding: 9px 10px; background: #FDF6F5;
  border: 1px solid #E8C4C0; border-radius: 8px;
}
.feedback-item.resolved { background: #F5F5F2; border-color: var(--line); }
.feedback-body { margin: 0 0 5px; white-space: pre-wrap; }
.feedback-item.resolved .feedback-body { color: var(--muted); text-decoration: line-through; }
.feedback-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.feedback-compose summary, .resolved-feedback summary {
  margin-top: 6px; color: var(--plum); cursor: pointer; font-size: 13px; font-weight: 600;
}
.feedback-form { margin-top: 8px; }
.feedback-input {
  display: block; width: 100%; min-height: 76px; margin-bottom: 6px;
  padding: 8px 10px; resize: vertical; border: 1px solid var(--line);
  border-radius: 8px; font: inherit;
}
.feedback-blocked { color: var(--danger); font-size: 13px; font-weight: 600; }

.round-results { margin-top: 8px; }
.round-results > summary {
  color: var(--plum); cursor: pointer; font-size: 13px; font-weight: 600;
}
.result-item {
  margin: 6px 0; padding: 9px 10px; background: #F4F7F5;
  border: 1px solid #CDDDD3; border-radius: 8px;
}
.result-body { margin: 0 0 5px; white-space: pre-wrap; }
.result-footer, .result-form-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.result-footer a { font-size: 13px; }
.result-form { margin-top: 8px; }
.result-input {
  display: block; width: 100%; min-height: 76px; margin-bottom: 6px;
  padding: 8px 10px; resize: vertical; border: 1px solid var(--line);
  border-radius: 8px; font: inherit;
}
.result-form-footer { margin-bottom: 4px; }
.task-actions { flex-wrap: wrap; margin-top: 10px; }

.actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn {
  padding: 6px 12px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--plum); color: var(--cream); font-size: 13px; font-weight: 600;
}
.btn.quiet { background: var(--line); color: var(--ink); }
.btn.compact { padding: 4px 8px; font-size: 12px; }
.inline { display: flex; gap: 6px; align-items: center; }
.input {
  flex: 1; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px; min-width: 0;
}

.empty { padding: 64px 24px; text-align: center; color: var(--muted); }
.empty h1 { color: var(--ink); }

.flash { margin: 16px; padding: 12px 16px; border-radius: 12px; font-weight: 600; }
.flash.notice { background: #EAF5EF; color: var(--ok); }
.flash.alert  { background: #FDF0EF; color: var(--danger); }

@media (max-width: 560px) {
  .row-main { display: block; }
  .row-main > .actions, .row-main > .stats { margin-top: 6px; }
  .result-form-footer { align-items: stretch; flex-direction: column; }
  .result-form-footer .btn { align-self: flex-start; }
}

/* Command board hierarchy */
.dashboard, .detail-page { width: min(1120px, calc(100% - 32px)); margin: 28px auto; }
.dashboard[aria-busy="true"] { opacity: .72; pointer-events: none; transition: opacity .15s ease; }
.dashboard-heading {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px;
  align-items: end; margin-bottom: 28px;
}
.dashboard-heading h2 { margin: 3px 0 4px; font-size: clamp(25px, 4vw, 38px); line-height: 1.1; letter-spacing: -1px; }
.dashboard-heading p, .section-description { margin: 0; color: var(--muted); }
.eyebrow {
  display: block; color: var(--plum); font-size: 11px; font-weight: 800;
  letter-spacing: 1.35px; text-transform: uppercase;
}
.danger-text { color: var(--danger); }
.jump-nav { display: flex; gap: 8px; }
.jump-nav a {
  display: grid; min-width: 76px; padding: 9px 12px; color: var(--muted);
  background: rgba(255,255,255,.68); border: 1px solid var(--line); border-radius: 10px;
  text-align: center; text-decoration: none;
}
.jump-nav a:hover { border-color: var(--plum); color: var(--plum); }
.jump-nav a.danger { color: var(--danger); border-color: #E8C4C0; }
.jump-nav strong { color: var(--ink); font-size: 20px; line-height: 1; }
.jump-nav span { margin-top: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; }

.work-section, .archive-section {
  margin: 20px 0; padding: 22px; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 7px 28px rgba(58, 40, 28, .05);
}
.danger-section { border-top: 4px solid var(--danger); }
.blocked-section { background: #FCFAF6; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.section-heading h2 { margin: 2px 0 0; font-size: 23px; line-height: 1.2; }
.section-count {
  display: inline-grid; min-width: 32px; height: 32px; padding: 0 8px; place-items: center;
  background: var(--plum); color: white; border-radius: 10px; font-size: 14px; font-weight: 800;
}
.section-count.danger { background: var(--danger); }
.section-count.blocked { background: var(--muted); }
.section-count.quiet { background: var(--line); color: var(--ink); }
.section-description { margin-top: 7px; font-size: 14px; }
.task-list { display: grid; gap: 12px; margin-top: 18px; }

.task-card {
  padding: 16px; border: 1px solid var(--line); border-radius: 13px;
  background: #FFFEFC;
}
.task-card.focus-card { padding: 20px; border: 2px solid var(--plum); box-shadow: 0 10px 30px rgba(107,45,92,.1); }
.task-card.danger-card { border-color: #E8C4C0; background: #FDF6F5; }
.task-card-header { display: flex; align-items: flex-start; gap: 13px; }
.task-card-title { min-width: 0; flex: 1; }
.task-card-title h3, .blocked-card h3 { margin: 2px 0 0; font-size: 17px; line-height: 1.3; }
.task-card-title h3 a, .blocked-card h3 a { color: var(--ink); text-decoration: none; }
.task-card-title h3 a:hover, .blocked-card h3 a:hover { color: var(--plum); text-decoration: underline; }
.task-card-title .chan + h3 { display: inline; }
.status-mark {
  display: inline-grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center;
  border-radius: 10px; background: var(--plum); color: white; font-weight: 900;
}
.status-mark.review { background: #446A7D; }
.status-mark.danger, .status-mark.blocked { background: var(--danger); }
.task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; color: var(--muted); font-size: 12px; }
.task-meta .queue-position { margin-left: 0; }

.task-disclosure { margin: 12px 0 0 47px; }
.task-disclosure > summary, .archive-section > summary {
  color: var(--plum); cursor: pointer; font-size: 13px; font-weight: 750;
}
.task-disclosure > summary::marker { color: var(--muted); }
.task-disclosure[open] > summary { margin-bottom: 10px; }
.queue-overflow { margin-top: 4px; padding: 11px 13px; background: #F7F5F1; border-radius: 10px; }
.queue-overflow > summary { color: var(--plum); cursor: pointer; font-size: 13px; font-weight: 750; }
.queue-overflow > .task-list, .queue-overflow > .blocked-grid { margin-top: 12px; }

/* Task prose is prose. Only explicitly fenced snippets look like code. */
.task-text { position: relative; margin: 14px 0 0 47px; }
.task-text > .copy-button { position: absolute; top: 0; right: 0; }
.task-prose {
  padding-right: 76px; color: var(--ink); font-family: inherit;
  font-size: 15px; line-height: 1.68; overflow-wrap: anywhere;
}
.task-prose p { margin: 0 0 12px; }
.task-prose p:last-child { margin-bottom: 0; }
.task-prose a { font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.task-notes { margin-top: 12px; padding: 12px; background: #F3F0EA; border-radius: 9px; }
.copy-button {
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
  background: white; color: var(--plum); font: 700 12px/1.2 inherit;
}
.copy-button:hover { border-color: var(--plum); }
.copy-button.copied { background: #EAF5EF; border-color: #CBE5D8; color: var(--ok); }
.copy-source { position: fixed; left: -10000px; width: 1px; height: 1px; opacity: 0; }

.snippet { margin: 14px 0; overflow: hidden; background: #F6F8FA; border: 1px solid #D5D9DD; border-radius: 10px; }
.snippet-bar {
  display: flex; justify-content: space-between; align-items: center; padding: 7px 9px 7px 13px;
  background: #EDEFF1; border-bottom: 1px solid #D5D9DD;
}
.snippet-language { color: #57606A; font: 700 11px/1.2 ui-monospace, monospace; text-transform: uppercase; }
.snippet pre { margin: 0; padding: 14px; overflow: auto; white-space: pre; font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.snippet code { font: inherit; }

.blocked-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.blocked-card { display: flex; gap: 11px; padding: 14px; background: white; border: 1px dashed #C9C0B4; border-radius: 11px; }
.blocked-lock {
  display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center;
  border-radius: 50%; background: var(--line); color: var(--muted); font-weight: 900;
}
.blocked-card p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.blocked-card p a { font-weight: 700; }

.archive-section { padding: 0; overflow: hidden; }
.archive-section > summary {
  display: flex; justify-content: space-between; align-items: center; padding: 17px 20px;
  list-style: none;
}
.archive-section > summary::-webkit-details-marker { display: none; }
.archive-section > summary strong { display: block; margin-top: 2px; color: var(--ink); font-size: 17px; }
.archive-section[open] > summary { border-bottom: 1px solid var(--line); }
.compact-list article {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 11px 20px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.compact-list article:last-child { border-bottom: 0; }
.compact-list a { color: var(--ink); font-weight: 700; text-decoration: none; }
.empty-state { margin-top: 16px; padding: 18px; color: var(--muted); background: #F7F5F1; border-radius: 10px; text-align: center; }

.all-clear { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.all-clear strong, .all-clear span { display: block; }
.all-clear .status-mark { background: var(--ok); }

/* Detail page */
.detail-bar .back-link { color: white; font-weight: 750; text-decoration: none; }
.detail-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 20px; }
.detail-title h1 { margin: 8px 0 0; max-width: 780px; font-size: clamp(27px, 5vw, 42px); line-height: 1.08; letter-spacing: -1px; }
.detail-title .task-key { font-size: 12px; }
.detail-status { min-width: 140px; padding: 11px 14px; background: white; border: 1px solid var(--line); border-radius: 11px; text-align: right; }
.detail-status strong, .detail-status > span { display: block; }
.detail-status strong { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; }
.detail-status > span { color: var(--muted); font-size: 12px; }
.detail-status .queue-position { margin: 6px 0 0; }
.detail-status.failed { border-color: #E8C4C0; color: var(--danger); }
.blocker-banner, .ready-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 13px 15px; border-radius: 12px; }
.blocker-banner { background: #FDF0EF; border: 1px solid #E8C4C0; }
.blocker-banner p { margin: 2px 0 0; font-size: 13px; }
.ready-banner { background: #EAF5EF; border: 1px solid #CBE5D8; color: var(--ok); }
.ready-banner .status-mark { background: var(--ok); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.detail-main, .detail-sidebar { display: grid; min-width: 0; gap: 14px; }
.content-card { min-width: 0; padding: 19px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 7px 24px rgba(58,40,28,.045); }
.content-card .task-text { margin-left: 0; }
.card-heading h2 { margin: 2px 0 0; font-size: 18px; }
.sticky-actions { position: sticky; top: 82px; }
.detail-actions { display: grid; gap: 8px; margin-top: 14px; }
.detail-actions form, .detail-actions .btn { width: 100%; }
.detail-actions .btn { display: block; text-align: center; text-decoration: none; }
.stacked-form { display: grid; gap: 7px; }
.relationship-card .dependencies { margin-top: 12px; }
.dependencies p { margin: 0 0 6px; font-weight: 700; }
.dependencies ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.dependencies li { padding: 8px 9px; background: #F7F5F1; border-radius: 8px; font-size: 13px; }
.dependencies li a { font-weight: 700; text-decoration: none; }

/* Rouge Github theme */
.highlight, .highlight .w { color: #24292f; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv { color: #cf222e; }
.highlight .nb, .highlight .nc, .highlight .no, .highlight .nn { color: #953800; }
.highlight .sr, .highlight .na, .highlight .nt { color: #116329; }
.highlight .kc, .highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx, .highlight .sb, .highlight .bp, .highlight .ne, .highlight .nl, .highlight .py, .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm, .highlight .o, .highlight .ow { color: #0550ae; }
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss { color: #0a3069; }
.highlight .nd, .highlight .nf, .highlight .fm { color: #8250df; }
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs { color: #6e7781; }

@media (max-width: 760px) {
  .dashboard, .detail-page { width: min(100% - 20px, 1120px); margin-top: 18px; }
  .dashboard-heading { display: block; }
  .jump-nav { margin-top: 17px; overflow-x: auto; }
  .jump-nav a { min-width: 70px; flex: 1; }
  .work-section { padding: 16px 13px; }
  .blocked-grid, .detail-layout { grid-template-columns: 1fr; }
  .task-disclosure, .task-text { margin-left: 0; }
  .task-card.focus-card { padding: 15px; }
  .task-prose { padding-right: 0; padding-top: 38px; }
  .snippet .copy-button { position: static; }
  .actions, .inline { align-items: stretch; flex-direction: column; }
  .actions form, .actions .btn, .inline .input { width: 100%; }
  .detail-heading { display: block; }
  .detail-status { margin-top: 14px; text-align: left; }
  .sticky-actions { position: static; }
  .compact-list article { align-items: flex-start; flex-direction: column; }
}