/* Optional client review controls. Remove this stylesheet for launch. */

.draft-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 28px;
  padding: 8px var(--gutter);
  background: #fdf3cf;
  border-bottom: 1px solid #e8d48f;
  color: var(--ink);
  font: 400 13px/1.4 var(--sans);
}
.draft-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b5a1a;
}
.draft-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.draft-group > span {
  margin-right: 6px;
  color: var(--muted);
}
.draft-group button {
  padding: 4px 9px;
  border: 1px solid #e0cd86;
  border-radius: 5px;
  background: #fff;
}
.draft-group button:hover {
  border-color: var(--deep);
}
.draft-group button[aria-pressed='true'] {
  background: var(--deep);
  color: #fff;
}
.draft-count {
  color: var(--muted);
}
[data-kind='flag'] {
  --cmt-bg: #fde68a;
  --cmt-ink: #7a5300;
  --cmt-border: #e2b93b;
}
[data-kind='seo'] {
  --cmt-bg: #dbeafe;
  --cmt-ink: #1d4ed8;
  --cmt-border: #93b4f5;
}
[data-kind='compliance'] {
  --cmt-bg: #fde2e1;
  --cmt-ink: #a3261d;
  --cmt-border: #f0a8a3;
}
/* Markers never render inside the page text. The review script moves them into one layer and
   places each beside the text it annotates, so showing comments cannot change the page layout. */
.cmt-marker {
  display: none;
}
.cmt-layer {
  position: absolute;
  top: 0;
  left: 0;
}
.cmt-layer .cmt-marker {
  position: absolute;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--cmt-border);
  border-radius: 11px 11px 11px 3px;
  background: var(--cmt-bg);
  color: var(--cmt-ink);
  font: 700 11px/1 var(--sans);
  letter-spacing: normal;
  text-transform: none;
}
.cmt-layer .cmt-marker.is-unplaced {
  display: none;
}
.cmt-marker:hover,
.cmt-marker:focus-visible {
  border-color: var(--cmt-ink);
}
.cmt-marker:focus-visible {
  outline: 2px solid var(--cmt-ink);
  outline-offset: 3px;
}
html[data-comments='off'] .cmt-layer {
  display: none;
}
.cmt-balloon {
  position: absolute;
  width: 340px;
  max-width: calc(100vw - 32px);
  /* Long comments scroll inside the balloon instead of covering the page. */
  max-height: min(480px, calc(100dvh - 32px));
  overflow-y: auto;
  padding: 16px;
  background: #fff;
  border: 1px solid #d6d9de;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  z-index: 70;
  color: var(--ink);
  font: 400 14px/1.55 var(--sans);
}
.cmt-balloon:focus {
  outline: 2px solid var(--cmt-ink);
  outline-offset: 2px;
}
.cmt-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 4px 12px;
  align-items: start;
}
.cmt-kind {
  color: var(--cmt-ink);
  font: 600 12px/1.4 var(--sans);
  text-transform: uppercase;
}
.cmt-title {
  grid-column: 1;
  color: var(--ink);
  font: 600 15px/1.4 var(--sans);
  text-wrap: pretty;
}
.cmt-close {
  grid-column: 2;
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 3px;
}
.cmt-close:hover {
  background: var(--mist);
}
.cmt-body {
  margin-top: 12px;
}
.cmt-body p + p {
  margin-top: 8px;
}
.cmt-body a {
  text-decoration: underline;
}
.cmt-body table {
  width: 100%;
  margin-top: 4px;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.4;
}
.cmt-body th,
.cmt-body td {
  padding: 6px 8px 6px 0;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.cmt-body th {
  border-top: 0;
  color: var(--muted);
  font-weight: 600;
}
.cmt-body table + p,
.cmt-body p + table {
  margin-top: 10px;
}
.cmt-reply {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.cmt-body .cmt-reply-byline {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 600px) {
  .cmt-balloon {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    max-height: min(70dvh, calc(100dvh - 24px));
  }
}