/* Headline & Title Generator v1 — layered on aiwa-paraphrase.css (shared app shell) and aiwa-email.css
   (details button, dialog, extras). Everything here is prefixed hl- so it cannot leak into the other tools. */
.headline-page #hlPurposeMenu { width: 660px; }
.hl-purpose-list { grid-template-columns: 1fr 1fr; }
.hl-purpose-note { margin: 4px 6px 2px; padding: 8px 10px 4px; border-top: 1px solid var(--aiwa-line); color: var(--aiwa-muted); font-size: 11.5px; line-height: 1.45; }
.headline-page #hlAngleMenu { width: 560px; }
.hl-angle-list { grid-template-columns: 1fr 1fr; }
.headline-page #ppModeMenu { width: 380px; }
.headline-page .pp-mode-btn-text b { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.headline-page .aiwa-doc-head { min-width: 120px; }
.headline-page .em-details-btn { max-width: 190px; }
.headline-page .pp-bar-inner .pp-language select { width: 170px; }
.hl-count-group .pp-synonyms-value { min-width: 26px; text-align: right; }
.hl-count-group .pp-range { width: 78px; }
.hl-sheet-done { display: none; }

/* ---- details dialog ---- */
.hl-dialog { width: min(660px, calc(100vw - 32px)); }
.hl-dialog-set { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; }
.hl-dialog-set legend { float: left; margin-right: 6px; padding: 0; color: var(--aiwa-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.hl-radio { position: relative; display: inline-flex; text-transform: none; letter-spacing: 0; }
.hl-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hl-radio span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border: 1px solid var(--aiwa-line); border-radius: 999px; background: #fff; color: var(--aiwa-text); font-size: 13px; font-weight: 700; cursor: pointer; }
.hl-radio input:checked + span { border-color: var(--aiwa-brand); background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); }
.hl-radio input:focus-visible + span { box-shadow: 0 0 0 3px rgba(19, 122, 61, 0.2); }
.hl-dialog-toggles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.hl-dialog .hl-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--aiwa-line); border-radius: 12px; background: #fbfcfb; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; }
.hl-check input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--aiwa-brand); flex: 0 0 auto; }
.hl-check span { display: grid; gap: 2px; }
.hl-check b { color: var(--aiwa-ink); font-size: 13.5px; font-weight: 750; }
.hl-check small { color: var(--aiwa-muted); font-size: 12px; line-height: 1.4; font-weight: 500; }

/* ---- output pane ---- */
.hl-output { padding: 0; display: flex; flex-direction: column; }
.hl-output.empty { display: grid; padding: 22px 26px; }
.hl-output:not(.empty) .result-empty { display: none; }
/* The shared result box reserves 44px at the top for the floating toolbar; this page's scroller reserves
   its own, so the shared padding would double it into a band of dead space. */
.headline-page #toolOutput { padding-top: 0; }
.hl-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 50px 18px 34px; display: grid; gap: 14px; align-content: start; }

/* preview */
.hl-pv { border: 1px solid var(--aiwa-line); border-radius: 14px; background: #fff; padding: 14px 16px 12px; box-shadow: 0 1px 2px rgba(10, 40, 24, .04); }
.hl-preview[hidden], .hl-list[hidden], .hl-meta[hidden] { display: none; }
.hl-pv-label { display: inline-block; margin-bottom: 9px; padding: 2px 8px; border-radius: 999px; background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); font-size: 10.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.hl-pv-note { margin: 9px 0 0; color: var(--aiwa-muted); font-size: 11.5px; line-height: 1.45; }
.hl-pv-serp-in { font-family: Arial, "Helvetica Neue", sans-serif; max-width: 600px; }
.hl-pv-site { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.hl-pv-favicon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #eef2ef; color: #3c4a41; font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.hl-pv-site b { display: block; font-size: 13px; color: #202124; line-height: 1.2; }
.hl-pv-site small { display: block; font-size: 11.5px; color: #4d5156; }
.hl-pv-title { margin: 0; font-size: 20px; line-height: 1.3; color: #1a0dab; font-weight: 400; }
.hl-pv-desc { margin: 4px 0 0; font-size: 13px; line-height: 1.58; color: #4d5156; }
.hl-pv-inbox-in { display: flex; gap: 11px; align-items: flex-start; max-width: 420px; padding: 10px 12px; border: 1px solid var(--aiwa-line); border-radius: 12px; background: #fbfcfb; }
.hl-pv-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); font-size: 14px; font-weight: 800; flex: 0 0 auto; }
.hl-pv-inbox-text { min-width: 0; }
.hl-pv-inbox-text b { display: block; font-size: 13.5px; color: var(--aiwa-ink); }
.hl-pv-subject { display: block; font-size: 13.5px; font-weight: 700; color: var(--aiwa-ink); line-height: 1.35; }
.hl-pv-cut { font-style: normal; color: #b4bdb7; }
.hl-pv-inbox-text small { display: block; margin-top: 2px; color: var(--aiwa-muted); font-size: 12px; line-height: 1.4; }
.hl-pv-video-in { display: flex; gap: 12px; align-items: flex-start; max-width: 480px; }
.hl-pv-thumb { display: grid; place-items: center; width: 120px; height: 68px; border-radius: 10px; background: linear-gradient(135deg, #e8efe9, #d7e4da); flex: 0 0 auto; }
.hl-pv-thumb .aiwa-ui-icon { width: 26px; height: 26px; opacity: .55; }
.hl-pv-vtitle { margin: 0; font-size: 15px; font-weight: 750; line-height: 1.32; color: var(--aiwa-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hl-pv-video-text small { display: block; margin-top: 4px; color: var(--aiwa-muted); font-size: 12px; }
.hl-pv-card-in { padding: 20px 18px; border-radius: 12px; background: linear-gradient(180deg, #f7faf8, #eef4f0); text-align: center; }
.hl-pv-hero { margin: 0; font-size: 24px; line-height: 1.22; font-weight: 800; letter-spacing: -.01em; color: var(--aiwa-ink); }
.hl-pv-deck { margin: 9px auto 0; max-width: 46ch; font-size: 14px; line-height: 1.5; color: var(--aiwa-muted); }

/* meta description */
.hl-meta { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--aiwa-line); border-radius: 14px; background: #fff; padding: 12px 14px; }
.hl-meta-label { color: var(--aiwa-muted); font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; padding-top: 3px; }
.hl-meta-label i { display: block; font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.hl-meta p { flex: 1 1 auto; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--aiwa-text); outline: 0; }
.hl-meta p:focus { border-radius: 6px; box-shadow: 0 0 0 3px rgba(19, 122, 61, .16); }

/* cards */
.hl-list { display: grid; gap: 10px; }
.hl-card { min-width: 0; border: 1px solid var(--aiwa-line); border-radius: 14px; background: #fff; padding: 12px 14px 10px; box-shadow: 0 1px 2px rgba(10, 40, 24, .04); transition: border-color 140ms, box-shadow 140ms; }
.hl-card.is-selected { border-color: #9bc7aa; box-shadow: 0 0 0 3px rgba(47, 174, 99, .12); }
.hl-card-skeleton { min-height: 96px; background: linear-gradient(90deg, #f4f7f5 25%, #eef3f0 37%, #f4f7f5 63%); background-size: 400% 100%; animation: hlShimmer 1.4s ease infinite; }
@keyframes hlShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .hl-card-skeleton { animation: none; } }
.hl-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.hl-rank { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #f1f5f2; color: var(--aiwa-muted); font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.hl-angle { padding: 2px 8px; border-radius: 999px; background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); font-size: 10.5px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.hl-score { margin-left: auto; display: inline-flex; align-items: baseline; gap: 1px; padding: 2px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; cursor: help; }
.hl-score b { font-size: 14px; font-weight: 800; }
.hl-score small { font-size: 10px; font-weight: 650; opacity: .7; }
.hl-score[data-band="strong"] { background: #e6f6ec; color: #14663a; }
.hl-score[data-band="good"] { background: #eef4ea; color: #43682c; }
.hl-score[data-band="fair"] { background: #fdf4e3; color: #8a6414; }
.hl-score[data-band="weak"] { background: #fdeceb; color: #a4302a; }
.hl-text { margin: 0; font-size: 16.5px; line-height: 1.35; font-weight: 700; color: var(--aiwa-ink); letter-spacing: -.005em; outline: 0; word-break: break-word; }
.hl-text:focus { border-radius: 7px; box-shadow: 0 0 0 3px rgba(19, 122, 61, .16); }
.hl-sub { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--aiwa-text); outline: 0; }
.hl-pre { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--aiwa-muted); outline: 0; }
.hl-pre > span { display: inline-block; margin-right: 7px; padding: 1px 6px; border-radius: 5px; background: #f1f5f2; font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.hl-sub:focus, .hl-pre:focus { border-radius: 6px; box-shadow: 0 0 0 3px rgba(19, 122, 61, .16); }
.hl-card-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--aiwa-line); }
.hl-count, .hl-words, .hl-px { color: var(--aiwa-muted); font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-count { display: inline-flex; align-items: center; gap: 6px; }
.hl-count b { font-weight: 800; color: var(--aiwa-text); }
.hl-count::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2fae63; flex: 0 0 auto; }
.hl-count[data-state="short"]::before { background: #b4bdb7; }
.hl-count[data-state="warn"]::before { background: #e0a100; }
.hl-count[data-state="over"] { color: #b3261e; }
.hl-count[data-state="over"] b { color: #b3261e; }
.hl-count[data-state="over"]::before { background: #d33a2f; }
.hl-px[data-state="over"] { color: #b3261e; }
.hl-card-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.hl-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border: 1px solid var(--aiwa-line); border-radius: 999px; background: #fff; color: var(--aiwa-text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background-color 140ms, border-color 140ms, color 140ms; }
.hl-btn .aiwa-ui-icon { width: 13px; height: 13px; }
.hl-btn:hover { border-color: #9bc7aa; background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); }
.hl-btn[aria-expanded="true"] { border-color: #9bc7aa; background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); }

/* score breakdown */
.hl-bands { list-style: none; display: grid; gap: 9px; margin: 10px 0 2px; padding: 11px 12px; border-radius: 11px; background: #fbfcfb; border: 1px solid var(--aiwa-line); }
.hl-bands[hidden] { display: none; }
.hl-band-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hl-band-top b { font-size: 12px; font-weight: 750; color: var(--aiwa-ink); }
.hl-band-top i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--aiwa-muted); font-variant-numeric: tabular-nums; }
.hl-band-track { display: block; height: 5px; margin: 5px 0 4px; border-radius: 999px; background: #e7ede9; overflow: hidden; }
.hl-band-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2fae63, #137a3d); }
.hl-band small { color: var(--aiwa-muted); font-size: 11.5px; line-height: 1.45; }

/* out tools — the shared shell hides this bar until a result exists, keyed on the paraphraser's own
   class, so this page names its own (.has-headline-result) or the Sort and Refine buttons never appear. */
.headline-page.has-headline-result .pp-out-tools { display: flex; align-items: center; gap: 6px; }
.hl-stat-top { display: none; color: var(--aiwa-muted); font-size: 11.5px; font-weight: 650; margin-right: auto; }
.hl-sort-menu [role="menuitemradio"][aria-checked="true"] { background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); }
/* The shared .pp-menu drops upward because everywhere else it hangs off the action bar at the foot of the
   page. This toolbar sits at the TOP of the output pane, so its menus drop down instead — and the toolbar
   has to clear the controls bar (z-index 80) or an open menu is unclickable underneath it. */
.headline-page.has-headline-result .pp-out-tools { z-index: 81; }
.headline-page .pp-out-tools .pp-menu { top: calc(100% + 6px); bottom: auto; right: 0; left: auto; }

/* purpose strip (phones) */
.hl-purpose-strip { display: none; }
.hl-strip-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 62px; padding: 8px 6px; border: 1px solid var(--aiwa-line); border-radius: 12px; background: #fff; color: var(--aiwa-text); font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; }
.hl-strip-ic { width: 18px; height: 18px; }
.hl-strip-btn[aria-pressed="true"] { border-color: var(--aiwa-brand); background: var(--aiwa-brand-soft); color: var(--aiwa-brand-dark); }

/* ---- laptop widths: the bar has six controls, so it sheds the least useful first ---- */
@media (max-width: 1500px) { .headline-page .aiwa-doc-head { display: none; } }
@media (max-width: 1300px) { .headline-page .pp-bar-inner .pp-language select { width: 130px; } .headline-page .em-details-btn { max-width: 130px; } }
@media (max-width: 1100px) and (min-width: 901px) { .headline-page .hl-count-group .pp-synonyms-label { display: none; } .headline-page .pp-mode-btn-text small { display: none; } }

/* ---- phones and vertical displays: the tool becomes an app ---- */
@media (max-width: 900px) {
  /* The shared bar is justify-content:flex-end, which pushes an overflowing row off the LEFT edge where no
     scroll can reach it. A horizontal strip has to start at the left. */
  .headline-page .pp-bar-inner { flex-wrap: nowrap; justify-content: flex-start; gap: 8px; min-height: 58px; padding: 9px 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding: 0 12px; }
  .headline-page .pp-bar-inner::-webkit-scrollbar { display: none; }
  .headline-page .pp-bar { position: relative; }
  .headline-page .pp-bar::after { content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0), var(--aiwa-surface, #fff)); pointer-events: none; }
  .headline-page .pp-bar-inner > * { flex: 0 0 auto; scroll-snap-align: start; }
  .headline-page .pp-bar-inner .pp-language { height: 40px; margin-left: 0; border-radius: 12px; }
  .headline-page .pp-bar-inner .pp-language select { width: 110px; }
  .headline-page .pp-mode-menu { display: flex; flex-direction: column; position: fixed; inset: auto 0 0 0; width: 100%; max-height: 78vh; border-radius: 18px 18px 0 0; z-index: 90; }
  .headline-page .pp-mode-menu[hidden] { display: none !important; }
  .headline-page .pp-mode-list { overflow: auto; }
  .hl-purpose-list, .hl-angle-list { grid-template-columns: 1fr; }
  .headline-page.hl-sheet-open::before { content: ""; position: fixed; inset: 0; background: rgba(12, 24, 17, .38); z-index: 79; }
  .hl-sheet-done { display: block; width: calc(100% - 24px); margin: 8px 12px 12px; min-height: 42px; border: 0; border-radius: 12px; background: var(--aiwa-brand); color: #fff; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
  .hl-purpose-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px 14px 2px; }
  .hl-purpose-strip::-webkit-scrollbar { display: none; }
  .hl-scroll { padding: 14px 12px 26px; }
  .hl-text { font-size: 16px; }
  .hl-card-foot { gap: 9px; }
  .hl-card-actions { gap: 6px; }
  .hl-btn span { display: none; }
  .hl-btn { padding: 0 10px; }
  .hl-pv-serp-in, .hl-pv-inbox-in, .hl-pv-video-in { max-width: 100%; }
  .hl-pv-hero { font-size: 20px; }
  .hl-pv-thumb { width: 96px; height: 56px; }
  .headline-page.has-headline-result .pp-out-tools { position: sticky; top: 0; right: auto; z-index: 4; width: 100%; background: var(--aiwa-surface, #fff); padding: 8px 12px; border-bottom: 1px solid var(--aiwa-line); margin: 0; border-radius: 0; backdrop-filter: none; }
  .hl-stat-top { display: block; }
  /* The shared action bar puts the run button on row 2 only for the paraphraser's own result class, so this
     page names its own — otherwise the run button and the result tab bar land on the same grid row and
     overlap. The stat is hidden here because the sticky toolbar above already carries it. */
  .headline-page .pp-run-wrap { grid-row: 2; }
  .headline-page .pp-run { white-space: nowrap; font-size: 13px; padding: 0 14px; }
  .headline-page .hl-stat { display: none; }
  .headline-page .pp-result-actions { display: none; }
  .headline-page.has-headline-result[data-mobile-editor-view="output"] .pp-result-actions { display: grid; grid-column: 1 / -1; grid-row: 1; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 100%; }
  .headline-page.has-headline-result[data-mobile-editor-view="output"] .pp-result-actions .pane-action { flex-direction: column; gap: 3px; min-height: 48px; padding: 4px 2px; font-size: 10.5px; border: 0; background: transparent; }
  .headline-page.has-headline-result[data-mobile-editor-view="output"] .pp-result-actions .pane-action span { display: block; }
  .hl-dialog { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 88vh; margin: 0; border-radius: 18px 18px 0 0; }
  .hl-dialog-toggles { grid-template-columns: 1fr; }
  .hl-dialog-set { flex-wrap: wrap; }
  .hl-meta { flex-direction: column; gap: 6px; }
  .hl-meta-label { white-space: normal; }
}

/* ---- dark ---- */
html[data-theme="dark"] .hl-card, html[data-theme="dark"] .hl-pv, html[data-theme="dark"] .hl-meta { background: #101714; }
html[data-theme="dark"] .hl-card-skeleton { background: linear-gradient(90deg, #131a16 25%, #18211c 37%, #131a16 63%); background-size: 400% 100%; }
html[data-theme="dark"] .hl-rank { background: #1a231d; }
html[data-theme="dark"] .hl-btn, html[data-theme="dark"] .hl-radio span, html[data-theme="dark"] .hl-check { background: #131a16; border-color: var(--aiwa-line); color: var(--aiwa-text); }
html[data-theme="dark"] .hl-radio input:checked + span, html[data-theme="dark"] .hl-btn[aria-expanded="true"] { background: rgba(47, 174, 99, .18); border-color: var(--aiwa-brand); color: #4cc47c; }
html[data-theme="dark"] .hl-bands { background: #131a16; }
html[data-theme="dark"] .hl-band-track { background: #1e2922; }
html[data-theme="dark"] .hl-pv-inbox-in { background: #131a16; }
html[data-theme="dark"] .hl-pv-card-in { background: linear-gradient(180deg, #131a16, #101714); }
html[data-theme="dark"] .hl-pv-title { color: #8ab4f8; }
html[data-theme="dark"] .hl-pv-site b { color: #e4e8e5; }
html[data-theme="dark"] .hl-pv-site small, html[data-theme="dark"] .hl-pv-desc { color: #9aa5a0; }
html[data-theme="dark"] .hl-pv-favicon, html[data-theme="dark"] .hl-pv-thumb { background: #1a231d; color: #cfd8d2; }
html[data-theme="dark"] .hl-pv-cut { color: #5c6660; }
html[data-theme="dark"] .hl-score[data-band="strong"] { background: rgba(47, 174, 99, .18); color: #5ccd8a; }
html[data-theme="dark"] .hl-score[data-band="good"] { background: rgba(120, 174, 47, .16); color: #a8cc7a; }
html[data-theme="dark"] .hl-score[data-band="fair"] { background: rgba(224, 161, 0, .16); color: #e0b545; }
html[data-theme="dark"] .hl-score[data-band="weak"] { background: rgba(211, 58, 47, .16); color: #e98b83; }
html[data-theme="dark"] .hl-pre > span { background: #1a231d; }
@media (max-width: 900px) { html[data-theme="dark"] .headline-page .pp-out-tools { background: #0c1310; } }