/* Fix: prevent display:flex/grid on elements with [hidden] from overriding visibility */
[hidden] { display: none !important; }

:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #1b1f2a;
  --muted: #5d657a;
  --line: rgba(30, 41, 59, 0.12);
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 6px 16px rgba(15, 23, 42, 0.08);
  --radius: 16px;
  --radius-sm: 12px;
  --accent: #007aff; /* iOS blue */


  /* Accent dynamique (piloté par les filtres) */
  --accent-dynamic: var(--accent);
  --accent-dynamic-border: rgba(0, 122, 255, 0.35);
  --accent-dynamic-ring: rgba(0, 122, 255, 0.10);
}

/* Reset / base */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* HEADER */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(246, 247, 251, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 14px 16px 12px;
}

.header-top{
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

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

.logo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

h1 {
  font-size: 20px;
  margin: 0;
  line-height: 1.1;
}

.subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Language switch */
.lang-switch {
  display: flex;
  gap: 6px;
}

.lang-switch button {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: none;
}

.lang-switch button.active {
  border-color: var(--accent-dynamic-border);
  box-shadow: 0 0 0 3px var(--accent-dynamic-ring);
}

/* SEARCH — now inside list-view content area */
.search-wrap {
  margin: 0 0 10px;
}

#search {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  font-size: 15px;
}

#search:focus {
  outline: none;
  border-color: var(--accent-dynamic-border);
  box-shadow: 0 0 0 4px var(--accent-dynamic-ring),
    var(--shadow-soft);
}

/* FILTERS */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.chip {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chip-icon {
  font-size: 14px;
  line-height: 1;
}

.chip-label {
  line-height: 1;
}

.chip.is-active {
  color: var(--text);
  border-color: var(--accent-dynamic-border);
  box-shadow: 0 0 0 3px var(--accent-dynamic-ring),
    var(--shadow-soft);
}

/* MAIN */
.container {
  max-width: 820px;
  margin: 0 auto;
  padding: 14px 16px 28px;
}

/* META */
.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 12px;
}

.link-btn {
  background: none;
  border: none;
  color: var(--accent-dynamic);
  font-weight: 600;
  cursor: pointer;
}

/* GRID */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* CARDS */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}

.problem-card {
  cursor: pointer;
  transition: transform 0.08s ease,
    box-shadow 0.08s ease;
}

.problem-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
}

.problem-title {
  font-size: 15px;
  margin: 0 0 8px;
  line-height: 1.3;
}

.problem-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.badge {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(0, 122, 255, 0.1);
  color: var(--accent-dynamic);
  border: 1px solid rgba(0, 122, 255, 0.18);
}

.small {
  font-size: 12px;
  color: var(--muted);
}

/* FOOTER */
.footer {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* DETAIL VIEW */
.back-btn {
  background: none;
  border: none;
  color: var(--accent-dynamic);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin: 6px 0 10px;
}

.detail-card {
  padding: 16px;
}

.detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.detail-head h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.badges {
  display: flex;
  gap: 10px;
}

.fav-btn {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

/* SECTIONS */
.section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.section h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.paragraph {
  margin: 0;
  line-height: 1.5;
}

.paragraph.strong {
  font-weight: 700;
}

.bullets {
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
}

.bullets li {
  margin-bottom: 4px;
}

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

/* MODAL */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.35);
  backdrop-filter: blur(6px);
  z-index: 50;
}

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 720px);
  max-height: 90vh;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  z-index: 60;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  background: rgba(246, 247, 251, 0.7);
  flex-shrink: 0;
}

.modal-header-left {
  min-width: 0;
  flex: 1;
}

.modal-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.badge-dim {
  background: rgba(0, 122, 255, 0.08);
  color: rgba(0, 100, 220, 0.9);
  border-color: rgba(0, 122, 255, 0.2);
  font-size: 11px;
}

.badge-cat {
  background: rgba(100, 100, 100, 0.07);
  color: var(--muted);
  border-color: rgba(100, 100, 100, 0.15);
  font-size: 11px;
}

.modal-kicker {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.modal-title {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.25;
}

.modal-close {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  font-size: 16px;
  box-shadow: var(--shadow-soft);
}

.modal-content {
  padding: 14px 16px 8px;
  overflow-y: auto;
  flex: 1;
}

.modal-block {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.modal-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}

.modal-text {
  font-size: 14px;
  line-height: 1.5;
}

/* Usage tip */
.modal-usage-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(255, 204, 0, 0.08);
  border: 1px solid rgba(255, 200, 0, 0.25);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.modal-usage-icon {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

.modal-actions {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--line);
  background: rgba(246, 247, 251, 0.7);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.modal-actions-spacer {
  flex: 1;
}

.modal-ok {
  border: none;
  background: var(--accent);
  color: white;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 14px;
  cursor: pointer;
  margin-left: auto;
}

.modal-ok:hover {
  filter: brightness(0.95);
}

.modal-secondary {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.modal-secondary:hover {
  filter: brightness(0.98);
}

.modal-seo-btn {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  white-space: nowrap;
}

.modal-seo-btn:hover {
  color: var(--text);
  border-color: var(--accent-dynamic-border);
}

/* --- IF NOT MOVING (Et si ça ne bouge pas ?) --- */
.ifnm {
  margin-top: 6px;
}

.ifnm h4 {
  margin: 10px 0 6px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ifnm ul {
  margin: 0 0 8px;
  padding-left: 18px;
  line-height: 1.55;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.pill:hover {
  filter: brightness(0.98);
}

.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent-dynamic);
}
/* --- WORKSHOPS (Ateliers recommandés) --- */
#workshops-list {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.workshop-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 12px 10px;
  box-shadow: var(--shadow-soft);
}

.workshop-card__title {
  margin: 0 0 6px 0;
  font-size: 14px;
  line-height: 1.35;
}

.workshop-card__link {
  display: inline-flex;
  margin-top: 6px;
  font-weight: 700;
  color: var(--accent-dynamic);
  text-decoration: none;
}

.workshop-card__link:hover {
  text-decoration: underline;
}

/* --- UX ENHANCEMENTS (Category colors, liseré, scan) --- */
:root{
  /* Soft (désaturées) category palette */
  --cat-flow: rgba(56, 189, 248, 0.75);       /* cyan */
  --cat-delivery: rgba(34, 197, 94, 0.75);    /* green */
  --cat-qualite: rgba(245, 158, 11, 0.75);    /* amber */
  --cat-produit: rgba(168, 85, 247, 0.75);    /* purple */
  --cat-management: rgba(244, 63, 94, 0.75);  /* rose */
  --cat-collaboration: rgba(99, 102, 241, 0.75); /* indigo */
  --cat-default: rgba(0, 122, 255, 0.55);     /* fallback */
}

/* Card: subtle left liseré using a CSS variable set by category */
.problem-card{
  position: relative;
  overflow: hidden;
}
.problem-card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--cat-color, var(--cat-default));
  opacity: 0.9;
}

/* Badge colors follow the same category variable */
.badge{
  background: var(--badge-bg, rgba(0, 122, 255, 0.10));
  color: var(--badge-text, rgba(0, 122, 255, 0.95));
  border: 1px solid var(--badge-border, rgba(0, 122, 255, 0.18));
}

/* Category hooks (expects data-category attribute set on .problem-card and/or .detail-card) */
.problem-card[data-category="Flow"],
.detail-card[data-category="Flow"]{
  --cat-color: var(--cat-flow);
  --badge-bg: rgba(56, 189, 248, 0.12);
  --badge-text: rgba(14, 116, 144, 0.95);
  --badge-border: rgba(56, 189, 248, 0.22);
}
.problem-card[data-category="Delivery"],
.detail-card[data-category="Delivery"]{
  --cat-color: var(--cat-delivery);
  --badge-bg: rgba(34, 197, 94, 0.12);
  --badge-text: rgba(21, 128, 61, 0.95);
  --badge-border: rgba(34, 197, 94, 0.22);
}
.problem-card[data-category="Qualité"],
.problem-card[data-category="Qualite"],
.problem-card[data-category="Qualité perçue"],
.detail-card[data-category="Qualité"],
.detail-card[data-category="Qualite"],
.detail-card[data-category="Qualité perçue"]{
  --cat-color: var(--cat-qualite);
  --badge-bg: rgba(245, 158, 11, 0.12);
  --badge-text: rgba(146, 64, 14, 0.95);
  --badge-border: rgba(245, 158, 11, 0.22);
}
.problem-card[data-category="Produit"],
.detail-card[data-category="Produit"]{
  --cat-color: var(--cat-produit);
  --badge-bg: rgba(168, 85, 247, 0.12);
  --badge-text: rgba(107, 33, 168, 0.95);
  --badge-border: rgba(168, 85, 247, 0.22);
}
.problem-card[data-category="Management"],
.detail-card[data-category="Management"]{
  --cat-color: var(--cat-management);
  --badge-bg: rgba(244, 63, 94, 0.12);
  --badge-text: rgba(159, 18, 57, 0.95);
  --badge-border: rgba(244, 63, 94, 0.22);
}
.problem-card[data-category="Collaboration"],
.detail-card[data-category="Collaboration"]{
  --cat-color: var(--cat-collaboration);
  --badge-bg: rgba(99, 102, 241, 0.12);
  --badge-text: rgba(55, 48, 163, 0.95);
  --badge-border: rgba(99, 102, 241, 0.22);
}

/* Optional: semantic icon tint hook (if you add <span class="problem-icon">…</span>) */
.problem-icon{
  color: var(--cat-color, var(--cat-default));
  opacity: 0.9;
  margin-right: 6px;
}

/* Hierarchy: discreet "lever" chips (if you add them later) */
.lever-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.02);
  color: var(--muted);
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}

/* Actions à tester (rich actions) */
.actions-list{
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.55;
}
.actions-list.hidden{ display: none; }
.action-item{ margin-bottom: 6px; }
.action-intent{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 8px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.02);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}



/* --- MODAL READABILITY (Stepper + Collapsible + Primary action) --- */
.modal-stepper{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 10px;
}

.modal-stepper .step{
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.65);
  color: var(--muted);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}

.modal-stepper .step.is-active{
  color: var(--text);
  border-color: var(--accent-dynamic-border);
  box-shadow: 0 0 0 3px var(--accent-dynamic-ring), var(--shadow-soft);
}

.modal-details{
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.55);
  box-shadow: var(--shadow-soft);
  margin-bottom: 10px;
}

.modal-details__summary{
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: rgba(246, 247, 251, 0.6);
}

.modal-details[open] .modal-details__summary{
  color: var(--text);
}

.modal-details .modal-block{
  border: none;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}

.modal-helper{
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--muted);
}

.ifnm-ol{
  margin: 0 0 10px;
  padding-left: 20px;
  line-height: 1.55;
}

.ifnm-ul{
  margin: 0;
  padding-left: 18px;
  line-height: 1.55;
}

.primary-action{
  border: 1px solid var(--accent-dynamic-border);
  background: var(--accent-dynamic-ring);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 6px 0 10px;
}

.primary-action__kicker{
  font-size: 12px;
  font-weight: 900;
  color: var(--accent-dynamic);
  margin-bottom: 6px;
}

.primary-action__text{
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  font-weight: 700;
}

.secondary-actions__kicker{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin: 6px 0 6px;
}

.ifnm-hint{
  margin: 0 0 8px;
}

/* -------------------------------
   Library + Guided additions
-------------------------------- */

.top-nav{
  max-width: 820px;
  margin: 10px auto 8px;
  display: flex;
  justify-content: center;
  width: fit-content;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.nav-btn{
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.nav-btn:hover{
  background: rgba(15, 23, 42, 0.04);
  color: var(--text);
}

.nav-btn.is-active{
  background: var(--card);
  color: var(--text);
  border-color: var(--accent-dynamic-border);
  box-shadow: 0 0 0 3px var(--accent-dynamic-ring);
}

.library-toolbar{
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
}

.library-toolbar input{
  flex: 1;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
}

.library-filters{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 6px 0 14px;
}

.library-filters select{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
}

.checkbox{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.8);
  font-size: 13px;
}

.metric-card .problem-meta{ justify-content: space-between; }

.card-actions{
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.small-btn{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}

.small-btn.primary{
  border-color: var(--accent-dynamic-border);
  background: var(--accent-dynamic-ring);
  color: var(--text);
  font-weight: 800;
}

.plan-card{ margin-top: 16px; }

.plan-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.plan-list{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.plan-item{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.7);
}

.pill-btn{
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
}

.guided-entry{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.guided-grid{ display: grid; gap: 10px; margin-top: 12px; }

.guided-kicker{ font-size: 12px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

.guided-actions{ display: grid; gap: 10px; margin-top: 10px; }

.guided-follow{ margin-top: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); background: rgba(255,255,255,0.7);} 

/* ENTRY POINTS — segmented control compact */
.entry-points {
  max-width: 820px;
  margin: 12px auto 0;
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 4px;
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.entry-btn {
  flex: 1;
  min-width: 0;
  padding: 9px 8px;
  border-radius: 10px;
  border: none;
  background: transparent;
  box-shadow: none;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  transition: background .15s ease, color .12s ease;
}

.entry-btn:hover {
  background: rgba(0, 0, 0, 0.045);
  color: var(--text);
}

.entry-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-dynamic-ring);
}

.entry-btn.is-active {
  background: var(--accent);
  color: #fff;
}

.entry-icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.entry-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* subtitle hidden in compact mode */
.entry-subtitle { display: none; }

/* ─── RETRO PLANNER ──────────────────────────────────────────────────────── */

/* CTA button in signal detail */
.retro-cta-section { padding-top: 14px; }
.retro-cta-btn {
  width: 100%;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(0,122,255,.08), rgba(0,180,180,.08));
  border: 1.5px dashed rgba(0,122,255,.35);
  border-radius: 14px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background .15s, border-color .15s;
}
.retro-cta-btn:hover {
  background: linear-gradient(135deg, rgba(0,122,255,.13), rgba(0,180,180,.13));
  border-color: rgba(0,122,255,.55);
}

/* Form card */
.retro-form-card { margin-bottom: 14px; }
.retro-form-title { font-size: 18px; margin: 6px 0 16px; }

.retro-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.retro-field--sm { flex: 0 0 auto; }

.retro-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.retro-field textarea,
.retro-field select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-size: 14px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}
.retro-field textarea:focus,
.retro-field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.retro-form-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.retro-remote-check { margin-bottom: 8px; }

.retro-generate-btn {
  width: 100%;
  font-size: 15px;
  padding: 13px;
}

/* Plan output */
.retro-plan-header { margin-bottom: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.retro-plan-meta   { line-height: 1.5; flex: 1; min-width: 0; }
.retro-share-btn   {
  flex-shrink: 0;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.retro-share-btn:hover { background: var(--accent); color: #fff; }

/* Toast notification */
#app-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: #1c1c1e;
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: 9999;
  white-space: nowrap;
}
#app-toast.app-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.retro-theme-badge {
  display: inline-block;
  background: rgba(0,122,255,.08);
  color: rgba(0,100,220,.9);
  border: 1px solid rgba(0,122,255,.2);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-right: 4px;
  margin-top: 4px;
}

.retro-safety-note {
  margin-top: 8px;
  font-size: 12px;
  color: #c05800;
  background: rgba(255,160,50,.08);
  border: 1px solid rgba(255,160,50,.25);
  border-radius: 8px;
  padding: 6px 10px;
}

/* Phase cards */
.retro-phase-card {
  margin-bottom: 10px;
  border-left: 3px solid var(--accent);
}
.retro-phase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.retro-phase-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.retro-phase-time {
  font-size: 12px;
  font-weight: 700;
}
.retro-activity-name {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 4px;
}
.retro-activity-summary {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Expandable activity detail ───────────────────── */
.retro-activity-details {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.retro-activity-details-summary {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.retro-activity-details-summary::-webkit-details-marker { display: none; }
.retro-activity-details[open] .retro-activity-details-summary {
  margin-bottom: 10px;
  color: var(--muted);
}
.retro-activity-desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
}
.retro-activity-desc ul {
  margin: 8px 0 8px 18px;
  padding: 0;
}
.retro-activity-desc li {
  margin-bottom: 5px;
}
.retro-activity-timing {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
  font-style: italic;
}
.retro-activity-source {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}
.retro-activity-source a {
  color: var(--accent);
}

.retro-total-badge {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 4px;
  margin-bottom: 14px;
}

/* Metrics card */
.retro-metrics-card { margin-top: 14px; }