/*
 * Hunchwire's own components, built on Lab::UI tokens (decision 0005 in the lab).
 * Classes use the hw- prefix. Candidates for Lab::UI once a second venture needs them.
 */

:root { --hw-top: #111113; --hw-fill: rgba(236, 232, 225, 0.09); --hw-bar: rgba(236, 232, 225, 0.78); }

/* Shell: top bar, sidebar, page */
.hw-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 2rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--ui-border); background: var(--hw-top); }
.ui-app .hw-wordmark { font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--ui-text); }
.hw-top__nav { display: flex; gap: 1.5rem; font-size: 14px; }
.ui-app .hw-top__nav a { color: var(--ui-text-muted); }
.ui-app .hw-top__nav a:hover, .ui-app .hw-top__nav a[aria-current="page"] { color: var(--ui-text); }
.hw-top__who { font-size: 13px; color: var(--ui-text-muted); }
.hw-menu { position: relative; }
.hw-menu__button { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem 0.25rem 0.25rem; border-radius: 999px; cursor: pointer; list-style: none; color: var(--ui-text-muted); transition: background var(--ui-dur-1) var(--ui-ease); }
.hw-menu__button::-webkit-details-marker { display: none; }
.hw-menu__button:hover, .hw-menu[open] .hw-menu__button { background: var(--hw-fill); color: var(--ui-text); }
.hw-avatar { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--hw-fill); color: var(--ui-text); font-size: 13px; font-weight: 600; }
.hw-menu__caret { width: 12px; height: 12px; transition: transform var(--ui-dur-1) var(--ui-ease); }
.hw-menu[open] .hw-menu__caret { transform: rotate(180deg); }
.hw-menu__panel { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 20; min-width: 15rem; padding: 0.35rem; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--hw-top); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); }
.hw-menu__who { display: grid; gap: 0.1rem; padding: 0.5rem 0.65rem 0.65rem; border-bottom: 1px solid var(--ui-border); font-size: 13px; }
.hw-menu__who small { color: var(--ui-text-muted); font-size: 12px; }
.hw-menu__who b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-app .hw-menu__plan { justify-self: start; margin-top: 0.3rem; font-size: 13px; }
.hw-menu__items { display: grid; padding: 0.35rem 0; }
.hw-menu__signout { padding-bottom: 0; border-top: 1px solid var(--ui-border); }
.ui-app .hw-menu__items a, .hw-menu__items button { display: block; width: 100%; padding: 0.45rem 0.65rem; border: 0; border-radius: 8px; background: none; color: var(--ui-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.hw-menu__items a:hover, .hw-menu__items button:hover, .hw-menu__items a[aria-current="page"] { background: var(--hw-fill); }
.hw-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: calc(100vh - 3.6rem); }
.hw-page { display: flex; flex-direction: column; gap: 1rem; padding: 2rem clamp(1rem, 3vw, 2.75rem) 4rem; min-width: 0; max-width: 80rem; }
.hw-page--bare { max-width: none; }

.hw-side { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem 0.75rem; border-right: 1px solid var(--ui-border); }
.hw-side__head { display: flex; justify-content: space-between; align-items: center; padding: 0 0.75rem; }
.hw-side__action { font-size: 13px; }
.hw-side__foot { align-self: flex-start; margin: 0.5rem 0.75rem 0; }
.hw-side__list { display: grid; gap: 2px; }
.ui-app .hw-side__item { display: grid; gap: 0.1rem; padding: 0.65rem 0.75rem; border-radius: 10px; color: var(--ui-text); transition: background var(--ui-dur-1) var(--ui-ease); }
.hw-side__item:hover { background: rgba(236, 232, 225, 0.05); }
.hw-side__item[aria-current="true"] { background: var(--hw-fill); }
/* Names wrap to two lines, then cut off. */
.hw-side__item b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
.hw-side__all b { font-weight: 600; }
.hw-side__frame { display: grid; gap: 2px; }
.hw-side__item small { font-size: 13px; color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
.hw-side__empty { margin: 0; padding: 0 0.75rem; font-size: 13px; color: var(--ui-text-muted); }
/* Narrow screens: the sidebar becomes the project switcher at the top of the page. */
.hw-switcher { display: none; position: relative; align-self: flex-start; }
.hw-switcher__button { display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.25rem 0; font-size: 14px; color: var(--ui-text-muted); cursor: pointer; list-style: none; }
.hw-switcher__button::-webkit-details-marker { display: none; }
.hw-switcher__panel { left: 0; right: auto; }
.ui-app .hw-menu__items a.hw-menu__phone, .hw-menu__burger { display: none; }
@media (max-width: 52rem) {
  .hw-shell { grid-template-columns: 1fr; }
  .hw-side { display: none; }
  .hw-switcher { display: block; }
  .hw-top { gap: 1rem; padding: 0.75rem 1rem; }
  .hw-top__who { display: none; }
}

/* Page header, tabs, period picker */
.hw-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2rem; }
.hw-head__title { display: grid; gap: 0.4rem; min-width: 0; }
.hw-head__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-left: auto; }
.hw-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.ui-app .hw-back { align-self: flex-start; justify-self: start; font-size: 13px; }
.hw-hosts { align-items: center; }
.hw-hosts .hw-live { font-family: var(--ui-font); padding: 2px 10px; }
.hw-editor-crumb { gap: 0.6rem; }
.hw-editor-crumb .ui-h2.ui-mono { font-size: 1rem; }
.hw-hosts { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font: 13px var(--ui-font-mono); }
.ui-app .hw-hosts a { color: var(--ui-text-muted); }
.ui-app .hw-hosts a:hover { color: var(--ui-text); }
.hw-crumb { font-size: 13px; color: var(--ui-text-muted); }
.ui-app .hw-crumb a { color: var(--ui-text-muted); }
.ui-app .hw-crumb a:hover { color: var(--ui-text); }

/* Scrolls sideways on narrow screens, without a visible scrollbar. The active underline is drawn inside the tab. */
.hw-tabs { display: flex; gap: 1.75rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--ui-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.hw-tabs::-webkit-scrollbar { display: none; }
.ui-app .hw-tab { padding: 0.25rem 0 0.75rem; color: var(--ui-text-muted); font-size: 14px; white-space: nowrap; }
.ui-app .hw-tab:hover { color: var(--ui-text); }
.ui-app .hw-tab[aria-current="page"] { color: var(--ui-text); box-shadow: inset 0 -2px 0 var(--ui-text); }
.hw-count { margin-left: 0.35rem; padding: 0 0.45rem; border: 1px solid var(--ui-border); border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums; }


.hw-select { height: 2.5rem; padding: 0 2rem 0 var(--ui-space-3); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius); background: rgba(0, 0, 0, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23bab5ab' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--ui-text); font: inherit; font-size: 14px; appearance: none; cursor: pointer; }
.hw-select:focus { outline: none; border-color: var(--ui-text); }

/* Panels and section headers */
.hw-section-head { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; }
.hw-section-head p { margin: 0; flex-basis: 100%; }
.hw-scroll-x { overflow-x: auto; }
/* A segmented control wider than its card scrolls inside it (Lab::UI's .ui-seg never shrinks, so on a phone it would clip) */
.hw-section-head .ui-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.hw-section-head .ui-seg::-webkit-scrollbar { display: none; }
.hw-note { font-size: 13px; color: var(--ui-text-muted); margin: 0; }
.hw-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1rem; align-items: start; }
/* Referrals: supporting stats, smaller than the KPI tiles. */
.hw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.ui-app .hw-stat { padding: 0.95rem 1.1rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface-2); }
.hw-stat .ui-stat__value { font-size: 1.5rem; letter-spacing: -0.01em; }
.hw-stat .ui-stat__value small { font-size: 0.95rem; font-weight: 400; color: var(--ui-text-muted); }
.hw-stat__note { font-size: 12.5px; color: var(--ui-text-muted); }
.hw-subhead { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }

/* Headline numbers: separate tiles. Each links to its chart. */
.hw-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 1rem; }
@media (max-width: 36rem) { .hw-kpis { gap: 0.6rem; } .ui-app .hw-kpi { padding: 1rem; } .hw-kpi__value { font-size: 1.9rem; } }
.ui-app .hw-kpi { display: grid; gap: 0.35rem; align-content: start; padding: 1.2rem 1.35rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); color: var(--ui-text); transition: border-color var(--ui-dur-1) var(--ui-ease); }
.ui-app a.hw-kpi:hover { border-color: var(--ui-border-strong); color: var(--ui-text); }
.ui-app .hw-kpi[aria-current="true"] { border-color: rgba(236, 232, 225, 0.45); }
.hw-kpi__label { font-family: var(--ui-font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-text-muted); }
.hw-kpi__value { font-size: 2.35rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
/* One short change line, so every tile is the same height. What it compares with is said once, in the chart legend. */
.hw-kpi__delta { min-height: 1lh; overflow: hidden; font-size: 13.5px; color: var(--ui-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.hw-kpi__delta--wrap { white-space: normal; } /* "collected, not confirmed" (#43): a status, not a number, so it may take two lines */
.hw-up { color: var(--ui-success); }
.hw-down { color: var(--ui-danger); }

/* Daily chart (drawn by chart_controller.js) */
.hw-chart-wrap { position: relative; }
.hw-chart { display: block; width: 100%; height: 230px; overflow: visible; }
.hw-chart text { fill: var(--ui-text-muted); font: 12px var(--ui-font); font-variant-numeric: tabular-nums; }
.hw-chart .grid { stroke: var(--ui-border); stroke-width: 1; }
.hw-chart .bar { fill: rgba(236, 232, 225, 0.85); transition: fill var(--ui-dur-1) var(--ui-ease); }
.hw-chart .bar.dim { fill: rgba(236, 232, 225, 0.3); }
.hw-chart .hit { fill: transparent; cursor: pointer; }
.hw-chart .previous { fill: none; stroke: rgba(236, 232, 225, 0.55); stroke-width: 1.5; stroke-dasharray: 5 4; stroke-linejoin: round; }
.hw-tooltip { position: absolute; pointer-events: none; padding: 6px 10px; border-radius: 6px; background: var(--ui-text); color: var(--ui-bg); font-size: 12.5px; white-space: nowrap; transform: translate(-50%, -100%); }
.hw-tooltip b { display: block; font-size: 15px; }
.hw-tooltip__hint { opacity: 0.7; }
.hw-details summary { cursor: pointer; font-size: 13px; color: var(--ui-text-muted); list-style: none; }
.hw-details summary:hover { color: var(--ui-text); }
.hw-details summary::-webkit-details-marker { display: none; }

/* Funnel: thick rounded bars, number beside */
.hw-funnel { display: grid; gap: 0.9rem; }
.hw-step { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 0.25rem 1.25rem; align-items: center; }
.hw-step__name { font-size: 14px; overflow-wrap: anywhere; }
.hw-step__track { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.hw-step__bar { flex: none; height: 10px; border-radius: 5px; background: var(--hw-bar); min-width: 4px; }
.hw-step__nums { display: flex; gap: 0.6rem; align-items: baseline; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hw-step__nums b { font-weight: 600; }
.hw-step__nums span { font-size: 13px; color: var(--ui-text-muted); }
.hw-step__drop { grid-column: 2; margin-top: -0.2rem; font-size: 13px; color: var(--ui-text-muted); }
.hw-step__matches { grid-column: 2; }
@media (max-width: 36rem) { .hw-step { grid-template-columns: 1fr; } .hw-step__drop, .hw-step__matches { grid-column: 1; } }

/* Breakdown tables: soft highlight behind each label, sized to its share */
.hw-bd { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.hw-bd th { padding: 0 0 0.5rem 0.75rem; font-size: 13px; font-weight: 400; color: var(--ui-text-muted); text-align: right; white-space: nowrap; }
.hw-bd th:first-child { padding-left: 0; text-align: left; }
.hw-bd td { padding: 0.45rem 0 0.45rem 0.75rem; border-top: 1px solid var(--ui-border); text-align: right; color: var(--ui-text-muted); white-space: nowrap; }
.hw-bd td:first-child { width: 55%; padding-left: 0; text-align: left; color: var(--ui-text); }
.hw-bd__label { position: relative; display: block; padding: 0.25rem 0.55rem; overflow: hidden; text-overflow: ellipsis; }
.hw-bd__fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--hw-fill); }
.hw-bd__label > span:not(.hw-bd__fill) { position: relative; }
.hw-bd td { vertical-align: top; }
.hw-bd .hw-bd { margin: 0.35rem 0 0.25rem; }
.hw-step__matches .hw-bd { margin-top: 0.5rem; }
.hw-bd__more > summary { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; list-style: none; }
.hw-bd__more > summary::-webkit-details-marker { display: none; }
.hw-bd__more > summary::before, .hw-step__matches > summary::before { content: "\25B8"; display: inline-block; width: 0.9em; font-size: 14px; line-height: 1; color: var(--ui-text-muted); }
.hw-bd__more[open] > summary::before, .hw-step__matches[open] > summary::before { content: "\25BE"; }
.hw-bd__more > summary > .hw-bd__label { flex: 1; min-width: 0; }

/* The shared filter: chips, + Filter menu, rows that toggle a value */
.hw-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.ui-app .hw-clear { font-size: 12.5px; color: var(--ui-text-muted); }
.ui-app a.ui-chip__remove { display: grid; place-items: center; color: var(--ui-text-muted); }
.hw-add-filter { border-style: dashed; color: var(--ui-text-muted); }
.hw-filter-menu { width: min(38rem, calc(100vw - 2rem)); padding: 0; margin: 0; }
.hw-filter-menu:popover-open { display: grid; grid-template-columns: 13rem minmax(0, 1fr); }
.hw-filter-menu__dimensions { display: grid; align-content: start; padding: 0.4rem; border-right: 1px solid var(--ui-border); }
.hw-filter-menu__dimensions button { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.65rem; border: 0; border-radius: 8px; background: none; color: var(--ui-text-muted); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.hw-filter-menu__dimensions button > span:first-child { flex: 1; }
.hw-filter-menu__dimensions button:hover, .hw-filter-menu__dimensions button[aria-pressed="true"] { background: var(--hw-fill); color: var(--ui-text); }
.hw-filter-menu__pane { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; min-width: 0; }
.hw-filter-menu__pane[hidden] { display: none; }
.hw-filter-menu__search { height: 2.25rem; }
.hw-filter-menu__values { display: grid; gap: 2px; max-height: 18rem; overflow-y: auto; }
.hw-filter-menu__values label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.35rem 0.4rem; border-radius: 6px; font-size: 14px; cursor: pointer; }
.hw-filter-menu__values label:hover { background: rgba(236, 232, 225, 0.05); }
.hw-filter-menu__values label[hidden] { display: none; }
.hw-filter-menu__values input { accent-color: #ece8e1; }
.hw-filter-menu__values label > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-filter-menu__count { color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
.hw-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-text); }
@media (max-width: 36rem) { .hw-filter-menu:popover-open { grid-template-columns: 1fr; } .hw-filter-menu__dimensions { grid-auto-flow: column; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ui-border); } }
.hw-bd tr.hw-dim td { opacity: 0.42; }
.hw-bd tbody tr:hover td { background: rgba(236, 232, 225, 0.035); }
.ui-app .hw-row-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ui-text); position: relative; }
.hw-check { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: var(--ui-text); color: var(--ui-bg); font-size: 10px; font-weight: 700; }
.hw-row-menu { position: relative; float: right; display: none; gap: 4px; margin-left: 0.5rem; }
.hw-bd tbody tr:hover .hw-row-menu, .hw-bd tbody tr:focus-within .hw-row-menu { display: inline-flex; }
.ui-app .hw-mini { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--ui-border-strong); border-radius: 6px; background: var(--ui-surface-2); color: var(--ui-text); font-size: 12px; }
.hw-bd td.hw-low { opacity: 0.55; }
.ui-app a.hw-step__name { color: var(--ui-text); }
.ui-app a.hw-step__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.hw-filters__rule { width: 1px; height: 22px; margin: 0 0.3rem; background: var(--ui-border); }
.hw-pages { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 64rem) { .hw-pages { grid-template-columns: minmax(0, 1fr); } }
.hw-bd tr.hw-selected td { background: rgba(236, 232, 225, 0.05); }
.hw-pages__list td:first-child { width: auto; }
.hw-page-detail__title { display: grid; gap: 2px; }
.hw-page-detail__title h2 { margin: 0; font-size: 20px; font-weight: 600; }
.hw-kpis--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.hw-kpis--five .ui-app .hw-kpi, .ui-app .hw-kpis--five .hw-kpi { padding: 1rem; }
.hw-kpis--five .hw-kpi__value { font-size: 1.75rem; }
.hw-kpis--five .hw-kpi__label { letter-spacing: 0.06em; }
@media (max-width: 80rem) { .hw-kpis--five { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); } }
.hw-page-detail .hw-split { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.hw-subcard { padding: 1.1rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface-2); gap: 0.75rem; }
.hw-subcard > b { font-weight: 600; font-size: 14px; }
.hw-flow { display: grid; gap: 4px; font-size: 14px; font-variant-numeric: tabular-nums; }
.hw-bar { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--hw-fill); overflow: hidden; }
.hw-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: rgba(236, 232, 225, 0.7); }
.hw-scroll-row { display: grid; grid-template-columns: 4rem 1fr 3rem; gap: 0.75rem; align-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.hw-scroll-row .hw-bar { height: 8px; }
.hw-scroll-row > :last-child { text-align: right; }
.hw-live-frame { display: contents; }
.hw-live { display: inline-flex; align-items: center; gap: 0.5rem; padding: 4px 11px; border: 1px solid rgba(185, 196, 168, 0.45); border-radius: 999px; background: none; color: var(--ui-success); font: inherit; font-size: 13px; cursor: pointer; }
.hw-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-success); box-shadow: 0 0 0 3px rgba(185, 196, 168, 0.18); }
.hw-live--none { border-color: var(--ui-border); color: var(--ui-text-muted); }
.hw-live--none .hw-live__dot { background: var(--ui-text-muted); box-shadow: none; }
.hw-live-list { width: min(30rem, calc(100vw - 2rem)); }
.hw-live-list ul { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.hw-live-list li { display: flex; gap: 0.5rem; align-items: baseline; }
.hw-visitors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.hw-visitors--open { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }
@media (max-width: 64rem) { .hw-visitors--open { grid-template-columns: minmax(0, 1fr); } }
.hw-journey-panel { gap: 1rem; }
.hw-journey-panel h2 { margin: 0; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.ui-app .hw-icon-link { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-text-muted); }
.hw-dl--tight { grid-template-columns: 7rem 1fr; font-size: 14px; }
.hw-dl--tight dt, .hw-dl--tight dd { padding: 0.4rem 0; }
.hw-journey-visit { gap: 0.4rem; padding-top: 0.75rem; border-top: 1px solid var(--ui-border); }
.hw-journey { display: grid; margin: 0; padding: 0; list-style: none; }
.hw-journey li { display: grid; grid-template-columns: 3rem 1rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; padding: 0.3rem 0; font-size: 14px; }
.hw-journey time { color: var(--ui-text-muted); font-variant-numeric: tabular-nums; }
.hw-journey__dot { justify-self: center; width: 9px; height: 9px; border-radius: 50%; background: rgba(236, 232, 225, 0.45); }
.hw-journey__click .hw-journey__dot { background: var(--ui-text); }
.hw-journey__form .hw-journey__dot { background: var(--ui-success); }
.hw-pager { justify-content: center; padding: 0.75rem 0; }
.hw-divider { height: 1px; background: var(--ui-border); }
.hw-note-form { width: min(24rem, calc(100vw - 2rem)); }
.hw-notes { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ui-text-muted); }
.hw-notes li { display: inline-flex; align-items: center; gap: 0.4rem; }
.hw-notes__number { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(236, 232, 225, 0.6); border-radius: 50%; color: var(--ui-text); font-size: 11px; font-weight: 600; }
.hw-notes__form { display: inline; margin: 0; }
.hw-notes__delete { border: 0; background: none; color: var(--ui-text-muted); cursor: pointer; font: inherit; padding: 0 0.2rem; }
.hw-notes__delete:hover { color: var(--ui-danger); }
.hw-chart .note-line { stroke: rgba(236, 232, 225, 0.35); stroke-dasharray: 2 3; }
.hw-chart .note-mark { fill: var(--ui-surface); stroke: rgba(236, 232, 225, 0.6); }
.hw-chart text.note-number { fill: var(--ui-text); font-size: 11px; font-weight: 600; }
.hw-legend { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 13px; color: var(--ui-text-muted); }
.hw-legend__bar { width: 10px; height: 10px; border-radius: 2px; background: rgba(236, 232, 225, 0.85); }
.hw-legend__previous { stroke: rgba(236, 232, 225, 0.55); stroke-width: 1.5; stroke-dasharray: 4 3; }

/* Loading (plan D17): lazy frames show a skeleton until their numbers arrive; a frame loading again dims */
.hw-numbers { display: flex; flex-direction: column; gap: 1rem; }
.hw-skeleton { display: flex; flex-direction: column; gap: 1rem; }
.hw-skeleton__status { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 14px; color: var(--ui-text-muted); }
.hw-spinner { width: 14px; height: 14px; border: 2px solid var(--ui-border-strong); border-top-color: var(--ui-text); border-radius: 50%; animation: hw-spin calc(var(--ui-dur-3) + 300ms) linear infinite; }
.hw-skeleton__block { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: linear-gradient(90deg, var(--ui-surface) 0%, var(--ui-surface-2) 50%, var(--ui-surface) 100%) 0 0 / 200% 100%; animation: hw-shimmer calc(var(--ui-dur-3) * 2.5) ease-in-out infinite; }
.hw-skeleton__tile { height: 7.5rem; }
.hw-skeleton__chart { height: 20rem; }
.hw-skeleton__card { height: 18rem; }
.hw-skeleton__item { height: 3.1rem; border-radius: 10px; }
.hw-skeleton--sidebar { gap: 2px; }
.hw-skeleton--sidebar .hw-skeleton__status { padding: 0 0.75rem 0.5rem; font-size: 13px; }
@keyframes hw-spin { to { transform: rotate(360deg); } }
@keyframes hw-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .hw-spinner, .hw-skeleton__block { animation: none; } }
turbo-frame[aria-busy="true"] > * { opacity: 0.5; transition: opacity var(--ui-dur-2) var(--ui-ease); }
turbo-frame[aria-busy="true"] { cursor: progress; }
/* A frame that only marks what a view switch replaces (switch_link) adds no box of its own */
.hw-frame { display: contents; }

/* Lists: projects, people, pages */
.hw-list { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.hw-list th { padding: 0 var(--ui-space-3) 0.5rem; font-size: 13px; font-weight: 400; color: var(--ui-text-muted); text-align: right; white-space: nowrap; }
.hw-list td { padding: 0.75rem var(--ui-space-3); border-top: 1px solid var(--ui-border); text-align: right; white-space: nowrap; }
.hw-list tr > :first-child { padding-left: 0; }
.hw-list tr > :last-child { padding-right: 0; }
.hw-list .hw-left { text-align: left; }
.hw-list tbody tr { transition: background var(--ui-dur-1) var(--ui-ease); }
.hw-list tbody tr:hover { background: rgba(236, 232, 225, 0.025); }
.hw-list__name { display: grid; gap: 2px; }
.hw-list__name b { font-weight: 500; }
.hw-list__name span { font-size: 13px; color: var(--ui-text-muted); font-family: var(--ui-font-mono); }
.hw-list__name span.hw-plain { font-family: var(--ui-font); }
.ui-app .hw-row-link { color: inherit; }
.hw-muted-cell { color: var(--ui-text-muted); }
.hw-spark { display: block; margin-left: auto; }
.hw-spark__area { fill: rgba(236, 232, 225, 0.08); }
.hw-spark__line { fill: none; stroke: rgba(236, 232, 225, 0.8); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.hw-spark__dot { fill: var(--ui-text); stroke: var(--ui-surface); stroke-width: 2; }
.hw-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.hw-tools { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.hw-tools .ui-input { max-width: 20rem; height: 2.25rem; }

/* Setup */
.hw-setup-nav { align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.hw-setup-nav::-webkit-scrollbar { display: none; }
.hw-setup-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 1rem; align-items: start; }
@media (max-width: 64rem) { .hw-setup-overview { grid-template-columns: minmax(0, 1fr); } }
/* The three ways to use Hunchwire (area 3): New project and Build › Where it lives */
.hw-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.ui-app .hw-way { gap: 0.5rem; padding: 1.1rem 1.25rem; font-size: 14px; }
.hw-way__head b { font-weight: 600; }
.hw-way__radio { width: 15px; height: 15px; margin: 0; accent-color: #ece8e1; }
label.hw-way { cursor: pointer; }
label.hw-way:has(.hw-way__radio:checked) { border-color: rgba(236, 232, 225, 0.45); }
.hw-way__action { margin-top: auto; padding-top: 0.25rem; }
.hw-inline-form { display: inline; margin: 0; }
.hw-new-project [data-way] { display: none; }
.hw-new-project:has(#project_way_hosted_pages:checked) [data-way="hosted_pages"],
.hw-new-project:has(#project_way_own_site_forms:checked) [data-way="own_site_forms"],
.hw-new-project:has(#project_way_own_site_api:checked) [data-way="own_site_api"] { display: flex; }
.hw-way-line { align-self: flex-start; }
.hw-optional { margin: 1.25rem 0 0; }
.hw-questions { display: grid; margin: 0; padding: 0; list-style: none; }
.hw-questions li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.6rem 0; border-top: 1px solid var(--ui-border); }
.hw-questions li:first-child { border-top: 0; }
.hw-questions .ui-badge { justify-self: start; }
.hw-add-question { grid-template-columns: 11rem minmax(0, 2fr) minmax(0, 1.5fr) auto; align-items: start; }
.hw-choices-input { height: 2.5rem; min-height: 2.5rem; padding-top: 0.55rem; resize: vertical; }
.hw-visitor-preview { display: grid; gap: 0.5rem; min-width: 0; padding: 1rem; border-radius: var(--ui-radius-lg); background: var(--ui-surface-2); }
.hw-preview-card { max-width: 30rem; gap: 0.6rem; }
.hw-preview-card .ui-code { white-space: pre-wrap; overflow-wrap: anywhere; } /* a person's link wraps on a phone */
.hw-preview-card .ui-input { height: 2.25rem; }
.hw-answers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hw-answers dt { color: var(--ui-text-muted); }
/* A segmented control whose items are button_to forms (Build › After joining: On / Off). */
.ui-seg > .hw-inline-form { display: flex; }
.ui-seg > .hw-inline-form > button { padding: 4px 11px; border: 0; background: none; color: var(--ui-text-muted); font: inherit; font-size: 12.5px; line-height: 1.6; cursor: pointer; }
.ui-seg > .hw-inline-form > button:hover { color: var(--ui-text); }
.ui-seg > .hw-inline-form > button[aria-pressed="true"] { background: rgba(236, 232, 225, 0.1); color: var(--ui-text); }
.hw-lock { padding: 1px 6px; border: 1px solid var(--ui-border-strong); border-radius: 4px; font: 600 11px var(--ui-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-text-muted); }
.hw-list td.hw-record-value { min-width: 12rem; max-width: 22rem; white-space: normal; overflow-wrap: anywhere; word-break: break-all; } /* a DKIM key is one long word */
.hw-list td.hw-record-value .hw-note { word-break: normal; overflow-wrap: break-word; }
.hw-copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.25rem 0.6rem; } /* the value, left-aligned, then its Copy on the same row; wraps under a long value (#397, #437) */
.hw-copy > .ui-mono { min-width: 0; text-align: left; }
/* The release gate: a modal over the step (Launch area 9) */
.hw-gate { width: min(24rem, calc(100vw - 2rem)); padding: 1.1rem 1.25rem; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-lg); background: var(--ui-surface-2); color: var(--ui-text); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }
.hw-gate[open] { display: grid; gap: 0.75rem; }
.hw-gate::backdrop { background: rgba(0, 0, 0, 0.5); }
.hw-gate button.hw-icon-link { background: none; font: inherit; cursor: pointer; }
/* Usage and an inactive account (Launch area 9) */
.hw-usage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.hw-usage__meter { flex: 1; min-width: 5rem; max-width: 14rem; height: 6px; border-radius: 3px; background: var(--hw-fill); overflow: hidden; }
.hw-usage__meter i { display: block; height: 100%; border-radius: 3px; background: var(--hw-bar); }
.hw-locked__count { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ui-text); }
.hw-check-mark--optional { border: 1.5px solid var(--ui-border-strong); color: var(--ui-text-muted); }
.hw-version-bar { padding: 1rem 1.5rem; }
.hw-add-version { gap: 0.5rem; flex-wrap: nowrap; }
.hw-split summary { gap: 0.6rem; }
.hw-check-done summary { padding: 0.9rem 0 0.2rem; border-top: 1px solid var(--ui-border); }
.hw-check-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.9rem 0; border-top: 1px solid var(--ui-border); }
.hw-check-row__text { display: grid; gap: 1px; }
.hw-check-row__text b { font-weight: 500; }
.hw-check-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700; }
.hw-check-mark--done { background: var(--ui-text); color: var(--ui-bg); }
.hw-check-mark--todo { border: 1.5px solid var(--ui-warning); color: var(--ui-warning); }
.hw-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.9rem; }
.hw-details .hw-files { margin-top: 0.9rem; }
.ui-app .hw-file-tile { display: grid; gap: 0.35rem; color: var(--ui-text); font-size: 12px; min-width: 0; }
.hw-file-tile .ui-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-file-tile__thumb { display: grid; place-items: center; width: 100%; height: 5.25rem; object-fit: cover; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface-2); font: 12px var(--ui-font-mono); color: var(--ui-text-muted); }
.hw-dl { display: grid; grid-template-columns: 10rem 1fr; margin: 0; }
.hw-dl dt, .hw-dl dd { margin: 0; padding: 0.75rem 0; border-top: 1px solid var(--ui-border); }
.hw-dl dt:first-of-type, .hw-dl dt:first-of-type + dd { border-top: 0; }
.hw-dl dt { color: var(--ui-text-muted); }
.hw-dl dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 36rem) { .hw-dl { grid-template-columns: 1fr; } .hw-dl dd { border-top: 0; padding-top: 0; } }
.hw-steps { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: step 1; }
.hw-steps li { display: grid; grid-template-columns: 1.75rem minmax(8rem, 11rem) 1fr auto; gap: 0.6rem; align-items: center; padding: 0.55rem 0; border-top: 1px solid var(--ui-border); counter-increment: step; }
.hw-steps li:first-child { border-top: 0; }
.hw-steps li::before { content: counter(step) "."; font-size: 13px; color: var(--ui-text-muted); }
.hw-steps li.hw-steps__first { counter-increment: none; }
.hw-steps li.hw-steps__first::before { content: "1."; }
.hw-steps .hw-select, .hw-steps .ui-input { width: 100%; height: 2.25rem; }
@media (max-width: 36rem) { .hw-steps li { grid-template-columns: 1.75rem 1fr; } .hw-steps li > :nth-child(n+2) { grid-column: 2; } }
.hw-step-actions { display: flex; gap: 4px; }
.hw-icon-btn { width: 2rem; height: 2rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: transparent; color: var(--ui-text-muted); cursor: pointer; font: inherit; }
.hw-icon-btn:hover:not(:disabled) { color: var(--ui-text); border-color: var(--ui-border-strong); }
.hw-icon-btn:disabled { opacity: 0.35; cursor: default; }
.hw-builder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--ui-space-3); }
.hw-builder .hw-select { width: 100%; }
.hw-spend-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--ui-space-3); align-items: end; }
.hw-spend-form .hw-select { width: 100%; }
.hw-row-actions { display: inline-flex; gap: var(--ui-space-2); justify-content: flex-end; }
.hw-presets { display: flex; gap: var(--ui-space-2); flex-wrap: wrap; }
.hw-presets button { cursor: pointer; background: transparent; font: inherit; }
.hw-presets button[aria-pressed="true"] { border-color: var(--ui-text); color: var(--ui-text); }
.hw-out { display: flex; gap: var(--ui-space-2); align-items: stretch; flex-wrap: wrap; }
.hw-out .ui-code { flex: 1 1 18rem; white-space: pre-wrap; word-break: break-all; }
/* Setup › Share: saved campaign links (#210) */
.hw-link-form { padding: var(--ui-space-4); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
.hw-link-form[hidden] { display: none; }
/* A code panel behind a tab (Let people in, API, Webhooks): ui-code's display: block would otherwise show it. */
.ui-code[hidden] { display: none; }
.hw-list td.hw-link-cell { white-space: normal; min-width: 14rem; }
.hw-link-cell .hw-list__name span { overflow-wrap: anywhere; }
.hw-list td.hw-link-actions { white-space: normal; }
.hw-link-actions .hw-row-actions { flex-wrap: wrap; max-width: 11rem; }
.hw-list tr.hw-dim > td:not(:last-child) { opacity: 0.55; }
.hw-list tr.hw-inline-row td { border-top: 0; padding-top: 0; white-space: normal; }
.hw-list tr.hw-inline-row:hover { background: none; }
.hw-list .hw-row-actions form { display: inline; }
.hw-list .ui-badge.hw-low { color: var(--ui-warning); }
/* Setup › Settings › Internal traffic (#111) */
.hw-ip-status { display: flex; align-items: center; gap: var(--ui-space-2) var(--ui-space-3); flex-wrap: wrap; }
.hw-ip-hint { margin: 0; display: inline-flex; align-items: center; gap: var(--ui-space-2); }
.hw-ip-hint::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-danger); }
.hw-ip-hint--ok::before { background: var(--ui-success); }
.hw-ip-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--ui-space-3); align-items: end; }
@media (max-width: 40rem) { .hw-ip-form { grid-template-columns: 1fr; } }
.hw-ignored-counts { display: grid; gap: var(--ui-space-1); padding-top: var(--ui-space-3); border-top: 1px solid var(--ui-border); }
.hw-danger { border-color: rgba(215, 154, 140, 0.3); }
.hw-danger-button.ui-button--ghost { color: var(--ui-danger); border-color: rgba(215, 154, 140, 0.45); }
.ui-app .hw-danger-button.ui-button--ghost:hover { color: var(--ui-danger); }
.hw-preview { max-width: 100%; max-height: 16rem; object-fit: contain; align-self: flex-start; border-radius: var(--ui-radius); border: 1px solid var(--ui-border); background: var(--ui-surface-2); }
.hw-file { height: auto; padding: var(--ui-space-2); }

/* Agents, approve, sign in */
/* Bare card: pages outside the app (approving an agent), like sign-in. */
.hw-bare { display: flex; flex-direction: column; gap: var(--ui-space-4); width: 100%; max-width: 30rem; margin: 6vh auto 0; }
.ui-app .hw-bare__brand { align-self: flex-start; font-size: 1.25rem; }
.hw-bare__who { text-align: center; }
.hw-code { font: 600 2.1rem/1 var(--ui-font-mono); letter-spacing: 0.1em; text-align: center; padding: 1.1rem 0; border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius); }
.hw-fieldset { border: 0; margin: 0; padding: 0; }
.hw-perm { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--ui-space-3); align-items: start; padding: 0.85rem 1rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); cursor: pointer; }
.hw-perm:has(input:checked) { border-color: var(--ui-border-strong); background: rgba(236, 232, 225, 0.04); }
.hw-perm input { grid-row: span 2; margin-top: 4px; width: 15px; height: 15px; accent-color: #ece8e1; }
.hw-perm b { font-weight: 500; }
.hw-perm span { font-size: 14px; color: var(--ui-text-muted); }
.hw-done { text-align: center; justify-items: center; }
.hw-done-mark { font-family: var(--ui-font-display); font-style: italic; font-size: 2rem; line-height: 1; }
/* Ad accounts › Connect Meta (#405): the steps to make a token in Meta */
.hw-token-steps { display: grid; gap: 0.35rem; margin: 0; padding-left: 1.25rem; font-size: 14px; color: var(--ui-text-muted); }
.hw-token-steps b { color: var(--ui-text); font-weight: 500; }
.hw-howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--ui-space-3); margin: 0; padding: 0; list-style: none; counter-reset: howto; }
.hw-howto li { counter-increment: howto; display: grid; align-content: start; gap: 4px; padding: 0.9rem 1rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); font-size: 14px; color: var(--ui-text-muted); }
.hw-howto li::before { content: "Step " counter(howto); font: 12px var(--ui-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-text-muted); }
.hw-howto b { color: var(--ui-text); font-weight: 500; }
.hw-revoked td { opacity: 0.5; }
.hw-activity { display: grid; margin: 0; padding: 0; list-style: none; }
.hw-activity li { display: grid; grid-template-columns: 11rem 12rem 1fr; gap: var(--ui-space-3); padding: 0.65rem 0; border-top: 1px solid var(--ui-border); font-size: 14px; }
.hw-activity li:first-child { border-top: 0; }
.hw-activity time { color: var(--ui-text-muted); }
@media (max-width: 40rem) { .hw-activity li { grid-template-columns: 1fr; gap: 2px; } }

/* Inline confirmation for destructive actions */
.hw-confirm { display: inline-flex; align-items: center; gap: var(--ui-space-2); flex-wrap: wrap; justify-content: flex-end; }
.hw-confirm__question { display: inline-flex; align-items: center; gap: var(--ui-space-2); flex-wrap: wrap; justify-content: flex-end; }
.hw-confirm__question[hidden], .hw-confirm > button[hidden] { display: none; }
.hw-confirm__text { font-size: 13.5px; color: var(--ui-text-muted); white-space: normal; text-align: right; }
.hw-confirm__form { display: inline; margin: 0; }
.ui-button.hw-danger-solid { background: var(--ui-danger); border-color: var(--ui-danger); color: var(--ui-bg); }
.ui-button.hw-danger-solid:hover { background: #e6ad9f; border-color: #e6ad9f; }

/* Empty state: what will appear, the one action, and that an agent can do it */
.hw-empty { align-items: center; gap: var(--ui-space-2); padding: 2.5rem var(--ui-space-6); }
.hw-empty > b { color: var(--ui-text); font-weight: 600; }
.hw-empty__actions { justify-content: center; margin-top: var(--ui-space-2); }

/* First-use hints (area 8): a card in the page, never a modal. */
.hw-hint { display: grid; gap: 0.4rem; max-width: 30rem; padding: 0.85rem 1rem; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-lg); background: var(--ui-surface-2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); font-size: 14px; }
.hw-hint > b { font-weight: 600; }
.hw-hint__actions { margin-top: 0.25rem; }
.hw-hint__dismiss { padding: 0; border: 0; background: none; color: var(--ui-text-muted); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hw-hint__dismiss:hover { color: var(--ui-text); }
.hw-ask-agent { display: inline-flex; }

/* The period and Refresh stay together, at the right, wrapping as one */
.hw-filters__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem; margin-left: auto; }

/* Refresh, beside the period: when the numbers were loaded, and a button to load them again in place */
.hw-refresh { display: inline-flex; align-items: center; gap: 0.5rem; }
.hw-refresh__time { display: none; }
@media (max-width: 40rem) { .hw-refresh button { font-size: 0; } .hw-refresh button::before { content: "↻"; font-size: 14px; } }

/* The period, at the right of the filter bar */
.hw-period > a::after { content: attr(data-short); display: none; }
.hw-phone-note { display: none; margin: 0; font-size: 14px; color: var(--ui-text-muted); }

/* Phones: the reading screens (Analytics, People, a person, approving an agent). Setup and editors say they're best on a larger screen. */
@media (max-width: 40rem) {
  .hw-top__nav, .hw-avatar, .hw-menu__caret { display: none; }
  .hw-menu__burger { display: block; width: 18px; height: 18px; }
  .hw-menu__button { padding: 0.4rem; }
  .ui-app .hw-menu__items a.hw-menu__phone { display: block; }
  .hw-page { padding: 1rem 1rem 3rem; }
  .hw-head--project .ui-eyebrow, .hw-head--project .ui-h1 { display: none; }
  .ui-h1 { font-size: 1.6rem; }
  .hw-kpis { grid-template-columns: 1fr 1fr; }
  .hw-period > a > span { display: none; }
  .hw-period > a::after { display: inline; }
  .hw-period > .hw-period__extra { display: none; }
  .hw-phone-note { display: block; }
  .hw-list--cards thead { display: none; }
  .hw-list--cards tbody tr { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; padding: 0.75rem 0; border-top: 1px solid var(--ui-border); }
  .hw-list--cards tbody tr:first-child { border-top: 0; }
  .hw-list--cards td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  .hw-list--cards td:first-child { flex-basis: 100%; font-weight: 500; }
  .hw-list--cards .hw-wide-only { display: none; }
  .hw-list--cards .hw-list__name { display: inline-flex; gap: 0.4rem; }
}

/* Agents: disconnected agents behind an expander; activity paging */
.hw-more > summary { cursor: pointer; width: fit-content; font-size: 14px; }
.hw-more[open] > summary { margin-bottom: var(--ui-space-3); }
.hw-pager { display: flex; align-items: center; gap: var(--ui-space-4); font-size: 14px; padding-top: var(--ui-space-3); border-top: 1px solid var(--ui-border); }

/* The embed (a10-embed): a still preview of the form, in the theme chosen */
.hw-embed-preview { display: grid; gap: 0.4rem; padding: 1rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-bg); color: var(--ui-text); }
.hw-embed-preview--light { --ui-bg: #f7f6f3; --ui-text: #141416; --ui-border: rgba(20, 20, 22, 0.12); --ui-text-muted: #5d5a55; }
.hw-embed-preview__label { font-size: 13px; color: var(--ui-text-muted); }
.hw-embed-preview__input { height: 2.25rem; padding: 0 0.75rem; display: flex; align-items: center; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); font-size: 13px; color: var(--ui-text-muted); }
.hw-embed-preview__button { justify-self: start; margin-top: 0.25rem; padding: 0.45rem 1rem; border-radius: var(--ui-radius); background: var(--ui-text); color: var(--ui-bg); font-size: 13px; font-weight: 500; }

/* Insights (#33): an agent's conclusion, with Pin, Dismiss and one reply */
.hw-insight { display: grid; gap: 0.35rem; }
.hw-insight__head { gap: 0.5rem; }
.hw-insight__form { display: inline; margin: 0; }
.hw-insight__text { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.hw-insight__foot { gap: 1rem; font-size: 13px; }
.hw-insight__reply summary { cursor: pointer; color: var(--ui-text-muted); list-style: none; }
.hw-insight__reply summary::-webkit-details-marker { display: none; }
.hw-insight__reply summary:hover { color: var(--ui-text); }
.hw-insight__reply[open] { flex-basis: 100%; }
.hw-insight__reply form { margin-top: 0.4rem; flex-wrap: nowrap; }
.hw-insight__reply .ui-input { height: 2.25rem; }
.hw-insight__answer { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.hw-insights--dismissed { margin-top: 0.75rem; opacity: 0.75; }
/* Overview's insights (#401): one plain list of the newest new one and the pinned, only when there are any */
.hw-insight-rows { display: grid; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.hw-insight-row { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) auto; gap: 0.25rem 0.9rem; align-items: start; padding: 0.8rem 1rem; }
.hw-insight-row + .hw-insight-row { border-top: 1px solid var(--ui-border); }
.hw-insight-row__badge { justify-self: start; font-family: var(--ui-font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.hw-insight-row--new .hw-insight-row__badge, .hw-insight__head .hw-insight-row__badge { background: var(--ui-text); border-color: var(--ui-text); color: var(--ui-bg); }
.hw-insight-row__text { margin: 0; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.hw-insight-row__meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.2rem 0.75rem; font-size: 12.5px; color: var(--ui-text-muted); min-width: 0; }
.ui-app .hw-insight-row__more { color: var(--ui-text-muted); }
.hw-insight-row__actions { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: 0.4rem; align-items: center; }
@media (max-width: 36rem) {
  .hw-insight-row { grid-template-columns: minmax(0, 1fr); padding: 0.8rem 0.9rem; }
  .hw-insight-row__meta, .hw-insight-row__actions { grid-column: 1; grid-row: auto; }
  .hw-insight-row__actions .hw-insight__form { flex: 1; }
  .hw-insight-row__actions .ui-button { width: 100%; box-sizing: border-box; }
}
.hw-count { display: inline-block; margin-left: 0.3rem; padding: 0.15rem 0.4rem; border-radius: 999px; background: var(--ui-text); color: var(--ui-bg); font-family: var(--ui-font-mono); font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; }
.hw-pages__measure { align-self: flex-start; }

/* Compare's chart: one line per column, told apart by dash and weight (the app has no accent colors) */
.hw-series { fill: none; stroke: var(--ui-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hw-series--1 { stroke-opacity: 0.75; stroke-dasharray: 6 4; }
.hw-series--2 { stroke-opacity: 0.6; stroke-dasharray: 2 3; }
.hw-series--3 { stroke-opacity: 0.5; stroke-dasharray: 10 4 2 4; }
.hw-series--4 { stroke-opacity: 0.4; stroke-width: 1.5; }
.hw-series--5 { stroke-opacity: 0.4; stroke-width: 1.5; stroke-dasharray: 6 4; }
.hw-chart .hw-series { pointer-events: none; }
.hw-compare th { white-space: normal; vertical-align: bottom; min-width: 7rem; }
.hw-compare td.hw-low { opacity: 0.55; }
/* Analytics' five views and People's four: on a phone the switch scrolls sideways, like the project tabs, instead of widening the page */
@media (max-width: 36rem) {
  .hw-filters > nav.ui-seg:is([aria-label=Analytics], [aria-label="People, emails, waves or blocked"]) { flex-shrink: 1; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .hw-filters > nav.ui-seg:is([aria-label=Analytics], [aria-label="People, emails, waves or blocked"])::-webkit-scrollbar { display: none; }
}

/* Share kit: the share image's preview, drawn like the PNG (ShareImage). */
.hw-share-image { display: grid; gap: 0.6rem; align-content: center; aspect-ratio: 1200 / 630; padding: 1.5rem 2rem; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.hw-share-image b { font-family: var(--ui-font-display); font-weight: 450; font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); line-height: 1.15; }
.hw-share-image span { font-family: var(--ui-font-display); font-style: italic; color: var(--ui-text-muted); }
.hw-share-image small { font-family: var(--ui-font-display); color: var(--ui-text-muted); }
/* Build › Referrals: each side's choice is as wide as its options, not the card. */
.hw-choice { align-self: flex-start; flex-wrap: wrap; }

/* Build › Referrals › Milestones: friends, reward and Save on one line. */
.hw-milestone-form { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); align-items: center; }
.hw-milestone-form .ui-input[type=text] { flex: 1 1 14rem; width: auto; }
.hw-milestone-form .ui-input[type=number] { flex: 0 0 6rem; }

/* A person's profile (area 6): cards in a row share one height (Note 15). */
.hw-profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: stretch; }
.hw-profile .ui-card { gap: 0.75rem; }
.hw-history li { grid-template-columns: 8.5rem 1fr; }
.hw-head__meta .ui-badge { margin-right: 0.35rem; }
.hw-person-title { overflow-wrap: anywhere; }
.hw-move { position: relative; }
.hw-move > summary { list-style: none; }
.hw-move > summary::-webkit-details-marker { display: none; }
.hw-move__form { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 5; flex-wrap: nowrap; padding: 0.75rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-bg); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); }
.hw-move__form .ui-input { width: 6rem; height: 2rem; }
/* On a phone Move in line opens in the page, under the buttons, like Save as segment: a popover would leave the screen. */
@media (max-width: 40rem) { .hw-move[open] { flex-basis: 100%; } .hw-move__form { position: static; flex-wrap: wrap; margin-top: 0.5rem; box-shadow: none; } }
.hw-segments { gap: 0.75rem; }
.hw-segments .ui-seg { flex-shrink: 1; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.hw-segments .ui-seg::-webkit-scrollbar { display: none; }
.hw-save-segment[open] { flex-basis: 100%; }
.hw-save-segment .hw-move__form { position: static; margin-top: 0.5rem; box-shadow: none; max-width: 32rem; }
.hw-save-segment .hw-move__form .ui-row { flex-wrap: wrap; }
.hw-list .hw-pick { width: 1.5rem; padding-right: 0; }
.hw-pick input { accent-color: #ece8e1; }
.hw-select-everyone { border: 0; background: none; cursor: pointer; padding: 0; }
.hw-perm input.hw-wave-top { display: inline-block; grid-row: auto; width: 5rem; height: 2rem; margin: 0 0.25rem; accent-color: auto; }
.hw-wave-form .hw-perm span .hw-select { display: inline-block; width: auto; height: 2rem; margin: 0 0.25rem; }
.hw-wave-links { min-height: 6rem; }

/* A person's rewards, on their profile's Referrals card. */
.hw-rewards { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }

/* People › Emails (area 6): the message keeps its lines, in the box and the preview */
.hw-email-body { font-family: var(--ui-font); font-size: 14px; }
.hw-email-preview { gap: 0.5rem; padding: 1rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface-2); }
.hw-email-preview__body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }

/* The email card (#344, EmailHelper): a warning-toned card until email is set up, one quiet line once the founder sends by hand. */
.hw-email-nudge { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0.75rem; padding: 0.9rem 1rem; border: 1px solid color-mix(in srgb, var(--ui-warning) 45%, transparent); border-radius: var(--ui-radius-lg); background: color-mix(in srgb, var(--ui-warning) 7%, var(--ui-surface)); }
.hw-email-nudge__text { display: grid; gap: 0.25rem; min-width: 0; }
.hw-email-nudge__text b { font-weight: 600; }
.hw-email-nudge__actions { margin-top: 0.4rem; gap: 0.5rem; }
.hw-email-nudge--compact { display: block; margin: 0; padding: 0; border: 0; background: none; font-size: 12.5px; color: var(--ui-text-muted); }
.hw-email-by-hand { margin: 0; font-size: 12.5px; color: var(--ui-text-muted); }
.hw-link-button { padding: 0; border: 0; background: none; font: inherit; color: var(--ui-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ui-border-strong); cursor: pointer; }
.hw-email-check__actions { gap: 0.5rem; justify-content: flex-end; }

/* Build (#407): the steps beside a live preview, split by a handle the founder drags (split_controller.js).
   --hw-steps is their choice, clamped there to 340px of steps and 420px of preview. Where both don't fit
   (hw-build--turns), Edit and Preview take turns. DNS mode puts the records in the preview's room. */
.hw-build-wrap { min-width: 0; }
.hw-build { --hw-steps: 400px; display: grid; grid-template-columns: var(--hw-steps) 9px minmax(0, 1fr); align-items: start; min-width: 0; }
.hw-build[data-full]:not([data-dns="true"]) { grid-template-columns: minmax(0, 1fr); }
.hw-build[data-full]:not([data-dns="true"]) .hw-build__steps, .hw-build[data-full]:not([data-dns="true"]) .hw-build__handle { display: none; }
.hw-build__mode { display: none; }
.hw-build [hidden] { display: none !important; }
.hw-build__steps { display: grid; gap: 0.5rem; min-width: 0; padding-right: 0.75rem; }
.hw-build__frame { display: grid; gap: 0.5rem; min-width: 0; }
.hw-build__progress { display: flex; align-items: center; gap: 0.75rem; font-size: 13px; color: var(--ui-text-muted); }
.hw-build__progress .hw-meter { flex: 1; display: block; height: 4px; border-radius: 4px; background: var(--hw-fill); overflow: hidden; }
.hw-build__progress .hw-meter i { display: block; height: 100%; background: var(--ui-success); }
.hw-build__handle { position: sticky; top: 4.5rem; align-self: stretch; min-height: calc(100vh - 6rem); cursor: col-resize; touch-action: none; }
.hw-build__handle::before { content: ""; position: absolute; inset: 0 4px; background: var(--ui-border); }
.hw-build__handle::after { content: ""; position: absolute; left: 2px; top: 40vh; width: 5px; height: 36px; border-radius: 3px; background: var(--ui-border-strong); }
.hw-build__handle:hover::before, .hw-build__handle:focus-visible::before, .hw-build--resizing .hw-build__handle::before { background: var(--ui-text-muted); }
.hw-build__handle:hover::after, .hw-build--resizing .hw-build__handle::after { background: var(--ui-text); }
.hw-build--resizing { cursor: col-resize; user-select: none; }
.hw-build--resizing iframe { pointer-events: none; }
.hw-build__preview { position: sticky; top: 4.5rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; height: calc(100vh - 6rem); padding-left: 0.75rem; }
.hw-build__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.hw-build__bar .ui-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.hw-build__stage { flex: 1; display: flex; justify-content: center; min-height: 0; padding: 0.75rem; border: 1px solid var(--ui-border); border-radius: 12px; background: color-mix(in srgb, var(--ui-surface) 60%, #000); }
.hw-build__view { width: 100%; height: 100%; min-height: 24rem; border: 1px solid var(--ui-border-strong); border-radius: 10px; background: var(--ui-surface); transition: max-width var(--ui-dur-2, 0.25s) var(--ui-ease); }
.hw-build__stage--phone .hw-build__view { max-width: 375px; border-radius: 24px; }
.hw-build__note { margin: 0; font-size: 12.5px; color: var(--ui-text-muted); text-align: center; overflow-wrap: anywhere; }
.hw-build__dns { overflow: auto; min-height: 0; }
.hw-bstep { border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface); min-width: 0; }
.hw-bstep--open { border-color: var(--ui-border-strong); }
.ui-app .hw-bstep__head { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 0.8rem; color: var(--ui-text); min-width: 0; }
.hw-bstep__head b { font-weight: 500; white-space: nowrap; }
.hw-bstep__num { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--ui-border-strong); font-size: 11px; color: var(--ui-text-muted); }
.hw-bstep__num--done { border-color: var(--ui-success); color: var(--ui-success); }
.hw-bstep__sum { margin-left: auto; min-width: 0; font-size: 12.5px; color: var(--ui-text-muted); text-align: right; overflow-wrap: anywhere; }
.hw-bstep__body { display: grid; gap: 1rem; min-width: 0; padding: 0 0.9rem 1rem 2.6rem; }
.hw-bstep__body > * { min-width: 0; }
.hw-build-next { justify-self: start; }
.hw-build-ways { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.hw-build-slug { flex-wrap: wrap; gap: 0.5rem; }
.hw-build-slug .ui-input { flex: 1 1 8rem; min-width: 0; }
.hw-domain-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border: 1px solid var(--ui-border); border-radius: 10px; }
.hw-domain-line__name { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
.hw-forwarding > summary { list-style: none; cursor: pointer; }
.hw-forwarding > summary::-webkit-details-marker { display: none; }
.hw-forwarding[open] > summary .ui-button { visibility: hidden; }
.hw-forwarding__form, .hw-forwarding > .ui-field, .hw-forwarding > .ui-hint { margin-top: 0.75rem; }
.hw-forwarding > div:last-child { margin-top: 0.75rem; }
.hw-forwarding__secret { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.hw-forwarding__hidden { margin: 0.5rem 0 0; }
.hw-build-empty { display: grid; gap: 0.5rem; padding: 0.8rem; border: 1px dashed var(--ui-border-strong); border-radius: 10px; }
.hw-build-empty b { font-weight: 500; }
.hw-build-list { display: grid; border: 1px solid var(--ui-border); border-radius: 10px; overflow: hidden; }
.ui-app .hw-build-list__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.7rem; color: var(--ui-text); min-width: 0; }
.hw-build-list__item + .hw-build-list__item { border-top: 1px solid var(--ui-border); }
.hw-build-list__item[aria-current="true"] { background: var(--hw-fill); }
.hw-build-list__grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hw-build-html { min-height: 12rem; font-size: 12px; }
.hw-build-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.hw-radio-seg { justify-self: start; width: fit-content; max-width: 100%; }
.hw-radio-seg > label { display: inline-flex; padding: 4px 11px; font-size: 12.5px; line-height: 1.6; color: var(--ui-text-muted); cursor: pointer; }
.hw-radio-seg > label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hw-radio-seg > label:has(input:checked) { background: color-mix(in srgb, var(--ui-text) 10%, transparent); color: var(--ui-text); }
.hw-radio-seg > label:has(input:focus-visible) { outline: 2px solid var(--ui-text); outline-offset: -2px; }
.hw-build-override { margin: 0; font-size: 13px; }
.hw-build-question { all: unset; cursor: pointer; overflow-wrap: anywhere; }
.hw-build-question:hover { color: var(--ui-text); text-decoration: underline; text-underline-offset: 2px; }
.hw-build-snippet { white-space: pre-wrap; overflow-wrap: anywhere; }
.hw-build-note { margin: 0; padding: 0.3rem 0.7rem; border-left: 2px solid var(--ui-warning); font-size: 13px; color: var(--ui-text-muted); }
.hw-build-live .hw-check-row { grid-template-columns: 1.75rem minmax(0, 1fr); }
.hw-build-live .hw-check-row > :nth-child(n+3) { grid-column: 2; justify-self: start; }
/* Edit and Preview take turns where both don't fit. DNS mode shows the records alone. */
.hw-build--turns { grid-template-columns: minmax(0, 1fr); }
.hw-build--turns .hw-build__mode { display: inline-flex; justify-self: start; margin-bottom: 0.5rem; }
.hw-build--turns .hw-build__handle, .hw-build--turns .hw-build__sizer, .hw-build--turns .hw-build__device { display: none; }
.hw-build--turns .hw-build__steps { padding-right: 0; }
.hw-build--turns .hw-build__preview { position: static; height: auto; min-height: 75vh; padding-left: 0; }
.hw-build--turns[data-mode="edit"]:not([data-dns="true"]) .hw-build__preview { display: none; }
.hw-build--turns[data-mode="preview"] .hw-build__steps, .hw-build--turns[data-dns="true"] .hw-build__steps { display: none; }
.hw-build--turns .hw-build__stage { padding: 0.5rem; }
.hw-build--turns .hw-build__view { min-height: 70vh; }
.hw-build--turns .hw-bstep__body { padding-left: 0.9rem; }
/* The DNS records as one card each, where the table won't fit. */
@container (max-width: 56rem) {
  .hw-build__dns table[aria-label="DNS records"], .hw-build__dns table[aria-label="DNS records"] tbody, .hw-build__dns table[aria-label="DNS records"] tr, .hw-build__dns table[aria-label="DNS records"] td { display: block; }
  .hw-build__dns table[aria-label="DNS records"] thead { display: none; }
  .hw-build__dns table[aria-label="DNS records"] tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.35rem 0.6rem; padding: 0.7rem 0.8rem; border: 1px solid var(--ui-border); border-radius: 10px; }
  .hw-build__dns table[aria-label="DNS records"] tr + tr { margin-top: 0.5rem; }
  .hw-build__dns table[aria-label="DNS records"] td { padding: 0; border: 0; min-width: 0; text-align: left; }
  .hw-build__dns td[data-label="Type"] { font-weight: 500; }
  .hw-build__dns td[data-label="For"] { order: 2; color: var(--ui-text-muted); font-size: 13px; white-space: normal; overflow-wrap: anywhere; } /* "Redirects to" a long domain (#388) */
  .hw-build__dns td[data-label="Status"] { order: 3; justify-self: end; }
  .hw-build__dns td[data-label="Name"], .hw-build__dns td[data-label="Value"], .hw-build__dns td[data-label="Priority"] { grid-column: 1 / -1; order: 4; display: grid; gap: 2px; }
  .hw-build__dns td[data-label="Value"] { order: 5; }
  .hw-build__dns td[data-label="Priority"] { order: 6; }
  .hw-build__dns td[data-label="Priority"]:empty { display: none; }
  .hw-build__dns td[data-label="Name"]::before, .hw-build__dns td[data-label="Value"]::before, .hw-build__dns td[data-label="Priority"]:not(:empty)::before { content: attr(data-label); font-size: 12px; color: var(--ui-text-muted); }
  .hw-build__dns .hw-scroll-x { overflow: visible; }
}
.hw-build__dns { container-type: inline-size; }
.hw-moved { margin: 0; padding: 0.5rem 0.8rem; border: 1px dashed var(--ui-border-strong); border-radius: 10px; font-size: 13px; color: var(--ui-text-muted); }

/* Campaigns (#405): the ad platform beside a name, a warning with its link, a campaign's own heading */
.hw-plat { display: inline-block; margin-right: 0.3rem; padding: 0 0.4rem; border-radius: 4px; font: 600 11px var(--ui-font-mono); letter-spacing: 0.04em; text-transform: uppercase; background: var(--hw-fill); color: var(--ui-text); }
.hw-flash-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; justify-content: space-between; }
.hw-flash-row > span { min-width: 0; flex: 1 1 20rem; overflow-wrap: anywhere; }
.ui-flash--danger.hw-flash-row > span { color: var(--ui-text); }
.hw-tab__live { display: inline-block; width: 7px; height: 7px; margin-left: 0.3rem; border-radius: 50%; background: var(--ui-success); box-shadow: 0 0 0 3px rgba(185, 196, 168, 0.18); vertical-align: middle; }
.hw-campaign-title { font-size: 1.6rem; overflow-wrap: anywhere; }
.hw-ad-copy { margin: 0; padding: 0.75rem 1rem; border-left: 2px solid var(--ui-border-strong); color: var(--ui-text-muted); font-size: 14px; overflow-wrap: anywhere; }
.hw-ad-copy b { color: var(--ui-text); font-weight: 500; }
.hw-campaign-history li { grid-template-columns: 6rem minmax(0, 1fr); }
/* The monthly limit, New campaign and the ad fields (#405, PR 3) */
.hw-limit { gap: 0.75rem; }
.hw-limit .ui-meter { flex: none; } /* in a column, flex: 1 would squash it to no height */
/* Ads paused by Hunchwire, and a limit nearly spent (#405, PR 4) */
.hw-flash--warn { border-color: rgba(217, 181, 108, 0.45); }
.hw-meter--warn .ui-meter__bar { background: var(--ui-warning); }
.hw-limit__head { gap: 0.2rem; }
.hw-limit__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.hw-limit__line b { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; }
.hw-ad-edit { display: grid; gap: 0.75rem; min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
.hw-ad-edit > legend { padding: 0 0.35rem; }
/* Phones never scroll sideways (#532): a select sizes to its longest option, like "Its own link (facebook · paid · …)". */
.hw-ad-edit { grid-template-columns: minmax(0, 1fr); }
.hw-ad-edit .hw-select, .hw-ad-edit .ui-input { width: 100%; min-width: 0; max-width: 100%; }
.hw-ad-edit .ui-mono { overflow-wrap: anywhere; }
.ui-input.hw-ad-text { height: auto; min-height: 4.5rem; padding: 0.6rem var(--ui-space-3); resize: vertical; }
.hw-ages { flex-wrap: nowrap; }
.hw-ages .ui-input { min-width: 0; }
.hw-targeting-search { position: relative; }
.hw-targeting-results { display: grid; gap: 2px; max-height: 16rem; overflow-y: auto; padding: 0.35rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-bg); }
.hw-targeting-results[hidden] { display: none; }
.hw-targeting-option { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.65rem; border: 0; border-radius: 6px; background: none; color: var(--ui-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.hw-targeting-option:hover, .hw-targeting-option:focus-visible { background: var(--hw-fill); }
.hw-ads-card .hw-builder { align-items: end; }
.hw-ads-card .ui-input, .hw-ads-card .hw-select { width: 100%; }


/* Ad sets (#482): a campaign's ad sets with their ads beneath, and New campaign's ad set cards */
.hw-ad-sets .hw-ad-set-row td { border-top: 1px solid var(--ui-border-strong); }
.hw-ad-sets td.hw-ad-row { padding-left: 1.25rem; }
/* The name and audience cell wraps, so a long audience line never pushes State and the numbers out of view;
   the last header wraps onto two lines. On a phone the table scrolls inside its card, its last column fully in reach. */
.hw-ad-sets td.hw-left { white-space: normal; min-width: min(16rem, 60vw); }
.hw-ad-sets .hw-list__name span { overflow-wrap: anywhere; }
.hw-ad-sets th { vertical-align: bottom; }
.hw-ad-sets th.hw-wrap { white-space: normal; min-width: 4.5rem; }
.hw-ad-sets .hw-row-actions { flex-wrap: wrap; }
.hw-ad-set { min-width: 0; }

/* An ad set's languages, narrowed interests and placements (#484). An empty chip list says what empty means. */
.hw-chips__empty { align-self: center; }
.hw-chips:has(.ui-chip) .hw-chips__empty { display: none; }
.hw-placements { min-width: 0; margin: 0; padding: 0; border: 0; }
.hw-advantage { gap: 0.5rem; align-items: flex-start; font-size: 14px; cursor: pointer; flex-wrap: nowrap; }
.hw-advantage > span { min-width: 0; }
.hw-advantage input { margin-top: 3px; }
.hw-advantage .hw-note { display: block; }
.hw-placements__mode, .hw-placements__option { gap: 0.4rem; font-size: 14px; cursor: pointer; }
.hw-placements__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.5rem 1rem; }
.hw-placements__group { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; min-width: 0; }
.hw-placements__group > .hw-note { flex-basis: 100%; }
.hw-placements:not(:has(.hw-placements__manual:checked)) .hw-placements__list { display: none; }
.hw-targeting-option__add { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }

/* Ad formats (#483): the Format switch shows only its format's fields; carousel cards stack and wrap on a phone */
.hw-format label { display: inline-flex; align-items: center; gap: 0.35rem; padding: 4px 11px; font-size: 12.5px; color: var(--ui-text-muted); cursor: pointer; }
.hw-format input { margin: 0; accent-color: #ece8e1; }
.hw-format label:has(input:checked) { background: rgba(236, 232, 225, 0.1); color: var(--ui-text); }
.hw-ad-edit [data-format] { display: none; }
.hw-ad-edit:has(> .ui-field .hw-format input[value=image]:checked) > [data-format~=image],
.hw-ad-edit:has(> .ui-field .hw-format input[value=video]:checked) > [data-format~=video],
.hw-ad-edit:has(> .ui-field .hw-format input[value=carousel]:checked) > [data-format~=carousel] { display: flex; }
/* More headlines and texts (#526): image and video ads only, folded until used. */
.hw-ad-edit > details.hw-ad-more { flex-direction: column; gap: var(--ui-space-3); min-width: 0; }
.hw-ad-more > summary { cursor: pointer; }
.hw-ad-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.hw-ad-card { display: grid; gap: 0.5rem; min-width: 0; padding: 0.75rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
.hw-ad-card .ui-input, .hw-ad-card .hw-select { width: 100%; box-sizing: border-box; min-width: 0; }