/* Point of view checker styles */
@layer components {
  .povcheck-page{
    --povcheck-first-color:var(--primary);
    --povcheck-second-color:var(--warning);
    --povcheck-third-color:var(--success);
  }
  .povcheck-top-panel{
    padding:clamp(3.2rem,7vh,4.8rem) 0;
    background:linear-gradient(150deg,
      color-mix(in srgb,var(--surface) 92%, #050b12 8%) 0%,
      color-mix(in srgb,var(--surface) 80%, #050b12 20%) 100%);
    border-bottom:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    box-shadow:0 22px 48px rgba(0,0,0,.32);
  }
  .povcheck-top-panel .wrapper{
    max-width:var(--container-max);
    display:grid;
    gap:clamp(1.2rem,2.4vw,1.8rem);
  }
  .povcheck-top-lead{
    margin:0;
    max-width:68ch;
    color:var(--text-muted);
    font-size:1.05rem;
    line-height:1.75;
  }

  .povcheck-steps{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:clamp(12px,2vw,16px);
  }
  .povcheck-step{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:color-mix(in srgb,var(--surface) 92%, #000 8%);
    box-shadow:0 12px 28px rgba(0,0,0,.26);
  }
  .povcheck-step-number{
    width:36px;
    height:36px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:color-mix(in srgb,#ffffff 94%, var(--bg) 6%);
    background:linear-gradient(135deg,
      color-mix(in srgb,var(--primary) 88%, #ffffff 12%) 0%,
      color-mix(in srgb,var(--primary) 62%, #071219 38%) 100%);
    box-shadow:0 10px 22px rgba(0,0,0,.26);
  }
  .povcheck-step h3{
    margin:0 0 4px;
    font-size:1.05rem;
    letter-spacing:.01em;
  }
  .povcheck-step p{
    margin:0;
    color:var(--text-muted);
    font-size:.98rem;
    line-height:1.6;
  }

  .povcheck-section{
    padding:clamp(2.8rem,6vh,3.8rem) 0;
  }

  .povcheck-card{
    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);
    display:grid;
    gap:14px;
  }
  .povcheck-card h2{
    margin:0 0 6px;
  }
  .povcheck-subtitle{
    margin:0 0 12px;
    color:var(--text-muted);
    font-size:1rem;
  }

  .povcheck-form{
    display:grid;
    gap:12px;
  }
  .povcheck-label{
    display:flex;
    gap:6px;
    align-items:center;
    font-weight:600;
    font-family:'Poppins';
  }
  .povcheck-input-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px 12px;
    flex-wrap:wrap;
  }
  .povcheck-field-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .povcheck-field-btn{
    min-height:34px;
    padding:6px 12px;
    border-radius:10px;
    font-size:.9rem;
  }
  .povcheck-field-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
  }
  .povcheck-input-status{
    margin:0;
    min-height:1.2em;
    color:var(--text-muted);
    font-size:.9rem;
    line-height:1.4;
  }
  .povcheck-input-status[data-tone="success"]{color:var(--success);}
  .povcheck-input-status[data-tone="error"]{color:var(--danger);}
  .povcheck-input-status[data-tone="info"]{color:color-mix(in srgb,var(--primary) 74%, #ffffff 26%);}
  .povcheck-textarea{
    box-sizing:border-box;
    width:100%;
    min-height:240px;
    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;
  }
  .povcheck-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%);
  }
  .povcheck-textarea-compact{
    min-height:110px;
  }
  .povcheck-help{
    margin:-6px 0 0;
    color:var(--text-muted);
    font-size:.92rem;
    line-height:1.6;
  }
  .povcheck-help-tight{
    margin:0;
  }

  .povcheck-mode-switch{
    margin:4px 0 0;
    border:none;
    padding:0;
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    max-width:100%;
    border-radius:999px;
    background:color-mix(in srgb,var(--surface) 92%, #02070d 8%);
    border:1px solid color-mix(in srgb,var(--primary) 20%, transparent);
  }
  .povcheck-mode-option{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .povcheck-mode-option input{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
  }
  .povcheck-mode-option span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:120px;
    min-height:36px;
    padding:0 14px;
    border-radius:999px;
    font-family:'Poppins';
    font-weight:600;
    color:var(--text-muted);
    transition:background .2s ease, color .2s ease;
  }
  .povcheck-mode-option input:checked + span{
    background:linear-gradient(135deg,
      color-mix(in srgb,var(--primary) 88%, #ffffff 12%) 0%,
      color-mix(in srgb,var(--primary) 62%, #071219 38%) 100%);
    color:color-mix(in srgb,#ffffff 94%, var(--bg) 6%);
  }
  .povcheck-advanced{
    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;
  }
  .povcheck-advanced[hidden]{
    display:none !important;
  }
  .povcheck-advanced-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:12px;
  }
  .povcheck-setting{
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--primary) 16%, transparent);
    background:color-mix(in srgb,var(--surface) 96%, #02070d 4%);
    padding:12px;
    display:grid;
    gap:8px;
    align-content:start;
  }
  .povcheck-select,
  .povcheck-text{
    width:100%;
    min-height:38px;
    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;
    padding:8px 10px;
    box-sizing:border-box;
  }
  .povcheck-select:focus,
  .povcheck-text: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);
  }
  .povcheck-presets{
    margin-top:2px;
  }
  .povcheck-preset-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:12px;
    margin-top:12px;
  }
  .povcheck-preset-actions{
    grid-column:1 / -1;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
  }

  .povcheck-controls{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:12px;
  }
  .povcheck-option{
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size:.96rem;
    color:var(--text-muted);
  }
  .povcheck-option input{
    margin-top:4px;
  }
  .povcheck-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
  }
  .povcheck-note{
    margin:4px 0 0;
    color:var(--text-muted);
    font-size:.95rem;
  }

  .povcheck-results-header{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .povcheck-summary{
    margin:0;
    color:var(--text-muted);
    font-size:1rem;
    line-height:1.65;
  }
  .povcheck-summary strong{
    color:var(--text-light);
  }
  .povcheck-results-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
  }
  .povcheck-results-status{
    min-height:1.2em;
    margin:0;
    color:var(--text-muted);
    font-size:.92rem;
    line-height:1.4;
  }
  .povcheck-results-status[data-tone="success"]{color:var(--success);}
  .povcheck-results-status[data-tone="error"]{color:var(--danger);}
  .povcheck-results-status[data-tone="info"]{color:color-mix(in srgb,var(--primary) 74%, #ffffff 26%);}

  .povcheck-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:clamp(12px,2vw,16px);
    margin-top:4px;
    align-items:stretch;
  }
  .povcheck-stat{
    display:flex;
    flex-direction:column;
    gap:10px;
    height:clamp(360px, 52vh, 540px);
    padding:14px 14px 16px;
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:color-mix(in srgb,var(--surface) 96%, #03080f 4%);
    box-shadow:0 12px 26px rgba(0,0,0,.22);
  }
  .povcheck-stat-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .povcheck-stat h3{
    margin:0;
    font-size:1.05rem;
    letter-spacing:.01em;
  }
  .povcheck-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    font-weight:700;
    font-size:.85rem;
    letter-spacing:.01em;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
  }
  .povcheck-badge-muted{
    color:var(--text-muted);
    background:color-mix(in srgb,var(--surface) 92%, #000 8%);
  }
  .povcheck-badge-detected{
    color:color-mix(in srgb,#ffffff 92%, var(--bg) 8%);
    background:linear-gradient(135deg,
      color-mix(in srgb,var(--primary) 88%, #ffffff 12%) 0%,
      color-mix(in srgb,var(--primary) 62%, #071219 38%) 100%);
    box-shadow:0 10px 22px rgba(0,0,0,.18);
  }
  .povcheck-count{
    margin:0;
    font-size:2.2rem;
    font-weight:800;
    letter-spacing:-.02em;
    font-family:'Poppins';
    color:color-mix(in srgb,var(--text-light) 96%, #ffffff 4%);
    line-height:1.05;
  }

  .povcheck-token-list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-content:start;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-gutter:stable;
    padding-right:18px;
  }
  .povcheck-token-pill{
    margin:0;
  }
  .povcheck-token-btn{
    display:flex;
    width:100%;
    max-width:100%;
    min-width:0;
    gap:10px;
    align-items:flex-start;
    justify-content:space-between;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--primary) 14%, transparent);
    background:color-mix(in srgb,var(--surface) 92%, #02070d 8%);
    font-family:'Poppins';
    font-size:1rem;
    font-weight:600;
    letter-spacing:.01em;
    color:var(--text-light);
    text-align:left;
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .povcheck-token-btn:hover{
    border-color:color-mix(in srgb,var(--primary) 28%, transparent);
    background:color-mix(in srgb,var(--surface) 88%, #02070d 12%);
  }
  .povcheck-token-btn[aria-pressed="true"]{
    border-color:color-mix(in srgb,var(--primary) 44%, transparent);
    background:color-mix(in srgb,var(--primary) 20%, #02070d 80%);
    box-shadow:0 8px 18px rgba(0,0,0,.2);
  }
  .povcheck-token{
    flex:1 1 auto;
    min-width:0;
    overflow-wrap:anywhere;
  }
  .povcheck-token-count{
    font-weight:700;
    color:var(--text-muted);
    font-size:.92rem;
    white-space:nowrap;
  }
  .povcheck-token-empty{
    color:var(--text-muted);
    font-size:.95rem;
  }

  .povcheck-output-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-top:10px;
  }
  .povcheck-color-details + .povcheck-output-header{
    margin-top:0;
  }
  .povcheck-output-header h3{
    margin:0;
    font-size:1.05rem;
    letter-spacing:.01em;
  }
  .povcheck-legend{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
  }
  .povcheck-legend-pill{
    font-family:'Poppins';
    font-weight:600;
    letter-spacing:.01em;
    font-size:.9rem;
  }

  .povcheck-color-details{
    margin:0 0 12px;
  }
  .povcheck-color-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:12px;
    margin-top:12px;
  }
  .povcheck-color-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%);
  }
  .povcheck-color-label{
    color:var(--text-muted);
    font-size:.95rem;
  }
  .povcheck-color{
    width:44px;
    height:34px;
    padding:0;
    border-radius:10px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    background:transparent;
  }
  .povcheck-color-actions{
    margin-top:12px;
    display:flex;
    justify-content:flex-end;
  }

  .povcheck-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:240px;
    white-space:pre-wrap;
    word-break:break-word;
    line-height:1.75;
  }
  .povcheck-empty{
    margin:0;
    color:var(--text-muted);
    font-size:.98rem;
  }

  .povcheck-mark{
    display:inline;
    padding:0 4px;
    border-radius:6px;
    border:1px solid transparent;
    background:transparent;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
  }
  .povcheck-mark-first{
    background:color-mix(in srgb,var(--povcheck-first-color) 22%, transparent);
    border-color:color-mix(in srgb,var(--povcheck-first-color) 46%, transparent);
    color:color-mix(in srgb,var(--text-light) 96%, #ffffff 4%);
  }
  .povcheck-mark-second{
    background:color-mix(in srgb,var(--povcheck-second-color) 22%, transparent);
    border-color:color-mix(in srgb,var(--povcheck-second-color) 50%, transparent);
    color:color-mix(in srgb,var(--text-light) 96%, #ffffff 4%);
  }
  .povcheck-mark-third{
    background:color-mix(in srgb,var(--povcheck-third-color) 22%, transparent);
    border-color:color-mix(in srgb,var(--povcheck-third-color) 50%, transparent);
    color:color-mix(in srgb,var(--text-light) 96%, #ffffff 4%);
  }
  .povcheck-mark-focus{
    box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 44%, transparent);
    filter:saturate(1.12);
  }
  .povcheck-mark-dim{
    opacity:.42;
    filter:saturate(.72);
  }

  .povcheck-drift{
    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;
    display:grid;
    gap:10px;
  }
  .povcheck-drift-header{
    display:grid;
    gap:4px;
  }
  .povcheck-drift-header h3{
    margin:0;
    font-size:1.05rem;
    letter-spacing:.01em;
  }
  .povcheck-drift-list{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:8px;
    max-height:280px;
    overflow:auto;
    scrollbar-gutter:stable;
    padding-right:8px;
  }
  .povcheck-drift-item{
    width:100%;
    border-radius:12px;
    border:1px solid color-mix(in srgb,var(--primary) 16%, transparent);
    background:color-mix(in srgb,var(--surface) 96%, #02070d 4%);
    color:var(--text-light);
    text-align:left;
    padding:10px 12px;
    display:grid;
    gap:4px;
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease;
  }
  .povcheck-drift-item:hover{
    border-color:color-mix(in srgb,var(--primary) 30%, transparent);
    background:color-mix(in srgb,var(--surface) 88%, #02070d 12%);
  }
  .povcheck-drift-meta{
    color:var(--text-muted);
    font-size:.84rem;
  }
  .povcheck-drift-snippet{
    color:var(--text-muted);
    font-size:.92rem;
    line-height:1.5;
  }
  .povcheck-drift-pill{
    display:inline-flex;
    width:max-content;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    padding:2px 8px;
    font-size:.78rem;
    font-family:'Poppins';
    font-weight:600;
    letter-spacing:.01em;
  }
  .povcheck-drift-pill-first{
    background:color-mix(in srgb,var(--povcheck-first-color) 22%, transparent);
  }
  .povcheck-drift-pill-second{
    background:color-mix(in srgb,var(--povcheck-second-color) 22%, transparent);
  }
  .povcheck-drift-pill-third{
    background:color-mix(in srgb,var(--povcheck-third-color) 22%, transparent);
  }
  .povcheck-drift-pill-mixed{
    background:color-mix(in srgb,var(--primary) 18%, transparent);
  }
  .povcheck-drift-pill-none{
    background:color-mix(in srgb,var(--surface) 90%, #000 10%);
    color:var(--text-muted);
  }

  .povcheck-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:2px 0 0;
  }
  .povcheck-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%);
  }
  .povcheck-details > summary::-webkit-details-marker{
    display:none;
  }
  .povcheck-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;
  }
  .povcheck-details[open] > summary::before{
    transform:rotate(90deg);
  }
  .povcheck-pronoun-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:12px;
    margin-top:12px;
  }
  .povcheck-pronoun-col{
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--primary) 16%, transparent);
    background:color-mix(in srgb,var(--surface) 96%, #02070d 4%);
    padding:12px 12px 10px;
    display:grid;
    gap:6px;
  }
  .povcheck-pronoun-col h3{
    margin:0;
    font-size:1rem;
    letter-spacing:.01em;
  }
  .povcheck-pronoun-col p{
    margin:0;
    color:var(--text-muted);
    font-size:.94rem;
    line-height:1.6;
  }
  .povcheck-pronoun-col code{
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:.92rem;
    color:color-mix(in srgb,var(--text-light) 96%, #ffffff 4%);
    word-break:break-word;
  }
  .povcheck-pronoun-note{
    color:var(--text-muted);
    font-size:.92rem;
  }

  @media (max-width:760px){
    .povcheck-stat{
      height:auto;
      min-height:300px;
    }
    .povcheck-token-list{
      padding-right:10px;
    }
    .povcheck-results-actions{
      align-items:flex-start;
    }
    .povcheck-mode-switch{
      width:100%;
    }
    .povcheck-mode-option{
      flex:1 1 50%;
    }
    .povcheck-mode-option span{
      width:100%;
      min-width:0;
    }
  }
}