/* ext-adbrief (16 Oct): the AD brief in the conversation panel. app.css tokens only, so both
   themes follow. The brief itself reads like the page the artists get in Notion: the four
   template headings, the refs in bold, the client's quote in italics. */
.adb-panel { display: grid; gap: 12px; }
.adb-panel .side-note { margin: 0; overflow-wrap: anywhere; }
.adb-top { display: grid; gap: 3px; }
.adb-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.adb-title .eyebrow { margin: 0; white-space: nowrap; } /* "Inkspector · AD brief" on one line; the chip wraps */
.adb-for { margin: 0; font: 500 13px/1.4 var(--text); color: var(--soft); overflow-wrap: anywhere; }
.adb-chip { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--rule2); border-radius: 999px; font: 600 10px/1.4 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.adb-chip.is-model { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }

/* the page itself */
.adb-doc { display: grid; gap: 2px; padding: 14px 16px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper2); box-shadow: inset 3px 0 0 var(--gold-line); }
.adb-h { margin: 10px 0 4px; font: 600 13.5px/1.3 var(--text); color: var(--ink); letter-spacing: .01em; }
.adb-h:first-child { margin-top: 0; }
.adb-list { margin: 0; padding: 0 0 0 18px; display: grid; gap: 3px; }
.adb-line { font-size: 13.5px; line-height: 1.5; color: var(--ink2); overflow-wrap: anywhere; border-radius: var(--r-sm); }
.adb-list .adb-line::marker { color: var(--muted); }
.adb-line.is-linked { cursor: pointer; transition: background .15s, color .15s; }
.adb-line.is-linked:hover, .adb-line.is-linked:focus-visible { background: var(--accent2); color: var(--ink); outline: none; }
.adb-line.is-missing .adb-text { color: var(--soft); font-style: italic; }
.adb-text strong.adb-ref { font-weight: 700; color: var(--ink); }
.adb-meta { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: 1px; }
.adb-from { padding: 0 6px; border-radius: 999px; background: var(--bg2); font: 500 10.5px/1.6 var(--text); color: var(--soft); white-space: nowrap; }
.adb-from.is-booking { background: color-mix(in srgb, var(--gold) 9%, transparent); color: var(--gold); }
.adb-quote-wrap { display: grid; gap: 4px; }
.adb-line.is-quote { margin: 0; padding: 6px 10px; border-left: 3px solid var(--gold); background: var(--paper); font-size: 14px; line-height: 1.55; color: var(--ink); }
.adb-line.is-quote.is-missing { border-left-color: var(--rule2); background: transparent; }
.adb-line.is-quote em { font-family: var(--display); font-size: 16px; }

/* what nobody said */
.adb-missing { display: grid; gap: 6px; }
.adb-missing-label { font: 600 12px/1.2 var(--text); color: var(--soft); }
.adb-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.adb-gap { padding: 2px 8px; border: 1px dashed color-mix(in srgb, var(--warn) 55%, transparent); border-radius: 999px; font: 500 11.5px/1.5 var(--text); color: var(--warn); background: color-mix(in srgb, var(--warn) 6%, transparent); }
.adb-complete { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ok); }
.adb-stale { margin: 0; padding: 6px 10px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn) 8%, transparent); font-size: 12.5px; color: var(--ink2); }

/* actions */
.adb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adb-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; gap: 6px; border: 1px solid var(--rule2); border-radius: var(--r-sm); background: transparent; color: var(--soft); font: 600 12px/1 var(--text); box-shadow: none; cursor: pointer; }
.adb-btn:hover:not(:disabled) { color: var(--ink); background: var(--accent2); border-color: var(--gold-line); transform: none; }
.adb-btn.is-primary { background: var(--primary-bg); border-color: var(--primary-line); color: var(--primary-fg); }
.adb-btn.is-primary:hover { background: var(--primary-bg-hover); color: var(--primary-fg); border-color: var(--primary-line); }
.adb-btn.is-done { background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); }
.adb-btn:disabled { opacity: .5; cursor: not-allowed; }
.adb-tip { display: inline-flex; }
.adb-icon { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.adb-foot { display: grid; gap: 4px; }
.adb-dropped summary { cursor: pointer; font-size: 12px; color: var(--soft); }
.adb-dropped ul { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--soft); }

/* writing */
.adb-writing { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px dashed var(--rule2); border-radius: var(--r); font-size: 13px; color: var(--soft); }
.adb-pulse { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); animation: adb-pulse 1.2s ease-in-out infinite; }
@keyframes adb-pulse { 0%, 100% { opacity: .6; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .adb-pulse { animation: none; } }

.adb-review { display: grid; gap: 9px; border-top: 1px solid var(--rule); padding-top: 12px; }
.adb-review h4, .adb-review p { margin: 0; }
.adb-followup { width: 100%; box-sizing: border-box; padding: 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--rule2); border-radius: var(--r); font: inherit; line-height: 1.5; resize: vertical; }
.adb-diffs { display: grid; gap: 4px; }
.adb-diffs .side-note { margin: 0; }
.adb-diff { margin: 0; }
.adb-diff summary { padding: 3px 0; gap: 0 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.adb-diff summary strong { color: var(--ink2); font-weight: 600; }
.adb-diff.is-customer_changed summary, .adb-diff.is-customer_changed summary strong { color: var(--warn); }
.adb-diff p { margin: 4px 0 0; font-size: 12.5px; overflow-wrap: anywhere; }

/* the client's photos (17 Oct): compact cards, grouped by what each is for */
.adb-images { display: grid; gap: 10px; }
.adb-images > .adb-h { margin: 0; }
.adb-images > .adb-btn { justify-self: start; }
.adb-group { display: grid; gap: 6px; }
.adb-group-h { display: flex; align-items: center; gap: 6px; margin: 0; font: 600 10.5px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.adb-count { min-width: 16px; padding: 0 5px; border-radius: 999px; background: var(--bg2); font: 600 10px/16px var(--text); letter-spacing: 0; text-align: center; color: var(--soft); }
.adb-cards { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.adb-photo-groups { display: grid; gap: 10px; }
/* earlier work (28 Oct): one line a project, under the collapsed block */
.adb-earlier { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--soft); overflow-wrap: anywhere; }
.adb-earlier strong { color: var(--ink); font-weight: 600; }
.adb-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper2); box-shadow: inset 3px 0 0 var(--rule2); }
.adb-card.is-design { box-shadow: inset 3px 0 0 var(--gold); }
.adb-card.is-placement { box-shadow: inset 3px 0 0 var(--info); }
.adb-card.is-clarify { box-shadow: inset 3px 0 0 var(--warn); }
.adb-thumb { display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border-radius: var(--r-sm); background: var(--bg2); color: var(--muted); }
.adb-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.adb-thumb .adb-icon { width: 20px; height: 20px; }
.adb-card-body { display: grid; gap: 2px; min-width: 0; }
.adb-card-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.adb-card-ref { flex: none; font: 700 12.5px/1.3 var(--text); color: var(--ink); }
.adb-role { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11px/1.3 var(--text); color: var(--soft); }
.adb-card.is-design .adb-role { color: var(--gold); }
.adb-card.is-placement .adb-role { color: var(--info); }
.adb-card.is-clarify .adb-role { color: var(--warn); }
.adb-card-said { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.4; color: var(--ink2); overflow-wrap: anywhere; }
.adb-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; font-size: 11.5px; color: var(--soft); }
.adb-card-meta > span { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
.adb-jump { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; box-shadow: none; color: var(--soft); font: 600 11px/1 var(--text); cursor: pointer; }
.adb-jump:hover, .adb-jump:focus-visible { color: var(--ink); background: var(--accent2); border-color: var(--gold-line); transform: none; }
.adb-jump .adb-icon { width: 12px; height: 12px; }

/* Lead with the artist-facing brief; keep its audit trail available underneath. */
.adb-document-heading { padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.adb-document-heading h3 { margin: 0 0 6px; font: 500 23px/1.2 var(--display); color: var(--ink); }
.adb-document-section { padding: 8px 0; }
.adb-document-section .adb-line { font-size: 14px; line-height: 1.65; }
.adb-source-detail { margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 8px; }
.adb-source-detail summary { color: var(--soft); }
/* AD corrections use the existing panel palette and compact, labelled fields. */
.adb-corrections { margin-block: 1rem; padding: 1rem; border: 1px solid var(--rule2); border-radius: 12px; }
.adb-corrections summary { cursor: pointer; font-weight: 600; }
.adb-corrections fieldset { min-width: 0; border: 0; padding: .7rem 0; margin: 0; }
.adb-corrections legend { font-weight: 600; }
.adb-corrections label { display: block; margin: .6rem 0; }
.adb-corrections textarea, .adb-corrections select, .adb-corrections input[type=text] { display: block; box-sizing: border-box; width: 100%; margin-top: .35rem; font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--rule2); border-radius: 8px; padding: .65rem; }
.adb-corrections input[type=checkbox] { margin-right: .5rem; }
.adb-corrections .adb-thumb { max-width: 140px; }

.adb-corrections > details { min-width: 0; padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.adb-corrections > details[open] > summary { margin-bottom: .75rem; }
.adb-queue-nav { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
/* the message to the client, up front (28 Oct): one box, one Send, another template under it */
.adb-send-box { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--gold-line); border-radius: var(--r); background: var(--paper2); }
.adb-send-box.is-quiet { padding: 8px 12px; border-color: var(--rule); background: transparent; }
.adb-send-box h4, .adb-send-box p { margin: 0; }
.adb-send-box h4 { font: 600 13.5px/1.3 var(--text); color: var(--ink); }
/* the completion update under Push (28 Oct): the card as an image and its four lines for Teams */
.adb-completion { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--rule2); border-radius: var(--r); background: var(--paper2); }
.adb-completion h4, .adb-completion p { margin: 0; }
.adb-completion-image { display: block; width: 100%; max-height: 320px; object-fit: contain; object-position: top; border: 1px solid var(--rule); border-radius: var(--r-sm); background: #fff; }
.adb-completion h4 { font: 600 13.5px/1.3 var(--text); color: var(--ink); }
.adb-completion-text { margin: 0; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: 12.5px/1.5 var(--mono); white-space: pre-wrap; }
.adb-completion-chats { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; font-size: 12.5px; color: var(--ink); }
.adb-completion-chats legend { padding: 0; margin-bottom: 2px; color: var(--soft); }
.adb-completion-chats label { display: flex; align-items: center; gap: 6px; }
.adb-completion-status { font-size: 12.5px; color: var(--ink2); }
.adb-completion-status:empty { display: none; }
/* 5 Nov: the post's status line, hers to change, and the desk's "Not posted to the group yet"
   (ext-adcompletion.js) */
.adw-word { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink2); }
.adw-word select, .adw-word input { min-width: 0; max-width: 100%; font: inherit; color: var(--ink); }
.adw-word input { flex: 1 1 12em; }
.adw-body { display: grid; gap: 10px; }
.adw-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.adw-row { display: grid; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--rule2); border-radius: var(--r); background: var(--paper2); }
.adw-row p { margin: 0; }
.adw-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; color: var(--ink); }
.adw-why { font-size: 12.5px; color: var(--ink2); }
.adb-template-pick, .adt-row input[type=text], .adt-row textarea {
  box-sizing: border-box; width: 100%; max-width: 100%; padding: 7px 8px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule2); border-radius: var(--r-sm); font: inherit; font-size: 12.5px;
}
.adb-template-pick { justify-self: start; width: auto; color: var(--soft); }
/* the templates' editor, under Follow-ups and notifications */
.adt-editor summary { cursor: pointer; font-size: 12.5px; color: var(--soft); }
.adt-body { display: grid; gap: 10px; margin-top: 8px; }
.adt-row { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--rule); }
.adt-asks { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; border: 0; font-size: 12px; color: var(--soft); }
.adt-asks legend { padding: 0; margin-bottom: 4px; font: 600 10.5px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.adt-ask { display: inline-flex; align-items: center; gap: 6px; }
/* 30 Oct: the box's own margins pushed each choice 4px past its label (1024-1920px) */
.adt-ask input { flex: none; margin: 0; }
.adb-line.is-quote .adb-text { white-space: pre-wrap; }
/* Same conversation shell; AD filters live in its left column. */
body.wide #tab-inkspector, #ad-workspace-conversation { display: flex; flex: 1; min-height: 0; width: 100%; }
.ad-workspace .side-list { display: flex; flex-direction: column; }
.ad-workspace #side-threads { flex: 1; min-height: 0; overflow-y: auto; }
.ad-workspace #side-threads .side-thread-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.ad-workspace .side-list-head { flex: none; }
.ad-desk-controls { padding: 16px; border-bottom: 1px solid var(--rule); display: grid; gap: 10px; flex: none; }
.ad-desk-controls[hidden] { display: none; }
.ad-desk-heading, .ad-desk-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ad-desk-heading p { margin: 0 0 4px; }
.ad-desk-controls label { display: grid; gap: 5px; font-size: 12px; color: var(--soft); min-width: 0; }
.ad-desk-controls label[hidden] { display: none; }
.ad-filter-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ad-desk-controls select, .ad-desk-controls input, #ad-chat-linking input {
  box-sizing: border-box; width: 100%; min-width: 0; padding: 9px; border-radius: var(--r-sm);
  border: 1px solid var(--rule2); background: var(--paper); color: var(--ink); font: inherit;
}
.ad-desk-controls .side-note, .ad-desk-controls .error { margin: 0; font-size: 12px; }
.ad-desk-settings { font-size: 12px; max-height: 180px; overflow-y: auto; }
.ad-desk-settings summary { cursor: pointer; color: var(--muted); }
.ad-desk-settings p { padding-top: 8px; }
.ad-row-status { font-size: 12px; color: var(--muted); }
.ad-row-status.is-attention, .ad-row-status.is-link { color: var(--gold); }
/* 27 Oct demo: the row's first reason under its status, every one on hover */
.ad-row-reason { display: block; min-width: 0; font-size: 11px; line-height: 1.35; color: var(--soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-link-candidate { display: grid; gap: 6px; border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 12px; }
.ad-workspace .adb-queue-nav { align-items: center; }
.ad-workspace .adb-queue-nav .side-note { margin-right: auto; }
@media (min-width: 1000px) {
  .ad-workspace .side { grid-template-columns: minmax(270px, 310px) minmax(340px, 1fr) minmax(320px, 410px); }
  .ad-workspace .side-panel { grid-column: auto; overflow-y: auto; border-left: 1px solid var(--rule); border-top: 0; }
  .ad-workspace .side-chat { min-height: 0; }
}
@media (max-width: 900px) {
  .ad-workspace .side-list { display: flex; }
  .ad-workspace.side-open .side-list { display: none; }
  .ad-workspace #side-threads { overflow-y: visible; }
}

/* AD desk: leave most of the left column for customers, not controls. */
.ad-workspace .ad-desk-controls { padding: 10px 12px; gap: 6px; }
.ad-workspace .ad-desk-controls select, .ad-workspace .ad-desk-controls input { padding: 5px 7px; height: 32px; font-size: 12px; }
.ad-workspace .ad-desk-controls label { gap: 2px; font-size: 11px; }
.ad-workspace .ad-desk-heading { font-size: 12px; }
.ad-workspace .ad-desk-heading .eyebrow { display: none; }
.ad-workspace .side-list-head { padding: 8px 12px; }
.ad-workspace #side-threads .side-thread { padding: 9px 12px; min-height: 0; gap: 9px; }
.ad-workspace #side-threads .side-thread-body { gap: 2px; font-size: 12px; }
.ad-workspace #side-threads .side-thread-body strong { font-size: 13px; }
.ad-workspace #side-threads .side-thread-body .side-note { font-size: 11px; line-height: 1.35; margin: 0; }
.ad-workspace #side-threads .avatar { width: 28px; height: 28px; font-size: 10px; }
.ad-workspace #side-threads .side-thread-preview { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 11px; }
.ad-workspace .ad-row-status { font-size: 11px; }
.ad-workspace .ad-desk-settings { font-size: 11px; }
.ad-workspace #ad-session-context { padding: 10px; font-size: 12px; }
/* The artist card intentionally follows the supplied light Weekly Review card. */
.adb-board { background: #fff; color: #303438; border: 1px solid #dedede; border-radius: 4px; box-shadow: 0 1px 3px #00000018; padding: 14px; gap: 10px; font: 12px/1.5 Arial, sans-serif; }
.adb-board .adb-board-meta, .adb-board .adb-board-properties { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.adb-board p { margin: 0; }
.adb-board .adb-board-meta > strong { font-size: 13px; }
.adb-board .adb-board-title { text-transform: uppercase; font-size: 12px; margin-top: 6px; }
.adb-board .adb-h, .adb-board .adb-line, .adb-board .adb-text, .adb-board .adb-text strong.adb-ref { color: #303438; font: inherit; }
.adb-board .adb-h { font-weight: 700; font-size: 12px; margin: 0 0 7px; letter-spacing: 0; }
.adb-board .adb-document-section { padding: 3px 0; }
.adb-board .adb-document-section .adb-line { font-size: 12px; line-height: 1.5; }
.adb-board .adb-line.is-quote { background: none; border: 0; padding: 0; }
.adb-board .adb-line.is-quote em { font: inherit; font-style: italic; }
.adb-board .adb-board-tag { padding: 3px 7px; border-radius: 3px; background: #f0efee; color: #37352f; font: 12px/1.3 Arial, sans-serif; }
.adb-board .adb-board-tag.is-full { background: #dceedd; }
.adb-board .adb-board-tag.is-duration { background: #ffe2dd; }
.adb-board .adb-board-tag.is-new { background: #f4dfe9; }
.adb-board .adb-board-tag.is-returning { background: #f8dec9; }
.adb-board-check { display: flex; align-items: center; gap: 4px; font: inherit; color: #303438; }
.adb-board-check input { margin: 0; width: 12px; height: 12px; accent-color: #1683ff; opacity: 1; }
.adb-board-photos { display: flex; flex-wrap: wrap; gap: 4px; }
.adb-board-photos button { padding: 0; border: 0; background: transparent; border-radius: 3px; }
.adb-board-photos .adb-thumb { width: 24px; height: 28px; border-radius: 3px; }
.adb-board .adb-source-detail { color: #606060; font-size: 11px; border-color: #ddd; }
.adb-board .adb-source-detail summary { color: #606060; }
@media (min-width: 1000px) {
 .ad-workspace .side { grid-template-columns: minmax(250px, 285px) minmax(330px, 1fr) minmax(350px, 430px); }
}

.ad-workspace .ad-desk-controls label { margin: 0; }
.ad-workspace .ad-desk-controls details { margin: 0; padding: 0; border: 0; }
.ad-workspace .ad-desk-controls summary { padding: 4px 0; min-height: 0; }
.ad-workspace .ad-desk-controls select, .ad-workspace .ad-desk-controls input { min-height: 0; }

.adb-board .adb-board-tag.is-half { background: #d7e8f1; }
.adb-board-check input { appearance: none; border: 1px solid #999; border-radius: 2px; position: relative; }
.adb-board-check input:checked { background: #1683ff; border-color: #1683ff; }
.adb-board-check input:checked::after { content: ""; position: absolute; left: 3px; top: 0px; width: 3px; height: 7px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Supervisor status precedes the unchanged artist-facing card. */
.adb-supervisor { border-left: 3px solid var(--accent, #bb6662); padding: 10px 12px; background: var(--paper); color: var(--ink); border-radius: var(--r); font: 12px/1.5 var(--text); }
.adb-supervisor h4 { font: 600 13.5px/1.3 var(--text); margin: 0 0 6px; }
.adb-supervisor p { margin: 6px 0; overflow-wrap: anywhere; }
.adb-supervisor-label { display: block; font-size: 11.5px; color: var(--soft); margin: 6px 0 4px; }
.adb-supervisor-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.adb-supervisor-tag { padding: 3px 7px; border-radius: 4px; background: var(--bg2); color: var(--ink2); }
/* 30 Oct: the theme's amber reads 4.2:1 on its own tint in the light theme; on the card's
   paper, outlined in it, 4.7:1 (tests/test_ad_status_contrast.cjs) */
.adb-supervisor-tag.is-pending { color: var(--warn); background: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 55%, transparent); }
.adb-supervisor-tag.is-ready { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--paper)); }
.adb-supervisor-booking { color: var(--soft); }
/* 27 Oct demo: why it is Ready, or why it needs a person */
.adb-reasons { margin: 7px 0 2px; padding-left: 18px; font-size: 12px; }
.adb-reasons li { margin: 2px 0; overflow-wrap: anywhere; }
.adb-reasons.is-ready li::marker { color: var(--ok); }
.adb-reasons.is-person li::marker { color: var(--warn); }

/* Compact review chrome; the white artist-card preview retains its own typography. */
#ad-pane-navigation { display: none; }
.ad-workspace .side > * { min-width: 0; }
.ad-workspace .side-panel { scrollbar-gutter: stable; }
.ad-workspace .adb-supervisor { border: 1px solid var(--rule2); border-top: 3px solid var(--gold); padding: 12px; }
.ad-workspace .adb-supervisor h4 { font-family: var(--text); font-size: 13px; }
.ad-workspace .adb-supervisor-notes { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.ad-workspace .adb-supervisor summary { padding: 6px 0; font-size: 12px; }
.ad-workspace .adb-supervisor-booking { font-size: 11px; }
.ad-workspace .adb-queue-nav { padding: 0 0 10px; gap: 6px; }
.ad-workspace .adb-btn { height: auto; min-height: 34px; white-space: normal; line-height: 1.3; padding-block: 7px; }
.ad-workspace :is(button, summary, select, input, textarea):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ad-workspace .ad-row-status { display: inline-flex; align-self: flex-start; border-radius: 4px; padding: 2px 5px; background: var(--bg2); color: var(--ink2); font-size: 12px; font-weight: 600; }
.ad-workspace .ad-row-status.is-attention, .ad-workspace .ad-row-status.is-link { color: var(--warn); background: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 55%, transparent); }
.ad-workspace .ad-row-status.is-ready, .ad-workspace .ad-row-status.is-saved { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--paper)); }
.ad-workspace .side-thread.on { box-shadow: inset 3px 0 var(--gold); }
@media (max-width: 999px) {
  .ad-workspace .side { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - 150px); min-height: 400px; overflow: hidden; }
  .ad-workspace #ad-pane-navigation { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--rule); background: var(--paper); }
  .ad-workspace #ad-pane-navigation button { flex: 1; min-width: 0; min-height: 44px; padding: 8px 4px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--soft); font: 600 12px var(--text); }
  .ad-workspace #ad-pane-navigation button[aria-pressed=true] { background: var(--primary-bg); border-color: var(--primary-line); color: var(--primary-fg); }
  .ad-workspace .side .side-list, .ad-workspace .side .side-chat, .ad-workspace .side .side-panel { display: none; grid-column: 1; grid-row: 2; min-height: 0; overflow-y: auto; }
  .ad-workspace .side[data-ad-pane=customers] .side-list { display: flex; }
  /* the head at its full height, as from 1000px (30 Oct: Improve's two versions under the reply
     shrank the head to nothing at 390px); the pane scrolls instead */
  .ad-workspace .side[data-ad-pane=chat] .side-chat { display: grid; grid-template-rows: max-content minmax(120px, 1fr) auto; }
  .ad-workspace .side[data-ad-pane=review] .side-panel { display: block; border: 0; }
  .ad-workspace #side-threads { overflow-y: auto; }
  .ad-workspace .side-back { display: none; }
  .ad-workspace .side .side-messages { min-height: 0; max-height: none; overflow-y: auto; }
  .ad-workspace .side-reply { padding: 10px 12px; }
  .ad-workspace .side-chat-head { padding: 12px; flex-wrap: wrap; }
  .ad-workspace .adb-btn, .ad-workspace .ad-desk-controls :is(input, select) { min-height: 40px; }
}

.adb-admin-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.adb-admin-notes legend, .adb-admin-notes > p { grid-column: 1 / -1; }
.adb-corrections .adb-admin-notes label { font-size: 12px; margin: 3px 0; }

.adb-board-admin-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; align-self: stretch; }
.adb-board-admin-notes small { flex-basis: 100%; color: #606060; font-size: 11px; }
/* Admin notes as the artist's board shows them: solid pills, bold white text, in the colour
   measured from the board (23 Oct). One not yet seen on the board is grey. */
.adb-admin-pill { display: inline-block; padding: 4px 9px; border-radius: 4px; background: #8b8f96; color: #fff; font: 700 12px/1.3 Arial, sans-serif; }
.adb-admin-pill.is-orange { background: #f97316; }
.adb-admin-pill.is-slate { background: #4b5563; }
.adb-admin-pill.is-amber { background: #f59e0b; }
.adb-admin-pill.is-pink { background: #ec4899; }
/* one Inkspector put on from the chat (ringed), one it takes off with the push (struck
   through) and its suggestions (outlined, not on the board); reasons on hover (23 Oct) */
.adb-admin-pill.is-auto { box-shadow: inset 0 0 0 1.5px #ffffffcc; }
.adb-admin-pill.is-off { background: #b9bcc2; text-decoration: line-through; }
.adb-admin-pill.is-suggest { background: transparent; color: #4d5562; border: 1px dashed #8b8f96; padding: 3px 8px; font-weight: 600; }
.adb-admin-pill[title] { cursor: help; }
.adb-admin-suggested { flex-basis: 100%; color: #606060; font-size: 11px; margin-top: 2px; }

/* Match the supplied Weekly Review examples, including the blue checkbox tick. */
.adb-board-check input:not(:disabled) { cursor: pointer; }

.adb-update-available { position: sticky; bottom: 0; z-index: 2; background: var(--paper); border: 1px solid var(--warn); display: grid; gap: 6px; }

/* which messages are this appointment's (22 Oct): one line, opened to correct it (28 Oct) */
.adb-piece { display: grid; gap: 8px; padding: 8px 10px; border: 1px solid var(--rule2); border-radius: var(--r-sm); font-size: 12.5px; }
.adb-piece.is-unsure { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.adb-piece > summary { cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--ink2); overflow-wrap: anywhere; }
.adb-piece-change { flex: none; font-weight: 600; color: var(--soft); }
.adb-piece[open] .adb-piece-change { display: none; }
.adb-piece-group { border: 1px solid var(--rule2); border-radius: var(--r-sm); padding: 6px 8px; }
.adb-piece-group > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.adb-piece-lines { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.adb-piece-line { overflow-wrap: anywhere; }
.adb-piece-line.is-read { color: var(--ink); }
.adb-piece-line.is-maybe { padding: 6px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn) 10%, transparent); display: grid; gap: 4px; }

/* Push and what it still needs, together (28 Oct): each requirement once with its fix beside
   it, then what is read before pushing; the outcome stays under the button */
.adb-push { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--rule2); border-radius: var(--r); background: var(--paper); }
.adb-gates { display: grid; gap: 6px; }
.adb-gate-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.adb-gate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 8px; border-radius: var(--r-sm); font-size: 12.5px; color: var(--ink2); background: var(--bg2); }
.adb-gate[hidden] { display: none; }
.adb-gate > p { flex: 1 1 100%; margin: 0; overflow-wrap: anywhere; }
.adb-gate.is-must { box-shadow: inset 3px 0 0 var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.adb-gate.is-wait { box-shadow: inset 3px 0 0 var(--gold); }
.adb-gate.is-read { box-shadow: inset 3px 0 0 var(--rule2); }
.adb-gate .adb-review { flex-basis: 100%; border-top: 0; padding-top: 0; }
.adb-gate-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; }
.adb-gate-photo .adb-thumb { width: 36px; height: 36px; }
.adb-gate-photo select { min-width: 0; flex: 1 1 160px; padding: 6px; border: 1px solid var(--rule2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; }
.adb-push-status { margin: 0; font-size: 12.5px; color: var(--soft); overflow-wrap: anywhere; }
.adb-push-status:empty { display: none; }
.adb-push-status.is-busy { color: var(--ink2); }
.adb-push-status.is-done { color: var(--ok); }
.adb-push-status.is-failed { color: var(--warn); }

/* the artist over the chat (28 Oct, ext-adartist.js): one line folded, three open; the month
   calendar as Mini App shows it. Only in Inkspector; the chat's grid gives it its own row */
body:not(.ad-workspace) #ad-artist-panel { display: none; }
.ad-workspace .side-chat:has(> #ad-artist-panel) { grid-template-rows: auto auto 1fr auto; }
.ada-panel { display: grid; gap: 6px; padding: 6px 12px 8px; border-bottom: 1px solid var(--rule); background: var(--paper); font-size: 12px; }
.ada-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ada-toggle { flex: 1 1 180px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 2px 0; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: none; }
.ada-toggle:hover { background: transparent; color: var(--ink); transform: none; }
.ada-toggle::before { content: ""; flex: none; align-self: center; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.ada-toggle[aria-expanded=true]::before { transform: rotate(45deg); }
/* 30 Oct: the artist's and the studio's names wrap whole, never "Rafa Or…" (1024px) */
.ada-toggle strong { font-size: 13px; overflow-wrap: anywhere; }
.ada-toggle .side-note { margin: 0; overflow-wrap: anywhere; }
.ada-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ada-tools .adb-btn { height: 26px; padding: 0 8px; text-decoration: none; }
.ada-board:empty { display: none; }
.ada-body { display: grid; gap: 4px; }
.ada-body[hidden] { display: none; }
.ada-line { margin: 0; color: var(--ink2); overflow-wrap: anywhere; }
.ada-next { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ada-label { font: 600 10px/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.ada-day { padding: 1px 7px; border-radius: 999px; font: 500 11px/1.6 var(--text); white-space: nowrap; color: var(--ink2); background: color-mix(in srgb, var(--info) 12%, transparent); }
.ada-day.is-pending { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 55%, transparent); }
.ada-day.is-blocked { background: color-mix(in srgb, var(--stop) 12%, transparent); }
.ada-board-edit summary { cursor: pointer; color: var(--soft); }
.ada-board-form { display: flex; gap: 6px; margin-top: 4px; }
.ada-board-form input { flex: 1; min-width: 0; height: 28px; padding: 0 8px; border: 1px solid var(--rule2); border-radius: var(--r-sm); background: var(--paper2); color: var(--ink); font: inherit; }

.ada-calendar { width: min(440px, 94vw); padding: 16px; }
.ada-cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.ada-cal-head strong { flex: 1; min-width: 0; text-align: center; font-size: 14px; overflow-wrap: anywhere; }
.ada-cal-head .adb-btn { padding: 0 8px; }
.ada-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.ada-cal-grid > p { grid-column: 1 / -1; margin: 0; }
.ada-cal-week { padding-bottom: 2px; text-align: center; font: 600 10px/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* 30 Oct (the owner): the states were too alike; each now reads at a glance (theme tokens) */
.ada-cal-day { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-height: 36px; border-radius: var(--r-sm); font: 600 12.5px/1 var(--text); color: var(--ink); background: color-mix(in srgb, var(--ok) 30%, transparent); }
.ada-cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--ink2); }
.ada-key { display: inline-flex; align-items: center; gap: 5px; }
.ada-calendar > .side-note { margin: 8px 0 0; }
@media (max-width: 999px) {
  .ad-workspace .side[data-ad-pane=chat] .side-chat:has(> #ad-artist-panel) { grid-template-rows: max-content max-content minmax(120px, 1fr) auto; }
  .ada-tools .adb-btn { height: 36px; }
}

/* closeouts not paid (28 Oct, ext-adcloseouts.js): a counted button beside Updates and in the
   phone's pane bar; the list by studio or artist, one line a session, each opening its chat */
.ad-desk-links { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.adc-open { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border: 1px solid var(--rule2); border-radius: var(--r-sm); background: var(--paper); color: var(--ink2); font: 600 12px/1 var(--text); white-space: nowrap; cursor: pointer; box-shadow: none; }
.adc-open:hover, .adc-open:focus-visible { color: var(--ink); border-color: var(--gold-line); background: var(--accent2); transform: none; }
.adc-open .icon { width: 14px; height: 14px; }
.adc-count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--stop) 14%, transparent); color: var(--stop); font: 700 10.5px/18px var(--text); text-align: center; }
.ad-workspace .ad-desk-heading { flex-wrap: wrap; row-gap: 4px; }
/* on a phone, in the pane bar: the icon and the count, the name in its label */
.ad-workspace #ad-pane-navigation .adc-open { flex: none; height: auto; min-height: 44px; padding: 0 10px; border-color: var(--rule2); color: var(--ink2); }
.ad-workspace #ad-pane-navigation .adc-open > span:not(.adc-count) { display: none; }
.adc-head > strong { flex: 1 1 auto; font-size: 15px; }
.adc-choice { display: inline-flex; gap: 2px; }
.adc-choice .adb-btn { height: 28px; padding: 0 8px; font-size: 12px; }
.adc-choice .adb-btn[aria-pressed=true] { background: var(--accent2); border-color: var(--gold-line); color: var(--ink); }
.adc-close { padding: 0 8px; }
.adc-body > .side-note:empty { display: none; }
.adc-row:hover, .adc-row:focus-visible { background: var(--accent2); transform: none; }
.adc-amount { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
@media (max-width: 640px) {
}

/* a client's photo saved as its original file (28 Oct, app.js photoDownload): under the photo
   in the thread and its references, on Inkspector's photo cards, and in the image preview */
.photo-download { display: flex; align-items: center; gap: 4px; width: max-content; height: 24px; margin: 0 0 6px; padding: 0 8px; border: 1px solid var(--rule2); border-radius: var(--r-sm); background: var(--paper); color: var(--soft); font: 600 11.5px/1 var(--text); cursor: pointer; box-shadow: none; }
.photo-download:hover, .photo-download:focus-visible { color: var(--ink); border-color: var(--gold-line); background: var(--accent2); transform: none; }
.photo-download .icon, .adb-jump .icon, .image-preview-download .icon { width: 13px; height: 13px; }
.brief-reference-grid .photo-download { margin-top: 4px; }
.image-preview-download { position: fixed; top: 18px; right: 104px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--gold-line); border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 600; }
.image-preview-download:focus-visible { outline-color: var(--gold); }

/* 29 Oct (the owner's brand, ui-styling and frontend-design pass, theme unchanged): the status
   leads with its state and the one thing to do; quiet chips; the white card stays white in
   both themes; the panel scrolls on its own from 1000px; phone-sized targets. */
.adb-supervisor .adb-state { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 600 15px/1.3 var(--text); color: var(--ink); }
.adb-state::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.adb-state.is-person::before { background: var(--warn); }
.adb-state.is-updating::before { display: none; }
.adb-supervisor .adb-next { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; color: var(--ink2); }
.adb-supervisor-missing { margin-top: 4px; }
.adb-supervisor > .adb-supervisor-tags { margin-top: 8px; }
.adb-error { display: grid; justify-items: start; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn) 8%, transparent); box-shadow: inset 3px 0 0 var(--warn); font-size: 13px; color: var(--ink); }
.adb-error p { margin: 0; overflow-wrap: anywhere; }
.adb-review .adb-review-h { font: 600 13.5px/1.3 var(--text); color: var(--ink); }
.adb-gates .adb-group-h { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ink2); }
.adb-push .adb-link { min-height: 30px; font-size: 12px; }
.adb-push .adb-link:disabled { color: var(--soft); opacity: 1; }
.adb-push-button.is-done:disabled { opacity: 1; cursor: default; }

/* the white card in the dark theme too: its photo tiles, boxes and small notes are the board's */
.adb-board .adb-thumb { background: #f0efee; color: #9b9a97; }
.adb-board .adb-board-check input[type=checkbox] { width: 12px; height: 12px; min-width: 0; min-height: 0; padding: 0; }
.adb-board .adb-board-check input[type=checkbox]:not(:checked) { background: #fff; }
.adb-board .side-note, .adb-board .adb-line.is-missing .adb-text { color: #606060; }

/* keyboard focus that can be seen on a brief line and a day-list row */
.adb-line.is-linked:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ad-workspace #side-threads .side-thread:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* the day list's heading: its links under the title, inside the column */
.ad-workspace .ad-desk-heading > div { flex-basis: 100%; }
.ad-workspace .ad-desk-links { flex: 1 1 100%; min-width: 0; margin-left: 0; flex-wrap: wrap; gap: 6px 8px; }
.ada-toggle .eyebrow { flex: none; margin: 0; color: var(--soft); }
.adb-panel .adb-images > h4.adb-h { font: 600 13.5px/1.3 var(--text); color: var(--ink); }
.ad-workspace #side-list-title { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ink2); }

/* 1000-1100px: app.css lets the page grow there; Inkspector's three columns scroll on their own */
@media (min-width: 1000px) and (max-width: 1100px) {
  body.wide.ad-workspace #app { height: 100vh; height: 100dvh; }
  body.wide.ad-workspace main { display: flex; }
  .ad-workspace .side { height: auto; }
  .ad-workspace .side-list { max-height: none; }
  .ad-workspace .side-chat { min-height: 0; }
  .ad-workspace .side-panel { grid-column: auto; border-top: 0; }
}
/* the chat column at its own height (from 1000px): its head (overflow hidden, so an `auto`
   row may shrink it to nothing) and the artist strip keep their full height, the messages
   keep a readable minimum, and the column scrolls when they do not fit (30 Oct: at 1024 the
   head's Hide and Write Jigger's replies were cut off under the strip) */
@media (min-width: 1000px) {
  .ad-workspace .side-chat { overflow-y: auto; grid-template-rows: max-content minmax(160px, 1fr) auto; }
  .ad-workspace .side-chat:has(> #ad-artist-panel) { grid-template-rows: max-content max-content minmax(160px, 1fr) auto; }
}

@media (max-width: 999px) {
  .ad-workspace input[type=checkbox], .ad-workspace input[type=radio] { width: 20px; height: 20px; }
  .ad-workspace .adb-piece-line label, .ad-workspace .adb-piece-group > summary label { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
  .ad-workspace :is(.adc-choice .adb-btn, .adc-close, .ada-cal-head .adb-btn, .ad-desk-actions .link, .ad-desk-links .link, .ad-desk-links .adc-open, .ada-tools .adb-btn, .adb-push .adb-link, .adb-jump) { min-height: 40px; }
  .ad-workspace .adb-line.is-linked { padding-block: 6px; }
  .ad-workspace #ad-pane-navigation { overflow-x: auto; scrollbar-width: none; }
  .ad-workspace #ad-pane-navigation button { flex: 1 1 0; }
  .ad-workspace #ad-artist-panel { position: relative; z-index: 0; }
}