/* Surfaces tied to an external service: the thread panel, the Google
   account / new-Doc controls, and the sheet-read error banner.

   Part of the split style sheet — see index.html for the link order. */
/* ---------- Reddit thread panel: "open in new tab" button + scroll ---------- */
.thread-panel-actions { margin: 0 0 12px; }
.thread-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 7px 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  box-shadow: var(--glass-highlight);
  transition: var(--transition);
}
.thread-open-btn:hover { border-color: var(--ink-muted); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.thread-open-btn .ic { width: 14px; height: 14px; }
/* Flexbox min-height fix so long reader threads scroll inside the panel */
.thread-frame-wrap { min-height: 0; }

/* ---------- Where a link goes, for pages that refuse to be framed ----------
   Amazon sends X-Frame-Options, so its pages can't be rendered here. This is
   the destination of the link stated plainly instead — which is the question a
   reviewer opening an affiliate link was actually asking. */
.link-dest { padding: 12px 2px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.link-dest-note {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
}
.link-dest-note .ic { width: 13px; height: 13px; color: var(--ink-muted); }
.link-dest-rows {
  margin: 0; width: 100%;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: baseline;
}
.link-dest-rows dt {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-muted);
}
.link-dest-rows dd { margin: 0; font-size: 13px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.link-dest-rows dd code { font-family: var(--font-mono); font-size: 12.5px; }
/* Only ever present when a real picture loaded — see showProductImage. */
.link-dest-img {
  display: block; align-self: stretch;
  background: #fff; /* product shots are cut out on white; keep them readable in the dark theme */
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 10px;
  transition: var(--transition);
}
.link-dest-img:hover { border-color: var(--ink-muted); }
.link-dest-img img { display: block; width: 100%; max-height: 260px; object-fit: contain; }

.link-dest-why { margin: 0; font-size: 11.5px; line-height: 1.5; }
.link-dest-err { margin: 0; font-size: 11.5px; color: var(--danger, var(--ink-muted)); overflow-wrap: anywhere; }

/* ---------- Google account + New Google Doc ---------- */
.google-account-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.google-connected { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--accent-strong); }
.google-connected .ic { color: var(--accent); }
.doc-btn-row { margin-bottom: 8px; }
.doc-btn-row .new-doc-btn { display: inline-flex; align-items: center; gap: 7px; }

/* "Open Google Doc" buttons for links inside a comment (created or pasted) */
.doc-open-row { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-open-row:not(:empty) { margin-bottom: 10px; }
.doc-open-row .link-chip { margin-bottom: 0; cursor: pointer; }

/* Transient toast */
.ctt-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 300;
}
.ctt-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* §5.6 Undo toast: message + inline action button. */
.ctt-toast.has-action { display: inline-flex; align-items: center; gap: 14px; padding: 9px 9px 9px 18px; pointer-events: auto; }
.ctt-toast .ctt-toast-msg { white-space: nowrap; }
.ctt-toast-action {
  background: color-mix(in srgb, var(--paper) 14%, transparent);
  color: var(--paper);
  border: 1px solid color-mix(in srgb, var(--paper) 45%, transparent);
  border-radius: 999px;
  padding: 5px 15px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.ctt-toast-action:hover { background: color-mix(in srgb, var(--paper) 26%, transparent); }
.ctt-toast-action:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* §6.3 Conflict comparison: your version vs the sheet's, field by field */
.cf-list { max-height: 52vh; overflow-y: auto; margin: 8px 0 4px; display: flex; flex-direction: column; gap: 10px; }
.cf-row {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}
.cf-row.cf-changed { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: var(--gold-soft); }
.cf-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-muted); margin-bottom: 8px;
}
.cf-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 999px; padding: 2px 7px; margin-left: 6px;
}
.cf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf-col { min-width: 0; }
.cf-col-head { font-size: 10.5px; color: var(--ink-muted); margin-bottom: 4px; }
.cf-val {
  font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 160px; overflow-y: auto;
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 8px 10px;
}
.cf-empty { color: var(--ink-muted); font-style: italic; }
@media (max-width: 720px) { .cf-cols { grid-template-columns: 1fr; } }

/* §7.2 Field validation: invalid state + inline message */
.field-invalid {
  border-color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger-soft) 45%, transparent);
}
.field-invalid:focus { outline: 2px solid var(--danger); outline-offset: 1px; }
.field-error {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--danger);
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.field-error::before { content: "!"; font-weight: 800; flex: none; }

/* Per-field rule editor in Settings */
.field-rules-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--glass-border);
}
.field-rule-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-soft); white-space: nowrap;
}
.field-rules-wrap input[type="number"] { width: 108px; }
.field-rules-wrap input[type="text"] { flex: 1; min-width: 180px; }

/* §7.1 Per-source workflow block */
.src-workflow {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}
.src-workflow > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.src-workflow > summary::marker { color: var(--ink-muted); }
.src-workflow textarea { width: 100%; font-family: var(--font-mono); font-size: 12.5px; }
.src-workflow label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-muted); margin: 10px 0 5px; }

/* §6.2 Header mapping + configuration test report */
.header-map {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}
.header-map.hidden { display: none; }
.hm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 14px; }
.hm-row { min-width: 0; }
.hm-row label {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-muted); margin-bottom: 5px;
}
.hm-row select { width: 100%; }

.test-report:empty { display: none; }
.test-report { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.tr-tab {
  border: 1px solid var(--glass-border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-md); padding: 12px 14px;
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
}
.tr-tab.tr-has-problems { border-left-color: var(--gold); }
.tr-head { font-size: 13px; font-weight: 650; margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline; }
.tr-cols { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; }
.tr-col { font-size: 12px; color: var(--ink-soft); font-family: var(--font-mono); }
.tr-problems { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--gold); }
.tr-problems li { margin-bottom: 3px; }
.tr-ok { margin: 4px 0 0; font-size: 12.5px; color: var(--accent-strong); display: flex; align-items: center; gap: 6px; }

/* §6.1 Task ID settings: legacy-mode warning + optional-field marker */
.hint-warn { color: var(--gold); }
.label-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-muted); }
.src-taskid-side { display: flex; flex-direction: column; gap: 8px; justify-content: flex-start; }
.src-taskid-side .hint { margin: 0; }
.src-taskid-status { flex: 1; min-width: 0; }

/* ---------- Sheet-read error banner + loading hint ---------- */
.tab-error-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 4px;
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
  box-shadow: var(--glass-highlight);
}
.tab-error-banner > .ic { width: 18px; height: 18px; flex: none; color: var(--danger); }
.tab-error-banner .teb-text { flex: 1; min-width: 0; }
.tab-error-banner .teb-text strong { display: block; font-size: 13px; color: var(--danger); }
.tab-error-banner .teb-text span { font-size: 12px; color: var(--ink-soft); }
.tab-error-banner button { flex: none; }

.sk-hint { opacity: 0; text-align: center; margin-top: 14px; transition: opacity 0.4s ease; }
.sk-hint.show { opacity: 1; }

/* ---------- Grouped source settings ----------
   A source card carried fifteen inputs in one flat column, so finding the Task
   ID column meant scrolling past the dates and the queue-title pickers. The
   groups below are collapsible <details>, with the three that matter on a first
   setup (the sheet, the Task ID, the fields) open by default and the rest shut.

   Deliberately NOT tabs: a tab hides its contents from Ctrl-F and from the
   validation that runs on save, and a settings screen where an error can be
   reported for a field nobody can see is worse than a long page. */
.src-group {
  margin-top: 12px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
  overflow: hidden;
}

.src-group > summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 11px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  list-style-position: inside;
}
.src-group > summary::marker { color: var(--ink-muted); }
.src-group > summary:hover { color: var(--ink); }
.src-group[open] > summary { border-bottom: 1px solid var(--glass-border); }

/* The subtitle on a group heading says what lives inside, so a shut group is
   still findable without opening every one of them. */
.src-group .group-note {
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-muted);
}
.src-group .group-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-muted);
}

.src-group-body { padding: 14px; }
.src-group-body > label:first-child { margin-top: 0; }

/* The workflow block predates these groups and had its own padding; inside the
   group frame that reads as a double border. */
.src-group.src-workflow { padding: 0; }
.src-group.src-workflow > .settings-grid-2,
.src-group.src-workflow > label,
.src-group.src-workflow > textarea,
.src-group.src-workflow > .hint { margin-left: 14px; margin-right: 14px; }
.src-group.src-workflow > .hint:last-child { padding-bottom: 14px; }

/* A group holding something that needs attention shows it while shut. */
.src-group.has-warning > summary { color: var(--gold); }
.src-group.has-warning > summary .group-note { color: color-mix(in srgb, var(--gold) 70%, var(--ink-muted)); }

/* §10.1 The piece flags sit with the other per-field rules, but they describe
   the field's ROLE rather than its validation, so they're tinted apart. */
.field-piece-check { color: var(--accent-strong); }
.field-piece-check.is-off { opacity: 0.45; }