/* slop-chop in-browser chopper on the landing page. */

/* Widen the grid on the page that hosts the app. */
body:has(#sc-app) .md-grid {
  max-width: 76rem;
}

.sc-app {
  position: relative;
  max-width: 68rem;
  margin: 0 auto 2.6rem;
  padding: 1rem 1.1rem 1.2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.7rem;
  background: var(--md-default-bg-color);
  box-shadow: 0 14px 46px rgba(0, 0, 0, 0.18);
}

.sc-app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}

.sc-app-title strong {
  font-size: 1.05rem;
}

.sc-app-note {
  display: block;
  font-size: 0.72rem;
  opacity: 0.65;
}

.sc-app-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* Score chip: input score sets the color. It is a button that opens the breakdown,
   so it out-specifies the shared app button reset. */
.sc-app .sc-score {
  font-family: var(--md-code-font, monospace);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.22rem 0.6rem;
  border-radius: 1rem;
  border: 1px solid transparent;
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
}

/* The after-chop score sits beside the before score to show the improvement. It is not
   clickable, so it drops the pointer cursor. */
.sc-app .sc-score-after {
  cursor: default;
}

/* The breakdown behind the chip. */
.sc-app-actions {
  position: relative;
}

.sc-score-pop {
  position: absolute;
  top: 2.1rem;
  right: 0;
  z-index: 6;
  width: min(21rem, 80vw);
  padding: 0.8rem 0.95rem;
  text-align: left;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.6rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  font-size: 0.76rem;
}

.sc-score-pop-head {
  margin-bottom: 0.35rem;
}

.sc-score-pop-what {
  margin: 0 0 0.55rem;
  opacity: 0.75;
  line-height: 1.45;
}

.sc-score-legend {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.6rem;
  font-size: 0.72rem;
  opacity: 0.85;
}

.sc-score-legend .dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.4rem;
  border-radius: 50%;
}

.sc-score-legend .dot.low { background: var(--sc-lime, #9bcf1a); }
.sc-score-legend .dot.mid { background: #e8b93e; }
.sc-score-legend .dot.high { background: #ff7b72; }

.sc-score-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.7rem;
  margin: 0;
}

.sc-score-stats > div {
  display: contents;
}

.sc-score-stats dt {
  font-weight: 700;
  opacity: 0.7;
}

.sc-score-stats dd {
  margin: 0;
}

.sc-score-low {
  color: var(--sc-lime-bright, #b8f03a);
  border-color: var(--sc-lime, #9bcf1a);
}

.sc-score-mid {
  color: #e8b93e;
  border-color: #b98f2a;
}

.sc-score-high {
  color: #ff7b72;
  border-color: #b3423b;
}

[data-md-color-scheme="default"] .sc-score-low {
  color: #4f7a0c;
}

[data-md-color-scheme="default"] .sc-score-mid {
  color: #93650a;
}

[data-md-color-scheme="default"] .sc-score-high {
  color: #b3261e;
}

/* Buttons share one small, quiet look. */
.sc-app button {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  background: transparent;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.4rem;
  padding: 0.22rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.sc-app button:hover {
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}

.sc-iconbtn {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.45rem;
}

.sc-iconbtn svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

/* The two panes. */
.sc-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

@media (max-width: 900px) {
  .sc-panes {
    grid-template-columns: 1fr;
  }
}

.sc-pane-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.sc-app textarea {
  width: 100%;
  min-height: 320px;
  resize: vertical;
  padding: 0.8rem 0.9rem;
  font-family: var(--md-code-font, monospace);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--md-default-fg-color);
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.sc-app textarea:focus {
  border-color: var(--md-accent-fg-color);
}

/* The input sits on a mirror layer that paints finding highlights behind the text.
   The mirror must match the textarea's box and font metrics exactly so the marks
   line up with the characters above them. */
.sc-editor {
  position: relative;
}

.sc-marks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  margin: 0;
  padding: 0.8rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: var(--md-code-bg-color);
  font-family: var(--md-code-font, monospace);
  font-size: 0.8rem;
  line-height: 1.55;
  color: transparent;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.sc-editor textarea {
  position: relative;
  background: transparent;
}

/* Two mark colors carry the meaning. Input slop is amber, a flag on the junk found.
   Output changes are brand lime, the fixes the engine made, so green reads as good and
   the chopped pane never looks like it still holds slop. */
#sc-marks mark {
  background: rgba(232, 154, 42, 0.34);
  color: transparent;
  padding: 0;
  border-radius: 0.15rem;
}

[data-md-color-scheme="default"] #sc-marks mark {
  background: rgba(214, 126, 12, 0.42);
}

#sc-out-marks mark {
  background: rgba(155, 207, 26, 0.32);
  color: transparent;
  padding: 0;
  border-radius: 0.15rem;
}

[data-md-color-scheme="default"] #sc-out-marks mark {
  background: rgba(155, 207, 26, 0.45);
}

/* Legend that names the two mark colors, so the amber and green are read right the
   first time. Muted and small so it sits under the panes without pulling focus. */
.sc-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.55rem;
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  opacity: 0.7;
}

.sc-swatch {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 0.2rem;
  vertical-align: -0.06rem;
  margin-right: 0.1rem;
}

.sc-swatch-slop {
  background: rgba(232, 154, 42, 0.7);
}

.sc-swatch-fix {
  background: rgba(155, 207, 26, 0.7);
}

/* File drop: the hint floats over the input pane while a file hovers it. It takes no
   pointer events, so the drag counter under it never flickers. */
.sc-editor.sc-dropping textarea {
  border-style: dashed;
  border-color: var(--md-accent-fg-color);
}

.sc-drop-hint {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border-radius: 0.5rem;
  background: rgba(155, 207, 26, 0.12);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

.sc-editor.sc-dropping .sc-drop-hint {
  display: flex;
}

.sc-status {
  margin-top: 0.55rem;
  font-family: var(--md-code-font, monospace);
  font-size: 0.74rem;
  opacity: 0.7;
}

.sc-status.sc-error {
  color: #ff7b72;
  opacity: 1;
}

[data-md-color-scheme="default"] .sc-status.sc-error {
  color: #b3261e;
}

/* Findings under the panes. Material skins a details element as a note admonition,
   so strip its icon and tinted background to keep the card on brand. */
.md-typeset details.sc-findings {
  margin-top: 0.8rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  padding: 0.45rem 0.8rem;
  font-size: 0.76rem;
  background: transparent;
  box-shadow: none;
}

.md-typeset .sc-findings > summary {
  cursor: pointer;
  font-weight: 700;
  background: transparent;
  padding: 0.1rem 0 0.1rem 0.2rem;
}

.md-typeset .sc-findings > summary::before {
  display: none;
}

.sc-findings ul {
  list-style: none;
  margin: 0.5rem 0 0.2rem;
  padding: 0;
  max-height: 16rem;
  overflow: auto;
}

.sc-findings li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.14rem 0;
  flex-wrap: wrap;
}

.sc-findings code {
  background: var(--md-code-bg-color);
  border-radius: 0.25rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.72rem;
}

.sc-pos {
  opacity: 0.6;
  min-width: 3.2rem;
}

.sc-rule {
  color: var(--md-accent-fg-color);
  font-family: var(--md-code-font, monospace);
  font-size: 0.7rem;
}

.sc-arrow {
  opacity: 0.55;
}

.sc-flag {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.55;
}

.sc-more {
  opacity: 0.6;
  font-style: italic;
}

/* Settings drawer, anchored to the app card. */
.sc-drawer {
  position: absolute;
  top: 3.2rem;
  right: 0.9rem;
  z-index: 5;
  width: min(26rem, calc(100% - 1.8rem));
  max-height: 72vh;
  overflow: auto;
  padding: 0.9rem 1rem 1rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.6rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.sc-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.sc-drawer-head strong {
  font-size: 0.9rem;
}

.sc-drawer section {
  margin-bottom: 0.9rem;
}

.sc-drawer h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 0.4rem;
}

.sc-drawer label {
  display: block;
  font-size: 0.78rem;
  margin: 0.18rem 0;
}

.sc-drawer .sc-inline label {
  display: inline-block;
  margin-right: 0.9rem;
}

.sc-drawer input[type="checkbox"],
.sc-drawer input[type="radio"] {
  accent-color: var(--sc-lime, #9bcf1a);
  margin-right: 0.25rem;
}

.sc-field small {
  display: block;
  opacity: 0.6;
  font-size: 0.68rem;
  margin-bottom: 0.15rem;
}

.sc-drawer textarea {
  min-height: 0;
  height: 4.4rem;
  font-size: 0.74rem;
}

.sc-drawer input[type="text"],
.sc-drawer input[type="password"],
.sc-drawer select {
  width: 100%;
  padding: 0.35rem 0.55rem;
  font: inherit;
  font-size: 0.76rem;
  color: var(--md-default-fg-color);
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  outline: none;
}

.sc-drawer input:focus,
.sc-drawer select:focus {
  border-color: var(--md-accent-fg-color);
}

.sc-pane-actions {
  display: flex;
  gap: 0.4rem;
}

.sc-drawer-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.sc-engine {
  margin-left: auto;
  font-family: var(--md-code-font, monospace);
  font-size: 0.66rem;
  opacity: 0.55;
}

/* Small screens: the drawer and the score breakdown become fixed sheets pinned under
   the site header, since anchoring them to the card puts them below the fold. */
@media (max-width: 720px) {
  .sc-app {
    padding: 0.8rem 0.7rem 0.9rem;
  }
  .sc-app-note {
    font-size: 0.66rem;
  }
  .sc-pane-bar {
    flex-wrap: wrap;
    gap: 0.3rem;
  }
  .sc-drawer {
    position: fixed;
    top: 3.6rem;
    left: 0.7rem;
    right: 0.7rem;
    width: auto;
    max-height: calc(100vh - 5rem);
    z-index: 20;
  }
  .sc-score-pop {
    position: fixed;
    top: 3.6rem;
    left: 0.7rem;
    right: 0.7rem;
    width: auto;
    z-index: 20;
  }
}