/*
 * Review layer: the name chip, the name prompt, the "Comment" pill that appears on a
 * text selection, and the review index page. Lyceum's tokens (tokens.css of the website,
 * read here with the same values as fallbacks): White Chip sheets, 1px Blue Chip frames,
 * square corners, Electric for the one primary action, Inter, sentence case.
 *
 * Everything is namespaced `lr-` and sets the properties it depends on, because the
 * website's own element styles (buttons, inputs, headings) would otherwise leak in.
 */
.lr {
  --lr-paper: var(--lyc-white-chip, #ffffff);
  --lr-ink: var(--lyc-blue-chip, #000114);
  --lr-accent: var(--lyc-electric, #2f0ac2);
  --lr-accent-hover: var(--lyc-electric-2, #6244f2);
  --lr-accent-line: var(--lyc-electric-3, #9c93ff);
  --lr-lilac: var(--lyc-lilac, #c0baff);
  --lr-rule: var(--lyc-grey-01, #e7e7e7);
  --lr-quiet: var(--lyc-grey-02, #a1a1a1);
  --lr-muted: var(--lyc-grey-03, #4d4d4d);
  --lr-font: var(--lyc-font-text, 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif);
  --lr-ease: var(--lyc-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  /* Above the site, below the comment widget (which sits at 2147483647). */
  --lr-z: 2147482000;
}

.lr [hidden],
.lr[hidden] {
  display: none !important;
}

.lr,
.lr *,
.lr *::before,
.lr *::after {
  box-sizing: border-box;
}

.lr {
  font-family: var(--lr-font);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lr-ink);
  -webkit-font-smoothing: antialiased;
}

.lr :where(button, input) {
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  margin: 0;
}

/* ---------- The website's cookie banner ----------
 * Nothing on this copy sets a cookie or loads a tracker (the Content-Security-Policy in
 * _headers blocks them), so the banner has nothing to ask. It would also sit on top of the
 * chip and the comment button on a phone. */
#cookie-banner {
  display: none !important;
}

/* ---------- Buttons ---------- */

.lr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--lr-quiet);
  border-radius: 0;
  background: var(--lr-paper);
  color: var(--lr-ink);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 160ms var(--lr-ease), background-color 120ms ease, border-color 120ms ease;
}
.lr-btn:active:not(:disabled) {
  transform: scale(0.97);
}
.lr-btn:focus-visible,
.lr-link:focus-visible,
.lr-chip-button:focus-visible {
  outline: 1px solid var(--lr-accent);
  outline-offset: 2px;
}
.lr-btn--primary {
  border-color: var(--lr-accent);
  background: var(--lr-accent);
  color: #ffffff;
}
.lr-btn:disabled {
  border-style: dashed;
  background: var(--lr-paper);
  border-color: var(--lr-quiet);
  color: var(--lr-quiet);
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  .lr-btn:hover:not(:disabled) {
    background: #f4f4f7;
    border-color: var(--lr-ink);
  }
  .lr-btn--primary:hover:not(:disabled) {
    background: var(--lr-accent-hover);
    border-color: var(--lr-accent-hover);
  }
}

/* ---------- The chip: "Commenting as Max (change)" ---------- */

.lr-chip {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: var(--lr-z);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  max-width: calc(100vw - 96px);
  padding: 0 10px;
  border: 1px solid var(--lr-ink);
  background: var(--lr-paper);
  color: var(--lr-ink);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.lr-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.lr-link,
.lr-chip-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lr-muted);
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--lr-quiet);
  text-underline-offset: 2px;
  -webkit-appearance: none;
  appearance: none;
}
.lr-chip-button--solo {
  color: var(--lr-accent);
  font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
  .lr-link:hover,
  .lr-chip-button:hover {
    color: var(--lr-accent);
    text-decoration-color: var(--lr-accent);
  }
}

/* ---------- The name prompt: a dialog over an even dim ---------- */

.lr-dim {
  position: fixed;
  inset: 0;
  /* Over the comment widget too, for when the name is changed while it is running. */
  z-index: 2147483647;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 12vh 16px 24px;
  background: rgba(0, 1, 20, 0.5);
}
.lr-dialog {
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--lr-ink);
  background: var(--lr-paper);
  color: var(--lr-ink);
  box-shadow: 4px 4px 0 var(--lr-ink);
}
.lr-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 16px;
}
.lr-title {
  margin: 0;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--lr-ink);
}
.lr-text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--lr-muted);
}
.lr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lr-label {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.01em;
  color: var(--lr-muted);
}
.lr-input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--lr-quiet);
  border-radius: 0;
  background: var(--lr-paper);
  color: var(--lr-ink);
  font-size: 14px;
  line-height: 20px;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.lr-input::placeholder {
  color: var(--lr-quiet);
  opacity: 1;
}
.lr-input:hover {
  border-color: var(--lr-ink);
}
.lr-input:focus {
  border-color: var(--lr-accent);
  box-shadow: 0 0 0 1px var(--lr-accent);
}
.lr-known {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lr-known-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lr-known-list .lr-btn {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 400;
}
.lr-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--lr-rule);
}

/* ---------- The "Comment" pill on a text selection (mouse only) ---------- */

.lr-pill {
  position: fixed;
  z-index: var(--lr-z);
  display: none;
  min-height: 28px;
  padding: 0 10px;
  white-space: nowrap;
}
.lr-pill[data-open='true'] {
  display: inline-flex;
}
@media (hover: none), (pointer: coarse) {
  .lr-pill {
    display: none !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .lr-dim {
    animation: lr-fade 200ms var(--lr-ease) both;
  }
  .lr-dialog {
    animation: lr-rise 200ms var(--lr-ease) both;
  }
  .lr-pill[data-open='true'] {
    animation: lr-fade 120ms var(--lr-ease) both;
  }
}
@keyframes lr-fade {
  from {
    opacity: 0;
  }
}
@keyframes lr-rise {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}

/* ---------- The comment widget, in Lyceum's shape ----------
 * Two parts of SitePing, two ways in:
 *  - the panel and the round button live in a closed shadow root and read their theme from
 *    custom properties on their host element. Square corners and Lyceum's font go there.
 *    (The accent colour is set in review.js, because the widget takes hex only.)
 *  - the comment form, the pins and the tooltip are plain elements with inline styles, so
 *    they need !important. They are found by the attributes the widget gives them.
 * The vendored widget is pinned (vendor/siteping), so these hooks do not move under us. */
siteping-widget {
  --sp-radius: 0px !important;
  --sp-radius-lg: 0px !important;
  --sp-radius-xl: 0px !important;
  --sp-radius-full: 0px !important;
  --sp-font: var(--lyc-font-text, 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif) !important;
}

/* The comment form: a flat White Chip sheet in a Blue Chip frame, like the name prompt. */
div[role='dialog'][data-siteping-ignore] {
  border-radius: 0 !important;
  border: 1px solid var(--lyc-blue-chip, #000114) !important;
  background: var(--lyc-white-chip, #ffffff) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 4px 4px 0 var(--lyc-blue-chip, #000114) !important;
  font-family: var(--lyc-font-text, 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif) !important;
}
div[role='dialog'][data-siteping-ignore] :is(button, textarea) {
  border-radius: 0 !important;
  font-family: inherit !important;
}
div[role='dialog'][data-siteping-ignore] > div:last-child > button:last-child {
  background: var(--lyc-electric, #2f0ac2) !important;
  box-shadow: none !important;
}

/* The frame that shows where a comment is about to go, and the box drawn to select an area. */
body > div[data-siteping-ignore='true']:not([role='dialog']) {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Pins: squares, flat, no spring when they move. Their colour still says the kind. */
#siteping-markers > [data-feedback-id] {
  border-radius: 0 !important;
  background: var(--lyc-white-chip, #ffffff) !important;
  box-shadow: none !important;
  transition: top 200ms var(--lyc-ease-out, ease-out), left 200ms var(--lyc-ease-out, ease-out), transform 150ms ease-out !important;
}
#sp-tooltip {
  border-radius: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  font-family: var(--lyc-font-text, 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif) !important;
}

/* ---------- The review index (public/index.html) ---------- */

.lr-index {
  min-height: 100vh;
  margin: 0;
  padding: 64px 24px;
  background: var(--lyc-white-chip, #ffffff);
}
.lr-index-sheet {
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid var(--lr-ink);
  background: var(--lr-paper);
}
.lr-index-head {
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--lr-rule);
}
.lr-index-head .lr-title {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.015em;
}
.lr-index-head .lr-text {
  margin-top: 8px;
}
.lr-index-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lr-index-item + .lr-index-item {
  border-top: 1px solid var(--lr-rule);
}
.lr-index-link {
  display: block;
  padding: 16px 24px;
  color: var(--lr-ink);
  text-decoration: none;
}
.lr-index-link:focus-visible {
  outline: 1px solid var(--lr-accent);
  outline-offset: -3px;
}
.lr-index-name {
  display: block;
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.lr-index-note {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--lr-muted);
}
.lr-index-path {
  display: block;
  margin-top: 6px;
  font-family: var(--lyc-font-mono, 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace);
  font-size: 12px;
  line-height: 18px;
  color: var(--lr-muted);
}
@media (hover: hover) and (pointer: fine) {
  .lr-index-link:hover {
    background: #f4f4f7;
  }
  .lr-index-link:hover .lr-index-name {
    color: var(--lr-accent);
  }
}
.lr-index-foot {
  padding: 12px 24px;
  border-top: 1px solid var(--lr-rule);
  font-size: 12px;
  line-height: 16px;
  color: var(--lr-muted);
}

@media (max-width: 480px) {
  .lr-chip {
    left: 12px;
    bottom: 12px;
  }
  .lr-dim {
    padding-top: 8vh;
  }
  .lr-index {
    padding: 24px 12px;
  }
}