/* HuHaHo SEO tab — seo.css
 * Mirrors server/public/admin/styles.css tokens, spacing and radii.
 * Every selector is .seo- prefixed per contract §3.6.
 * Reuses: --cream, --cream-2, --ink, --muted, --green, --green-tint,
 * --gold, --amber, --line, --white, --danger, --danger-tint, --ok,
 * --shadow, --radius. Component cadence follows .field-check / .day-pills
 * and .panel / .tag established 2026-08-31 / 2026-09-01. No second language.
 */

/* ---------- Health strip ---------- */
.seo-health{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:22px;
}
.seo-health__card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 18px;
  text-align:center;
}
.seo-health__value{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-size:34px;
  line-height:1;
  color:var(--ink);
}
.seo-health__value--need{ color:var(--ink); }
.seo-health__value--good{ color:var(--ok); }
.seo-health__value--muted{ color:var(--muted); }
.seo-health__label{
  font-size:12.5px;
  color:var(--muted);
  margin-top:6px;
}
.seo-health__hint{
  font-size:11.5px;
  color:var(--muted);
  line-height:1.4;
  margin-top:4px;
}

/* ---------- Grouped collapsible list ---------- */
.seo-groups{ display:flex; flex-direction:column; gap:0; }
.seo-group{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:16px;
  overflow:hidden;
}
.seo-group__head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:var(--cream-2);
  border:0;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  font:inherit;
  text-align:left;
  color:var(--ink);
  transition:background .18s;
}
.seo-group__head:hover{ background:var(--cream); }
.seo-group__head:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--green-tint);
}
.seo-group__title{
  font-weight:700;
  font-size:14px;
  color:var(--ink);
}
.seo-group__meta{
  font-weight:400;
  font-size:12.5px;
  color:var(--muted);
  margin-left:6px;
}
.seo-group__count{
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--muted);
  background:rgba(0,0,0,.06);
  border-radius:999px;
  padding:2px 8px;
}
.seo-group__chevron{
  font-size:18px;
  line-height:1;
  color:var(--muted);
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  flex:0 0 auto;
}
.seo-group__body{
  padding:12px;
  display:grid;
  gap:10px;
  background:var(--white);
}
.seo-group__body[hidden]{ display:none !important; }
.seo-group--collapsed .seo-group__body{ display:none; }
.seo-group--collapsed .seo-group__head{ border-bottom-color:transparent; }
.seo-group__empty{
  text-align:center;
  color:var(--muted);
  padding:18px 12px;
  font-size:13px;
}

/* ---------- Rows (pages) ---------- */
.seo-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
  width:100%;
  text-align:left;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  cursor:pointer;
  transition:border-color .18s, box-shadow .18s, transform .18s, background .18s;
  font:inherit;
  color:inherit;
}
.seo-row:hover{
  border-color:var(--green);
  box-shadow:var(--shadow);
  transform:translateY(-1px);
}
.seo-row:focus-visible{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-tint);
}
.seo-row__top{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.seo-row__label{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  line-height:1.3;
}
.seo-row__url{
  font-size:12.5px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.seo-row__title{
  color:#1a0dab;
  font-size:15px;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.seo-row__desc{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.5;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  overflow-wrap:anywhere;
}

/* ---------- Severity pills (error / warn / info / clean) ----------
 * Colours reuse the panel's existing status palette, not new ones.
 * Each pill carries its word so colour is never the only signal.
 * Typographic prefix (not emoji) gives a second non-colour cue. */
.seo-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
  vertical-align:middle;
}
.seo-pill::before{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  border-radius:50%;
  font-size:9px;
  font-weight:800;
  line-height:1;
  flex:0 0 auto;
}
.seo-pill--error{
  background:var(--danger-tint);
  color:var(--danger);
  border-color:rgba(192,86,63,.18);
}
.seo-pill--error::before{
  content:"!";
  background:var(--danger);
  color:var(--white);
}
.seo-pill--warn{
  background:#fbf0db;
  color:#9a6b14;
  border-color:rgba(201,154,71,.22);
}
.seo-pill--warn::before{
  content:"!";
  background:var(--gold);
  color:#2c2208;
}
.seo-pill--info{
  background:#e3eef7;
  color:#2f6391;
  border-color:rgba(47,99,145,.14);
}
.seo-pill--info::before{
  content:"i";
  background:#2f6391;
  color:var(--white);
  font-style:italic;
  font-weight:700;
  text-transform:lowercase;
}
.seo-pill--clean,
.seo-pill--good{
  background:var(--green-tint);
  color:#356b45;
  border-color:rgba(79,125,92,.18);
}
.seo-pill--clean::before,
.seo-pill--good::before{
  content:"\2713";
  background:var(--ok);
  color:var(--white);
  font-size:8px;
}

/* ---------- Editor pane (inside .modal) ---------- */
.seo-editor{
  display:flex;
  flex-direction:column;
  gap:0;
}
.seo-editor__head{
  margin-bottom:14px;
}
.seo-editor__title{
  font-family:'Fraunces',Georgia,serif;
  font-weight:500;
  font-size:23px;
  line-height:1.2;
  color:var(--ink);
  margin:0;
}
.seo-editor__url{
  font-size:12.5px;
  color:var(--muted);
  word-break:break-all;
  margin-top:4px;
}
.seo-editor__fields{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:8px;
}
.seo-editor__field{ margin:0; }
.seo-editor__reset{
  display:inline-flex;
  margin:6px 0 0;
}
.seo-editor__reset-hint{
  font-size:11.5px;
  color:var(--muted);
  line-height:1.4;
  margin:4px 0 12px;
  word-break:break-all;
}
.seo-editor__hint{
  font-size:11.5px;
  color:var(--muted);
  line-height:1.4;
  margin:8px 0 14px;
}
.seo-editor__hint--warn{
  color:#a3541c;
  font-weight:600;
}
.seo-editor__foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:22px;
}
.seo-editor__divider{
  height:1px;
  background:var(--line);
  margin:16px 0;
  border:0;
}

/* ---------- SERP preview frame ---------- */
.seo-preview{
  font-family:arial,sans-serif;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  max-width:640px;
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.seo-preview--mobile{
  max-width:390px;
}
.seo-preview__toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--cream-2);
}
.seo-preview__toggle-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.seo-preview__toggle-group{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background:var(--white);
}
.seo-preview__toggle-btn{
  padding:5px 12px;
  border:0;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  background:var(--white);
  color:var(--ink);
  transition:background .15s, color .15s;
}
.seo-preview__toggle-btn + .seo-preview__toggle-btn{
  border-left:1px solid var(--line);
}
.seo-preview__toggle-btn:hover{
  background:var(--cream-2);
}
.seo-preview__toggle-btn--active{
  background:#10221a;
  color:var(--white);
}
.seo-preview__toggle-btn--active:hover{
  background:#10221a;
  color:var(--white);
}
.seo-preview__url{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#4d5156;
  line-height:1.3;
  margin-bottom:6px;
  min-width:0;
}
.seo-preview__favicon{
  flex:0 0 16px;
  width:16px;
  height:16px;
  border-radius:50%;
  overflow:hidden;
  background:var(--cream-2);
  border:1px solid var(--line);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.seo-preview__favicon img{
  width:16px;
  height:16px;
  object-fit:cover;
  display:block;
}
.seo-preview__favicon-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--line);
  display:block;
}
.seo-preview__url-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  flex:1 1 auto;
}
.seo-preview__title{
  color:#1a0dab;
  font-size:20px;
  line-height:1.3;
  font-family:arial,sans-serif;
  font-weight:400;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
.seo-preview--mobile .seo-preview__title{ font-size:18px; }
.seo-preview__desc{
  color:#4d5156;
  font-size:14px;
  line-height:1.58;
  font-family:arial,sans-serif;
  margin-top:4px;
  overflow-wrap:break-word;
  word-break:break-word;
}
.seo-preview__desc--empty{
  font-style:italic;
  opacity:.85;
}
.seo-preview__hint{
  margin-top:10px;
  font-size:11px;
  color:var(--muted);
  line-height:1.4;
}
.seo-preview__hint--warn{
  color:#a3541c;
  font-weight:600;
}
.seo-preview-box{
  margin-bottom:18px;
}

/* ---------- Social card frame ---------- */
.seo-social{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--white);
  max-width:520px;
  font-family:arial,sans-serif;
  box-sizing:border-box;
}
.seo-social--stub{ opacity:1; }
.seo-social__image{
  aspect-ratio:1.91/1;
  background:var(--cream-2);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.seo-social__image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.seo-social__image--placeholder{
  color:var(--muted);
  font-size:12px;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--cream-2);
}
.seo-social__body{
  padding:12px 14px;
  background:var(--white);
}
.seo-social__title{
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  color:#1a0dab;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.seo-social__title--empty{
  opacity:.6;
  font-style:italic;
  color:var(--muted);
}
.seo-social__desc{
  font-size:13px;
  line-height:1.45;
  color:#4d5156;
  margin-top:4px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  overflow-wrap:anywhere;
}
.seo-social__desc--empty{
  opacity:.6;
  font-style:italic;
}
.seo-social__meta{
  font-size:11px;
  color:var(--muted);
  margin-top:8px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.seo-social__note{
  padding:8px 14px;
  background:var(--cream);
  border-top:1px solid var(--line);
  font-size:11px;
  color:var(--muted);
  line-height:1.4;
}

/* ---------- List chrome helpers ---------- */
.seo-intro{
  margin-bottom:18px;
}
.seo-tip{
  background:#f6f8f6;
  border:1px solid var(--line);
  border-left:3px solid var(--green);
  border-radius:10px;
  padding:10px 14px;
  margin:0 0 18px;
  font-size:12.5px;
  color:var(--muted);
}
.seo-tip b{ color:var(--ink); }
.seo-foot-hint{
  font-size:11.5px;
  color:var(--muted);
  line-height:1.4;
  margin-top:10px;
}
.seo-empty{
  text-align:center;
  color:var(--muted);
  padding:46px 20px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.seo-loading{
  text-align:center;
  color:var(--muted);
  padding:50px;
}

/* ---------- Responsive (desktop-first, down to 1024px) ---------- */
@media (max-width:1100px){
  .seo-health{ gap:12px; }
  .seo-health__card{ padding:14px 16px; }
  .seo-health__value{ font-size:30px; }
  .seo-row{ padding:11px 13px; }
  .seo-preview{ max-width:100%; }
  .seo-social{ max-width:100%; }
}
/* ---------- Brand & site-wide (T2.3) — only .seo-brand-* selectors ---------- */
.seo-brand{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:16px;
  overflow:hidden;
}
.seo-brand__body{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.seo-brand__group{
  display:flex;
  flex-direction:column;
  gap:0;
}
.seo-brand__label{
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
}
.seo-brand__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:start;
  margin-top:10px;
}
.seo-brand__divider{
  height:1px;
  background:var(--line);
  border:0;
  margin:0;
}
.seo-brand-dropzone{
  border:2px dashed var(--line);
  border-radius:12px;
  padding:18px 14px;
  text-align:center;
  color:var(--muted);
  background:var(--cream);
  cursor:pointer;
  transition:border-color .18s, background .18s;
  outline:none;
}
.seo-brand-dropzone:hover,
.seo-brand-dropzone:focus-visible{
  border-color:var(--green);
  background:var(--green-tint);
  outline:none;
}
.seo-brand-dropzone.drag{
  border-color:var(--green);
  background:var(--green-tint);
}
.seo-brand-dropzone.busy{
  opacity:.65;
  pointer-events:none;
}
.seo-brand-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:260px;
  background:#e9e7e4;
  border:1px solid #d8d5cf;
  border-radius:9px 9px 0 0;
  padding:7px 10px;
  box-shadow:0 1px 6px rgba(0,0,0,.08);
  font-family:'Inter',system-ui,sans-serif;
  font-size:12.5px;
  color:var(--ink);
  overflow:hidden;
}
.seo-brand-tab__icon{
  flex:0 0 16px;
  width:16px;
  height:16px;
  border-radius:3px;
  overflow:hidden;
  background:var(--white);
  border:1px solid rgba(0,0,0,.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.seo-brand-tab__title{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:500;
}
.seo-brand-tab__close{
  flex:0 0 auto;
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:var(--muted);
  font-size:14px;
  line-height:1;
}
.seo-brand-preview{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:0;
  overflow:hidden;
}
@media (max-width:1100px){
  .seo-brand__grid{ grid-template-columns:1fr; }
  .seo-brand-tab{ max-width:100%; }
}
@media (max-width:1024px){
  .seo-health{ grid-template-columns:1fr; gap:12px; }
  .seo-group__head{ padding:12px 14px; }
  .seo-group__body{ padding:10px; }
  .seo-editor__foot{ flex-wrap:wrap; }
  .seo-preview__toggle{ flex-wrap:wrap; }
  .seo-brand__grid{ grid-template-columns:1fr; }
}