/* The personal Home (docs/PERSONAL-WORK.md) in the Hub's own system. Load after tokens.css, base.css,
   motion.css and hub.css. The parts are the meeting page's: the masthead (.hub-mast), cards (.hub-card), the
   item anatomy (.hub-item__*), state pills (.flap), kind and status chips, the landing's meeting rows
   (.hub-landing__*), and base.css's segmented control, empty state and statement. This file lays them out on
   the Hub's frame (the same width, padding and rail as .hub-sheet) and adds only what the meeting page has no
   need for: the count tiles, the list toolbar, the work row's foot, the reminder rows and the guide. Colour,
   type, space, radius and motion come from the tokens; the few fixed sizes (the tile height, the search width,
   icon sizes, the container breakpoints) follow hub.css's own. Status colour always sits beside its word. */

/* ---------------------------------------------------------------- frame */
.home { display: flex; flex-direction: column; gap: var(--space-6); max-width: var(--hub-max); margin: 0 auto; padding: var(--space-8) var(--hub-pad) var(--space-16); }
.home--guest { max-width: 880px; }
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.home-main, .home-aside { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.home-main { container: home-main / inline-size; }
@media (min-width: 1024px) {
  .home-layout { grid-template-columns: minmax(0, 1fr) var(--hub-rail); column-gap: var(--space-8); }
  .home--guest .home-layout { grid-template-columns: minmax(0, 1fr); }
  .home-aside { position: sticky; top: calc(52px + var(--space-5)); max-height: calc(100dvh - 52px - var(--space-10)); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: var(--space-1); }
  /* A guest's meetings are the whole page, not a rail: they scroll with it. */
  .home--guest .home-aside { position: static; max-height: none; overflow: visible; }
}

/* ---------------------------------------------------------------- masthead */
.home-lead { max-width: 64ch; color: var(--fg-muted); font-size: var(--text-md); line-height: var(--leading-md); }
.home-sync { gap: var(--space-1) var(--space-3); }
.home-sync .hub-status__item:empty { display: none; }
.home-sync__error { color: var(--attention-fg); }
.home-sync__error .icon { color: var(--attention-mark); }
.home-sync .btn .icon { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- count tiles */
.home-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.home-stat {
  --stat-mark: var(--neutral-mark);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px var(--space-4);
  min-height: 76px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--fg);
  box-shadow: var(--shadow-xs), var(--ring-highlight);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.home-stat:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.home-stat[aria-pressed="true"] { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-bg), var(--shadow-sm); }
.home-stat:focus-visible { border-radius: var(--radius-lg); }
.home-stat__value { grid-row: 1 / span 2; min-width: 1ch; font-size: var(--text-4xl); line-height: var(--leading-4xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tighter); font-variant-numeric: var(--figures-data); }
.home-stat__label { display: inline-flex; align-items: center; gap: var(--space-1-5); align-self: end; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-semibold); }
.home-stat__label::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--stat-mark); }
.home-stat__hint { align-self: start; color: var(--fg-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
/* The marks are the work pills' colours: yours is blue, waiting is amber, a decision is violet. */
.home-stat--yours { --stat-mark: var(--accent); }
.home-stat--waiting { --stat-mark: var(--advisory-mark); }
.home-stat--decision { --stat-mark: var(--decision-mark); }
.home-stat--none { --stat-mark: var(--neutral-mark); }

/* ---------------------------------------------------------------- filter */
.home-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.home-filters > button { justify-content: space-between; min-height: var(--target-control); }
/* A label longer than its cell (a translation, on a phone) wraps inside its segment instead of running under the
   next one; the count keeps its place at the end, and a label that fits keeps its one line. */
.home-filters > button { min-width: 0; white-space: normal; text-align: start; padding-block: var(--space-1); }
.home-filters > button > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.home-filters .count { flex: none; }
/* The chosen view is the page's main state. On the dark well the plain surface is about 1.04:1 and the shadow
   vanishes, so the segment is raised and gets a strong hairline; the brighter word still carries the state. */
.home-filters > [aria-pressed="true"] { background: var(--bg-raised); box-shadow: var(--shadow-sm), var(--ring-highlight), 0 0 0 1px var(--border-strong); }
.home-filters > [aria-pressed="true"] .count { color: var(--fg); }
/* Two columns on a phone, three from 480 px of column, one row from 740 px (the six need about 700 px). A row
   that still runs out of room wraps rather than overflows. */
@container home-main (min-width: 480px) { .home-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container home-main (min-width: 740px) {
  .home-filters { display: flex; flex-wrap: wrap; }
  .home-filters > button { flex: 1 1 auto; justify-content: center; padding-inline: var(--space-2); }
}

/* ---------------------------------------------------------------- the work list */
.home-list__head { flex-wrap: wrap; row-gap: var(--space-2); padding-block: var(--space-2); }
.home-result-count { display: block; font-variant-numeric: var(--figures-data); }
.home-result-count__n { color: var(--fg-muted); font-weight: var(--weight-regular); }
.home-search { flex: 1 1 220px; max-width: 300px; margin-left: auto; }
/* base.css resets padding on every classed list (ul[class]), so the inset needs the parent in the selector. */
.home-list > .home-work-list { margin: 0; padding: 0 var(--space-4); }
.home-work-list > li + li { border-top: 1px solid var(--border); }
.home-work { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4) 0; scroll-margin-top: calc(var(--sticky-offset, 0px) + 72px); }
.home-work:focus { outline: none; }
.home-work:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.home-work__next, .home-work__date { display: flex; align-items: flex-start; gap: var(--space-1-5); color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--leading-sm); font-variant-numeric: var(--figures-data); }
.home-work__date .icon { width: 14px; height: 14px; margin-top: 2px; color: var(--fg-subtle); }
.home-work__note { margin-top: var(--space-1); }
.home-work__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); color: var(--fg-subtle); font-size: var(--text-sm); line-height: var(--leading-sm); }
.home-work__source { display: inline-flex; align-items: center; gap: 2px; min-height: var(--target-min); font-weight: var(--weight-medium); }
.home-work__source .icon { width: 14px; height: 14px; }
.home-work__meeting { min-width: 0; overflow-wrap: anywhere; }
.home-why { color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.home-why > summary { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--target-min); list-style: none; cursor: pointer; }
.home-why > summary::-webkit-details-marker { display: none; }
.home-why > summary:hover { color: var(--fg); }
.home-why__chevron { width: 14px; height: 14px; color: var(--fg-subtle); transition: transform var(--dur-base) var(--ease-standard); }
.home-why[open] .home-why__chevron { transform: rotate(90deg); }
.home-why > p { max-width: 70ch; padding-left: calc(14px + var(--space-1)); }
.home-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-3) var(--space-4); }
.home-list > .empty-state { border: 0; background: transparent; padding: var(--space-10) var(--space-6); }
.home-empty--clear > .icon { color: var(--ok-mark); }

/* ---------------------------------------------------------------- the guide */
.home-guide > summary { list-style: none; cursor: pointer; border-radius: var(--radius-lg); }
.home-guide > summary::-webkit-details-marker { display: none; }
.home-guide__summary .hub-card__title { flex: 1; }
.home-guide__chevron { width: 16px; height: 16px; color: var(--fg-subtle); transition: transform var(--dur-base) var(--ease-standard); }
.home-guide[open] .home-guide__chevron { transform: rotate(180deg); }
.home-guide:not([open]) > .rule { display: none; }
.home-guide__body { display: flex; flex-direction: column; gap: var(--space-3); max-width: 72ch; padding: var(--space-3) var(--space-4) var(--space-4); color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.home-guide__body ol { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding-left: var(--space-5); list-style: decimal; }
.home-guide__body li::marker { color: var(--fg-subtle); font-variant-numeric: var(--figures-data); }
.home-guide__body strong { color: var(--fg); font-weight: var(--weight-semibold); }

/* ---------------------------------------------------------------- the rail */
.home-caption { padding-top: var(--space-2); color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--leading-sm); }
.home-reminders { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.home-reminders > li { border-top: 1px solid var(--border); }
.home-reminders a { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) 0; color: var(--fg); text-decoration: none; }
.home-reminders a:hover .home-reminder__text { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.home-reminder__when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--fg-muted); font-size: var(--text-xs); line-height: var(--leading-xs); font-variant-numeric: var(--figures-data); }
.home-reminder__text { font-size: var(--text-sm); line-height: var(--leading-sm); overflow-wrap: anywhere; }
.home-reminder__job { color: var(--fg-subtle); font-size: var(--text-xs); line-height: var(--leading-xs); }
.home-panel-empty { align-items: flex-start; }
.home-panel-empty .icon { margin-top: 1px; }
.home-panel .hub-card__body > .btn { margin: var(--space-1) 0 var(--space-2) calc(-1 * var(--space-2)); }
.home-meetings { list-style: none; margin: 0; padding: 0; }
.home-meetings > li + li { border-top: 1px solid var(--border); }
.home-meetings > li:last-child .hub-landing__item { border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px); }
.home-footnote { padding: 0 var(--space-1); }

/* ---------------------------------------------------------------- phones and touch */
@media (max-width: 640px) {
  .home { gap: var(--space-5); padding-top: var(--space-5); }
  .home-layout { gap: var(--space-5); }
  .home-summary { gap: var(--space-2); }
  .home-stat { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); min-height: 0; padding: var(--space-3); }
  .home-stat__value { grid-row: auto; font-size: var(--text-3xl); line-height: var(--leading-3xl); }
  .home-stat__label { align-self: start; font-size: var(--text-xs); line-height: var(--leading-xs); }
  .home-stat__hint { display: none; }
  .home-list__head { padding-inline: var(--space-3); }
  .home-search { flex-basis: 100%; max-width: none; margin-left: 0; }
  .home-list > .home-work-list { padding-inline: var(--space-3); }
  .home-guide__body { padding-inline: var(--space-3); }
}
@media (pointer: coarse), (max-width: 480px) {
  .home-filters > button, .home-why > summary, .home-work__source { min-height: var(--target-touch); }
}

/* ---------------------------------------------------------------- embedded (the Teams side panel) */
[data-embed="side-panel"] .home { gap: var(--space-4); max-width: none; padding: var(--space-3) var(--space-3) var(--space-8); }
/* The meeting page pins a one-line masthead in the panel (hub.css); the Home's masthead carries the lead and
   the refresh line, so it stays in the flow and keeps its Shared kicker. */
[data-embed="side-panel"] .home-mast { position: static; gap: var(--space-2); margin: 0; padding: 0; border-bottom: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-embed="side-panel"] .home-mast .hub-mast__kicker { display: flex; }

/* ---------------------------------------------------------------- Windows contrast themes */
@media (forced-colors: active) {
  .home-stat { border-color: CanvasText; }
  .home-stat[aria-pressed="true"], .home-filters > [aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .home-stat__label::before { forced-color-adjust: none; background: CanvasText; }
  .home-reminders > li, .home-meetings > li + li, .home-work-list > li + li { border-top-color: CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .home-why__chevron, .home-guide__chevron { transition: none; }
}