/* HomeLink second take — the BoatLink frame, warmed toward home.
 *
 * Structure reuses demo.css outright (frame, rail, pagehead, boat-card,
 * tiles, pills, alertcard …). This file only warms the palette and owns the
 * pieces BoatLink has no equivalent of: the history graph, the logbook, the
 * card-and-visibility picks, and the room/device forms. Everything lives
 * under .hm so the boat demo keeps its own colours.
 */

.frame.hm {
	--ground: #14100a;
	--panel: #1e1710;
	--raised: #271d13;
	--sunken: #100c07;
	--line: #342a1c;
	--brass-line: rgba(208, 138, 78, .28);
	--ink: #f2e9d6;
	--dim: #b7a78d;
	--faint: #85755e;
	--brass: #d08a4e;
	--brass-bright: #eeb27c;
	--ok: #82c79b;
	--warn: #e0a33d;
	--crit: #ef8f7d;
	--crit-wash: rgba(239, 143, 125, .1);
	--ok-wash: rgba(130, 199, 155, .09);
	--shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .45);
	background:
		radial-gradient(1200px 500px at 70% -10%, rgba(208, 138, 78, .07), transparent 60%),
		var(--ground);
}

/* Statuses HomeLink reports that the boat dot has no colour for. */
.hm .devdot.unreachable { background: var(--crit); box-shadow: 0 0 7px rgba(239,143,125,.8); }
.hm .devdot.no-data, .hm .devdot.no-devices { background: var(--faint); }

/* Alerts-as-links: the card style is a div voice, anchors keep it. */
.hm a.alertcard { display: block; color: inherit; }
.hm a.alertcard:hover { border-color: var(--brass-line); }
.hm .alertcard { overflow-wrap: break-word; }
.hm .alertcard.info { border-left-color: var(--ok); }
.hm .alertcard .who { color: var(--dim); font-size: 13px; }

/* Screen-reader-only live text. */
.hm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- inputs, buttons, pencils ---- */

.hm-input, .hm select.hm-input, .hm textarea.hm-input {
	background: var(--sunken);
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	padding: 10px 12px;
	min-height: 44px;
	max-width: 100%;
}
.hm-input:focus { border-color: var(--brass); outline: none; }
.hm-input::placeholder { color: var(--faint); }

.hm label.hm-field { display: grid; gap: 6px; font-size: 13px; color: var(--dim); }
.hm label.hm-field .hm-opt { color: var(--faint); font-weight: 400; }

.hm-form { display: grid; gap: 12px; }
.hm-form-err { color: var(--crit); font-size: 13.5px; margin: 0; }
.hm-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hm-row .hm-input { flex: 1 1 200px; }

.hm-pencil {
	background: none; border: none; cursor: pointer;
	color: var(--faint); font-size: 15px; padding: 10px; margin: -10px -6px -10px 0;
	min-width: 44px; min-height: 44px;
}
.hm-pencil:hover { color: var(--brass-bright); }

.hm-rename-input {
	background: var(--sunken); border: 1px solid var(--brass); border-radius: 8px;
	color: var(--ink); font: inherit; padding: 8px 10px; min-height: 44px; width: min(100%, 320px);
}

/* Room rows in the compartment voice: name input, count, remove. */
.hm-comprow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.hm-comprow:first-of-type { border-top: none; }
.hm-comprow .hm-input { flex: 1 1 auto; min-width: 0; }
.hm-comprow .microlabel { flex: none; }

/* Device move picker keeps the 44px floor. */
.hm .moveline select { min-height: 44px; }

/* ---- history graph ---- */

.hm-chart { position: relative; }
.hm-chart svg { display: block; width: 100%; height: auto; }
.hm-chart .g-grid { stroke: var(--line); stroke-width: 1; }
.hm-chart .g-axis { fill: var(--faint); font: 10.5px var(--mono, ui-monospace, monospace); }
.hm-chart .g-band { fill: rgba(208, 138, 78, .13); }
.hm-chart .g-avg { fill: none; stroke: var(--brass-bright); stroke-width: 2; stroke-linejoin: round; }
.hm-chart .g-thr { stroke: var(--crit); stroke-width: 1; stroke-dasharray: 4 3; }
.hm-chart .g-thr-label { fill: var(--crit); font: 10.5px var(--mono, ui-monospace, monospace); }
.hm-chart .g-cross { stroke: var(--dim); stroke-width: 1; }
.hm-chart .g-pt { fill: var(--brass-bright); stroke: var(--ground); stroke-width: 1.5; }
.hm-tip {
	position: absolute; top: 0; pointer-events: none;
	background: var(--raised); border: 1px solid var(--line); border-radius: 8px;
	padding: 6px 10px; font: 12px var(--mono, ui-monospace, monospace); color: var(--ink);
	white-space: nowrap;
}
.hm-tip .h-t { color: var(--faint); }
.hm-chart-status { color: var(--dim); padding: 24px 4px; display: grid; gap: 10px; justify-items: start; }

.hm-an { display: grid; gap: 12px; }
.hm-an-row { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--sunken); }
.hm-an-row h3 { margin: 0 0 4px; font-size: 14px; }
.hm-an-row p { margin: 0; color: var(--dim); font-size: 13.5px; }
.hm-an-row.is-warning { border-left: 3px solid var(--warn); }
.hm-an-row.is-critical { border-left: 3px solid var(--crit); }
.hm-num { font-variant-numeric: tabular-nums; }
.hm-extremes { border-collapse: collapse; margin-top: 6px; }
.hm-extremes th, .hm-extremes td { text-align: right; padding: 5px 10px 5px 0; font-variant-numeric: tabular-nums; }
.hm-extremes th { color: var(--faint); font: 600 10px var(--mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; }

/* ---- logbook ---- */

.hm-due { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.hm-due span {
	font-size: 12.5px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; color: var(--dim);
}
.hm-due span.is-overdue { border-color: var(--crit); color: var(--crit); }

.hm-event { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.hm-event:first-of-type { border-top: none; }
.hm-event > div { flex: 1 1 auto; min-width: 0; }
.hm-event-where { color: var(--faint); font-size: 12.5px; }

.hm-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.hm-cats label {
	border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; min-height: 44px;
	display: inline-flex; align-items: center; font-size: 13px; color: var(--dim); cursor: pointer;
}
.hm-cats input { accent-color: var(--brass); margin-right: 7px; width: 16px; height: 16px; }
.hm-cats label:has(input:checked) { border-color: var(--brass); color: var(--ink); }

/* ---- card & visibility picks ---- */

.hm-pick {
	display: flex; align-items: center; gap: 10px; padding: 9px 0;
	border-top: 1px solid var(--line); font-size: 14px; min-height: 44px;
}
.hm-pick:first-of-type { border-top: none; }
.hm-pick input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--brass); }
.hm-pick.is-off { color: var(--faint); }
.hm-pick .grow { flex: 1 1 auto; min-width: 0; }
.hm-note { color: var(--faint); font-size: 13px; margin: 10px 0 0; }
.hm-count { color: var(--brass); }

/* ---- adopt ---- */

.hm-adopt { display: grid; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.hm-adopt:first-of-type { border-top: none; }

/* ---- room device rows ---- */

.hm-devices { display: grid; }
.hm-roomdot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ok); display: inline-block; margin-right: 9px; }
.hm-roomdot.is-warning { background: var(--warn); }
.hm-roomdot.is-critical { background: var(--crit); }
.card h3 .hm-roomdot { transform: translateY(-1px); }

@media (max-width: 880px) {
	.pagehead h1 { font-size: 27px; }
}