/* 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. The appearance reset keeps iOS Safari from
   drawing its native control chrome over the border and label set here. */
.sc-app button {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  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;
  /* Buttons do not inherit text color, and the icon strokes are currentColor. Stated
     here too so the icon survives even when the shared button rule is missing, as on a
     phone holding a stale cached stylesheet. */
  color: var(--md-default-fg-color, currentColor);
}

/* The icon is drawn with borders rather than an SVG. Both a stroked path and filled rects
   rendered as an empty square on iOS Safari while every text button on the same row drew
   normally, and the served markup and styles were verified correct each time. Borders and
   a pseudo-element cannot fail the same way, so the control stops depending on inline SVG
   at all. The word next to it means the button is legible even if the bars ever vanish. */
.sc-bars {
  display: block;
  width: 0.95rem;
  height: 0.7rem;
  position: relative;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.sc-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1px;
  border-top: 2px solid currentColor;
}

.sc-iconbtn-text {
  margin-left: 0.35rem;
}

/* 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-split {
  font-weight: 400;
}

.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.2rem 0.5rem;
  padding: 0.14rem 0;
  flex-wrap: wrap;
}

/* Each finding is two groups: where and what it is, then the change. Keeping them whole
   stops a wrap from stranding the arrow or the replacement on its own line. */
.sc-find-head,
.sc-find-change {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

/* The why line and Keep button stay collapsed until the row is tapped, so the list keeps
   its density and the explanation is one tap away. */
.sc-findings li {
  cursor: pointer;
}

.sc-find-detail {
  display: none;
  flex-basis: 100%;
  align-items: center;
  gap: 0.6rem;
  padding: 0.15rem 0 0.25rem 3.7rem;
}

.sc-findings li.open .sc-find-detail {
  display: flex;
  flex-wrap: wrap;
}

.sc-find-why {
  font-size: 0.7rem;
  opacity: 0.75;
  max-width: 34rem;
}

.md-typeset .sc-findings button.sc-keep {
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--md-accent-fg-color);
  border-radius: 0.9rem;
  background: transparent;
  color: var(--md-accent-fg-color);
  cursor: pointer;
  white-space: nowrap;
}

.md-typeset .sc-findings button.sc-keep:hover {
  background: var(--md-accent-fg-color);
  color: var(--md-accent-bg-color, #fff);
}

@media (max-width: 640px) {
  .sc-find-detail {
    padding-left: 0;
  }
}

.sc-findings code {
  background: var(--md-code-bg-color);
  border-radius: 0.25rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.72rem;
  /* A long match, like a whole stock phrase, wraps inside its own chip rather than
     stretching the row. */
  overflow-wrap: anywhere;
}

.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;
  overflow-wrap: anywhere;
}

.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;
  }
  /* The head is one row on a wide screen. On a phone the title and the controls each
     want the full width, and squeezing them side by side broke the heading onto three
     lines, so they stack instead. */
  .sc-app-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .sc-app-actions {
    justify-content: flex-start;
  }
  /* A phone has no room for one finding on one line, so the change sits under the rule
     that found it and a rule between rows keeps the pairs apart. */
  .sc-findings li {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.35rem 0;
  }
  .sc-findings li + li {
    border-top: 1px solid var(--md-default-fg-color--lightest);
  }
  .sc-findings ul {
    max-height: 20rem;
  }
}