/* The workspace uses the full reading width; setup lives in the Guidebook. */
.home-page { width: 100%; min-width: 0 }
.home-heading { width: 100%; margin: 14px 0 28px }
.home-heading h1 { margin: 0 0 16px; font-size: var(--t-article); line-height: 1.2 }
.home-heading p { margin: 0; color: var(--ink-2); font-size: var(--t-body) }
.home-welcome-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: var(--t-body) }
.home-welcome-actions a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500 }
.home-welcome-actions .public-primary { margin-top: 0 }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--site-gap); align-items: start }
.home-grid > * { min-width: 0 }
.home-projects { grid-column: 1; grid-row: 1 }
.home-sign-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px }
.home-sign-in h2 { margin: 0 0 4px; font-size: var(--t-title) }
.home-sign-in p { margin: 0; font-size: var(--t-body); color: var(--ink-2) }
.home-sign-in > a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 6px; font-size: var(--t-body); text-decoration: none }
.hm-flows { min-width: 0; padding-bottom: 20px; border-bottom: 1px solid var(--line) }
.hm-flows-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px }
.hm-flows-head h2, .hm-flows-empty h2 { margin: 0; font-size: var(--t-title) }
.hm-flows-head p { margin: 2px 0 0; color: var(--ink-2); font-size: var(--t-meta) }
.hm-flows-head > span { flex: none; color: var(--ink-3); font-size: var(--t-meta) }
.hm-flow-list { display: flex; gap: 12px; min-width: 0; margin: 0; padding: 0 0 10px; overflow-x: auto; list-style: none; scroll-snap-type: x proximity; scrollbar-width: thin }
.hm-flow-list > li { flex: 0 0 clamp(230px, 42%, 300px); min-width: 0; scroll-snap-align: start }
.hm-flow-card { display: flex; flex-direction: column; height: 100%; overflow: clip; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; text-decoration: none }
.hm-flow-card:hover { border-color: var(--ink-3); text-decoration: none }
.hm-flow-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.hm-flow-shot { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: clip; background: var(--panel-2); border-bottom: 1px solid var(--line) }
.hm-flow-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top }
.hm-flow-shot-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 12px; color: var(--ink-3); font-size: var(--t-meta); text-align: center }
.hm-flow-shot img:not([hidden]) + .hm-flow-shot-empty { display: none }
.hm-flow-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; min-width: 0; padding: 12px }
.hm-flow-copy > strong { display: -webkit-box; width: 100%; min-height: 2.8em; overflow: hidden; overflow-wrap: anywhere; font-size: var(--t-body); line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2 }
.hm-flow-purpose { display: -webkit-box; width: 100%; margin-top: 5px; overflow: hidden; color: var(--ink-2); font-size: var(--t-meta); line-height: 1.45; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2 }
.hm-flow-counts { margin-top: 8px; color: var(--ink-3); font: var(--t-meta)/1.45 var(--sans) }
.hm-flow-steps { display: flex; flex-direction: column; width: 100%; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line) }
.hm-flow-steps > span { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 3px 0; overflow-wrap: anywhere; color: var(--ink-2); font-size: var(--t-meta); line-height: 1.4 }
.hm-flow-steps i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink-3); font: normal var(--t-micro)/1 var(--sans) }
.hm-flow-steps em { margin-top: 4px; color: var(--ink-3); font: normal var(--t-micro)/1.4 var(--sans) }
.hm-flow-open { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-top: auto; padding-top: 12px; font-size: var(--t-body-2); font-weight: 500 }
.hm-flow-open .hm-go { width: 6px; height: 6px }
.hm-flows-empty { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px }
.hm-flows-empty strong { display: block; margin-top: 12px; font-size: var(--t-body) }
.hm-flows-empty p { max-width: 58ch; margin: 4px 0 0; color: var(--ink-2); font-size: var(--t-body-2); line-height: 1.55 }
.hm-flows-empty > a { display: inline-flex; align-items: center; flex: none; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 6px; font-size: var(--t-body-2); text-decoration: none }
.home-example { min-width: 0; margin: 0; padding: 1.25rem; border-radius: .75rem; background: var(--well) }
.home-example figcaption { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 1.5rem; font-size: var(--t-body) }
.home-example figcaption .public-primary { margin: 0; flex: none; font-size: var(--t-body); padding: 8px 14px }
.home-example-note { margin: 16px 0 0; color: var(--ink-2); font-size: var(--t-body-2) }
.home-flow-hint { display: none }
.home-example figcaption strong, .home-example figcaption span { display: block }
.home-example figcaption span { color: var(--ink-2); margin-top: .25rem }
.home-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; gap: .75rem }
.home-flow > li { min-width: 0; position: relative }
.home-flow h2 { font-size: var(--t-body-2); margin: 0 0 .75rem; min-height: 3.25em; display: flex; align-items: start; gap: .4rem }
.home-flow h2 span { display: inline-grid; place-items: center; background: var(--panel); border: 1px solid var(--line-2); border-radius: 50%; min-width: 1.5em; height: 1.5em }
/* Keep the unscaled iframe out of flow; only its scaled viewport determines the preview height. */
.home-frame { box-sizing: content-box; aspect-ratio: 390 / 640; overflow: clip; position: relative; background: var(--panel); border: 1px solid var(--line-2); border-radius: .2rem }
.home-frame iframe { position: absolute; top: 0; left: 0; display: block; width: 390px; height: 640px; border: 0; transform: scale(var(--preview-scale, .4)); transform-origin: top left; pointer-events: none }
.home-state-label, .home-state-branch p { margin: .5rem 0; font-size: var(--t-body-2); line-height: 1.45 }
.home-state-branch { margin-left: .4rem; padding: .1rem 0 0 .65rem; border-left: 1px solid var(--ink-3); color: var(--ink-2) }
.home-state-branch p { position: relative; padding: .45rem; background: var(--panel); border: 1px solid var(--line-2); border-radius: .2rem }
.home-state-branch p::before { content: ""; width: .65rem; position: absolute; right: 100%; top: 50%; border-top: 1px solid var(--ink-3) }
.home-example-action { display: flex; align-items: center; gap: 1rem; justify-content: space-between; margin-top: 1.5rem }
.home-example-action p { font-size: var(--t-body-2); color: var(--ink-2); margin: 0; max-width: 28ch }
.home-example-action .public-primary { margin: 0; flex: none; font-size: var(--t-body) }

.home-reading { grid-column: 1; grid-row: 2; padding-top: 0 }
.home-reading > div { display: flex; justify-content: space-between; align-items: center; gap: 12px }
.home-reading h2 { margin: 0; font-size: var(--t-title) }
.home-reading > div > a { font-size: var(--t-body-2) }
.home-reading ul { list-style: none; padding: 0; margin: 8px 0 0 }
.home-reading li { padding: 12px 0; border-bottom: 1px solid var(--line) }
.home-reading li a { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--t-body); font-weight: 500 }
.home-reading li p { margin: 2px 0; color: var(--ink-2); font-size: var(--t-body-2) }
@media (max-width: 76rem) {
  .home-flow h2 { min-height: 4.5em }
  .home-projects, .home-reading { grid-column: 1; grid-row: auto }
}
@media (max-width: 48rem) {
  .home-heading { margin-top: 0 }
  .home-example { padding: 16px 12px }
  .home-example figcaption { align-items: flex-start; gap: 12px; flex-wrap: wrap }
  .home-flow-hint { display: block; color: var(--ink-2); font-size: var(--t-body-2); margin: 0 0 12px }
  .home-flow { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 14px; scrollbar-width: thin }
  .home-flow > li { flex: 0 0 calc(100% - 20px); scroll-snap-align: start }
  .home-flow h2 { align-items: center; min-height: 32px; font-size: var(--t-body) }
  .home-flow h2 span { display: inline-grid; width: 1.5em }
  .home-state-branch { padding-left: 6px; margin-left: 1px }
  .home-state-branch p { padding: 5px }
  .home-state-branch p::before { width: 6px }
  .home-example-action { display: block }
  .home-example-action p { max-width: none; margin-bottom: 12px }
  .home-example-action .public-primary { justify-content: center; width: 100% }
  .home-reading > div { flex-wrap: wrap }
  .hm-flows-head { align-items: start }
  .hm-flow-list > li { flex-basis: min(82vw, 280px) }
  .hm-flows-empty { align-items: flex-start; flex-direction: column }
}

/* An inbox first, then the selected project's existing canvas and flow navigation. */
.workspace-page .hm-work { padding: 0; border: 0; gap: var(--site-gap); background: transparent }
.hm-inbox { min-width: 0; scroll-margin-top: var(--site-gap) }
.public-page .hm-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.hm-search { margin: 0 }
.hm-search-controls { display: flex; align-items: center; gap: .75rem; position: relative }
.hm-search input[type="search"] { min-width: 0; flex: 1; min-height: 2.75rem; padding: .65rem 2.25rem .65rem .75rem; border: 1px solid var(--line-2); border-radius: .4rem; background: var(--panel); color: var(--ink); font: var(--t-body)/1.5 var(--sans) }
.hm-search kbd { color: var(--ink-3); font: var(--t-meta)/1.5 var(--mono) }
.hm-search button { min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--accent); border-radius: .4rem; background: var(--accent); color: var(--panel); font: 500 var(--t-body)/1.5 var(--sans); cursor: pointer }
.hm-search a { font-size: var(--t-body-2) }
.hm-search-help { font-size: var(--t-body-2); color: var(--ink-2) }
.hm-search-help summary { font-weight: 400 }
.hm-search-help p { margin: 0 0 .75rem }
.hm-search-help dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 1rem; margin: .75rem 0 }
.hm-search-help dt { color: var(--ink); font: var(--t-meta)/1.6 var(--mono) }
.hm-search-help dd { margin: 0 }
.hm-search-help > a { display: inline-flex; min-height: 2.75rem; align-items: center; margin-right: 1rem }
.hm-inbox-filters { display: flex; flex-wrap: wrap; gap: .25rem 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem }
.hm-inbox-filters a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--t-body-2); text-decoration: none; color: var(--ink-2); border-bottom: 2px solid transparent }
.hm-inbox-filters a[aria-current] { color: var(--ink); border-color: var(--gold); font-weight: 600 }
.hm-more-filters { position: relative; font-size: var(--t-body-2); margin-left: auto }
.hm-more-filters summary { color: var(--ink-2); font-weight: 400 }
.hm-more-filters:has(a[aria-current]) summary { color: var(--ink); font-weight: 600 }
.hm-more-filters > div { position: absolute; right: 0; top: 100%; z-index: 2; display: flex; flex-direction: column; width: max-content; max-width: min(18rem, 85vw); padding: .5rem 1rem; border: 1px solid var(--line-2); border-radius: .4rem; background: var(--panel); box-shadow: var(--shadow) }
.hm-inbox-group { margin-top: 1.5rem }
.hm-inbox-group h3 { display: flex; align-items: center; gap: .65rem; margin: 0 0 .5rem; font-size: var(--t-body); font-weight: 600 }
.hm-inbox-group h3 span { color: var(--ink-2); font-size: var(--t-meta); font-weight: 400 }
.hm-inbox-group ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.hm-inbox-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7rem, 10rem) auto; align-items: center; column-gap: 1.25rem; min-height: 6.5rem; padding: .9rem .5rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink) }
.hm-inbox-row:hover { background: var(--panel-2); text-decoration: none }
.hm-inbox-copy { min-width: 0; display: flex; flex-direction: column; gap: .3rem }
.hm-inbox-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 500 var(--t-body)/1.5 var(--sans) }
.hm-inbox-subtitle { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); font-size: var(--t-body-2) }
.hm-inbox-meta { display: flex; flex-wrap: wrap; gap: .15rem .75rem; color: var(--ink-3); font-size: var(--t-meta) }
.hm-inbox-meta > * { min-width: 0; overflow-wrap: anywhere }
.hm-inbox-meta b { font-weight: 500; color: var(--ink-2) }
.hm-inbox-status { font-size: var(--t-meta); color: var(--ink-2) }
.hm-inbox-status[data-state="review"] { color: var(--new) }
.hm-inbox-status[data-state="blocked"] { color: var(--crit) }
.hm-inbox-status[data-state="merged"] { color: var(--ink); font-weight: 500 }
.hm-inbox-action { display: flex; align-items: center; gap: .5rem; justify-self: end; font-size: var(--t-body-2); font-weight: 500 }
.hm-inbox-group[data-group="review"] ol { border-top-color: var(--accent-line) }
.hm-inbox-empty { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1.5rem; background: var(--panel-2); font-size: var(--t-body) }
.hm-inbox-empty p { margin: 0; color: var(--ink-2) }
.hm-inbox-pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 1.25rem; margin-top: 1rem; font-size: var(--t-body-2) }
.hm-inbox-pagination span { margin-right: auto; color: var(--ink-2) }
.hm-inbox-pagination a { display: inline-flex; align-items: center; min-height: 2.75rem }
.hm-inbox + .hm-work-head { margin-top: var(--site-gap); padding-top: var(--site-gap); border-top: 1px solid var(--line-2) }
@media (max-width: 48rem) {
  .hm-search kbd { display: none }
  .hm-search-controls { flex-wrap: wrap; gap: .5rem }
  .hm-search-controls > a { flex-basis: 100%; min-height: 2.75rem; display: flex; align-items: center }
  .hm-search-help dl { grid-template-columns: minmax(0, 1fr) }
  .hm-search-help dd { margin-bottom: .5rem }
  .hm-inbox-row { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; padding-inline: 0 }
  .hm-inbox-copy { grid-column: 1 / -1 }
  .hm-inbox-status { grid-column: 1 }
  .hm-inbox-action { grid-column: 2 }
}

/* Only the data rows/cards get delayed placeholders; navigation and native search remain usable. */
#home-data[data-state="loading"] { min-height: 32rem }
.hm-home-rows { min-height: 14rem; padding: 1rem 0; color: var(--ink-2); font-size: var(--t-body-2) }
.hm-home-projects-pending { min-height: 8rem; padding: .5rem 1.125rem; color: var(--ink-2); font-size: var(--t-body-2) }
.hm-home-rows > div { display: grid; gap: .75rem; margin-top: 1rem; visibility: hidden }
.hm-home-rows i { display: block; height: 3rem; border-radius: .375rem; background: var(--panel-2) }
.hm-home-cards { display: flex; gap: .75rem; visibility: hidden }
.hm-home-cards i { display: block; flex: 1; height: 9rem; border: .0625rem solid var(--line); border-radius: .5rem; background: var(--panel-2) }
.home-show-skeleton .hm-home-rows > div, .home-show-skeleton .hm-home-cards { visibility: visible }
#home-data[data-state="error"] .hm-home-rows, #home-data[data-state="error"] .hm-home-cards { display: none }
#home-load-error { margin: 0 0 1.5rem; padding: 1rem; border: .0625rem solid var(--line); border-radius: .5rem }
#home-load-error[hidden] { display: none }
#home-load-error button, #home-load-error a { margin-inline-end: 1rem }