/* ---------------------------------------------------------------------------
   AI Watermark Remover — tool styles
   Loaded after css/styles.css by remove-ai-watermark-from-text.html.
   Everything is scoped under .atc-shell. Plain CSS only: no Tailwind apply
   directives, no imports, no external requests. Layout utilities come from
   styles.css.
   --------------------------------------------------------------------------- */

.atc-shell{
  --atc-ink:#211b32;
  --atc-ink-soft:#625c70;
  --atc-ink-mute:#6b6478;
  --atc-primary:#9181FF;
  --atc-primary-dark:#6a5ae0;
  --atc-primary-deep:#5b4bd4;
  --atc-primary-light:#a799ff;
  --atc-line:#e4e0eb;
  --atc-line-soft:#ece9f1;
  --atc-line-strong:#c9c1d9;
  --atc-tint:#f7f5fb;
  --atc-tint-strong:#f0edff;
  --atc-tint-chip:#f4f1ff;
  --atc-tint-chip-hot:#e9e3ff;
  --atc-tint-chip-on:#ddd4ff;
  --atc-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  max-width:100%;
  color:var(--atc-ink);
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.65;
  overflow-wrap:break-word;
}

.atc-shell *,
.atc-shell *::before,
.atc-shell *::after{box-sizing:border-box}

/* [hidden] must win over the flex/grid displays set below, otherwise a hidden
   warning box would still take up room. */
.atc-shell [hidden]{display:none!important}

.atc-shell button,
.atc-shell input,
.atc-shell textarea{font:inherit;color:inherit}

.atc-shell :focus-visible{outline:3px solid var(--atc-primary);outline-offset:2px}

/* --- layout ---------------------------------------------------------------- */

.atc-shell .atc-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  align-items:stretch;
}

.atc-shell .atc-pane{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:22px;
  border:1px solid var(--atc-line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 1px 2px rgba(33,27,50,.04);
}

/* Both panes share one height; the editors take the slack so the action rows
   line up along the bottom edge. */
.atc-shell .atc-pane > .atc-editor{flex:1 1 auto}

.atc-shell .atc-pane-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 14px;
  margin-bottom:4px;
}

/* A label that sits directly above a textarea in a pane acts as a block
   caption, not as an inline toggle label. */
.atc-shell .atc-pane > .atc-label{
  display:block;
  margin-top:14px;
}

/* The primary action sits in a column of its own, so it must not stretch into
   a full-width banner next to the copy column's compact buttons: auto width,
   left aligned, with a comfortable minimum so it still reads as the CTA. */
.atc-shell .atc-pane > .atc-btn-clean{
  display:inline-flex;
  flex:0 0 auto;
  align-self:flex-start;
  min-width:260px;
  margin-top:14px;
}

.atc-shell .atc-pane-title{
  margin:0;
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  color:#2a2140;
}

.atc-shell .atc-count{
  font-size:12.5px;
  color:var(--atc-ink-mute);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.atc-shell .atc-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:12px;
}

.atc-shell .atc-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
  padding:12px 14px;
  border:1px solid var(--atc-line);
  border-radius:12px;
  background:var(--atc-tint);
}

.atc-shell .atc-toolbar .atc-btn{min-height:40px;padding:8px 13px;font-size:13px}
.atc-shell .atc-toolbar .atc-btn-clean{
  flex:0 1 auto;
  min-height:54px;
  padding:14px 26px;
  font-size:16px;
}
.atc-shell .atc-toolbar .atc-hint{margin:0}

/* --- buttons --------------------------------------------------------------- */

.atc-shell .atc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45em;
  min-height:44px;
  padding:10px 16px;
  border:1px solid var(--atc-line-strong);
  border-radius:10px;
  background:#fff;
  color:#3b2f5e;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease;
}

.atc-shell .atc-btn:hover{background:var(--atc-tint);border-color:#b9aede}
.atc-shell .atc-btn:active{transform:scale(.98)}
.atc-shell .atc-btn:disabled{opacity:.45;cursor:default;transform:none}

.atc-shell .atc-btn-primary{
  border-color:var(--atc-primary-dark);
  background:var(--atc-primary-dark);
  color:#fff;
}
.atc-shell .atc-btn-primary:hover{
  background:var(--atc-primary-deep);
  border-color:var(--atc-primary-deep);
  color:#fff;
}

.atc-shell .atc-btn-ghost{
  border-color:var(--atc-line);
  background:#fff;
  color:var(--atc-ink-soft);
}
.atc-shell .atc-btn-ghost:hover{background:var(--atc-tint);color:#3b2f5e}

/* Main "Clean my text" call to action. */
.atc-shell .atc-btn-clean{
  flex:1 1 auto;
  min-height:54px;
  padding:14px 26px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,var(--atc-primary-dark) 0%,#5f4fd6 55%,var(--atc-primary-deep) 100%);
  color:#fff;
  font-size:16px;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:0 10px 24px -8px rgba(122,106,238,.65),inset 0 2px 0 rgba(255,255,255,.14);
}
.atc-shell .atc-btn-clean:hover{
  background:linear-gradient(135deg,#6152da 0%,#5344c9 55%,#4f41c6 100%);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 14px 30px -8px rgba(122,106,238,.75),inset 0 2px 0 rgba(255,255,255,.14);
}
.atc-shell .atc-btn-clean:active{transform:translateY(0) scale(.99)}

/* --- editor + highlight overlay -------------------------------------------- */

/* A textarea cannot colour individual words, so a same-sized div of marked-up
   text sits UNDER it and the textarea's own text is painted transparent. The
   two layers must be metrically identical or the marks drift off the letters,
   so every metric that moves text is declared once, for both, right here. */

.atc-shell .atc-editor{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  margin:10px 0 0;
  border-radius:12px;
  background:#fff;
}

/* Keeps the tinted output box without letting the textarea hide the marks. */
.atc-shell .atc-editor:has(> .atc-textarea-out){background:#fbfaff}

.atc-shell .atc-pane > .atc-editor{flex:1 1 auto}

.atc-shell .atc-editor > .atc-textarea,
.atc-shell .atc-editor > .atc-hl{
  box-sizing:border-box;
  padding:14px 16px;
  border:1px solid var(--atc-line-strong);
  border-radius:12px;
  font-family:var(--atc-mono);
  font-size:14px;
  line-height:1.75;
  letter-spacing:normal;
  word-spacing:normal;
  tab-size:4;
  white-space:pre-wrap;
  overflow-wrap:break-word;
  /* Both layers always reserve the same scrollbar gutter and use the same thin
     scrollbar, so a scrollbar appearing in one can never re-wrap the other into
     a different line count. Hiding the overlay's scrollbar instead would leave
     it 15px wider than the textarea and the marks would drift. */
  overflow-y:scroll;
  scrollbar-width:thin;
}

.atc-shell .atc-editor > .atc-textarea{
  position:relative;
  z-index:1;
  display:block;
  flex:1 1 auto;
  width:100%;
  min-height:260px;
  margin:0;
  background:transparent;
  color:transparent;
  -webkit-text-fill-color:transparent;
  caret-color:#111827;
  resize:vertical;
  transition:border-color .18s ease,box-shadow .18s ease;
}

.atc-shell .atc-editor > .atc-textarea:focus{
  border-color:var(--atc-primary);
  box-shadow:0 0 0 3px rgba(145,129,255,.18);
}

.atc-shell .atc-editor > .atc-textarea::placeholder{
  color:#5a5464;
  -webkit-text-fill-color:#5a5464;
  opacity:1;
}

/* Selection has to stay readable over the transparent glyphs: a soft purple
   wash on top of the black overlay text reads fine, a solid block would not. */
.atc-shell .atc-editor > .atc-textarea::selection{
  background:rgba(145,129,255,.28);
  color:transparent;
  -webkit-text-fill-color:transparent;
}

.atc-shell .atc-hl{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:auto;
  margin:0;
  border-color:transparent;
  background:transparent;
  color:var(--atc-ink);
  pointer-events:none;
  user-select:none;
  word-break:break-word;
}

/* The overlay's scrollbar sits exactly under the textarea's. It has to keep its
   width (that is what keeps the two layers aligned), so only its colours are
   made transparent; scrolling itself is driven by the textarea. */
.atc-shell .atc-hl{scrollbar-color:transparent transparent}

.atc-shell .atc-editor > .atc-textarea-out{
  border-color:#ddd6ff;
  box-shadow:inset 0 1px 2px rgba(33,27,50,.04);
}

/* --- marks ---------------------------------------------------------------- */

/* Browser marks are yellow by default; every mark the script emits carries a
   variant class, so only the unclassed case is neutralised here. */
.atc-shell .atc-hl mark{
  border-radius:2px;
}

.atc-shell .atc-hl mark:not(.atc-hl-found):not(.atc-hl-fixed){
  background:transparent;
  color:inherit;
}

.atc-shell .atc-hl-found{
  background:#fde7e4;
  color:#8f3529;
  box-shadow:inset 0 -1px 0 #d98a7c;
}

.atc-shell .atc-hl-fixed{
  background:#e2f5e8;
  color:#1b6235;
  box-shadow:inset 0 -1px 0 #78c193;
}

/* An invisible character keeps its own (zero-width or space-width) box so the
   overlay text stays byte-identical to the textarea and nothing shifts. The
   mark therefore has to paint itself without occupying any room. */
.atc-shell .atc-hl-invisible{
  position:relative;
  display:inline;
  padding:0;
  background:transparent;
  box-shadow:none;
  color:inherit;
}

/* Zero-width characters get a thin red tick at their exact position. */
.atc-shell .atc-hl-invisible::after{
  content:"";
  position:absolute;
  left:0;
  top:0.1em;
  width:2px;
  height:1.15em;
  border-radius:1px;
  background:#c0392b;
  pointer-events:none;
}

/* Space-like characters (non-breaking, look-alike) already have width, so the
   mark itself is tinted: the reader sees a red gap instead of a tick. */
.atc-shell .atc-hl-invisible.atc-hl-space{
  background:#f3c4bb;
  box-shadow:inset 0 0 0 1px #dd9488;
  border-radius:1px;
}

.atc-shell .atc-hl-invisible.atc-hl-space::after{content:none}

/* --- legend --------------------------------------------------------------- */

.atc-shell .atc-legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 18px;
  margin:12px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--atc-ink-mute);
}

.atc-shell .atc-legend-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:18px;
}

.atc-shell .atc-legend-item::before{
  content:"";
  flex:0 0 auto;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#e0928a;
}

.atc-shell .atc-legend-found::before{background:#e0928a}

.atc-shell .atc-legend-fixed::before{background:#79c295}

/* --- options (checkbox row) ------------------------------------------------ */

.atc-shell .atc-options{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 22px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--atc-line-soft);
}

.atc-shell .atc-options > .atc-label{
  flex:0 0 auto;
  margin-right:2px;
}

.atc-shell .atc-label{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--atc-ink-soft);
}

.atc-shell .atc-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  font-size:13.5px;
  color:#3b2f5e;
  cursor:pointer;
  user-select:none;
}

/* Four options now share the row, so a label must not wrap mid-phrase. */
.atc-shell .atc-check > span{
  min-width:0;
  white-space:nowrap;
}

.atc-shell .atc-check input{
  flex:0 0 auto;
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--atc-primary-dark);
  cursor:pointer;
}

/* --- summary: what it found and fixed -------------------------------------- */

/* Sits directly under the clean-text box so the answer to "what did it do" is
   readable without scrolling. Nothing-checked-yet and all-clean get their own
   tints; a normal run is the light purple panel. */
.atc-shell .atc-summary{
  min-width:0;
  margin-top:12px;
  padding:14px 16px;
  border:1px solid #ddd6ff;
  border-radius:12px;
  background:var(--atc-tint-strong);
}

.atc-shell .atc-summary-title{
  margin:0;
  font-size:16px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.005em;
  color:#1d1730;
  overflow-wrap:anywhere;
}

.atc-shell .atc-summary.is-clean{
  border-color:#c3e6d2;
  background:#f2faf5;
}

.atc-shell .atc-summary.is-clean .atc-summary-title{color:#1b6235}

.atc-shell .atc-summary.is-empty{
  border-color:var(--atc-line);
  background:var(--atc-tint);
}

.atc-shell .atc-summary.is-empty .atc-summary-title{color:var(--atc-ink-soft)}

.atc-shell .atc-summary-list{
  display:grid;
  gap:5px;
  margin:9px 0 0;
  padding-left:0;
  list-style:none;
  font-size:13.5px;
  line-height:1.5;
  color:#3b2f5e;
}

.atc-shell .atc-summary-list li{
  position:relative;
  min-width:0;
  padding-left:17px;
  overflow-wrap:anywhere;
}

.atc-shell .atc-summary-list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.55em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--atc-primary-dark);
}

.atc-shell .atc-summary-list:empty{display:none}

.atc-shell .atc-summary.is-clean .atc-summary-list li::before{background:#2f9e5f}

/* The undo chips live inside the panel now. */
.atc-shell .atc-summary .atc-chips{margin-top:11px}

/* --- style flags: advice, not a result ------------------------------------- */

/* Deliberately the opposite of the summary panel: that one is a purple (or
   green) result card, this one is a quiet warm-grey note with an amber edge, so
   nobody reads "style choice" as "fixed". */
.atc-shell .atc-flags-card{
  min-width:0;
  margin-top:14px;
  padding:13px 15px;
  border:1px solid #e7e0d2;
  border-left:3px solid #d9c08a;
  border-radius:12px;
  background:#fcfbf7;
}

/* [hidden] is handled once for the whole shell near the top of this file. */
.atc-shell .atc-flags-title{
  margin:0;
  font-size:13.5px;
  font-weight:700;
  line-height:1.4;
  color:#544a38;
  overflow-wrap:anywhere;
}

.atc-shell .atc-flags{
  display:grid;
  gap:6px;
  margin:9px 0 0;
  padding-left:0;
  list-style:none;
}

.atc-shell .atc-flag{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:3px 8px;
  min-width:0;
  font-size:13px;
  line-height:1.5;
  color:#4f473a;
  overflow-wrap:anywhere;
}

.atc-shell .atc-flag-word{
  flex:0 0 auto;
  max-width:100%;
  padding:1px 8px;
  border:1px solid #e7dcc4;
  border-radius:999px;
  background:#f5eeda;
  color:#5d4a1f;
  font-family:var(--atc-mono);
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.atc-shell .atc-flag-note{
  min-width:0;
  font-size:12.5px;
  color:#7d7566;
}

.atc-shell .atc-flags-card .atc-hint{
  margin-top:9px;
  font-size:12px;
  color:#87806f;
}

/* --- rewritten phrase chips ------------------------------------------------- */

.atc-shell .atc-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:8px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}

.atc-shell .atc-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35em;
  min-height:36px;
  padding:6px 12px;
  border:1px solid #ddd6ff;
  border-radius:999px;
  background:var(--atc-tint-chip);
  color:#5c4fc0;
  font-family:var(--atc-mono);
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  text-align:left;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .12s ease;
}

.atc-shell .atc-chip:hover{
  background:var(--atc-tint-chip-hot);
  border-color:#b9aede;
  color:#43349f;
}
.atc-shell .atc-chip:active{transform:scale(.97)}
.atc-shell .atc-chip:focus-visible{
  outline:3px solid var(--atc-primary);
  outline-offset:2px;
}

/* A chip that was switched off: the phrase the reader put back. */
.atc-shell .atc-chip-on{
  border-color:var(--atc-primary-dark);
  background:var(--atc-tint-chip-on);
  color:#32279a;
  box-shadow:inset 0 0 0 1px rgba(106,90,224,.35);
}

.atc-shell .atc-chip-on:hover{
  background:#d3c8ff;
  color:#2b2189;
}

.atc-shell .atc-chips:empty{display:none}

/* --- subcards (preview) ---------------------------------------------------- */

.atc-shell .atc-subcard{
  min-width:0;
  margin-top:20px;
  padding:18px 20px;
  border:1px solid var(--atc-line);
  border-radius:12px;
  background:var(--atc-tint);
}

.atc-shell .atc-subcard-title{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:6px 12px;
  margin:0 0 8px;
  font-size:13px;
  font-weight:700;
  color:#3b2f5e;
}

/* The preview card carries a title and a hint, so it looks broken when the
   script hides the <pre> for lack of text. Hide the whole card until there is
   something to preview. */
.atc-shell .atc-subcard:has(> .atc-pre[hidden]){display:none}

/* --- preview / status / warn ----------------------------------------------- */

.atc-shell .atc-pre{
  max-width:100%;
  margin:8px 0 0;
  padding:12px 13px;
  border:1px solid var(--atc-line);
  border-radius:9px;
  background:#fff;
  color:var(--atc-ink);
  font-family:var(--atc-mono);
  font-size:13px;
  line-height:1.7;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.atc-shell .atc-copyrow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:10px;
}

/* The status line is the last text in the copy pane but a hint follows it, so
   nothing to pin. Measured at 1024/1440: both panes end on the same baseline
   (left ends on the accent button, right ends on the hint). */

.atc-shell .atc-status{
  min-height:1.4em;
  margin:16px 0 0;
  font-size:13.5px;
  font-weight:600;
  color:#5b43b8;
}

.atc-shell .atc-warn{
  max-width:100%;
  margin:16px 0 0;
  padding:11px 14px;
  border:1px solid #f0d9a8;
  border-radius:10px;
  background:#fff8e6;
  color:#6b4e13;
  font-size:13px;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.atc-shell .atc-badge{
  display:inline-flex;
  align-items:center;
  gap:.3em;
  padding:3px 9px;
  border:1px solid #ddd6ff;
  border-radius:999px;
  background:var(--atc-tint-strong);
  color:#5b43b8;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}

.atc-shell .atc-hint{
  margin:8px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--atc-ink-mute);
}

/* --- responsive / motion / print ------------------------------------------- */

@media (min-width:1024px){
  .atc-shell .atc-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
  }
}

/* Touch sizing up to the two-pane breakpoint: tablets below 1024 get the same
   44px targets as phones, because they are tapped with a finger too. The panes
   are stacked full width here, so the main action spans the pane. */
@media (max-width:1023px){
  .atc-shell .atc-check{min-height:44px}
  .atc-shell .atc-chip{min-height:44px;padding:8px 14px;font-size:12.5px}
  .atc-shell .atc-pane > .atc-btn-clean{width:100%;min-width:0}
}

@media (max-width:700px){
  .atc-shell .atc-pane{padding:16px}
  .atc-shell .atc-options{gap:2px 16px}
  .atc-shell .atc-summary{padding:12px 13px;margin-top:10px}
  .atc-shell .atc-summary-title{font-size:15px}
  .atc-shell .atc-summary-list{font-size:13px;margin-top:8px}
  .atc-shell .atc-flags-card{padding:11px 12px;margin-top:12px}
  .atc-shell .atc-flags-title{font-size:13px}
  .atc-shell .atc-flag{font-size:12.5px}
  /* On a phone the note is always too long to sit beside the pill, so stack
     them every time instead of letting some rows wrap and others not. */
  .atc-shell .atc-flag{flex-direction:column;align-items:flex-start;gap:2px}
  .atc-shell .atc-actions,
  .atc-shell .atc-copyrow{gap:10px}
  /* Small buttons keep their own width and wrap two-up; only the main call to
     action and the copy pair take the full row. Three stacked banner-width
     buttons made the pane twice as tall as it needed to be. */
  .atc-shell .atc-actions .atc-btn{flex:0 1 auto}
  .atc-shell .atc-copyrow .atc-btn{flex:1 1 auto;min-width:0}
  .atc-shell .atc-toolbar .atc-btn-clean{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .atc-shell *{
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}

@media print{
  .atc-shell .atc-toolbar,
  .atc-shell .atc-actions,
  .atc-shell .atc-copyrow,
  .atc-shell .atc-status,
  .atc-shell .atc-hl,
  .atc-shell .atc-legend{display:none!important}
  .atc-shell .atc-pane{
    padding:0;
    border:0;
    box-shadow:none;
    break-inside:avoid;
  }
  /* On paper the transparent textarea text would print blank, so hand the
     colour back and drop the overlay instead. */
  .atc-shell .atc-editor > .atc-textarea{
    border-color:#ccc;
    color:var(--atc-ink);
    -webkit-text-fill-color:currentColor;
    resize:none;
  }
}