/* ============================================================================
   dart-review.css — styles for the staff review layer.

   Kept in its OWN file, not in dart-universe.css, for one reason: at the
   Shopify port this whole layer is deleted, and a deletion that is one file
   plus two <script>/<link> tags cannot leave fragments behind in the design
   system. Nothing here uses a --token from dart-universe.css, so the review UI
   also still works if the stylesheet fails to load — which is exactly when a
   reviewer most needs to be able to report it.

   Colours are the locked brand set (Cocoa Verde #2F533C, Morning Dew #FFF8EC,
   Basalt #3F2F25, 18K gold #C7A233) so the layer does not look like a foreign
   tool bolted on, but it is deliberately NOT part of the design being
   reviewed — hence the hard shadow and the fixed positioning.

   Tap targets are >=44px throughout, matching the rule the rest of the site is
   held to, because the people using this will be on phones.
   ============================================================================ */

#dartReview {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #3F2F25;
  z-index: 9000;
}
#dartReview button { font-family: inherit; }

/* --- floating button ------------------------------------------------------ */
.dr-fab {
  position: fixed; right: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  border: 0; border-radius: 999px;
  background: #2F533C; color: #FFF8EC;
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 6px 20px rgba(63, 47, 37, .32);
  cursor: pointer; z-index: 9002;
}
.dr-fab:hover { background: #22402D; }
.dr-fab.is-open { background: #3F2F25; }
.dr-fab-ico { font-size: 17px; line-height: 1; }
.dr-badge {
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-grid; place-content: center;
  border-radius: 999px; background: #C7A233; color: #3F2F25;
  font-size: 12px; font-weight: 700;
}
#dartReview.is-picking .dr-fab { display: none; }

/* --- panel ---------------------------------------------------------------- */
.dr-panel {
  position: fixed; right: 18px; bottom: 78px;
  width: min(370px, calc(100vw - 36px));
  max-height: min(70vh, 620px); overflow: auto;
  background: #FFF8EC; border: 1px solid #D9CFBC; border-radius: 14px;
  box-shadow: 0 18px 48px rgba(63, 47, 37, .28);
  padding: 14px; z-index: 9002;
}
.dr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dr-head strong { font-size: 15px; }
.dr-x {
  width: 44px; height: 44px; margin: -10px -10px -10px 0;
  border: 0; background: none; color: #3F2F25;
  font-size: 26px; line-height: 1; cursor: pointer;
}

.dr-btn {
  min-height: 44px; padding: 0 16px;
  border-radius: 8px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.dr-btn--go { background: #2F533C; color: #FFF8EC; }
.dr-btn--go:hover { background: #22402D; }
.dr-btn--go[disabled] { opacity: .6; cursor: default; }
.dr-btn--ghost { background: transparent; color: #2F533C; border-color: #B9C4AC; }
.dr-btn--ghost:hover { background: #EFEAD9; }
.dr-btn--wide { display: block; width: 100%; margin-bottom: 12px; }
/* 44px, not the 36px this started at. uxcheck never catches it — the panel is
   closed when the harness runs, so nothing inside it is ever measured — but
   these are real buttons that real people tap on real phones, and the review
   layer should not get a lower bar than the site it is used to review. */
.dr-btn--sm { min-height: 44px; padding: 0 14px; font-size: 13px; margin-top: 8px; }

.dr-warn { background: #F6ECD8; border: 1px solid #E0CE9E; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.dr-warn p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; }
.dr-note { font-size: 12.5px; color: #635948; line-height: 1.5; }
.dr-err { color: #9C3B29; font-size: 13px; margin: 6px 0 0; min-height: 1em; }

/* --- comment list --------------------------------------------------------- */
.dr-list { display: grid; gap: 10px; }
.dr-item {
  border: 1px solid #E2D9C6; border-radius: 10px; background: #FCF9F2;
  padding: 10px 12px;
}
.dr-item.is-flash { border-color: #C7A233; box-shadow: 0 0 0 3px rgba(199, 162, 51, .28); }
.dr-item.is-done { opacity: .6; }
.dr-item p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; }
.dr-item-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.dr-num {
  width: 22px; height: 22px; display: grid; place-content: center;
  border-radius: 999px; background: #C7A233; color: #3F2F25;
  font-size: 12px; font-weight: 700; flex: none;
}
.dr-tag {
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  background: #E4EAD9; color: #3B4A3A; border-radius: 4px; padding: 2px 6px;
}
.dr-about { color: #635948; font-style: italic; }
.dr-shot { display: inline-block; margin-top: 8px; font-size: 13px; color: #2F533C; font-weight: 600; }

/* Per-item actions, and the send block at the foot of the panel. Because there
   is no server, "Send to Tommy" is the only moment anything leaves the device —
   so it is the most prominent control in the panel, and the warning under it
   is not decoration. */
.dr-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.dr-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid #E2D9C6; }
.dr-foot .dr-btn--wide { margin-top: 8px; }
.dr-foot .dr-acts { margin-top: 8px; }
.dr-status { margin: 8px 0 0; font-size: 13px; color: #2F533C; font-weight: 600; min-height: 1em; }

/* --- composer ------------------------------------------------------------- */
.dr-composer {
  position: fixed; right: 18px; bottom: 18px;
  width: min(380px, calc(100vw - 36px));
  max-height: calc(100vh - 36px); overflow: auto;
  background: #FFF8EC; border: 1px solid #D9CFBC; border-radius: 14px;
  box-shadow: 0 18px 48px rgba(63, 47, 37, .3);
  padding: 16px; z-index: 9003;
}
.dr-composer h3 { margin: 0 0 4px; font-size: 16px; }
.dr-lab { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; }
.dr-in {
  display: block; width: 100%; margin-top: 5px;
  min-height: 44px; padding: 10px 12px;
  border: 1px solid #C9BFA9; border-radius: 8px; background: #FCF9F2;
  font: inherit; font-size: 15px; color: #3F2F25;
}
.dr-in:focus { outline: 2px solid #2F533C; outline-offset: 1px; }
.dr-ta { min-height: 92px; resize: vertical; }
.dr-file { display: block; margin-top: 6px; font-size: 13px; min-height: 44px; }
.dr-thumb { margin-top: 8px; font-size: 12.5px; color: #635948; }
.dr-thumb img { display: block; max-width: 100%; max-height: 150px; border-radius: 6px; border: 1px solid #E2D9C6; }
.dr-row { display: flex; gap: 8px; margin-top: 14px; }
.dr-row .dr-btn { flex: 1; }

/* --- pins & pick mode ----------------------------------------------------- */
.dr-pins { position: absolute; top: 0; left: 0; }
.dr-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 999px;
  border: 2px solid #FFF8EC; background: #C7A233; color: #3F2F25;
  font-size: 13px; font-weight: 700; line-height: 1;
  box-shadow: 0 3px 10px rgba(63, 47, 37, .38);
  cursor: pointer; z-index: 9001; padding: 0;
}
.dr-pin.is-done { background: #B9C4AC; }
.dr-pin:hover { transform: translate(-50%, -50%) scale(1.12); }

.dr-hover {
  position: absolute; pointer-events: none; z-index: 9001;
  outline: 2px solid #C7A233; background: rgba(199, 162, 51, .14);
  border-radius: 3px;
}
/* ⚠️ Was `#dartReview.is-picking ~ *`, which can never match: #dartReview is
   appended as body's LAST child, so it has no following siblings. The crosshair
   has to come off a class on <body> instead. */
body.dr-picking, body.dr-picking * { cursor: crosshair !important; }
body.dr-picking .dr-pickbar, body.dr-picking .dr-pickbar * { cursor: default !important; }
.dr-pickbar {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  background: #3F2F25; color: #FFF8EC;
  padding: 8px 10px 8px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 8px 26px rgba(63, 47, 37, .4); z-index: 9003;
}
.dr-pickbar .dr-btn--ghost { color: #FFF8EC; border-color: rgba(255, 248, 236, .5); }
.dr-pickbar .dr-btn--ghost:hover { background: rgba(255, 248, 236, .14); }

@media print { #dartReview { display: none !important; } }