/* Text compare tool */
@layer components {
  body[data-page="text-compare"] .hero-eyebrow{
    opacity:1;
    transform:none;
    animation:none;
  }

  body[data-page="text-compare"]{
    --textcompare-ins-bg:#00FF00;
    --textcompare-ins-text:#000000;
    --textcompare-del-bg:#FF0000;
    --textcompare-del-text:#000000;
    --textcompare-del-strike:#000000;
  }

  .textcompare-top-panel{
    padding:clamp(2.6rem,5.5vh,3.8rem) 0;
    background:linear-gradient(140deg,
      color-mix(in srgb,var(--surface) 92%, #040910 8%) 0%,
      color-mix(in srgb,var(--surface) 80%, #040910 20%) 100%);
    border-bottom:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    box-shadow:0 22px 48px rgba(0,0,0,.32);
  }
  .textcompare-top-panel .wrapper{
    max-width:var(--container-max);
    display:grid;
    gap:clamp(.9rem,1.8vw,1.3rem);
  }
  .textcompare-top-panel h1{
    margin:0;
  }
  .textcompare-top-lead{
    margin:0;
    max-width:78ch;
    color:var(--text-muted);
    font-size:1.05rem;
    line-height:1.7;
  }

  .textcompare-legend{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin:0 0 6px;
  }
  .diff-pill{
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:color-mix(in srgb,var(--surface) 92%, #000 8%);
    font-weight:700;
    font-size:.92rem;
    letter-spacing:.01em;
  }
  .diff-pill-ins{
    border-color:color-mix(in srgb,#2fbf71 50%, transparent);
  }
  .diff-pill-del{
    border-color:color-mix(in srgb,#ff5d5d 46%, transparent);
  }
  .diff-pill-rep{
    border-color:color-mix(in srgb,var(--primary) 42%, transparent);
  }

  .textcompare-section{
    padding:clamp(2.2rem,5vh,3.2rem) 0;
  }

  .textcompare-card{
    width:100%;
    box-sizing:border-box;
    background:linear-gradient(150deg,
      color-mix(in srgb,var(--surface) 92%, #050b12 8%) 0%,
      color-mix(in srgb,var(--surface) 84%, #050b12 16%) 100%);
    border:1px solid color-mix(in srgb,var(--primary) 22%, transparent);
    border-radius:18px;
    padding:clamp(1.4rem,2.4vw,1.9rem);
    box-shadow:0 18px 36px rgba(0,0,0,.32);
  }

  .textcompare-card h2{
    margin:0 0 6px;
  }

  .textcompare-subtitle{
    margin:0 0 16px;
    color:var(--text-muted);
    font-size:1rem;
  }

  .textcompare-form{
    display:grid;
    gap:16px;
  }

  .textcompare-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    align-items:start;
  }

  .textcompare-field{
    display:grid;
    gap:10px;
  }

  .textcompare-label{
    display:flex;
    align-items:center;
    gap:6px;
    font-weight:600;
    font-family:'Poppins';
  }

  .textcompare-field-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px 12px;
    flex-wrap:wrap;
  }

  .textcompare-field-actions{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .textcompare-field-btn{
    min-height:34px;
    padding:6px 12px;
    border-radius:10px;
    font-size:.9rem;
  }

  .textcompare-field-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
  }

  .textcompare-field-status{
    margin:0;
    min-height:1.2em;
    color:var(--text-muted);
    font-size:.9rem;
    line-height:1.4;
  }
  .textcompare-field-status[data-tone="success"]{color:var(--success);}
  .textcompare-field-status[data-tone="error"]{color:var(--danger);}
  .textcompare-field-status[data-tone="info"]{color:color-mix(in srgb,var(--primary) 74%, #ffffff 26%);}

  .textcompare-textarea{
    box-sizing:border-box;
    width:100%;
    min-height:280px;
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--primary) 26%, transparent);
    background:color-mix(in srgb,var(--surface) 94%, #02070d 6%);
    color:color-mix(in srgb,var(--text-light) 96%, #ffffff 4%);
    padding:16px 18px;
    font:inherit;
    resize:vertical;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .textcompare-textarea:focus{
    outline:none;
    border-color:color-mix(in srgb,var(--primary) 46%, transparent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 28%, transparent);
    background:color-mix(in srgb,var(--surface) 98%, #02070d 2%);
  }

  .textcompare-controls{
    display:grid;
    gap:12px;
  }

  .textcompare-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
  }

  .textcompare-note{
    margin:0;
    color:var(--text-muted);
    font-size:.96rem;
    max-width:72ch;
  }

  .textcompare-results-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:12px;
  }
  .textcompare-results-title{
    display:grid;
    gap:4px;
    min-width:min(360px, 100%);
  }
  .textcompare-summary{
    margin:0;
    color:var(--text-muted);
    font-size:1rem;
  }
  .textcompare-results-actions{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
  }
  .textcompare-copy-status{
    color:var(--text-muted);
    font-size:.95rem;
    min-height:1.1em;
  }
  .textcompare-copy-status[data-tone="success"]{color:var(--success);}
  .textcompare-copy-status[data-tone="error"]{color:var(--danger);}

  .textcompare-format-details{
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:color-mix(in srgb,var(--surface) 94%, #03080f 6%);
    padding:12px 14px;
    margin:0 0 12px;
  }
  .textcompare-format-details > summary{
    cursor:pointer;
    list-style:none;
    font-family:'Poppins';
    font-weight:600;
    letter-spacing:.01em;
    color:color-mix(in srgb,var(--text-light) 92%, #ffffff 8%);
  }
  .textcompare-format-details > summary::-webkit-details-marker{
    display:none;
  }
  .textcompare-format-details > summary::before{
    content:"▸";
    display:inline-block;
    width:1em;
    margin-right:6px;
    color:color-mix(in srgb,var(--primary) 78%, #ffffff 22%);
    transition:transform .2s ease;
  }
  .textcompare-format-details[open] > summary::before{
    transform:rotate(90deg);
  }
  .textcompare-format-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:12px;
    margin-top:12px;
  }
  .textcompare-format-field{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid color-mix(in srgb,var(--primary) 16%, transparent);
    background:color-mix(in srgb,var(--surface) 96%, #02070d 4%);
  }
  .textcompare-format-label{
    color:var(--text-muted);
    font-size:.95rem;
  }
  .textcompare-color{
    width:44px;
    height:34px;
    padding:0;
    border-radius:10px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:transparent;
  }
  .textcompare-number{
    width:96px;
    height:34px;
    padding:0 10px;
    border-radius:10px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:color-mix(in srgb,var(--surface) 92%, #02070d 8%);
    color:color-mix(in srgb,var(--text-light) 96%, #ffffff 4%);
    font:inherit;
    text-align:right;
  }
  .textcompare-number:focus{
    outline:none;
    border-color:color-mix(in srgb,var(--primary) 46%, transparent);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 28%, transparent);
  }
  .textcompare-format-hint{
    margin:10px 0 0;
    color:var(--text-muted);
    font-size:.95rem;
    line-height:1.6;
  }

  .textcompare-output{
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:color-mix(in srgb,var(--surface) 94%, #02070d 6%);
    padding:18px 18px;
    min-height:220px;
    white-space:pre-wrap;
    line-height:1.7;
    overflow:auto;
    max-height:min(680px, 70vh);
  }

  .textcompare-empty{
    margin:0;
    color:var(--text-muted);
  }

  .textcompare-output .diff-ins{
    background:var(--textcompare-ins-bg);
    border:1px solid color-mix(in srgb,var(--textcompare-ins-bg) 72%, #000 28%);
    color:var(--textcompare-ins-text);
    padding:1px 3px;
    border-radius:7px;
    text-decoration:none;
  }

  .textcompare-output .diff-del{
    background:var(--textcompare-del-bg);
    border:1px solid color-mix(in srgb,var(--textcompare-del-bg) 72%, #000 28%);
    color:var(--textcompare-del-text);
    padding:1px 3px;
    border-radius:7px;
    text-decoration:line-through;
    text-decoration-color:var(--textcompare-del-strike);
    text-decoration-thickness:2px;
  }

  .textcompare-output .diff-move{
    box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--primary) 48%, #ffffff 52%);
  }
  .textcompare-output [data-move-role="from"]{
    border-style:dashed;
  }
  .textcompare-output [data-move-role="to"]{
    border-style:dotted;
  }

  .textcompare-output .diff-char-ins{
    background:color-mix(in srgb,var(--textcompare-ins-bg) 82%, #fff 18%);
    border-radius:6px;
    padding:0 1px;
  }
  .textcompare-output .diff-char-del{
    background:color-mix(in srgb,var(--textcompare-del-bg) 82%, #fff 18%);
    border-radius:6px;
    padding:0 1px;
  }

  @media (max-width:860px){
    .textcompare-grid{
      grid-template-columns:1fr;
    }
    .textcompare-controls{
      align-items:flex-start;
    }
    .textcompare-field-head{
      align-items:flex-start;
    }
    .textcompare-field-actions{
      width:100%;
      justify-content:flex-start;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .textcompare-textarea{
      transition:none !important;
    }
    .textcompare-format-details > summary::before{
      transition:none !important;
    }
  }
}