/**
 * Heavy One: the conversational plan builder.
 *
 * The conversation is the interface for the whole session, so the thread
 * is a bounded column with its own scroll and the composer DOCKED to its
 * bottom. The composer is the one element that may never be pushed off
 * screen: everything else yields to it.
 */

.ho { padding: 0 0 60px; background: var(--bg, #f6f7f9); }

/* THE SAME COLUMN THE MANUAL BUILDER USES. It was running the full
   width of the browser while the builder sits in 1320, so the two pages
   read as different products on a wide screen. Same wrapper, same
   measure. */
.ho-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 34px 16px; border-bottom: 1px solid var(--line, #e4e6ec); background: var(--white, #fff); }
.ho-head__inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; width: 100%; max-width: 1320px; margin: 0 auto; }
.ho-head__main { flex: 1; min-width: 0; }
.ho-head__h1 { font-size: 26px; font-weight: var(--w-heavy, 800); letter-spacing: -.7px; margin: 0; }
.ho-head__sub { font-size: 13.5px; color: var(--ink-2, #5b6070); margin: 4px 0 0; }
.ho-head__manual { font-size: 12.5px; font-weight: var(--w-bold, 700); color: var(--pink-press, #c9376e); }

/* The countdown. A dot, so it reads as a status rather than a sentence. */
.ho-quota { font-size: 12.5px; font-weight: var(--w-bold, 700); color: var(--ink-2, #5b6070); }
.ho-quota:not(:empty) { display: inline-flex; align-items: center; gap: 7px; background: var(--surface, #f6f7f9); border-radius: var(--r-pill, 999px); padding: 5px 12px; }
.ho-quota:not(:empty)::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ho-quota.is-low { color: #a56a12; }
.ho-quota.is-out { color: #b03a3f; }

.ho-body { display: flex; gap: 22px; align-items: flex-start; padding: 20px 34px 0; max-width: 1320px; margin: 0 auto; }
.ho-col { flex: 1 1 620px; min-width: 0; background: var(--white, #fff); border: 1px solid var(--line, #e4e6ec); border-radius: var(--r-lg, 16px); display: flex; flex-direction: column; overflow: hidden; }
.ho-panel { position: sticky; top: 20px; }

/* Bounded, with its own scroll, so the composer below it never moves.
   On a phone it takes what it is given. On a desktop it is FIXED at
   60vh rather than growing into it: a thread that grows shunts the
   composer down the page on every turn and the whole column breathes
   differently at turn two than at turn ten. A fixed frame stays put. */
.ho-thread { flex: 1; min-height: 90px; max-height: 62vh; overflow-y: auto; padding: 18px 20px 6px; }
@media ( min-width: 900px ) {
	.ho-thread { height: 60vh; max-height: 60vh; }
}

.ho-taken { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line, #e4e6ec); }
.ho-taken__l { font-size: var(--t-micro, 10.5px); font-weight: var(--w-heavy, 800); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3, #8f95a6); }
.ho-taken__c { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line, #e4e6ec); border-radius: var(--r-pill, 999px); padding: 4px 11px; font-size: 12px; }
.ho-taken__ck { color: var(--ink-3, #8f95a6); }
.ho-taken__cv { font-weight: var(--w-bold, 700); }

.ho-turn { display: flex; gap: 10px; margin-bottom: 14px; }
.ho-turn--you { justify-content: flex-end; }
/* NOT BOLD. It was, and bold is emphasis: the reader's own words came
   back at them shouted, and shouted louder than the reply underneath
   that they are actually reading. The pink bubble already says whose
   words they are. */
.ho-said { background: var(--pink, #e8568a); color: #fff; border-radius: var(--r-lg, 16px); padding: 10px 16px; font-size: 13.5px; font-weight: 400; line-height: 1.5; max-width: 78%; margin: 0; }
.ho-mark { width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--r-pill, 999px); background: var(--pink-soft, #fdeef4); color: var(--pink-press, #c9376e); display: grid; place-items: center; }
.ho-turn__b { flex: 1; min-width: 0; }
.ho-line { font-size: 13.5px; line-height: 1.55; margin: 3px 0 0; }
/* A second line is the question, lifted off the recap above it. */
.ho-line + .ho-line { margin-top: 10px; }

/* ── A GROUP OF SUGGESTIONS ────────────────────────────────────────
   ONE LINE, EVERY SCREEN. DG, 28 Aug 2026, overriding the handoff's
   desktop grid: six cards stacked two rows deep buried the composer,
   so the rail is the only layout. Cards sit in a single horizontal
   line that scrolls, snaps, and on a desktop DRAGS (the JS adds
   pointer dragging, because a mouse has no momentum flick and the
   scrollbar is hidden). The next card peeks at the edge at every
   width, because the peek is what says there are more. */
.ho-group { margin-top: 12px; }
.ho-group__h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ho-group__l { font-size: var(--t-micro, 10.5px); font-weight: var(--w-heavy, 800); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3, #8f95a6); margin: 0; }
.ho-group__swipe { font-size: 11px; font-weight: var(--w-bold, 700); color: var(--pink-press, #c9376e); }
.ho-group__rail {
	display: flex;
	gap: 10px;
	align-items: stretch;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 0 -20px;
	padding: 2px 20px;
	cursor: grab;
}
.ho-group__rail::-webkit-scrollbar { display: none; }
.ho-group__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
/* Wide enough to read, narrow enough that the next one peeks: capped
   at 300px so a desktop shows two and a bit cards, and 78% keeps the
   peek on a phone. */
.ho-group__cell { flex: 0 0 min(78%, 300px); scroll-snap-align: start; min-width: 0; display: flex; }
.ho-group__cell > .ho-card { flex: 1; min-width: 0; }
@media ( max-width: 700px ) {
	.ho-group__rail { margin: 0 -14px; padding: 2px 14px; }
}

/* ── one suggestion card ───────────────────────────────────────────
   The same anatomy as the manual builder's listing card, so the two
   surfaces read as one platform, plus the why panel. */
.ho-card { display: flex; flex-direction: column; min-width: 0; background: var(--white, #fff); border: 1px solid var(--line, #e4e6ec); border-radius: var(--r-md, 12px); overflow: hidden; }
.ho-card.is-in { border-color: var(--open, #1f7a4d); }

/* The featured image, and the three things that sit on it. */
.ho-card__shot { position: relative; height: 104px; flex-shrink: 0; background: var(--surface, #f6f7f9); }
.ho-card__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ho-card__badge { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: var(--w-heavy, 800); color: #fff; background: var(--pink, #e8568a); border-radius: var(--r-pill, 999px); padding: 3px 9px; white-space: nowrap; }
.ho-card__eye { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: none; border-radius: var(--r-pill, 999px); background: rgba(255,255,255,.95); color: var(--ink, #16181f); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 6px rgba(22,24,31,.28); }
.ho-card__eye:hover { color: var(--pink-press, #c9376e); }
/* The logo overlaps the image's lower-left corner: a ringed badge, not
   a thumbnail beside text. */
.ho-card__logo { position: absolute; left: 12px; bottom: -18px; width: 42px; height: 42px; border-radius: var(--r-pill, 999px); background: var(--white, #fff); border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(22,24,31,.22); display: grid; place-items: center; overflow: hidden; }
.ho-card__logo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-pill, 999px); }
.ho-card__mono { font-size: 13.5px; font-weight: var(--w-heavy, 800); color: var(--ink-2, #5b6070); }

/* The body clears the overlapping logo. */
.ho-card__m { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; padding: 23px 13px 12px; }
.ho-card__n { font-size: 15px; font-weight: var(--w-heavy, 800); letter-spacing: -.25px; line-height: 1.25; margin: 0; }

/* Pills never wrap: a pill that wraps reads as broken rendering. */
.ho-card__pills { display: flex; gap: 5px; flex-wrap: wrap; }
.ho-card__pill { font-size: 10.5px; font-weight: var(--w-bold, 700); padding: 3px 8px; border-radius: var(--r-pill, 999px); color: var(--ink-2, #5b6070); background: var(--surface, #f6f7f9); white-space: nowrap; }
.ho-card__pill.is-diet { color: var(--open, #1f7a4d); background: var(--open-soft, #e8f4ed); }

/* Meta rows: one line each, truncating rather than wrapping.
   THE ICON SLOT IS min-width, NEVER a fixed width. A fixed 14px box
   wraps "£££" into three stacked lines and blows the row height out to
   2.6 times its neighbours. Named in the handoff as a bug found in
   review; do not reintroduce it. */
.ho-card__meta { display: grid; gap: 3px; min-width: 0; }
.ho-card__mrow { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; color: var(--ink-2, #5b6070); }
.ho-card__mi { flex-shrink: 0; min-width: 14px; white-space: nowrap; display: grid; place-items: center; font-size: 11px; font-weight: var(--w-heavy, 800); color: var(--ink-3, #8f95a6); }
.ho-card__mt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* WHY THIS ONE. Its own tinted panel, because it is the one thing this
   card has that the builder's does not, so it gets visual weight. Solid
   ink, not grey prose that blends into the meta rows above it. */
.ho-card__why { background: var(--pink-soft, #fdeef4); border-radius: var(--r-sm, 8px); padding: 9px 11px; }
.ho-card__whyl { font-size: 9.5px; font-weight: var(--w-heavy, 800); letter-spacing: .08em; text-transform: uppercase; color: var(--pink-press, #c9376e); margin: 0 0 5px; }
.ho-card__whyu { display: grid; gap: 3px; list-style: none; margin: 0; padding: 0; }
.ho-card__whyi { position: relative; padding-left: 12px; font-size: 12px; font-weight: 600; color: var(--ink, #16181f); line-height: 1.45; }
.ho-card__whyi::before { content: '\2022'; position: absolute; left: 0; color: var(--pink, #e8568a); font-weight: var(--w-heavy, 800); }

/* How far, before they pick. Quieter than the meta rows, because it is
   a consideration rather than a constraint. */
.ho-card__near { font-size: 11.5px; color: var(--ink-3, #8f95a6); margin: 0; }

.ho-card__foot { margin-top: auto; padding-top: 3px; }
.ho-card__add { border: 1.5px solid var(--pink, #e8568a); background: none; color: var(--pink, #e8568a); border-radius: var(--r-pill, 999px); padding: 8px 15px; font: inherit; font-size: 12.5px; font-weight: var(--w-bold, 700); cursor: pointer; white-space: nowrap; min-height: 38px; }
.ho-card__add:hover { background: var(--pink, #e8568a); color: #fff; }
.ho-card__added { display: inline-flex; align-items: center; gap: 6px; background: var(--open-soft, #e8f4ed); color: var(--open, #1f7a4d); border: 1px solid var(--open, #1f7a4d); border-radius: var(--r-pill, 999px); padding: 8px 14px; font-size: 12.5px; font-weight: var(--w-bold, 700); white-space: nowrap; min-height: 38px; }

.ho-recover { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* Docked, and the last thing above the fold of this column. */
.ho-composer { flex-shrink: 0; border-top: 1px solid var(--line, #e4e6ec); padding: 12px 20px 14px; background: var(--white, #fff); }
.ho-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ho-chip { border: none; background: var(--pink-soft, #fdeef4); color: var(--pink-press, #c9376e); border-radius: var(--r-pill, 999px); padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: var(--w-bold, 700); cursor: pointer; }
.ho-chip:hover { background: var(--pink, #e8568a); color: #fff; }
.ho-form { display: flex; gap: 8px; align-items: center; }
.ho-input { flex: 1; min-width: 0; border: 1px solid var(--line-2, #d3d7e0); border-radius: var(--r-pill, 999px); padding: 0 16px; font: inherit; font-size: 13.5px; min-height: 44px; }
.ho-send { width: 42px; height: 42px; flex-shrink: 0; border: none; border-radius: var(--r-pill, 999px); background: var(--pink, #e8568a); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ho-send:hover { background: var(--pink-press, #c9376e); }
.ho-composer__note { font-size: 11.5px; color: var(--ink-3, #8f95a6); margin: 8px 0 0; }

.ho-empty { padding: 10px 0 4px; }
.ho-empty__l { font-size: var(--t-micro, 10.5px); font-weight: var(--w-heavy, 800); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3, #8f95a6); text-align: center; margin: 0 0 10px; }
.ho-sample { display: block; width: 100%; text-align: left; border: 1px solid var(--line, #e4e6ec); border-radius: var(--r-md, 12px); background: var(--white, #fff); font: inherit; font-size: 13.5px; color: var(--ink-2, #5b6070); padding: 13px 16px; margin-bottom: 8px; cursor: pointer; }
.ho-sample:hover { border-color: var(--pink, #e8568a); color: var(--pink-press, #c9376e); }

/* Below the single column breakpoint the plan moves ABOVE the thread and
   the composer sticks to the bottom of the viewport, because the
   conversation is the primary surface here and the input is the one
   thing that may never be out of reach. */
@media (max-width: 1000px) {
	.ho-body { display: block; padding: 16px 16px 0; }
	.ho-panel { position: static; margin-bottom: 16px; width: auto; }
	.ho-thread { max-height: none; }
	.ho-composer { position: sticky; bottom: 0; z-index: 20; }
}
@media (max-width: 760px) {
	.ho-head { padding: 18px 16px 14px; }
	.ho-head__h1 { font-size: 22px; }
}

/* ── the running total ────────────────────────────────────────────
   Said under the turn it belongs to rather than as its own message:
   it is context for the thing just added, not a new remark. */
.ho-pace {
	margin: 8px 0 0;
	padding: 8px 11px;
	border-radius: 10px;
	background: var(--ph-bg, #f2f4f8);
	color: var(--ph-ink-soft, #5a5f73);
	font-size: 13px;
	line-height: 1.45;
}

/* Running past when they wanted to be done is the one worth colouring:
   it is the line that changes what somebody does next. */
.ho-pace--over {
	background: var(--ph-warn-light, #fef5e6);
	color: var(--ph-ink, #21253a);
}

.ho-pace--far {
	background: transparent;
	padding: 4px 0 0;
	font-size: 12.5px;
}

/* An opinion, not a request. The bulb marks the difference so it is
   seen rather than inferred from the wording. */
.ho-mark.is-idea {
	background: var(--ph-warn-light, #fef5e6);
	color: var(--ph-warn, #f0a830);
}

/* ── a guess wears a mark ─────────────────────────────────────────
   The strip is headed "taken from what you said". A value nobody said
   sitting in it unmarked makes that heading untrue. */
.ho-taken__c.is-guessed {
	border-style: dashed;
	opacity: 0.92;
}

.ho-taken__cg {
	margin-left: 5px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ph-warn, #f0a830);
}

.ho-taken__note {
	display: block;
	width: 100%;
	margin-top: 7px;
	font-size: 12px;
	color: var(--ph-ink-soft, #5a5f73);
}

/* ── the mark and the wordmark, from the design pass ──────────────── */
.ho-head__logo {
	display: block;
	height: 84px;
	width: auto;
	max-width: 100%;
}

/* The mark fills its circle rather than sitting in it as an icon. */
.ho-mark img {
	width: 20px;
	height: 20px;
	display: block;
}

.ho-mark:not(.is-idea) {
	background: #fff;
	border: 1px solid var(--ph-line, #e6e8ee);
	overflow: hidden;
}

@media (max-width: 760px) {
	.ho-head__logo { height: 58px; }
}

/* ── what a place actually serves, on the card ────────────────────
   Three listings all reading "Asian" said nothing about the difference
   between an Indian fine dining room and a steakhouse. */
.ho-card__cui {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.ho-card__cuip {
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 9px;
	border-radius: var(--r-pill, 999px);
	background: var(--surface, #f6f7f9);
	color: var(--ink-2, #5b6070);
}

/* An answer to what was just asked, rather than one of the standing
   offers beside it. Filled, so the difference is obvious at a glance. */
.ho-chip.is-answer {
	background: var(--pink-soft, #fce8ef);
	color: var(--pink-press, #c9376e);
	border-color: transparent;
}