/*
 * Copyright (c) 2026 by Gabriele Proietti Mattia <pm.gabriele@gmail.com>.
 *
 * All Rights Reserved.
 */

/*
 * The home (house.js): the people, the meals, the kitchen, what is always at home, the links, the goals,
 * and the pages of the invitation, the notifications and the link of an app. The pieces shared with the
 * other tabs (pills, notes, steppers, avatars, choices, sub-pages, sheets) are in kit.css; here is only
 * what the home owns, with the tokens of the design system and the few of kit.css. The rest of the Home
 * tab (the plan of the account, the language, the apps) keeps the cards of index.html.
 */

/* --------------------------------------------------------------------------- the tab */

#house-root, .house-after { display: flex; flex-direction: column; gap: var(--space-4); }
.house-after:empty { display: none; }

.house-head { display: flex; flex-direction: column; gap: var(--space-1); }
.house-section__title { display: flex; align-items: center; gap: var(--space-2); }

/* a card of rows, each one a line of 56 pixels: a person, a switch, a link */
.house-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.house-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-bottom: var(--border-hairline) solid var(--border-faint);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

button.house-row { cursor: pointer; }
button.house-row:disabled { cursor: default; }
.house-row:last-child { border-bottom: 0; }

/* every button of the home shows where the keyboard is: inside the row, which clips an outside ring */
.house-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.house-staple__x:focus-visible, .house-staple--add:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.house-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.house-row__label { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.house-row__hint { font-size: var(--fs-caption); color: var(--text-muted); }
.house-row__meta { flex: none; font-size: var(--fs-caption); color: var(--text-muted); }
.house-row__go { flex: none; width: 20px; height: 20px; color: var(--text-subtle); }
.house-row--stack { flex-direction: column; align-items: flex-start; }

/* "Invita", "Notifiche": a line that opens a page */
.house-row--link { color: var(--accent); font-weight: var(--fw-medium); }
.house-row--link svg { flex: none; width: 20px; height: 20px; }
.house-row--link .house-row__label { flex: 0 1 auto; }
.house-row--link .kit-pill { margin-left: auto; }

/* the switch: the row is the button, the track the part that shows the state */
.house-track { flex: none; position: relative; width: 46px; height: 28px; border-radius: var(--radius-pill); background: var(--text-muted); }
.house-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: var(--radius-circle); background: var(--surface); }
.house-switch[aria-checked="true"] .house-track { background: var(--accent); }
.house-switch[aria-checked="true"] .house-knob { left: 21px; }
.house-switch:disabled .house-track { opacity: 0.55; }

.house-staples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.house-staple {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 32px;
  padding: 0 var(--space-3);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-body-sm);
}

.house-staple--add { min-height: 44px; color: var(--accent); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.house-staple--add svg { width: 16px; height: 16px; }

.house-staple__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -6px -10px -6px 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.house-staple__x svg { width: 14px; height: 14px; }

.house-goal__input { flex: none; width: 96px; text-align: right; }
.house-form { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---------------------------------------------------------------- a card that says something */

.house-panel { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); }
.house-panel__title, .house-gate__title { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.house-warn { border-color: var(--warn); background: var(--warn-soft); }
.house-wide { width: 100%; }
.house-list { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }

/* ----------------------------------------------------------------------------- inviting */

.house-at { display: flex; align-items: center; border: var(--border-hairline) solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.house-at:focus-within { box-shadow: var(--shadow-focus); }
.house-at__mark { padding: 0 var(--space-3); color: var(--text-muted); }
.house-at__input { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; }
.house-at__input:focus-visible { box-shadow: none; }

.house-roles { display: flex; flex-direction: column; gap: var(--space-2); }
.house-actions { display: flex; }
.house-actions .button { flex: 1 1 auto; }

.house-message { margin: 0; font-size: var(--fs-body-sm); }
.house-message:empty { display: none; }
.house-message.is-ok { color: var(--success); }
.house-message.is-warn { color: var(--warn); }

.house-invites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.house-invites:empty { display: none; }
.house-invite { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; border-bottom: var(--border-hairline) solid var(--border-faint); }
.house-invite__name { font-weight: var(--fw-medium); }
.house-invite__role { font-size: var(--fs-caption); color: var(--text-muted); }
.house-invite__revoke { margin-left: auto; }

/* ------------------------------------------------------------------------ linking an app */

.house-step { margin: 0; font-size: var(--fs-h4); }
.house-chat { padding: var(--space-3); background: var(--surface-2); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); }
.house-chat__bubble { margin: 0; padding: var(--space-3); background: var(--surface); border-radius: var(--radius-md); }