/* =========================================================
   炎上予防チェッカー - Business UI Theme
   File: css/style.css
   Notes:
   - 落ち着いたネイビー基調 + 余白多め + 角丸控えめ
   - アクセントは青（Primary）/ グレー（Neutral）
   - ハイライトはカテゴリ別に淡色（本文が読める範囲）
========================================================= */

:root{
  /* Base */
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #f2f4f8;
  --border: #d8dee9;
  --text: #0b1220;
  --muted: #5b677a;

  /* Brand / Accent */
  --primary: #1f4ed8;        /* business blue */
  --primary-600: #1b43bb;
  --primary-700: #163796;
  --primary-soft: #e8efff;

  --danger: #b42318;
  --warning: #b25e09;
  --success: #027a48;

  /* Shadows / radius */
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
  --radius: 14px;
  --radius-sm: 10px;

  /* Typography */
  --font: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;

  /* Highlight swatches (淡色) */
  --hl-blame: #fde2e2;        /* red-ish */
  --hl-assertive: #ffe8cc;    /* orange */
  --hl-command: #fff3bf;      /* yellow */
  --hl-ultimatum: #ffd6e7;    /* pink */
  --hl-emph: #e7e3ff;         /* lavender */
  --hl-cushion: #d3f9d8;      /* green */
  --hl-soften: #dbeafe;       /* blue */
  --hl-appreciation: #e7f5ff; /* light cyan */

  /* Chips */
  --chip-border: rgba(15, 23, 42, 0.14);
  --chip-bg: rgba(255,255,255,0.9);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(1200px 500px at 20% 0%, rgba(31, 78, 216, 0.08), transparent 60%),
              radial-gradient(900px 400px at 90% 10%, rgba(2, 122, 72, 0.06), transparent 55%),
              var(--bg);
}

/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */
.app-header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.app-header__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
}

.brand__mark{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #3b82f6);
  box-shadow: var(--shadow-sm);
  font-weight: 800;
}

.brand__title{
  font-weight: 800;
  letter-spacing: 0.2px;
}

.brand__subtitle{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

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

/* ---------------------------------------------------------
   Layout
--------------------------------------------------------- */
.app-main{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px;
}

.layout{
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .brand__subtitle{ display: none; }
}

/* ---------------------------------------------------------
   Panels / Cards
--------------------------------------------------------- */
.panel{
  background: var(--surface);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.panel__section{
  padding: 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.panel__section:last-child{ border-bottom: 0; }

.card{
  background: var(--surface);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 12px;
}

.card--muted{
  background: rgba(255,255,255,0.6);
  border-style: dashed;
}

.card__header{
  padding: 14px 14px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.card__title{
  font-weight: 800;
  letter-spacing: 0.2px;
}

.card__subtitle{
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 2px;
}

.card__actions{
  display: flex;
  gap: 8px;
  align-items: center;
}

.card__body{
  padding: 14px;
}

/* ---------------------------------------------------------
   Typography helpers
--------------------------------------------------------- */
.section-title{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: rgba(11, 18, 32, 0.9);
  text-transform: uppercase;
  margin: 0 0 10px;
}

.sub{ color: var(--muted); }
.muted{ color: var(--muted); }
.small{ font-size: 12.5px; }
.note{
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: rgba(31, 78, 216, 0.05);
  color: rgba(11, 18, 32, 0.85);
  font-size: 12.5px;
}

/* ---------------------------------------------------------
   Form controls
--------------------------------------------------------- */
.field{ display: grid; gap: 6px; margin-bottom: 10px; }
.field__label{
  font-size: 12.5px;
  color: rgba(11, 18, 32, 0.8);
  font-weight: 700;
}
.field__help{
  font-size: 12px;
  color: var(--muted);
}

.input{
  width: 100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #fff;
  color: var(--text);
  outline: none;
}
.input:focus{
  border-color: rgba(31, 78, 216, 0.55);
  box-shadow: 0 0 0 4px rgba(31, 78, 216, 0.15);
}

.textarea{
  width: 100%;
  min-height: 180px;
  resize: vertical;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  outline: none;
  font-size: 15px;
  line-height: 1.65;
  background: #fff;
  color: var(--text);
}
.textarea:focus{
  border-color: rgba(31, 78, 216, 0.55);
  box-shadow: 0 0 0 4px rgba(31, 78, 216, 0.15);
}

.helper-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.helper-row__left{ display:flex; align-items:center; gap:8px; }
.dot{ opacity: 0.5; }

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
.btn{
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  user-select: none;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: linear-gradient(135deg, var(--primary), #2b6cff);
  color: #fff;
  box-shadow: 0 10px 20px rgba(31, 78, 216, 0.20);
}
.btn--primary:hover{
  background: linear-gradient(135deg, var(--primary-600), #275fe0);
}

.btn--secondary{
  background: #fff;
  border-color: rgba(15, 23, 42, 0.18);
  color: rgba(11, 18, 32, 0.9);
}
.btn--secondary:hover{
  border-color: rgba(31, 78, 216, 0.35);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.btn--ghost{
  background: transparent;
  border-color: rgba(15, 23, 42, 0.12);
  color: rgba(11, 18, 32, 0.9);
}
.btn--ghost:hover{
  background: rgba(31, 78, 216, 0.06);
  border-color: rgba(31, 78, 216, 0.22);
}

/* ---------------------------------------------------------
   Rows / Divider
--------------------------------------------------------- */
.row{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row--between{ justify-content: space-between; }
.divider{
  height: 1px;
  background: rgba(15, 23, 42, 0.08);
  margin: 12px 0;
}

/* ---------------------------------------------------------
   Toggle (checkbox switch)
--------------------------------------------------------- */
.toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  color: rgba(11, 18, 32, 0.9);
  font-size: 12.5px;
  font-weight: 700;
}

.toggle input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle__ui{
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(15, 23, 42, 0.12);
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.toggle__ui::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.14);
  transition: transform 0.15s ease;
}

.toggle input:checked + .toggle__ui{
  background: rgba(31, 78, 216, 0.28);
  border-color: rgba(31, 78, 216, 0.35);
}
.toggle input:checked + .toggle__ui::after{
  transform: translateX(16px);
  background: #fff;
}

.toggle__label{ color: rgba(11, 18, 32, 0.86); }

/* ---------------------------------------------------------
   Chips (filters & rewrite causes)
--------------------------------------------------------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }

.chip-check{ display:inline-flex; align-items:center; }
.chip-check input{ position:absolute; opacity:0; pointer-events:none; }

.chip-check__ui{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.06s ease;
}
.chip-check__ui:active{ transform: translateY(1px); }
.chip-check input:not(:checked) + .chip-check__ui{
  opacity: 0.55;
  background: rgba(255,255,255,0.6);
}

.chip{
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.chip:hover{ background: rgba(31, 78, 216, 0.06); border-color: rgba(31, 78, 216, 0.22); }
.copy{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Filter chip colors */
.chip--blame{ background: var(--hl-blame); border-color: rgba(180, 35, 24, 0.25); }
.chip--assertive{ background: var(--hl-assertive); border-color: rgba(178, 94, 9, 0.25); }
.chip--command{ background: var(--hl-command); border-color: rgba(178, 94, 9, 0.20); }
.chip--ultimatum{ background: var(--hl-ultimatum); border-color: rgba(180, 35, 24, 0.18); }
.chip--emph{ background: var(--hl-emph); border-color: rgba(31, 78, 216, 0.22); }
.chip--cushion{ background: var(--hl-cushion); border-color: rgba(2, 122, 72, 0.22); }
.chip--soften{ background: var(--hl-soften); border-color: rgba(31, 78, 216, 0.18); }
.chip--appreciation{ background: var(--hl-appreciation); border-color: rgba(31, 78, 216, 0.14); }

/* ---------------------------------------------------------
   Legend
--------------------------------------------------------- */
.legend{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  font-size: 12.5px;
  color: rgba(11, 18, 32, 0.85);
}
.legend__item{ display:flex; align-items:center; gap:8px; }
.legend__swatch{
  width: 14px; height: 14px; border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, 0.10);
}

.swatch--blame{ background: var(--hl-blame); }
.swatch--assertive{ background: var(--hl-assertive); }
.swatch--command{ background: var(--hl-command); }
.swatch--ultimatum{ background: var(--hl-ultimatum); }
.swatch--emph{ background: var(--hl-emph); }
.swatch--cushion{ background: var(--hl-cushion); }
.swatch--soften{ background: var(--hl-soften); }
.swatch--appreciation{ background: var(--hl-appreciation); }

/* ---------------------------------------------------------
   Summary KPI + bar
--------------------------------------------------------- */
.summary{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  align-items: center;
}
@media (max-width: 760px){
  .summary{ grid-template-columns: 1fr; }
}

.kpi__value{
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.8px;
}
.kpi__label{
  color: var(--muted);
  font-weight: 800;
  margin-top: 2px;
}

.bar{
  height: 16px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.10);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.10);
}
.bar__fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(2, 122, 72, 0.65), rgba(178, 94, 9, 0.65), rgba(180, 35, 24, 0.70));
  transition: width 0.25s ease;
}

.bar__ticks{
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}

.summary__meta{
  grid-column: 1 / -1;
  margin-top: 6px;
  color: rgba(11, 18, 32, 0.88);
  font-size: 12.5px;
}
.pill{
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255,255,255,0.9);
  margin: 6px 8px 0 0;
  font-size: 12px;
  font-weight: 800;
}

/* ---------------------------------------------------------
   Preview + Highlight spans
--------------------------------------------------------- */
.preview{
  white-space: pre-wrap;
  line-height: 1.75;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.hl{ padding: 0 2px; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.hl-blame{ background: var(--hl-blame); }
.hl-assertive{ background: var(--hl-assertive); }
.hl-command{ background: var(--hl-command); }
.hl-ultimatum{ background: var(--hl-ultimatum); }
.hl-emph{ background: var(--hl-emph); }
.hl-cushion{ background: var(--hl-cushion); }
.hl-soften{ background: var(--hl-soften); }
.hl-appreciation{ background: var(--hl-appreciation); }

/* ---------------------------------------------------------
   Evidence
--------------------------------------------------------- */
.evidence{
  display: grid;
  gap: 10px;
}
.evidence b{
  display:inline-block;
  margin-bottom: 6px;
}
.evidence .pill{ background: rgba(255,255,255,0.95); }

/* ---------------------------------------------------------
   Rewrite list
--------------------------------------------------------- */
.rewrite-list{
  margin: 10px 0 0 18px;
  padding: 0;
}
.rewrite-list li{
  margin: 10px 0;
  padding: 10px 10px 8px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.rewrite-list pre,
.rewrite-list .proposal{
  white-space: pre-wrap;
  margin: 8px 0 0;
  font-family: var(--font);
  color: rgba(11, 18, 32, 0.92);
}

/* ---------------------------------------------------------
   Scrollbar (subtle)
--------------------------------------------------------- */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{
  background: rgba(15, 23, 42, 0.16);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.9);
}
*::-webkit-scrollbar-track{ background: transparent; }