@import url("./tokens.css");

/* RevLearning — Inclusive Language Checker (Standalone) */

*{box-sizing:border-box}
html { height: 100%; background: var(--bg); }
body { min-height: 100vh; }

body{
  margin:0; font-family:var(--font); color:var(--text);
  background: var(--bg);
}
.app-shell{width:min(var(--shell-max),calc(100% - 36px)); margin:0 auto;}
.app-header{padding:26px 0 18px; border-bottom:1px solid var(--border); background: var(--panel-2);}
.brand{display:flex; gap:14px; align-items:center;}
.brand-mark{width:44px; height:44px; border-radius: var(--radius); background: var(--accent);
  box-shadow:var(--shadow); border:1px solid rgba(255,255,255,0.14);
}
.brand-text h1{margin:0; font-size:20px; font-weight:800; letter-spacing:.2px;}
.brand-text p{margin:3px 0 0; color:var(--muted); font-size:13px; line-height:1.35;}

.layout{display:grid; grid-template-columns:1.1fr .9fr; gap:22px; padding:24px 0 34px;}
@media (max-width:980px){ .layout{grid-template-columns:1fr;} }

.card{
  background: var(--panel);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.card-head{padding:18px 18px 10px; border-bottom:1px solid var(--border); background:rgba(0,0,0,.10);}
.card-head h2{margin:0; font-size:15px; font-weight:800;}
.muted{color:var(--muted); font-size:13px; margin:6px 0 0;}

.field{padding:16px 18px 10px;}
.field label{display:block; font-size:12px; color:var(--muted); margin:0 0 8px;}
textarea{
  width:100%; min-height:180px; resize:vertical;
  border-radius:var(--radiusSm); border:1px solid var(--border2);
  background:var(--panel2); color:var(--text);
  padding:12px; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:13px; line-height:1.5; outline:none;
}
textarea:focus{box-shadow:0 0 0 4px var(--focus); border-color:color-mix(in srgb, var(--accent) 65%, transparent);}

.controls{padding:6px 18px 18px; display:grid; gap:14px;}
.group{display:grid; gap:10px;}
.label{font-size:12px; color:var(--muted); user-select:none;}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.seg{
  display:flex; gap:10px; align-items:center;
  padding:10px; border-radius:var(--radiusSm);
  background:rgba(255,255,255,.03); border:1px solid var(--border);
  cursor:pointer; user-select:none;
}
.seg:hover{border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.05);}
.seg input{accent-color:var(--accent);}
.seg span{font-size:13px;}

select, input[type="number"]{
  width:100%; border-radius:var(--radiusSm); border:1px solid var(--border2);
  background:var(--panel2); color:var(--text);
  padding:10px; font-size:13px; outline:none;
}
select:focus,input[type="number"]:focus{box-shadow:0 0 0 4px var(--focus); border-color:color-mix(in srgb, var(--accent) 65%, transparent);}

.btn{
  border:1px solid var(--border2); background:var(--btn); color:var(--text);
  padding:10px 12px; border-radius:var(--radiusSm);
  font-size:13px; font-weight:700; cursor:pointer;
  transition:transform .03s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{background:var(--btnh); border-color:rgba(255,255,255,.22);}
.btn:active{transform:translateY(1px);}
.btn.secondary{background:transparent;}
.btn.secondary:hover{background:rgba(255,255,255,.06);}

.toast{
  margin-left:auto; font-size:12px; color:var(--muted);
  padding:8px 10px; border-radius:999px; border:1px solid transparent;
  opacity:0; transform:translateY(-2px);
  transition:opacity .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
  user-select:none;
}
.toast.show{opacity:1; transform:translateY(0); border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06);}
.toast.error{color:#ffd0d0; border-color:rgba(255,93,93,.35); background:rgba(255,93,93,.10);}
.toast.ok{color:#d4ffe8; border-color:color-mix(in srgb, var(--good) 35%, transparent); background:color-mix(in srgb, var(--good) 10%, transparent);}
.toast.warn{color:#fff2d4; border-color:rgba(255,208,122,.35); background:rgba(255,208,122,.10);}

.pills{display:flex; gap:8px; flex-wrap:wrap;}
.pill{font-size:12px; color:var(--muted); padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); user-select:none;}
.pill.good{color:#d4ffe8; border-color:color-mix(in srgb, var(--good) 25%, transparent);}
.pill.warn{color:#fff2d4; border-color:rgba(255,208,122,.25);}
.pill.bad{color:#ffd0d0; border-color:rgba(255,93,93,.25);}

.report{
  padding:14px 18px 18px;
}
.finding{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding:12px 12px;
  margin-top:10px;
}
.finding h3{margin:0; font-size:13px; font-weight:800;}
.finding .meta{margin-top:6px; font-size:12px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap;}
.badge{padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.14); font-size:11px;}
.badge.warn{border-color:rgba(255,208,122,.35); color:#fff2d4; background:rgba(255,208,122,.10);}
.badge.bad{border-color:rgba(255,93,93,.35); color:#ffd0d0; background:rgba(255,93,93,.10);}
.badge.ok{border-color:color-mix(in srgb, var(--good) 35%, transparent); color:#d4ffe8; background:color-mix(in srgb, var(--good) 10%, transparent);}

.snip{
  margin-top:10px;
  padding:10px 10px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.15);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12px;
  white-space:pre-wrap;
}

.footer{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 0 22px; border-top:1px solid var(--border); margin-top:6px;
}
.footer .dot{opacity:.55;}
.hidden{display:none !important;}