/* Styles specific to the demo tools.
 *
 * The site stylesheet is loaded first (see _layout.php) and provides the design
 * tokens, the resets, the chrome and the shared utilities: .container, .card,
 * .btn, .badge, .section, .page, .page-hero. Nothing here redefines any of them.
 *
 * That is not a preference. This file used to declare its own .hero, .card, .btn,
 * .container and .page; once the real site stylesheet was loaded alongside it the
 * two collided and the tool inherited the homepage's full-height centred hero.
 * Only genuinely tool-specific classes belong here, and none may reuse a name the
 * site already owns.
 */

/* ---------------------------------------------------------------- form */

.tool-form label { display: block; font-size: 14px; color: var(--color-muted); margin-bottom: 7px; }
.tool-form textarea,
.tool-form input[type="email"],
.tool-form select {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
  padding: 13px 15px;
}
.tool-form textarea { min-height: 190px; resize: vertical; line-height: 1.6; }
.tool-form textarea:focus,
.tool-form input:focus,
.tool-form select:focus { border-color: var(--color-accent); outline: none; }
.tool-row { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 700px) { .tool-row--2 { grid-template-columns: 1fr 1fr; } }
.tool-hint { font-size: 13px; color: var(--color-faint); margin-top: 10px; }
.tool-counter { float: right; font-family: var(--font-mono); font-size: 12px; color: var(--color-faint); }
.tool-grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .tool-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(10, 12, 16, .3);
  border-top-color: var(--color-bg);
  animation: tool-spin .7s linear infinite;
}
@keyframes tool-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ---------------------------------------------------------------- hub tiles */

.tool-tile { display: block; transition: border-color var(--transition), transform var(--transition); }
.tool-tile:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.tool-tile .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-faint); }
.tool-tile h2 { margin-top: 10px; font-size: 22px; }
.tool-tile p { color: var(--color-muted-2); font-size: 15px; margin-top: 8px; }
.tool-tile .go { color: var(--color-accent); font-size: 14px; margin-top: 14px; display: inline-block; }
.tool-tile--soon { opacity: .55; pointer-events: none; }

/* ---------------------------------------------------------------- gate */

.gate { margin-bottom: 28px; }
.gate h2 { margin-top: 8px; }
.gate-or { text-align: center; color: var(--color-faint); font-size: 13px; margin: 16px 0; position: relative; }
.gate-or::before, .gate-or::after {
  content: ''; position: absolute; top: 50%; width: calc(50% - 22px); height: 1px;
  background: var(--color-border-light);
}
.gate-or::before { left: 0; } .gate-or::after { right: 0; }
.gate-email { display: flex; gap: 10px; flex-wrap: wrap; }
.gate-email input { flex: 1 1 260px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.signed-in { font-size: 14px; color: var(--color-muted); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.signed-in strong { color: var(--color-text); font-weight: 600; }

/* ---------------------------------------------------------------- progress */

.steps { display: grid; gap: 14px; }
.step { display: flex; align-items: center; gap: 12px; color: var(--color-faint); font-size: 15px; transition: color var(--transition); }
.step .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); flex: none; transition: background var(--transition), box-shadow var(--transition); }
.step.is-active { color: var(--color-text); }
.step.is-active .dot { background: var(--color-accent); box-shadow: 0 0 0 4px rgba(0, 229, 200, .15); animation: tool-pulse 1.4s ease-in-out infinite; }
.step.is-done { color: var(--color-muted); }
.step.is-done .dot { background: var(--color-accent); }
@keyframes tool-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) { .step.is-active .dot { animation: none } }

/* ---------------------------------------------------------------- results */

#results { margin-top: 40px; display: none; }
#results.is-visible { display: block; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin: 44px 0 16px; flex-wrap: wrap; }
.section-head .n { font-family: var(--font-mono); font-size: 12px; color: var(--color-accent); }
.section-head h2 { margin-bottom: 0; font-size: 24px; }

.score { display: flex; align-items: center; gap: 20px; }
.score-num { font-family: var(--font-display); font-size: 52px; line-height: 1; }
.score-bar { flex: 1; height: 7px; border-radius: 4px; background: var(--color-surface-2); overflow: hidden; }
.score-fill { height: 100%; background: var(--color-accent); border-radius: 4px; transition: width .6s var(--transition); }

.check { display: grid; gap: 14px; margin-top: 22px; }
.check-item { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 20px; white-space: nowrap; }
.pill--good { background: rgba(0, 229, 200, .12); color: var(--color-accent); }
.pill--weak { background: rgba(239, 68, 68, .12); color: #ff8f8f; }
.pill--ok { background: rgba(255, 255, 255, .07); color: var(--color-muted); }
.check-item .why { color: var(--color-muted-2); font-size: 15px; }
.check-item .fix { color: var(--color-text); font-size: 15px; margin-top: 3px; }

.rewrite { position: relative; }
.rewrite + .rewrite { margin-top: 16px; }
.rewrite .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); }
.rewrite .text { white-space: pre-wrap; margin: 12px 0 14px; }
.rewrite .why { color: var(--color-faint); font-size: 14px; }
.rewrite .copy { position: absolute; top: 18px; right: 18px; }

/* ---------------------------------------------------------------- trends */

.src-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; margin-left: auto; }
.src-note--live { color: var(--color-accent); }
.src-note--warn { color: #ffb37a; }

.tag-row { padding: 16px 0; border-bottom: 1px solid var(--color-border-light); }
.tag-row:last-child { border-bottom: 0; }
.tag-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tag {
  font-family: var(--font-mono); font-size: 15px;
  background: var(--color-highlight);
  border: 1px solid rgba(0, 229, 200, .3);
  color: var(--color-accent);
  border-radius: 20px; padding: 6px 15px;
}
.tag-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.tag-meta .k { color: var(--color-faint); font-family: var(--font-mono); font-size: 12px; }
.tag-meta .v { color: var(--color-text); font-family: var(--font-mono); font-size: 12px; }
.copy-row { margin-top: 18px; }

.mini-bar { display: inline-block; width: 120px; height: 6px; border-radius: 3px; background: var(--color-surface-2); overflow: hidden; vertical-align: middle; }
.mini-fill { display: block; height: 100%; background: var(--color-accent); border-radius: 3px; }

.family + .family { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--color-border-light); }
.family-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.family-head h3 { margin-bottom: 0; }
.variant-row { display: grid; grid-template-columns: 1fr 120px 42px; gap: 12px; align-items: center; padding: 5px 0; }
.variant-name { font-size: 15px; color: var(--color-muted-2); }
.variant-score { font-family: var(--font-mono); font-size: 13px; color: var(--color-text); text-align: right; }
@media (max-width: 620px) {
  .variant-row { grid-template-columns: 1fr 60px; }
  .variant-row .mini-bar { display: none; }
}

/* ---------------------------------------------------------------- plan */

.plan { display: grid; gap: 14px; }
.plan-item { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; }
.plan-n { font-family: var(--font-mono); font-size: 12px; color: var(--color-accent); border: 1px solid var(--color-border-light); border-radius: 8px; text-align: center; padding: 7px 0; }
.plan-item .theme { font-weight: 600; color: var(--color-text); }
.plan-item .angle { color: var(--color-muted-2); font-size: 15px; }
.plan-item .hook { color: var(--color-text); font-size: 15px; font-style: italic; margin-top: 5px; }

.notice { border-radius: var(--radius-sm); padding: 14px 16px; font-size: 15px; margin-top: 18px; }
.notice--error { background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .35); color: #ffb3b3; }
.notice--info { background: var(--color-surface-2); border: 1px solid var(--color-border-light); color: var(--color-muted-2); }

/* ---------------------------------------------------------------- mobile nav */

/* Below 900px the site hides the inline nav because React portals a sliding panel
   to <body>. There is no React here, so the burger opens the inline panel instead
   (see chrome.js). */
@media (max-width: 900px) {
  .site-nav { position: relative; }
  .nav-panel--desktop {
    display: none;
    position: absolute;
    top: var(--nav-height, 80px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 24px 22px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
  }
  .nav-panel--desktop.is-open { display: flex; }
  .nav-panel--desktop .nav-links { flex-direction: column; gap: 2px; }
  .nav-panel--desktop .nav-cta { margin-top: 10px; text-align: center; }
}

/* ---------------------------------------------------------------- folds */

/* <details> rather than a scripted toggle: keyboard accessible, findable by the
   browser's own in-page search, and no JS to load. */
.fold { margin-top: 22px; border-top: 1px solid var(--color-border-light); padding-top: 6px; }
.fold > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 0 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 9px;
  transition: color var(--transition);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transition);
}
.fold[open] > summary::before { transform: rotate(45deg); }
.fold > summary:hover { color: var(--color-accent); }
.fold[open] > summary { color: var(--color-accent); margin-bottom: 10px; }

.score-out { font-size: 22px; color: var(--color-faint); }
.score-summary { margin-top: 16px; color: var(--color-muted-2); }

/* ---------------------------------------------------------------- alignment */

/* A fixed first column so every criterion badge is the same width and the
   explanations line up down the page. Left ragged, the four labels ranged from
   "Accroche" to "Format et longueur" and the text started in four places. */
.check-item { grid-template-columns: 152px 1fr; }
.check-item > .pill {
  width: 100%;
  text-align: center;
  padding: 5px 8px;
  line-height: 1.35;
}
@media (max-width: 560px) {
  .check-item { grid-template-columns: 1fr; gap: 6px; }
  .check-item > .pill { width: fit-content; }
}

/* Same idea for the source badges beside each hashtag: one width, so the rows
   read as a column rather than a staircase. */
.tag-head { display: grid; grid-template-columns: minmax(0, 1fr) 190px; align-items: center; gap: 12px; }
.tag-head > .tag { justify-self: start; }
.tag-head > .pill { width: 100%; text-align: center; }
@media (max-width: 560px) {
  .tag-head { grid-template-columns: 1fr; }
  .tag-head > .pill { width: fit-content; }
}